<html>
<head>
<title>
Countries
</title>
<link rel="icon" href="../../images/redflower.png">
</head>
<body>
<a title="I found something for shuffling here: https://en.wikipedia.org/wiki/Fisher–Yates_shuffle
linknumbers takes the values at neighboring items of the array (0th and 1st items, 2nd and 3rd items, etc) and makes those positions of the array 'go' to each other (if array[0] is 3 and array[1] is 7, then it will make array[3] into 7 and make array[7] into 3)"></a>

<div id="main">
	<div class="row">
		<div class="card" onclick="chooseCard(0)">
			<span class="cname">China</span><br>
			<span class="gmingzi">新</span><br>
			<span class="pinyin">Ainky!</span>
			<img class="flag" class="flag" src=""></div>
		<div class="card" onclick="chooseCard(1)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/china.png"></div>
		<div class="card" onclick="chooseCard(2)">
			<span class="cname">is</span><br>
			<span class="gmingzi">猪!</span><br>
			<span class="pinyin">wǒ</span>
			<img class="flag" src=""></div>
		<div class="card endl" onclick="chooseCard(3)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/unitedkingdom.png"></div>
	</div>
	<div class="row">
		<div class="card" onclick="chooseCard(4)">
			<span class="cname">a</span><br>
			<span class="gmingzi">你</span><br>
			<span class="pinyin">hěn</span>
			<img class="flag" src=""></div>
		<div class="card" onclick="chooseCard(5)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/unitedkingdom.png"></div>
		<div class="card" onclick="chooseCard(6)">
			<span class="cname">country!</span><br>
			<span class="gmingzi">喜</span><br>
			<span class="pinyin">xǐ</span>
			<img class="flag" src=""></div>
		<div class="card endl" onclick="chooseCard(7)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/china.png"></div>
	</div>
	<div class="row">
		<div class="card" onclick="chooseCard(8)">
			<span class="cname">Aink!</span><br>
			<span class="gmingzi">欢</span><br>
			<span class="pinyin">huān</span>
			<img class="flag" src=""></div>
		<div class="card" onclick="chooseCard(9)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/china.png"></div>
		<div class="card" onclick="chooseCard(10)">
			<span class="cname">I'm</span><br>
			<span class="gmingzi">游</span><br>
			<span class="pinyin">wán</span>
			<img class="flag" src=""></div>
		<div class="card endl" onclick="chooseCard(11)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/unitedkingdom.png"></div>
	</div>
	<div class="last row">
		<div class="card" onclick="chooseCard(12)">
			<span class="cname">New</span><br>
			<span class="gmingzi">戏</span><br>
			<span class="pinyin">yóu</span>
			<img class="flag" src=""></div>
		<div class="card" onclick="chooseCard(13)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/unitedkingdom.png"></div>
		<div class="card" onclick="chooseCard(14)">
			<span class="cname">Pig!</span><br>
			<span class="gmingzi">吗?</span><br>
			<span class="pinyin">xì</span>
			<img class="flag" src=""></div>
		<div class="card endl" onclick="chooseCard(15)">
			<span class="cname"></span><br>
			<span class="gmingzi"></span><br>
			<span class="pinyin"></span>
			<img class="flag" src="./flags/china.png"></div>
	</div>

</div>
<p id="wintext">You Win!</p>
<noscript class="sidetext">Powered By <br><span style="color:red">JavaScript</span></noscript>
<button id="restart" onclick="start()">Restart</button>
<style>
#main {
	background-color:cornflowerblue;
	margin:auto;
	height:calc(96vh + 3px);
	width:calc(96vh + 3px);
}
.card {
	display:table-cell;
	height:calc(24vh + 3px);
	width:calc(24vh - 10px);
	background-color:aliceblue;
	text-align:center;
	vertical-align:middle;
	font-size:3vh;
	border-right:1px solid blue;
	border-bottom: 1px solid blue;
	padding:5px;
	word-break: break-word;
	position:relative;
}
.card span {
	position:relative;
}
.card img {
	margin:auto;
	position:absolute;
	max-width:80%;
	max-height:80%;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.endl {
	border-right: none;
}
.row {
	display:table;
}
.row.last .card {
	border-bottom: none;
}

#wintext, .sidetext {
	position:absolute;
	font-size:50px;
	z-index:1;
	top:0;
	right:0;
	color:green;
	margin:auto;
	display:none;
}

