-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (235 loc) · 16.4 KB
/
index.html
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A True Seattleite</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,700|Asap|Karla' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Fork me on GitHub ribbon from GitHub -->
<a href="https://github.com/ebrillhart"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6286ade715e9bea433b4705870de482a654f78a/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png"></a>
<!-- ******************************************************* -->
<!-- Header which is always present on-screen with game title-->
<!-- ******************************************************* -->
<div class="container" id="titlediv">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3" >
<h2 class="text-center" id="title">A TRUE SEATTLEITE</h2>
</div>
</div>
</div>
<!-- *************************************************************** -->
<!-- Home screen with options for game play, info, and rules of play -->
<!-- *************************************************************** -->
<div class="container" id="homescreen">
<!-- Row for overall homescreen content -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">
<!-- Row for the logo image -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4" id="shake">
<img id="homelogo" class="center-block img-responsive" src="images/whiteneedle.png">
</div>
</div>
<!-- Row for the larger game play and how to buttons -->
<div class="row" id="gamebuttons">
<!-- How-To Button -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<button class="btn btn-default pull-right" id="howtobutton" type="submit">Rules</button>
</div>
<!-- New Game button -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button class="btn btn-default pull-left" id="startgame" type="submit">Start</button>
</div>
</div>
<!-- Row for the smaller about button -->
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
<button type="button" id="about" class="btn btn-default btn-xs center-block">Info</button>
</div>
</div>
</div>
</div>
</div>
<!-- ******************************************************** -->
<!-- Rules of the game, which can be toggled from home screen -->
<!-- ******************************************************** -->
<div class="container" id="howto" hidden>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3" id="rules">
<h3 class="text-center" id="rulestitle">Do You Have What it Takes to be a Real Seattleite?</h3>
<p class="text-center" id="rulestext">Can you overcome the Seattle freeze and escape pitfalls marking you as a transplant? Make it from the beginning to the end of the board before the computer, with some help and hindrance from Seattle newcomer milestones and mishaps.</p>
<p class="text-center">You are green, and the Computer is blue. Click the Space Needle icon in the upper right corner to determine how many spaces you'll move. Every so often, you'll land on a square that will give you a bonus (sun) and move you further along in the game, or a penalty (cloud) that will knock you back. The first player to reach the end wins. Good luck, and may the realest Seattleite prevail!</p>
<!-- Home Button -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<button class="btn btn-default pull-right" id="howtohome" type="submit">Home</button>
</div>
<!-- New Game button -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button class="btn btn-default pull-left" id="howtostart" type="submit">Start</button>
</div>
</div>
</div>
</div>
<!-- ************** -->
<!-- The game board -->
<!-- ************** -->
<div class="container" id="game" hidden>
<div class="row" id="gamebanner">
<!-- Home Button -->
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 pull-left">
<button class="btn btn-default pull-right" id="gamehome" type="submit">Home</button>
</div>
<!-- Display of player turn and spaces to move -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" id="gametext">
<p class="text-center lead" id="playerturn">It's Player One's turn! Click the Space Needle to start playing.</p>
<p class="text-center" id="spacestext"></p>
</div>
<!-- The "spinner" for determining moves -->
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 pull-right" id="spindiv">
<img id="spinner" class="center-block img-responsive" src="images/whiteneedle.png">
<p class="text-center">Click to Spin</p>
</div>
</div>
<!-- The gameboard -->
<div class="row" id="rowtwo">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 square" id="zero" value="0">
<p class="text-center" id="start">You must be new here.</p>
</div>
</div>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 square" id="one" value="1">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="two" value="2">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="three" value="3">
<p class="text-center bonus"><i class="fa fa-sun-o"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="four" value="4">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="five" value="5">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="six" value="6">
<p class="text-center penalty"><i class="fa fa-cloud"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="seven" value="7">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="eight" value="8">
<p class="text-center bonus"><i class="fa fa-sun-o"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="nine" value="9">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="ten" value="10">
<p class="text-center penalty"><i class="fa fa-cloud"></i></p>
</div>
</div>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xs-offset-10 col-sm-offset-10 col-md-offset-10 col-lg-offset-10 square" id="eleven" value="11">
<p class="text-center bonus"><i class="fa fa-sun-o"></i></p>
</div>
</div>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 square" id="twentyone" value="21">
<p class="text-center bonus"><i class="fa fa-sun-o"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twenty" value="20">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="nineteen" value="19">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="eighteen" value="18">
<p class="text-center penalty"><i class="fa fa-cloud"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="seventeen" value="17">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="sixteen" value="16">
<p class="text-center bonus"><i class="fa fa-sun-o"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="fifteen" value="15">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="fourteen" value="14">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="thirteen" value="13">
<p class="text-center penalty"><i class="fa fa-cloud"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twelve" value="12">
</div>
</div>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 square" id="twentytwo" value="22">
<p class="text-center penalty"><i class="fa fa-cloud"></i></p>
</div>
</div>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 square" id="twentythree" value="23">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twentyfour" value="24">
<p class="text-center bonus"><i class="fa fa-sun-o"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twentyfive" value="25">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twentysix" value="26">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twentyseven" value="27">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twentyeight" value="28">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="twentynine" value="29">
<p class="text-center penalty"><i class="fa fa-cloud"></i></p>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="thirty" value="30">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 square" id="thirtyone" value="31">
<p class="text-center" id="end">Seattle Insider</p>
</div>
</div>
</div>
<!-- ************************************** -->
<!-- Win announcement at completion of game -->
<!-- ************************************** -->
<div class="container" id="wininfo" hidden>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4" id="winner">
<p class="lead text-center" id="wintext">A Player Wins!</p>
<!-- Home Button -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<button class="btn btn-default center-block" id="winhome" type="submit">Home</button>
</div>
<!-- New Game button -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button class="btn btn-default pull-left" id="winstart" type="submit">New Game</button>
</div>
</div>
</div>
</div>
<!-- ************************************* -->
<!-- General info about game credits, etc. -->
<!-- ************************************* -->
<div class="container" id="gameinfo" hidden>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4" id="infotext">
<h3 class="text-center" id="infohead">Game Info</h3>
<p class="text-center">Built from scratch by Emma Brillhart with HTML5/CSS3, Bootstrap, JavaScript, and jQuery.</p>
<p class="text-center"><a href="http://desktop.freewallpaper4.me/view/original/7083/aerial--photo-of-seattle.jpg">Background image source</a></p>
<p class="text-center">Space Needle icon created in Photoshop by Jenn Livermore from <a href="http://www.franticstamper.com/thumbnail.asp?file=assets/images/products/savvy%20stamps/sav-die-10017.jpg&maxx=400&maxy=0">this image</a></p>
<p class="text-center">All audio from <a href="http://www.freesound.org">Freesound.org</a></p>
<p class="text-center"><a href="https://github.com/ebrillhart/seattle-adventure">Source Code</a></p>
<p class="text-center"><small>Click the Space Needle on the Home Page for a fun surprise!</small></p>
<!-- Home Button -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">
<button class="btn btn-default center-block" id="infohome" type="submit">Home</button>
</div>
</div>
</div>
</div>
<!-- Scripts and end of game HTML -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>