dsh-dock 0.7.0 → 0.8.0

package/features/balance/view.js

@@ -19,6 +19,8 @@ const C_GRANTED = '#22d3ee';
 const C_TOPUP = '#fbbf24';
 const C_OK = '#34d399';
 const C_ERR = '#f87171';
+// 余额接口有些 Provider 仅返回美元。功能坞统一以人民币展示，汇率与用量模块默认值保持一致。
+const USD_CNY_RATE = 7.2;
 
 function accentOf(id) {
 	if (CURATED_ACCENTS[id]) return CURATED_ACCENTS[id];
@@ -28,6 +30,22 @@ function accentOf(id) {
 	return ACCENT_PALETTE[h % ACCENT_PALETTE.length];
 }
 const fmt = (v) => (v == null || v === '' ? '—' : String(v));
+function cnyBalanceInfo(info) {
+	if (!info) return info;
+	if (info.currency === 'CNY') return Object.assign({}, info, { currency: '人民币' });
+	if (info.currency !== 'USD') return info;
+	const convert = (value) => {
+		if (value == null) return value;
+		const n = Number(value);
+		return Number.isFinite(n) ? n * USD_CNY_RATE : value;
+	};
+	return Object.assign({}, info, {
+		currency: '人民币（估算）',
+		totalBalance: convert(info.totalBalance),
+		grantedBalance: convert(info.grantedBalance),
+		toppedUpBalance: convert(info.toppedUpBalance),
+	});
+}
 
 // ---- 共享快照：弹层/设置页/首页总揽共用一份数据与刷新 ----
 const balanceStore = {
@@ -123,12 +141,15 @@ function BalanceView(props) {
 				} else if (b && b.status === "ok") {
 					const infos = Array.isArray(b.infos) ? b.infos : [];
 					balBody = react.createElement("div", { className: "dkb-mains" },
-						infos.map((i, idx) => react.createElement("div", { key: idx, className: "dkb-main" },
+						infos.map((rawInfo, idx) => {
+							const i = cnyBalanceInfo(rawInfo);
+							return react.createElement("div", { key: idx, className: "dkb-main" },
 							react.createElement("span", { className: "dkb-main-label", style: { color: accent } }, i.currency),
 							react.createElement("span", { className: "dkb-main-value" }, fmt(i.totalBalance)),
 							react.createElement("span", { className: "dkb-main-parts" },
 								i.grantedBalance != null ? react.createElement("span", { className: "dkb-main-part", style: { color: C_GRANTED } }, "赠送 " + fmt(i.grantedBalance)) : null,
-								i.toppedUpBalance != null ? react.createElement("span", { className: "dkb-main-part", style: { color: C_TOPUP } }, "充值 " + fmt(i.toppedUpBalance)) : null))));
+								i.toppedUpBalance != null ? react.createElement("span", { className: "dkb-main-part", style: { color: C_TOPUP } }, "充值 " + fmt(i.toppedUpBalance)) : null));
+						}));
 				} else if (b && b.status === "login-required" && b.consoleUrl) {
 					balBody = react.createElement("div", { className: "dkb-main" },
 						react.createElement("a", { href: b.consoleUrl, target: "_blank", rel: "noreferrer", className: "dkb-link", style: { color: accent } }, "去控制台查看余额 →"));
@@ -238,9 +259,9 @@ function chipBalanceText(p) {
 			: fmt(b.remaining);
 		return "余额 剩 " + s + (b.unit ? " " + b.unit : "");
 	}
-	const info = Array.isArray(b.infos) && b.infos[0] ? b.infos[0] : null;
+	const info = cnyBalanceInfo(Array.isArray(b.infos) && b.infos[0] ? b.infos[0] : null);
 	if (!info) return "余额 …";
-	const cur = info.currency === "USD" ? "$" : "¥";
+	const cur = info.currency === "CNY" || info.currency === "人民币（估算）" ? "¥" : "";
 	const v = Number(info.totalBalance);
 	const s = Number.isFinite(v) ? (v >= 10000 ? (v / 10000).toFixed(2) + "万" : String(Math.round(v * 100) / 100)) : fmt(info.totalBalance);
 	return "余额 " + cur + s;

package/features/games/games/breakout.jsx

@@ -0,0 +1,227 @@
+/* 趣味游戏 · 打砖块（经典机台）——纯 Client；canvas 渲染，方向键/鼠标/触摸控制挡板。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
+
+const W = 320, H = 360;
+const BRICK_COLS = 8, BRICK_ROWS = 5, BRICK_GAP = 4, BRICK_TOP = 22, BRICK_H = 18;
+const PADDLE_W = 60, PADDLE_H = 11, PADDLE_BOTTOM = 20;
+const BALL_R = 5.5;
+const SPEED = 3.4;
+const COLORS = ["#f87171", "#fb923c", "#facc15", "#4ade80", "#38bdf8"];
+
+function makeBricks(level) {
+	const bricks = [];
+	const bw = (W - BRICK_GAP * (BRICK_COLS + 1)) / BRICK_COLS;
+	for (let r = 0; r < BRICK_ROWS; r += 1) {
+		for (let c = 0; c < BRICK_COLS; c += 1) {
+			bricks.push({
+				x: BRICK_GAP + c * (bw + BRICK_GAP),
+				y: BRICK_TOP + r * (BRICK_H + BRICK_GAP),
+				w: bw, h: BRICK_H,
+				color: COLORS[(r + level) % COLORS.length],
+				alive: true,
+			});
+		}
+	}
+	return bricks;
+}
+function draw(ctx, g) {
+	ctx.clearRect(0, 0, W, H);
+	// 星空背景
+	ctx.fillStyle = "#0b1024";
+	ctx.fillRect(0, 0, W, H);
+	ctx.fillStyle = "#1b2bb0";
+	for (const s of g.stars) { ctx.globalAlpha = s.a; ctx.fillRect(s.x, s.y, 1.5, 1.5); }
+	ctx.globalAlpha = 1;
+	// 砖块
+	for (const b of g.bricks) {
+		if (!b.alive) continue;
+		ctx.fillStyle = b.color;
+		ctx.beginPath();
+		roundRect(ctx, b.x, b.y, b.w, b.h, 4);
+		ctx.fill();
+		ctx.fillStyle = "rgba(255,255,255,.25)";
+		roundRect(ctx, b.x, b.y, b.w, b.h / 2.4, 4);
+		ctx.fill();
+	}
+	// 挡板
+	ctx.fillStyle = "#a5f3fc";
+	roundRect(ctx, g.paddle.x, g.paddle.y, PADDLE_W, PADDLE_H, 5);
+	ctx.fill();
+	// 球
+	ctx.fillStyle = "#fef3c7";
+	ctx.beginPath(); ctx.arc(g.ball.x, g.ball.y, BALL_R, 0, Math.PI * 2); ctx.fill();
+	ctx.fillStyle = "rgba(254,243,199,.5)";
+	ctx.beginPath(); ctx.arc(g.ball.x, g.ball.y, BALL_R + 2.5, 0, Math.PI * 2); ctx.fill();
+}
+function roundRect(ctx, x, y, w, h, r) {
+	ctx.beginPath();
+	ctx.moveTo(x + r, y);
+	ctx.arcTo(x + w, y, x + w, y + h, r);
+	ctx.arcTo(x + w, y + h, x, y + h, r);
+	ctx.arcTo(x, y + h, x, y, r);
+	ctx.arcTo(x, y, x + w, y, r);
+	ctx.closePath();
+}
+function collideRect(x, y, r, bx, by, bw, bh) {
+	const cx = Math.max(bx, Math.min(x, bx + bw));
+	const cy = Math.max(by, Math.min(y, by + bh));
+	const dx = x - cx, dy = y - cy;
+	return dx * dx + dy * dy < r * r;
+}
+
+export function BreakoutGame(props) {
+	const canvasRef = useRef(null);
+	const [score, setScore] = useState(0);
+	const [lives, setLives] = useState(3);
+	const [level, setLevel] = useState(1);
+	const [status, setStatus] = useState("play"); // play | win | over
+	const keys = useRef({});
+	const pausedRef = useRef(!!(props && props.paused)); pausedRef.current = !!(props && props.paused);
+	const game = useRef(null);
+	const scoreRef = useRef(0); scoreRef.current = score;
+	const statusRef = useRef("play"); statusRef.current = status;
+	const livesRef = useRef(3); livesRef.current = lives;
+
+	const start = useCallback((lvl) => {
+		const bricks = makeBricks(lvl);
+		game.current = {
+			stars: Array.from({ length: 46 }, () => ({ x: Math.random() * W, y: Math.random() * H, a: .25 + Math.random() * .5 })),
+			bricks,
+			paddle: { x: (W - PADDLE_W) / 2, y: H - PADDLE_BOTTOM - PADDLE_H },
+			ball: { x: W / 2, y: H - PADDLE_BOTTOM - PADDLE_H - BALL_R - 1, vx: (Math.random() > .5 ? 1 : -1) * SPEED, vy: -SPEED },
+			speed: SPEED * (1 + (lvl - 1) * .09),
+		};
+	}, []);
+
+	useEffect(() => {
+		start(1); setScore(0); setLives(3); setStatus("play");
+	}, [start]);
+
+	const launchBall = useCallback(() => {
+		const g = game.current;
+		if (!g) return;
+		g.ball.vx = (Math.random() > .5 ? 1 : -1) * SPEED;
+		g.ball.vy = -SPEED;
+		g.launched = true;
+	}, []);
+	const resetBall = useCallback(() => {
+		const g = game.current;
+		if (g) { g.ball.x = W / 2; g.ball.y = H - PADDLE_BOTTOM - PADDLE_H - BALL_R - 1; g.ball.vx = 0; g.ball.vy = 0; g.launched = false; }
+	}, []);
+
+	// rAF 主循环。注意：本地函数不能叫 draw，否则会遮蔽模块级渲染函数导致递归自调用。
+	useEffect(() => {
+		const frame = () => {
+			const g = game.current;
+			const ctx = canvasRef.current && canvasRef.current.getContext("2d");
+			if (!g || !ctx) return;
+			if (pausedRef.current || statusRef.current !== "play") { draw(ctx, g); return; }
+			// 挡板移动
+			if (keys.current.left) g.paddle.x -= 5.5;
+			if (keys.current.right) g.paddle.x += 5.5;
+			g.paddle.x = Math.max(0, Math.min(W - PADDLE_W, g.paddle.x));
+			// 球
+			const b = g.ball;
+			if (!b.launched) {
+				b.x = g.paddle.x + PADDLE_W / 2;
+				b.y = g.paddle.y - BALL_R - 1;
+			} else {
+				b.x += b.vx; b.y += b.vy;
+				// 墙
+				if (b.x - BALL_R < 0) { b.x = BALL_R; b.vx = Math.abs(b.vx); }
+				if (b.x + BALL_R > W) { b.x = W - BALL_R; b.vx = -Math.abs(b.vx); }
+				if (b.y - BALL_R < 0) { b.y = BALL_R; b.vy = Math.abs(b.vy); }
+				// 挡板
+				if (b.vy > 0 && b.y + BALL_R >= g.paddle.y && b.y - BALL_R <= g.paddle.y + PADDLE_H && b.x >= g.paddle.x - BALL_R && b.x <= g.paddle.x + PADDLE_W + BALL_R) {
+					playSfx("bounce");
+					const rel = (b.x - (g.paddle.x + PADDLE_W / 2)) / (PADDLE_W / 2);
+					const ang = rel * .6;
+					const sp = Math.hypot(b.vx, b.vy);
+					b.vx = sp * Math.sin(ang);
+					b.vy = -Math.abs(sp * Math.cos(ang));
+					b.y = g.paddle.y - BALL_R - 1;
+				}
+				// 砖块
+				const maxSpeed = g.speed * 1.6;
+				for (const br of g.bricks) {
+					if (!br.alive) continue;
+					if (collideRect(b.x, b.y, BALL_R, br.x, br.y, br.w, br.h)) {
+						br.alive = false;
+						playSfx("brick");
+						const cx = br.x + br.w / 2, cy = br.y + br.h / 2;
+						const dx = b.x - cx, dy = b.y - cy;
+						if (Math.abs(dx / br.w) > Math.abs(dy / br.h)) { b.vx = -b.vx; b.x += b.vx * 2; }
+						else { b.vy = -b.vy; b.y += b.vy * 2; }
+						setScore((s) => s + 10);
+						scoreRef.current += 10;
+						const remain = g.bricks.some((x) => x.alive);
+						if (!remain) {
+							playSfx("win");
+							setStatus("win"); setLevel((l) => l + 1);
+							if (statusRef.current !== "over") statusRef.current = "win";
+						}
+						break;
+					}
+				}
+				// 掉出
+				if (b.y - BALL_R > H) {
+					const nl = livesRef.current - 1;
+					livesRef.current = nl; setLives(nl);
+					playSfx(nl <= 0 ? "over" : "step");
+					if (nl <= 0) { setStatus("over"); statusRef.current = "over"; }
+					else resetBall();
+				}
+			}
+			draw(ctx, g);
+		};
+		let raf = requestAnimationFrame(function loop() { frame(); raf = requestAnimationFrame(loop); });
+		return () => cancelAnimationFrame(raf);
+	}, [resetBall]);
+
+	const onKeyDown = useCallback((event) => {
+		if (pausedRef.current) return;
+		if (event.key === "ArrowLeft") { event.preventDefault(); keys.current.left = true; }
+		else if (event.key === "ArrowRight") { event.preventDefault(); keys.current.right = true; }
+		else if (event.key === " ") { event.preventDefault(); launchBall(); }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); start(1); setScore(0); setLives(3); setStatus("play"); statusRef.current = "play"; livesRef.current = 3; }
+	}, [launchBall, start]);
+	const onKeyUp = useCallback((event) => {
+		if (event.key === "ArrowLeft") keys.current.left = false;
+		else if (event.key === "ArrowRight") keys.current.right = false;
+	}, []);
+
+	const onPointerMove = useCallback((e) => {
+		const g = game.current, cv = canvasRef.current;
+		if (!g || !cv) return;
+		const rect = cv.getBoundingClientRect();
+		const scale = rect.width / W;
+		g.paddle.x = Math.max(0, Math.min(W - PADDLE_W, (e.clientX - rect.left) / scale - PADDLE_W / 2));
+	}, []);
+	useGameControls(canvasRef, pausedRef.current, onKeyDown, onKeyUp);
+
+	return <section className="dgame-game" aria-label="打砖块">
+		<div className="dgame-game-head"><div><h3>打砖块</h3><p>移动挡板反弹小球，击碎所有砖块；球落到底部扣一条命。</p></div><div className="dgame-score"><span>得分 <strong>{score}</strong></span><span>命 {lives} · 第 {level} 关</span></div></div>
+		<div className="dgame-breakout">
+			<canvas ref={canvasRef} width={W} height={H} tabIndex={0} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onPointerMove={onPointerMove} onClick={() => focusStage(canvasRef)} className="dgame-breakout-canvas" aria-label="打砖块游戏区域，左右方向键或鼠标移动挡板，空格发球" />
+			{status === "win" ? <div className="dgame-over"><strong>全消！进入第 {level} 关</strong><button type="button" onClick={() => { start(level); setStatus("play"); statusRef.current = "play"; }}>下一关</button></div> : null}
+			{status === "over" ? <div className="dgame-over"><strong>球掉光了 · 得 {score} 分</strong><button type="button" onClick={() => { start(1); setScore(0); setLives(3); setStatus("play"); statusRef.current = "play"; livesRef.current = 3; }}>重新开始</button></div> : null}
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="向左移动" onClick={() => { keys.current.left = false; game.current && (game.current.paddle.x = Math.max(0, game.current.paddle.x - 12)); }}>← 左移</button><span>←/→ 或鼠标移动 · 空格发球</span><button type="button" aria-label="向右移动" onClick={() => { keys.current.right = false; game.current && (game.current.paddle.x = Math.min(W - PADDLE_W, game.current.paddle.x + 12)); }}>右移 {'->'}</button></div>
+	</section>;
+}
+
+export function BreakoutPreview() {
+	const cols = ["#f87171", "#fb923c", "#facc15", "#4ade80", "#38bdf8", "#c084fc"];
+	return <span className="dgcov-prev dgcov-prev-breakout" aria-hidden="true">
+		{Array.from({ length: 12 }, (_, i) => {
+			const row = Math.floor(i / 6), c = i % 6;
+			return <i key={i} style={{ left: (5 + c * 15) + "%", top: (10 + row * 12) + "%", background: cols[i % cols.length] }} />;
+		})}
+		<b />
+	</span>;
+}
+
+export const breakoutGame = { Game: BreakoutGame, Preview: BreakoutPreview, css: `
+.dgame-breakout{position:relative;align-self:center;width:min(100%,320px);margin:0 auto}.dgame-breakout-canvas{display:block;width:100%;aspect-ratio:320/360;border:1px solid color-mix(in srgb,rgb(56 189 248) 32%,var(--dsw-alias-border-l1));border-radius:10px;outline:none;background:#0b1024;box-shadow:0 4px 18px rgb(0 0 0/.4)}.dgame-breakout-canvas:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(56 189 248) 35%,transparent)}.dgame-breakout .dgame-over{position:absolute;inset:0;border-radius:10px}
+` };

package/features/games/games/gomoku.jsx

@@ -0,0 +1,244 @@
+/* 趣味游戏 · 五子棋（棋盘对战）——纯 Client；玩家执黑先手，AI 执白。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
+
+// 正规棋盘：SVG 精确绘制（viewBox 1500×1500，交点对齐各格中心）。外框加粗，五个星位点。
+const GOMOKU_LINES = (() => {
+	const P = (n) => n * 100 + 50;
+	const parts = [<rect key="frame" x={P(0)} y={P(0)} width={1400} height={1400} strokeWidth={6.5} fill="none" />];
+	let k = 0;
+	for (let i = 1; i <= 13; i += 1) {
+		parts.push(<line key={k++} x1={P(i)} y1={P(0)} x2={P(i)} y2={P(14)} />);
+		parts.push(<line key={k++} x1={P(0)} y1={P(i)} x2={P(14)} y2={P(i)} />);
+	}
+	for (const [r, c] of [[3, 3], [3, 11], [7, 7], [11, 3], [11, 11]]) {
+		parts.push(<circle key={k++} className="dgame-gomoku-star" cx={P(c)} cy={P(r)} r={15} />);
+	}
+	return parts;
+})();
+
+const SIZE = 15;
+const DIRS = [[0, 1], [1, 0], [1, 1], [1, -1]];
+
+function emptyBoard() {
+	return Array.from({ length: SIZE }, () => Array(SIZE).fill(null));
+}
+function inBoard(r, c) {
+	return r >= 0 && r < SIZE && c >= 0 && c < SIZE;
+}
+// 在 (r,c) 落 color 后，沿四个方向统计连子数、开放端，计分。
+function lineScore(board, r, c, color) {
+	let total = 0;
+	for (const [dr, dc] of DIRS) {
+		let count = 1;
+		let rr = r + dr, cc = c + dc;
+		let openEnds = 0;
+		while (inBoard(rr, cc) && board[rr][cc] === color) { count += 1; rr += dr; cc += dc; }
+		if (inBoard(rr, cc) && board[rr][cc] === null) openEnds += 1;
+		rr = r - dr; cc = c - dc;
+		while (inBoard(rr, cc) && board[rr][cc] === color) { count += 1; rr -= dr; cc -= dc; }
+		if (inBoard(rr, cc) && board[rr][cc] === null) openEnds += 1;
+		total += patternScore(count, openEnds);
+	}
+	return total;
+}
+function patternScore(count, openEnds) {
+	if (count >= 5) return 10000000;
+	if (openEnds === 0) return 0;
+	if (count === 4) return openEnds === 2 ? 1000000 : 100000;
+	if (count === 3) return openEnds === 2 ? 10000 : 1000;
+	if (count === 2) return openEnds === 2 ? 200 : 20;
+	if (count === 1) return openEnds === 2 ? 10 : 1;
+	return 0;
+}
+// 返回连成五子（含以上）的坐标数组；未连成返回 null。
+function winLine(board, r, c, color) {
+	for (const [dr, dc] of DIRS) {
+		const cells = [[r, c]];
+		let rr = r + dr, cc = c + dc;
+		while (inBoard(rr, cc) && board[rr][cc] === color) { cells.push([rr, cc]); rr += dr; cc += dc; }
+		rr = r - dr; cc = c - dc;
+		while (inBoard(rr, cc) && board[rr][cc] === color) { cells.push([rr, cc]); rr -= dr; cc -= dc; }
+		if (cells.length >= 5) return cells;
+	}
+	return null;
+}
+function boardFull(board) {
+	for (const row of board) for (const cell of row) if (!cell) return false;
+	return true;
+}
+// 取有落子的附近空位（距离 ≤2），否则空盘取中心。
+function candidates(board) {
+	const set = [];
+	const seen = new Set();
+	let hasStone = false;
+	for (let r = 0; r < SIZE; r += 1) {
+		for (let c = 0; c < SIZE; c += 1) {
+			if (!board[r][c]) continue;
+			hasStone = true;
+			for (let dr = -2; dr <= 2; dr += 1) {
+				for (let dc = -2; dc <= 2; dc += 1) {
+					const rr = r + dr, cc = c + dc;
+					if (inBoard(rr, cc) && !board[rr][cc] && !seen.has(rr * SIZE + cc)) {
+						seen.add(rr * SIZE + cc);
+						set.push([rr, cc]);
+					}
+				}
+			}
+		}
+	}
+	if (!hasStone) return [[7, 7], [7, 8], [8, 7]];
+	return set;
+}
+// AI 选点：进攻价值 + 防守价值（防对方五连/活四）。
+function aiMove(board) {
+	const cands = candidates(board);
+	let best = null, bestScore = -1;
+	for (const [r, c] of cands) {
+		const attack = lineScore(board, r, c, "w");
+		const defend = lineScore(board, r, c, "b");
+		const score = attack + defend * 0.92;
+		if (score > bestScore) { bestScore = score; best = [r, c]; }
+	}
+	return best || [7, 7];
+}
+
+export function GomokuGame(props) {
+	const [board, setBoard] = useState(emptyBoard);
+	const [turn, setTurn] = useState("b");
+	const [winner, setWinner] = useState(null);
+	const [winCells, setWinCells] = useState(null);
+	const [showResult, setShowResult] = useState(false);
+	const [last, setLast] = useState(null);
+	const [history, setHistory] = useState([]);
+	const [thinking, setThinking] = useState(false);
+	const boardRef = useRef(board);
+	const stageRef = useRef(null);
+	boardRef.current = board;
+	const turnRef = useRef(turn);
+	turnRef.current = turn;
+	const winRef = useRef(winner);
+	winRef.current = winner;
+
+	const finish = useCallback((b, r, c, color) => {
+		const line = winLine(b, r, c, color);
+		if (line) { setWinner(color); setWinCells(line); setShowResult(true); playSfx(color === "b" ? "win" : "over"); }
+		else if (boardFull(b)) { setWinner("draw"); setWinCells(null); setShowResult(true); playSfx("clear"); }
+		else playSfx("stone");
+	}, []);
+
+	const place = useCallback((r, c, color) => {
+		if (boardRef.current[r][c]) return false;
+		const next = boardRef.current.map((row) => row.slice());
+		next[r][c] = color;
+		setBoard(next);
+		boardRef.current = next;
+		setLast({ r, c });
+		setHistory((h) => h.concat([{ r, c, color }]));
+		finish(next, r, c, color);
+		return true;
+	}, [finish]);
+
+	// AI 回合：思考片刻后落子（执白）。
+	useEffect(() => {
+		if (turn !== "w" || winner || props.paused) return;
+		setThinking(true);
+		const t = setTimeout(() => {
+			const [r, c] = aiMove(boardRef.current);
+			place(r, c, "w");
+			setTurn("b");
+			setThinking(false);
+		}, 260);
+		return () => clearTimeout(t);
+	}, [turn, winner, props.paused, place]);
+
+	const onCell = useCallback((r, c) => {
+		if (winRef.current || turnRef.current !== "b" || thinking || boardRef.current[r][c]) return;
+		place(r, c, "b");
+		setTurn("w");
+	}, [thinking, place]);
+
+	const reset = useCallback(() => {
+		setBoard(emptyBoard()); setTurn("b"); setWinner(null); setWinCells(null); setShowResult(false); setLast(null); setHistory([]); setThinking(false);
+	}, []);
+	const undo = useCallback(() => {
+		if (thinking || history.length < 2) return;
+		// 回退两步：撤掉 AI 与玩家（对局结束后也允许撤回继续）。
+		const h = history.slice(0, -2);
+		const next = emptyBoard();
+		for (const m of h) next[m.r][m.c] = m.color;
+		setBoard(next); boardRef.current = next;
+		setHistory(h); setTurn("b"); setWinner(null); setWinCells(null); setShowResult(false);
+		setLast(h.length ? h[h.length - 1] : null);
+	}, [history, thinking]);
+
+	const onKeyDown = useCallback((event) => {
+		if (event.key.toLowerCase() === "r") { event.preventDefault(); reset(); }
+		else if (event.key.toLowerCase() === "u") { event.preventDefault(); undo(); }
+	}, [reset, undo]);
+	useGameControls(stageRef, props.paused, onKeyDown);
+
+	const statusText = winner === "b" ? "你赢了 · 五子连珠" : winner === "w" ? "AI 赢了 · 再试一次" : winner === "draw" ? "和棋 · 棋盘已满" : (turn === "b" ? "轮到你落子（黑）" : "AI 思考中…（白）");
+
+	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">{statusText}</strong><button type="button" onClick={undo}>撤销</button><button type="button" onClick={reset}>重开</button></div></div>
+		<div className="dgame-gomoku-board" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} onClick={() => focusStage(stageRef)} role="grid" aria-label="十五路五子棋棋盘">
+			<svg className="dgame-gomoku-lines" viewBox="0 0 1500 1500" preserveAspectRatio="none" aria-hidden="true">{GOMOKU_LINES}</svg>
+			{board.map((row, r) => row.map((cell, c) => {
+				const isWin = winCells && winCells.some(([wr, wc]) => wr === r && wc === c);
+				return <button type="button" key={r + "-" + c} role="gridcell" className={"dgame-gomoku-cell" + (cell ? " filled " + cell : "") + (last && last.r === r && last.c === c ? " last" : "") + (isWin ? " wincell" : "")}
+					aria-label={"第" + (r + 1) + "行第" + (c + 1) + "列" + (cell === "b" ? " 黑子" : cell === "w" ? " 白子" : " 空格")}
+					onClick={() => { focusStage(stageRef); onCell(r, c); }}>{cell ? <i className={"dgame-gomoku-stone " + (cell === "b" ? "black" : "white")} /> : null}</button>;
+			}))}
+			{winner && showResult ? (
+				<div className="dgame-gomoku-result" role="status">
+					<div className={"dgame-gomoku-result-card " + winner}>
+						<span className="dgame-gomoku-result-icon" aria-hidden="true">{winner === "b" ? "🎉" : winner === "w" ? "🤖" : "🤝"}</span>
+						<strong>{winner === "b" ? "你赢了！" : winner === "w" ? "AI 赢了" : "和棋"}</strong>
+						<p>{winner === "b" ? "五子连珠，漂亮！" : winner === "w" ? "再接再厉，卷土重来。" : "棋盘已满，平分秋色。"}</p>
+						<div className="dgame-gomoku-result-actions">
+							<button type="button" onClick={(e) => { e.stopPropagation(); setShowResult(false); }}>查看棋盘</button>
+							<button type="button" onClick={(e) => { e.stopPropagation(); reset(); }}>再来一局</button>
+						</div>
+					</div>
+				</div>
+			) : null}
+		</div>
+		<div className="dgame-controls"><button type="button" onClick={undo}>撤销</button><span>{statusText}</span><button type="button" onClick={reset}>重开</button></div>
+	</section>;
+}
+
+export function GomokuPreview() {
+	// 迷你 9 路棋盘：木纹 + 加粗外框 + 星位 + 黑白对弈石子，与真实棋盘同款画法。
+	const P = (n) => n * 100 + 50;
+	const stones = [[3, 3, "b"], [6, 3, "w"], [4, 4, "w"], [5, 5, "b"], [2, 6, "w"], [6, 6, "b"]];
+	return <span className="dgcov-prev dgcov-prev-gomoku" aria-hidden="true">
+		<svg viewBox="0 0 900 900" preserveAspectRatio="xMidYMid slice">
+			<rect x={P(0)} y={P(0)} width={800} height={800} fill="none" strokeWidth={11} />
+			{[1, 2, 3, 4, 5, 6, 7].map((i) => [
+				<line key={"v" + i} x1={P(i)} y1={P(0)} x2={P(i)} y2={P(8)} />,
+				<line key={"h" + i} x1={P(0)} y1={P(i)} x2={P(8)} y2={P(i)} />,
+			])}
+			<circle className="dgp-star" cx={P(4)} cy={P(4)} r={16} />
+			{stones.map(([r, c, col], i) => <circle key={i} className={"dgp-stone-" + col} cx={P(c)} cy={P(r)} r={40} />)}
+		</svg>
+	</span>;
+}
+
+export const gomokuGame = { Game: GomokuGame, Preview: GomokuPreview, css: `
+.dgame-gomoku-board{position:relative;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);align-self:center;width:min(100%,min(90vw,330px));aspect-ratio:1/1;padding:12px;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(120% 110% at 30% 10%,#edc97f,#dcae62 52%,#cc9a52 80%,#bb8844)}.dgame-gomoku-lines{position:absolute;inset:12px;pointer-events:none}.dgame-gomoku-lines line{stroke:#66431a;stroke-width:3;fill:none}.dgame-gomoku-star{fill:#66431a}.dgame-gomoku-cell{position:relative;z-index:1;background:transparent;border:none;cursor:pointer;padding:0;margin:0;outline:none;min-width:0;min-height:0}.dgame-gomoku-cell:focus-visible::after{content:'';position:absolute;inset:8%;border:2px solid rgba(255,255,255,.7);border-radius:50%}.dgame-gomoku-stone{position:absolute;inset:10%;border-radius:50%;display:block}.dgame-gomoku-stone.black{background:radial-gradient(circle at 34% 30%,#4b5563,#111827 68%);box-shadow:0 2px 5px rgb(0 0 0/.5),inset 0 1px 1px rgba(255,255,255,.25)}.dgame-gomoku-stone.white{background:radial-gradient(circle at 34% 30%,#ffffff,#cbd5e1 70%);box-shadow:0 2px 5px rgb(0 0 0/.4),inset 0 1px 1px rgba(255,255,255,.9)}.dgame-gomoku-cell.last .dgame-gomoku-stone::after{content:'';position:absolute;inset:32%;border-radius:50%;background:rgba(255,80,80,.9)}.dg-gomoku-status{font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.dgame-gomoku-cell.wincell .dgame-gomoku-stone{animation:dg-gomoku-win 1s ease-in-out infinite;z-index:1}
+@keyframes dg-gomoku-win{0%,100%{box-shadow:0 2px 5px rgb(0 0 0/.5),0 0 0 0 rgba(255,214,102,.85)}50%{box-shadow:0 2px 5px rgb(0 0 0/.5),0 0 0 6px rgba(255,214,102,0)}}
+.dgame-gomoku-result{position:absolute;inset:-1px;z-index:5;display:grid;place-items:center;background:rgba(10,10,20,.55);backdrop-filter:blur(2px);border-radius:8px;animation:dg-gomoku-fade .25s ease-out}
+.dgame-gomoku-result-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 26px;border-radius:14px;background:linear-gradient(160deg,#241f38,#171427);border:1px solid color-mix(in srgb,var(--dgame-accent,#a78bfa) 45%,transparent);box-shadow:0 12px 40px rgb(0 0 0/.55),0 0 0 4px rgba(167,139,250,.08);animation:dg-gomoku-pop .35s cubic-bezier(.22,1.6,.36,1);text-align:center}
+.dgame-gomoku-result-card strong{font-size:18px;color:#fff}
+.dgame-gomoku-result-card.b strong{color:#fbbf24}.dgame-gomoku-result-card.w strong{color:#e5e7eb}.dgame-gomoku-result-card.draw strong{color:#cbd5e1}
+.dgame-gomoku-result-icon{font-size:28px;line-height:1;animation:dg-gomoku-bounce 1.2s ease-in-out infinite}
+.dgame-gomoku-result-card p{margin:0;font-size:12px;color:var(--dsw-alias-label-tertiary,#9ca3af)}
+.dgame-gomoku-result-actions{display:flex;gap:10px;margin-top:6px}
+.dgame-gomoku-result-actions button{padding:6px 14px;border-radius:8px;border:1px solid color-mix(in srgb,var(--dgame-accent,#a78bfa) 40%,transparent);background:rgba(167,139,250,.14);color:#ede9fe;font-size:13px;cursor:pointer}
+.dgame-gomoku-result-actions button:hover{background:rgba(167,139,250,.28)}
+@keyframes dg-gomoku-fade{from{opacity:0}to{opacity:1}}
+@keyframes dg-gomoku-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
+@keyframes dg-gomoku-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
+` };