Hugging Face's logo

Spaces:
havas79
/
Find_the_Neighboring_Countries
Running

App Files Community
havas79 commited on
Commit
6ef6ef2
•
1 Parent(s): 3c80752

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +230 -23
index.html CHANGED
@@ -1,24 +1,231 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>
13
- You can modify this app directly by editing <i>index.html</i> in the
14
- Files and versions tab.
15
- </p>
16
- <p>
17
- Also don't forget to check the
18
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank"
19
- >Spaces documentation</a
20
- >.
21
- </p>
22
- </div>
23
- </body>
24
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Find the Neighboring Countries!</title>
9
+ <link rel="stylesheet" href="styles.css">
10
+ <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
11
+ <link rel="icon" type="image/png" href="favicon.png">
12
+ <script src="helpers.js"></script>
13
+
14
+ <script>
15
+ const allCountries = new Object();
16
+ countryObjects.forEach((item) => { // countryObjects is loaded from helpers.js
17
+ var tempObject = {code2: item.code, name: item.name};
18
+ allCountries[item.code3] = tempObject;
19
+ })
20
+
21
+
22
+ document.addEventListener("DOMContentLoaded", () => {
23
+ //start a new Game
24
+ let gameRound = 1;
25
+ let gameScore = 0;
26
+ let rightChoises = 0;
27
+ let wrongChoises = 0;
28
+ const theNeighbours = [];
29
+ const restUrl = "https://restcountries.com/v2/alpha/";
30
+ //const restUrl = "https://restcountries.com/v3.1/alpha/";
31
+ const myCountryName = document.querySelector("#my-country-name");
32
+ const myCountryFlag = document.querySelector("#my-country-flag");
33
+ const displayRound = document.querySelector("#round");
34
+ const displayScore = document.querySelector("#score");
35
+ const neighboursPanel = document.querySelector("#neighbours-panel");
36
+
37
+
38
+ function findBorders(code3) {
39
+ return fetch(restUrl + code3)
40
+ .then((response) => {
41
+ if (response.status === 200) {
42
+ return response.json();
43
+ }
44
+ else throw new Error(response.status);
45
+ })
46
+ .then((data) => {
47
+ if (data.borders == null) {
48
+ console.log("No Borders!");
49
+ } else {
50
+ data.borders.forEach((item) =>{
51
+ theNeighbours.push(item);
52
+ })
53
+ }
54
+ })
55
+ }
56
+
57
+
58
+ function makeCountryChoises(borders) {
59
+ const totalCountries = borders.length * 3;
60
+ const choises = [...theNeighbours];
61
+ while (choises.length < totalCountries) {
62
+ var c = countryObjects[Math.floor(Math.random() * 249) + 1].code3;
63
+ if (!choises.includes(c)) {
64
+ choises.push(c);
65
+ }
66
+ }
67
+ return choises;
68
+ }
69
+
70
+
71
+ async function buildGamePanel() {
72
+ document.querySelector("html").style.cursor = "wait"; // cursor turns into a spinning wheel
73
+ // until the game panel is built
74
+ do { // Loop until a random country with borders is found
75
+ await findBorders(shuffleArray(countryObjects)[0].code3);
76
+ } while (theNeighbours.length == 0);
77
+
78
+ // Display the right choises to the console
79
+ const tmpArr = [];
80
+ theNeighbours.forEach(item => {
81
+ tmpArr.push(allCountries[item].name);
82
+ });
83
+ console.log(allCountries[countryObjects[0].code3].name, tmpArr);
84
+
85
+ const choises = makeCountryChoises(theNeighbours);
86
+ shuffleArray(choises);
87
+ choises.forEach((item) => {
88
+ if (theNeighbours.includes(item)) {
89
+ neighboursPanel.innerHTML += `<div class="neighbour-is-valid"><div id="flag">${getFlagEmoji(allCountries[item].code2)}</div> <div id="name">${allCountries[item].name}</div></div>`;
90
+ } else {
91
+ neighboursPanel.innerHTML += `<div class="neighbour-is-invalid"><div id="flag">${getFlagEmoji(allCountries[item].code2)}</div> <div id="name">${allCountries[item].name}</div></div>`;
92
+ }
93
+ })
94
+ document.querySelector("html").style.cursor = "default"; // cursor back to a normal pointer
95
+
96
+
97
+ // Build the game panel...
98
+ displayRound.innerHTML = `<div>Round:</div> <div>${gameRound}</div>`;
99
+ displayScore.innerHTML = `<div>Total Score:</div> <div>${gameScore}</div>`;
100
+ myCountryFlag.innerHTML = getFlagEmoji(countryObjects[0].code);
101
+ myCountryName.innerHTML = countryObjects[0].name;
102
+
103
+
104
+ // event listener to selecting a right country
105
+ document.querySelectorAll(".neighbour-is-valid").forEach(item => {
106
+ item.addEventListener("click", () => {
107
+ var txt = item.querySelector("#flag").textContent;
108
+ gameScore +=5;
109
+ displayScore.innerHTML = `<div>Total Score:</div> <div>${gameScore}</div>`;
110
+ item.className += " was-clicked";
111
+ rightChoises += 1;
112
+ document.querySelector("#bar").style.width = rightChoises/theNeighbours.length*100 + "%"
113
+ if (rightChoises == theNeighbours.length) {
114
+ endOfGame("win");
115
+ }
116
+
117
+ }, {once: true}) // use each eventListener just once
118
+
119
+ })
120
+
121
+
122
+ // event listener to selecting a wrong country
123
+ document.querySelectorAll(".neighbour-is-invalid").forEach(item => {
124
+ item.addEventListener("click", () => {
125
+ var txt = item.querySelector("#flag").textContent;
126
+ gameScore -= 3;
127
+ displayScore.innerHTML = `<div>Total Score:</div> <div>${gameScore}</div>`;
128
+ item.className += " was-clicked";
129
+ wrongChoises += 1;
130
+ if (wrongChoises == theNeighbours.length) {
131
+ endOfGame("lose");
132
+ }
133
+
134
+ }, {once: true}) // use each eventListener just once
135
+
136
+ })
137
+
138
+
139
+ function endOfGame(status) {
140
+ if (status == "win") {
141
+ document.querySelector("#next-round-panel").style.display = "flex";
142
+ document.querySelector("#next-round-panel").style.color = "blue";
143
+ document.querySelector("#next-round-panel").innerHTML = "You've found them all!";
144
+ document.querySelector("#btn-next-round").disabled = false;
145
+
146
+ } else {
147
+ document.querySelector("#next-round-panel").style.display = "flex";
148
+ document.querySelector("#next-round-panel").style.color = "#921308";
149
+ document.querySelector("#next-round-panel").innerHTML = "Sorry, you lose!";
150
+ document.querySelector("#btn-next-round").disabled = false;
151
+ }
152
+
153
+ if (gameRound == 10) {
154
+ setTimeout(() => {
155
+ alert(`Congratulations!!!\nThe game is over after 10 rounds!\nFinal Score: ${gameScore} points\n\nClick OK to play again.`);
156
+ location.reload();
157
+ }
158
+ ,500)
159
+ }
160
+
161
+ }
162
+
163
+ }
164
+
165
+
166
+ buildGamePanel();
167
+
168
+
169
+ // event listener to new game button
170
+ document.querySelector("#btn-new-game").addEventListener("click", () => {
171
+ let wc = confirm("Are you sure? Your score will be purged!");
172
+ if (wc == true) {
173
+ location.reload();
174
+ }
175
+ })
176
+
177
+ // event listener to next round button
178
+ document.querySelector("#btn-next-round").addEventListener("click", () => {
179
+ gameRound += 1
180
+ rightChoises = 0;
181
+ wrongChoises = 0;
182
+ theNeighbours.length = 0;
183
+ neighboursPanel.innerHTML = `<div id="next-round-panel"></div>`
184
+ document.querySelector("#next-round-panel").style.display = "none";
185
+ document.querySelector("#bar").style.width = 0 + "%"
186
+ document.querySelector("#btn-next-round").disabled = true;
187
+ buildGamePanel();
188
+ })
189
+
190
+ });
191
+ </script>
192
+
193
+ </head>
194
+
195
+ <body>
196
+ <div class="game-panel">
197
+
198
+ <div id="sidebar">
199
+ <div id="game-title">Find the Neighboring Countries!</div>
200
+ <hr>
201
+ <div id="round"></div>
202
+ <div id="score"></div>
203
+ <div id="buttons">
204
+ <button id="btn-next-round" disabled>Next Round</button>
205
+ <button id="btn-new-game">New Game</button>
206
+ </div>
207
+ </div>
208
+ <div id="countries">
209
+ <div id="my-country">
210
+ <div id="my-country-flag"></div>
211
+ <div id="my-country-name"></div>
212
+ </div>
213
+ <div id="progress">
214
+ <div id="bar"></div>
215
+ </div>
216
+ <div id="neighbours-panel">
217
+ <div id="next-round-panel"></div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ </body>
223
+
224
+ <script>
225
+ // The following applies only to macOS users.
226
+ if (navigator.appVersion.indexOf("Macintosh") > 0) {
227
+ document.body.style.fontFamily = '"Open Sans"';
228
+ }
229
+ </script>
230
+
231
+ </html>