ajout tp2mvc, tp3 et update des tp 1 et 2

DEV.4.1/tp/tp3/src/js/controller.js

@@ -0,0 +1,18 @@
+export default class GameController {
+  constructor(model, view) {
+    this.model = model;
+    this.view = view;
+
+    this.view.bindPlay(this.handlePlay);
+    this.view.displayScore(this.model.getScore());
+  }
+
+  handlePlay = (playerChoice) => {
+    const computerChoice = this.model.getComputerChoice();
+    const result = this.model.getResult(playerChoice, computerChoice);
+
+    this.view.displayResult(playerChoice, computerChoice, result);
+    this.view.displayScore(this.model.getScore());
+  }
+}
+

DEV.4.1/tp/tp3/src/js/main.js

@@ -0,0 +1,9 @@
+import GameModel from "./model.js";
+import GameView from "./view.js";
+import GameController from "./controller.js";
+
+const app = new GameController(
+  new GameModel(),
+  new GameView()
+);
+

DEV.4.1/tp/tp3/src/js/model.js

@@ -0,0 +1,29 @@
+export default class GameModel {
+	constructor() {
+		this.choices = ["rock", "paper", "scissors"];
+		this.score = { player: 0, computer: 0};
+	}
+
+	getComputerChoice() {
+		const index = Math.floor(Math.random() * this.choices.length);
+		return this.choices[index];
+	}
+
+	getResult(player, computer) {
+		if (player === computer) return "égalité";
+
+		if (
+			(player === "rock" && computer === "scissors") ||
+			(player === "paper" && computer === "rock") ||
+			(player === "scissors" && computer === "paper")
+		) {
+			this.score.player++;
+			return "gagné";
+		}
+		this.score.computer++;
+		return "perdu";
+	}
+	getScore() {
+		return this.score;
+	}
+}

DEV.4.1/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}`;
+	}
+}
+