-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (132 loc) · 5.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CROSSM4TCH</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="img/icon.png">
<link rel="apple-touch-icon" sizes="128x128" href="icon-128.png">
<!-- hide address bar on mobile shortcuts -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- TODO OG and twitter sharing metadata -->
</head>
<body>
<div class="container">
<div class="header">
<h1 class="title">CROSSM4TCH</h1>
<div id="links">
<img src="img/gear32x32.png" alt="Settings" title="Settings" id="settings_icon" width="32" height="32">
</div>
<p class="summary">Match tiles by color or number in order to claim a winning sequence.</p>
</div>
<hr>
<div id="settings">
<h2>Settings</h2>
<img src="img/close32x32.png" alt="Close" title="Close" id="close_icon" width="32" height="32">
<form>
<label>Board size:
<select name="boardsize" id="boardsize">
<option value="3">3x3</option>
<option value="4">4x4</option>
<option value="5">5x5</option>
<option value="6">6x6</option>
<option value="7">7x7</option>
<option value="8">8x8</option>
<option value="9">9x9</option>
<option value="10">10x10</option>
<option value="11">11x11</option>
<option value="12">12x12</option>
</select>
</label>
<label>AI Opponent
<input type="checkbox" name="ai" id="ai">
</label>
<label id="difficultyLabel">Difficulty:
<select name="difficulty" id="difficulty">
<option value="cakewalk">Cakewalk</option>
<option value="easy">Easy</option>
<option value="moderate">Moderate</option>
<option value="difficult">Difficult</option>
<option value="diabolical">Diabolical</option>
</select>
</label>
<label id="firstmoveLabel">Fist Move:
<select name="firstmove" id="firstmove">
<option value="human">Human</option>
<!-- <option value="computer">Computer</option>
<option value="alternating">Alternating</option>
<option value="random">Random</option>
<option value="winner">Winner</option>
<option value="loser">Loser</option> -->
</select>
</label>
</form>
<hr>
</div>
<div class="last-tile-info">
<div class="last-tile-tag">Last Tile:</div>
<div class="last-tile"></div>
</div>
<hr>
<div id="game">
<table class="grid">
<tr class="grid-row">
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
</tr>
<tr class="grid-row">
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
</tr>
<tr class="grid-row">
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
</tr>
<tr class="grid-row">
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
<td class="grid-cell"></td>
</tr>
</table>
<div id="gameStateInfo">
<div id="gameStateMessage"></div>
<button id="restartButton">Restart</button>
</div>
</div>
<hr>
<div class="howto">
<p><strong><em>To start:</em></strong> tap any tile on the outer ring of the game board to claim it.</p>
<p>Players alternate turns claiming tiles.</p>
<p>Only tiles that <strong>match either the color or the numeral</strong> of the previous tile can be claimed.</p>
<p><strong><em>To win:</em></strong> claim either a full <span id="winning_collections">row, column, diagonal, or 2x2 square</span> of tiles.</p>
<p>It is also possible to win by claiming a tile which has <strong>no available matching tiles</strong>.</p>
</div>
<hr>
<div class="credits">
<p>Created by Tyler Jaszkowiak.</p>
</div>
<hr>
<div class="sharing"></div>
</div>
<script src="js/util.js"></script>
<script src="js/cookies.js"></script>
<script src="js/enum.js"></script>
<script src="js/settings.js"></script>
<script src="js/cell_iterator.js"></script>
<script src="js/gameboard.js"></script>
<script src="js/opponent.js"></script>
<script src="js/actuator.js"></script>
<script src="js/application.js"></script>
</body>
</html>