Spaces:

havas79
/

Find_the_Neighboring_Countries

Running

App Files Files Community

Find_the_Neighboring_Countries / index.html

havas79

Upload index.html

6ef6ef2 almost 4 years ago

Raw

History Blame Contribute Delete

9.62 kB

	<!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) => { // countryObjects is loaded from helpers.js
	var tempObject = {code2: item.code, name: item.name};
	allCountries[item.code3] = tempObject;
	})


	document.addEventListener("DOMContentLoaded", () => {
	//start a new Game
	let gameRound = 1;
	let gameScore = 0;
	let rightChoises = 0;
	let wrongChoises = 0;
	const theNeighbours = [];
	const restUrl = "https://restcountries.com/v2/alpha/";
	//const restUrl = "https://restcountries.com/v3.1/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"; // cursor turns into a spinning wheel
	// until the game panel is built
	do { // Loop until a random country with borders is found
	await findBorders(shuffleArray(countryObjects)[0].code3);
	} while (theNeighbours.length == 0);

	// Display the right choises to the console
	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"; // cursor back to a normal pointer


	// Build the game panel...
	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;


	// event listener to selecting a right country
	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}) // use each eventListener just once

	})


	// event listener to selecting a wrong country
	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}) // use each eventListener just once

	})


	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();


	// event listener to new game button
	document.querySelector("#btn-new-game").addEventListener("click", () => {
	let wc = confirm("Are you sure? Your score will be purged!");
	if (wc == true) {
	location.reload();
	}
	})

	// event listener to next round button
	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>
	// The following applies only to macOS users.
	if (navigator.appVersion.indexOf("Macintosh") > 0) {
	document.body.style.fontFamily = '"Open Sans"';
	}
	</script>

	</html>