|
<!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"> |
|
<title>Find the Neighboring Countries!</title> |
|
<link rel="stylesheet" href="styles.css"> |
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> |
|
<link rel="icon" type="image/png" href="favicon.png"> |
|
<script src="helpers.js"></script> |
|
|
|
<script> |
|
const allCountries = new Object(); |
|
countryObjects.forEach((item) => { |
|
var tempObject = {code2: item.code, name: item.name}; |
|
allCountries[item.code3] = tempObject; |
|
}) |
|
|
|
|
|
document.addEventListener("DOMContentLoaded", () => { |
|
|
|
let gameRound = 1; |
|
let gameScore = 0; |
|
let rightChoises = 0; |
|
let wrongChoises = 0; |
|
const theNeighbours = []; |
|
const restUrl = "https://restcountries.com/v2/alpha/"; |
|
|
|
const myCountryName = document.querySelector("#my-country-name"); |
|
const myCountryFlag = document.querySelector("#my-country-flag"); |
|
const displayRound = document.querySelector("#round"); |
|
const displayScore = document.querySelector("#score"); |
|
const neighboursPanel = document.querySelector("#neighbours-panel"); |
|
|
|
|
|
function findBorders(code3) { |
|
return fetch(restUrl + code3) |
|
.then((response) => { |
|
if (response.status === 200) { |
|
return response.json(); |
|
} |
|
else throw new Error(response.status); |
|
}) |
|
.then((data) => { |
|
if (data.borders == null) { |
|
console.log("No Borders!"); |
|
} else { |
|
data.borders.forEach((item) =>{ |
|
theNeighbours.push(item); |
|
}) |
|
} |
|
}) |
|
} |
|
|
|
|
|
function makeCountryChoises(borders) { |
|
const totalCountries = borders.length * 3; |
|
const choises = [...theNeighbours]; |
|
while (choises.length < totalCountries) { |
|
var c = countryObjects[Math.floor(Math.random() * 249) + 1].code3; |
|
if (!choises.includes(c)) { |
|
choises.push(c); |
|
} |
|
} |
|
return choises; |
|
} |
|
|
|
|
|
async function buildGamePanel() { |
|
document.querySelector("html").style.cursor = "wait"; |
|
|
|
do { |
|
await findBorders(shuffleArray(countryObjects)[0].code3); |
|
} while (theNeighbours.length == 0); |
|
|
|
|
|
const tmpArr = []; |
|
theNeighbours.forEach(item => { |
|
tmpArr.push(allCountries[item].name); |
|
}); |
|
console.log(allCountries[countryObjects[0].code3].name, tmpArr); |
|
|
|
const choises = makeCountryChoises(theNeighbours); |
|
shuffleArray(choises); |
|
choises.forEach((item) => { |
|
if (theNeighbours.includes(item)) { |
|
neighboursPanel.innerHTML += `<div class="neighbour-is-valid"><div id="flag">${getFlagEmoji(allCountries[item].code2)}</div> <div id="name">${allCountries[item].name}</div></div>`; |
|
} else { |
|
neighboursPanel.innerHTML += `<div class="neighbour-is-invalid"><div id="flag">${getFlagEmoji(allCountries[item].code2)}</div> <div id="name">${allCountries[item].name}</div></div>`; |
|
} |
|
}) |
|
document.querySelector("html").style.cursor = "default"; |
|
|
|
|
|
|
|
displayRound.innerHTML = `<div>Round:</div> <div>${gameRound}</div>`; |
|
displayScore.innerHTML = `<div>Total Score:</div> <div>${gameScore}</div>`; |
|
myCountryFlag.innerHTML = getFlagEmoji(countryObjects[0].code); |
|
myCountryName.innerHTML = countryObjects[0].name; |
|
|
|
|
|
|
|
document.querySelectorAll(".neighbour-is-valid").forEach(item => { |
|
item.addEventListener("click", () => { |
|
var txt = item.querySelector("#flag").textContent; |
|
gameScore +=5; |
|
displayScore.innerHTML = `<div>Total Score:</div> <div>${gameScore}</div>`; |
|
item.className += " was-clicked"; |
|
rightChoises += 1; |
|
document.querySelector("#bar").style.width = rightChoises/theNeighbours.length*100 + "%" |
|
if (rightChoises == theNeighbours.length) { |
|
endOfGame("win"); |
|
} |
|
|
|
}, {once: true}) |
|
|
|
}) |
|
|
|
|
|
|
|
document.querySelectorAll(".neighbour-is-invalid").forEach(item => { |
|
item.addEventListener("click", () => { |
|
var txt = item.querySelector("#flag").textContent; |
|
gameScore -= 3; |
|
displayScore.innerHTML = `<div>Total Score:</div> <div>${gameScore}</div>`; |
|
item.className += " was-clicked"; |
|
wrongChoises += 1; |
|
if (wrongChoises == theNeighbours.length) { |
|
endOfGame("lose"); |
|
} |
|
|
|
}, {once: true}) |
|
|
|
}) |
|
|
|
|
|
function endOfGame(status) { |
|
if (status == "win") { |
|
document.querySelector("#next-round-panel").style.display = "flex"; |
|
document.querySelector("#next-round-panel").style.color = "blue"; |
|
document.querySelector("#next-round-panel").innerHTML = "You've found them all!"; |
|
document.querySelector("#btn-next-round").disabled = false; |
|
|
|
} else { |
|
document.querySelector("#next-round-panel").style.display = "flex"; |
|
document.querySelector("#next-round-panel").style.color = "#921308"; |
|
document.querySelector("#next-round-panel").innerHTML = "Sorry, you lose!"; |
|
document.querySelector("#btn-next-round").disabled = false; |
|
} |
|
|
|
if (gameRound == 10) { |
|
setTimeout(() => { |
|
alert(`Congratulations!!!\nThe game is over after 10 rounds!\nFinal Score: ${gameScore} points\n\nClick OK to play again.`); |
|
location.reload(); |
|
} |
|
,500) |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
buildGamePanel(); |
|
|
|
|
|
|
|
document.querySelector("#btn-new-game").addEventListener("click", () => { |
|
let wc = confirm("Are you sure? Your score will be purged!"); |
|
if (wc == true) { |
|
location.reload(); |
|
} |
|
}) |
|
|
|
|
|
document.querySelector("#btn-next-round").addEventListener("click", () => { |
|
gameRound += 1 |
|
rightChoises = 0; |
|
wrongChoises = 0; |
|
theNeighbours.length = 0; |
|
neighboursPanel.innerHTML = `<div id="next-round-panel"></div>` |
|
document.querySelector("#next-round-panel").style.display = "none"; |
|
document.querySelector("#bar").style.width = 0 + "%" |
|
document.querySelector("#btn-next-round").disabled = true; |
|
buildGamePanel(); |
|
}) |
|
|
|
}); |
|
</script> |
|
|
|
</head> |
|
|
|
<body> |
|
<div class="game-panel"> |
|
|
|
<div id="sidebar"> |
|
<div id="game-title">Find the Neighboring Countries!</div> |
|
<hr> |
|
<div id="round"></div> |
|
<div id="score"></div> |
|
<div id="buttons"> |
|
<button id="btn-next-round" disabled>Next Round</button> |
|
<button id="btn-new-game">New Game</button> |
|
</div> |
|
</div> |
|
<div id="countries"> |
|
<div id="my-country"> |
|
<div id="my-country-flag"></div> |
|
<div id="my-country-name"></div> |
|
</div> |
|
<div id="progress"> |
|
<div id="bar"></div> |
|
</div> |
|
<div id="neighbours-panel"> |
|
<div id="next-round-panel"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
|
|
<script> |
|
|
|
if (navigator.appVersion.indexOf("Macintosh") > 0) { |
|
document.body.style.fontFamily = '"Open Sans"'; |
|
} |
|
</script> |
|
|
|
</html> |
