dsh-dock 0.7.0 → 0.8.0

package/features/games/games/tank.jsx

@@ -0,0 +1,128 @@
+/* 趣味游戏 · 坦克大战（经典机台）——纯 Client；击毁敌方坦克、守住基地过关。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GRID, EMPTY, STEEL, BRICK, BASE, initialState, step, nextWave, findBase } from "../tank-core.js";
+import { focusStage, useGameControls } from "./shared.jsx";
+
+const DIR_ANGLE = { up: 0, right: 90, down: 180, left: 270 };
+const ENEMY_COLORS = ["#f87171", "#fb923c", "#c084fc", "#4ade80", "#38bdf8"];
+
+export function TankGame(props) {
+	const [snap, setSnap] = useState(initialState);
+	const [status, setStatus] = useState("play"); // play | wave | over | win
+	const snapRef = useRef(snap); snapRef.current = snap;
+	const keys = useRef({ dir: null, shoot: false });
+	const pausedRef = useRef(!!(props && props.paused)); pausedRef.current = !!(props && props.paused);
+	const statusRef = useRef("play"); statusRef.current = status;
+	const boardRef = useRef(null);
+
+	const start = useCallback(() => {
+		setSnap(initialState()); setStatus("play"); statusRef.current = "play";
+	}, []);
+	const nextLvl = useCallback(() => {
+		setSnap((s) => nextWave(s)); setStatus("play"); statusRef.current = "play";
+	}, []);
+
+	// 主循环
+	useEffect(() => {
+		const timer = setInterval(() => {
+			if (pausedRef.current) return;
+			setSnap((s) => {
+				if (s.over || s.win) return s;
+				const input = { dir: keys.current.dir, shoot: keys.current.shoot };
+				const ns = step(s, input);
+				if (ns.over && statusRef.current === "play") { statusRef.current = "over"; setStatus("over"); }
+				else if (ns.win && statusRef.current === "play") { statusRef.current = "wave"; setStatus("wave"); }
+				return ns;
+			});
+		}, 120);
+		return () => clearInterval(timer);
+	}, []);
+
+	const stageRef = useRef(null);
+	const onKeyDown = useCallback((event) => {
+		if (pausedRef.current) return;
+		const map = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right", w: "up", s: "down", a: "left", d: "right", W: "up", S: "down", A: "left", D: "right" };
+		const dir = map[event.key];
+		if (dir) { event.preventDefault(); keys.current.dir = dir; return; }
+		if (event.key === " ") { event.preventDefault(); keys.current.shoot = true; }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); start(); }
+	}, [start]);
+	const onKeyUp = useCallback((event) => {
+		const map = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right", w: "up", s: "down", a: "left", d: "right", W: "up", S: "down", A: "left", D: "right" };
+		const dir = map[event.key];
+		if (dir && keys.current.dir === dir) keys.current.dir = null;
+		if (event.key === " ") keys.current.shoot = false;
+	}, []);
+	useGameControls(stageRef, pausedRef.current, onKeyDown, onKeyUp);
+
+	const grid = snap.grid;
+	const player = snap.player;
+	const enemies = snap.enemies;
+	const bullets = snap.bullets;
+	let playerPos = null;
+	if (player && player.alive) playerPos = { r: player.r, c: player.c };
+	const enemyMap = {};
+	for (const e of enemies) enemyMap[e.r + "-" + e.c] = e;
+	const bulletMap = {};
+	for (const b of bullets) bulletMap[b.r + "-" + b.c] = b;
+	const basePos = findBase(grid);
+
+	const cells = [];
+	for (let r = 0; r < GRID; r += 1) {
+		for (let c = 0; c < GRID; c += 1) {
+			const key = r + "-" + c;
+			let cls = "dgame-tank-cell";
+			let inner = null;
+			if (grid[r][c] === STEEL) cls += " steel";
+			else if (grid[r][c] === BRICK) cls += " brick";
+			else if (grid[r][c] === BASE) cls += " base";
+			if (playerPos && playerPos.r === r && playerPos.c === c) {
+				cls += " pw";
+				inner = <i className="dgame-tank-body pw" style={{ transform: "rotate(" + DIR_ANGLE[player.dir] + "deg)" }} />;
+			} else if (enemyMap[key]) {
+				const e = enemyMap[key];
+				cls += " en";
+				inner = <i className="dgame-tank-body en" style={{ background: ENEMY_COLORS[(e.r + e.c) % ENEMY_COLORS.length], transform: "rotate(" + DIR_ANGLE[e.dir] + "deg)" }} />;
+			}
+			if (bullets && bulletMap[key]) cls += " bullet";
+			cells.push(<span key={key} className={cls}>{inner}{bulletMap[key] ? <i className="dgame-tank-bullet" aria-hidden="true" /> : null}{grid[r][c] === BASE ? <b className="dgame-tank-flag" aria-hidden="true">⚑</b> : null}</span>);
+		}
+	}
+
+	const statusText = status === "over" ? "基地失守 · 游戏结束" : status === "wave" ? "第 " + snap.wave + " 波清空！进入下一波" : ("第 " + snap.wave + " 波 · 待歼灭 " + (snap.remaining + snap.enemies.length) + " 辆 · 生命 × " + (player && player.lives));
+
+	return <section className="dgame-game" aria-label="坦克大战">
+		<div className="dgame-game-head"><div><h3>坦克大战</h3><p>方向键移动，空格开炮；击毁敌方坦克，别让敌军摧毁中央基地。</p></div><div className="dgame-score"><span>得分 <strong>{snap.score}</strong></span><span>生命 × {player && player.lives}</span></div></div>
+		<div className="dgame-tank-stage" ref={stageRef} tabIndex={0} role="grid" onKeyDown={onKeyDown} onKeyUp={onKeyUp} onClick={() => focusStage(stageRef)} aria-label="坦克大战游戏区域，方向键移动，空格开炮">
+			<div className="dgame-tank-grid">{cells}</div>
+			{status === "over" ? <div className="dgame-over"><strong>胜败已分 · 得 {snap.score} 分</strong><button type="button" onClick={start}>重新开始</button></div> : null}
+			{status === "wave" ? <div className="dgame-over"><strong>第 {snap.wave} 波清空！</strong><button type="button" onClick={nextLvl}>下一波</button></div> : null}
+		</div>
+		<div className="dgame-controls dgame-tank-controls">
+			<button type="button" aria-label="向上" onClick={() => { keys.current.dir = "up"; setTimeout(() => { if (keys.current.dir === "up") keys.current.dir = null; }, 90); }}>↑</button>
+			<span>方向键 / WASD · 空格开炮 · R 重开</span>
+			<button type="button" className="dgame-tank-fire" aria-label="开炮" onClick={() => { keys.current.shoot = true; setTimeout(() => { keys.current.shoot = false; }, 90); }}>开炮</button>
+		</div>
+	</section>;
+}
+
+export function TankPreview() {
+	// 迷你战场：砖墙/钢墙色块 + 我方坦克 + 敌方坦克 + 基地，与真实游戏元素一致。
+	const ROWS = [
+		"..B..B..",
+		"S.....E.",
+		"..B.B...",
+		"B..S...B",
+		"...P..F.",
+	];
+	const cls = { ".": "void", B: "brick", S: "steel", P: "pw", E: "en", F: "base" };
+	return <span className="dgcov-prev dgcov-prev-tank" aria-hidden="true">
+		<span className="dgp-tank-grid">
+			{ROWS.flatMap((row, r) => row.split("").map((ch, c) => <i key={r + "-" + c} className={"dgp-tank-" + cls[ch]} />))}
+		</span>
+	</span>;
+}
+
+export const tankGame = { Game: TankGame, Preview: TankPreview, css: `
+.dgame-tank-stage{position:relative;align-self:center;width:min(100%,320px);aspect-ratio:1/1;border:1px solid color-mix(in srgb,rgb(250 204 21) 32%,var(--dsw-alias-border-l1));border-radius:8px;overflow:hidden;outline:none;background:linear-gradient(180deg,#1a1425,#100d1c);box-shadow:inset 0 0 26px rgb(0 0 0/.5)}.dgame-tank-stage:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(250 204 21) 30%,transparent)}.dgame-tank-grid{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);width:100%;height:100%;gap:0}.dgame-tank-cell{position:relative;background:rgba(255,255,255,.03);min-width:0;min-height:0}.dgame-tank-cell.steel{background:linear-gradient(180deg,#94a3b8,#64748b)}.dgame-tank-cell.brick{background:repeating-linear-gradient(45deg,#a3672a 0 55%,#8a5a1c 55% 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}.dgame-tank-cell.base{background:#fbbf24}.dgame-tank-cell.bullet::before{content:'';position:absolute;inset:38%;background:#fef3c7;box-shadow:0 0 5px #fef3c7;z-index:4}.dgame-tank-flag{position:absolute;inset:0;display:grid;place-items:center;color:#7c2d12;font-size:18px;z-index:2}.dgame-tank-body{position:absolute;inset:16%;display:block;border-radius:16%;z-index:3;transition:transform .1s ease}.dgame-tank-body.pw{background:linear-gradient(135deg,#fde047,#eab308);box-shadow:0 0 7px color-mix(in srgb,#eab308 55%,transparent)}.dgame-tank-body.en{background:#f87171;box-shadow:0 0 5px color-mix(in srgb,#f87171 40%,transparent)}.dgame-tank-body::before{content:'';position:absolute;left:38%;top:-30%;width:24%;height:64%;background:rgba(255,255,255,.5);border-radius:3px}.dgame-tank-controls{grid-template-columns:1fr auto 1fr}
+` };

package/features/games/games/tetris.jsx

@@ -0,0 +1,302 @@
+/* 趣味游戏 · 俄罗斯方块（经典机台）——纯 Client，键盘/按钮可玩；不写会话、不改工作区。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
+
+const COLS = 10, ROWS = 20;
+const SHAPES = [
+	{ color: "#22d3ee", mat: [[1, 1, 1, 1]] },
+	{ color: "#facc15", mat: [[1, 1], [1, 1]] },
+	{ color: "#c084fc", mat: [[0, 1, 0], [1, 1, 1]] },
+	{ color: "#4ade80", mat: [[0, 1, 1], [1, 1, 0]] },
+	{ color: "#f87171", mat: [[1, 1, 0], [0, 1, 1]] },
+	{ color: "#60a5fa", mat: [[1, 0, 0], [1, 1, 1]] },
+	{ color: "#fb923c", mat: [[0, 0, 1], [1, 1, 1]] },
+];
+
+function rotateCW(mat) {
+	return mat[0].map((_, col) => mat.map((row) => row[col]).reverse());
+}
+function rotations(shape) {
+	const list = [shape.mat];
+	let cur = shape.mat;
+	for (let i = 0; i < 3; i += 1) {
+		cur = rotateCW(cur);
+		if (!list.some((m) => JSON.stringify(m) === JSON.stringify(cur))) list.push(cur);
+	}
+	return list;
+}
+const PIECES = SHAPES.map((s) => ({ color: s.color, rots: rotations(s) }));
+
+// 精确网格线（viewBox 1000×2000，轨道与方块单元格逐一对齐，杜绝背景纹理的亚像素漂移）。
+const TETRIS_GRID = (() => {
+	const lines = [];
+	let k = 0;
+	for (let i = 1; i < 10; i += 1) lines.push(<line key={k++} x1={i * 100} y1={0} x2={i * 100} y2={2000} />);
+	for (let j = 1; j < 20; j += 1) lines.push(<line key={k++} x1={0} y1={j * 100} x2={1000} y2={j * 100} />);
+	return lines;
+})();
+
+function emptyBoard() {
+	return Array.from({ length: ROWS }, () => Array(COLS).fill(null));
+}
+function collides(board, mat, x, y) {
+	for (let r = 0; r < mat.length; r += 1) {
+		for (let c = 0; c < mat[r].length; c += 1) {
+			if (!mat[r][c]) continue;
+			const bx = x + c, by = y + r;
+			if (bx < 0 || bx >= COLS || by >= ROWS || (by >= 0 && board[by][bx])) return true;
+		}
+	}
+	return false;
+}
+function merge(board, mat, x, y, color) {
+	const next = board.map((row) => row.slice());
+	for (let r = 0; r < mat.length; r += 1) {
+		for (let c = 0; c < mat[r].length; c += 1) {
+			if (mat[r][c] && y + r >= 0) next[y + r][x + c] = color;
+		}
+	}
+	return next;
+}
+function clearLines(board) {
+	const kept = board.filter((row) => row.some((cell) => !cell));
+	const cleared = ROWS - kept.length;
+	while (kept.length < ROWS) kept.unshift(Array(COLS).fill(null));
+	return { board: kept, cleared };
+}
+function seedBag() {
+	const bag = SHAPES.map((_, i) => i);
+	for (let i = bag.length - 1; i > 0; i -= 1) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[bag[i], bag[j]] = [bag[j], bag[i]];
+	}
+	return bag;
+}
+let PIECE_SEQ = 0;
+function makePiece(type, x, y) {
+	const p = PIECES[type];
+	return { id: ++PIECE_SEQ, type, rot: 0, x, y: y != null ? y : -1, mat: p.rots[0], color: p.color };
+}
+function initial() {
+	const bag = seedBag();
+	const piece = makePiece(bag.pop(), 3);
+	const next = bag.pop();
+	return { board: emptyBoard(), piece, next, bag, score: 0, lines: 0, level: 1, over: false };
+}
+// 用"下一个"方块生成当前块并补足 7-bag。bag 耗尽时立即重洗新 bag，
+// 保证预览 next 永远不为空（否则会与实际生成的方块不一致）。
+function spawnFrom(state) {
+	let bag = state.bag && state.bag.length ? state.bag.slice() : seedBag();
+	const type = state.next != null ? state.next : bag.pop();
+	let next = bag.length ? bag.pop() : null;
+	if (next == null) {
+		bag = seedBag();
+		next = bag.pop();
+	}
+	const piece = makePiece(type, 3);
+	const over = collides(state.board, piece.mat, piece.x, piece.y) || state.over;
+	return Object.assign({}, state, { bag, next, piece, over });
+}
+// 推进一格：能下移则下移，否则落地合并、消行、生成下一个。
+function advance(state) {
+	if (state.over) return state;
+	const p = state.piece;
+	if (!collides(state.board, p.mat, p.x, p.y + 1)) {
+		return Object.assign({}, state, { piece: Object.assign({}, p, { y: p.y + 1 }), score: state.score + 1 });
+	}
+	const merged = merge(state.board, p.mat, p.x, p.y, p.color);
+	playSfx("lock");
+	const cleared = clearLines(merged);
+	if (cleared.cleared) playSfx(cleared.cleared >= 4 ? "win" : "clear");
+	const lines = state.lines + cleared.cleared;
+	const level = Math.floor(lines / 10) + 1;
+	const base = [0, 100, 300, 500, 800][cleared.cleared] || 800;
+	const scored = Object.assign({}, state, {
+		board: cleared.board, lines, level,
+		score: state.score + base * state.level,
+	});
+	return spawnFrom(scored);
+}
+function hardDrop(state) {
+	if (state.over) return state;
+	let y = state.piece.y, dist = 0;
+	while (!collides(state.board, state.piece.mat, state.piece.x, y + 1)) { y += 1; dist += 1; }
+	const p = Object.assign({}, state.piece, { y });
+	const merged = merge(state.board, p.mat, p.x, p.y, p.color);
+	playSfx("lock");
+	const cleared = clearLines(merged);
+	if (cleared.cleared) playSfx(cleared.cleared >= 4 ? "win" : "clear");
+	const lines = state.lines + cleared.cleared;
+	const level = Math.floor(lines / 10) + 1;
+	const base = [0, 100, 300, 500, 800][cleared.cleared] || 800;
+	const scored = Object.assign({}, state, {
+		board: cleared.board, lines, level,
+		score: state.score + base * state.level + dist * 2,
+	});
+	return spawnFrom(scored);
+}
+
+const KEY_ACTIONS = {
+	"ArrowLeft": "left", "a": "left", "A": "left",
+	"ArrowRight": "right", "d": "right", "D": "right",
+	// 下键 = 快速下滑（一格一格连降，松开即停；空格/回车才是直落到底）。
+	"ArrowDown": "down", "s": "down", "S": "down",
+	"ArrowUp": "cw", "x": "cw", "X": "cw",
+	"z": "ccw", "Z": "ccw",
+	" ": "drop", "Enter": "drop",
+};
+
+export function TetrisGame(props) {
+	const [state, setState] = useState(initial);
+	const [manualPause, setManualPause] = useState(false);
+	const pausedRef = useRef(!!(props && props.paused));
+	pausedRef.current = !!(props && props.paused) || manualPause;
+	const stageRef = useRef(null);
+
+	// 事件委托统一处理（避免按钮/键盘两套逻辑）。
+	const act = useCallback((action) => setState((s) => {
+		if (pausedRef.current) return s;
+		if (action === "left") {
+			playSfx("move");
+			const x2 = s.piece.x - 1;
+			if (collides(s.board, s.piece.mat, x2, s.piece.y)) return s;
+			return Object.assign({}, s, { piece: Object.assign({}, s.piece, { x: x2 }) });
+		}
+		if (action === "right") {
+			playSfx("move");
+			const x2 = s.piece.x + 1;
+			if (collides(s.board, s.piece.mat, x2, s.piece.y)) return s;
+			return Object.assign({}, s, { piece: Object.assign({}, s.piece, { x: x2 }) });
+		}
+		if (action === "down") return advance(s);
+		if (action === "drop") return hardDrop(s);
+		if (action === "cw" || action === "ccw") { playSfx("rotate"); return rotatePiece(s, action === "cw" ? 1 : -1); }
+		return s;
+	}), []);
+
+	// 下键快速下滑：按住时以 45ms/格 连降（松开即停，可中途左右修正），不直接到底。
+	// 只对"按住时正在下落的那个方块"生效——它一旦落定生成新方块，连降自动结束。
+	const softRef = useRef(null);
+	const stateRef = useRef(state); stateRef.current = state;
+	const holdIdRef = useRef(null);
+	const stopSoft = useCallback(() => {
+		if (softRef.current) { clearInterval(softRef.current); softRef.current = null; }
+	}, []);
+	useEffect(() => {
+		if (state.over || manualPause || props.paused) stopSoft();
+		return stopSoft;
+	}, [state.over, manualPause, props.paused, stopSoft]);
+
+	const onKeyDown = useCallback((event) => {
+		const action = KEY_ACTIONS[event.key];
+		if (action) {
+			event.preventDefault();
+			if (action === "down") {
+				const pieceId = stateRef.current.piece && stateRef.current.piece.id;
+				act("down");
+				if (!softRef.current && !pausedRef.current) {
+					holdIdRef.current = pieceId;
+					softRef.current = setInterval(() => {
+						const cur = stateRef.current;
+						if (pausedRef.current || cur.over || !cur.piece || cur.piece.id !== holdIdRef.current) { stopSoft(); return; }
+						act("down");
+					}, 45);
+				}
+				return;
+			}
+			act(action);
+			return;
+		}
+		if (event.key.toLowerCase() === "p") { event.preventDefault(); setManualPause((p) => !p); }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); setState(initial()); setManualPause(false); }
+	}, [act, stopSoft]);
+	const onKeyUp = useCallback((event) => {
+		if (KEY_ACTIONS[event.key] === "down") stopSoft();
+	}, [stopSoft]);
+
+	useEffect(() => {
+		if (state.over) playSfx("over");
+	}, [state.over]);
+
+	useEffect(() => {
+		if (pausedRef.current || state.over) return;
+		const speed = Math.max(80, 720 - (state.level - 1) * 70);
+		const timer = setInterval(() => act("down"), speed);
+		return () => clearInterval(timer);
+	}, [state.level, state.over, act, props.paused, manualPause]);
+
+	useGameControls(stageRef, pausedRef.current, onKeyDown, onKeyUp);
+
+	const display = state.board.map((row) => row.slice());
+	if (!state.over) {
+		const m = state.piece.mat;
+		for (let r = 0; r < m.length; r += 1) {
+			for (let c = 0; c < m[r].length; c += 1) {
+				if (m[r][c]) {
+					const by = state.piece.y + r, bx = state.piece.x + c;
+					if (by >= 0 && by < ROWS && bx >= 0 && bx < COLS) display[by][bx] = state.piece.color;
+				}
+			}
+		}
+	}
+	const nextType = state.next != null ? state.next : 0;
+	const nextMat = PIECES[nextType].rots[0];
+
+	return <section className="dgame-game" aria-label="俄罗斯方块">
+		<div className="dgame-game-head"><div><h3>俄罗斯方块</h3><p>拼满一行即消除，速度随等级加快；方块堆到顶端就结束。</p></div><div className="dgame-score"><span>得分 <strong>{state.score}</strong></span><span>等级 {state.level} · 消行 {state.lines}</span></div></div>
+		<div className="dgame-tetris">
+			<div className="dgame-tetris-board" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onBlur={stopSoft} onClick={() => focusStage(stageRef)} aria-label="俄罗斯方块游戏区域，使用方向键与空格控制">
+				{display.map((row, rr) => row.map((cell, cc) => <i key={rr + "-" + cc} className="dgame-tetris-cell" style={cell ? { background: cell, boxShadow: "0 0 8px " + cell + "aa, inset 0 0 4px rgba(255,255,255,.5)" } : undefined} />))}
+				{state.over ? <div className="dgame-over"><strong>方块堆到顶了</strong><button type="button" onClick={() => setState(initial())}>再来一局</button></div> : <svg className="dgame-tetris-lines" viewBox="0 0 1000 2000" preserveAspectRatio="none" aria-hidden="true">{TETRIS_GRID}</svg>}
+				{!state.over && (props.paused || manualPause) ? <div className="dgame-over"><strong>已暂停</strong><button type="button" onClick={() => setManualPause(false)}>继续（P）</button></div> : null}
+			</div>
+			<div className="dgame-tetris-side">
+				<div className="dgame-tetris-next"><span>下一个</span><div className="dgame-tetris-nextbox">{nextMat.map((row, r) => row.map((cell, c) => <i key={r + "-" + c} className="dgame-tetris-cell" style={cell ? { background: PIECES[nextType].color } : undefined} />))}</div></div>
+				<div className="dgame-tetris-keys"><b>操作</b><span>←/→ 移动 · ↓ 快速下滑 · ↑/X 旋转 · Z 反向 · 空格 直落 · P 暂停 · R 重开</span></div>
+			</div>
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="左移" onClick={() => act("left")}>← 左移</button><span>方向键 / X、Z、空格、P</span><button type="button" aria-label="右移" onClick={() => act("right")}>右移 {'->'}</button></div>
+	</section>;
+}
+
+// 旋转：带简单墙踢。
+function rotatePiece(state, dir) {
+	const rots = PIECES[state.piece.type].rots;
+	const len = rots.length;
+	const nextRot = ((state.piece.rot + dir) % len + len) % len;
+	const mat = rots[nextRot];
+	const kicks = [0, -1, 1, -2, 2, -1 - (state.piece.y < 0 ? 1 : 0), 1 + (state.piece.y < 0 ? 1 : 0), -1, 1];
+	for (const kx of kicks) {
+		if (!collides(state.board, mat, state.piece.x + kx, state.piece.y)) {
+			return Object.assign({}, state, { piece: Object.assign({}, state.piece, { rot: nextRot, x: state.piece.x + kx, mat }) });
+		}
+	}
+	return state;
+}
+
+export function TetrisPreview() {
+	// 迷你棋盘：底部已堆方块 + 悬浮下落中的 T 块，与真实游戏画面一致。
+	const COLORS = { I: "I", O: "O", T: "T", S: "S", Z: "Z", J: "J", L: "L" };
+	const ROWS = [
+		"..........",
+		"....TT....",
+		"..........",
+		".......Z..",
+		"..OO.S.Z..",
+		"SS..LSOZZ.",
+		"JJSLLSOZZI",
+		"JJSLLOSOII",
+	];
+	const isFall = (r) => r === 1;
+	return <span className="dgcov-prev dgcov-prev-tetris" aria-hidden="true">
+		<span className="dgp-tet-grid">
+			{ROWS.flatMap((row, r) => row.split("").map((ch, c) => (
+				<i key={r + "-" + c} className={COLORS[ch] ? "c" + COLORS[ch] + (isFall(r) ? " fall" : "") : ""} />
+			)))}
+		</span>
+	</span>;
+}
+
+export const tetrisGame = { Game: TetrisGame, Preview: TetrisPreview, css: `
+.dgame-tetris{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;align-self:center;width:fit-content;max-width:100%;margin-inline:auto;justify-content:center}.dgame-tetris-board{position:relative;flex:none;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(20,1fr);width:min(100%,188px);aspect-ratio:10/20;border:1px solid color-mix(in srgb,rgb(34 211 238) 35%,var(--dsw-alias-border-l1));border-radius:8px;overflow:hidden;outline:none;background:linear-gradient(180deg,#0c1024,#131a3d);padding:0;box-shadow:inset 0 0 30px rgb(0 0 0/.45)}.dgame-tetris-board:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(34 211 238) 40%,transparent)}.dgame-tetris-cell{display:block;background:transparent;border-radius:2px;margin:1px}.dgame-tetris-nextbox{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);width:60px;height:32px}.dgame-tetris-side{flex:1 1 96px;display:flex;flex-direction:column;gap:9px;min-width:0;max-width:220px;color:var(--dsw-alias-label-tertiary);font-size:11px}.dgame-tetris-side b{color:var(--dsw-alias-label-secondary);font-size:12px}.dgame-tetris-side span{font-size:11px}.dgame-tetris-nextbox .dgame-tetris-cell{margin:1px}.dgame-tetris-keys span{display:block;line-height:1.6;color:var(--dsw-alias-label-tertiary);overflow-wrap:anywhere}.dgame-tetris-next{display:flex;flex-direction:column;gap:5px;align-items:center}.dgame-tetris-next span{color:var(--dsw-alias-label-secondary)}.dgame-tetris-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.dgame-tetris-lines line{stroke:#60a5fa;stroke-opacity:.12;stroke-width:2}@media (max-width:680px){.dgame-tetris{width:100%;gap:8px}.dgame-tetris-board{width:min(100%,170px)}}
+` };

package/features/games/games/xiangqi.jsx

@@ -0,0 +1,205 @@
+/* 趣味游戏 · 象棋（棋盘对战）——纯 Client；玩家执红先行，AI 执黑。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+	initialBoard, cloneBoard, pieceChar, inCheck, hasLegalMoves,
+	legalMoves, bestMove, applyMove, posKey,
+} from "../xiangqi-core.js";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
+
+// 正规棋盘：SVG 精确绘制（viewBox 900×1000，交点对齐各格中心）。
+// 外框加粗；中间竖线在楚河汉界断开；两侧九宫斜线；炮位/兵位直角标。
+const XIANGQI_LINES = (() => {
+	const P = (n) => n * 100 + 50;
+	const parts = [];
+	let k = 0;
+	parts.push(<rect key="frame" x={P(0)} y={P(0)} width={800} height={900} strokeWidth={7} fill="none" />);
+	for (let r = 1; r <= 8; r += 1) parts.push(<line key={k++} x1={P(0)} y1={P(r)} x2={P(8)} y2={P(r)} />);
+	for (let c = 1; c <= 7; c += 1) {
+		parts.push(<line key={k++} x1={P(c)} y1={P(0)} x2={P(c)} y2={P(4)} />);
+		parts.push(<line key={k++} x1={P(c)} y1={P(5)} x2={P(c)} y2={P(9)} />);
+	}
+	parts.push(<path key={k++} d={`M${P(3)} ${P(0)}L${P(5)} ${P(2)}M${P(5)} ${P(0)}L${P(3)} ${P(2)}M${P(3)} ${P(7)}L${P(5)} ${P(9)}M${P(5)} ${P(7)}L${P(3)} ${P(9)}`} />);
+	// 炮位/兵位的四角直角小标（贴边的点只画内侧两角）。
+	const t = 14, o = 16;
+	const marks = [[1, 2], [7, 2], [1, 7], [7, 7], [0, 3], [2, 3], [4, 3], [6, 3], [8, 3], [0, 6], [2, 6], [4, 6], [6, 6], [8, 6]];
+	for (const [c, r] of marks) {
+		const seg = [];
+		if (c > 0) seg.push(
+			`M${P(c) - o - t} ${P(r) - o}H${P(c) - o}V${P(r) - o - t}`,
+			`M${P(c) - o - t} ${P(r) + o}H${P(c) - o}V${P(r) + o + t}`,
+		);
+		if (c < 8) seg.push(
+			`M${P(c) + o} ${P(r) - o}H${P(c) + o + t}V${P(r) - o - t}`,
+			`M${P(c) + o} ${P(r) + o}H${P(c) + o + t}V${P(r) + o + t}`,
+		);
+		parts.push(<path key={k++} className="dgame-xiangqi-mark" strokeWidth={2.6} d={seg.join("")} />);
+	}
+	return parts;
+})();
+
+export function XiangqiGame(props) {
+	const [board, setBoard] = useState(initialBoard);
+	const [turn, setTurn] = useState("r");
+	const [sel, setSel] = useState(null);         // [r,c]
+	const [targets, setTargets] = useState([]);   // [r,c][]
+	const [over, setOver] = useState(null);       // 'r' | 'b' | 'draw'
+	const [check, setCheck] = useState(false);
+	const [last, setLast] = useState(null);
+	const [thinking, setThinking] = useState(false);
+	const [history, setHistory] = useState([]);
+	// 已出现过的局面指纹：AI 搜索时排除重复局面，杜绝"反复将军无限循环"。
+	const [repKeys, setRepKeys] = useState(() => [posKey(initialBoard())]);
+	const pushKey = useCallback((b) => setRepKeys((ks) => (ks[ks.length - 1] === posKey(b) ? ks : ks.concat(posKey(b)))), []);
+
+	const stageRef = useRef(null);
+	const boardRef = useRef(board); boardRef.current = board;
+	const turnRef = useRef(turn); turnRef.current = turn;
+	const overRef = useRef(over); overRef.current = over;
+	const thinkingRef = useRef(thinking); thinkingRef.current = thinking;
+	const historyRef = useRef(history); historyRef.current = history;
+
+	const restart = useCallback(() => {
+		const b = initialBoard();
+		boardRef.current = b;
+		setBoard(b); setTurn("r"); setSel(null); setTargets([]); setOver(null); setCheck(false); setLast(null); setThinking(false); setHistory([]);
+		setRepKeys([posKey(b)]);
+	}, []);
+
+	const undo = useCallback(() => {
+		if (thinkingRef.current || overRef.current || turnRef.current !== "r") return;
+		const h = historyRef.current;
+		if (h.length < 2) return;
+		const hist = h.slice(0, -2);
+		const b = hist.length ? cloneBoard(hist[hist.length - 1]) : initialBoard();
+		boardRef.current = b;
+		setBoard(b); setHistory(hist); setSel(null); setTargets([]); setLast(null); setOver(null);
+		setCheck(inCheck(b, "r"));
+		// 重建局面指纹（历史各局面 + 当前）。
+		setRepKeys(hist.map(posKey).concat(posKey(b)));
+	}, []);
+
+	const moveRed = useCallback((tr, tc) => {
+		if (turnRef.current !== "r" || overRef.current || !sel) return;
+		const fr = sel[0], fc = sel[1];
+		if (boardRef.current[tr][tc]) playSfx("capture"); else playSfx("step");
+		const nb = applyMove(boardRef.current, fr, fc, tr, tc);
+		setHistory((h) => [...h, boardRef.current]);
+		boardRef.current = nb;
+		pushKey(nb);
+		setBoard(nb);
+		setSel(null); setTargets([]); setLast([tr, tc]);
+		setTurn("b");
+		if (!hasLegalMoves(nb, "b")) { setOver("r"); setCheck(false); }
+		else setCheck(inCheck(nb, "b"));
+	}, [sel, pushKey]);
+
+	const select = useCallback((r, c) => {
+		if (overRef.current || turnRef.current !== "r" || thinkingRef.current) return;
+		const p = boardRef.current[r][c];
+		if (p && p.c === "r") {
+			setSel([r, c]);
+			const list = legalMoves(boardRef.current, "r").filter((m) => m[0] === r && m[1] === c).map((m) => [m[2], m[3]]);
+			setTargets(list);
+			return;
+		}
+		if (sel && targets.some(([tr, tc]) => tr === r && tc === c)) { moveRed(r, c); return; }
+		setSel(null); setTargets([]);
+	}, [sel, targets, moveRed]);
+
+	// AI 回合（执黑）：搜索时排除已出现过的局面，禁止长将循环。
+	useEffect(() => {
+		if (turn !== "b" || over || props.paused) return;
+		const t = setTimeout(() => {
+			// 局面出现次数表：AI 优先走新局面；全部重复时也倾向去往出现最少的局面。
+			const seenCounts = new Map();
+			for (const k of repKeys) seenCounts.set(k, (seenCounts.get(k) || 0) + 1);
+			const mv = bestMove(boardRef.current, "b", 3, seenCounts);
+			if (mv) {
+				const [fr, fc, tr, tc] = mv;
+				if (boardRef.current[tr][tc]) playSfx("capture"); else playSfx("step");
+				const nb = applyMove(boardRef.current, fr, fc, tr, tc);
+				setHistory((h) => [...h, boardRef.current]);
+				boardRef.current = nb;
+				pushKey(nb);
+				setBoard(nb); setLast([tr, tc]); setTurn("r");
+				if (!hasLegalMoves(nb, "r")) { setOver("b"); setCheck(false); }
+				else setCheck(inCheck(nb, "r"));
+			} else setOver("r");
+			setThinking(false);
+		}, 90);
+		setThinking(true);
+		return () => clearTimeout(t);
+	}, [turn, over, props.paused, repKeys, pushKey]);
+
+	const onKeyDown = useCallback((event) => {
+		if (event.key.toLowerCase() === "r") { event.preventDefault(); restart(); }
+		else if (event.key.toLowerCase() === "u") { event.preventDefault(); undo(); }
+	}, [restart, undo]);
+	useGameControls(stageRef, props.paused, onKeyDown);
+
+	const status = over === "r" ? "红方胜 · 恭喜" : over === "b" ? "黑方胜 · AI 赢" : (thinking ? "AI 思考中…" : (check ? "将军！" : (turn === "r" ? "轮到你（红方）" : "轮到 AI（黑方）")));
+	const prevCheck = useRef(false);
+	useEffect(() => {
+		if (over === "r") playSfx("win");
+		else if (over === "b") playSfx("over");
+		else if (!thinking && check && !prevCheck.current) playSfx("check");
+		prevCheck.current = !thinking && check;
+	}, [check, thinking, over]);
+
+	return <section className="dgame-game" aria-label="象棋">
+		<div className="dgame-game-head"><div><h3>中国象棋</h3><p>你执红先行，AI 执黑；吃掉对方将/帅即胜。点击选中红子，再点高亮落点走棋。</p></div><div className="dgame-score"><span>当前</span><strong className="dg-gomoku-status">{status}</strong><button type="button" onClick={undo}>撤销</button><button type="button" onClick={restart}>重开</button></div></div>
+		<div className="dgame-xiangqi-board" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} onClick={() => focusStage(stageRef)} role="grid" aria-label="中国象棋棋盘">
+			<svg className="dgame-xiangqi-lines" viewBox="0 0 900 1000" preserveAspectRatio="none" aria-hidden="true">
+				{XIANGQI_LINES}
+				<text className="dgame-xiangqi-rivertext" x={230} y={505}>楚 河</text>
+				<text className="dgame-xiangqi-rivertext" x={670} y={505}>漢 界</text>
+			</svg>
+			{board.map((row, r) => row.map((p, c) => {
+				const isSel = sel && sel[0] === r && sel[1] === c;
+				const isTargetMark = targets.some(([tr, tc]) => tr === r && tc === c);
+				const isLast = last && last[0] === r && last[1] === c;
+				return <button type="button" key={r + "-" + c} role="gridcell"
+					className={"dgame-xiangqi-cell" + (isSel ? " sel" : "") + (isTargetMark ? " target" : "") + (isLast ? " last" : "")}
+					aria-label={"第" + (r + 1) + "行第" + (c + 1) + "列" + (p ? pieceChar(p) : " 空")}
+					onClick={() => { focusStage(stageRef); select(r, c); }}>
+					{p ? <span className={"dgame-xiangqi-pc " + p.c}>{pieceChar(p)}</span> : (isTargetMark ? <span className="dgame-xiangqi-dot" aria-hidden="true" /> : null)}
+				</button>;
+			}))}
+		</div>
+		<div className="dgame-controls"><button type="button" onClick={undo}>撤销</button><span>{status} · R 重开 · U 撤销</span><button type="button" onClick={restart}>重开</button></div>
+	</section>;
+}
+
+export function XiangqiPreview() {
+	// 迷你象棋盘：河界断线 + 九宫斜线 + 楚河汉界 + 对峙棋子，与真实棋盘同款画法。
+	const P = (n) => n * 100 + 50;
+	const pc = (c, r, ch, col) => [
+		<circle key={"pc" + c + r} cx={P(c)} cy={P(r)} r={44} className={"dgp-xq-pc-" + col} />,
+		<text key={"tx" + c + r} x={P(c)} y={P(r) + 2} className={"dgp-xq-tx-" + col}>{ch}</text>,
+	];
+	return <span className="dgcov-prev dgcov-prev-xiangqi" aria-hidden="true">
+		<svg viewBox="0 0 900 1000" preserveAspectRatio="xMidYMid slice">
+			<rect x={P(0)} y={P(0)} width={800} height={900} fill="none" strokeWidth={11} />
+			{[1, 2, 3, 4, 5, 6, 7, 8].map((r) => <line key={"h" + r} x1={P(0)} y1={P(r)} x2={P(8)} y2={P(r)} />)}
+			<line x1={P(0)} y1={P(0)} x2={P(0)} y2={P(9)} />
+			<line x1={P(8)} y1={P(0)} x2={P(8)} y2={P(9)} />
+			{[1, 2, 3, 4, 5, 6, 7].map((c) => [
+				<line key={"vt" + c} x1={P(c)} y1={P(0)} x2={P(c)} y2={P(4)} />,
+				<line key={"vb" + c} x1={P(c)} y1={P(5)} x2={P(c)} y2={P(9)} />,
+			])}
+			<path d={`M${P(3)} ${P(0)}L${P(5)} ${P(2)}M${P(5)} ${P(0)}L${P(3)} ${P(2)}M${P(3)} ${P(7)}L${P(5)} ${P(9)}M${P(5)} ${P(7)}L${P(3)} ${P(9)}`} />
+			<text className="dgp-xq-river" x={235} y={500}>楚河</text>
+			<text className="dgp-xq-river" x={665} y={500}>漢界</text>
+			{pc(4, 0, "將", "b")}
+			{pc(1, 2, "炮", "b")}
+			{pc(5, 3, "卒", "b")}
+			{pc(3, 6, "兵", "r")}
+			{pc(7, 7, "炮", "r")}
+			{pc(4, 9, "帥", "r")}
+		</svg>
+	</span>;
+}
+
+export const xiangqiGame = { Game: XiangqiGame, Preview: XiangqiPreview, css: `
+.dgame-xiangqi-board{position:relative;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(10,1fr);align-self:center;width:min(100%,min(90vw,340px));aspect-ratio:9/10;padding:13px;border-radius:12px;border:1px solid color-mix(in srgb,#7c4f16 65%,transparent);box-shadow:0 12px 32px rgb(0 0 0/.5),inset 0 1px 0 rgba(255,236,200,.55),inset 0 -3px 9px rgba(90,50,10,.35),inset 3px 0 8px rgba(255,224,170,.28),inset -3px 0 8px rgba(120,70,20,.25);outline:none;background:repeating-linear-gradient(94deg,rgba(124,79,22,.05) 0 2px,transparent 2px 11px),repeating-linear-gradient(87deg,rgba(255,238,196,.05) 0 2px,transparent 2px 14px),radial-gradient(130% 105% at 26% 8%,#f0cd86,#ddb067 48%,#cb9a51 78%,#bb8844)}.dgame-xiangqi-lines{position:absolute;inset:13px;pointer-events:none}.dgame-xiangqi-lines line,.dgame-xiangqi-lines path{stroke:#66431a;stroke-width:3.4;fill:none;stroke-linecap:square}.dgame-xiangqi-lines .dgame-xiangqi-mark{stroke-width:2.6}.dgame-xiangqi-rivertext{fill:rgba(102,67,26,.7);font-family:KaiTi,"Kaiti SC","STKaiti","FangSong",serif;font-size:46px;letter-spacing:7px;text-anchor:middle;dominant-baseline:central}.dgame-xiangqi-board:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.25)}.dgame-xiangqi-cell{position:relative;z-index:1;background:transparent;border:none;cursor:pointer;padding:0;margin:0;outline:none;display:grid;place-items:center;min-width:0;min-height:0}.dgame-xiangqi-cell.target .dgame-xiangqi-dot{width:12px;height:12px;border-radius:50%;background:rgba(34,211,238,.6);box-shadow:0 0 10px rgba(34,211,238,.65),0 0 0 2px rgba(255,255,255,.28)}.dgame-xiangqi-cell.target .dgame-xiangqi-pc{box-shadow:0 0 0 2px rgba(248,113,113,.85),0 0 10px rgba(248,113,113,.5),0 2px 4px rgb(0 0 0/.4),inset 0 0 0 1.5px rgba(96,62,18,.5),inset 0 1px 2px rgba(255,255,255,.95),inset 0 -2px 3px rgba(120,80,20,.4)}.dgame-xiangqi-cell.sel .dgame-xiangqi-pc::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:2.5px solid rgba(251,191,36,.95);box-shadow:0 0 12px rgba(251,191,36,.6)}.dgame-xiangqi-cell.last .dgame-xiangqi-pc::after{content:'';position:absolute;right:5%;bottom:5%;width:5px;height:5px;border-radius:50%;background:#ef4444;box-shadow:0 0 4px rgba(239,68,68,.8)}.dgame-xiangqi-pc{position:relative;display:grid;place-items:center;z-index:1;width:min(80%,30px);aspect-ratio:1/1;border-radius:50%;box-sizing:border-box;font-family:KaiTi,"Kaiti SC","STKaiti","FangSong","SimSun",serif;font-size:clamp(12px,1.4vw,15px);font-weight:700;line-height:1;background:radial-gradient(circle at 34% 28%,#fff3d4,#eedaa6 46%,#d8b675 72%,#bd9650);box-shadow:0 2px 4px rgb(0 0 0/.45),inset 0 0 0 1.5px rgba(96,62,18,.5),inset 0 1px 2px rgba(255,255,255,.95),inset 0 -2px 3px rgba(120,80,20,.4)}.dgame-xiangqi-pc.r{color:#b91c1c;text-shadow:0 1px 0 rgba(255,255,255,.5)}.dgame-xiangqi-pc.b{color:#1f2937;text-shadow:0 1px 0 rgba(255,255,255,.35)}
+` };