-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (172 loc) · 9.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<!-- The icons used in this project were made by https://www.flaticon.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="./client/assets/mancala-logo.png">
<link rel="stylesheet" href="./client/styles/mancala.css">
<link rel="stylesheet" href="./client/styles/navigation/navigation.css">
<link rel="stylesheet" href="./client/styles/navigation/menus.css">
<link rel="stylesheet" href="./client/styles/navigation/user-area.css">
<link rel="stylesheet" href="./client/styles/menu-contents/play-content.css">
<link rel="stylesheet" href="./client/styles/menu-contents/instructions-content.css">
<link rel="stylesheet" href="./client/styles/menu-contents/leaderboard-content.css">
<link rel="stylesheet" href="./client/styles/main.css">
<link rel="stylesheet" href="./client/styles/game/game.css">
<link rel="stylesheet" href="./client/styles/game/header.css">
<link rel="stylesheet" href="./client/styles/game/board.css">
<link rel="stylesheet" href="./client/styles/pop-up.css">
<script type="module" src="./client/scripts/mancala.js"></script>
<title>The Rise of LTW ™️</title>
</head>
<body>
<nav>
<div id="navigation-logo">
<img src="./client/assets/mancala-logo.png" alt="Mancala Logo">
<p class="game-title">The Rise of LTW ™️</p>
<p class="game-title">(Mancala Edition)</p>
</div>
<div id="navigation-menus">
<table>
<tr id="play-button">
<td><img src="./client/assets/play-icon.png" alt="play"></td>
<td><p>Play</p></td>
</tr>
<tr id="instructions-button">
<td><img src="./client/assets/instructions-icon.png" alt="instructions"></td>
<td><p>Instructions</p></td>
</tr>
<tr id="leaderboard-button">
<td><img src="./client/assets/leaderboard-icon.png" alt="leaderboard"></td>
<td><p>Leaderboard</p></td>
</tr>
</table>
</div>
<div id="user-area">
<div id="navigation-authentication">
<form id="authentication-area">
<input class="navigation-input-field" type="text" name="nick" placeholder="Nickname" maxlength="25" required>
<input class="navigation-input-field" type="password" name="pass" placeholder="Password" maxlength="25" required>
</form>
<button type="button" id="enter-button" class="selected-button">Enter</button>
</div>
<div id="navigation-logout" class="hidden">
<p id="login-message">Welcome, $Username$</p>
<button type="button" id="logout-button" class="navigation-input-button deselected-button">Logout</button>
</div>
</div>
</nav>
<main>
<div id="menu-content">
<div id="play-content">
<div id="server-buttons" class="main-button-container">
<button type="button" id="global-server-button" class="main-button selected-button left-button">José Paulo Leal's Server</button>
<button type="button" id="group-server-button" class="main-button deselected-button right-button">Group's Server</button>
</div>
<div id="main-buttons" class="main-button-container">
<button type="button" id="singleplayer-button" class="main-button selected-button left-button">Singleplayer</button>
<button type="button" id="multiplayer-button" class="main-button deselected-button right-button">Multiplayer</button>
</div>
<form id="game-config">
<table>
<tr>
<td>Holes per side:</td>
<td><input name="holesPerSide" type="number" onKeyDown="return false" min="4" max="7" value="5" class="number deselected-button"></td>
</tr>
<tr>
<td>Seeds per hole:</td>
<td><input name="seedsPerHole" type="number" onKeyDown="return false" min="3" max="7" value="4" class="number deselected-button"></td>
</tr>
<tr>
<td>Play first:</td>
<td><input name="playFirst" type="checkbox" class="checkbox"></td>
</tr>
<tr id="difficulty-option">
<td>Difficulty:</td>
<td>
<select name="difficulty" class="deselected-button">
<option value="0">Easy</option>
<option value="1">Medium</option>
<option value="2">Hard</option>
</select>
</td>
</tr>
</table>
<button type="button" id="start-game-button" class="selected-button">Start Game</button>
</form>
</div>
<div id="instructions-content" class="hidden">
<h2>Board</h2>
<ul>
<li>Each player controls the holes on their side and the deposit to their right.</li>
</ul>
<h2>Playing</h2>
<ul>
<li>Each turn, the player removes all seeds from a hole, sowing the seeds.</li>
</ul>
<h2>Sowing</h2>
<ul>
<li>Sowing consists in placing one seed in each of the following holes in sequence, counter-clockwise;</li>
<li>If the next hole is the player's deposit, place a seed there too;</li>
<li>If the next hole is the adversary's deposit, don't place a seed there;</li>
<li>Keep sowing on the player's side if there are still seeds;</li>
<li>If the player's last seed was placed in the player's deposit, they get to play again;</li>
<li>If the player's last seed was placed in a player's empty hole, transfer the seeds on the adversary's oposite hole and and the player's last seed to the player's deposit.</li>
</ul>
<h2>End</h2>
<ul>
<li>The game finishes when one of the players can't make a move because all of its holes are empty;</li>
<li>The other player collects the seeds on its holes and places them on the deposit;</li>
<li>The player with more seeds on their deposit wins the game.</li>
</ul>
</div>
<div id="leaderboard-content" class="hidden">
<h2>Global Leaderboard</h2>
<table id="global-leaderboard">
<tr>
<th>Username</th>
<th>Victories</th>
<th>Games</th>
</tr>
</table>
<h2>Local Leaderboard</h2>
<table id="local-leaderboard">
<tr>
<th>Username</th>
<th>Victories</th>
<th>Games</th>
</tr>
</table>
<button type="button" id="update-leaderboard-button" class="selected-button">Update Leaderboards</button>
</div>
</div>
<div id="game-content">
<div id="game-header" class="padding-header">
<p id="leave-game-button">Give up</p>
<div>
<p id="current-player">Current Player: $Username$</p>
<p id="game-stopwatch"></p>
</div>
<div id="scoreboard"></div>
</div>
<div id="game-wrapper">
<div id="game-board">
<div id="left-storage" class="storage"></div>
<div id="holes">
<div class="side"></div>
<div class="side"></div>
</div>
<div id="right-storage" class="storage"></div>
</div>
</div>
</div>
</main>
<div id="pop-up-wrapper" class="hidden">
<div id="pop-up">
<p id="pop-up-title">Title</p>
<p id="pop-up-message">Message</p>
<div class="pop-up-button selected-button">Button</div>
</div>
</div>
</body>
</html>