dsh-dock 0.7.1 → 0.9.0

package/features/games/games/sokoban.jsx

@@ -1,5 +1,6 @@
 /* 趣味游戏 · 推箱子（经典机台）——纯 Client；把箱子推到目标点上即可过关。 */
 import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
 
 // 关卡：'#' 墙 · ' ' 地板 · '.' 目标 · '$' 箱子 · '@' 人 · '*' 箱子在目标 · '+' 人在目标
 const LEVELS = [
@@ -9,6 +10,16 @@ const LEVELS = [
 	["######", "#@   #", "# $  #", "#  . #", "#    #", "######"],
 	["#######", "# @   #", "# $   #", "#  $ .#", "#   . #", "#######"],
 	["########", "#      #", "# $ $  #", "# . .  #", "#   @  #", "########"],
+	// —— 扩充关：由易到难（已用求解器验证全部可解）——
+	["########", "#  ##  #", "#@ $ . #", "#  ##  #", "########"],
+	["########", "#  @   #", "# $$$  #", "# ...  #", "#      #", "########"],
+	["########", "#@     #", "# $ $  #", "#  #   #", "# . #. #", "########"],
+	["########", "#    @ #", "# $$   #", "#  ..# #", "#      #", "########"],
+	["########", "#@     #", "# $ $  #", "#      #", "# .# . #", "########"],
+	["#########", "#       #", "# $ $ $ #", "#  ...  #", "#   @   #", "#       #", "#########"],
+	["#########", "#   @   #", "# $#$$  #", "#  ...  #", "#  ##   #", "#########"],
+	["#########", "#@  #   #", "# $   $ #", "# ###   #", "#  . .  #", "#########"],
+	["#########", "#     ###", "# $$ #  #", "# .. #@ #", "# $$ #  #", "# ..    #", "#########"],
 ];
 
 function cloneGrid(grid) {
@@ -55,6 +66,7 @@ function step(state, dr, 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;
+		playSfx("push");
 		grid[br][bc] = isTarget(beyond) ? "*" : "$";
 		grid[nr][nc] = isTarget(target) ? "+" : "@";
 		return Object.assign({}, state, {
@@ -66,6 +78,7 @@ function step(state, dr, dc) {
 		});
 	}
 	grid[nr][nc] = isTarget(target) ? "+" : "@";
+	playSfx("step");
 	return Object.assign({}, state, {
 		grid,
 		moves: state.moves + 1,
@@ -94,12 +107,12 @@ export function SokobanGame(props) {
 	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 prevWon = useRef(false);
+	useEffect(() => {
+		if (state.wonNew && !prevWon.current) playSfx("win");
+		prevWon.current = state.wonNew;
+	}, [state.wonNew]);
 	const nextLevel = useCallback(() => {
 		const n = (levelRef.current + 1) % LEVELS.length;
 		setLevel(n);
@@ -116,9 +129,12 @@ export function SokobanGame(props) {
 		else if (event.key === "Enter" && state.wonNew) { event.preventDefault(); nextLevel(); }
 	}, [move, state.wonNew, reset, nextLevel]);
 
+	useGameControls(stageRef, props.paused, onKeyDown);
+
 	const grid = state.grid;
 	const rows = grid.length, cols = grid[0].length;
-	const width = Math.min(cols * 26, 340);
+	// 宽度同时钳制：单元格理想宽、容器可用宽、按关卡长宽比折算的视口可用高——保证等比完整显示不裁切。
+	const width = "min(" + (cols * 26) + "px, 100%, calc((100vh - 250px) * " + cols + " / " + rows + "))";
 
 	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>
@@ -127,7 +143,7 @@ export function SokobanGame(props) {
 			<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 重置">
+		<div className="dgame-sokoban-stage" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} onClick={() => focusStage(stageRef)} 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";
@@ -143,8 +159,19 @@ export function SokobanGame(props) {
 }
 
 export function SokobanPreview() {
+	// 迷你关卡画面：墙/地/箱/目标/小人色块，与真实游戏元素一致。
+	const ROWS = [
+		"#######",
+		"#     #",
+		"# .$@ #",
+		"# .*  #",
+		"#######",
+	];
+	const cls = { "#": "wall", " ": "floor", ".": "target", "$": "box", "*": "boxT", "@": "player", "+": "player" };
 	return <span className="dgcov-prev dgcov-prev-soko" aria-hidden="true">
-		{["#####", "#@$.#", "# . #", "#####"].map((row, r) => <b key={r}>{row}</b>)}
+		<span className="dgp-soko-grid">
+			{ROWS.flatMap((row, r) => row.split("").map((ch, c) => <i key={r + "-" + c} className={"dgp-soko-" + cls[ch]} />))}
+		</span>
 	</span>;
 }
 

package/features/games/games/tank.jsx

@@ -1,6 +1,7 @@
 /* 趣味游戏 · 坦克大战（经典机台）——纯 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"];
@@ -52,7 +53,7 @@ export function TankGame(props) {
 		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]);
+	useGameControls(stageRef, pausedRef.current, onKeyDown, onKeyUp);
 
 	const grid = snap.grid;
 	const player = snap.player;
@@ -92,7 +93,7 @@ export function TankGame(props) {
 
 	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-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}
@@ -106,8 +107,19 @@ export function TankGame(props) {
 }
 
 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">
-		{["#...#", "#...#", "#...#", "+++++", "+..1+", "+++++"].map((row, r) => <b key={r}>{row}</b>)}
+		<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>;
 }
 

package/features/games/games/tetris.jsx

@@ -1,5 +1,6 @@
 /* 趣味游戏 · 俄罗斯方块（经典机台）——纯 Client，键盘/按钮可玩；不写会话、不改工作区。 */
 import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
 
 const COLS = 10, ROWS = 20;
 const SHAPES = [
@@ -26,6 +27,15 @@ function rotations(shape) {
 }
 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));
 }
@@ -62,9 +72,10 @@ function seedBag() {
 	}
 	return bag;
 }
+let PIECE_SEQ = 0;
 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 };
+	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();
@@ -72,11 +83,16 @@ function initial() {
 	const next = bag.pop();
 	return { board: emptyBoard(), piece, next, bag, score: 0, lines: 0, level: 1, over: false };
 }
-// 用"下一个"方块生成当前块并补足 7-bag。
+// 用"下一个"方块生成当前块并补足 7-bag。bag 耗尽时立即重洗新 bag，
+// 保证预览 next 永远不为空（否则会与实际生成的方块不一致）。
 function spawnFrom(state) {
-	const bag = state.bag && state.bag.length ? state.bag.slice() : seedBag();
+	let 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;
+	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 });
@@ -89,7 +105,9 @@ function advance(state) {
 		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;
@@ -105,7 +123,9 @@ function hardDrop(state) {
 	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;
@@ -119,6 +139,7 @@ function hardDrop(state) {
 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",
@@ -136,27 +157,66 @@ export function TetrisGame(props) {
 	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") return rotatePiece(s, action === "cw" ? 1 : -1);
+		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(); act(action); return; }
+		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]);
+	}, [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;
@@ -165,10 +225,7 @@ export function TetrisGame(props) {
 		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]);
+	useGameControls(stageRef, pausedRef.current, onKeyDown, onKeyUp);
 
 	const display = state.board.map((row) => row.slice());
 	if (!state.over) {
@@ -188,14 +245,14 @@ export function TetrisGame(props) {
 	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="俄罗斯方块游戏区域，使用方向键与空格控制">
+			<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> : <span className="dgame-tetris-bg" aria-hidden="true" />}
+				{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 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>
@@ -218,18 +275,28 @@ function rotatePiece(state, dir) {
 }
 
 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">
-		<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 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;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)}}
+.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

@@ -2,8 +2,40 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
 	initialBoard, cloneBoard, pieceChar, inCheck, hasLegalMoves,
-	legalMoves, bestMove, applyMove,
+	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);
@@ -15,6 +47,9 @@ export function XiangqiGame(props) {
 	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;
@@ -27,6 +62,7 @@ export function XiangqiGame(props) {
 		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(() => {
@@ -38,20 +74,24 @@ export function XiangqiGame(props) {
 		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]);
+	}, [sel, pushKey]);
 
 	const select = useCallback((r, c) => {
 		if (overRef.current || turnRef.current !== "r" || thinkingRef.current) return;
@@ -66,16 +106,21 @@ export function XiangqiGame(props) {
 		setSel(null); setTargets([]);
 	}, [sel, targets, moveRed]);
 
-	// AI 回合（执黑）。
+	// AI 回合（执黑）：搜索时排除已出现过的局面，禁止长将循环。
 	useEffect(() => {
 		if (turn !== "b" || over || props.paused) return;
 		const t = setTimeout(() => {
-			const mv = bestMove(boardRef.current, "b", 3);
+			// 局面出现次数表：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"));
@@ -84,23 +129,31 @@ export function XiangqiGame(props) {
 		}, 90);
 		setThinking(true);
 		return () => clearTimeout(t);
-	}, [turn, over, props.paused]);
-
-	useEffect(() => {
-		if (props.paused) return;
-		if (stageRef.current) stageRef.current.focus();
-	}, [turn, over, props.paused]);
+	}, [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} role="grid" aria-label="中国象棋棋盘">
+		<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);
@@ -108,7 +161,7 @@ export function XiangqiGame(props) {
 				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={() => select(r, c)}>
+					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>;
 			}))}
