diff --git a/app/gateway-frontend/e2e/public-map-tabs.spec.ts b/app/gateway-frontend/e2e/public-map-tabs.spec.ts index b1c82de2..44261a2b 100644 --- a/app/gateway-frontend/e2e/public-map-tabs.spec.ts +++ b/app/gateway-frontend/e2e/public-map-tabs.spec.ts @@ -68,6 +68,22 @@ const fulfill = async (route: Route, results: unknown[]): Promise => { }); }; +const installImageFixture = async (page: Page): Promise | null> => { + if (process.env.SAMMO_E2E_REAL_MAP_ASSETS === '1') { + return null; + } + const requestedAssets = new Set(); + const transparentPixel = Buffer.from( + 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEAQH/69aQ6wAAAABJRU5ErkJggg==', + 'base64' + ); + await page.route('https://sam-image.hided.net/game/**', async (route) => { + requestedAssets.add(new URL(route.request().url()).pathname); + await route.fulfill({ status: 200, contentType: 'image/png', body: transparentPixel }); + }); + return requestedAssets; +}; + const installGatewayFixture = async (page: Page, fixtureProfiles: ProfileFixture[], authenticated: boolean) => { if (authenticated) { await page.addInitScript(() => window.localStorage.setItem('sammo-session-token', 'map-tab-session')); @@ -135,9 +151,31 @@ const installGameFixture = async (page: Page, profile: ProfileFixture, userCnt: myGeneral: null, }); } - if (operation === 'public.getMapLayout') return response({ mapName: profile.profile, cityList: [] }); + if (operation === 'public.getMapLayout') { + return response({ + mapName: 'che', + cityList: [ + { id: 1, name: '낙양', level: 8, region: 2, x: 350, y: 250, path: [2] }, + { id: 2, name: '허창', level: 1, region: 2, x: 480, y: 300, path: [1] }, + ], + regionMap: { 2: '중원' }, + levelMap: { 1: '수', 8: '특' }, + }); + } if (operation === 'public.getCachedMap') { - return response({ year: 200, month: 1, cityList: [], nationList: [], history: [] }); + return response({ + year: 200, + month: 1, + cityList: [ + [1, 8, 41, 1, 2, 1], + [2, 1, 0, 2, 2, 0], + ], + nationList: [ + [1, '위', '#FF0000', 1], + [2, '촉', '#0000FF', 2], + ], + history: [], + }); } throw new Error(`Unhandled ${profile.profile} operation: ${operation}`); }); @@ -146,6 +184,7 @@ const installGameFixture = async (page: Page, profile: ProfileFixture, userCnt: }; test('shows one public map panel and switches it by hover, click, and keyboard', async ({ page }, testInfo) => { + const requestedAssets = await installImageFixture(page); await installGatewayFixture(page, profiles, true); await installGameFixture(page, profiles[0]!, 11); await installGameFixture(page, profiles[1]!, 22); @@ -163,6 +202,57 @@ test('shows one public map panel and switches it by hover, click, and keyboard', await expect(cheTab).toHaveAttribute('aria-selected', 'true'); await expect(panel).toContainText('유저 11 / 500'); + const roadLayer = panel.getByTestId('map-preview-road'); + const castles = panel.getByTestId('map-preview-castle'); + const nationBackgrounds = panel.getByTestId('map-preview-city-background'); + await expect(panel.locator('.map-preview')).toHaveClass(/map-preview-detail/); + await expect(roadLayer).toBeVisible(); + await expect(roadLayer).toHaveCSS('background-image', /map\/che\/che_road\.png/); + await expect(castles).toHaveCount(2); + await expect(castles.nth(0)).toHaveAttribute('src', /\/game\/cast_8\.gif$/); + await expect(castles.nth(1)).toHaveAttribute('src', /\/game\/cast_1\.gif$/); + await expect(nationBackgrounds).toHaveCount(2); + await expect(nationBackgrounds.nth(0)).toHaveCSS('background-image', /\/game\/bFF0000\.png/); + const mapGeometry = await panel.locator('.map-preview-body').evaluate((mapBody) => { + const rectOf = (element: Element | null) => { + if (!element) throw new Error('expected map preview element'); + const rect = element.getBoundingClientRect(); + return { width: rect.width, height: rect.height }; + }; + return { + body: rectOf(mapBody), + road: rectOf(mapBody.querySelector('[data-testid="map-preview-road"]')), + largeCastle: rectOf(mapBody.querySelector('[data-testid="map-preview-castle"]')), + largeNationBackground: rectOf( + mapBody.querySelector('[data-testid="map-preview-city-background"]') + ), + }; + }); + expect(mapGeometry).toEqual({ + body: { width: 700, height: 500 }, + road: { width: 700, height: 500 }, + largeCastle: { width: 32, height: 24 }, + largeNationBackground: { width: 96, height: 72 }, + }); + if (requestedAssets) { + await expect.poll(() => requestedAssets.has('/game/map/che/che_road.png')).toBe(true); + await expect.poll(() => requestedAssets.has('/game/cast_8.gif')).toBe(true); + await expect.poll(() => requestedAssets.has('/game/fFF0000.gif')).toBe(true); + } else { + await expect.poll(() => castles.nth(0).evaluate((image: HTMLImageElement) => image.naturalWidth)).toBe(32); + await expect.poll(() => castles.nth(1).evaluate((image: HTMLImageElement) => image.naturalWidth)).toBe(16); + await expect + .poll(() => + page.evaluate(async () => { + const image = new Image(); + image.src = 'https://sam-image.hided.net/game/map/che/che_road.png'; + await image.decode(); + return [image.naturalWidth, image.naturalHeight]; + }) + ) + .toEqual([700, 500]); + } + await hweTab.hover(); await expect(hweTab).toHaveAttribute('aria-selected', 'true'); await expect(panel).toContainText('유저 22 / 500'); @@ -189,7 +279,7 @@ test('shows one public map panel and switches it by hover, click, and keyboard', expect(geometry.backgroundColor).toBe('rgba(9, 9, 11, 0.498)'); await page.screenshot({ path: testInfo.outputPath('public-map-tabs-desktop.png'), fullPage: true }); await testInfo.attach('public-map-tabs-desktop-geometry', { - body: Buffer.from(`${JSON.stringify(geometry, null, 2)}\n`), + body: Buffer.from(`${JSON.stringify({ panel: geometry, map: mapGeometry }, null, 2)}\n`), contentType: 'application/json', }); }); @@ -209,7 +299,14 @@ test.describe('touch navigation', () => { expect(box?.height).toBeGreaterThanOrEqual(34); await hweTab.tap(); await expect(hweTab).toHaveAttribute('aria-selected', 'true'); - await expect(page.getByTestId('public-map-preview-panel')).toContainText('유저 22 / 500'); + const panel = page.getByTestId('public-map-preview-panel'); + await expect(panel).toContainText('유저 22 / 500'); + await expect(panel.getByTestId('map-preview-road')).toBeVisible(); + await expect(panel.getByTestId('map-preview-castle')).toHaveCount(2); + const mapBox = await panel.locator('.map-preview-body').boundingBox(); + expect(mapBox?.width).toBeGreaterThan(280); + expect(mapBox?.width).toBeLessThanOrEqual(366); + expect(mapBox?.height).toBeCloseTo((mapBox?.width ?? 0) * (5 / 7), 0); await page.screenshot({ path: testInfo.outputPath('public-map-tabs-mobile.png'), fullPage: true }); }); }); diff --git a/app/gateway-frontend/src/components/MapPreview.vue b/app/gateway-frontend/src/components/MapPreview.vue index 27a6e02d..419db26f 100644 --- a/app/gateway-frontend/src/components/MapPreview.vue +++ b/app/gateway-frontend/src/components/MapPreview.vue @@ -24,24 +24,75 @@ interface MapLayout { cityList: MapLayoutCity[]; } -interface CityDot { +type DetailSize = { + bgWidth: number; + bgHeight: number; + iconWidth: number; + iconHeight: number; + flagRight: number; + flagTop: number; +}; + +interface CityPreview { id: number; name: string; + level: number; + state: number; + nationId: number; + color: string; + colorToken: string | null; + supply: boolean; + isCapital: boolean; x: number; y: number; - color: string; - isCapital: boolean; + detailSize: DetailSize; } -const props = defineProps<{ - mapData: MapSummary; - mapLayout: MapLayout; -}>(); +const props = withDefaults( + defineProps<{ + mapData: MapSummary; + mapLayout: MapLayout; + mode?: 'basic' | 'detail'; + }>(), + { + mode: 'detail', + } +); const BASE_MAP_WIDTH = 700; const BASE_MAP_HEIGHT = 500; +const CITY_BASE_WIDTH = 40; +const CITY_BASE_HEIGHT = 30; +const DETAIL_SIZES: DetailSize[] = [ + { bgWidth: 48, bgHeight: 45, iconWidth: 16, iconHeight: 15, flagRight: -8, flagTop: -4 }, + { bgWidth: 60, bgHeight: 42, iconWidth: 20, iconHeight: 14, flagRight: -8, flagTop: -4 }, + { bgWidth: 42, bgHeight: 42, iconWidth: 14, iconHeight: 14, flagRight: -8, flagTop: -4 }, + { bgWidth: 60, bgHeight: 45, iconWidth: 20, iconHeight: 15, flagRight: -6, flagTop: -3 }, + { bgWidth: 72, bgHeight: 48, iconWidth: 24, iconHeight: 16, flagRight: -6, flagTop: -4 }, + { bgWidth: 78, bgHeight: 54, iconWidth: 26, iconHeight: 18, flagRight: -6, flagTop: -4 }, + { bgWidth: 84, bgHeight: 60, iconWidth: 28, iconHeight: 20, flagRight: -6, flagTop: -4 }, + { bgWidth: 96, bgHeight: 72, iconWidth: 32, iconHeight: 24, flagRight: -6, flagTop: -3 }, +]; +const BASIC_SIZES: ReadonlyArray = [ + [12, 12], + [12, 12], + [14, 14], + [16, 14], + [18, 16], + [20, 16], + [22, 18], + [24, 18], +]; const assetBase = computed(configuredGameAssetUrl); +const assetUrl = (path: string): string => `${assetBase.value}/${path.replace(/^\/+/, '')}`; +const normalizeColorToken = (color: string): string | null => { + const token = color.trim().replace(/^#/, '').toUpperCase(); + return token || null; +}; +const clampedLevelIndex = (level: number): number => Math.min(Math.max(level, 1), DETAIL_SIZES.length) - 1; +const percentOf = (value: number, total: number): string => `${(value / total) * 100}%`; + const season = computed(() => { if (props.mapData.month <= 3) return 'spring'; if (props.mapData.month <= 6) return 'summer'; @@ -50,67 +101,194 @@ const season = computed(() => { }); const mapBackground = computed(() => { const theme = props.mapLayout.mapName; - if (theme === 'ludo_rathowm') return `${assetBase.value}/map/ludo_rathowm/back.jpg`; - if (theme === 'chess') return `${assetBase.value}/map/chess/chessboard.png`; - if (theme === 'pokemon_v1') return `${assetBase.value}/map/pokemon_v1/back_pal8.png`; - if (theme === 'cr') return `${assetBase.value}/map/cr/bg-fs8.png`; - return `${assetBase.value}/map/che/bg_${season.value}.jpg`; + if (theme === 'ludo_rathowm') return assetUrl('map/ludo_rathowm/back.jpg'); + if (theme === 'chess') return assetUrl('map/chess/chessboard.png'); + if (theme === 'pokemon_v1') return assetUrl('map/pokemon_v1/back_pal8.png'); + if (theme === 'cr') return assetUrl('map/cr/bg-fs8.png'); + return assetUrl(`map/che/bg_${season.value}.jpg`); +}); +const mapRoad = computed(() => { + const theme = props.mapLayout.mapName; + if (theme === 'che') return assetUrl('map/che/che_road.png'); + if (theme === 'miniche' || theme === 'miniche_b' || theme === 'miniche_clean') { + return assetUrl('map/che/miniche_road.png'); + } + if (theme === 'ludo_rathowm') return assetUrl('map/ludo_rathowm/road.png'); + return null; }); const nationById = computed(() => { - const map = new Map(); - for (const nation of props.mapData.nationList) { - const [id, name, color, capitalCityId] = nation; - map.set(id, { - name, - color, - capitalCityId, - }); + const map = new Map(); + for (const [id, , color, capitalCityId] of props.mapData.nationList) { + map.set(id, { color, capitalCityId }); } return map; }); const dynamicCityById = computed(() => { const map = new Map(); - for (const entry of props.mapData.cityList) { - const [id, level, state, nationId, region, supplyFlag] = entry; + for (const [id, level, state, nationId, region, supplyFlag] of props.mapData.cityList) { map.set(id, [level, state, nationId, region, supplyFlag]); } return map; }); -const cityDots = computed(() => { - return props.mapLayout.cityList.map((layoutCity) => { +const cities = computed(() => + props.mapLayout.cityList.map((layoutCity) => { const dynamic = dynamicCityById.value.get(layoutCity.id); - const [, , nationId = 0] = dynamic ?? []; + const [level = layoutCity.level, state = 0, nationId = 0, , supplyFlag = 0] = dynamic ?? []; const nation = nationById.value.get(nationId); + const color = nation?.color ?? '#ffffff'; return { id: layoutCity.id, name: layoutCity.name, - x: (layoutCity.x / BASE_MAP_WIDTH) * 100, - y: (layoutCity.y / BASE_MAP_HEIGHT) * 100, - color: nation?.color ?? '#666666', + level, + state, + nationId, + color, + colorToken: normalizeColorToken(color), + supply: supplyFlag > 0, isCapital: nation?.capitalCityId === layoutCity.id, + x: layoutCity.x, + y: layoutCity.y, + detailSize: DETAIL_SIZES[clampedLevelIndex(level)]!, }; - }); + }) +); + +const cityBaseStyle = (city: CityPreview) => ({ + left: percentOf(city.x, BASE_MAP_WIDTH), + top: percentOf(city.y, BASE_MAP_HEIGHT), + width: percentOf(CITY_BASE_WIDTH, BASE_MAP_WIDTH), + height: percentOf(CITY_BASE_HEIGHT, BASE_MAP_HEIGHT), }); +const cityBackgroundStyle = (city: CityPreview) => ({ + width: percentOf(city.detailSize.bgWidth, CITY_BASE_WIDTH), + height: percentOf(city.detailSize.bgHeight, CITY_BASE_HEIGHT), + backgroundColor: props.mapLayout.mapName === 'cr' ? city.color : undefined, + backgroundImage: + props.mapLayout.mapName !== 'cr' && city.colorToken + ? `url('${assetUrl(`b${city.colorToken}.png`)}')` + : undefined, +}); +const cityImageStyle = (city: CityPreview) => ({ + width: percentOf(city.detailSize.iconWidth, CITY_BASE_WIDTH), + height: percentOf(city.detailSize.iconHeight, CITY_BASE_HEIGHT), +}); +const flagStyle = (city: CityPreview) => ({ + width: percentOf(12, city.detailSize.iconWidth), + height: percentOf(12, city.detailSize.iconHeight), + right: percentOf(city.detailSize.flagRight, city.detailSize.iconWidth), + top: percentOf(city.detailSize.flagTop, city.detailSize.iconHeight), +}); +const cityNameStyle = (city: CityPreview) => ({ + bottom: percentOf(-10, city.detailSize.iconHeight), +}); +const basicCityStyle = (city: CityPreview) => { + const [width, height] = BASIC_SIZES[clampedLevelIndex(city.level)]!; + return { + width: percentOf(width, CITY_BASE_WIDTH), + height: percentOf(height, CITY_BASE_HEIGHT), + backgroundColor: city.color, + }; +}; +const basicCitySize = (city: CityPreview): readonly [number, number] => BASIC_SIZES[clampedLevelIndex(city.level)]!; +const basicCapitalStyle = (city: CityPreview) => { + const [width, height] = basicCitySize(city); + return { + width: percentOf(5, width), + height: percentOf(5, height), + top: percentOf(-2, height), + right: percentOf(-2, width), + }; +}; +const basicStateStyle = (city: CityPreview) => { + const [width, height] = basicCitySize(city); + return { + width: percentOf(10, width), + height: percentOf(10, height), + top: percentOf(-2, height), + left: percentOf(-4, width), + }; +}; +const basicCityNameStyle = (city: CityPreview) => { + const [, height] = basicCitySize(city); + return { + bottom: percentOf(-10, height), + }; +}; +const stateClass = (state: number): string => { + if (state < 10) return 'state-good'; + if (state < 40) return 'state-bad'; + if (state < 50) return 'state-war'; + return 'state-wrong'; +}; @@ -118,7 +296,8 @@ const cityDots = computed(() => { diff --git a/app/gateway-frontend/src/views/HomeView.vue b/app/gateway-frontend/src/views/HomeView.vue index f02a615a..039e01d4 100644 --- a/app/gateway-frontend/src/views/HomeView.vue +++ b/app/gateway-frontend/src/views/HomeView.vue @@ -182,7 +182,7 @@ const handlePasswordReset = async (): Promise => { {{ dateText }}
- +
{{ statusLoading ? '현황을 불러오는 중…' : statusError }} diff --git a/app/gateway-frontend/src/views/LobbyView.vue b/app/gateway-frontend/src/views/LobbyView.vue index d8de7e73..372e484e 100644 --- a/app/gateway-frontend/src/views/LobbyView.vue +++ b/app/gateway-frontend/src/views/LobbyView.vue @@ -565,6 +565,7 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
유저 {{ profileDetails[selectedMapProfile.profileName]?.userCnt ?? '-' }} /