満寵愛診断

<!DOCTYPE html>
<html>
<head>
	<title>満寵愛診断</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
		}
		input[type="number"] {
			width: 50px;
		}
		button {
			margin-top: 10px;
			padding: 5px 10px;
			background-color: #007bff;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			box-shadow: 2px 2px 2px #000;
		}
		button:hover {
			background-color: #0062cc;
		}
	</style>
</head>
<body>
	<h1>満寵愛診断</h1>
	<p>スペース1: <span id="space1"></span></p>
	<p>スペース2: <input type="number" min="0" max="10" id="space2" required></p>
	<button id="start-btn">満寵愛診断START</button>
	<button id="retry-btn" style="display: none;">おかわり満寵</button>

	<script type="text/javascript">
		var words = ["満寵", "満龍", "満龐", "溝寵", "溝龍", "溝龐"];
		var currentIndex = -1;
		var count = 0;

		var space1 = document.getElementById("space1");
		var space2 = document.getElementById("space2");
		var startBtn = document.getElementById("start-btn");
		var retryBtn = document.getElementById("retry-btn");

		startBtn.addEventListener("click", function() {
			startBtn.style.display = "none";
			count = 0;
			currentIndex = -1;
			startTimer();
		});

		retryBtn.addEventListener("click", function() {
			retryBtn.style.display = "none";
			startBtn.style.display = "block";
			space1.innerHTML = "";
			space2.value = "";
		});

		function startTimer() {
			var interval = setInterval(function() {
				currentIndex = getRandomIndex(words.length, currentIndex);
				space1.innerHTML = words[currentIndex];
			}, 1000);

			setTimeout(function() {
				clearInterval(interval);
				count = getCount();
				checkAnswer();
			}, 10000);
		}

		function getRandomIndex(max, currentIndex) {
			var randomIndex = Math.floor(Math.random() * max);
			if (randomIndex === currentIndex) {
				return getRandomIndex(max, currentIndex);
			}
			return randomIndex;
		}

		function getCount() {
			var counter = 0;
			var currentWord = space1.innerHTML;
			for (var i = 0; i < 10; i++) {
				currentIndex = getRandomIndex(words.length, currentIndex);
				if (words[currentIndex] === currentWord) {
					counter++;
				}
			}
			return counter;
		}

		function checkAnswer() {
			var answer = parseInt(space2.value);
			if (answer === count) {
				space1.innerHTML = "正解！満寵と相思相愛！";
			} else {
				space1.innerHTML = "不正解！満寵への片想い…";
			}
			retryBtn.style.display = "block";
		}
	</script>
</body>
</html>