feat: 添加棋盘大小选择器 (9x9 ~ 19x19)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/menu/AiGameSetup.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGameStore } from '../../store/gameStore';
+import { MIN_BOARD_SIZE, MAX_BOARD_SIZE } from '../../core/constants';
 import type { Color, GameConfig } from '../../core/types';
 
 interface Props {
@@ -11,13 +12,14 @@ interface Props {
 export default function AiGameSetup({ onBack, onStart }: Props) {
   const { t } = useTranslation();
   const startGame = useGameStore((s) => s.startGame);
+  const [boardSize, setBoardSize] = useState(15);
   const [difficulty, setDifficulty] = useState(3);
   const [playerColor, setPlayerColor] = useState<Color>('Black');
   const [useForbidden, setUseForbidden] = useState(true);
 
   const handleStart = async () => {
     const config: GameConfig = {
-      boardSize: 15,
+      boardSize,
       useForbiddenRules: useForbidden,
       useTimer: false,
       timeLimitSecs: 60,
@@ -33,6 +35,14 @@ export default function AiGameSetup({ onBack, onStart }: Props) {
   return (
     <div className="setup-panel">
       <h2>{t('menu.ai_game')}</h2>
+      <label>
+        {t('settings.board_size')}:
+        <select value={boardSize} onChange={(e) => setBoardSize(Number(e.target.value))}>
+          {Array.from({ length: MAX_BOARD_SIZE - MIN_BOARD_SIZE + 1 }, (_, i) => MIN_BOARD_SIZE + i).map((s) => (
+            <option key={s} value={s}>{s}&times;{s}</option>
+          ))}
+        </select>
+      </label>
       <label>
         {t('settings.difficulty')}:
         <select value={difficulty} onChange={(e) => setDifficulty(Number(e.target.value))}>

src/components/menu/LocalGameSetup.tsx

@@ -1,5 +1,7 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGameStore } from '../../store/gameStore';
+import { MIN_BOARD_SIZE, MAX_BOARD_SIZE } from '../../core/constants';
 import type { GameConfig } from '../../core/types';
 
 interface Props {
@@ -10,10 +12,11 @@ interface Props {
 export default function LocalGameSetup({ onBack, onStart }: Props) {
   const { t } = useTranslation();
   const startGame = useGameStore((s) => s.startGame);
+  const [boardSize, setBoardSize] = useState(15);
 
   const handleStart = async () => {
     const config: GameConfig = {
-      boardSize: 15,
+      boardSize,
       useForbiddenRules: true,
       useTimer: false,
       timeLimitSecs: 60,
@@ -29,6 +32,14 @@ export default function LocalGameSetup({ onBack, onStart }: Props) {
   return (
     <div className="setup-panel">
       <h2>{t('menu.local_game')}</h2>
+      <label>
+        {t('settings.board_size')}:
+        <select value={boardSize} onChange={(e) => setBoardSize(Number(e.target.value))}>
+          {Array.from({ length: MAX_BOARD_SIZE - MIN_BOARD_SIZE + 1 }, (_, i) => MIN_BOARD_SIZE + i).map((s) => (
+            <option key={s} value={s}>{s}&times;{s}</option>
+          ))}
+        </select>
+      </label>
       <div className="setup-actions">
         <button onClick={handleStart}>{t('game.new_game')}</button>
         <button onClick={onBack}>{t('common.back')}</button>

src/components/menu/OnlineSetup.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useGameStore } from '../../store/gameStore';
 import { useState } from 'react';
+import { MIN_BOARD_SIZE, MAX_BOARD_SIZE } from '../../core/constants';
 import type { GameConfig } from '../../core/types';
 
 interface Props { onBack: () => void; onStart: () => void; }
@@ -9,9 +10,10 @@ export default function OnlineSetup({ onBack, onStart }: Props) {
   const { t } = useTranslation();
   const startGame = useGameStore((s) => s.startGame);
   const [ip, setIp] = useState('');
+  const [boardSize, setBoardSize] = useState(15);
 
   const baseConfig: GameConfig = {
-    boardSize: 15, useForbiddenRules: true, useTimer: false,
+    boardSize, useForbiddenRules: true, useTimer: false,
     timeLimitSecs: 60, aiDifficulty: 3, playerColor: 'Black', isServer: false,
     remoteAddress: '',
   };
@@ -29,6 +31,14 @@ export default function OnlineSetup({ onBack, onStart }: Props) {
   return (
     <div className="setup-panel">
       <h2>{t('menu.online_game')}</h2>
+      <label>
+        {t('settings.board_size')}:
+        <select value={boardSize} onChange={(e) => setBoardSize(Number(e.target.value))}>
+          {Array.from({ length: MAX_BOARD_SIZE - MIN_BOARD_SIZE + 1 }, (_, i) => MIN_BOARD_SIZE + i).map((s) => (
+            <option key={s} value={s}>{s}&times;{s}</option>
+          ))}
+        </select>
+      </label>
       <button onClick={handleHost}>{t('menu.host_room')}</button>
       <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
         <input value={ip} onChange={(e) => setIp(e.target.value)} placeholder={t('menu.ip_placeholder') as string} />