dsh-dock 0.6.0 → 0.7.1

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,225 @@
+/* 趣味游戏 · 打砖块（经典机台）——纯 Client；canvas 渲染，方向键/鼠标/触摸控制挡板。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+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 主循环。
+	useEffect(() => {
+		const draw = () => {
+			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) {
+					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;
+						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) {
+							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);
+					if (nl <= 0) { setStatus("over"); statusRef.current = "over"; }
+					else resetBall();
+				}
+			}
+			draw(ctx, g);
+		};
+		let raf = requestAnimationFrame(function loop() { draw(); 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));
+	}, []);
+	useEffect(() => {
+		if (pausedRef.current) return;
+		if (canvasRef.current) canvasRef.current.focus();
+	}, [props.paused]);
+
+	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} 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,175 @@
+/* 趣味游戏 · 五子棋（棋盘对战）——纯 Client；玩家执黑先手，AI 执白。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+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;
+}
+function checkWin(board, r, c, color) {
+	for (const [dr, dc] of DIRS) {
+		let count = 1;
+		let rr = r + dr, cc = c + dc;
+		while (inBoard(rr, cc) && board[rr][cc] === color) { count += 1; rr += dr; cc += dc; }
+		rr = r - dr; cc = c - dc;
+		while (inBoard(rr, cc) && board[rr][cc] === color) { count += 1; rr -= dr; cc -= dc; }
+		if (count >= 5) return true;
+	}
+	return false;
+}
+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 [last, setLast] = useState(null);
+	const [history, setHistory] = useState([]);
+	const [thinking, setThinking] = useState(false);
+	const boardRef = useRef(board);
+	boardRef.current = board;
+	const turnRef = useRef(turn);
+	turnRef.current = turn;
+	const winRef = useRef(winner);
+	winRef.current = winner;
+
+	const finish = useCallback((b, r, c, color) => {
+		if (checkWin(b, r, c, color)) setWinner(color);
+		else if (boardFull(b)) setWinner("draw");
+	}, []);
+
+	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); setLast(null); setHistory([]); setThinking(false);
+	}, []);
+	const undo = useCallback(() => {
+		if (winner || 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); setLast(h.length ? h[h.length - 1] : null);
+	}, [history, winner, thinking]);
+
+	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" role="grid" aria-label="十五路五子棋棋盘">
+			{board.map((row, r) => row.map((cell, c) => (
+				<button type="button" key={r + "-" + c} role="gridcell" className={"dgame-gomoku-cell" + (cell ? " filled " + cell : "") + (last && last.r === r && last.c === c ? " last" : "")}
+					aria-label={"第" + (r + 1) + "行第" + (c + 1) + "列" + (cell === "b" ? " 黑子" : cell === "w" ? " 白子" : " 空格")}
+					onClick={() => onCell(r, c)}>{cell ? <i className={"dgame-gomoku-stone " + cell} /> : null}</button>
+			)))}
+		</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() {
+	return <span className="dgcov-prev dgcov-prev-gomoku" aria-hidden="true">
+		{[[6, 6], [7, 7], [8, 8], [9, 9], [7, 8], [8, 7]].map(([r, c], i) => <i key={i} style={{ left: (c + 1) * 10 + "%", top: (r + 1) * 9.5 + "%" }} className={i % 3 === 0 || i === 5 ? "black" : "white"} />)}
+	</span>;
+}
+
+export const gomokuGame = { Game: GomokuGame, Preview: GomokuPreview, css: `
+.dgame-gomoku-board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);align-self:center;width:min(100%,320px);aspect-ratio:1/1;padding:6px;border-radius:8px;background:linear-gradient(135deg,#d9a441,#c08a2c);border:1px solid color-mix(in srgb,#8a5a1c 60%,transparent);box-shadow:0 4px 18px rgb(0 0 0/.35),inset 0 0 0 2px rgba(0,0,0,.18);background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/14),rgba(0,0,0,.16) calc(100%/14) calc(100%/14 + 1px)),repeating-linear-gradient(0deg,transparent 0 calc(100%/14),rgba(0,0,0,.16) calc(100%/14) calc(100%/14 + 1px))}.dgame-gomoku-cell{position:relative;background:transparent;border:none;cursor:pointer;padding:0;margin:0;outline:none}.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:12%;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)}
+` };

package/features/games/games/racer.jsx

@@ -0,0 +1,171 @@
+/* 趣味游戏 · 极速赛车（经典机台）——纯 Client；canvas 渲染，躲避来车、收集金币，越开越快。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const W = 300, H = 420;
+const ROAD_W = 232, ROAD_X = (W - ROAD_W) / 2;
+const CAR_W = 34, CAR_H = 52;
+const CAR_COLORS = ["#f87171", "#fb923c", "#c084fc", "#38bdf8", "#4ade80", "#fde047"];
+function laneX(lane) { return ROAD_X + ROAD_W * (lane + 0.5) / 3 - CAR_W / 2; }
+function overlap(a, b) {
+	return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+function rect(ctx, x, y, w, h, r, fill) {
+	ctx.fillStyle = fill;
+	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();
+	ctx.fill();
+}
+
+export function RacerGame(props) {
+	const canvasRef = useRef(null);
+	const [status, setStatus] = useState("play"); // play | over
+	const game = useRef(null);
+	const keys = useRef({});
+	const statusRef = useRef("play"); statusRef.current = status;
+	const pausedRef = useRef(!!(props && props.paused)); pausedRef.current = !!(props && props.paused);
+
+	const reset = useCallback(() => {
+		game.current = {
+			stars: Array.from({ length: 50 }, () => ({ x: Math.random() * W, y: Math.random() * H, a: .2 + Math.random() * .5 })),
+			player: { x: laneX(1), y: H - CAR_H - 16 },
+			enemies: [], coins: [],
+			dist: 0, coinsGot: 0, spawn: 0, coinSpawn: 0,
+			speed: 3.4, over: false,
+		};
+	}, []);
+
+	useEffect(() => { reset(); setStatus("play"); }, [reset]);
+
+	const launch = useCallback(() => {
+		reset(); setStatus("play");
+	}, [reset]);
+
+	useEffect(() => {
+		const draw = () => {
+			const g = game.current, ctx = canvasRef.current && canvasRef.current.getContext("2d");
+			if (!g || !ctx) return;
+			// 背景
+			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;
+			// 路面
+			ctx.fillStyle = "#20243a"; ctx.fillRect(ROAD_X, 0, ROAD_W, H);
+			ctx.fillStyle = "rgba(255,255,255,.09)"; ctx.fillRect(ROAD_X + 6, 0, 4, H); ctx.fillRect(ROAD_X + ROAD_W - 10, 0, 4, H);
+			// 车道虚线
+			ctx.fillStyle = "rgba(255,255,255,.16)";
+			for (let i = 1; i < 3; i += 1) {
+				const lx = ROAD_X + ROAD_W * i / 3 - 1;
+				for (let yy = (g.dist % 60); yy < H; yy += 60) ctx.fillRect(lx, yy, 2, 26);
+			}
+			if (pausedRef.current || g.over) { drawHUD(ctx, g); return; }
+			// 挡板移动（玩家车）
+			if (keys.current.left) g.player.x -= 5;
+			if (keys.current.right) g.player.x += 5;
+			g.player.x = Math.max(ROAD_X + 2, Math.min(ROAD_X + ROAD_W - CAR_W - 2, g.player.x));
+			g.dist += g.speed * .16;
+			// 生成来车
+			g.spawn += 1;
+			if (g.spawn > Math.max(20, 56 - g.dist / 600)) {
+				g.spawn = 0;
+				const lane = Math.floor(Math.random() * 3);
+				const v = g.speed * (1.1 + Math.random() * .6);
+				g.enemies.push({ x: laneX(lane), y: -CAR_H - Math.random() * 60, w: CAR_W, h: CAR_H, v, c: CAR_COLORS[Math.floor(Math.random() * CAR_COLORS.length)] });
+			}
+			// 生成金币
+			g.coinSpawn += 1;
+			if (g.coinSpawn > Math.max(30, 70 - g.dist / 500)) {
+				g.coinSpawn = 0;
+				g.coins.push({ x: laneX(Math.floor(Math.random() * 3)), y: -30, r: 11, got: false });
+			}
+			// 更新来车/金币
+			for (const e of g.enemies) e.y += e.v;
+			for (const c of g.coins) c.y += g.speed;
+			g.enemies = g.enemies.filter((e) => e.y < H + 20);
+			g.coins = g.coins.filter((c) => c.y < H + 20);
+			// 碰撞检测
+			for (const e of g.enemies) {
+				if (overlap(g.player, e)) { g.over = true; setStatus("over"); statusRef.current = "over"; }
+			}
+			for (const c of g.coins) {
+				if (!c.got && Math.abs(c.x + c.r - (g.player.x + CAR_W / 2)) < CAR_W / 2 + 8 && Math.abs(c.y - (g.player.y + CAR_H / 2)) < CAR_H / 2 + 10) {
+					c.got = true; g.coinsGot += 1;
+				}
+			}
+			// 画来车
+			for (const e of g.enemies) { rect(ctx, e.x, e.y, e.w, e.h, 7, e.c); ctx.fillStyle = "rgba(255,255,255,.25)"; ctx.fillRect(e.x + 6, e.y + 7, e.w - 12, 12); }
+			// 画金币
+			ctx.fillStyle = "#fde047";
+			for (const c of g.coins) { ctx.beginPath(); ctx.arc(c.x + c.r, c.y, c.r, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "rgba(120,53,15,.4)"; ctx.beginPath(); ctx.arc(c.x + c.r, c.y, c.r * .5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#fde047"; }
+			// 画玩家车
+			drawCar(ctx, g.player.x, g.player.y, "#22d3ee");
+			drawHUD(ctx, g);
+		};
+		const drawHUD = (ctx, g) => {
+			ctx.fillStyle = "#e7ecff";
+			ctx.font = "bold 13px system-ui, sans-serif";
+			ctx.textBaseline = "top";
+			ctx.fillText("距离 " + Math.floor(g.dist / 60) + " m", 10, 10);
+			ctx.fillStyle = "#fde047";
+			ctx.fillText("金币 × " + g.coinsGot, W - 70, 10);
+		};
+		function drawCar(ctx, x, y, c) {
+			rect(ctx, x, y, CAR_W, CAR_H, 9, c);
+			ctx.fillStyle = "rgba(255,255,255,.3)"; rect(ctx, x + 5, y + 6, CAR_W - 10, 13, 4, "rgba(255,255,255,.3)");
+			ctx.fillStyle = "rgba(15,23,42,.5)"; rect(ctx, x + 5, y + CAR_H - 16, CAR_W - 10, 9, 3, "rgba(15,23,42,.5)");
+			ctx.fillStyle = "rgba(255,255,255,.45)";
+			rect(ctx, x + 3, y + CAR_H - 4, 6, 5, 2, "#fde047");
+			rect(ctx, x + CAR_W - 9, y + CAR_H - 4, 6, 5, 2, "#fde047");
+		}
+		let raf = requestAnimationFrame(function loop() { draw(); raf = requestAnimationFrame(loop); });
+		return () => cancelAnimationFrame(raf);
+	}, []);
+
+	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.toLowerCase() === "r") { event.preventDefault(); launch(); }
+	}, [launch]);
+	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 rect0 = cv.getBoundingClientRect();
+		const scale = rect0.width / W;
+		g.player.x = Math.max(ROAD_X + 2, Math.min(ROAD_X + ROAD_W - CAR_W - 2, (e.clientX - rect0.left) / scale - CAR_W / 2));
+	}, []);
+	useEffect(() => {
+		if (pausedRef.current) return;
+		if (canvasRef.current) canvasRef.current.focus();
+	}, [props.paused]);
+
+	return <section className="dgame-game" aria-label="极速赛车">
+		<div className="dgame-game-head"><div><h3>极速赛车</h3><p>左右移动避开迎面来车、收集金币，越开越快；撞车即结束。距离与金币实时显示在游戏画面左上/右上。</p></div><div className="dgame-score"><span>操作</span><span>←/→ 或鼠标</span></div></div>
+		<div className="dgame-racer">
+			<canvas ref={canvasRef} width={W} height={H} tabIndex={0} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onPointerMove={onPointerMove} className="dgame-racer-canvas" aria-label="极速赛车游戏区域，左右方向键或鼠标控制方向" />
+			{status === "over" ? <div className="dgame-over"><strong>撞车了 · 行驶 {(game.current && Math.floor(game.current.dist / 60)) || 0} 米</strong><button type="button" onClick={launch}>重新出发</button></div> : null}
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="向左" onClick={() => { keys.current.left = false; if (game.current) game.current.player.x = Math.max(ROAD_X + 2, game.current.player.x - 14); }}>← 左移</button><span>←/→ 或鼠标移动 · R 重开</span><button type="button" aria-label="向右" onClick={() => { keys.current.right = false; if (game.current) game.current.player.x = Math.min(ROAD_X + ROAD_W - CAR_W - 2, game.current.player.x + 14); }}>右移 {'->'}</button></div>
+	</section>;
+}
+
+export function RacerPreview() {
+	return <span className="dgcov-prev dgcov-prev-racer" aria-hidden="true">
+		<i style={{ left: "20%", top: "8%" }} /><i style={{ left: "55%", top: "22%" }} /><i style={{ left: "20%", top: "42%" }} /><i style={{ left: "64%", top: "58%" }} /><i style={{ left: "38%", top: "74%" }} />
+		<b />
+	</span>;
+}
+
+export const racerGame = { Game: RacerGame, Preview: RacerPreview, css: `
+.dgame-racer{position:relative;align-self:center;width:min(100%,300px);margin:0 auto}.dgame-racer-canvas{display:block;width:100%;aspect-ratio:300/420;border:1px solid color-mix(in srgb,rgb(34 211 238) 32%,var(--dsw-alias-border-l1));border-radius:10px;outline:none;background:#0b1024;box-shadow:0 4px 18px rgb(0 0 0/.4)}.dgame-racer-canvas:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(34 211 238) 35%,transparent)}.dgame-racer .dgame-over{position:absolute;inset:0;border-radius:10px}.dgame-racer-stat{color:var(--dsw-alias-label-tertiary)}
+` };