update start menu

Author: DoroWolf

public/texture/logo.png

@@ -2,7 +2,7 @@
   <section class="game-container" :class="{ 'global-dragging': isMouseDown && dragStartSquare }"
     :style="{ '--piece-scale': pieceScale }">
 
-    <GameSetup v-if="showSetup" @start="handleGameSetupStart" />
+    <GameSetup v-if="showSetup" @start="handleGameSetupStart" @remote="handleRemoteGame" />
 
     <!-- 棋盘主面板 -->
     <BoardPanel :board="board" :current-turn="currentTurn" :selected-square="selectedSquare"
@@ -40,7 +40,6 @@
     <!-- 设置弹窗 Modal -->
     <SettingsModal :visible="showSettingsModal" :is-sound-enabled="isSoundEnabled"
       :coordinate-label-mode="coordinateLabelMode" @close="showSettingsModal = false"
-      @toggle-flip="isFlipped = !isFlipped"
       @update:is-sound-enabled="(val: boolean) => isSoundEnabled = val"
       @update:coordinate-label-mode="(val: 'off' | 'inside' | 'outside') => coordinateLabelMode = val" />
   </section>
@@ -117,6 +116,12 @@ const {
   stopClock,
 } = game
 
+// ---- 远程对战 ----
+const handleRemoteGame = () => {
+  // TODO: 后续实现远程对战功能
+  showSetup.value = true
+}
+
 // ---- 生命周期 ----
 onUnmounted(() => {
   stopClock()

src/App.vue

@@ -1,3 +1,26 @@
+body, html {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+img {
+  -webkit-user-drag: none;
+  user-drag: none;
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: -moz-crisp-edges;
+  -ms-interpolation-mode: nearest-neighbor;
+}
+
+input,
+textarea,
+[contenteditable="true"],
+.can-select {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
 .card {
   border: 2px solid #212529;
   background-color: #fff;
@@ -54,8 +77,3 @@
 .btn:focus {
   outline: none;
 }
-
-.no-select {
-  -webkit-user-select: none;
-  user-select: none;
-}

src/assets/styles/global.css

@@ -57,7 +57,7 @@
       </div>
     </div>
 
-    <img v-if="isDragging && dragStartSquare" class="floating-piece no-select" draggable="false"
+    <img v-if="isDragging && dragStartSquare" class="floating-piece " draggable="false"
       :src="getPieceImage(board[dragStartSquare.row]?.[dragStartSquare.col]!, board, isDraw, hasResigned, timeoutWinner)"
       :style="{ left: mousePos.x + 'px', top: mousePos.y + 'px' }" alt="" />
   </div>
@@ -229,8 +229,6 @@ watch(pieceScale, (val) => {
 .square-background,
 .piece {
   display: block;
-  image-rendering: crisp-edges;
-  image-rendering: pixelated;
 }
 
 .square-background.base {
@@ -270,8 +268,6 @@ watch(pieceScale, (val) => {
   pointer-events: none;
   z-index: 9999;
   transform: translate(-50%, -50%) scale(var(--piece-scale));
-  image-rendering: crisp-edges;
-  image-rendering: pixelated;
 }
 
 .coordinate-label {
@@ -282,7 +278,6 @@ watch(pieceScale, (val) => {
   font-weight: bold;
   pointer-events: none;
   z-index: 5;
-  user-select: none;
 }
 
 .coordinates-outside-layer {

src/components/BoardPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isClockEnabled" class="clock-grid no-select" :data-testid="testId">
+    <div v-if="isClockEnabled" class="clock-grid " :data-testid="testId">
         <div class="clock-side side-white" :class="{ 'is-active': activeColor === 'white' }">
             <span class="clock-time">{{ formattedWhiteTime }}</span>
         </div>

src/components/ChessClock.vue

@@ -1,6 +1,20 @@
 <template>
     <div class="setup-overlay">
-        <section class="setup-panel nes-container with-title">
+        <!-- 首页：上方 Logo，下方三个按钮 -->
+        <section v-if="screen === 'home'" class="home-panel">
+            <div class="logo-section">
+                <!-- 修改处：将文字标题替换为图片 Logo -->
+                <img src="/texture/logo.png" alt="Chess Dragon" class="logo-img" />
+            </div>
+            <div class="home-buttons">
+                <button class="btn btn-home" @click="startSetup('ai')">人机对战</button>
+                <button class="btn btn-home" @click="startSetup('human')">双人对战</button>
+                <button class="btn btn-home btn-home--secondary" @click="handleRemote">远程对战</button>
+            </div>
+        </section>
+
+        <!-- 对局设置面板 -->
+        <section v-else class="setup-panel with-title">
             <div class="setup-section">
                 <h3>棋盘</h3>
                 <div class="option-group">
@@ -33,6 +47,18 @@
                 </label>
             </div>
 
+            <!-- 强度设置（仅人机对战） -->
+            <div v-if="gameMode === 'ai'" class="setup-section">
+                <h3>强度</h3>
+                <div class="option-group">
+                    <label v-for="level in 5" :key="level" class="option-card difficulty-card"
+                        :class="{ active: difficulty === level }">
+                        <input v-model="difficulty" type="radio" :value="level" />
+                        <span>{{ level }}</span>
+                    </label>
+                </div>
+            </div>
+
             <div class="setup-section">
                 <h3>执棋方</h3>
                 <div class="option-group">
@@ -53,9 +79,14 @@
 
             <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
 
-            <button type="button" class="nes-btn is-primary start-btn" @click="handleStart">
-                开始对局
-            </button>
+            <div class="setup-actions">
+                <button type="button" class="btn btn-secondary" @click="screen = 'home'">
+                    返回
+                </button>
+                <button type="button" class="btn btn-primary start-btn" @click="handleStart">
+                    开始对局
+                </button>
+            </div>
         </section>
     </div>
 </template>
@@ -69,19 +100,35 @@ export interface GameSetupConfig {
     timeMinutes: number
     incrementSeconds: number
     starter: 'black' | 'random' | 'white'
+    gameMode: 'ai' | 'human' | 'remote'
+    difficulty: number
 }
 
 const emit = defineEmits<{
     start: [config: GameSetupConfig]
+    remote: []
 }>()
 
+const screen = ref<'home' | 'setup'>('home')
+const gameMode = ref<'ai' | 'human' | 'remote'>('ai')
+const difficulty = ref(3)
+
 const boardMode = ref<'standard' | 'custom'>('standard')
 const fenInput = ref('')
 const timeMinutes = ref(10)
 const incrementSeconds = ref(0)
 const starter = ref<'black' | 'random' | 'white'>('white')
 const errorMessage = ref('')
 
+const startSetup = (mode: 'ai' | 'human') => {
+    gameMode.value = mode
+    screen.value = 'setup'
+}
+
+const handleRemote = () => {
+    emit('remote')
+}
+
 const handleStart = () => {
     errorMessage.value = ''
 
@@ -105,6 +152,8 @@ const handleStart = () => {
         timeMinutes: timeMinutes.value,
         incrementSeconds: timeMinutes.value === 0 ? 0 : incrementSeconds.value,
         starter: starter.value,
+        gameMode: gameMode.value,
+        difficulty: difficulty.value,
     })
 }
 </script>
@@ -121,6 +170,62 @@ const handleStart = () => {
     background-color: #f0f0f0;
 }
 
+.home-panel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    text-align: center;
+}
+
+.logo-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.logo-img {
+    max-width: 60vh;
+    height: auto;
+    object-fit: contain;
+}
+
+
+.home-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 260px;
+}
+
+.btn-home {
+    width: 100%;
+    padding: 14px 0;
+    font-size: 1.15rem;
+    font-weight: 600;
+    border: 2px solid #212529;
+    background: #fff;
+    color: #212529;
+    cursor: pointer;
+    transition: background-color 0.15s, color 0.15s;
+}
+
+.btn-home:hover {
+    background: #212529;
+    color: #fff;
+}
+
+.btn-home--secondary {
+    border-color: #888;
+    color: #666;
+}
+
+.btn-home--secondary:hover {
+    background: #888;
+    color: #fff;
+}
+
 .setup-panel {
     width: min(560px, 100%);
     max-height: 90vh;
@@ -161,6 +266,21 @@ const handleStart = () => {
     cursor: pointer;
 }
 
+.difficulty-card {
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    padding: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.difficulty-card.active {
+    border-color: #212529;
+    background: #212529;
+    color: #fff;
+}
+
 .fen-input {
     width: 100%;
     box-sizing: border-box;
@@ -183,8 +303,27 @@ const handleStart = () => {
     font-size: 0.95rem;
 }
 
+.setup-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.btn-secondary {
+    flex: 0 0 auto;
+    padding: 10px 20px;
+    border: 1px solid #888;
+    background: #fff;
+    color: #555;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: background-color 0.15s;
+}
+
+.btn-secondary:hover {
+    background: #f0f0f0;
+}
+
 .start-btn {
-    width: 100%;
-    margin-top: 8px;
+    flex: 1;
 }
 </style>

src/components/GameSetup.vue

@@ -46,14 +46,6 @@ const computedStyle = computed(() => ({
   background: #ffffff;
   z-index: 60;
   overflow: hidden;
-
-  /* 保证像素风格纹理渲染清晰 */
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
-
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
 }
 
 .promote-btn {
@@ -78,8 +70,5 @@ const computedStyle = computed(() => ({
   height: 100%;
   object-fit: contain;
   box-sizing: border-box;
-
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
 }
 </style>

src/components/Promotion.vue

@@ -4,14 +4,6 @@
       <p class="dialog-title">游戏设置</p>
 
       <div class="settings-list">
-        <!-- 翻转棋盘（按钮形式） -->
-        <div class="setting-item">
-          <span class="setting-label">棋盘方向</span>
-          <button type="button" class="btn flip-btn" @click="$emit('toggle-flip')">
-            翻转棋盘
-          </button>
-        </div>
-
         <!-- 音效开关 -->
         <div class="setting-item">
           <span class="setting-label">音效</span>