Skip to content

feat(classic-games): 新增 Mini Mosaic 小游戏 #1232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wyf027 wants to merge 1 commit into
base: main
Choose a base branch
from
+177 −0
Open

feat(classic-games): 新增 Mini Mosaic 小游戏 #1232

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 177 additions & 0 deletions project/classic-games/20260718-0354-mosaic-lite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Mosaic Puzzle</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-zinc-950 text-zinc-100">
<main class="mx-auto flex min-h-screen max-w-4xl flex-col gap-5 px-4 py-6">
<header class="flex flex-col gap-3 border-b border-zinc-800 pb-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<p class="text-sm uppercase tracking-widest text-cyan-300">Classic clue grid</p>
<h1 class="text-3xl font-bold">Mini Mosaic Puzzle</h1>
</div>
<div class="flex flex-wrap gap-2">
<button id="hintBtn" class="rounded border border-zinc-600 px-4 py-2 font-semibold hover:bg-zinc-800">Hint</button>
<button id="resetBtn" class="rounded bg-cyan-300 px-4 py-2 font-semibold text-zinc-950 hover:bg-cyan-200">Reset</button>
</div>
</header>

<section class="grid gap-4 lg:grid-cols-[1.35fr_1fr]">
<div class="rounded border border-zinc-800 bg-zinc-900/70 p-4">
<div class="mb-4 flex items-center justify-between gap-3">
<div>
<h2 class="text-lg font-semibold">Puzzle</h2>
<p id="status" class="text-sm text-zinc-300">Click cells to cycle unknown, filled, and empty.</p>
</div>
<div class="rounded bg-zinc-950 px-3 py-2 text-right text-sm">
<p>Clues solved</p>
<p><span id="solvedCount" class="text-xl font-bold text-cyan-300">0</span> / 25</p>
</div>
</div>
<div id="grid" class="mx-auto grid max-w-lg grid-cols-5 gap-2"></div>
</div>

<aside class="rounded border border-zinc-800 bg-zinc-900/70 p-4">
<h2 class="mb-3 text-lg font-semibold">Rules</h2>
<div class="space-y-3 text-sm text-zinc-300">
<p>Each number tells how many filled cells are in its surrounding 3x3 area, including itself.</p>
<p>Cycle every square between unknown, filled, and marked empty. Solve all clue counts to finish.</p>
<p id="hintText" class="rounded bg-zinc-950 p-3 text-cyan-200">Use Hint to reveal one unsettled square.</p>
</div>
</aside>
</section>
</main>

<script>
const size = 5;
const solution = [
[1, 0, 1, 0, 0],
[1, 1, 0, 0, 1],
[0, 1, 0, 1, 1],
[0, 0, 1, 1, 0],
[1, 0, 0, 1, 0]
];
const clues = buildClues(solution);
const gridEl = document.getElementById("grid");
const statusEl = document.getElementById("status");
const solvedCountEl = document.getElementById("solvedCount");
const hintTextEl = document.getElementById("hintText");
const hintBtn = document.getElementById("hintBtn");
const resetBtn = document.getElementById("resetBtn");
let marks = [];

function buildClues(board) {
return board.map((row, r) => row.map((_, c) => neighbors(r, c)
.reduce((sum, cell) => sum + board[cell.r][cell.c], 0)));
}

function neighbors(row, col) {
const cells = [];
for (let dr = -1; dr <= 1; dr += 1) {
for (let dc = -1; dc <= 1; dc += 1) {
const r = row + dr;
const c = col + dc;
if (r >= 0 && r < size && c >= 0 && c < size) {
cells.push({ r, c });
}
}
}
return cells;
}

function resetGame() {
marks = Array.from({ length: size }, () => Array(size).fill(-1));
hintTextEl.textContent = "Use Hint to reveal one unsettled square.";
statusEl.textContent = "Click cells to cycle unknown, filled, and empty.";
render();
}

function cycleCell(row, col) {
marks[row][col] = marks[row][col] === -1 ? 1 : marks[row][col] === 1 ? 0 : -1;
hintTextEl.textContent = "Keep matching each clue's 3x3 count.";
render();
}

function clueState(row, col) {
const cells = neighbors(row, col);
const filled = cells.filter((cell) => marks[cell.r][cell.c] === 1).length;
const unknown = cells.filter((cell) => marks[cell.r][cell.c] === -1).length;
const target = clues[row][col];
if (filled === target && unknown === 0) return "solved";
if (filled > target || filled + unknown < target) return "error";
return "open";
}

function puzzleStats() {
let solved = 0;
let errors = 0;
for (let r = 0; r < size; r += 1) {
for (let c = 0; c < size; c += 1) {
const state = clueState(r, c);
if (state === "solved") solved += 1;
if (state === "error") errors += 1;
}
}
return { solved, errors };
}

function revealHint() {
for (let r = 0; r < size; r += 1) {
for (let c = 0; c < size; c += 1) {
if (marks[r][c] !== solution[r][c]) {
marks[r][c] = solution[r][c];
hintTextEl.textContent = `Hint filled row ${r + 1}, column ${c + 1}.`;
Comment on lines +124 to +126

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Avoid hinting against a non-unique hidden board

Because this clue set has multiple valid 5x5 completions, comparing every marked cell to the single hard-coded solution is not a reliable correctness test. A player can complete an alternate board that satisfies all 25 clues; clicking Hint then enters this branch, overwrites the first cell that differs from the hidden board, and turns the previously solved board into one with clue errors. Please either choose a uniquely solvable mosaic or reveal only cells that are forced by the current clues.

Useful? React with 👍 / 👎.

render();
return;
}
}
}
hintTextEl.textContent = "Every square already matches the hidden mosaic.";
}

function cellClass(value, clue) {
const base = "relative aspect-square rounded border p-2 text-left transition";
const clueColor = clue === "error" ? "border-rose-400" : clue === "solved" ? "border-emerald-400" : "border-zinc-700";
if (value === 1) return `${base} ${clueColor} bg-cyan-300 text-zinc-950`;
if (value === 0) return `${base} ${clueColor} bg-zinc-800 text-zinc-200`;
return `${base} ${clueColor} bg-zinc-950 text-zinc-100 hover:bg-zinc-800`;
}

function render() {
gridEl.innerHTML = "";
const stats = puzzleStats();
solvedCountEl.textContent = stats.solved;
statusEl.textContent = stats.solved === size * size
? "Solved. The mosaic satisfies every clue."
: stats.errors > 0
? `${stats.errors} clue${stats.errors === 1 ? "" : "s"} cannot be satisfied.`
: "No contradictions so far.";

for (let r = 0; r < size; r += 1) {
for (let c = 0; c < size; c += 1) {
const button = document.createElement("button");
const state = clueState(r, c);
button.className = cellClass(marks[r][c], state);
button.addEventListener("click", () => cycleCell(r, c));

const clue = document.createElement("span");
clue.className = "absolute left-2 top-1 text-xs font-bold";
clue.textContent = clues[r][c];
const mark = document.createElement("span");
mark.className = "flex h-full items-center justify-center text-2xl font-black";
mark.textContent = marks[r][c] === -1 ? "" : marks[r][c] === 1 ? "#" : "x";
button.append(clue, mark);
gridEl.appendChild(button);
}
}
}

hintBtn.addEventListener("click", revealHint);
resetBtn.addEventListener("click", resetGame);
resetGame();
</script>
</body>
</html>