tp3

R4.01_R4.A.10/td_tp/tp3/src/js/view.js

@@ -0,0 +1,50 @@
+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}`;
+	}
+}
+