@@ -118,11 +171,35 @@ export function XiangqiGame(props) {
 }
 
 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">
-		{["車馬象士將象馬車", "·炮·····炮·", "卒.卒.卒.卒.卒", "兵.兵.兵.兵.兵", "·炮·····炮·", "車馬相仕帥相馬車"].map((row, r) => <b key={r}>{row}</b>)}
+		<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{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(10,1fr);align-self:center;width:min(100%,320px);aspect-ratio:9/10;padding:6px;border-radius:8px;background:linear-gradient(135deg,#e8c07a,#c08a3e);border:1px solid color-mix(in srgb,#8a5a1c 55%,transparent);box-shadow:0 4px 18px rgb(0 0 0/.35),inset 0 0 0 2px rgba(0,0,0,.14);outline:none;background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/8),rgba(0,0,0,.14) calc(100%/8) calc(100%/8 + 2px)),repeating-linear-gradient(0deg,transparent 0 calc(100%/9),rgba(85,52,0,.28) calc(100%/9) calc(100%/9 + 2px))}.dgame-xiangqi-board:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.25)}.dgame-xiangqi-cell{position:relative;background:transparent;border:none;cursor:pointer;padding:0;margin:0;outline:none;display:grid;place-items:center}.dgame-xiangqi-cell.sel{box-shadow:inset 0 0 0 3px rgba(255,200,80,.55)}.dgame-xiangqi-cell.target .dgame-xiangqi-dot{width:10px;height:10px;border-radius:50%;background:rgba(34,211,238,.55);box-shadow:0 0 8px rgba(34,211,238,.6)}.dgame-xiangqi-cell.last{box-shadow:inset 0 0 0 3px rgba(248,113,113,.5)}.dgame-xiangqi-pc{font-size:clamp(11px,2.2vw,15px);font-weight:700;display:block;z-index:1}.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)}
+.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)}
 ` };