-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (103 loc) · 4.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoMiasto</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameHeader">
<h1>
GoMiasto
<button id="aboutIcon" class="icons">
<img src="media/about.png" alt="about icon. a question mark">
</button>
<button id="settingsIcon" class="icons">
<img src="./media/settings.png" alt="settings icon. a silhouette of a wrench">
</button>
</h1>
</div>
<div id=mapBox>
</div>
<div id="guessBox">
<div class="flexrow">
<!-- ! the way the wrapper is set up is confusing! -->
<!-- the indentation should explain how it's supposed to work -->
<div class="autocomplete-wrapper" id="autoCompleteWrapper">
<form action="" autocomplete="off">
<input type="text" id="cityInput" placeholder="Enter Guess">
</div>
<button type="submit" class="buttons" id="submitBtn">Guess</button>
</form>
</div>
<table id="guessesTable">
<tr>
</tr>
</table>
</div>
<!-- modal boxes -->
<dialog id="chooseGameBox" class="modal">
<h2>Select Game</h2>
<ul class="gameTypeList">
<li>
<button type="button" class="gameTypeBtn" id="gameTypeUkCities">UK Cities</button>
</li>
<li>
<button type="button" class="gameTypeBtn" id="gameTypeUsCities">US Cities</button>
</li>
<li>
<button type="button" class="gameTypeBtn" id="gameTypeMcrMetro">Manchester Metrolink</button>
</li>
</ul>
</dialog>
<dialog id="settingsBox" class="modal">
<h2>Select Unit</h2>
<div class="radioContainerContainer">
<div class="radioContainer">
<input type="radio" class="radioButton" id="metric" name="measurement" value="metric">
<label for="metric">Metric</label><br>
<input type="radio" class="radioButton" id="imperial" name="measurement" value="imperial" checked>
<label for="imperial">Imperial</label><br>
</div>
</div>
<h2>Difficulty</h2>
<p>Warning: This will erase your current win streak.</p>
<ul class="gameTypeList">
<li>
<button type="button" class="gameTypeBtn" id="difficultyFunBtn">Fun (999 guesses)</button>
</li>
<li>
<button type="button" class="gameTypeBtn" id="difficultyEasyBtn">Easy (10 guesses)</button>
</li>
<li>
<button type="button" class="gameTypeBtn" id="difficultyMediumBtn">Medium (6 guesses)</button>
</li>
<li>
<button type="button" class="gameTypeBtn" id="difficultyHardBtn">Hard (4 guesses)</button>
</li>
</ul>
<button type="button" class="buttons" id="closeSettings">Ok</button>
</dialog>
<dialog id="endGame" class="modal">
<h2 id="endGameHeader"></h2>
<p id="endGamePara"></p>
<button type="button" class="buttons" id="playAgain">Play Again</button>
<button type="button" class="buttons" id="shareBtn">Share</button>
</dialog>
<dialog id="aboutBox" class="modal">
<p id=aboutPara></p>
<p>Guess a city or location to win. You have only 6 attempts, but each incorrect guess will give you the distance and direction to help with your next guess. Distance is given 'as the crow flies' and the location of the pin drop will typically be the city centre. Only valid answers can be submitted but if you're unsure then suggestions will pop up once you start typing.</p>
<p>Want to play a location that isn't provided yet? Feel free to request or contribute your ideas on the <a href="https://github.com/rlychrisg/GoMiasto" target="_blank">Github page.</a></p>
<button type="button" class="buttons" id="closeAbout">Close</button>
</dialog>
<dialog id="invalidGuessBox" class="modal">
<h2>Invalid Guess!</h2>
<p>If you are unsure just start typing and choose from options in the drop down menu</p>
</dialog>
</div>
<canvas id="confetti"></canvas>
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
<script src="gomiasto.js"></script>
</body>
</html>