-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (107 loc) · 4.37 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
<!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">
<!-- animation library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- fontawesome library -->
<script src="https://kit.fontawesome.com/6e358658ed.js" crossorigin="anonymous"></script>
<!-- favicon -->
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
<!-- styles -->
<link rel="stylesheet" href="./frontend/dist/styles/app.css">
<title>WordScramble | Treehouse</title>
</head>
<body>
<textarea id="shareMessage"></textarea>
<div class="overlay" id="overlay">
<!-- modal -->
<div class="modal-container" id="modalContainer">
<div class="modal">
<p class="title">How To Play</p>
<p class="description">This game will put your brain to the test! A random word will appear on the screen all jumbled up. You have <span class="accent"><span id="timeLimit"></span> seconds</span> to figure out what the word is. Get it right and you'll instantly move on to the next word and increase your streak, get it wrong and you'll lose and have to start over. How high can you get your streak before you fail?</p>
<button id="closeModal">Okay</button>
</div>
</div>
<!-- title -->
<h1 class="game-title" id="gameTitle"><span class="accent">w</span>ord<span class="accent">s</span>cramble</h1>
<!-- game stats -->
<div class="game-stats" id="gameStats">
<div class="header-container">
<h3 class="header-text">The word was: <span class="current-word accent"></span></h3>
</div>
<div class="stat-container">
<div class="streaks-container">
<p class="best-streak">Your best streak ever: <span class="accent"></span></p>
<p class="current-streak">Your streak this game: <span class="accent"></span></p>
</div>
<button class="share" id="share">Share</button>
</div>
</div>
<!-- game buttons -->
<div class="btn-group">
<button id="howToPlay">How To Play</button>
<button id="startNewGame">Start New Game</button>
</div>
</div>
<main class="gameboard" id="gameboard">
<header>
<h1><span class="accent">w</span>ord<span class="accent">s</span>cramble</h1>
<div class="streak-container">
<p class="best-streak">Best Streak: <span class="accent">0</span></p>
<p class="current-streak">Current Streak: <span class="accent">0</span></p>
</div>
</header>
<section class="scramble">
<ul class="scrambled-word-container" id="scrambledWordContainer">
</ul>
<ul class="scrambled-word-guess-container" id="scrambledWordGuessContainer">
</ul>
</section>
<section class="progress-bar">
<div class="progress" id="progress"></div>
</section>
<section class="keyboard" id="keyboard">
<ul>
<li>q</li>
<li>w</li>
<li>e</li>
<li>r</li>
<li>t</li>
<li>y</li>
<li>u</li>
<li>i</li>
<li>o</li>
<li>p</li>
</ul>
<ul>
<li>a</li>
<li>s</li>
<li>d</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>j</li>
<li>k</li>
<li>l</li>
</ul>
<ul>
<li>z</li>
<li>x</li>
<li>c</li>
<li>v</li>
<li>b</li>
<li>n</li>
<li>m</li>
<li class="backspace-key"><i class="fa-solid fa-delete-left"></i></li>
</ul>
</section>
<section class="branding">
<img src="./frontend/assets/thlogo.png" alt="th-logo"><p>treehouse</p>
</section>
</main>
<script type="module" src="./frontend/src/scripts/app.js"></script>
</body>
</html>