.sidetext {
	display:block;
	color:blue;
	text-align:right;
	right:10px;
}

#restart {
	font-size:25px;
	position:absolute;
	z-index:1;
	bottom:25px;
	right:25px;
	width:150px;
	height:50px;
	background:linear-gradient(#ecfff0,#7cff9c);
	border:1px solid #309f40;
	color: #0e5c14;
}

</style>

<script>

var num = 16;
var tileIndices = [];
var placeIndices = [];
var flagIndices = [];
var nameIndices = [];
var currentChosen = -1;
var numRight = 0;
var cardList = [];

function shuffle(array, numtoshuffle = array.length) {
	for(var i = 0; i<numtoshuffle; i++) {
		var rand = Math.floor(Math.random()*(array.length-i))+i;
		var temp = array[i];
		array[i] = array[rand];
		array[rand] = temp;
	}
	array.length = numtoshuffle;
	return array;
}

function linkNumbers(array) {
	if(array.length%2==1) {
		console.log("This doesn't work when the array's length is odd");
		return;
	}
	var newarray = [];
	for(var i = 0; i<array.length/2; i++) {
		var rand = Math.floor(Math.random()*2);
		if(rand == 0) {
			flagIndices[i] = array[i*2];
			nameIndices[i] = array[i*2+1];
		} else {
			flagIndices[i] = array[i*2+1];
			nameIndices[i] = array[i*2];
		}
		newarray[array[i*2]] = array[i*2+1];
		newarray[array[i*2+1]] = array[i*2];
	}
	return newarray;
}

var places = [
{	chinese: "德国/德國",
	pinyin: "dé guó",
	english: "Germany",
	picture: "germany.png",
},
{	chinese: "中国/中國",
	pinyin: "zhōng guó",
	english: "China",
	picture: "china.png",
},
{	chinese: "加拿大",
	pinyin: "jiā ná dà",
	english: "Canada",
	picture: "canada.png",
},
{	chinese: "挪威",
	pinyin: "nuó wēi",
	english: "Norway",
	picture: "norway.png",
},
{	chinese: "法国/法國",
	pinyin: "fǎ guó",
	english: "France",
	picture: "france.png"
},
{	chinese: "罗马尼亚/羅馬尼亞",
	pinyin: "luó mǎ ní yà",
	english: "Romania",
	picture: "romania.png"
},
{	chinese: "俄罗斯/俄羅斯",
	pinyin: "é luó sī",
	english: "Russia",
	picture: "russia.png"
},
{	chinese: "荷兰/荷蘭",
	pinyin: "hé lán",
	english: "The Netherlands",
	picture: "netherlands.png"
},
{	chinese: "泰国/泰國",
	pinyin: "tài guó",
	english: "Thailand",
	picture: "thailand.png",
},
{	chinese: "瑞士",
	pinyin: "ruì shì",
	english: "Switzerland",
	picture: "switzerland.png",
},
{	chinese: "英国/英國",
	pinyin: "yīng guó",
	english: "The United Kingdom",
	picture: "unitedkingdom.png",
},
{	chinese: "南非",
	pinyin: "nán fēi",
	english: "South Africa",
	picture: "southafrica.png",
},
{	chinese: "乌克兰/烏克蘭",
	pinyin: "wū kè lán",
	english: "Ukraine",
	picture: "ukraine.png",
},
{	chinese: "瑞典",
	pinyin: "ruì diǎn",
	english: "Sweden",
	picture: "sweden.png",
},
{	chinese: "爱尔兰/愛爾蘭",
	pinyin: "ài ěr lán",
	english: "Ireland",
	picture: "ireland.png",
},
{
	chinese: "卢森堡/盧森堡",
	pinyin: "lú sēn bǎo",
	english: "Luxembourg",
	picture: "luxembourg.png",
},
{	chinese: "印度尼西亚/印度尼西亞",
	pinyin: "yìn dù ní xī yà",
	english: "Indonesia",
	picture: "indonesia.png",
},
{	chinese: "捷克",
	pinyin: "jié kè",
	english: "Czech Republic",
	picture: "czechrepublic.png",
}];

