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

fix(game-ui): 메인 갱신 제어를 턴 입력기 아래로 이동

Browse Source
This commit is contained in:
Hide_D
2026-08-21 04:49:52 +00:00
parent 8e616ed07b
commit aa479c1f0f
5 changed files with 275 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/assets/styles/legacy-controls.css
+1 -1
View File
@@ -160,7 +160,7 @@
* toggle's overlapping left border. These rules intentionally follow the
* Lumen family so its border shorthand cannot restore the inner rounding.
*/
.legacy-split-button > .main-menu-link {
.legacy-split-button > :is(.main-menu-link, .legacy-split-button__main) {
border-radius: 5.25px 0 0 5.25px;
}
app/game-frontend/src/components/main/MainTurnControls.vue
+84
View File
@@ -0,0 +1,84 @@
<script setup lang="ts">
defineProps<{
realtimeEnabled: boolean;
refreshing: boolean;
}>();
const emit = defineEmits<{
refresh: [];
toggleRealtime: [];
lobby: [];
}>();
</script>
<template>
<section class="main-turn-controls" aria-label="메인 갱신 및 이동">
<div class="main-turn-controls__refresh-pair legacy-split-button">
<button
class="main-turn-controls__manual legacy-split-button__main legacy-button legacy-button--navigation"
type="button"
:aria-busy="refreshing"
@click="emit('refresh')"
>
갱 신
</button>
<button
class="main-turn-controls__auto legacy-split-button__toggle legacy-button legacy-button--navigation"
:class="{ active: realtimeEnabled }"
type="button"
:aria-label="`자동 갱신 ${realtimeEnabled ? 'ON' : 'OFF'}`"
:aria-pressed="realtimeEnabled"
@click="emit('toggleRealtime')"
>
<span>자동 갱신</span>
<strong>{{ realtimeEnabled ? 'ON' : 'OFF' }}</strong>
</button>
</div>
<button
class="main-turn-controls__lobby legacy-button legacy-button--navigation"
type="button"
@click="emit('lobby')"
>
로비로
</button>
</section>
</template>
<style scoped>
.main-turn-controls {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 4px;
}
.main-turn-controls__refresh-pair {
display: grid;
min-width: 0;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.main-turn-controls .legacy-button {
width: 100%;
min-width: 0;
padding-right: 4px;
padding-left: 4px;
font-weight: 400;
white-space: nowrap;
}
.main-turn-controls__auto {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.main-turn-controls__auto strong {
color: #bbb;
font-size: 0.85em;
}
.main-turn-controls__auto.active strong {
color: #9ef0b8;
}
</style>
app/game-frontend/src/views/MainView.vue
+22 -66
View File
@@ -17,6 +17,7 @@ import MainFrontStatus from '../components/main/MainFrontStatus.vue';
import MainGlobalMenu from '../components/main/MainGlobalMenu.vue';
import MainNationMenu from '../components/main/MainNationMenu.vue';
import MainMobileBottomBar from '../components/main/MainMobileBottomBar.vue';
import MainTurnControls from '../components/main/MainTurnControls.vue';
import {
defaultGlobalNavigation,
type MainNavigationEntry,
@@ -86,7 +87,6 @@ const {
messageDraftText,
targetMailbox,
mailboxGroups,
realtimeLabel,
} = storeToRefs(dashboard);
const nationAccess = computed(() => ({
@@ -223,31 +223,6 @@ watch(
<h1 class="game-shell__title">
{{ gameTitle }}
</h1>
<div class="game-shell__actions desktop-action-controls">
<button
class="game-shell__action desktop-action-controls__realtime toggle legacy-button legacy-button--navigation"
:class="{ active: realtimeEnabled }"
type="button"
@click="dashboard.setRealtimeEnabled(!realtimeEnabled)"
>
실시간 동기화: {{ realtimeLabel }}
</button>
<button
class="game-shell__action desktop-action-controls__refresh legacy-button legacy-button--navigation"
type="button"
:aria-busy="refreshing"
@click="requestManualRefresh"
>
갱 신
</button>
<button
class="game-shell__action desktop-action-controls__lobby legacy-button legacy-button--navigation"
type="button"
@click="moveLobby"
>
로비로
</button>
</div>
</header>
<section v-if="lobbyInfo" class="legacy-game-info" aria-label="게임 진행 정보">
@@ -282,7 +257,7 @@ watch(
<section v-if="isMobile" class="layout-mobile">
<template v-for="(panelId, panelIndex) in mobilePanelOrder" :key="panelId">
<div v-if="panelId === 'commands'" class="mobile-panel" data-mobile-panel-id="commands">
<PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
<PanelCard title="명령 목록" aria-label="명령 목록" data-main-target="commands">
<CommandListPanel
:command-table="commandTable"
:loading="loading"
@@ -300,6 +275,13 @@ watch(
@shift-general-turns="shiftGeneralTurns"
@repeat-general-turns="repeatGeneralTurns"
/>
<MainTurnControls
:realtime-enabled="realtimeEnabled"
:refreshing="refreshing"
@refresh="requestManualRefresh"
@toggle-realtime="dashboard.setRealtimeEnabled(!realtimeEnabled)"
@lobby="moveLobby"
/>
</PanelCard>
</div>
@@ -435,7 +417,7 @@ watch(
<PanelCard title="지도" subtitle="실시간 지도 + 도시 상황" data-main-target="map">
<MapViewer :map-data="worldMap" :map-layout="mapLayout" :loading="loading" />
</PanelCard>
<PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역" data-main-target="commands">
<PanelCard title="명령 목록" aria-label="명령 목록" data-main-target="commands">
<CommandListPanel
:command-table="commandTable"
:loading="loading"
@@ -453,6 +435,13 @@ watch(
@shift-general-turns="shiftGeneralTurns"
@repeat-general-turns="repeatGeneralTurns"
/>
<MainTurnControls
:realtime-enabled="realtimeEnabled"
:refreshing="refreshing"
@refresh="requestManualRefresh"
@toggle-realtime="dashboard.setRealtimeEnabled(!realtimeEnabled)"
@lobby="moveLobby"
/>
</PanelCard>
<PanelCard title="도시 정보" data-main-target="city">
<CityBasicCard :city="city" :loading="loading" />
@@ -746,6 +735,7 @@ button {
.layout-desktop > [data-main-target='commands'] {
grid-column: 8 / 11;
grid-row: 1 / 3;
align-self: stretch;
min-height: 645px;
width: 290px;
margin-left: 10px;
@@ -785,6 +775,10 @@ button {
background-color: #222;
}
[data-main-target='commands'] :deep(.panel-header) {
display: none;
}
.nation-menu-middle {
grid-column: 1 / -1;
}
@@ -912,14 +906,6 @@ button {
margin-top: 31px;
}
.desktop-action-controls .game-shell__action {
font-weight: 400;
}
.desktop-action-controls__lobby {
margin-left: 12px;
}
.placeholder {
font-size: 0.85rem;
color: rgba(232, 221, 196, 0.7);
@@ -933,36 +919,6 @@ button {
height: 45px;
}
.desktop-action-controls {
display: grid;
width: 100%;
grid-template-areas: 'refresh realtime lobby';
grid-template-columns: max-content 1fr max-content;
align-items: start;
gap: 0;
}
.desktop-action-controls .game-shell__action {
padding-right: 4px;
padding-left: 4px;
}
.desktop-action-controls__refresh {
grid-area: refresh;
justify-self: start;
}
.desktop-action-controls__realtime {
grid-area: realtime;
justify-self: center;
}
.desktop-action-controls__lobby {
grid-area: lobby;
justify-self: end;
margin-left: 0;
}
.main-page {
width: 500px;
min-height: 3688px;