<main>
	<h1>Rock, Paper, Scissors</h1>
	<div>
		<button id="rock"> <i class="fas fa-hand-rock"></i>Rock</button>
		<button id="paper"><i class="fas fa-hand-paper"></i>Paper</button>
		<button id="scissors"><i class="fas fa-hand-scissors"></i>Scissors</button>
	</div>
	<div class="choice">
		<p class="user"></p>
		<p class="ai"></p>
	</div>
	<div class="score">
		<p class="user"><strong>You:</strong> <span>0</span></p>
		<p class="ai"><strong>Computer:</strong> <span>0</span></p>
	</div>
	<p class="message"></p>

	<button id="reset">Start Over</button>
</main>

@import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap");

:root {
	--colour1: #d464c8;
}

body * {
	box-sizing: border-box;
	transition: all 0.5s;
}

body {
	display: flex;
	height: 100vh;
	padding: 15px 0;
	text-align: center;
	background: #000 radial-gradient(#4d2849 1px, #000 10px);
	background-size: 25px 25px;
	animation: bg 300s linear infinite;
}

main {
	background: rgba(6, 57, 68, 0.5);
	width: clamp(300px, 80%, 700px);
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 50px 40px 30px;

	h1 {
		margin: 0 0 30px;
		font-family: "Courgette", cursive;
		font-size: clamp(2rem, 4vw + 1rem, 3rem);
		color: var(--colour1);
		line-height: clamp(0.5rem, 4vw + 1rem, 2.5rem);
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}

	div {
		display: flex;
		justify-content: space-around;
	}

	p {
		color: #fff;
		margin: 0;
	}

	strong {
		font-weight: 600;
		letter-spacing: 2px;
	}

	.choice,
	.score {
		padding: 25px 0 0;
		i {
			font-size: 35px;
		}
	}

	.message {
		font-family: "Courgette", cursive;
		font-size: clamp(1.5rem, 4vw + 1rem, 2rem);
		padding: 30px 0;
	}

	#reset {
		font-weight: 600;
		letter-spacing: 2px;
		align-self: center;
		max-width: 200px;
		background: var(--colour1);
		border: 1px solid #fff;
		border-width: 1px 0;
		padding: 10px 25px;
		&:hover {
			opacity: 0.6;
		}
	}

	button:not(#reset) {
		text-align: center;
		padding: 0;
		max-width: 90px;
		background: transparent;
		border: none;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2px;
		&:hover {
			color: #aaa;
			i {
				opacity: 1;
			}
		}
		i {
			margin-bottom: 10px;
			font-size: 60px;
			display: block;
			color: var(--colour1);
			opacity: 0.4;
		}
	}
}

@keyframes bg {
	0% {
		background-position: -100% -100%;
		filter: hue-rotate(0deg);
	}
	100% {
		background-position: 100% 100%;
		filter: hue-rotate(360deg);
	}
}

const buttons = document.querySelectorAll("div button");
const choices = ["rock", "paper", "scissors"];
const userScore = document.querySelector(".user span");
const aiScore = document.querySelector(".ai span");
const showUserChoice = document.querySelector(".choice .user");
const showAiChoice = document.querySelector(".choice .ai");
const message = document.querySelector(".message");
let userChoice;
let aiChoice;
let userCount = 0;
let aiCount = 0;

//Random choice for computer
function randomChoice() {
	return choices[Math.floor(Math.random() * choices.length)];
}

// If choices are the same: DRAW, else: compare choices
function compare() {
	if (userChoice === aiChoice) {
		return "It's a DRAW";
	} else {
		if (
			(userChoice === "rock" && aiChoice === "scissors") ||
			(userChoice === "scissors" && aiChoice === "paper") ||
			(userChoice === "paper" && aiChoice === "rock")
		) {
			userCount++;
			return "You're the WINNER!";
		} else {
			aiCount++;
			return "You LOSE";
		}
	}
}

//loop through buttons to find them all. Run function for whichever button is clicked.
for (i = 0; i < buttons.length; i++) {
	buttons[i].onclick = function (e) {
		userChoice = this.id; //id of this (clicked button)
		//userChoice = e.target.id; //e target's(clicked button) id (error with rock)
		aiChoice = randomChoice();
		//Show message, show choices, and update the score
		message.innerHTML = compare();
		showUserChoice.innerHTML = `<i class="fas fa-hand-${userChoice}"></i>`;
		showAiChoice.innerHTML = `<i class="fas fa-hand-${aiChoice}"></i>`;
		userScore.innerHTML = userCount;
		aiScore.innerHTML = aiCount;

		//test
		//console.log("MINE: " + userChoice);
		//console.log("THEIRS: " + aiChoice);
		//console.log("YOU: " + userCount + " AI: " + aiCount);
	};
}

//Reset game
document.getElementById("reset").onclick = function () {
	userCount = 0;
	aiCount = 0;
	userScore.innerHTML = userCount;
	aiScore.innerHTML = aiCount;
	userChoice = "";
	aiChoice = "";
	message.innerHTML = "";
	showUserChoice.innerHTML = "";
	showAiChoice.innerHTML = "";
};