-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
333 lines (317 loc) · 13 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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!doctype html>
<html class="h-full" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Title -->
<title>Tic Tac Toe</title>
<!-- Styles -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body class="h-full bg-dark-navy">
<!-- Loader -->
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-dark-navy transition-opacity"
id="loader"
>
<span class="loading loading-dots loading-lg bg-light-yellow"></span>
</div>
<!-- Game starter -->
<section class="fixed inset-0 bg-dark-navy" id="startGameModal">
<div class="mx-auto flex h-full w-full max-w-[500px] items-center px-5">
<h2 class="sr-only">Start game</h2>
<div class="flex w-full flex-col">
<!-- Logo -->
<div class="mx-auto mb-10 flex gap-2">
<img class="h-8 w-8 object-contain" src="img/x.svg" alt="X icon" />
<img class="h-8 w-8 object-contain" src="img/o.svg" alt="O icon" />
</div>
<!-- Choose X O -->
<form class="select-none font-outfit" id="gameSetupForm">
<div
class="mb-10 flex flex-col rounded-[15px] bg-semi-dark-navy px-6 pb-[30px] pt-6 shadow-dark-shadow"
>
<legend
class="mb-6 text-center text-[16px] font-bold uppercase leading-none tracking-[1px] text-silver"
>
Pick player 1’s mark
</legend>
<fieldset
class="mb-[17px] flex rounded-[10px] bg-dark-navy px-2 py-[9px]"
>
<input
class="my-input-x peer/x sr-only"
id="x"
type="radio"
name="playerPick"
value="x"
required
/>
<label
class="my-label-x flex w-2/4 cursor-pointer justify-center rounded-[10px] p-[11px] transition-colors hover:bg-silver_5 peer-checked/x:pointer-events-none peer-checked/x:bg-silver"
for="x"
><svg
class="my-svg-x text-silver transition-colors"
width="32"
height="32"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M53.2406 1.14742C52.0691 -0.0241513 50.1696 -0.0241497 48.998 1.14742L32 18.1454L15.002 1.14742C13.8304 -0.0241506 11.9309 -0.0241496 10.7594 1.14742L1.14742 10.7594C-0.0241497 11.9309 -0.0241481 13.8304 1.14742 15.002L18.1454 32L1.14742 48.998C-0.0241506 50.1696 -0.0241496 52.0691 1.14742 53.2406L10.7594 62.8526C11.9309 64.0241 13.8304 64.0241 15.002 62.8526L32 45.8546L48.998 62.8526C50.1696 64.0242 52.0691 64.0241 53.2406 62.8526L62.8526 53.2406C64.0242 52.0691 64.0241 50.1696 62.8526 48.998L45.8546 32L62.8526 15.002C64.0242 13.8304 64.0241 11.9309 62.8526 10.7594L53.2406 1.14742Z"
fill="currentColor"
/>
</svg>
</label>
<input
class="my-input-o peer/o sr-only"
id="o"
type="radio"
name="playerPick"
value="o"
checked
required
/>
<label
class="my-label-o flex w-2/4 cursor-pointer justify-center rounded-[10px] p-[11px] transition-colors hover:bg-silver_5 peer-checked/o:pointer-events-none peer-checked/o:bg-silver"
for="o"
>
<svg
class="my-svg-o text-silver transition-colors"
width="32"
height="32"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64C49.6731 64 64 49.6731 64 32ZM18.963 32C18.963 24.7998 24.7998 18.963 32 18.963C39.2002 18.963 45.037 24.7998 45.037 32C45.037 39.2002 39.2002 45.037 32 45.037C24.7998 45.037 18.963 39.2002 18.963 32Z"
fill="currentColor"
/>
</svg>
</label>
</fieldset>
<span
class="block text-center text-[14px] font-medium uppercase leading-none tracking-[0.88px] text-silver_50"
>Remember : x goes first</span
>
</div>
<div class="flex flex-col">
<input
class="js-with sr-only"
id="cpu"
type="radio"
name="with"
value="cpu"
required
/>
<label
class="mb-5 cursor-pointer rounded-[15px] bg-light-yellow px-[25px] pb-[25px] pt-[17px] text-center text-[20px] font-bold uppercase tracking-[1.25px] shadow-light-yellow-shadow transition hover:bg-light-yellow-hover active:scale-95 active:shadow-light-yellow-shadow-small"
for="cpu"
>New game (vs cpu)</label
>
<input
class="js-with sr-only"
id="player"
type="radio"
name="with"
value="player"
required
/>
<label
class="mb-5 cursor-pointer rounded-[15px] bg-light-blue px-[25px] pb-[25px] pt-[17px] text-center text-[20px] font-bold uppercase tracking-[1.25px] shadow-silver-shadow transition hover:bg-light-blue-hover active:scale-95 active:shadow-silver-shadow-small"
for="player"
>New game (vs player)</label
>
</div>
<!-- Setup submitter -->
<input class="sr-only" id="setupSubmitter" type="submit" />
</form>
</div>
</div>
</section>
<section class="flex h-full select-none items-center font-outfit">
<h2 class="sr-only">Game zone</h2>
<div class="mx-auto flex w-full max-w-[500px] flex-col gap-y-[19px] px-5">
<!-- Header -->
<header>
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="flex gap-2">
<img
class="h-8 w-8 object-contain"
src="img/x.svg"
width="32"
height="32"
alt="X icon"
/>
<img
class="h-8 w-8 object-contain"
src="img/o.svg"
width="32"
height="32"
alt="O icon"
/>
</div>
<!-- Turn -->
<span
class="-ml-5 flex items-center rounded-[10px] bg-semi-dark-navy px-[30px] pb-[19px] pt-[13px] shadow-dark-shadow-small"
>
<img
class="h-5 w-5 object-contain"
id="turn"
src="img/x.svg"
data-o="/img/o-small.svg"
data-x="/img/x.svg"
width="20"
height="20"
alt="X, O"
/>
<span
class="ml-[13px] text-[16px] font-bold uppercase tracking-[1px] text-silver"
>Turn</span
>
</span>
<!-- Refresh -->
<button
class="rounded-[10px] bg-silver p-4 shadow-silver-shadow-small outline-2 transition hover:bg-silver-hover focus:outline-dashed focus:outline-offset-4 focus:outline-light-yellow active:scale-95"
>
<img
class="h-5 w-5 object-contain"
src="img/refresh-icon.svg"
width="20"
height="20"
alt="Refresh icon"
/>
</button>
</div>
</header>
<!-- Main Content -->
<main class="grid grid-cols-3 grid-rows-3 gap-5" id="gameZone"></main>
<!-- Footer -->
<footer>
<dl class="grid select-text grid-cols-3 gap-x-[19px]">
<div
class="flex w-full flex-col items-center rounded-[15px] bg-light-blue px-[13px] pb-[13px] pt-[11px]"
>
<dt
class="text-[14px] font-medium uppercase tracking-[0.88px] text-dark-navy"
id="xStatus"
data-x="X"
data-you="you"
data-cpu="cpu"
data-p="p1"
></dt>
<dd class="text-[24px] font-bold" id="xScore">0</dd>
</div>
<div
class="flex w-full flex-col items-center rounded-[15px] bg-silver px-[13px] pb-[13px] pt-[11px]"
>
<dt
class="text-[14px] font-medium uppercase tracking-[0.88px] text-dark-navy"
>
Ties
</dt>
<dd class="text-[24px] font-bold" id="tieScore">0</dd>
</div>
<div
class="flex w-full flex-col items-center rounded-[15px] bg-light-yellow px-[13px] pb-[13px] pt-[11px]"
>
<dt
class="text-[14px] font-medium uppercase tracking-[0.88px] text-dark-navy"
id="oStatus"
data-o="O"
data-you="you"
data-cpu="cpu"
data-p="p2"
></dt>
<dd class="text-[24px] font-bold" id="oScore">0</dd>
</div>
</dl>
</footer>
</div>
</section>
<!-- Confirm start game modal -->
<dialog
class="modal font-outfit backdrop:bg-dark_50"
id="confirmGameStartModal"
>
<div
class="modal-box w-full max-w-full rounded-none bg-semi-dark-navy p-[66px] shadow-none"
>
<div
class="mx-auto mb-[31px] flex w-full max-w-[600px] flex-col items-center"
>
<h3
class="text-center text-[40px] font-bold uppercase tracking-[2.5px] text-silver"
>
Start game?
</h3>
<p class="mb-2 hidden text-silver" id="playerMessage">
If you're playing with a friend and not with a cpu, you can't choose
to be
<mark class="rounded-sm bg-silver p-1 leading-none text-dark-navy"
>x</mark
>
or
<mark class="rounded-sm bg-silver p-1 leading-none text-dark-navy"
>o</mark
>. Automatically the first player is
<mark class="rounded-sm bg-silver p-1 leading-none text-dark-navy"
>x</mark
>
and the second player is
<mark class="rounded-sm bg-silver p-1 leading-none text-dark-navy"
>o</mark
>.
</p>
</div>
<div class="flex justify-center">
<form method="dialog">
<button
class="mr-4 cursor-pointer rounded-[10px] bg-silver p-4 font-bold uppercase tracking-[1px] text-dark-navy shadow-silver-shadow-small transition hover:bg-silver-hover active:scale-95"
>
no, cancel
</button>
<button
class="cursor-pointer rounded-[10px] bg-light-yellow p-4 font-bold uppercase tracking-[1px] text-dark-navy shadow-light-yellow-shadow-small transition hover:bg-light-yellow-hover active:scale-95"
id="startGameButton"
>
yes, start
</button>
</form>
</div>
</div>
</dialog>
<!-- Templates -->
<template id="boxTemplate">
<button
class="js-box group/parent min-h-[140px] rounded-[15px] bg-semi-dark-navy p-[38px] shadow-dark-shadow transition focus:outline-none active:scale-95 active:shadow-dark-shadow-small"
>
<svg
class="js-box-svg pointer-events-none opacity-0 transition group-hover/parent:opacity-100 group-active/parent:scale-90"
width="100%"
height="100%"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<path class="js-box-path" stroke-width="2"></path>
</svg>
</button>
</template>
<script type="module" src="js/app.js"></script>
</body>
</html>