Skip to content

Commit 660a47b

Browse files
DoroWolfDoroWolf
committed
fix
1 parent 53e32c5 commit 660a47b

2 files changed

Lines changed: 130 additions & 145 deletions

File tree

‎src/App.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44

55
<GameSetup v-if="showSetup" @start="handleGameSetupStart" @remote="handleRemoteGame" />
66

7-
<!-- 棋盘主面板 -->
8-
<BoardPanel :board="board" :current-turn="currentTurn" :selected-square="selectedSquare"
7+
<BoardPanel v-if="!showSetup" :board="board" :current-turn="currentTurn" :selected-square="selectedSquare"
98
:possible-moves="possibleMoves" :is-dragging="isDragging" :drag-start-square="dragStartSquare"
109
:hover-square="hoverSquare" :mouse-pos="mousePos" :is-mouse-down="isMouseDown"
1110
:promotion-pending="promotionPending" :promotion-style="promotionStyle" :is-draw="isDraw"
@@ -29,7 +28,7 @@
2928
@apply-promotion="(piece: string) => applyPromotion(piece)" />
3029

3130
<!-- 侧边栏 -->
32-
<Sidebar :is-clock-enabled="isClockEnabled" :move-history="moveHistory" :current-turn="currentTurn"
31+
<Sidebar v-if="!showSetup" :is-clock-enabled="isClockEnabled" :move-history="moveHistory" :current-turn="currentTurn"
3332
:game-status="gameStatusMessage" :halfmove-clock="halfmoveClock" :position-count="getPositionCount()"
3433
:is-game-over="isGameOver" :is-flipped="isFlipped" :board="board" :player-color="playerColor"
3534
:white-time-seconds="whiteTimeSeconds"

‎src/components/GameSetup.vue‎

Lines changed: 128 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,139 @@
11
<template>
2-
<div class="setup-overlay">
3-
<!-- 首页：上方 Logo，下方三个按钮 -->
4-
<section v-if="screen === 'home'" class="home-panel">
5-
<div class="title-section">
6-
<img :src="titleImg" alt="Chess Dragon" class="title-img" />
7-
</div>
8-
<div class="home-buttons">
9-
<button class="btn btn-home" @click="startSetup('ai')">人机对局</button>
10-
<button class="btn btn-home" @click="startSetup('human')">双人对局</button>
11-
<button class="btn btn-home" :disabled="true" @click="handleRemote">远程对局</button>
12-
</div>
13-
</section>
14-
15-
<!-- 对局设置面板 -->
16-
<section v-else class="setup-panel with-title">
17-
<div class="setup-section">
18-
<h3>棋盘</h3>
19-
<div class="option-group">
20-
<label class="option-card-btn" :class="{ active: boardMode === 'standard' }">
21-
<input v-model="boardMode" type="radio" value="standard" />
22-
<img :src="iconClassic" alt="" class="card-icon" />
23-
<span>标准棋盘</span>
24-
</label>
25-
<label class="option-card-btn" :class="{ active: boardMode === 'chess960' }">
26-
<input v-model="boardMode" type="radio" value="chess960" />
27-
<img :src="iconChess960" alt="" class="card-icon" />
28-
<span>Chess960</span>
29-
</label>
30-
<label class="option-card-btn" :class="{ active: boardMode === 'custom' }">
31-
<input v-model="boardMode" type="radio" value="custom" />
32-
<img :src="iconCustom" alt="" class="card-icon" />
33-
<span>自定义棋盘</span>
34-
</label>
35-
</div>
36-
37-
<input v-if="boardMode === 'custom'" v-model="fenInput" type="text" class="fen-input"
38-
placeholder="在此处粘贴 FEN 文本" />
39-
<p v-if="boardMode === 'custom' && fenInput.trim() && !isFenValid" class="fen-hint">无效的 FEN</p>
40-
</div>
41-
42-
<div class="setup-section">
43-
<h3>棋钟</h3>
44-
<label class="slider-row">
45-
<span>限时</span>
46-
<input v-model.number="timeMinutes" type="range" min="0" max="180" step="1" />
47-
<strong>{{ timeMinutes === 0 ? '无限制' : `${timeMinutes} 分钟` }}</strong>
2+
<!-- 首页：上方 Logo，下方三个按钮 -->
3+
<section v-if="screen === 'home'" class="home-panel">
4+
<div class="title-section">
5+
<img :src="titleImg" alt="Chess Dragon" class="title-img" />
6+
</div>
7+
<div class="home-buttons">
8+
<button class="btn btn-home" @click="startSetup('ai')">人机对局</button>
9+
<button class="btn btn-home" @click="startSetup('human')">双人对局</button>
10+
<button class="btn btn-home" :disabled="true" @click="handleRemote">远程对局</button>
11+
</div>
12+
</section>
13+
14+
<!-- 对局设置面板 -->
15+
<section v-else class="setup-panel with-title">
16+
<div class="setup-section">
17+
<h3>棋盘</h3>
18+
<div class="option-group">
19+
<label class="option-card-btn" :class="{ active: boardMode === 'standard' }">
20+
<input v-model="boardMode" type="radio" value="standard" />
21+
<img :src="iconClassic" alt="" class="card-icon" />
22+
<span>标准棋盘</span>
4823
</label>
49-
50-
<label v-if="timeMinutes > 0" class="slider-row">
51-
<span>每步加时</span>
52-
<input v-model.number="incrementSeconds" type="range" min="0" max="60" step="1" />
53-
<strong>{{ incrementSeconds }} 秒</strong>
24+
<label class="option-card-btn" :class="{ active: boardMode === 'chess960' }">
25+
<input v-model="boardMode" type="radio" value="chess960" />
26+
<img :src="iconChess960" alt="" class="card-icon" />
27+
<span>Chess960</span>
28+
</label>
29+
<label class="option-card-btn" :class="{ active: boardMode === 'custom' }">
30+
<input v-model="boardMode" type="radio" value="custom" />
31+
<img :src="iconCustom" alt="" class="card-icon" />
32+
<span>自定义棋盘</span>
5433
</label>
55-
56-
<!-- 快捷棋钟组合按钮 -->
57-
<div class="preset-clock-group">
58-
<button
59-
v-for="preset in presetClocks"
60-
:key="preset.label"
61-
type="button"
62-
class="option-card-btn preset-btn"
63-
:class="{ active: isPresetActive(preset.minutes, preset.increment) }"
64-
@click="applyPreset(preset.minutes, preset.increment)"
65-
>
66-
{{ preset.label }}
67-
</button>
68-
</div>
6934
</div>
7035

