export default class GameView {
	#icons = {
		"rock" : "far fa-hand-rock",
		"paper" : "far fa-hand-paper",
		"scissors" : "far fa-hand-scissors"
	}

	constructor() {
		this.resultEl = document.getElementById("result");
		this.scoreEl = document.getElementById("score");
		this.buttons = document.querySelectorAll(".choices span i");
		this.player = document.getElementById("player");
		this.computer = document.getElementById("computer");

	}

	bindPlay(handler) {
		this.buttons.forEach(button => {
			button.addEventListener("click", () => {
				handler(button.dataset.choice);
			});
		});
	}

	displayResult(player, computer, result) {
		let i = document.createElement("i");
		i.classList.add(...this.#icons[player].split(' '))
		this.player.replaceChildren(i)

		i = document.createElement("i");
		i.classList.add(...this.#icons[computer].split(' '))
		this.computer.replaceChildren(i)


		this.resultEl.innerHTML =
			`Joueur <i class="${this.#icons[player]}"></i>, ordinateur <i class="${this.#icons[computer]}"></i> → ${result}`;

	}

	displayScore(score) {

		let winRate = ((score.player * 100 / score.count) || 0).toFixed(2)
		let lossRate = ((score.computer * 100 / score.count) ||0).toFixed(2)
		let drawRate = (100 - winRate - lossRate).toFixed(2) 

		this.scoreEl.textContent =
			`Score — Joueur: ${score.player} | Ordinateur: ${score.computer}`;
	}
}