Milestoneproject-2/index.html at main · Doc-Le/Milestoneproject-2 · GitHub

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CDN - Latest Stable Version Bootstrap 5.0.1 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <!-- Bootstrap Icons CDN - Latest Stable Version Bootstrap 1.5.0 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <!-- Custom stylesheets -->
    <link rel="stylesheet" href="css/styles.css" />
    <title>Comics Memory Game</title>
</head>

<body>
    <!--
    Splash screen to be showing first when loaded in the browser, then will hidden once
    3 second timeout expired and show menu panel
    -->
    <div id="splash" class="px-1 py-1 text-center pt-4">
        <img class="d-block mx-auto mb-4 img-fluid" src="images/logo.svg" alt="Comics Memory Game" />
        <h1 class="fs-1 fw-bold">Comics Memory Game</h1>
        <h2 class="fs-5 text-secondary">DC & Marvel characters</h2>
    </div>
    <!-- Main container will represent the game UI structure once visible -->
    <div id="main" class="container">
        <!-- Header to keep showing logo, title and some action buttoms -->
        <header class="d-flex justify-content-center py-3 mb-4 border-bottom">
            <div class="col-lg-6 mx-auto">
                <div class="row justify-content-center">
                    <div class="col-xs-6 text-center">
                        <img id="logo" class="me-2 pb-2" src="images/logo.svg" alt="Comics Memory Game" />
                        <label class="fs-5">Comics Memory Game</label>
                    </div>
                    <div class="col-xs-6 text-center">
                        <div id="headerActions" class="ms-4">
                            <button type="button" class="btn btn-outline-primary me-2" onclick="restart()">Restart</button>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#modalQuit">Quit</button>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Menu panel shows top 3 scores, start playing the game, show all scores and about the game -->
        <div id="menuPanel" class="px-1 py-1 my-1">
            <div class="col-sm-6 mx-auto my-4">
                <strong class="my-2">Top 3 Scores</strong>
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Gamer</th>
                            <th scope="col">Score</th>
                        </tr>
                    </thead>
                    <!-- Lists top 3 scores stored in localStorage -->
                    <tbody id="topScores"></tbody>
                </table>
            </div>
            <div class="col-sm-6 mx-auto my-5">
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <button type="button" class="btn btn-primary" onclick="play()">Play Game</button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                        data-bs-target="#modalScores" onclick="loadAllScores()">Scores</button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                        data-bs-target="#modalRules">
                        <i class="bi bi-info-square"></i>
                        Rules
                    </button>
                </div>
            </div>
        </div>
        <!-- Game panel contains game board with top counters and bottom actions -->
        <div id="gamePanel" class="px-1 py-1 my-1">
            <!-- Game board header where shows lives and moves-->
            <div class="col-lg-6 mx-auto">
                <div class="row">
                    <!-- Game board header lives counter-->
                    <div class="col-6">
                        <span class="mx-2 fs-5">
                            <i id="live1" class="bi-heart-fill fs-5"></i>
                            <i id="live2" class="bi-heart-fill fs-5"></i>
                            <i id="live3" class="bi-heart-fill fs-5"></i>
                        </span>
                    </div>
                    <!-- Game board header game moves counter-->
                    <div class="col-6 text-end">
                        <label class="fs-5">MOVES</label>
                        <span id="moves" class="fs-5 ms-2 fw-bolder">0</span>
                    </div>
                </div>
            </div>
            <!-- Game board where show cards-->
            <div class="col-lg-6 mx-auto text-center my-4">
                <div id="board" class="row row-cols-4 row-cols-sm-4 row-cols-md-4 row-cols-lg-4 g-1">
                </div>
            </div>
            <!-- Game board header where shows score and time-->
            <div class="col-lg-6 mx-auto">
                <div class="row">
                    <!-- Game board header score counter-->
                    <div class="col-6">
                        <label class="fs-5">SCORE</label>
                        <span id="score" class="fs-5 ms-2 fw-bolder">0</span>
                    </div>
                    <!-- Game board header remaining play time-->
                    <div class="col-6 text-end">
                        <label class="fs-5">TIME</label>
                        <span id="timer" class="fs-5 ms-2 fw-bolder">3m 00s</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal scores that lists all available cached scores -->
    <div class="modal fade" id="modalScores" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalScoresLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalScoresLabel">Game Scores</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Gamer</th>
                                <th scope="col">Score</th>
                            </tr>
                        </thead>
                        <tbody id="allScores"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal rules that shows game rules and score calculation -->
    <div class="modal fade" id="modalRules" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalRulesLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalRulesLabel">Game Rules</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal quit that shows before quit the game -->
    <div class="modal fade" id="modalQuit" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalQuitLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalQuitLabel">Exit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <i class="bi bi-question-square mx-2"></i>
                    <label>Are you sure you want to quit the game?</label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="quit()">Exit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keep Playing</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal win that shows winning the game -->
    <div class="modal fade" id="modalWin" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="modalWinLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalWinLabel">Congratulations</h5>
                </div>
                <div class="modal-body">
                    <figure class="text-center">
                        <blockquote class="blockquote">
                            <i class="bi bi-trophy mx-2"></i>
                            <label>Congratulations!</label>
                        </blockquote>
                        <figcaption class="blockquote-footer">
                            <p id="winMessage"></p>
                        </figcaption>
                    </figure>
                    <div id="playerNamePanel">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="playerName" placeholder="None">
                            <label for="playerName">Player Name</label>
                        </div>
                        <div id="selectPlayerNamePanel">
                            <p>OR</p>
                            <div class="form-floating">
                                <select class="form-select" id="selectPlayerName"
                                    aria-label="Floating label select example">
                                    <option selected>Select Player Name</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                                <label for="selectPlayerName">Select Existing Player Name</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                        onclick="saveAndStartBoard()">Play New
                        Game</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        onclick="saveAndQuit()">Exit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal game over that shows when loses the game -->
    <div class="modal fade" id="modalGameOver" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="modalGameOverLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalGameOverLabel">Game Over</h5>
                </div>
                <div class="modal-body">
                    <figure class="text-center">
                        <blockquote class="blockquote">
                            <i class="bi bi-emoji-dizzy mx-2"></i>
                            <label>Game Over</label>
                        </blockquote>
                        <figcaption class="blockquote-footer">
                            <label id="gameOverMessage"></label>
                        </figcaption>
                    </figure>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="startBoard()">New
                        Game</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        onclick="quit()">Exit</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery CDN – Latest Stable Version jQuery Core 3.6.0 slim minified -->
    <script src=" https://code.jquery.com/jquery-3.6.0.slim.min.js"
        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <!-- Bootstrap CDN - Latest Stable Version Bootstrap 5.0.1 minified bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>
    <!-- Custom index file representing the whole game global context -->
    <script src="js/index.js"></script>
</body>

</html>