roller.github.io/index.html at main · JoleneRenee21/roller.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
   <head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="style.css">
		<title>Roller World</title>
   </head>
   <body>
		<h1>Welcome to Roller World!</h1>
		<div id = "flex-layout">
			<div id = "trackers">
				<div id = "counter">
					<label id = "count">0</label> miles skated<br>
					<br><button id = "skate" title = "Click to increase miles skated and unlock jobs">Skate!</button>
				</div>
				<div id = "money">
					$<label id = "dollars">0</label> dollars in wallet<br>
				</div>
			</div>
			<div id = "jobs" title = "Click to select a job and change income, one job can be worked at a time">
				<button id = "rink" hidden>Earn $0.60/min with a rental counter job at the skating rink</button>
				<button id = "sonic" hidden>Earn $1.20/min with a carhop job at Sonic</button>
				<button id = "coach" hidden>Earn $6/min with a skating coach job at the skating rink</button>
				<button id = "party" hidden>Earn $12/min with a performing job at birthday parties</button>
				<button id = "freestyle" hidden>Earn $18/min with a position on a freestyle team</button>
				<button id = "derby" hidden>Earn $24/min with a position on a travelling roller derby team</button>
				<button id = "manager" hidden>Earn $30/min with a manager job at the skating rink</button>
				<button id = "influencer" hidden>Earn $36/min as a skating influencer</button>
				<button id = "xGames" hidden>Earn $42/min as an X Games athlete</button>
				<button id = "olympics" hidden>Earn $48/min as an Olympic athlete</button>
			</div>
			<div id = "upgrades" title = "Click to purchase upgrades with earned income and increase distance traveled, multiple upgrades allowed">
				<div><button id = "laces">Upgrade laces to skate 0.1 miles faster when clicking</button> $<label id = "lacePrice">1</label></div>
				<div><button id = "bearings">Upgrade bearings to skate faster passively</button> $<label id = "bearingPrice">5</label></div>
				<div><button id = "wheels">Upgrade wheels to skate faster passively</button> $<label id = "wheelPrice">10</label></div>
				<div><button id = "plates">Upgrade plates to skate faster passively</button> $<label id = "platePrice">15</label></div>
				<div><button id = "boots">Upgrade boots to skate faster passively</button> $<label id = "bootPrice">25</label></div>
				<div><button id = "kneepads">Upgrade kneepads to skate 0.5 mile faster when clicking</button> $<label id = "kneepadPrice">50</label></div>
				<div><button id = "helmet">Upgrade helmet to skate faster passively</button> $<label id = "helmetPrice">50</label></div>
				<div><button id = "elbowPads">Upgrade elbow pads to skate faster passively</button> $<label id = "elbowPadPrice">75</label></div>
				<div><button id = "trucks">Upgrade trucks to skate faster passively</button> $<label id = "truckPrice">90</label></div>
				<div><button id = "cushions">Upgrade cushions to skate 1 mile faster when clicking</button> $<label id = "cushionPrice">100</label></div>
			</div>
		</div>
		<div id = "bottom-row">
			<div id = "save-functionality">
				<button id = "save" title = "Click to generate a string with your current game state">Save Game</button>
				<button id = "load" title = "Click to enter a string and load a saved game state">Load Game</button>
			</div>
			<div id = "message">
				<p><br>Click skate to start!</p>
			</div>
		</div>
		<script src="functionality.js"></script>
   </body>
</html>