-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (78 loc) · 3.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wordle-clone</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
<script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
></script>
</head>
<body x-data="wordleClone" @keydown="handleKey">
<header>
<h1>Tama-Wordle</h1>
</header>
<div id="alerts" x-show="alerts.length !== 0">
<template x-for="alert in alerts" :key="alert._id">
<div class="alert" x-text="alert.message"></div>
</template>
</div>
<div x-show="modal.show" id="modal">
<div class="content" @click.outside="modal.destroy()">
<h2 x-text="modal.text"></h2>
<button class="replay-btn" @click="replay()">Play Again</button>
</div>
</div>
<main id="board">
<template x-for="guess in guesses" :key="guess._id">
<div class="row" :class="guess.class" :id="`row_${guess._id}`">
<template x-for="letter in guess.letters" :key="letter._id">
<div
class="letter"
x-text="letter.text"
:class="letter.class"
></div>
</template>
</div>
</template>
</main>
<div id="keyboard">
<button class="key" @click="addKey('Q')" :class="keys['Q']">Q</button>
<button class="key" @click="addKey('W')" :class="keys['W']">W</button>
<button class="key" @click="addKey('E')" :class="keys['E']">E</button>
<button class="key" @click="addKey('R')" :class="keys['R']">R</button>
<button class="key" @click="addKey('T')" :class="keys['T']">T</button>
<button class="key" @click="addKey('Y')" :class="keys['Y']">Y</button>
<button class="key" @click="addKey('U')" :class="keys['U']">U</button>
<button class="key" @click="addKey('I')" :class="keys['I']">I</button>
<button class="key" @click="addKey('O')" :class="keys['O']">O</button>
<button class="key" @click="addKey('P')" :class="keys['P']">P</button>
<div class="key-spacer"></div>
<button class="key" @click="addKey('A')" :class="keys['A']">A</button>
<button class="key" @click="addKey('S')" :class="keys['S']">S</button>
<button class="key" @click="addKey('D')" :class="keys['D']">D</button>
<button class="key" @click="addKey('F')" :class="keys['F']">F</button>
<button class="key" @click="addKey('G')" :class="keys['G']">G</button>
<button class="key" @click="addKey('H')" :class="keys['H']">H</button>
<button class="key" @click="addKey('J')" :class="keys['J']">J</button>
<button class="key" @click="addKey('K')" :class="keys['K']">K</button>
<button class="key" @click="addKey('L')" :class="keys['L']">L</button>
<div class="key-spacer"></div>
<button class="key action" @click.throttle.800ms="submitWord()">
ENTER
</button>
<button class="key" @click="addKey('Z')" :class="keys['Z']">Z</button>
<button class="key" @click="addKey('X')" :class="keys['X']">X</button>
<button class="key" @click="addKey('C')" :class="keys['C']">C</button>
<button class="key" @click="addKey('V')" :class="keys['V']">V</button>
<button class="key" @click="addKey('B')" :class="keys['B']">B</button>
<button class="key" @click="addKey('N')" :class="keys['N']">N</button>
<button class="key" @click="addKey('M')" :class="keys['M']">M</button>
<button class="key action" @click="deleteLetter()">DEL</button>
</div>
</body>
</html>