devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(game): align in-game GUI with ref captures

Browse Source
This commit is contained in:
Hide_D
2026-08-01 22:03:03 +00:00
parent 23cdc2adf2
commit 43ec211ff8
30 changed files with 1306 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/components/battle/BattleGeneralCard.vue
+72 -48
View File
@@ -206,21 +206,6 @@ const officerLevelOptions = [
<span>사기</span>
<input v-model.number="general.atmos" type="number" min="40" :max="options.config.maxAtmosByWar" />
</label>
<label class="field">
<span>내정특기</span>
<select v-model="general.special">
<option :value="null">-</option>
<option
v-for="trait in options.eventDomesticTraits"
:key="trait.key"
:value="trait.key"
>
{{ trait.name }}
</option>
</select>
</label>
</div>
<div class="form-row">
<label class="field">
<span>전특</span>
<select v-model="general.special2">
@@ -343,55 +328,68 @@ const officerLevelOptions = [
<style scoped>
.general-card {
border: 1px solid rgba(201, 164, 90, 0.4);
background: rgba(10, 10, 10, 0.75);
padding: 12px;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 5px;
background: #303030;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
gap: 0;
overflow: hidden;
}
.general-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: 8px;
flex-wrap: wrap;
border-bottom: 1px solid rgba(201, 164, 90, 0.3);
padding-bottom: 8px;
min-height: 38px;
padding: 6px 14px;
background: #444;
}
.general-title {
font-weight: 600;
font-size: 0.95rem;
font-size: 14px;
}
.general-subtitle {
font-size: 0.7rem;
color: rgba(232, 221, 196, 0.6);
display: none;
}
.general-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
gap: 7px;
}
.action {
border: 1px solid rgba(201, 164, 90, 0.4);
background: rgba(16, 16, 16, 0.7);
color: inherit;
padding: 4px 10px;
font-size: 0.75rem;
border: 1px solid transparent;
border-radius: 4px;
background: #3498db;
color: #fff;
padding: 4px 9px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.action:first-child {
background: #10b981;
}
.action:nth-of-type(3) {
background: #2c5d8f;
}
.action.ghost {
background: rgba(30, 30, 30, 0.7);
background: #f59e0b;
}
.action.danger {
border-color: rgba(233, 94, 94, 0.6);
color: #f0b6b6;
background: #e74c3c;
color: #fff;
}
.action:disabled {
@@ -403,39 +401,65 @@ const officerLevelOptions = [
display: flex;
flex-direction: column;
gap: 8px;
margin: 8px 14px 0;
}
.form-block:last-child {
margin-bottom: 12px;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px;
gap: 0;
}
.field {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
color: #ddd;
font-size: 12px;
}
.field span {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.75rem;
color: rgba(232, 221, 196, 0.75);
align-items: center;
padding: 6px 10px;
border: 1px solid #111;
background: #444;
white-space: nowrap;
}
.field input,
.field select {
background: rgba(6, 6, 6, 0.7);
border: 1px solid rgba(201, 164, 90, 0.35);
color: #e8ddc4;
padding: 4px 6px;
font-size: 0.8rem;
min-width: 0;
border: 1px solid #111;
background: #ddd;
color: #303030;
padding: 6px 10px;
font-size: 14px;
line-height: 21px;
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.075);
}
.field input:focus,
.field select:focus {
border-color: #3f464d;
outline: 0;
}
.buff-title {
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(201, 164, 90, 0.9);
display: none;
}
.buff-row {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
@media (max-width: 720px) {
.general-header {
align-items: flex-start;
flex-direction: column;
}
}
</style>
app/game-frontend/src/components/main/CommandListPanel.vue
+54 -33
View File
@@ -165,33 +165,36 @@ const canNationReserve = () =>
<span v-else>선택된 도시 없음</span>
</div>
</div>
<CommandSelectForm
:command-table="props.commandTable"
:loading="props.loading"
:active-category="activeCategory"
@update:active-category="activeCategory = $event"
@select="handleSelect"
/>
<div class="command-selected">
<div class="label">선택 명령</div>
<div v-if="selectedCommand" class="value">
<div class="name">{{ selectedCommand.name }}</div>
<div class="meta">
<span>{{ selectedCommand.status === 'available' ? '가능' : '제한' }}</span>
<span v-if="selectedCommand.reqArg">추가 입력 필요</span>
<details class="command-editor">
<summary>고급 모드로</summary>
<CommandSelectForm
:command-table="props.commandTable"
:loading="props.loading"
:active-category="activeCategory"
@update:active-category="activeCategory = $event"
@select="handleSelect"
/>
<div class="command-selected">
<div class="label">선택 명령</div>
<div v-if="selectedCommand" class="value">
<div class="name">{{ selectedCommand.name }}</div>
<div class="meta">
<span>{{ selectedCommand.status === 'available' ? '가능' : '제한' }}</span>
<span v-if="selectedCommand.reqArg">추가 입력 필요</span>
</div>
</div>
<div v-else class="value muted">명령을 선택하세요.</div>
</div>
<div v-else class="value muted">명령을 선택하세요.</div>
</div>
<CommandArgumentForm
v-if="selectedCommand?.reqArg && props.commandTable"
:command-key="selectedCommand.key"
:fields="selectedCommand.inputFields"
:options="props.commandTable.inputOptions"
@update:args="commandArgs = $event"
@update:valid="commandArgsValid = $event"
/>
<div class="reserved-section">
<CommandArgumentForm
v-if="selectedCommand?.reqArg && props.commandTable"
:command-key="selectedCommand.key"
:fields="selectedCommand.inputFields"
:options="props.commandTable.inputOptions"
@update:args="commandArgs = $event"
@update:valid="commandArgsValid = $event"
/>
</details>
<div class="reserved-section general-reserved">
<div class="reserved-header">
<span>일반 예턴</span>
<div class="reserved-actions">
@@ -213,9 +216,10 @@ const canNationReserve = () =>
</div>
</div>
</div>
<div class="reserved-section">
<details class="reserved-section nation-reserved">
<summary>국가 예턴</summary>
<div class="reserved-header">
<span>국가 예턴</span>
<span>국가 예턴 편집</span>
<div class="reserved-actions">
<button :disabled="!canNationReserve()" @click="emit('shift-nation-turns', -1)">앞당김</button>
<button :disabled="!canNationReserve()" @click="emit('shift-nation-turns', 1)">밀기</button>
@@ -235,7 +239,7 @@ const canNationReserve = () =>
</div>
</div>
</div>
</div>
</details>
</div>
</template>
@@ -243,7 +247,16 @@ const canNationReserve = () =>
.command-panel {
display: flex;
flex-direction: column;
gap: 12px;
gap: 4px;
}
.command-editor > summary {
min-height: 28px;
padding: 4px 8px;
background: #444;
color: #fff;
cursor: pointer;
text-align: center;
}
.command-selection {
@@ -281,7 +294,7 @@ const canNationReserve = () =>
.reserved-section {
display: flex;
flex-direction: column;
gap: 8px;
gap: 0;
}
.reserved-header {
@@ -306,14 +319,22 @@ const canNationReserve = () =>
.reserved-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 240px;
gap: 0;
max-height: 420px;
overflow-y: auto;
}
.nation-reserved > summary {
min-height: 28px;
padding: 4px 8px;
background: #444;
cursor: pointer;
}
.reserved-item {
border: 1px solid rgba(201, 164, 90, 0.2);
padding: 6px;
min-height: 30px;
padding: 2px 4px;
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 6px;
app/game-frontend/src/components/main/MapCityDetail.vue
+2 -2
View File
@@ -181,8 +181,8 @@ const cityStateStyle = computed(() => ({
position: absolute;
transform: translate(-50%, -50%);
font-size: 0.65rem;
color: rgba(232, 221, 196, 0.9);
cursor: pointer;
color: #fff;
cursor: auto;
text-decoration: none;
}
app/game-frontend/src/components/main/MapViewer.vue
+22 -14
View File
@@ -102,7 +102,7 @@ const resolveStateClass = (state: number): CityStateClass => {
return 'wrong';
};
const assetBaseUrl = computed(() => import.meta.env.VITE_GAME_ASSET_URL ?? '');
const assetBaseUrl = computed(() => import.meta.env.VITE_GAME_ASSET_URL?.trim() || '/image/game');
const resolveAsset = (path: string) => buildAssetUrl(assetBaseUrl.value, path);
const nationById = computed(() => {
@@ -282,10 +282,7 @@ const selectCity = (cityId: number) => {
<div class="map-title">{{ mapSummary }}</div>
<div class="map-controls">
<button class="map-toggle" :class="{ active: showCityName }" @click="mapStore.toggleCityName">
도시명
</button>
<button class="map-toggle" :class="{ active: detailMode }" @click="mapStore.toggleDetailMode">
상세
도시명 표기 {{ showCityName ? '끄기' : '켜기' }}
</button>
</div>
</div>
@@ -342,16 +339,19 @@ const selectCity = (cityId: number) => {
<style scoped>
.map-viewer {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
gap: 0;
}
.map-top {
display: flex;
height: 20px;
align-items: center;
justify-content: space-between;
gap: 12px;
justify-content: center;
background: #111;
line-height: 20px;
}
.map-title {
@@ -360,14 +360,21 @@ const selectCity = (cityId: number) => {
}
.map-controls {
position: absolute;
z-index: 4;
right: 4px;
bottom: 4px;
display: flex;
gap: 6px;
}
.map-toggle {
border: 1px solid rgba(201, 164, 90, 0.4);
padding: 4px 8px;
font-size: 0.75rem;
border: 1px solid #6c757d;
border-radius: 2px;
padding: 3px 7px;
background: #345c85;
color: #fff;
font-size: 11px;
line-height: 18px;
cursor: pointer;
}
@@ -378,13 +385,14 @@ const selectCity = (cityId: number) => {
.map-body {
display: flex;
flex-direction: column;
gap: 8px;
gap: 0;
overflow-x: auto;
}
.map-area {
position: relative;
border: 1px dashed rgba(201, 164, 90, 0.4);
box-sizing: border-box;
border: 0;
background: #0b0b0b;
overflow: hidden;
max-width: 100%;