var numplaces = places.length;

function choosePlaces() {
	for(var i = 0; i<numplaces; i++) {
		placeIndices[i] = i;
	}
	placeIndices = shuffle(placeIndices, num/2);
}

function chooseCard(n) {
	if(n>tileIndices.length-1||n<0) {
		console.log("That card is unavailable");
		return;
	}
	if(tileIndices[n]==-1) {
		console.log("That card is gone");
		return;
	}
	if(currentChosen==-1) {
		currentChosen = n;
		console.log("You chose card " + n);
		cardList[n].style.backgroundColor = "#ffafff";
		return;
	}
	if(currentChosen==n) {
		currentChosen = -1;
		cardList[n].style.backgroundColor = "aliceblue";
		return;
	}
	if(tileIndices[currentChosen] == n) {
		console.log("Nice");
		cardList[n].style.backgroundColor = "#abceff";
		cardList[currentChosen].style.backgroundColor = "#abceff";
		tileIndices[currentChosen] = tileIndices[n] = -1;
		currentChosen = -1;
		numRight+=1;
		if(numRight == num/2) {
			win();
		}
		return;
	}
	console.log("Try again");
	return;
}

function win() {
	console.log("Yay. You won!");
	document.getElementById("wintext").style.display = "block";
}

cardList = document.querySelectorAll(".card");

function start() {
	var currentChosen = -1;
	numRight = 0;
	for(var i = 0; i<num; i++) {
		tileIndices[i] = i;
	}

	document.getElementById("wintext").style.display="none";

	shuffle(tileIndices);
	tileIndices = linkNumbers(tileIndices);
	choosePlaces();
	setCards();

	for(var i = 0; i<cardList.length; i++) {
		cardList[i].style.backgroundColor = "aliceblue";
	}

}

function setCards() {
	for(var i = 0; i<flagIndices.length; i++) {
		var c = flagIndices[i];
		var ind = placeIndices[i];
		cardList[c].children[0].innerText = "";
		cardList[c].children[2].innerText = "";
		cardList[c].children[4].innerText = "";
		cardList[c].children[5].src="../../images/flags/" + places[ind].picture;
	}
	for(var i = 0; i<nameIndices.length; i++) {
		var c = nameIndices[i];
		var ind = placeIndices[i];
		cardList[c].children[0].innerText = places[ind].english;
		cardList[c].children[2].innerText = places[ind].chinese;
		cardList[c].children[4].innerText = places[ind].pinyin;
		cardList[c].children[5].src = "";
	}
}

var currentlyunusedplaces = [
{	chinese: "美国",
	pinyin: "měi guó",
	english: "United States"
}];

start();

</script>

<a style="display:none">
placeIndices shows which places are chosen (eg. 0 is Germany, 1 is China)
places are chosen using function choosePlaces

tileIndices is by default 0, 1, 2, ...
to shuffle it, use shuffle(tileIndices)
linkNumbers(tileIndices) will make numbers 'link' (tileIndices[a] is b, and tileIndices[b] is a)
(by picking elements next to each other (like tileIndices[a] and tileIndices[a+1]) and making those link, and doing it for all other pairs)

flagIndices shows which cards will have flags
nameIndices shows which cards will have names

for example, if flagIndices[a] is c, then the country/place at places[a] will have a flag shown at card c. (and its name will be shown at card nameIndices[a])

children of card elements
0: name
2: name (CHINESE)
4: pinyin
5: flag
</a>
</body>
</html>