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

Merge branch 'main' into fix/scenario29-nation-betting-20260815

Browse Source
This commit is contained in:
Hide_D
2026-08-15 04:27:40 +00:00
parent f8b28a055c 5dce8e1a12
commit 504bd234a0
2 changed files with 187 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/mainNavigation.spec.ts
+112 -3
View File
@@ -35,6 +35,7 @@ type NavigationFixture = {
currentYear?: number;
currentMonth?: number;
scenarioTitle?: string;
nationColor?: string;
lastExecuted?: string | null;
latestVote?: { id: number; title: string; hasVoted: boolean } | null;
globalRecords?: Array<{ id: number; text: string }>;
@@ -267,7 +268,7 @@ const generalContext = (state: NavigationFixture) => ({
nation: {
id: 1,
name: '위',
color: '#008000',
color: state.nationColor ?? '#008000',
level: state.nationLevel,
gold: 10_000,
rice: 20_000,
@@ -425,7 +426,7 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
year: state.currentYear ?? 185,
month: state.currentMonth ?? 1,
cityList: [[1, 8, state.cityState ?? 0, 1, 1, 1]],
nationList: [[1, '위', '#008000', 1]],
nationList: [[1, '위', state.nationColor ?? '#008000', 1]],
spyList: {},
shownByGeneralList: [],
myCity: 1,
@@ -1409,6 +1410,111 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
await persistArtifact(page, `${basePath.slice(1)}-mobile-500`);
});
test('mobile bottom controls preserve Ref navigation color, contrast, and pressed depth', async ({ page }) => {
const state: NavigationFixture = {
officerLevel: 5,
permission: 2,
nationLevel: 3,
stage: 0,
npcMode: 1,
nationColor: '#FFFF00',
generalMeCalls: 0,
operations: [],
};
await installFixture(page, state);
await page.setViewportSize({ width: 500, height: 900 });
await waitForMain(page);
const buttonStyle = (selector: string) =>
page.locator(selector).evaluate((element) => {
const style = getComputedStyle(element);
const rect = element.getBoundingClientRect();
return {
backgroundColor: style.backgroundColor,
color: style.color,
borderBottomWidth: style.borderBottomWidth,
marginTop: style.marginTop,
fontWeight: style.fontWeight,
height: rect.height,
};
});
const pointerDownStyle = async (selector: string) => {
const target = page.locator(selector);
const box = await target.boundingBox();
if (!box) throw new Error(`mobile bottom control is not measurable: ${selector}`);
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
await page.mouse.down();
const activeStyle = await buttonStyle(selector);
await page.mouse.move(1, 1);
await page.mouse.up();
return activeStyle;
};
const globalSelector = '[data-bottom-menu="global"]';
await expect(page.locator(globalSelector)).toBeVisible();
expect(await buttonStyle(globalSelector)).toMatchObject({
backgroundColor: 'rgb(0, 88, 44)',
color: 'rgb(255, 255, 255)',
borderBottomWidth: '4px',
marginTop: '0px',
fontWeight: '700',
height: 45,
});
await page.locator(globalSelector).hover();
expect(await buttonStyle(globalSelector)).toMatchObject({
backgroundColor: 'rgb(0, 88, 44)',
borderBottomWidth: '3px',
marginTop: '1px',
height: 44,
});
expect(await pointerDownStyle(globalSelector)).toMatchObject({
backgroundColor: 'rgb(0, 88, 44)',
borderBottomWidth: '2px',
marginTop: '2px',
height: 43,
});
const nationTrigger = page.locator('[data-bottom-menu="nation"]');
await expect(nationTrigger).toHaveCSS('background-color', 'rgb(255, 255, 0)');
await expect(nationTrigger).toHaveCSS('color', 'rgb(0, 0, 0)');
await page.locator('[data-bottom-menu="quick"]').click();
const lobbySelector = '#mobile-quick-menu .lobby-link';
await expect(page.locator(lobbySelector)).toBeVisible();
expect(await buttonStyle(lobbySelector)).toMatchObject({
backgroundColor: 'rgb(0, 88, 44)',
color: 'rgb(255, 255, 255)',
borderBottomWidth: '4px',
marginTop: '0px',
fontWeight: '700',
height: 40,
});
expect(await pointerDownStyle(lobbySelector)).toMatchObject({
backgroundColor: 'rgb(0, 88, 44)',
borderBottomWidth: '2px',
marginTop: '2px',
height: 38,
});
const autoRefreshSelector = '[data-bottom-menu="auto-refresh"]';
expect(await buttonStyle(autoRefreshSelector)).toMatchObject({
backgroundColor: 'rgb(0, 88, 44)',
color: 'rgb(255, 255, 255)',
borderBottomWidth: '4px',
marginTop: '0px',
fontWeight: '700',
height: 45,
});
expect(await pointerDownStyle(autoRefreshSelector)).toMatchObject({
backgroundColor: 'rgb(0, 88, 44)',
borderBottomWidth: '2px',
marginTop: '2px',
height: 43,
});
await persistArtifact(page, `${basePath.slice(1)}-mobile-bottom-ref-buttons`);
});
test('real mobile devices initially fit the complete 500px game canvas', async ({ browser }, testInfo) => {
test.setTimeout(60_000);
const configuredBaseUrl = testInfo.project.use.baseURL;
@@ -1629,7 +1735,10 @@ test('mobile single document refreshes once and preserves tokens on lobby return
await autoRefresh.focus();
await expect(autoRefresh).toBeFocused();
await autoRefresh.hover();
await expect(autoRefresh).toHaveCSS('filter', 'brightness(1.14)');
await expect(autoRefresh).toHaveCSS('filter', 'none');
await expect(autoRefresh).toHaveCSS('background-color', 'rgb(0, 88, 44)');
await expect(autoRefresh).toHaveCSS('border-bottom-width', '3px');
await expect(autoRefresh).toHaveCSS('margin-top', '1px');
await autoRefresh.click();
const disabledAutoRefresh = page.getByRole('button', { name: '자동 갱신 OFF' });
await expect(disabledAutoRefresh).toHaveAttribute('aria-pressed', 'false');
app/game-frontend/src/components/main/MainMobileBottomBar.vue
+75 -9
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { legacyNationTextColor } from '../../utils/legacyNationColor';
import MainNavigationLink from './MainNavigationLink.vue';
import {
buildGlobalNavigation,
@@ -31,6 +32,8 @@ const emit = defineEmits<{
const { setRoot, openId, close, toggle } = useMenuPopup();
const globalEntries = computed(() => buildGlobalNavigation(props.npcMode));
const nationMenuColor = computed(() => props.nationColor || '#000000');
const nationMenuTextColor = computed(() => legacyNationTextColor(nationMenuColor.value));
const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props.tournamentStage;
const onQuick = (item: QuickNavigationItem) => {
@@ -43,12 +46,15 @@ const onQuick = (item: QuickNavigationItem) => {
<nav
:ref="setRoot"
class="main-mobile-bottom"
:style="{ '--nation-menu-color': nationColor || '#000000' }"
:style="{
'--nation-menu-color': nationMenuColor,
'--nation-menu-text-color': nationMenuTextColor,
}"
aria-label="모바일 빠른 메뉴"
>
<div class="bottom-item">
<button
class="bottom-trigger"
class="bottom-trigger ref-navigation-button"
type="button"
data-bottom-menu="global"
:aria-expanded="openId === 'global'"
@@ -185,7 +191,12 @@ const onQuick = (item: QuickNavigationItem) => {
</li>
</template>
<li class="bottom-lobby" role="none">
<button class="quick-link lobby-link" type="button" role="menuitem" @click="emit('lobby')">
<button
class="quick-link lobby-link ref-navigation-button"
type="button"
role="menuitem"
@click="emit('lobby')"
>
로비로
</button>
</li>
@@ -194,7 +205,7 @@ const onQuick = (item: QuickNavigationItem) => {
<div class="bottom-refresh-controls">
<button
class="bottom-trigger auto-refresh-trigger"
class="bottom-trigger auto-refresh-trigger ref-navigation-button"
:class="{ active: realtimeEnabled }"
type="button"
data-bottom-menu="auto-refresh"
@@ -270,6 +281,7 @@ const onQuick = (item: QuickNavigationItem) => {
.nation-trigger {
border-color: color-mix(in srgb, var(--nation-menu-color) 85%, #000);
background: var(--nation-menu-color);
color: var(--nation-menu-text-color);
}
.quick-trigger {
@@ -292,10 +304,6 @@ const onQuick = (item: QuickNavigationItem) => {
line-height: 1;
}
.auto-refresh-trigger.active {
background-color: #164f2c;
}
.auto-refresh-trigger.active strong {
color: #9ef0b8;
}
@@ -323,6 +331,43 @@ const onQuick = (item: QuickNavigationItem) => {
filter: brightness(0.82);
}
/*
* Ref's btn-sammo-base2 is a Lumen-style navigation button. Its lower edge
* shortens while the control moves down, so hover and pointer-down visibly
* feel pressed instead of only changing brightness.
*/
.ref-navigation-button {
border-color: var(--sammo-button-navigation-border);
border-style: solid;
border-width: 0 1px 4px;
background: var(--sammo-button-navigation-bg);
color: #fff;
font-weight: 700;
transition:
color 0.15s,
background-color 0.15s,
border-color 0.15s,
box-shadow 0.15s;
}
.bottom-trigger.ref-navigation-button:hover,
.bottom-trigger.ref-navigation-button:focus-visible,
.bottom-trigger.ref-navigation-button[aria-expanded='true'] {
height: 44px;
margin-top: 1px;
border-bottom-width: 3px;
background: var(--sammo-button-navigation-bg);
filter: none;
}
.bottom-trigger.ref-navigation-button:active {
height: 43px;
margin-top: 2px;
border-bottom-width: 2px;
background: var(--sammo-button-navigation-bg);
filter: none;
}
.dropup-caret {
display: inline-block;
margin-left: 4px;
@@ -413,8 +458,29 @@ const onQuick = (item: QuickNavigationItem) => {
}
.lobby-link {
width: auto;
justify-content: center;
background: #302016 var(--sammo-texture-walnut);
margin-right: auto;
margin-left: auto;
border-color: var(--sammo-button-navigation-border);
border-style: solid;
border-width: 0 1px 4px;
border-radius: 6px;
padding: 6px 12px;
background: var(--sammo-button-navigation-bg);
}
.lobby-link:hover,
.lobby-link:focus-visible {
margin-top: 1px;
border-bottom-width: 3px;
background: var(--sammo-button-navigation-bg);
}
.lobby-link:active {
margin-top: 2px;
border-bottom-width: 2px;
background: var(--sammo-button-navigation-bg);
}
@media (max-width: 939.98px) {