ZMYaro/mcu_compare.html

## mcu_compare.html
<!DOCTYPE html>
<html>
	<head>
		<title>MCU Movie Compare-O-Matic</title>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			body {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
		<script type="text/javascript">
			Array.prototype.shuffle = function () {
				this.sort(function () {
					return Math.random() - 0.5;
				});
				return this;
			};

			var movies = [
				'Iron Man 1',
				'The Incredible Hulk',
				'Iron Man 2',
				'Thor',
				'Captain America: The First Avenger',
				'The Avengers',
				'Iron Man 3',
				'Thor: The Dark World',
				'Captain America: The Winter Soldier',
				'Guardians Of The Galaxy',
				'Avengers: Age Of Ultron',
				'Ant-Man',
				'Captain America: Civil War',
				'Doctor Strange',
				'Guardians Of The Galaxy Vol. 2',
				'Spider-Man: Homecoming'
			];

			var i = 0,
				button0,
				button1
				currentIndices = [];

			function init() {
				button0 = document.getElementById('movie0');
				button0.onclick = function () {
					cut(1);
				};
				button1 = document.getElementById('movie1');
				button1.onclick = function () {
					cut(0);
				};

				movies.shuffle();

				setUpNextPair();
			}

			function setUpNextPair() {
				if (movies.length === 1) {
					showWinner();
					return;
				}

				i += 2;

				if (i > movies.length - 2) {
					i = 0;
					movies.shuffle();
				}

				currentIndices = [
					i,
					i + 1
				];

				button0.innerHTML = '<em>' + movies[i] + '</em>';
				button1.innerHTML = '<em>' + movies[i + 1] + '</em>';
			}

			function cut(n) {
				movies.splice(currentIndices[n], 1);
				setUpNextPair();
			}

			function showWinner() {
				button0.style.display =
					button1.style.display = 'none';

				document.getElementsByTagName('div')[0].innerHTML =
					'<em>' + movies[0] + '</em> seems to be your favorite MCU movie.' ;
			}

			window.onload = init;
		</script>
	</head>
	<body>
		<button id="movie0"></button>
		<div>&nbsp;OR&nbsp;</div>
		<button id="movie1"></button>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>MCU Movie Compare-O-Matic</title>
	<style type="text/css">
	html,
	body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	}
	</style>
	<script type="text/javascript">
	Array.prototype.shuffle = function () {
	this.sort(function () {
	return Math.random() - 0.5;
	});
	return this;
	};

	var movies = [
	'Iron Man 1',
	'The Incredible Hulk',
	'Iron Man 2',
	'Thor',
	'Captain America: The First Avenger',
	'The Avengers',
	'Iron Man 3',
	'Thor: The Dark World',
	'Captain America: The Winter Soldier',
	'Guardians Of The Galaxy',
	'Avengers: Age Of Ultron',
	'Ant-Man',
	'Captain America: Civil War',
	'Doctor Strange',
	'Guardians Of The Galaxy Vol. 2',
	'Spider-Man: Homecoming'
	];

	var i = 0,
	button0,
	button1
	currentIndices = [];

	function init() {
	button0 = document.getElementById('movie0');
	button0.onclick = function () {
	cut(1);
	};
	button1 = document.getElementById('movie1');
	button1.onclick = function () {
	cut(0);
	};

	movies.shuffle();

	setUpNextPair();
	}

	function setUpNextPair() {
	if (movies.length === 1) {
	showWinner();
	return;
	}

	i += 2;

	if (i > movies.length - 2) {
	i = 0;
	movies.shuffle();
	}

	currentIndices = [
	i,
	i + 1
	];

	button0.innerHTML = '<em>' + movies[i] + '</em>';
	button1.innerHTML = '<em>' + movies[i + 1] + '</em>';
	}

	function cut(n) {
	movies.splice(currentIndices[n], 1);
	setUpNextPair();
	}

	function showWinner() {
	button0.style.display =
	button1.style.display = 'none';

	document.getElementsByTagName('div')[0].innerHTML =
	'<em>' + movies[0] + '</em> seems to be your favorite MCU movie.' ;
	}

	window.onload = init;
	</script>
	</head>
	<body>
	<button id="movie0"></button>
	<div> OR </div>
	<button id="movie1"></button>
	</body>
	</html>