From 8c4f4abdf42e73edd57c5b15f2ef0753e072a8b0 Mon Sep 17 00:00:00 2001
From: Yangfan Wu Bot <39647285+wyf027@users.noreply.github.com>
Date: Sat, 18 Jul 2026 07:59:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(classic-games):=20=E6=96=B0=E5=A2=9E=20Min?=
 =?UTF-8?q?i=20Dao=20=E5=B0=8F=E6=B8=B8=E6=88=8F\n\nMade-with:=20Cursor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../classic-games/20260718-0754-dao-lite.html | 263 ++++++++++++++++++
 1 file changed, 263 insertions(+)
 create mode 100644 project/classic-games/20260718-0754-dao-lite.html
diff --git a/project/classic-games/20260718-0754-dao-lite.html b/project/classic-games/20260718-0754-dao-lite.html
new file mode 100644
index 00000000..61f31a15
--- /dev/null
+++ b/project/classic-games/20260718-0754-dao-lite.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mini Dao</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="min-h-screen bg-neutral-950 text-neutral-100">
+  <main class="mx-auto flex min-h-screen max-w-5xl flex-col gap-5 px-4 py-6">
+    <header class="flex flex-col gap-3 border-b border-neutral-800 pb-4 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        <p class="text-sm font-semibold uppercase tracking-wide text-emerald-300">Classic abstract</p>
+        <h1 class="text-3xl font-black text-white">Mini Dao</h1>
+        <p class="mt-1 max-w-2xl text-sm text-neutral-300">Slide pieces like ice until blocked. Form a line, a 2x2 square, or occupy all four corners to win.</p>
+      </div>
+      <button id="resetBtn" class="rounded bg-emerald-300 px-4 py-2 text-sm font-bold text-neutral-950 hover:bg-emerald-200">Reset</button>
+    </header>
+
+    <section class="grid gap-4 lg:grid-cols-[1fr_18rem]">
+      <div class="rounded border border-neutral-800 bg-neutral-900 p-3">
+        <div id="board" class="grid grid-cols-4 gap-2"></div>
+      </div>
+      <aside class="flex flex-col gap-3">
+        <div class="rounded border border-neutral-800 bg-neutral-900 p-4">
+          <p class="text-sm font-semibold text-neutral-400">Status</p>
+          <p id="statusText" class="mt-2 text-xl font-black text-white">Select a green piece.</p>
+        </div>
+        <div class="grid grid-cols-2 gap-3">
+          <div class="rounded border border-neutral-800 bg-neutral-900 p-4">
+            <p class="text-xs font-semibold uppercase text-neutral-500">Green</p>
+            <p id="greenCount" class="mt-1 text-2xl font-black text-emerald-300">4</p>
+          </div>
+          <div class="rounded border border-neutral-800 bg-neutral-900 p-4">
+            <p class="text-xs font-semibold uppercase text-neutral-500">Violet</p>
+            <p id="violetCount" class="mt-1 text-2xl font-black text-violet-300">4</p>
+          </div>
+        </div>
+        <div class="rounded border border-neutral-800 bg-neutral-900 p-4 text-sm text-neutral-300">
+          <p class="font-bold text-white">Win patterns</p>
+          <p class="mt-2">A player wins with four in a row, a 2x2 block, or by holding every corner. Green plays against a simple violet response.</p>
+        </div>
+      </aside>
+    </section>
+  </main>
+
+  <script>
+    const size = 4;
+    const dirs = [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1]];
+    const boardEl = document.getElementById("board");
+    const statusText = document.getElementById("statusText");
+    const greenCount = document.getElementById("greenCount");
+    const violetCount = document.getElementById("violetCount");
+    const resetBtn = document.getElementById("resetBtn");
+    let board = [];
+    let selected = null;
+    let targets = [];
+    let turn = "G";
+    let gameOver = false;
+
+    function inBounds(row, col) {
+      return row >= 0 && row < size && col >= 0 && col < size;
+    }
+
+    function freshBoard() {
+      return [
+        ["G", "", "", "V"],
+        ["", "G", "V", ""],
+        ["", "V", "G", ""],
+        ["V", "", "", "G"]
+      ];
+    }
+
+    function countPieces(player) {
+      return board.flat().filter((cell) => cell === player).length;
+    }
+
+    function slideTarget(row, col, dr, dc) {
+      let nextRow = row + dr;
+      let nextCol = col + dc;
+      let last = null;
+      while (inBounds(nextRow, nextCol) && board[nextRow][nextCol] === "") {
+        last = { row: nextRow, col: nextCol };
+        nextRow += dr;
+        nextCol += dc;
+      }
+      return last;
+    }
+
+    function legalMoves(row, col, player = turn) {
+      if (board[row][col] !== player || gameOver) return [];
+      return dirs.map(([dr, dc]) => slideTarget(row, col, dr, dc)).filter(Boolean);
+    }
+
+    function allMovesFor(player) {
+      const moves = [];
+      for (let row = 0; row < size; row += 1) {
+        for (let col = 0; col < size; col += 1) {
+          for (const move of legalMoves(row, col, player)) {
+            moves.push({ fromRow: row, fromCol: col, row: move.row, col: move.col });
+          }
+        }
+      }
+      return moves;
+    }
+
+    function positionsOf(player) {
+      const cells = [];
+      for (let row = 0; row < size; row += 1) {
+        for (let col = 0; col < size; col += 1) {
+          if (board[row][col] === player) cells.push([row, col]);
+        }
+      }
+      return cells;
+    }
+
+    function hasLine(player) {
+      const lines = [];
+      for (let row = 0; row < size; row += 1) lines.push(Array.from({ length: size }, (_, col) => [row, col]));
+      for (let col = 0; col < size; col += 1) lines.push(Array.from({ length: size }, (_, row) => [row, col]));
+      lines.push([[0, 0], [1, 1], [2, 2], [3, 3]]);
+      lines.push([[0, 3], [1, 2], [2, 1], [3, 0]]);
+      return lines.some((line) => line.every(([row, col]) => board[row][col] === player));
+    }
+
+    function hasSquare(player) {
+      for (let row = 0; row < size - 1; row += 1) {
+        for (let col = 0; col < size - 1; col += 1) {
+          const square = [[row, col], [row + 1, col], [row, col + 1], [row + 1, col + 1]];
+          if (square.every(([r, c]) => board[r][c] === player)) return true;
+        }
+      }
+      return false;
+    }
+
+    function hasCorners(player) {
+      return [[0, 0], [0, 3], [3, 0], [3, 3]].every(([row, col]) => board[row][col] === player);
+    }
+
+    function checkWinner() {
+      for (const player of ["G", "V"]) {
+        if (hasLine(player) || hasSquare(player) || hasCorners(player)) {
+          gameOver = true;
+          statusText.textContent = player === "G" ? "Green wins." : "Violet wins.";
+          return true;
+        }
+      }
+      const moves = allMovesFor(turn);
+      if (!moves.length) {
+        gameOver = true;
+        statusText.textContent = turn === "G" ? "Green is stuck. Violet wins." : "Violet is stuck. Green wins.";
+        return true;
+      }
+      return false;
+    }
+
+    function movePiece(fromRow, fromCol, toRow, toCol) {
+      board[toRow][toCol] = board[fromRow][fromCol];
+      board[fromRow][fromCol] = "";
+      selected = null;
+      targets = [];
+      if (!checkWinner()) {
+        turn = turn === "G" ? "V" : "G";
+        statusText.textContent = turn === "G" ? "Select a green piece." : "Violet is thinking.";
+      }
+      render();
+      if (!gameOver && turn === "V") {
+        window.setTimeout(playComputerTurn, 350);
+      }
+    }
+
+    function chooseAiMove() {
+      const moves = allMovesFor("V");
+      for (const move of moves) {
+        const copy = board.map((row) => row.slice());
+        copy[move.row][move.col] = copy[move.fromRow][move.fromCol];
+        copy[move.fromRow][move.fromCol] = "";
+        const oldBoard = board;
+        board = copy;
+        const winning = hasLine("V") || hasSquare("V") || hasCorners("V");
+        board = oldBoard;
+        if (winning) return move;
+      }
+      return moves[Math.floor(Math.random() * moves.length)] || null;
+    }
+
+    function playComputerTurn() {
+      const move = chooseAiMove();
+      if (!move) {
+        gameOver = true;
+        statusText.textContent = "Violet is stuck. Green wins.";
+        render();
+        return;
+      }
+      movePiece(move.fromRow, move.fromCol, move.row, move.col);
+    }
+
+    function handleCell(row, col) {
+      if (gameOver || turn !== "G") return;
+      const target = targets.find((move) => move.row === row && move.col === col);
+      if (selected && target) {
+        movePiece(selected.row, selected.col, row, col);
+        return;
+      }
+      if (board[row][col] === "G") {
+        selected = { row, col };
+        targets = legalMoves(row, col, "G");
+        statusText.textContent = targets.length ? "Choose a slide target." : "That piece cannot slide.";
+      } else {
+        selected = null;
+        targets = [];
+        statusText.textContent = "Select a green piece.";
+      }
+      render();
+    }
+
+    function renderBoard() {
+      boardEl.innerHTML = "";
+      for (let row = 0; row < size; row += 1) {
+        for (let col = 0; col < size; col += 1) {
+          const piece = board[row][col];
+          const isSelected = selected && selected.row === row && selected.col === col;
+          const isTarget = targets.some((move) => move.row === row && move.col === col);
+          const button = document.createElement("button");
+          button.type = "button";
+          button.setAttribute("aria-label", `row ${row + 1}, column ${col + 1}`);
+          button.className = [
+            "aspect-square rounded border text-2xl font-black transition focus:outline-none focus:ring-2 focus:ring-white",
+            (row + col) % 2 === 0 ? "border-neutral-700 bg-neutral-800" : "border-neutral-700 bg-neutral-700",
+            piece === "G" ? "text-emerald-300" : "",
+            piece === "V" ? "text-violet-300" : "",
+            isSelected ? "ring-2 ring-white" : "",
+            isTarget ? "border-emerald-200 bg-neutral-600" : "",
+            "hover:bg-neutral-600"
+          ].join(" ");
+          button.textContent = piece;
+          button.addEventListener("click", () => handleCell(row, col));
+          boardEl.appendChild(button);
+        }
+      }
+    }
+
+    function render() {
+      greenCount.textContent = String(countPieces("G"));
+      violetCount.textContent = String(countPieces("V"));
+      renderBoard();
+    }
+
+    function resetGame() {
+      board = freshBoard();
+      selected = null;
+      targets = [];
+      turn = "G";
+      gameOver = false;
+      statusText.textContent = "Select a green piece.";
+      render();
+    }
+
+    resetBtn.addEventListener("click", resetGame);
+    resetGame();
+  </script>
+</body>
+</html>
