dsh-dock 0.7.0 → 0.7.1

package/features/games/games/snake.jsx

@@ -0,0 +1,103 @@
+/* 趣味游戏 · 贪吃蛇（经典机台）——纯 Client；吃到食物变长，撞墙或咬到自身结束。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const SIZE = 16;
+const DIRS = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1], w: [-1, 0], s: [1, 0], a: [0, -1], d: [0, 1], W: [-1, 0], S: [1, 0], A: [0, -1], D: [0, 1] };
+const OPPOSITE = { "-1,0": [1, 0], "1,0": [-1, 0], "0,-1": [0, 1], "0,1": [0, -1] };
+
+function randFood(snake) {
+	while (true) {
+		const r = Math.floor(Math.random() * SIZE), c = Math.floor(Math.random() * SIZE);
+		if (!snake.some((s) => s.r === r && s.c === c)) return { r, c };
+	}
+}
+function initial() {
+	const snake = [{ r: 7, c: 5 }, { r: 7, c: 4 }, { r: 7, c: 3 }];
+	return { snake, dir: [0, 1], food: randFood(snake), score: 0, over: false };
+}
+function step(state, dir) {
+	const head = state.snake[0];
+	const nr = head.r + dir[0], nc = head.c + dir[1];
+	const body = state.snake.slice(0, -1);
+	if (nr < 0 || nr >= SIZE || nc < 0 || nc >= SIZE || body.some((s) => s.r === nr && s.c === nc)) {
+		return Object.assign({}, state, { over: true });
+	}
+	const ate = state.food.r === nr && state.food.c === nc;
+	let snake = [{ r: nr, c: nc }, ...state.snake];
+	if (ate) {
+		const food = randFood(snake);
+		return Object.assign({}, state, { snake, food, score: state.score + 1 });
+	}
+	snake.pop();
+	return Object.assign({}, state, { snake });
+}
+
+export function SnakeGame(props) {
+	const [state, setState] = useState(initial);
+	const [paused, setPaused] = useState(false);
+	const stageRef = useRef(null);
+	const dirRef = useRef(state.dir);
+	const overRef = useRef(state.over); overRef.current = state.over;
+	const pausedRef = useRef(!!(props && props.paused) || paused); pausedRef.current = !!(props && props.paused) || paused;
+
+	const start = useCallback(() => { const init = initial(); dirRef.current = init.dir; setState(init); setPaused(false); }, []);
+	const changeDir = useCallback((nv) => {
+		if (overRef.current || pausedRef.current) return;
+		const cur = dirRef.current;
+		const opp = OPPOSITE[cur[0] + "," + cur[1]];
+		if (opp && opp[0] === nv[0] && opp[1] === nv[1]) return;
+		dirRef.current = nv;
+	}, []);
+
+	useEffect(() => {
+		if (state.over || pausedRef.current) return;
+		const speed = Math.max(70, 150 - state.score * 5);
+		const timer = setInterval(() => setState((s) => (s.over || pausedRef.current ? s : step(s, dirRef.current))), speed);
+		return () => clearInterval(timer);
+	}, [state.over, state.score, props.paused, paused]);
+
+	useEffect(() => {
+		if (pausedRef.current || state.over) return;
+		if (stageRef.current) stageRef.current.focus();
+	}, [state.over, props.paused, paused]);
+
+	const onKeyDown = useCallback((event) => {
+		const d = DIRS[event.key];
+		if (d) { event.preventDefault(); changeDir(d); return; }
+		if (event.key.toLowerCase() === "p") { event.preventDefault(); setPaused((p) => !p); }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); start(); }
+	}, [changeDir, start]);
+
+	const cells = [];
+	for (let r = 0; r < SIZE; r += 1) {
+		for (let c = 0; c < SIZE; c += 1) {
+			const idx = state.snake.findIndex((s) => s.r === r && s.c === c);
+			const isFood = state.food.r === r && state.food.c === c;
+			let cls = "dgame-snake-cell";
+			if (idx >= 0) cls += " bob" + (idx === 0 ? " head" : idx < 4 ? " body2" : "");
+			if (isFood) cls += " food";
+			cells.push(<i key={r + "-" + c} className={cls} aria-hidden="true" />);
+		}
+	}
+
+	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 + 3}</strong></span><span>得分 {state.score}</span></div></div>
+		<div className="dgame-snake-stage" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} aria-label="贪吃蛇游戏区域，使用方向键控制移动">
+			<div className="dgame-snake-grid">{cells}</div>
+			{state.over ? <div className="dgame-over"><strong>撞上了 · 得 {state.score} 分</strong><button type="button" onClick={start}>重新开始</button></div> : null}
+			{!state.over && pausedRef.current ? <div className="dgame-over"><strong>已暂停</strong><button type="button" onClick={() => setPaused(false)}>继续（P）</button></div> : null}
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="向上" onClick={() => changeDir([-1, 0])}>↑</button><span>方向键 / WASD · P 暂停 · R 重开</span><button type="button" aria-label="向下" onClick={() => changeDir([1, 0])}>↓</button></div>
+	</section>;
+}
+
+export function SnakePreview() {
+	return <span className="dgcov-prev dgcov-prev-snake" aria-hidden="true">
+		<i style={{ left: "12%", top: "62%" }} /><i style={{ left: "24%", top: "62%" }} /><i style={{ left: "36%", top: "62%" }} /><i style={{ left: "48%", top: "62%" }} /><i style={{ left: "60%", top: "62%" }} />
+		<b />
+	</span>;
+}
+
+export const snakeGame = { Game: SnakeGame, Preview: SnakePreview, css: `
+.dgame-snake-stage{position:relative;align-self:center;width:min(100%,300px);aspect-ratio:1/1;border:1px solid color-mix(in srgb,rgb(74 222 128) 32%,var(--dsw-alias-border-l1));border-radius:10px;overflow:hidden;outline:none;background:radial-gradient(circle at 50% -10%,color-mix(in srgb,#166534 30%,transparent),transparent 55%),#0a1420}.dgame-snake-stage:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(74 222 128) 35%,transparent)}.dgame-snake-grid{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,1fr);width:100%;height:100%}.dgame-snake-cell{position:relative}.dgame-snake-cell.food::after{content:'';position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fecaca,#ef4444 70%);box-shadow:0 0 9px color-mix(in srgb,#ef4444 70%,transparent)}.dgame-snake-cell.bob::after{content:'';position:absolute;inset:20%;border-radius:26%;background:linear-gradient(135deg,#4ade80,#16a34a)}.dgame-snake-cell.head::after{background:linear-gradient(135deg,#bbf7d0,#22c55e);border-radius:30% 30% 28% 28%;box-shadow:0 1px 6px color-mix(in srgb,#22c55e 60%,transparent)}.dgame-snake-cell.head::before{content:'';position:absolute;left:30%;top:30%;width:9%;height:9%;border-radius:50%;background:#0b1b12}.dgame-snake-cell.body2::after{background:linear-gradient(135deg,#34d399,#0d9f6e)}
+` };

package/features/games/games/sokoban.jsx

@@ -0,0 +1,153 @@
+/* 趣味游戏 · 推箱子（经典机台）——纯 Client；把箱子推到目标点上即可过关。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// 关卡：'#' 墙 · ' ' 地板 · '.' 目标 · '$' 箱子 · '@' 人 · '*' 箱子在目标 · '+' 人在目标
+const LEVELS = [
+	["######", "#    #", "#@$ .#", "#    #", "######"],
+	["######", "# @  #", "# $  #", "# .  #", "######"],
+	["#######", "# @   #", "# $$  #", "# ..  #", "#######"],
+	["######", "#@   #", "# $  #", "#  . #", "#    #", "######"],
+	["#######", "# @   #", "# $   #", "#  $ .#", "#   . #", "#######"],
+	["########", "#      #", "# $ $  #", "# . .  #", "#   @  #", "########"],
+];
+
+function cloneGrid(grid) {
+	return grid.map((row) => row.slice());
+}
+function parse(rows) {
+	return rows.map((row) => row.split(""));
+}
+function findPlayer(grid) {
+	for (let r = 0; r < grid.length; r += 1) {
+		for (let c = 0; c < grid[r].length; c += 1) {
+			if (grid[r][c] === "@" || grid[r][c] === "+") return { r, c };
+		}
+	}
+	return { r: 0, c: 0 };
+}
+function isTarget(ch) {
+	return ch === "." || ch === "*" || ch === "+";
+}
+function isBox(ch) {
+	return ch === "$" || ch === "*";
+}
+// 获胜：没有箱子错位（不存在 '$'）。
+function won(grid) {
+	for (const row of grid) for (const ch of row) if (ch === "$") return false;
+	return true;
+}
+function makeInitial(levelIndex) {
+	const grid = parse(LEVELS[levelIndex]);
+	return { grid, moves: 0, pushes: 0, level: levelIndex, wonNew: false, history: [] };
+}
+
+function step(state, dr, dc) {
+	if (state.wonNew) return state;
+	const grid = cloneGrid(state.grid);
+	const p = findPlayer(grid);
+	const nr = p.r + dr, nc = p.c + dc;
+	if (nr < 0 || nr >= grid.length || nc < 0 || nc >= grid[0].length) return state;
+	const target = grid[nr][nc];
+	if (target === "#") return state;
+	grid[p.r][p.c] = isTarget(grid[p.r][p.c]) ? "." : " ";
+	if (isBox(target)) {
+		const br = nr + dr, bc = nc + dc;
+		if (br < 0 || br >= grid.length || bc < 0 || bc >= grid[0].length) return state;
+		const beyond = grid[br][bc];
+		if (beyond === "#" || isBox(beyond)) return state;
+		grid[br][bc] = isTarget(beyond) ? "*" : "$";
+		grid[nr][nc] = isTarget(target) ? "+" : "@";
+		return Object.assign({}, state, {
+			grid,
+			moves: state.moves + 1,
+			pushes: state.pushes + 1,
+			wonNew: won(grid),
+			history: state.history.concat([{ grid: state.grid, moves: state.moves, pushes: state.pushes }]),
+		});
+	}
+	grid[nr][nc] = isTarget(target) ? "+" : "@";
+	return Object.assign({}, state, {
+		grid,
+		moves: state.moves + 1,
+		wonNew: won(grid),
+		history: state.history.concat([{ grid: state.grid, moves: state.moves, pushes: state.pushes }]),
+	});
+}
+function undo(state) {
+	if (!state.history.length) return state;
+	const prev = state.history[state.history.length - 1];
+	return Object.assign({}, state, {
+		grid: cloneGrid(prev.grid),
+		moves: prev.moves,
+		pushes: prev.pushes,
+		history: state.history.slice(0, -1),
+		wonNew: false,
+	});
+}
+
+const DIRS = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1], w: [-1, 0], s: [1, 0], a: [0, -1], d: [0, 1], W: [-1, 0], S: [1, 0], A: [0, -1], D: [0, 1] };
+
+export function SokobanGame(props) {
+	const [level, setLevel] = useState(0);
+	const [state, setState] = useState(() => makeInitial(0));
+	const stageRef = useRef(null);
+	const levelRef = useRef(level);
+	levelRef.current = level;
+
+	useEffect(() => {
+		if (props.paused) return;
+		if (stageRef.current) stageRef.current.focus();
+	}, [level, props.paused]);
+
+	const move = useCallback((dr, dc) => setState((s) => step(s, dr, dc)), []);
+	const nextLevel = useCallback(() => {
+		const n = (levelRef.current + 1) % LEVELS.length;
+		setLevel(n);
+		setState(makeInitial(n));
+	}, []);
+	const pickLevel = useCallback((i) => { setLevel(i); setState(makeInitial(i)); }, []);
+	const reset = useCallback(() => setState(makeInitial(levelRef.current)), []);
+
+	const onKeyDown = useCallback((event) => {
+		const d = DIRS[event.key];
+		if (d) { event.preventDefault(); move(d[0], d[1]); return; }
+		if (event.key.toLowerCase() === "u") { event.preventDefault(); setState((s) => undo(s)); }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); reset(); }
+		else if (event.key === "Enter" && state.wonNew) { event.preventDefault(); nextLevel(); }
+	}, [move, state.wonNew, reset, nextLevel]);
+
+	const grid = state.grid;
+	const rows = grid.length, cols = grid[0].length;
+	const width = Math.min(cols * 26, 340);
+
+	return <section className="dgame-game" aria-label="推箱子">
+		<div className="dgame-game-head"><div><h3>推箱子</h3><p>用方向键把箱子推到目标格子上；全部到位即过关（U 撤销、R 重置）。</p></div><div className="dgame-score"><span>步数 <strong>{state.moves}</strong></span><span>推箱 {state.pushes}</span></div></div>
+		<div className="dgame-sokoban-levels" role="tablist" aria-label="选择关卡">
+			{LEVELS.map((_, i) => <span key={i}><button type="button" role="tab" aria-selected={i === level} className={i === level ? "on" : ""} onClick={() => pickLevel(i)}>{i + 1}</button></span>)}
+			<button type="button" onClick={() => setState((s) => undo(s))}>撤销</button>
+			<button type="button" onClick={reset}>重置</button>
+		</div>
+		<div className="dgame-sokoban-stage" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} style={{ width, gridTemplateColumns: "repeat(" + cols + ",1fr)", gridTemplateRows: "repeat(" + rows + ",1fr)", aspectRatio: cols + " / " + rows }} aria-label="推箱子游戏区域，使用方向键移动，U 撤销，R 重置">
+			{grid.map((row, r) => row.map((ch, c) => {
+				let cls = "dgame-soko-cell";
+				if (ch === "#") cls += " wall";
+				else if (ch === "." || ch === "*" || ch === "+") cls += " target";
+				if (ch === "$" || ch === "*") cls += " box";
+				if (ch === "@" || ch === "+") cls += " player";
+				return <i key={r + "-" + c} className={cls} aria-hidden="true" />;
+			}))}
+			{state.wonNew ? <div className="dgame-over"><strong>全搞定！第 {level + 1} 关通过</strong><button type="button" onClick={nextLevel}>{level + 1 < LEVELS.length ? "下一关" : "重新开始"}</button></div> : null}
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="向上" onClick={() => move(-1, 0)}>↑</button><span>方向键 / WASD · U 撤销 · R 重置</span><button type="button" aria-label="向下" onClick={() => move(1, 0)}>↓</button></div>
+	</section>;
+}
+
+export function SokobanPreview() {
+	return <span className="dgcov-prev dgcov-prev-soko" aria-hidden="true">
+		{["#####", "#@$.#", "# . #", "#####"].map((row, r) => <b key={r}>{row}</b>)}
+	</span>;
+}
+
+export const sokobanGame = { Game: SokobanGame, Preview: SokobanPreview, css: `
+.dgame-sokoban-stage{position:relative;display:grid;align-self:center;gap:0;padding:6px;border:1px solid color-mix(in srgb,rgb(250 204 21) 32%,var(--dsw-alias-border-l1));border-radius:8px;background:linear-gradient(180deg,#181420,#14101f);outline:none;box-shadow:inset 0 0 26px rgb(0 0 0/.4)}.dgame-sokoban-stage:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(250 204 21) 30%,transparent)}.dgame-soko-cell{position:relative;display:block;min-width:0;min-height:0}.dgame-soko-cell.wall{background:linear-gradient(180deg,#3a3350,#241f3a);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4)}.dgame-soko-cell.target::before{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 70%);box-shadow:0 0 8px color-mix(in srgb,#f59e0b 55%,transparent);opacity:.9}.dgame-soko-cell.box::after{content:'';position:absolute;inset:12%;border-radius:5px;background:linear-gradient(135deg,#d4a24a,#8a5a1c);box-shadow:0 2px 5px rgb(0 0 0/.45),inset 0 1px 0 rgba(255,255,255,.4);border:1px solid color-mix(in srgb,#fde68a 45%,transparent)}.dgame-soko-cell.box.target::after{background:linear-gradient(135deg,#34d399,#0f766e);border-color:#a7f3d0}.dgame-soko-cell.player::before{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0f2fe,#38bdf8 70%);box-shadow:0 0 9px color-mix(in srgb,#38bdf8 70%,transparent)}.dgame-sokoban-levels{display:flex;gap:6px;align-items:center;align-self:center;flex-wrap:wrap;width:min(100%,340px);justify-content:center}.dgame-sokoban-levels button{min-width:30px;height:28px;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:inherit;font-size:11px;cursor:pointer;transition:all .15s ease}.dgame-sokoban-levels button.on{color:#fde68a;border-color:color-mix(in srgb,#f59e0b 60%,transparent);background:color-mix(in srgb,#f59e0b 18%,transparent)}.dgame-sokoban-levels button:hover{border-color:var(--dgame-accent);color:var(--dsw-alias-label-primary)}
+` };

package/features/games/games/tank.jsx

@@ -0,0 +1,116 @@
+/* 趣味游戏 · 坦克大战（经典机台）——纯 Client；击毁敌方坦克、守住基地过关。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GRID, EMPTY, STEEL, BRICK, BASE, initialState, step, nextWave, findBase } from "../tank-core.js";
+
+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;
+	}, []);
+	useEffect(() => { if (pausedRef.current) return; if (stageRef.current) stageRef.current.focus(); }, [props.paused]);
+
+	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} 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() {
+	return <span className="dgcov-prev dgcov-prev-tank" aria-hidden="true">
+		{["#...#", "#...#", "#...#", "+++++", "+..1+", "+++++"].map((row, r) => <b key={r}>{row}</b>)}
+	</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,235 @@
+/* 趣味游戏 · 俄罗斯方块（经典机台）——纯 Client，键盘/按钮可玩；不写会话、不改工作区。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+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) }));
+
+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;
+}
+function makePiece(type, x, y) {
+	const p = PIECES[type];
+	return { 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。
+function spawnFrom(state) {
+	const bag = state.bag && state.bag.length ? state.bag.slice() : seedBag();
+	const type = state.next != null ? state.next : bag.pop();
+	const next = bag.length ? bag.pop() : null;
+	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);
+	const cleared = clearLines(merged);
+	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);
+	const cleared = clearLines(merged);
+	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") {
+			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") {
+			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") return rotatePiece(s, action === "cw" ? 1 : -1);
+		return s;
+	}), []);
+
+	const onKeyDown = useCallback((event) => {
+		const action = KEY_ACTIONS[event.key];
+		if (action) { event.preventDefault(); 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]);
+
+	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]);
+
+	useEffect(() => {
+		if (pausedRef.current || state.over) return;
+		if (stageRef.current) stageRef.current.focus();
+	}, [state.over, props.paused, manualPause]);
+
+	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} 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> : <span className="dgame-tetris-bg" aria-hidden="true" />}
+				{!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() {
+	return <span className="dgcov-prev dgcov-prev-tetris" aria-hidden="true">
+		<i style={{ left: "34%", top: "10%", background: "#22d3ee" }} />
+		<i style={{ left: "24%", top: "40%", background: "#facc15" }} />
+		<i style={{ left: "46%", top: "48%", background: "#c084fc" }} />
+		<i style={{ left: "68%", top: "26%", background: "#4ade80" }} />
+		<i style={{ left: "54%", top: "68%", background: "#f87171" }} />
+		<i style={{ left: "26%", top: "74%", background: "#60a5fa" }} />
+		<i style={{ left: "72%", top: "60%", background: "#fb923c" }} />
+		<b />
+	</span>;
+}
+
+export const tetrisGame = { Game: TetrisGame, Preview: TetrisPreview, css: `
+.dgame-tetris{display:flex;gap:12px;align-items:flex-start;align-self:center;width:min(100%,360px);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:none;display:flex;flex-direction:column;gap:9px;min-width:112px;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)}.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-bg{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,color-mix(in srgb,#60a5fa 7%,transparent) 0 1px,transparent 1px calc(100% / 20)),repeating-linear-gradient(90deg,color-mix(in srgb,#60a5fa 7%,transparent) 0 1px,transparent 1px calc(100% / 10));opacity:.5}@media (max-width:680px){.dgame-tetris{width:100%;gap:8px}.dgame-tetris-board{width:min(100%,170px)}}
+` };