71-
<!-- 强度设置（仅人机对局） -->
72-
<div v-if="gameMode === 'ai'" class="setup-section">
73-
<h3>强度</h3>
74-
<div class="option-group">
75-
<label v-for="level in 5" :key="level" class="option-card-btn difficulty-card-btn"
76-
:class="{ active: difficulty === level }">
77-
<input v-model="difficulty" type="radio" :value="level" />
78-
<span>{{ level }}</span>
79-
</label>
80-
</div>
36+
<input v-if="boardMode === 'custom'" v-model="fenInput" type="text" class="fen-input"
37+
placeholder="在此处粘贴 FEN 文本" />
38+
<p v-if="boardMode === 'custom' && fenInput.trim() && !isFenValid" class="fen-hint">无效的 FEN</p>
39+
</div>
40+
41+
<div class="setup-section">
42+
<h3>棋钟</h3>
43+
<label class="slider-row">
44+
<span>限时</span>
45+
<input v-model.number="timeMinutes" type="range" min="0" max="180" step="1" />
46+
<strong>{{ timeMinutes === 0 ? '无限制' : `${timeMinutes} 分钟` }}</strong>
47+
</label>
48+
49+
<label v-if="timeMinutes > 0" class="slider-row">
50+
<span>每步加时</span>
51+
<input v-model.number="incrementSeconds" type="range" min="0" max="60" step="1" />
52+
<strong>{{ incrementSeconds }} 秒</strong>
53+
</label>
54+
55+
<!-- 快捷棋钟组合按钮 -->
56+
<div class="preset-clock-group">
57+
<button
58+
v-for="preset in presetClocks"
59+
:key="preset.label"
60+
type="button"
61+
class="option-card-btn preset-btn"
62+
:class="{ active: isPresetActive(preset.minutes, preset.increment) }"
63+
@click="applyPreset(preset.minutes, preset.increment)"
64+
>
65+
{{ preset.label }}
66+
</button>
8167
</div>
82-
83-
<!-- AI 风格设置（仅人机对局） -->
84-
<div v-if="gameMode === 'ai'" class="setup-section">
85-
<h3>AI 风格</h3>
86-
<div class="option-group">
87-
<label class="option-card-btn" :class="{ active: aiStyle === 'balanced' }">
88-
<input v-model="aiStyle" type="radio" value="balanced" />
89-
<span>均衡</span>
90-
</label>
91-
<label class="option-card-btn" :class="{ active: aiStyle === 'aggressive' }">
92-
<input v-model="aiStyle" type="radio" value="aggressive" />
93-
<span>进攻</span>
94-
</label>
95-
<label class="option-card-btn" :class="{ active: aiStyle === 'defensive' }">
96-
<input v-model="aiStyle" type="radio" value="defensive" />
97-
<span>防守</span>
98-
</label>
99-
<label class="option-card-btn" :class="{ active: aiStyle === 'unpredictable' }">
100-
<input v-model="aiStyle" type="radio" value="unpredictable" />
101-
<span>出其不意</span>
102-
</label>
103-
</div>
68+
</div>
69+
70+
<!-- 强度设置（仅人机对局） -->
71+
<div v-if="gameMode === 'ai'" class="setup-section">
72+
<h3>强度</h3>
73+
<div class="option-group">
74+
<label v-for="level in 5" :key="level" class="option-card-btn difficulty-card-btn"
75+
:class="{ active: difficulty === level }">
76+
<input v-model="difficulty" type="radio" :value="level" />
77+
<span>{{ level }}</span>
78+
</label>
10479
</div>
105-
106-
<div v-if="gameMode === 'ai'" class="setup-section">
107-
<h3>执棋方</h3>
108-
<div class="option-group">
109-
<label class="option-card-btn starter-card-btn" :class="{ active: starter === 'black' }">
110-
<input v-model="starter" type="radio" value="black" />
111-
<img :src="kingBlackIcon" alt="" class="starter-icon" />
112-
<span>黑方</span>
113-
</label>
114-
<label class="option-card-btn starter-card-btn" :class="{ active: starter === 'random' }">
115-
<input v-model="starter" type="radio" value="random" />
116-
<img :src="kingRandomIcon" alt="" class="starter-icon" />
117-
<span>随机</span>
118-
</label>
119-
<label class="option-card-btn starter-card-btn" :class="{ active: starter === 'white' }">
120-
<input v-model="starter" type="radio" value="white" />
121-
<img :src="kingWhiteIcon" alt="" class="starter-icon" />
122-
<span>白方</span>
123-
</label>
124-
</div>
80+
</div>
81+
82+
<!-- AI 风格设置（仅人机对局） -->
83+
<div v-if="gameMode === 'ai'" class="setup-section">
84+
<h3>AI 风格</h3>
85+
<div class="option-group">
86+
<label class="option-card-btn" :class="{ active: aiStyle === 'balanced' }">
87+
<input v-model="aiStyle" type="radio" value="balanced" />
88+
<span>均衡</span>
89+
</label>
90+
<label class="option-card-btn" :class="{ active: aiStyle === 'aggressive' }">
91+
<input v-model="aiStyle" type="radio" value="aggressive" />
92+
<span>进攻</span>
93+
</label>
94+
<label class="option-card-btn" :class="{ active: aiStyle === 'defensive' }">
95+
<input v-model="aiStyle" type="radio" value="defensive" />
96+
<span>防守</span>
97+
</label>
98+
<label class="option-card-btn" :class="{ active: aiStyle === 'unpredictable' }">
99+
<input v-model="aiStyle" type="radio" value="unpredictable" />
100+
<span>出其不意</span>
101+
</label>
125102
</div>
126-
127-
<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
128-
129-
<div class="setup-actions">
130-
<button type="button" class="btn bottom-btn" @click="screen = 'home'">
131-
返回
132-
</button>
133-
<button type="button" class="btn bottom-btn btn-primary start-btn" :disabled="!canStart" @click="handleStart">
134-
开始对局
135-
</button>
103+
</div>
104+
105+
<div v-if="gameMode === 'ai'" class="setup-section">
106+
<h3>执棋方</h3>
107+
<div class="option-group">
108+
<label class="option-card-btn starter-card-btn" :class="{ active: starter === 'black' }">
109+
<input v-model="starter" type="radio" value="black" />
110+
<img :src="kingBlackIcon" alt="" class="starter-icon" />
111+
<span>黑方</span>
112+
</label>
113+
<label class="option-card-btn starter-card-btn" :class="{ active: starter === 'random' }">
114+
<input v-model="starter" type="radio" value="random" />
115+
<img :src="kingRandomIcon" alt="" class="starter-icon" />
116+
<span>随机</span>
117+
</label>
118+
<label class="option-card-btn starter-card-btn" :class="{ active: starter === 'white' }">
119+
<input v-model="starter" type="radio" value="white" />
120+
<img :src="kingWhiteIcon" alt="" class="starter-icon" />
121+
<span>白方</span>
122+
</label>
136123
</div>
137-
</section>
138-
</div>
124+
</div>
125+
126+
<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
127+
128+
<div class="setup-actions">
129+
<button type="button" class="btn bottom-btn" @click="screen = 'home'">
130+
返回
131+
</button>
132+
<button type="button" class="btn bottom-btn btn-primary start-btn" :disabled="!canStart" @click="handleStart">
133+
开始对局
134+
</button>
135+
</div>
136+
</section>
139137
</template>
140138

141139
<script setup lang="ts">
@@ -339,17 +337,6 @@ const handleStart = () => {
339337
</script>
340338

341339
<style scoped>
342-
.setup-overlay {
343-
position: fixed;
344-
inset: 0;
345-
z-index: 1000;
346-
display: flex;
347-
justify-content: center;
348-
align-items: center;
349-
padding: 20px;
350-
background-color: var(--color-page-bg);
351-
}
352-
353340
.home-panel {
354341
display: flex;
355342
flex-direction: column;
@@ -388,8 +375,7 @@ const handleStart = () => {
388375
}
389376
390377
.setup-panel {
391-
width: min(560px, 100%);
392-
max-height: calc(100vh - 180px);
378+
width: 100%;
393379
overflow-y: auto;
394380
-webkit-overflow-scrolling: touch;
395381

0 commit comments

Comments
 (0)