-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (107 loc) · 4.55 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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MinesweeperJS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script defer src="minesweeper.js"></script>
</head>
<body>
<div id="main-window">
<h1 id="title">Minesweeper<span id="js">JS</span></h1>
<div id="menu">
<div>
<button id="dropdown-btn" class="block" onclick="toggleMenu()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
<div id="dropdown-content" class="block" style="display: none;">
<a href="?difficulty=beginner"><strong>Beginner</strong></a>
<a href="?difficulty=intermediate"><strong>Intermediate</strong></a>
<a href="?difficulty=expert"><strong>Expert</strong></a>
<button id="customField-btn" onclick="document.getElementById('customField-dialogue').style.display = 'block'"><strong>Custom</strong></button>
<hr />
<button id="highscores-btn" onclick="displayHighscores()"><strong>Highscores</strong></button>
</div>
</div>
<div>
<button id="reset-button" class="block" onclick="createField()">
<img src='assets/smiley.png' alt='Reset' />
</button>
</div>
<div>
<div id="counters" onclick="toggleCounters()">
<div id="digits">
<div id="timer" style="display: flex;">
<img id="timer_hundreds" src="assets/counter/zero.png" />
<img id="timer_tenths" src="assets/counter/zero.png" />
<img id="timer_ones" src="assets/counter/zero.png" />
</div>
<div id="flags" style="display: none;">
<img id="flags_hundreds" src="assets/counter/zero.png" />
<img id="flags_tenths" src="assets/counter/zero.png" />
<img id="flags_ones" src="assets/counter/zero.png" />
</div>
</div>
</div>
</div>
</div>
<div id="field" class="block">
<table>
</table>
</div>
</div>
<div id="customField-dialogue" class="block" style="display: none;">
<form>
<h2>Custom Field</h2>
<div>
<div>
<label for="height"><strong>Height</strong></label>
<input type="number" name="height" required />
<label for="width"><strong>Width</strong></label>
<input type="number" name="width" required />
<label for="mines"><strong>Mines</strong></label>
<input type="number" name="mines" required />
</div>
<div>
<button type="submit" class="block">Okay</button>
<button type="button" class="block" onclick="document.getElementById('customField-dialogue').style.display = 'none'">Cancel</button>
</div>
</div>
</form>
</div>
<div id="highscores-dialogue" class="block" style="display: none;">
<table>
<colgroup>
<col id="col-difficulty">
<col id="col-name">
<col id="col-time">
</colgroup>
<thead>
<tr>
<th><strong>Difficulty</strong></th>
<th><strong>Name</strong></th>
<th><strong>Time</strong></th>
</tr>
</thead>
<tr id="beginner">
<td>Beginner</td>
<td>Jeffrey</td>
<td>23.025 seconds</td>
</tr>
<tr id="intermediate">
<td>Intermediate</td>
<td>Maria</td>
<td>123.256 seconds</td>
</tr>
<tr id="expert">
<td>Expert</td>
<td>Joseph the VI, King of Minesweeperania</td>
<td>160.689 seconds</td>
</tr>
</table>
<button class="block" onclick="document.getElementById('highscores-dialogue').style.display = 'none'">Close</button>
</div>
</body>
</html>