-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (93 loc) · 3.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="A simple and free online chess clock with customizable time increments." />
<meta name="keywords" content="digital chess clock, online chess clock, free chess timer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui"/>
<title>Digital Chess Clock Online - Free Chess Timer</title>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link type="text/css" rel="stylesheet" href="/css/app.css" media="screen,projection"/>
</head>
<body class="background" x-data="getData()">
<main class="main">
<button
class="button-player button-player--rotated"
x-text="msToMin(player1Time)"
x-bind:disabled="isPlaying && isPlayer1Turn"
x-on:click="
isPlaying = true,
isPlayer1Turn = true,
player1Time += increment,
interval = setTimer(interval, updateTimePlayer2,$data)">
</button>
<div class="menu-bar">
<button
id="pause"
class="menu-bar__button"
x-bind:disabled="!isPlaying"
x-on:click="isPlaying = !isPlaying, clearInterval(interval)">
<i
class="menu-bar__icon material-icons"
x-text="isPlaying ? 'pause' : 'play_arrow'">
</i>
</button>
<button
id="restart"
class="menu-bar__button"
x-on:click="
player1Time = getTimeMillis(),
player2Time = getTimeMillis(),
increment = getIncMillis(),
isPlaying = false,
isPlayer1Turn = true,
clearInterval(interval)">
<i class="menu-bar__icon material-icons">replay</i>
</button>
<button
id="settings"
class="menu-bar__button"
x-on:click="openModal = true, isPlaying = false, clearInterval(interval)">
<i class="menu-bar__icon material-icons">settings</i>
</button>
</div>
<button
id="player2"
class="button-player"
x-text="msToMin(player2Time)"
x-bind:disabled="isPlaying && !isPlayer1Turn"
x-on:click="
isPlaying = true,
isPlayer1Turn = false,
player2Time += increment,
interval = setTimer(interval, updateTimePlayer1,$data)
">
</button>
</main>
<!-- The Modal -->
<dialog
id="settings-menu"
class="modal"
x-bind:class="openModal ? 'modal--opened' : ''">
<!-- Modal content -->
<form class="modal__content" method="get">
<span class="modal__close material-icons" x-on:click="openModal = false">close</span>
<h1 class="modal__title">Settings</h1>
<p>
<label class="modal__label" for="time">Minutes per player</label>
<input class="modal__input" id="newmin" type="number" name="time" pattern="\d*" min="1" max="180" x-bind:value="time"/>
</p>
<p>
<label class="modal__label" for="inc">Increment</label>
<input class="modal__input" id="newinc" type="number" name="inc" pattern="\d*" min="0" max="180" x-bind:value="inc"/>
</p>
<div class="modal__footer">
<input class="modal__submit" type="submit" id="clock" class="setclock" value="Set Clock">
</div>
</form>
</dialog>
<script src="/js/app.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>