generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
157 lines (151 loc) · 8.32 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
<!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">
<meta name="description" content="Whack-A-Marmot - Game for all ages. How may can you whack?">
<title>Whack-A-Marmot</title>
<link rel="icon" type="image/x-icon" href="assets/media/icons/logo.ico">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="loader">
<h2>Waking up the marmots...</h2>
</div>
<header>
<div id="music-button" class="button button__music">
<audio src="assets/media/audio/zither-polka-alpenmusik-music-from-the-alps-1394.mp3"
class="button__music--audio"
controls autoplay loop></audio>
<span class="fa-stack fa-2x">
<i class="fa-solid fa-music fa-stack-1x fa-inverse music"></i>
<i class="fa-solid fa-slash fa-stack-1x silent active"></i>
</span>
</div>
<div id="exit-btn" class="button button__exit hidden">
<span class="fa-stack fa-2x">
<i class="fa-solid fa-door-open fa-stack-1x fa-inverse"></i>
</span>
</div>
</header>
<main id="game-area">
<section class="layered-content">
<div class="text">
<div class="title border border-thick">
<h1>Whack-A-Marmot</h1>
</div>
<div class="buttons game-buttons border border-thick"></div>
</div>
<div class="holes container" data-type="regular">
<div class="holes-container"></div>
</div>
</section>
<section id="modal-play" class="modal modal-play container border border-thick hidden" data-type="regular">
<h2>Enter your name:</h2>
<label for="player-name">
<input id="player-name" class="border border-thin"
title="Username must be at least 4 characters, without spaces" type="text"
data-input="username"
pattern="[a-zA-Z0-9]+" minlength="4" required="required">
</label>
<span id="validation-message"
class="hidden-message">Username must be at least 4 characters, without spaces</span>
<button type="submit" data-type="add-player">Continue</button>
</section>
<section id="modal-instructions" class="modal modal-instructions container border border-thick hidden"
data-type="regular">
<button class="modal__button--close"><i class="fa-solid fa-xmark"></i></button>
<div id="carousel-instructions" class="carousel">
<h2>How to Play</h2>
<div class="carousel__area">
<div class="carousel__page">
<div class="instructions container layered-content" data-type="regular">
<img class="modal__media layered-content__media" loading="lazy" srcset="assets/media/images/marmot/xs/marmot_edited-xs_1x.png 300w,
assets/media/images/marmot/sm/marmot_edited-sm_1x.png 800w,
assets/media/images/marmot/md/marmot_edited-md_1x.png 1000w,
assets/media/images/marmot/lg/marmot_edited-lg_1x.png 1200w"
src="assets/media/images/marmot/xl/marmot_edited-xl_1x.png"
sizes="(min-width: 2420px) 2000px,
(min-width: 720px) calc(94.76vw - 274px),
(min-width: 520px) calc(100vw - 96px),
calc(100vw - 32px)" alt="The marmot, your target">
<h3>See the marmot</h3>
</div>
</div>
<div class="carousel__page">
<div class="instructions container layered-content" data-type="regular">
<img class="modal__media layered-content__media" loading="lazy" srcset="assets/media/images/hammer-action/xs/hammer_without_action-xs_1x.png 300w,
assets/media/images/hammer-action/sm/hammer_without_action-sm_1x.png 800w,
assets/media/images/hammer-action/md/hammer_without_action-md_1x.png 1000w,
assets/media/images/hammer-action/lg/hammer_without_action-lg_1x.png 1200w"
src="assets/media/images/hammer-action/xl/hammer_without_action-xl_1x.png"
sizes="(min-width: 2420px) 2000px,
(min-width: 720px) calc(94.76vw - 274px),
(min-width: 520px) calc(100vw - 96px),
calc(100vw - 32px)" alt="The hammer, to hit the marmot with">
<h3>Whack the marmot</h3>
</div>
</div>
<div class="carousel__page">
<div class="instructions container layered-content" data-type="regular">
<img class="modal__media layered-content__media" loading="lazy" srcset="assets/media/images/marmot-hit/xs/marmot_hit-xs_1x.png 300w,
assets/media/images/marmot-hit/sm/marmot_hit-sm_1x.png 800w,
assets/media/images/marmot-hit/md/marmot_hit-md_1x.png 1000w,
assets/media/images/marmot-hit/lg/marmot_hit-lg_1x.png 1200w"
src="assets/media/images/marmot-hit/xl/marmot_hit-xl_1x.png"
sizes="(min-width: 2420px) 2000px,
(min-width: 720px) calc(94.76vw - 274px),
(min-width: 520px) calc(100vw - 96px),
calc(100vw - 32px)" alt="Marmot being whacked">
<h3>How many marmots can you whack?</h3>
</div>
</div>
</div>
<button type="button" class="carousel__previous"><i class="fa-solid fa-chevron-left"></i></button>
<button type="button" class="carousel__next"><i class="fa-solid fa-chevron-right"></i></button>
</div>
</section>
<section id="modal-settings" class="modal modal-settings container border border-thick hidden"
data-type="regular">
<button class="modal__button--close"><i class="fa-solid fa-xmark"></i></button>
<h2>Settings</h2>
<div class="settings-buttons button-container container" data-type="regular">
<strong>Light or dark mode</strong>
<input type="checkbox" id="settings-buttons__mode"
class="toggle settings-buttons__mode--toggle" data-input="display" data-type="toggle">
<label for="settings-buttons__mode"><span class="settings__mode--light"
data-display="light"><i
class="fa-regular fa-lightbulb"></i> Light</span><span
class="settings__mode--dark off" data-display="dark"><i
class="fa-solid fa-lightbulb"></i> Dark</span></label>
<strong>How fast can you manage?</strong>
<input type="checkbox" id="settings-buttons__play"
class="toggle settings-buttons__play--toggle" data-input="difficulty" data-type="toggle">
<label for="settings-buttons__play"><span
class="settings__mode--easy" data-difficulty="easy"><i
class="fa-solid fa-couch"></i> Easy</span><span
class="settings__mode--hard off" data-difficulty="hard"><i
class="fa-solid fa-heart-crack"></i> Hard</span></label>
</div>
</section>
<div id="modal-overlay" class="modal__overlay hidden"></div>
<div class="hammer"></div>
</main>
<script src="https://kit.fontawesome.com/28847961b6.js" rel="preconnect" crossorigin="anonymous"></script>
<script src="assets/js/loader.js"></script>
<script src="assets/js/backgroundAudio.js"></script>
<script src="assets/js/modal.js"></script>
<script src="assets/js/carousel.js"></script>
<script src="assets/js/settings.js"></script>
<script src="assets/js/board.js"></script>
<script src="assets/js/game.js"></script>
<script src="assets/js/hammer.js"></script>
<script src="assets/js/gamePlay.js"></script>
<script>
window.addEventListener('load', () => {
window.gamePlay.initModule();
});
</script>
</body>
</html>