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

fix(game-ui): CR 테마에 맞춰 도시 배경 크기 조정

Browse Source
This commit is contained in:
Hide_D
2026-08-29 04:36:49 +00:00
parent 95d5246d4b
commit 23678df9de
2 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/components/main/MapCityDetail.vue
+14 -4
View File
@@ -40,6 +40,7 @@ const DETAIL_SIZES: DetailSize[] = [
{ bgWidth: 84, bgHeight: 60, iconWidth: 28, iconHeight: 20, 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 }, { bgWidth: 96, bgHeight: 72, iconWidth: 32, iconHeight: 24, flagRight: -6, flagTop: -3 },
]; ];
const CR_GRID_TILE_SIZE = 40.5;
const props = defineProps<{ const props = defineProps<{
city: MapCityView; city: MapCityView;
@@ -75,6 +76,15 @@ const detailSize = computed(() => {
}; };
}); });
const cityBackgroundSize = computed(() => {
if (props.themeName === 'cr') {
const tileSize = CR_GRID_TILE_SIZE * props.mapScale;
return { bgWidth: tileSize, bgHeight: tileSize };
}
return detailSize.value;
});
const baseSize = computed(() => ({ const baseSize = computed(() => ({
width: 40 * props.mapScale, width: 40 * props.mapScale,
height: 30 * props.mapScale, height: 30 * props.mapScale,
@@ -92,8 +102,8 @@ const cityBgStyle = computed(() => {
return null; return null;
} }
const style: Record<string, string> = { const style: Record<string, string> = {
width: `${detailSize.value.bgWidth}px`, width: `${cityBackgroundSize.value.bgWidth}px`,
height: `${detailSize.value.bgHeight}px`, height: `${cityBackgroundSize.value.bgHeight}px`,
}; };
if (props.themeName === 'cr') { if (props.themeName === 'cr') {
@@ -125,8 +135,8 @@ const capitalIcon = computed(() => buildAssetUrl(props.imageBaseUrl, 'event51.gi
const cityBgWrapperStyle = computed(() => ({ const cityBgWrapperStyle = computed(() => ({
left: '50%', left: '50%',
top: '50%', top: '50%',
marginLeft: `${-detailSize.value.bgWidth / 2}px`, marginLeft: `${-cityBackgroundSize.value.bgWidth / 2}px`,
marginTop: `${-detailSize.value.bgHeight / 2}px`, marginTop: `${-cityBackgroundSize.value.bgHeight / 2}px`,
})); }));
const cityIconStyle = computed(() => ({ const cityIconStyle = computed(() => ({
app/gateway-frontend/src/components/MapPreview.vue
+15 -9
View File
@@ -68,6 +68,7 @@ const BASE_MAP_WIDTH = 700;
const BASE_MAP_HEIGHT = 500; const BASE_MAP_HEIGHT = 500;
const CITY_BASE_WIDTH = 40; const CITY_BASE_WIDTH = 40;
const CITY_BASE_HEIGHT = 30; const CITY_BASE_HEIGHT = 30;
const CR_GRID_TILE_SIZE = 40.5;
const TOOLTIP_MIN_WIDTH = 120; const TOOLTIP_MIN_WIDTH = 120;
const TOOLTIP_CURSOR_OFFSET = 10; const TOOLTIP_CURSOR_OFFSET = 10;
const DETAIL_SIZES: DetailSize[] = [ const DETAIL_SIZES: DetailSize[] = [
@@ -211,15 +212,20 @@ const cityBaseStyle = (city: CityPreview) => ({
width: percentOf(CITY_BASE_WIDTH, BASE_MAP_WIDTH), width: percentOf(CITY_BASE_WIDTH, BASE_MAP_WIDTH),
height: percentOf(CITY_BASE_HEIGHT, BASE_MAP_HEIGHT), height: percentOf(CITY_BASE_HEIGHT, BASE_MAP_HEIGHT),
}); });
const cityBackgroundStyle = (city: CityPreview) => ({ const cityBackgroundStyle = (city: CityPreview) => {
width: percentOf(city.detailSize.bgWidth, CITY_BASE_WIDTH), const isCrTheme = props.mapLayout.mapName === 'cr';
height: percentOf(city.detailSize.bgHeight, CITY_BASE_HEIGHT), const bgWidth = isCrTheme ? CR_GRID_TILE_SIZE : city.detailSize.bgWidth;
backgroundColor: props.mapLayout.mapName === 'cr' ? city.color : undefined, const bgHeight = isCrTheme ? CR_GRID_TILE_SIZE : city.detailSize.bgHeight;
backgroundImage: return {
props.mapLayout.mapName !== 'cr' && city.colorToken width: percentOf(bgWidth, CITY_BASE_WIDTH),
? `url('${assetUrl(`b${city.colorToken}.png`)}')` height: percentOf(bgHeight, CITY_BASE_HEIGHT),
: undefined, backgroundColor: isCrTheme ? city.color : undefined,
}); backgroundImage:
!isCrTheme && city.colorToken
? `url('${assetUrl(`b${city.colorToken}.png`)}')`
: undefined,
};
};
const cityImageStyle = (city: CityPreview) => ({ const cityImageStyle = (city: CityPreview) => ({
width: percentOf(city.detailSize.iconWidth, CITY_BASE_WIDTH), width: percentOf(city.detailSize.iconWidth, CITY_BASE_WIDTH),
height: percentOf(city.detailSize.iconHeight, CITY_BASE_HEIGHT), height: percentOf(city.detailSize.iconHeight, CITY_BASE_HEIGHT),