fix(game-ui): 건국 색상 라벨에 국가색을 표시

색상 선택지와 선택된 라벨에 국가색 배경과 대비 전경색을 적용한다. 실제 Chromium 회귀로 색상 16과 밝은 색, desktop/mobile 표시를 고정한다.
This commit is contained in:
2026-08-19 11:31:04 +00:00
parent 5ae79c7143
commit ce70e8b2b9
2 changed files with 54 additions and 5 deletions
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { computed, reactive, watch, type CSSProperties } from 'vue';
import MapViewer from './MapViewer.vue';
import { commandArgumentPresentation } from '../command/commandArgumentPresentation';
import { legacyNationTextColor } from '../../utils/legacyNationColor';
import type {
CommandInputContext,
CommandInputField,
@@ -105,6 +106,14 @@ const setSelectValue = (field: CommandInputField, rawValue: string) => {
const selectedOptionFor = (field: CommandInputField): CommandOption | undefined =>
optionsFor(field).find((entry) => entry.value === values[field.key]);
const colorOptionStyle = (field: CommandInputField, option?: CommandOption): CSSProperties | undefined => {
if (field.optionSource !== 'colors' || !option?.color) return undefined;
return {
backgroundColor: option.color,
color: legacyNationTextColor(option.color),
};
};
const cityTargetField = computed(() =>
props.fields.find(
(field) =>
@@ -438,9 +447,15 @@ watch(
v-else-if="field.kind === 'select'"
:id="`command-arg-${field.key}`"
:value="String(values[field.key] ?? '')"
:style="colorOptionStyle(field, selectedOptionFor(field))"
@change="setSelectValue(field, ($event.target as HTMLSelectElement).value)"
>
<option v-for="option in optionsFor(field)" :key="String(option.value)" :value="String(option.value)">
<option
v-for="option in optionsFor(field)"
:key="String(option.value)"
:value="String(option.value)"
:style="colorOptionStyle(field, option)"
>
{{ option.label }}
</option>
</select>