From 0d0ef10779f5731f727ae1857156f9540ea1d99e Mon Sep 17 00:00:00 2001
From: furiosa <mrtip@mrtip.mrtip>
Date: Wed, 25 Mar 2026 17:41:44 +0000
Subject: [PATCH] feat: Tic Tac Toe en Vue.js avec grille 3x3, detection
 gagnant et replay (te-3tj)

---
 index.html | 217 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 217 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2729319
--- /dev/null
+++ b/index.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tic Tac Toe</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background: #f0f2f5;
+    }
+
+    #app {
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 1rem;
+      color: #333;
+    }
+
+    .status {
+      font-size: 1.2rem;
+      margin-bottom: 1rem;
+      color: #555;
+      min-height: 1.5rem;
+    }
+
+    .board {
+      display: grid;
+      grid-template-columns: repeat(3, 100px);
+      grid-template-rows: repeat(3, 100px);
+      gap: 6px;
+      margin: 0 auto 1.5rem;
+      width: fit-content;
+    }
+
+    .cell {
+      width: 100px;
+      height: 100px;
+      background: white;
+      border: 2px solid #ccc;
+      border-radius: 8px;
+      font-size: 2.5rem;
+      font-weight: bold;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+    }
+
+    .cell:hover:not(.taken) {
+      background: #e8f0fe;
+    }
+
+    .cell.taken {
+      cursor: default;
+    }
+
+    .cell.x {
+      color: #e74c3c;
+    }
+
+    .cell.o {
+      color: #2980b9;
+    }
+
+    .cell.winning {
+      background: #d4edda;
+      border-color: #28a745;
+    }
+
+    .btn-restart {
+      padding: 0.6rem 1.8rem;
+      font-size: 1rem;
+      background: #333;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .btn-restart:hover {
+      background: #555;
+    }
+
+    .score {
+      display: flex;
+      justify-content: center;
+      gap: 2rem;
+      margin-bottom: 1rem;
+      font-size: 1rem;
+      color: #555;
+    }
+
+    .score span {
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h1>Tic Tac Toe</h1>
+
+    <div class="score">
+      <div>X : <span>{{ score.X }}</span></div>
+      <div>Égalités : <span>{{ score.draw }}</span></div>
+      <div>O : <span>{{ score.O }}</span></div>
+    </div>
+
+    <div class="status">{{ statusMessage }}</div>
+
+    <div class="board">
+      <div
+        v-for="(cell, index) in board"
+        :key="index"
+        class="cell"
+        :class="[
+          cell ? 'taken' : '',
+          cell ? cell.toLowerCase() : '',
+          winningCells.includes(index) ? 'winning' : ''
+        ]"
+        @click="makeMove(index)"
+      >
+        {{ cell }}
+      </div>
+    </div>
+
+    <button class="btn-restart" @click="restart">Rejouer</button>
+  </div>
+
+  <script>
+    const { createApp, ref, computed } = Vue;
+
+    const WINNING_LINES = [
+      [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
+      [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
+      [0, 4, 8], [2, 4, 6],             // diagonals
+    ];
+
+    createApp({
+      setup() {
+        const board = ref(Array(9).fill(null));
+        const currentPlayer = ref('X');
+        const gameOver = ref(false);
+        const score = ref({ X: 0, O: 0, draw: 0 });
+        const winningCells = ref([]);
+
+        function checkWinner(b) {
+          for (const [a, c, d] of WINNING_LINES) {
+            if (b[a] && b[a] === b[c] && b[a] === b[d]) {
+              return { winner: b[a], line: [a, c, d] };
+            }
+          }
+          if (b.every(cell => cell !== null)) {
+            return { winner: null, line: [] };
+          }
+          return null;
+        }
+
+        function makeMove(index) {
+          if (gameOver.value || board.value[index]) return;
+
+          board.value[index] = currentPlayer.value;
+
+          const result = checkWinner(board.value);
+          if (result !== null) {
+            gameOver.value = true;
+            if (result.winner) {
+              winningCells.value = result.line;
+              score.value[result.winner]++;
+            } else {
+              score.value.draw++;
+            }
+          } else {
+            currentPlayer.value = currentPlayer.value === 'X' ? 'O' : 'X';
+          }
+        }
+
+        function restart() {
+          board.value = Array(9).fill(null);
+          currentPlayer.value = 'X';
+          gameOver.value = false;
+          winningCells.value = [];
+        }
+
+        const statusMessage = computed(() => {
+          const result = checkWinner(board.value);
+          if (result && result.winner) {
+            return `Joueur ${result.winner} a gagné !`;
+          }
+          if (result && result.winner === null) {
+            return 'Égalité !';
+          }
+          return `Tour du joueur ${currentPlayer.value}`;
+        });
+
+        return { board, currentPlayer, gameOver, score, winningCells, makeMove, restart, statusMessage };
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>
