Merge branch 'main' into feature/command-option-context-20260813
This commit is contained in:
@@ -39,6 +39,13 @@ body {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
/* These redesigned identity/tournament screens own a true handheld layout. */
|
||||
#app:has(.responsive-settings-page),
|
||||
#app:has(#tournament-container),
|
||||
#app:has(#tournament-betting-container) {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
body:has(.battle-page),
|
||||
body:has(.chief-page),
|
||||
body:has(.global-page),
|
||||
|
||||
@@ -168,6 +168,14 @@ const closePicker = () => {
|
||||
quickTarget.value = null;
|
||||
selectedCommand.value = null;
|
||||
};
|
||||
const togglePicker = (turnIndex?: number) => {
|
||||
const target = turnIndex ?? null;
|
||||
if (pickerOpen.value && quickTarget.value === target) {
|
||||
closePicker();
|
||||
return;
|
||||
}
|
||||
openPicker(turnIndex);
|
||||
};
|
||||
const selectCommand = (commandKey: string) => {
|
||||
const command = props.commandTable?.[props.scope]
|
||||
.flatMap((group) => group.values)
|
||||
@@ -332,6 +340,7 @@ const clickOutsideMenu = (event: Event) => {
|
||||
>
|
||||
짝수턴
|
||||
</button>
|
||||
<hr class="menu-divider" />
|
||||
<template v-for="step in [3, 4, 5, 6, 7]" :key="step">
|
||||
<small>{{ step }}턴 간격</small>
|
||||
<div class="step-buttons">
|
||||
@@ -456,6 +465,7 @@ const clickOutsideMenu = (event: Event) => {
|
||||
>
|
||||
붙여넣기
|
||||
</button>
|
||||
<hr class="menu-divider" />
|
||||
<button
|
||||
@click="
|
||||
textCopy();
|
||||
@@ -464,6 +474,7 @@ const clickOutsideMenu = (event: Event) => {
|
||||
>
|
||||
텍스트 복사
|
||||
</button>
|
||||
<hr class="menu-divider" />
|
||||
<button
|
||||
@click="
|
||||
saveTemplate();
|
||||
@@ -480,6 +491,7 @@ const clickOutsideMenu = (event: Event) => {
|
||||
>
|
||||
반복하기
|
||||
</button>
|
||||
<hr class="menu-divider" />
|
||||
<button
|
||||
@click="
|
||||
clearSelection();
|
||||
@@ -506,7 +518,7 @@ const clickOutsideMenu = (event: Event) => {
|
||||
</button>
|
||||
</div>
|
||||
</details>
|
||||
<button type="button" class="select-command" @click="openPicker()">명령 선택 ▾</button>
|
||||
<button type="button" class="select-command" @click="togglePicker()">명령 선택 ▾</button>
|
||||
</div>
|
||||
|
||||
<div class="queue-area">
|
||||
@@ -569,7 +581,7 @@ const clickOutsideMenu = (event: Event) => {
|
||||
:key="row.index"
|
||||
type="button"
|
||||
:aria-label="`${row.index + 1}턴 명령 입력`"
|
||||
@click="openPicker(row.index)"
|
||||
@click="togglePicker(row.index)"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
@@ -737,6 +749,14 @@ const clickOutsideMenu = (event: Event) => {
|
||||
padding: 5px 8px;
|
||||
color: #bbb;
|
||||
}
|
||||
.menu-divider {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
margin: 4px 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #444;
|
||||
opacity: 1;
|
||||
}
|
||||
.step-buttons,
|
||||
.template-row {
|
||||
display: flex;
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import SkeletonLines from '../ui/SkeletonLines.vue';
|
||||
import LegacyProgressBar from '../ui/LegacyProgressBar.vue';
|
||||
import { formatSeoulHourMinute } from '../../utils/legacyDateTime';
|
||||
import { legacyExperiencePercent, ratioPercent } from '../../utils/legacyProgress';
|
||||
import { DEFAULT_GENERAL_ICON_URL, resolveGeneralIconBackgroundImage } from '../../utils/generalIcon';
|
||||
import { configuredGameAssetUrl } from '../../utils/imageAssets';
|
||||
|
||||
interface GeneralStats {
|
||||
leadership: number;
|
||||
@@ -19,9 +22,18 @@ interface GeneralProgression {
|
||||
statUpgradeLimit?: number;
|
||||
}
|
||||
|
||||
interface ItemDisplayNames {
|
||||
horse?: string | null;
|
||||
weapon?: string | null;
|
||||
book?: string | null;
|
||||
item?: string | null;
|
||||
}
|
||||
|
||||
interface GeneralInfo {
|
||||
id: number;
|
||||
name: string;
|
||||
picture?: string | null;
|
||||
imageServer?: number | null;
|
||||
npcState: number;
|
||||
officerLevel: number;
|
||||
officerLevelText: string;
|
||||
@@ -35,17 +47,36 @@ interface GeneralInfo {
|
||||
experience: number;
|
||||
dedication: number;
|
||||
age?: number;
|
||||
turnTime?: string;
|
||||
turnTime?: string | null;
|
||||
troopId?: number;
|
||||
crewTypeId?: number;
|
||||
crewTypeName?: string;
|
||||
traits?: { personal: string; specialWar: string; specialDomestic: string };
|
||||
progression?: GeneralProgression;
|
||||
itemNames?: ItemDisplayNames;
|
||||
equipmentNames?: ItemDisplayNames;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
general: GeneralInfo | null;
|
||||
loading: boolean;
|
||||
}>();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
general: GeneralInfo | null;
|
||||
loading: boolean;
|
||||
nationColor?: string | null;
|
||||
defenceText?: string | null;
|
||||
killTurn?: number | null;
|
||||
remainingMinutes?: number | null;
|
||||
troopText?: string | null;
|
||||
penaltyText?: string | number | null;
|
||||
}>(),
|
||||
{
|
||||
nationColor: '#173d27',
|
||||
defenceText: null,
|
||||
killTurn: null,
|
||||
remainingMinutes: null,
|
||||
troopText: null,
|
||||
penaltyText: null,
|
||||
}
|
||||
);
|
||||
|
||||
const statRows = computed(() => {
|
||||
const general = props.general;
|
||||
@@ -72,137 +103,320 @@ const statRows = computed(() => {
|
||||
const experiencePercent = computed(() =>
|
||||
legacyExperiencePercent(props.general?.experience ?? 0, props.general?.progression?.experienceLevel ?? 0)
|
||||
);
|
||||
|
||||
const itemNames = computed<ItemDisplayNames>(() => props.general?.itemNames ?? props.general?.equipmentNames ?? {});
|
||||
|
||||
const generalIconBackground = computed(() => resolveGeneralIconBackgroundImage(props.general ?? {}));
|
||||
|
||||
const crewTypeIconBackground = computed(() => {
|
||||
const crewTypeId = props.general?.crewTypeId;
|
||||
if (crewTypeId === undefined || !Number.isFinite(crewTypeId)) {
|
||||
return `url(${JSON.stringify(DEFAULT_GENERAL_ICON_URL)})`;
|
||||
}
|
||||
const crewTypeUrl = `${configuredGameAssetUrl()}/crewtype${Math.trunc(crewTypeId)}.png`;
|
||||
return `url(${JSON.stringify(crewTypeUrl)}), url(${JSON.stringify(DEFAULT_GENERAL_ICON_URL)})`;
|
||||
});
|
||||
|
||||
const injuryInfo = computed(() => {
|
||||
const injury = props.general?.injury ?? 0;
|
||||
if (injury > 60) return { text: '위독', color: '#ff4d4f' };
|
||||
if (injury > 40) return { text: '심각', color: '#ff00ff' };
|
||||
if (injury > 20) return { text: '중상', color: '#ff9f1a' };
|
||||
if (injury > 0) return { text: '경상', color: '#ffff00' };
|
||||
return { text: '건강', color: '#ffffff' };
|
||||
});
|
||||
|
||||
const isBrightColor = (color: string): boolean => {
|
||||
const normalized = /^#[0-9a-f]{6}$/iu.test(color) ? color.slice(1) : '173d27';
|
||||
const red = Number.parseInt(normalized.slice(0, 2), 16);
|
||||
const green = Number.parseInt(normalized.slice(2, 4), 16);
|
||||
const blue = Number.parseInt(normalized.slice(4, 6), 16);
|
||||
return (red * 299 + green * 587 + blue * 114) / 1000 >= 150;
|
||||
};
|
||||
|
||||
const titleStyle = computed(() => {
|
||||
const backgroundColor = props.nationColor || '#173d27';
|
||||
return {
|
||||
backgroundColor,
|
||||
color: isBrightColor(backgroundColor) ? '#000000' : '#ffffff',
|
||||
};
|
||||
});
|
||||
|
||||
const ageColor = computed(() => {
|
||||
const age = props.general?.age;
|
||||
if (age === undefined) return '#ffffff';
|
||||
if (age < 53) return '#32cd32';
|
||||
if (age < 70) return '#ffff00';
|
||||
return '#ff4d4f';
|
||||
});
|
||||
|
||||
const displayTroop = computed(() => props.troopText ?? (props.general?.troopId ? String(props.general.troopId) : '-'));
|
||||
const displayPenalty = computed(() => {
|
||||
const penalty = props.penaltyText ?? '-';
|
||||
const dedication = props.general?.progression?.dedicationText ?? '무품관';
|
||||
return `${penalty} · 계급 ${dedication}`;
|
||||
});
|
||||
const displayDefence = computed(() => props.defenceText ?? '-');
|
||||
const specialText = computed(() => {
|
||||
const traits = props.general?.traits;
|
||||
return traits ? `${traits.specialDomestic || '-'} / ${traits.specialWar || '-'}` : '-';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="general-card">
|
||||
<div v-if="props.loading">
|
||||
<div class="general-card" data-general-basic-card>
|
||||
<div v-if="props.loading" class="general-loading">
|
||||
<SkeletonLines :lines="5" />
|
||||
</div>
|
||||
<div v-else-if="!props.general" class="empty">장수 정보를 불러오지 못했습니다.</div>
|
||||
<div v-else class="general-body">
|
||||
<div class="general-title">
|
||||
{{ props.general.name }} · {{ props.general.officerLevelText }} · {{ props.general.age ?? '-' }}세 ·
|
||||
다음 턴
|
||||
{{ props.general.turnTime ? formatSeoulHourMinute(props.general.turnTime) : '-' }}
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="general-basic-grid general-body">
|
||||
<span
|
||||
class="general-image general-icon"
|
||||
role="img"
|
||||
:aria-label="`${props.general.name} 초상`"
|
||||
:style="{ backgroundImage: generalIconBackground }"
|
||||
/>
|
||||
<div class="general-title battle-general-name" :style="titleStyle">
|
||||
{{ props.general.name }} 【 {{ props.general.officerLevelText }} |
|
||||
<span :style="{ color: injuryInfo.color }">{{ injuryInfo.text }}</span> 】 다음 턴
|
||||
{{ props.general.turnTime ? formatSeoulHourMinute(props.general.turnTime) : '-' }}
|
||||
</div>
|
||||
|
||||
<div class="stat-progress-grid">
|
||||
<template v-for="stat of statRows" :key="stat.key">
|
||||
<span class="cell-label">{{ stat.label }}</span>
|
||||
<strong>{{ stat.value }}</strong>
|
||||
<div class="bar-cell" :data-stat-progress="stat.key">
|
||||
<LegacyProgressBar
|
||||
:percent="stat.percent"
|
||||
:label="`${stat.label} 성장 ${stat.accumulated} / ${stat.limit}`"
|
||||
/>
|
||||
</div>
|
||||
<strong class="stat-value">
|
||||
<span>{{ stat.value }}</span>
|
||||
<span class="bar-cell" :data-stat-progress="stat.key">
|
||||
<LegacyProgressBar
|
||||
:percent="stat.percent"
|
||||
:label="`${stat.label} 성장 ${stat.accumulated} / ${stat.limit}`"
|
||||
/>
|
||||
</span>
|
||||
</strong>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="legacy-grid">
|
||||
<span>자금</span><strong>{{ props.general.gold.toLocaleString() }}</strong> <span>군량</span
|
||||
><strong>{{ props.general.rice.toLocaleString() }}</strong> <span>병력</span
|
||||
><strong>{{ props.general.crew.toLocaleString() }}</strong> <span>훈련</span
|
||||
><strong>{{ props.general.train }}</strong> <span>사기</span><strong>{{ props.general.atmos }}</strong>
|
||||
<span>부상</span><strong>{{ props.general.injury }}</strong> <span>병종</span
|
||||
><strong>{{ props.general.crewTypeName ?? '-' }}</strong> <span>성격</span
|
||||
><strong>{{ props.general.traits?.personal ?? '-' }}</strong> <span>전투특기</span
|
||||
><strong>{{ props.general.traits?.specialWar ?? '-' }}</strong> <span>내정특기</span
|
||||
><strong>{{ props.general.traits?.specialDomestic ?? '-' }}</strong> <span>계급</span
|
||||
><strong>{{ props.general.progression?.dedicationText ?? '무품관' }}</strong> <span>공헌</span
|
||||
><strong>{{ props.general.dedication.toLocaleString() }}</strong>
|
||||
</div>
|
||||
<span class="cell-label">명마</span><strong>{{ itemNames.horse ?? '-' }}</strong>
|
||||
<span class="cell-label">무기</span><strong>{{ itemNames.weapon ?? '-' }}</strong>
|
||||
<span class="cell-label">서적</span><strong>{{ itemNames.book ?? '-' }}</strong>
|
||||
|
||||
<div class="experience-row">
|
||||
<span class="cell-label">Lv</span>
|
||||
<strong>{{ props.general.progression?.experienceLevel ?? 0 }}</strong>
|
||||
<div class="bar-cell" data-experience-progress>
|
||||
<span
|
||||
class="general-image general-crew-type-icon"
|
||||
role="img"
|
||||
:aria-label="`${props.general.crewTypeName ?? '병종'} 이미지`"
|
||||
:style="{ backgroundImage: crewTypeIconBackground }"
|
||||
/>
|
||||
<span class="cell-label">자금</span><strong>{{ props.general.gold.toLocaleString('ko-KR') }}</strong>
|
||||
<span class="cell-label">군량</span><strong>{{ props.general.rice.toLocaleString('ko-KR') }}</strong>
|
||||
<span class="cell-label">도구</span><strong>{{ itemNames.item ?? '-' }}</strong>
|
||||
|
||||
<span class="cell-label">병종</span><strong>{{ props.general.crewTypeName ?? '-' }}</strong>
|
||||
<span class="cell-label">병사</span><strong>{{ props.general.crew.toLocaleString('ko-KR') }}</strong>
|
||||
<span class="cell-label">성격</span><strong>{{ props.general.traits?.personal ?? '-' }}</strong>
|
||||
|
||||
<span class="cell-label">훈련</span><strong>{{ props.general.train }}</strong>
|
||||
<span class="cell-label">사기</span><strong>{{ props.general.atmos }}</strong>
|
||||
<span class="cell-label">특기</span><strong :title="specialText">{{ specialText }}</strong>
|
||||
|
||||
<span class="cell-label level-label">Lv</span>
|
||||
<strong class="level-value">{{ props.general.progression?.experienceLevel ?? 0 }}</strong>
|
||||
<span class="experience-bar" data-experience-progress>
|
||||
<LegacyProgressBar
|
||||
:percent="experiencePercent"
|
||||
:label="`경험 레벨 진행 ${experiencePercent.toFixed(1)}%`"
|
||||
/>
|
||||
</div>
|
||||
<span class="experience-total">명성 {{ props.general.experience.toLocaleString() }}</span>
|
||||
</span>
|
||||
<span class="cell-label age-label">연령</span>
|
||||
<strong class="age-value" :style="{ color: ageColor }">{{ props.general.age ?? '-' }}세</strong>
|
||||
|
||||
<span class="cell-label defence-label">수비</span>
|
||||
<strong class="defence-value">{{ displayDefence }}</strong>
|
||||
<span class="cell-label kill-label">삭턴</span>
|
||||
<strong class="kill-value">{{ props.killTurn === null ? '-' : `${props.killTurn} 턴` }}</strong>
|
||||
<span class="cell-label execute-label">실행</span>
|
||||
<strong class="execute-value">{{
|
||||
props.remainingMinutes === null ? '-' : `${props.remainingMinutes}분 남음`
|
||||
}}</strong>
|
||||
|
||||
<span class="cell-label troop-label">부대</span>
|
||||
<strong class="troop-value">{{ displayTroop }}</strong>
|
||||
<span class="cell-label penalty-label">벌점</span>
|
||||
<strong class="penalty-value">{{ displayPenalty }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="details" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.general-title {
|
||||
.general-card {
|
||||
box-sizing: border-box;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
padding: 1px 6px;
|
||||
border-bottom: 1px solid #777;
|
||||
background: #173d27;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat-progress-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(30px, 1fr) minmax(34px, 1fr) 45px);
|
||||
grid-auto-rows: 21px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stat-progress-grid > *,
|
||||
.legacy-grid > * {
|
||||
box-sizing: border-box;
|
||||
height: 21px;
|
||||
min-height: 0;
|
||||
border-right: 1px solid #666;
|
||||
border-bottom: 1px solid #666;
|
||||
padding: 2px 4px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
background-color: #172a52;
|
||||
background-image: var(--sammo-texture-blue);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.general-basic-grid {
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-columns: 64px repeat(3, minmax(30px, 2fr) minmax(60px, 5fr));
|
||||
grid-template-rows: repeat(9, calc(64px / 3));
|
||||
border-right: 1px solid #777;
|
||||
border-bottom: 1px solid #777;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.general-basic-grid > * {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border-top: 1px solid #777;
|
||||
border-left: 1px solid #777;
|
||||
padding: 1px 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell-label,
|
||||
.legacy-grid > span {
|
||||
background: rgb(20 75 42 / 70%);
|
||||
.general-basic-grid > strong {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-progress-grid > strong,
|
||||
.legacy-grid > strong {
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
.cell-label {
|
||||
background-color: rgb(20 75 42 / 70%);
|
||||
}
|
||||
|
||||
.bar-cell {
|
||||
.general-image {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
padding: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.general-icon {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 4;
|
||||
}
|
||||
|
||||
.general-title {
|
||||
grid-column: 2 / 8;
|
||||
grid-row: 1;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(22px, auto) minmax(26px, 1fr);
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.bar-cell,
|
||||
.experience-bar {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.legacy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-auto-rows: 21px;
|
||||
font-size: 12px;
|
||||
.general-crew-type-icon {
|
||||
grid-column: 1;
|
||||
grid-row: 4 / 7;
|
||||
}
|
||||
|
||||
.experience-row {
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
grid-template-columns: 32px 38px minmax(120px, 1fr) 112px;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
border-bottom: 1px solid #666;
|
||||
font-size: 12px;
|
||||
.level-label {
|
||||
grid-column: 1;
|
||||
grid-row: 7;
|
||||
}
|
||||
|
||||
.experience-row > * {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #666;
|
||||
padding: 1px 4px;
|
||||
text-align: center;
|
||||
.level-value {
|
||||
grid-column: 2;
|
||||
grid-row: 7;
|
||||
}
|
||||
|
||||
.experience-bar {
|
||||
grid-column: 3 / 6;
|
||||
grid-row: 7;
|
||||
}
|
||||
|
||||
.age-label {
|
||||
grid-column: 6;
|
||||
grid-row: 7;
|
||||
}
|
||||
|
||||
.age-value {
|
||||
grid-column: 7;
|
||||
grid-row: 7;
|
||||
}
|
||||
|
||||
.defence-label {
|
||||
grid-column: 1;
|
||||
grid-row: 8;
|
||||
}
|
||||
|
||||
.defence-value {
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 8;
|
||||
}
|
||||
|
||||
.kill-label {
|
||||
grid-column: 4;
|
||||
grid-row: 8;
|
||||
}
|
||||
|
||||
.kill-value {
|
||||
grid-column: 5;
|
||||
grid-row: 8;
|
||||
}
|
||||
|
||||
.execute-label {
|
||||
grid-column: 6;
|
||||
grid-row: 8;
|
||||
}
|
||||
|
||||
.execute-value {
|
||||
grid-column: 7;
|
||||
grid-row: 8;
|
||||
}
|
||||
|
||||
.troop-label {
|
||||
grid-column: 1;
|
||||
grid-row: 9;
|
||||
}
|
||||
|
||||
.troop-value {
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 9;
|
||||
}
|
||||
|
||||
.penalty-label {
|
||||
grid-column: 4;
|
||||
grid-row: 9;
|
||||
}
|
||||
|
||||
.penalty-value {
|
||||
grid-column: 5 / 8;
|
||||
grid-row: 9;
|
||||
}
|
||||
|
||||
.general-loading,
|
||||
.empty {
|
||||
min-height: 192px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
import { computed } from 'vue';
|
||||
import { resolveTournamentStageName } from '../../utils/tournamentStatus';
|
||||
|
||||
const props = defineProps<{
|
||||
tournamentStage: number;
|
||||
status: {
|
||||
onlineUserCount: number;
|
||||
onlineNations: string;
|
||||
@@ -13,15 +17,24 @@ defineProps<{
|
||||
} | null;
|
||||
} | null;
|
||||
}>();
|
||||
|
||||
const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="front-status" aria-label="접속 현황과 국가 방침">
|
||||
<div class="status-row vote-status">
|
||||
<RouterLink v-if="status?.latestVote" to="/survey">
|
||||
<span class="vote-label">설문 진행 중: </span>{{ status.latestVote.title }}
|
||||
</RouterLink>
|
||||
<span v-else class="vote-empty">진행중인 설문 없음</span>
|
||||
<div class="activity-status" aria-label="설문과 토너먼트 진행 현황">
|
||||
<div class="status-row tournament-status">
|
||||
<RouterLink to="/tournament">
|
||||
<span class="tournament-label">토너먼트: </span>{{ tournamentStatus }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="status-row vote-status">
|
||||
<RouterLink v-if="status?.latestVote" to="/survey">
|
||||
<span class="vote-label">설문: </span>{{ status.latestVote.title }}
|
||||
</RouterLink>
|
||||
<span v-else class="vote-empty">설문: 진행 중인 설문 없음</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-row online-nations">접속중인 국가: {{ status?.onlineNations ?? '' }}</div>
|
||||
<div class="status-row online-users">【 접속자 】 {{ status?.onlineGenerals ?? '' }}</div>
|
||||
@@ -71,19 +84,28 @@ defineProps<{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vote-status {
|
||||
width: 33.333333%;
|
||||
.activity-status {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 66.666667%;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.activity-status .status-row {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vote-status a {
|
||||
.activity-status a {
|
||||
color: #fff;
|
||||
text-decoration: gray underline;
|
||||
}
|
||||
|
||||
.tournament-label {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.vote-label {
|
||||
color: cyan;
|
||||
}
|
||||
@@ -93,8 +115,8 @@ defineProps<{
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.vote-status {
|
||||
width: 50%;
|
||||
.activity-status {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import GeneralIdentity from '../ui/GeneralIdentity.vue';
|
||||
import {
|
||||
buildTournamentBracket,
|
||||
type TournamentBracketMatch,
|
||||
@@ -89,7 +90,12 @@ const odds = (id: number | null) => {
|
||||
:class="{ advanced: bracket.champion.advanced }"
|
||||
:data-general-id="bracket.champion.id ?? undefined"
|
||||
>
|
||||
{{ bracket.champion.name }}
|
||||
<GeneralIdentity
|
||||
:name="bracket.champion.name"
|
||||
:picture="bracket.champion.picture"
|
||||
:image-server="bracket.champion.imageServer"
|
||||
:icon-size="24"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -110,7 +116,12 @@ const odds = (id: number | null) => {
|
||||
:class="{ advanced: slot.advanced }"
|
||||
:data-general-id="slot.id ?? undefined"
|
||||
>
|
||||
{{ slot.name }}
|
||||
<GeneralIdentity
|
||||
:name="slot.name"
|
||||
:picture="slot.picture"
|
||||
:image-server="slot.imageServer"
|
||||
:icon-size="22"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="connector-row" :style="{ '--connector-count': round.slots.length }">
|
||||
@@ -140,7 +151,12 @@ const odds = (id: number | null) => {
|
||||
:class="{ advanced: slot.advanced }"
|
||||
:data-general-id="slot.id ?? undefined"
|
||||
>
|
||||
{{ slot.name }}
|
||||
<GeneralIdentity
|
||||
:name="slot.name"
|
||||
:picture="slot.picture"
|
||||
:image-server="slot.imageServer"
|
||||
:icon-size="20"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bracket-round bracket-odds" :style="roundStyle(bracket.top16)">
|
||||
@@ -183,9 +199,17 @@ const odds = (id: number | null) => {
|
||||
:key="`mobile-${columnIndex}-${slot.id ?? 'empty'}-${slotIndex}`"
|
||||
class="mobile-bracket-name"
|
||||
:class="{ advanced: slot.advanced }"
|
||||
:style="{ left: `${mobileX[columnIndex]}px`, top: `${mobileY(columnIndex, slotIndex)}px` }"
|
||||
:style="{
|
||||
left: `${(mobileX[columnIndex]! / 390) * 100}%`,
|
||||
top: `${mobileY(columnIndex, slotIndex)}px`,
|
||||
}"
|
||||
>
|
||||
{{ slot.name }}
|
||||
<GeneralIdentity
|
||||
:name="slot.name"
|
||||
:picture="slot.picture"
|
||||
:image-server="slot.imageServer"
|
||||
:icon-size="18"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
@@ -210,21 +234,23 @@ const odds = (id: number | null) => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bracket-canvas {
|
||||
width: 2000px;
|
||||
min-width: 2000px;
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mobile-bracket {
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 390px;
|
||||
width: 100%;
|
||||
max-width: 390px;
|
||||
height: 544px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mobile-bracket svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 390px;
|
||||
width: 100%;
|
||||
height: 544px;
|
||||
}
|
||||
.mobile-connector {
|
||||
@@ -239,14 +265,16 @@ const odds = (id: number | null) => {
|
||||
.mobile-bracket-name {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 64px;
|
||||
width: clamp(58px, 18vw, 72px);
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid #555;
|
||||
background: rgb(58 33 24 / 92%);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
min-height: 26px;
|
||||
padding: 2px;
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -265,7 +293,7 @@ const odds = (id: number | null) => {
|
||||
}
|
||||
.bracket-name {
|
||||
overflow: hidden;
|
||||
padding: 0 3px;
|
||||
padding: 2px 3px;
|
||||
color: #fff;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -321,8 +349,8 @@ const odds = (id: number | null) => {
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.tournament-bracket {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.bracket-canvas {
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { resolveGeneralIconUrl, useDefaultGeneralIcon, type GeneralIconSource } from '../../utils/generalIcon';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
name: string;
|
||||
picture?: GeneralIconSource['picture'];
|
||||
imageServer?: GeneralIconSource['imageServer'];
|
||||
iconSize?: number;
|
||||
hideIcon?: boolean;
|
||||
}>(),
|
||||
{
|
||||
picture: null,
|
||||
imageServer: 0,
|
||||
iconSize: 28,
|
||||
hideIcon: false,
|
||||
}
|
||||
);
|
||||
|
||||
const iconUrl = computed(() =>
|
||||
resolveGeneralIconUrl({
|
||||
picture: props.picture,
|
||||
imageServer: props.imageServer,
|
||||
})
|
||||
);
|
||||
const identityStyle = computed(() => ({ '--general-identity-icon-size': `${props.iconSize}px` }));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="general-identity" :style="identityStyle">
|
||||
<img
|
||||
v-if="!hideIcon && name !== '-'"
|
||||
class="general-identity-icon"
|
||||
:src="iconUrl"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
@error="useDefaultGeneralIcon"
|
||||
/>
|
||||
<span class="general-identity-name">{{ name }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.general-identity {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.general-identity-icon {
|
||||
width: var(--general-identity-icon-size);
|
||||
height: var(--general-identity-icon-size);
|
||||
flex: 0 0 var(--general-identity-icon-size);
|
||||
border: 1px solid rgb(255 255 255 / 28%);
|
||||
background: #111;
|
||||
object-fit: cover;
|
||||
}
|
||||
.general-identity-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -15,7 +15,9 @@ type GeneralProgress = {
|
||||
};
|
||||
};
|
||||
|
||||
const props = defineProps<{ general: GeneralProgress }>();
|
||||
const props = withDefaults(defineProps<{ general: GeneralProgress; showPrimary?: boolean }>(), {
|
||||
showPrimary: true,
|
||||
});
|
||||
|
||||
const statRows = computed(() =>
|
||||
[
|
||||
@@ -50,7 +52,7 @@ const experiencePercent = computed(() =>
|
||||
|
||||
<template>
|
||||
<div class="legacy-general-progress">
|
||||
<div class="stat-grid">
|
||||
<div v-if="props.showPrimary" class="stat-grid">
|
||||
<template v-for="stat of statRows" :key="stat.key">
|
||||
<span class="cell-label">{{ stat.label }}</span>
|
||||
<strong>{{ stat.value }}</strong>
|
||||
@@ -60,7 +62,7 @@ const experiencePercent = computed(() =>
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="experience-row">
|
||||
<div v-if="props.showPrimary" class="experience-row">
|
||||
<span class="cell-label">Lv</span>
|
||||
<strong>{{ props.general.progression.experienceLevel }}</strong>
|
||||
<LegacyProgressBar
|
||||
|
||||
@@ -1,24 +1,6 @@
|
||||
const KOREA_TIME_OFFSET_MS = 9 * 60 * 60 * 1000;
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
|
||||
const pad = (value: number): string => String(value).padStart(2, '0');
|
||||
export const formatSeoulDateTime = (value: string | Date): string => formatServerDateTime(value);
|
||||
|
||||
export const formatSeoulDateTime = (value: string | Date): string => {
|
||||
if (
|
||||
typeof value === 'string' &&
|
||||
!/(?:Z|[+-]\d{2}:?\d{2})$/i.test(value.trim())
|
||||
) {
|
||||
return value.trim().replace('T', ' ').slice(0, 19);
|
||||
}
|
||||
const date = value instanceof Date ? value : new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return typeof value === 'string' ? value.slice(0, 19) : '';
|
||||
}
|
||||
const koreaTime = new Date(date.getTime() + KOREA_TIME_OFFSET_MS);
|
||||
return `${koreaTime.getUTCFullYear()}-${pad(koreaTime.getUTCMonth() + 1)}-${pad(
|
||||
koreaTime.getUTCDate()
|
||||
)} ${pad(koreaTime.getUTCHours())}:${pad(koreaTime.getUTCMinutes())}:${pad(
|
||||
koreaTime.getUTCSeconds()
|
||||
)}`;
|
||||
};
|
||||
|
||||
export const formatSeoulHourMinute = (value: string | Date): string => formatSeoulDateTime(value).slice(11, 16);
|
||||
export const formatSeoulHourMinute = (value: string | Date): string =>
|
||||
formatServerDateTime(value, { format: 'hourMinute' });
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
export interface TournamentBracketParticipant {
|
||||
id: number;
|
||||
name: string;
|
||||
picture?: string | null;
|
||||
imageServer?: number | null;
|
||||
}
|
||||
|
||||
export interface TournamentBracketMatch {
|
||||
@@ -15,6 +17,8 @@ export interface TournamentBracketMatch {
|
||||
export interface TournamentBracketSlot {
|
||||
id: number | null;
|
||||
name: string;
|
||||
picture: string | null;
|
||||
imageServer: number;
|
||||
advanced: boolean;
|
||||
}
|
||||
|
||||
@@ -31,7 +35,13 @@ export interface TournamentBracketModel {
|
||||
top16: TournamentBracketRound;
|
||||
}
|
||||
|
||||
const emptySlot = (): TournamentBracketSlot => ({ id: null, name: '-', advanced: false });
|
||||
const emptySlot = (): TournamentBracketSlot => ({
|
||||
id: null,
|
||||
name: '-',
|
||||
picture: null,
|
||||
imageServer: 0,
|
||||
advanced: false,
|
||||
});
|
||||
|
||||
export const buildTournamentBracket = (
|
||||
participants: TournamentBracketParticipant[],
|
||||
@@ -39,19 +49,24 @@ export const buildTournamentBracket = (
|
||||
winnerId?: number
|
||||
): TournamentBracketModel => {
|
||||
const participantsById = new Map(participants.map((participant) => [participant.id, participant]));
|
||||
const nameOf = (id: number | null): string =>
|
||||
id === null ? '-' : (participantsById.get(id)?.name ?? `#${id}`);
|
||||
const participantOf = (id: number | null): TournamentBracketParticipant | null =>
|
||||
id === null ? null : (participantsById.get(id) ?? { id, name: `#${id}` });
|
||||
|
||||
const buildRound = (stage: number, slotCount: number): TournamentBracketRound => {
|
||||
const roundMatches = matches
|
||||
.filter((match) => match.stage === stage)
|
||||
.sort((lhs, rhs) => lhs.roundIndex - rhs.roundIndex || lhs.id - rhs.id);
|
||||
const slots: TournamentBracketSlot[] = roundMatches.flatMap((match) =>
|
||||
[match.attackerId, match.defenderId].map((id) => ({
|
||||
id,
|
||||
name: nameOf(id),
|
||||
advanced: match.winnerId === id,
|
||||
}))
|
||||
[match.attackerId, match.defenderId].map((id) => {
|
||||
const participant = participantOf(id);
|
||||
return {
|
||||
id,
|
||||
name: participant?.name ?? '-',
|
||||
picture: participant?.picture ?? null,
|
||||
imageServer: participant?.imageServer ?? 0,
|
||||
advanced: match.winnerId === id,
|
||||
};
|
||||
})
|
||||
);
|
||||
while (slots.length < slotCount) {
|
||||
slots.push(emptySlot());
|
||||
@@ -65,7 +80,9 @@ export const buildTournamentBracket = (
|
||||
return {
|
||||
champion: {
|
||||
id: resolvedWinnerId,
|
||||
name: nameOf(resolvedWinnerId),
|
||||
name: participantOf(resolvedWinnerId)?.name ?? '-',
|
||||
picture: participantOf(resolvedWinnerId)?.picture ?? null,
|
||||
imageServer: participantOf(resolvedWinnerId)?.imageServer ?? 0,
|
||||
advanced: resolvedWinnerId !== null,
|
||||
},
|
||||
final,
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
export const tournamentStageNames = [
|
||||
'경기 없음',
|
||||
'참가 모집중',
|
||||
'예선 진행중',
|
||||
'본선 추첨중',
|
||||
'본선 진행중',
|
||||
'16강 배정중',
|
||||
'베팅 진행중',
|
||||
'16강 진행중',
|
||||
'8강 진행중',
|
||||
'4강 진행중',
|
||||
'결승 진행중',
|
||||
] as const;
|
||||
|
||||
export const resolveTournamentStageName = (stage: number): string => tournamentStageNames[stage] ?? '상태 확인 중';
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
@@ -41,24 +42,10 @@ const formatNumber = (value: number | null | undefined): string => (value ?? 0).
|
||||
const displayCode = (value: string | null | undefined): string =>
|
||||
!value || /^\d+$/u.test(value) ? '-' : value.replace(/^che_(?:event_)?/u, '');
|
||||
const cutDateTime = (value: string | null | undefined, showSecond = false): string => {
|
||||
if (!value) {
|
||||
return '-';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value.slice(5, showSecond ? 19 : 16);
|
||||
}
|
||||
const parts = new Intl.DateTimeFormat('ko-KR', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
...(showSecond ? { second: '2-digit' } : {}),
|
||||
hour12: false,
|
||||
}).formatToParts(date);
|
||||
const part = (type: Intl.DateTimeFormatPartTypes): string =>
|
||||
parts.find((entry) => entry.type === type)?.value ?? '';
|
||||
return `${part('month')}-${part('day')} ${part('hour')}:${part('minute')}${showSecond ? `:${part('second')}` : ''}`;
|
||||
return formatServerDateTime(value, {
|
||||
format: showSecond ? 'monthDayTimeSeconds' : 'monthDayTime',
|
||||
fallback: '-',
|
||||
});
|
||||
};
|
||||
|
||||
const buyRice = computed(() =>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import PanelCard from '../components/ui/PanelCard.vue';
|
||||
import SkeletonLines from '../components/ui/SkeletonLines.vue';
|
||||
import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
|
||||
import GeneralBasicCard from '../components/main/GeneralBasicCard.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
import { getNpcColor } from '../utils/npcColor';
|
||||
import { formatLog } from '../utils/formatLog';
|
||||
import { resolveGeneralIconUrl } from '../utils/generalIcon';
|
||||
|
||||
type BattleCenterResponse = Awaited<ReturnType<typeof trpc.nation.getBattleCenter.query>>;
|
||||
type GeneralEntry = BattleCenterResponse['generals'][number];
|
||||
@@ -126,9 +127,9 @@ const selectedGeneral = computed(() => {
|
||||
|
||||
const formatGeneralLabel = (general: GeneralEntry): string => {
|
||||
const name = general.officerLevel > 4 ? `*${general.name}*` : general.name;
|
||||
const time = general.turnTime ? general.turnTime.slice(-5) : '--:--';
|
||||
const time = formatServerDateTime(general.turnTime, { format: 'hourMinute', fallback: '--:--' });
|
||||
if (orderBy.value === 'recentWar') {
|
||||
return `${name} (${general.recentWar ? general.recentWar.slice(-5) : '--:--'})`;
|
||||
return `${name} (${formatServerDateTime(general.recentWar, { format: 'hourMinute', fallback: '--:--' })})`;
|
||||
}
|
||||
if (orderBy.value === 'warnum') {
|
||||
return `${name} (${general.warnum}회)`;
|
||||
@@ -136,8 +137,6 @@ const formatGeneralLabel = (general: GeneralEntry): string => {
|
||||
return `${name} (${time})`;
|
||||
};
|
||||
|
||||
const generalImageUrl = (general: GeneralEntry): string => resolveGeneralIconUrl(general);
|
||||
|
||||
let logRequestId = 0;
|
||||
|
||||
const loadLogs = async (generalId: number) => {
|
||||
@@ -156,7 +155,10 @@ const loadLogs = async (generalId: number) => {
|
||||
}
|
||||
for (const response of responses) {
|
||||
const formatted = response.logs.map((entry) => {
|
||||
const eventTime = response.type === 'generalAction' ? ` ${entry.createdAt.slice(-8, -3)}` : '';
|
||||
const eventTime =
|
||||
response.type === 'generalAction'
|
||||
? ` ${formatServerDateTime(entry.createdAt, { format: 'hourMinute' })}`
|
||||
: '';
|
||||
return {
|
||||
id: entry.id,
|
||||
html: formatLog(`${entry.text}${eventTime}`),
|
||||
@@ -266,49 +268,36 @@ onMounted(() => {
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="장수 정보">
|
||||
<SkeletonLines v-if="loading" :lines="5" />
|
||||
<div v-else-if="selectedGeneral" class="battle-general-card">
|
||||
<div class="battle-general-name">
|
||||
{{ selectedGeneral.name }} ({{ selectedGeneral.officerLevelText }})
|
||||
</div>
|
||||
<span
|
||||
class="battle-general-portrait"
|
||||
role="img"
|
||||
:aria-label="`${selectedGeneral.name} 초상`"
|
||||
:style="{ backgroundImage: `url(${generalImageUrl(selectedGeneral)})` }"
|
||||
/>
|
||||
<div class="battle-general-grid">
|
||||
<span>통솔</span><strong>{{ selectedGeneral.stats.leadership }}</strong> <span>무력</span
|
||||
><strong>{{ selectedGeneral.stats.strength }}</strong> <span>지력</span
|
||||
><strong>{{ selectedGeneral.stats.intelligence }}</strong> <span>자금</span
|
||||
><strong>{{ selectedGeneral.gold }}</strong> <span>군량</span
|
||||
><strong>{{ selectedGeneral.rice }}</strong> <span>병력</span
|
||||
><strong>{{ selectedGeneral.crew }}</strong> <span>훈련</span
|
||||
><strong>{{ selectedGeneral.train }}</strong> <span>사기</span
|
||||
><strong>{{ selectedGeneral.atmos }}</strong> <span>부상</span
|
||||
><strong>{{ selectedGeneral.injury }}</strong> <span>경험</span
|
||||
><strong>{{ selectedGeneral.experience }}</strong> <span>공헌</span
|
||||
><strong>{{ selectedGeneral.dedication }}</strong> <span>전투</span
|
||||
><strong>{{ selectedGeneral.warnum }}회</strong>
|
||||
</div>
|
||||
<div class="battle-general-extra">
|
||||
<span>명성</span><strong>{{ selectedGeneral.experience.toLocaleString('ko-KR') }}</strong>
|
||||
<span>계급</span><strong>{{ selectedGeneral.progression.dedicationText }}</strong>
|
||||
<span>나이</span><strong>{{ selectedGeneral.age }}세</strong> <span>병종</span
|
||||
><strong>{{ selectedGeneral.crewTypeName }}</strong> <span>승리</span
|
||||
><strong>{{ selectedGeneral.battleStats.kills }}</strong> <span>패배</span
|
||||
><strong>{{ selectedGeneral.battleStats.deaths }}</strong> <span>사살</span
|
||||
><strong>{{ selectedGeneral.battleStats.killCrew.toLocaleString('ko-KR') }}</strong>
|
||||
<span>피살</span
|
||||
><strong>{{ selectedGeneral.battleStats.deathCrew.toLocaleString('ko-KR') }}</strong>
|
||||
<span>전투 특기</span><strong>{{ selectedGeneral.traits.specialWar }}</strong>
|
||||
<span>내정 특기</span><strong>{{ selectedGeneral.traits.specialDomestic }}</strong>
|
||||
<span>성격</span><strong>{{ selectedGeneral.traits.personal }}</strong>
|
||||
</div>
|
||||
<LegacyGeneralProgress :general="selectedGeneral" />
|
||||
</div>
|
||||
<GeneralBasicCard
|
||||
class="battle-general-card"
|
||||
:general="selectedGeneral"
|
||||
:loading="loading"
|
||||
:nation-color="data?.nation.color"
|
||||
>
|
||||
<template v-if="selectedGeneral" #details>
|
||||
<div class="battle-general-extra">
|
||||
<span>명성</span
|
||||
><strong>{{ selectedGeneral.experience.toLocaleString('ko-KR') }}</strong>
|
||||
<span>계급</span><strong>{{ selectedGeneral.progression.dedicationText }}</strong>
|
||||
<span>전투</span><strong>{{ selectedGeneral.warnum }}회</strong> <span>승리</span
|
||||
><strong>{{ selectedGeneral.battleStats.kills }}</strong> <span>패배</span
|
||||
><strong>{{ selectedGeneral.battleStats.deaths }}</strong> <span>계략</span
|
||||
><strong>{{ selectedGeneral.battleStats.fire }}</strong> <span>사살</span
|
||||
><strong>{{ selectedGeneral.battleStats.killCrew.toLocaleString('ko-KR') }}</strong>
|
||||
<span>피살</span
|
||||
><strong>{{ selectedGeneral.battleStats.deathCrew.toLocaleString('ko-KR') }}</strong>
|
||||
<span>최근 전투</span><strong>{{ selectedGeneral.recentWar || '-' }}</strong>
|
||||
</div>
|
||||
<LegacyGeneralProgress :general="selectedGeneral" :show-primary="false" />
|
||||
</template>
|
||||
</GeneralBasicCard>
|
||||
<div v-if="selectedGeneral" class="general-meta">
|
||||
<div>최근 턴: {{ selectedGeneral.turnTime ? selectedGeneral.turnTime.slice(-5) : '-' }}</div>
|
||||
<div>
|
||||
최근 턴:
|
||||
{{
|
||||
formatServerDateTime(selectedGeneral.turnTime, { format: 'hourMinute', fallback: '-' })
|
||||
}}
|
||||
</div>
|
||||
<div>최근 전투: {{ selectedGeneral.recentWar || '-' }}</div>
|
||||
<div>전투 횟수: {{ selectedGeneral.warnum }}</div>
|
||||
</div>
|
||||
@@ -375,39 +364,7 @@ onMounted(() => {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.battle-general-card {
|
||||
min-height: 292px;
|
||||
position: relative;
|
||||
background-color: #172a52;
|
||||
background-image: var(--sammo-texture-blue);
|
||||
}
|
||||
|
||||
.battle-general-portrait {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.battle-general-name {
|
||||
min-height: 24px;
|
||||
padding: 2px 6px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #777;
|
||||
background: rgba(220, 220, 220, 0.85);
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.battle-general-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.battle-general-extra {
|
||||
clear: both;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
@@ -433,24 +390,6 @@ onMounted(() => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.battle-general-grid > * {
|
||||
min-height: 24px;
|
||||
padding: 2px 5px;
|
||||
border-right: 1px solid #777;
|
||||
border-bottom: 1px solid #777;
|
||||
}
|
||||
|
||||
.battle-general-grid > span {
|
||||
background-color: rgba(20, 75, 42, 0.7);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.battle-general-grid > strong {
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-grid {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import TournamentBracket from '../components/tournament/TournamentBracket.vue';
|
||||
import GeneralIdentity from '../components/ui/GeneralIdentity.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
|
||||
@@ -12,6 +14,7 @@ const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const message = ref<string | null>(null);
|
||||
const amounts = ref<Record<number, number>>({});
|
||||
const activeRankingPrefix = ref('tt');
|
||||
const typeNames = ['전력전', '통솔전', '일기토', '설전'];
|
||||
const stageNames = [
|
||||
'경기 없음',
|
||||
@@ -57,7 +60,13 @@ const final16Ids = computed(() =>
|
||||
const candidates = computed(() =>
|
||||
Array.from({ length: 16 }, (_, index) => {
|
||||
const id = final16Ids.value[index] ?? 0;
|
||||
return { id, name: id ? (participantMap.value.get(id)?.name ?? `#${id}`) : '-' };
|
||||
const participant = id ? participantMap.value.get(id) : null;
|
||||
return {
|
||||
id,
|
||||
name: id ? (participant?.name ?? `#${id}`) : '-',
|
||||
picture: participant?.picture ?? null,
|
||||
imageServer: participant?.imageServer ?? 0,
|
||||
};
|
||||
})
|
||||
);
|
||||
const totalAmount = computed(() => summary.value?.totalAmount ?? 0);
|
||||
@@ -68,7 +77,9 @@ const ratio = (id: number) => {
|
||||
const amount = totals?.[id] ?? 0;
|
||||
return amount ? (totalAmount.value / amount).toFixed(2) : '0';
|
||||
};
|
||||
const openingTime = computed(() => snapshot.value?.state?.nextAt?.slice(11, 16) ?? '--:--');
|
||||
const openingTime = computed(() =>
|
||||
formatServerDateTime(snapshot.value?.state?.nextAt, { format: 'hourMinute', fallback: '--:--' })
|
||||
);
|
||||
const expected = (id: number) => {
|
||||
const myTotals = summary.value?.myTotals as Record<number, number> | undefined;
|
||||
const current = myTotals?.[id] ?? 0;
|
||||
@@ -129,58 +140,43 @@ const placeBet = async (targetId: number) => {
|
||||
:bet-totals="betTotals"
|
||||
:total-bet="totalAmount"
|
||||
:show-legend="false"
|
||||
force-desktop
|
||||
/>
|
||||
|
||||
<section class="candidate-table bg0">
|
||||
<div class="candidate-row names">
|
||||
<span v-for="candidate in candidates" :key="candidate.id || candidate.name">{{ candidate.name }}</span>
|
||||
<div class="candidate-grid">
|
||||
<article v-for="candidate in candidates" :key="candidate.id || candidate.name" class="candidate-card">
|
||||
<GeneralIdentity
|
||||
:name="candidate.name"
|
||||
:picture="candidate.picture"
|
||||
:image-server="candidate.imageServer"
|
||||
:icon-size="36"
|
||||
/>
|
||||
<div class="candidate-return">
|
||||
<span class="ratio-color">{{ ratio(candidate.id) }}</span>
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="gold-color">{{ amounts[candidate.id] ?? 10 }}</span>
|
||||
<span aria-hidden="true">=</span>
|
||||
<strong class="return-color">{{ expected(candidate.id) }}</strong>
|
||||
</div>
|
||||
<div v-if="bettingOpen" class="candidate-actions">
|
||||
<select
|
||||
v-model.number="amounts[candidate.id]"
|
||||
:aria-label="`${candidate.name} 베팅 금액`"
|
||||
:disabled="!candidate.id"
|
||||
>
|
||||
<option :value="10">금10</option>
|
||||
<option :value="20">금20</option>
|
||||
<option :value="50">금50</option>
|
||||
<option :value="100">금100</option>
|
||||
<option :value="200">금200</option>
|
||||
<option :value="500">금500</option>
|
||||
<option :value="1000">최대</option>
|
||||
</select>
|
||||
<button type="button" :disabled="!candidate.id" @click="placeBet(candidate.id)">베팅</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="candidate-row ratios">
|
||||
<span v-for="candidate in candidates" :key="candidate.id || candidate.name">{{
|
||||
ratio(candidate.id)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="candidate-row multiply">
|
||||
<span v-for="candidate in candidates" :key="candidate.id || candidate.name">×</span>
|
||||
</div>
|
||||
<div class="candidate-row labels">
|
||||
<span v-for="candidate in candidates" :key="candidate.id || candidate.name">∥</span>
|
||||
</div>
|
||||
<div class="candidate-row expected">
|
||||
<span v-for="candidate in candidates" :key="candidate.id || candidate.name">{{
|
||||
expected(candidate.id)
|
||||
}}</span>
|
||||
</div>
|
||||
<div v-if="bettingOpen" class="candidate-row selects">
|
||||
<select
|
||||
v-for="candidate in candidates"
|
||||
:key="candidate.id || candidate.name"
|
||||
v-model.number="amounts[candidate.id]"
|
||||
:aria-label="`${candidate.name} 베팅 금액`"
|
||||
:disabled="!candidate.id"
|
||||
>
|
||||
<option :value="10">금10</option>
|
||||
<option :value="20">금20</option>
|
||||
<option :value="50">금50</option>
|
||||
<option :value="100">금100</option>
|
||||
<option :value="200">금200</option>
|
||||
<option :value="500">금500</option>
|
||||
<option :value="1000">최대</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="bettingOpen" class="candidate-row buttons">
|
||||
<button
|
||||
v-for="candidate in candidates"
|
||||
:key="candidate.id || candidate.name"
|
||||
type="button"
|
||||
:disabled="!candidate.id"
|
||||
@click="placeBet(candidate.id)"
|
||||
>
|
||||
베팅!
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
<p class="candidate-help">
|
||||
<span class="ratio-color">배당률</span> × <span class="gold-color">베팅금</span> =
|
||||
<span class="return-color">적중시 환수금</span><br />
|
||||
<span class="ratio-color">( 베팅후 500원 이하일땐 베팅이 불가능합니다. )</span>
|
||||
@@ -201,8 +197,26 @@ const placeBet = async (targetId: number) => {
|
||||
<section class="ranking-placeholder bg0">
|
||||
순위 / 장수명 / 능력치 / 경기수 / 승리 / 무승부 / 패배 / 집계점수 / 우승횟수
|
||||
</section>
|
||||
<div class="ranking-tabs bg0" role="tablist" aria-label="토너먼트 랭킹 종목 선택">
|
||||
<button
|
||||
v-for="section in rankings"
|
||||
:key="`ranking-tab-${section.prefix}`"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="activeRankingPrefix === section.prefix"
|
||||
:class="{ active: activeRankingPrefix === section.prefix }"
|
||||
@click="activeRankingPrefix = section.prefix"
|
||||
>
|
||||
{{ section.title.replaceAll(' ', '') }}
|
||||
</button>
|
||||
</div>
|
||||
<section class="ranking-grid bg0">
|
||||
<table v-for="section in rankings" :key="section.prefix" class="ranking-table">
|
||||
<table
|
||||
v-for="section in rankings"
|
||||
:key="section.prefix"
|
||||
class="ranking-table"
|
||||
:class="{ 'mobile-active': activeRankingPrefix === section.prefix }"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="9">{{ section.title }}</th>
|
||||
@@ -222,7 +236,14 @@ const placeBet = async (targetId: number) => {
|
||||
<tbody>
|
||||
<tr v-for="entry in section.entries" :key="entry.generalId">
|
||||
<td>{{ entry.rank }}</td>
|
||||
<td>{{ entry.name }}</td>
|
||||
<td class="ranking-general">
|
||||
<GeneralIdentity
|
||||
:name="entry.name"
|
||||
:picture="entry.picture"
|
||||
:image-server="entry.imageServer"
|
||||
:icon-size="24"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ entry.stat }}</td>
|
||||
<td>{{ entry.games }}</td>
|
||||
<td>{{ entry.win }}</td>
|
||||
@@ -248,8 +269,7 @@ const placeBet = async (targetId: number) => {
|
||||
<button class="close-button" type="button" @click="navigate">창 닫기</button>
|
||||
</RouterLink>
|
||||
<small>
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 :
|
||||
HideD(hided62@gmail.com) / Credit
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD(hided62@gmail.com) / Credit
|
||||
</small>
|
||||
</footer>
|
||||
</main>
|
||||
@@ -257,9 +277,10 @@ const placeBet = async (targetId: number) => {
|
||||
|
||||
<style scoped>
|
||||
.betting-page {
|
||||
width: 1125px;
|
||||
height: 1346px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
font-family: var(--sammo-font-sans);
|
||||
@@ -268,8 +289,8 @@ const placeBet = async (targetId: number) => {
|
||||
text-align: center;
|
||||
}
|
||||
.betting-bracket :deep(.bracket-canvas) {
|
||||
width: 1125px;
|
||||
min-width: 1125px;
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
}
|
||||
.betting-bracket :deep(.bracket-round),
|
||||
.betting-bracket :deep(.connector-row) {
|
||||
@@ -351,20 +372,34 @@ const placeBet = async (targetId: number) => {
|
||||
}
|
||||
.candidate-table {
|
||||
border: 1px solid gray;
|
||||
padding: 10px 0;
|
||||
font-size: 10px;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.candidate-row {
|
||||
.candidate-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(16, 70px);
|
||||
align-items: center;
|
||||
min-height: 10px;
|
||||
line-height: 10px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.names {
|
||||
min-height: 14px;
|
||||
.candidate-card {
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
border: 1px solid #5b504b;
|
||||
background: rgb(0 0 0 / 26%);
|
||||
text-align: left;
|
||||
}
|
||||
.candidate-return {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr auto 1fr;
|
||||
gap: 4px;
|
||||
margin: 8px 0;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.candidate-actions {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 64px;
|
||||
gap: 6px;
|
||||
}
|
||||
.ratios,
|
||||
.ratio-color {
|
||||
color: skyblue;
|
||||
}
|
||||
@@ -376,7 +411,7 @@ const placeBet = async (targetId: number) => {
|
||||
color: orange;
|
||||
}
|
||||
select,
|
||||
.buttons button {
|
||||
.candidate-actions button {
|
||||
width: 100%;
|
||||
min-height: 27px;
|
||||
padding: 2px 1px;
|
||||
@@ -410,7 +445,7 @@ select:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.candidate-table p {
|
||||
.candidate-help {
|
||||
min-height: 20px;
|
||||
margin: 8px 0 0;
|
||||
font-size: 18px;
|
||||
@@ -429,11 +464,13 @@ select:disabled {
|
||||
}
|
||||
.ranking-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 280px);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
.ranking-table {
|
||||
width: 280px;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 12px;
|
||||
@@ -441,7 +478,7 @@ select:disabled {
|
||||
}
|
||||
.ranking-table th,
|
||||
.ranking-table td {
|
||||
height: 14px;
|
||||
height: 28px;
|
||||
padding: 1px;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
@@ -455,12 +492,20 @@ select:disabled {
|
||||
.ranking-table .bg1 {
|
||||
background: #213b52;
|
||||
}
|
||||
.ranking-table th:nth-child(2),
|
||||
.ranking-table td:nth-child(2) {
|
||||
max-width: 80px;
|
||||
width: 130px;
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ranking-general {
|
||||
text-align: left;
|
||||
}
|
||||
.ranking-tabs {
|
||||
display: none;
|
||||
}
|
||||
.guide {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
@@ -468,4 +513,83 @@ select:disabled {
|
||||
.error {
|
||||
color: #ff8080;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.betting-page {
|
||||
max-width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
.title {
|
||||
height: auto;
|
||||
min-height: 55px;
|
||||
}
|
||||
.state {
|
||||
font-size: 18px;
|
||||
}
|
||||
.section-title,
|
||||
.ranking-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.candidate-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.candidate-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 112px;
|
||||
align-items: center;
|
||||
gap: 8px 12px;
|
||||
}
|
||||
.candidate-return {
|
||||
margin: 0;
|
||||
}
|
||||
.candidate-actions {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.candidate-help {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.ranking-placeholder {
|
||||
display: none;
|
||||
}
|
||||
.ranking-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 5px;
|
||||
padding: 8px;
|
||||
}
|
||||
.ranking-tabs button {
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.ranking-tabs button.active {
|
||||
border-color: #f39c12;
|
||||
background: #8a5b13;
|
||||
}
|
||||
.ranking-grid {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.ranking-table {
|
||||
display: none;
|
||||
min-width: 390px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.ranking-table.mobile-active {
|
||||
display: table;
|
||||
}
|
||||
.ranking-table th:nth-child(2),
|
||||
.ranking-table td:nth-child(2) {
|
||||
width: 112px;
|
||||
max-width: 112px;
|
||||
}
|
||||
.guide,
|
||||
.betting-footer {
|
||||
padding: 10px;
|
||||
}
|
||||
.betting-footer small {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
@@ -40,7 +41,7 @@ const resizeTextArea = (element: HTMLTextAreaElement | null) => {
|
||||
element.style.height = `${Math.max(element.scrollHeight, 42)}px`;
|
||||
};
|
||||
|
||||
const formatDate = (value: string): string => value.slice(5, 16).replace('T', ' ');
|
||||
const formatDate = (value: string): string => formatServerDateTime(value, { format: 'monthDayTime' });
|
||||
|
||||
const iconPath = (article: BoardArticle): string =>
|
||||
resolveGeneralIconUrl({
|
||||
@@ -160,7 +161,14 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="article-submit-row">
|
||||
<div></div>
|
||||
<button id="submitArticle" class="legacy-button legacy-button--secondary" type="button" @click="submitArticle">등록</button>
|
||||
<button
|
||||
id="submitArticle"
|
||||
class="legacy-button legacy-button--secondary"
|
||||
type="button"
|
||||
@click="submitArticle"
|
||||
>
|
||||
등록
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -244,7 +252,9 @@ onMounted(() => {
|
||||
padding: 8px;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
font: 16px/normal 'Times New Roman', serif;
|
||||
font:
|
||||
16px/normal 'Times New Roman',
|
||||
serif;
|
||||
}
|
||||
|
||||
.legacy-board-page {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
@@ -47,12 +48,7 @@ const loadDetail = async (): Promise<void> => {
|
||||
}
|
||||
};
|
||||
|
||||
const formatArchiveDate = (value: string): string =>
|
||||
new Intl.DateTimeFormat('sv-SE', {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'medium',
|
||||
timeZone: 'UTC',
|
||||
}).format(new Date(value));
|
||||
const formatArchiveDate = (value: string): string => formatServerDateTime(value);
|
||||
|
||||
watch(emperorId, loadDetail);
|
||||
onMounted(loadDetail);
|
||||
@@ -67,7 +63,9 @@ onMounted(loadDetail);
|
||||
역 대 왕 조<br />
|
||||
<button class="native-button" type="button" @click="closePage">창 닫기</button>
|
||||
<span class="all-link">
|
||||
<RouterLink to="/dynasty"><button class="native-button" type="button">전체보기</button></RouterLink>
|
||||
<RouterLink to="/dynasty"
|
||||
><button class="native-button" type="button">전체보기</button></RouterLink
|
||||
>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -202,7 +200,11 @@ onMounted(loadDetail);
|
||||
<td colspan="5">
|
||||
<!-- 레거시 색상 tag를 동일한 span 구조로 변환한다. -->
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-for="(entry, index) in data.emperor.history" :key="index" v-html="formatLog(entry)" />
|
||||
<div
|
||||
v-for="(entry, index) in data.emperor.history"
|
||||
:key="index"
|
||||
v-html="formatLog(entry)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -283,14 +285,10 @@ onMounted(loadDetail);
|
||||
<table class="legacy-table legacy-bg0 footer-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<button class="native-button" type="button" @click="closePage">창 닫기</button><br />
|
||||
</td>
|
||||
<td><button class="native-button" type="button" @click="closePage">창 닫기</button><br /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="banner">
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD
|
||||
</td>
|
||||
<td class="banner">삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
@@ -169,11 +170,7 @@ const turnTimeLabel = computed(() => {
|
||||
if (!turnTimeResult.value) {
|
||||
return null;
|
||||
}
|
||||
const parsed = new Date(turnTimeResult.value);
|
||||
if (Number.isNaN(parsed.getTime())) {
|
||||
return turnTimeResult.value;
|
||||
}
|
||||
return parsed.toLocaleString();
|
||||
return formatServerDateTime(turnTimeResult.value);
|
||||
});
|
||||
|
||||
const isUnited = computed(() => status.value?.isUnited ?? false);
|
||||
@@ -735,7 +732,7 @@ onMounted(() => {
|
||||
<div v-if="logLoading && logs.length === 0" class="log-empty">불러오는 중...</div>
|
||||
<div v-else-if="logs.length === 0" class="log-empty">기록이 없습니다.</div>
|
||||
<div v-for="entry in logs" v-else :key="entry.id" class="log-row">
|
||||
<small>[{{ new Date(entry.createdAt).toLocaleString('ko-KR') }}]</small>
|
||||
<small>[{{ formatServerDateTime(entry.createdAt) }}]</small>
|
||||
<span>{{ entry.text }}</span>
|
||||
</div>
|
||||
<button
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useMediaQuery } from '@vueuse/core';
|
||||
@@ -68,14 +69,8 @@ const nationColor = computed(() => nation.value?.color ?? '#000000');
|
||||
const voteActive = computed(() => Boolean(frontStatus.value?.latestVote));
|
||||
const formatRecord = (entry: { text: string; createdAt?: string | Date }, appendTime = false): string => {
|
||||
if (!appendTime || /\d{2}:\d{2}\s*$/u.test(entry.text)) return formatLog(entry.text);
|
||||
const parsed = entry.createdAt ? new Date(entry.createdAt) : null;
|
||||
if (!parsed || Number.isNaN(parsed.getTime())) return formatLog(entry.text);
|
||||
const time = new Intl.DateTimeFormat('ko-KR', {
|
||||
timeZone: 'Asia/Seoul',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
}).format(parsed);
|
||||
const time = formatServerDateTime(entry.createdAt, { format: 'hourMinute', fallback: '' });
|
||||
if (!time) return formatLog(entry.text);
|
||||
return formatLog(`${entry.text} ${time}`);
|
||||
};
|
||||
|
||||
@@ -148,13 +143,9 @@ watch(
|
||||
<header class="game-shell__header">
|
||||
<div>
|
||||
<h1 class="game-shell__title">
|
||||
{{ isMobile ? '전장 현황' : lobbyInfo?.scenarioTitle || '전장 현황' }}
|
||||
{{ lobbyInfo?.scenarioTitle || '전장 현황' }}
|
||||
</h1>
|
||||
<p class="game-shell__subtitle">
|
||||
{{
|
||||
!isMobile && lobbyInfo?.scenarioTitle ? `${lobbyInfo.scenarioTitle} ${statusLine}` : statusLine
|
||||
}}
|
||||
</p>
|
||||
<p class="game-shell__subtitle">{{ statusLine }}</p>
|
||||
</div>
|
||||
<div class="game-shell__actions desktop-action-controls">
|
||||
<button
|
||||
@@ -197,7 +188,7 @@ watch(
|
||||
</div>
|
||||
|
||||
<div data-main-target="policy">
|
||||
<MainFrontStatus :status="frontStatus" />
|
||||
<MainFrontStatus :status="frontStatus" :tournament-stage="tournamentStage" />
|
||||
</div>
|
||||
|
||||
<aside v-if="surveyNotice" class="survey-notice" role="status" aria-live="polite">
|
||||
@@ -243,7 +234,12 @@ watch(
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" />
|
||||
<GeneralBasicCard
|
||||
:general="general"
|
||||
:loading="loading"
|
||||
:nation-color="nation?.color"
|
||||
:troop-text="general?.troopId ? String(general.troopId) : '-'"
|
||||
/>
|
||||
</PanelCard>
|
||||
<PanelCard title="도시 정보" data-main-target="city">
|
||||
<CityBasicCard :city="city" :loading="loading" />
|
||||
@@ -360,7 +356,12 @@ watch(
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" />
|
||||
<GeneralBasicCard
|
||||
:general="general"
|
||||
:loading="loading"
|
||||
:nation-color="nation?.color"
|
||||
:troop-text="general?.troopId ? String(general.troopId) : '-'"
|
||||
/>
|
||||
</PanelCard>
|
||||
<MainNationMenu
|
||||
class="nation-menu-middle"
|
||||
@@ -609,12 +610,14 @@ button {
|
||||
.layout-desktop > [data-main-target='nation'] {
|
||||
grid-column: 1 / 6;
|
||||
grid-row: 3;
|
||||
align-self: stretch;
|
||||
min-height: 193px;
|
||||
}
|
||||
|
||||
.layout-desktop > [data-main-target='general'] {
|
||||
grid-column: 6 / 11;
|
||||
grid-row: 3;
|
||||
align-self: stretch;
|
||||
min-height: 193px;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ import { isDefenceTrainPenaltyWaivedByScenarioEffect } from '@sammo-ts/logic';
|
||||
import { useSessionStore } from '../stores/session';
|
||||
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
|
||||
import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
|
||||
import GeneralBasicCard from '../components/main/GeneralBasicCard.vue';
|
||||
import { useGameFeedback } from '../composables/useGameFeedback';
|
||||
|
||||
const SCREEN_MODE_KEY = 'sam.screenMode';
|
||||
@@ -167,6 +168,7 @@ const items = computed<Array<{ key: ItemSlotKey; slotName: string; displayName:
|
||||
]
|
||||
);
|
||||
const iconChoices = computed(() => data.value?.iconChoices ?? []);
|
||||
const selectedIcon = computed(() => iconChoices.value.find((icon) => icon.id === selectedIconId.value) ?? null);
|
||||
|
||||
const autorunUser = computed(() => asRecord(world.value?.meta.autorun_user));
|
||||
const showAutoNationTurn = computed(() => asRecord(autorunUser.value.options).chief !== false);
|
||||
@@ -360,7 +362,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="container" class="legacy-page bg0" :class="`screen-${screenMode}`">
|
||||
<main id="container" class="legacy-page bg0 responsive-settings-page" :class="`screen-${screenMode}`">
|
||||
<div class="title-row">
|
||||
<span>내 정 보</span>
|
||||
<RouterLink class="legacy-button" to="/past-plays">지난 플레이</RouterLink>
|
||||
@@ -374,91 +376,43 @@ onMounted(() => {
|
||||
<section class="top-grid">
|
||||
<div class="general-column">
|
||||
<div class="section-title sky">장수 정보</div>
|
||||
<div v-if="loading || !data" class="loading">불러오는 중...</div>
|
||||
<div v-else class="general-table">
|
||||
<div class="portrait-cell">
|
||||
<span
|
||||
class="portrait-image"
|
||||
role="img"
|
||||
:style="{ backgroundImage: `url(${resolveGeneralIconUrl(data.general)})` }"
|
||||
></span>
|
||||
<strong>{{ data.general.name }}</strong>
|
||||
</div>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>통솔</dt>
|
||||
<dd>{{ data.general.stats.leadership }}</dd>
|
||||
<GeneralBasicCard
|
||||
class="general-table"
|
||||
:general="data?.general ?? null"
|
||||
:loading="loading"
|
||||
:nation-color="data?.nation?.color"
|
||||
:defence-text="form.defence_train === 999 ? '수비 안함' : `수비 함(훈사${form.defence_train})`"
|
||||
:troop-text="data?.general.troopId ? String(data.general.troopId) : '-'"
|
||||
:penalty-text="penalties.length || '-'"
|
||||
>
|
||||
<template v-if="data" #details>
|
||||
<div class="legacy-general-details">
|
||||
<div>
|
||||
명망
|
||||
<strong
|
||||
>Lv {{ data.general.progression?.experienceLevel ?? 0 }} ({{
|
||||
data.general.experience
|
||||
}})</strong
|
||||
>
|
||||
· 계급
|
||||
<strong
|
||||
>{{ data.general.progression?.dedicationText ?? '무품관' }} ({{
|
||||
data.general.dedication
|
||||
}})</strong
|
||||
>
|
||||
</div>
|
||||
<div>전투 0 · 계략 0 · 사관 7년</div>
|
||||
<div>승률 0% · 승리 0 · 패배 0</div>
|
||||
<div>살상률 0% · 사살 0 · 피살 0</div>
|
||||
<div>
|
||||
소속 {{ data.nation?.name ?? '재야' }} · 도시 {{ data.city?.name ?? '-' }} · 병종
|
||||
{{ data.general.crewTypeName ?? '-' }} · 내정특기
|
||||
{{ data.general.traits?.specialDomestic ?? '-' }} · 부상 {{ data.general.injury }}
|
||||
</div>
|
||||
<LegacyGeneralProgress :general="data.general" :show-primary="false" />
|
||||
</div>
|
||||
<div>
|
||||
<dt>무력</dt>
|
||||
<dd>{{ data.general.stats.strength }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>지력</dt>
|
||||
<dd>{{ data.general.stats.intelligence }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>소속</dt>
|
||||
<dd>{{ data.nation?.name ?? '재야' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>도시</dt>
|
||||
<dd>{{ data.city?.name ?? '-' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>금/쌀</dt>
|
||||
<dd>{{ data.general.gold }} / {{ data.general.rice }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>병력</dt>
|
||||
<dd>{{ data.general.crew }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>훈련/사기</dt>
|
||||
<dd>{{ data.general.train }} / {{ data.general.atmos }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>경험/공헌</dt>
|
||||
<dd>{{ data.general.experience }} / {{ data.general.dedication }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>성격/특기</dt>
|
||||
<dd>
|
||||
{{ data.general.traits?.personal ?? '-' }} /
|
||||
{{ data.general.traits?.specialWar ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>나이/다음턴</dt>
|
||||
<dd>{{ data.general.age ?? '-' }}세 / {{ data.general.turnTime?.slice(11, 16) ?? '-' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div v-if="data" class="legacy-general-details">
|
||||
<div>
|
||||
명망
|
||||
<strong
|
||||
>Lv {{ data.general.progression?.experienceLevel ?? 0 }} ({{
|
||||
data.general.experience
|
||||
}})</strong
|
||||
>
|
||||
· 계급
|
||||
<strong
|
||||
>{{ data.general.progression?.dedicationText ?? '무품관' }} ({{
|
||||
data.general.dedication
|
||||
}})</strong
|
||||
>
|
||||
</div>
|
||||
<div>전투 0 · 계략 0 · 사관 7년</div>
|
||||
<div>승률 0% · 승리 0 · 패배 0</div>
|
||||
<div>살상률 0% · 사살 0 · 피살 0</div>
|
||||
<div>
|
||||
병종 {{ data.general.crewTypeName ?? '-' }} · 내정특기
|
||||
{{ data.general.traits?.specialDomestic ?? '-' }} · 부상 {{ data.general.injury }} · 부대
|
||||
{{ data.general.troopId || '-' }} · 벌점 {{ penalties.length || '-' }}
|
||||
</div>
|
||||
<LegacyGeneralProgress :general="data.general" />
|
||||
</div>
|
||||
</template>
|
||||
</GeneralBasicCard>
|
||||
</div>
|
||||
|
||||
<div class="settings-column">
|
||||
@@ -541,6 +495,16 @@ onMounted(() => {
|
||||
<span v-if="data.iconChangeAvailableAt" class="hint">
|
||||
다음 변경 가능: {{ formatSeoulDateTime(data.iconChangeAvailableAt) }}
|
||||
</span>
|
||||
<div v-if="selectedIcon" class="selected-general-icon" aria-live="polite">
|
||||
<img
|
||||
:src="resolveGeneralIconUrl(selectedIcon)"
|
||||
width="48"
|
||||
height="48"
|
||||
alt=""
|
||||
@error="useDefaultGeneralIcon"
|
||||
/>
|
||||
<strong>{{ data.general.name }}</strong>
|
||||
</div>
|
||||
<div class="general-icon-list" role="radiogroup" aria-label="장수 전용 아이콘 선택">
|
||||
<label v-for="icon in iconChoices" :key="icon.id" class="general-icon-choice">
|
||||
<input v-model="selectedIconId" type="radio" :value="icon.id" />
|
||||
@@ -675,8 +639,7 @@ onMounted(() => {
|
||||
.legacy-page {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
min-width: 500px;
|
||||
height: 1257.5px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
@@ -786,28 +749,6 @@ button:disabled {
|
||||
.sky {
|
||||
color: skyblue;
|
||||
}
|
||||
.general-table {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
padding: 0;
|
||||
background-color: #172a52;
|
||||
background-image: var(--sammo-texture-blue);
|
||||
}
|
||||
.portrait-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border-right: 1px solid #777;
|
||||
}
|
||||
.portrait-image {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.legacy-general-info-compat {
|
||||
display: none;
|
||||
}
|
||||
@@ -824,23 +765,6 @@ button:disabled {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
dl {
|
||||
margin: 0;
|
||||
}
|
||||
dl > div {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
border-bottom: 1px solid #777;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
border-right: 1px solid #777;
|
||||
}
|
||||
dt {
|
||||
color: #aaa;
|
||||
}
|
||||
.settings-column {
|
||||
padding: 10px 18px;
|
||||
}
|
||||
@@ -942,6 +866,21 @@ dt {
|
||||
gap: 6px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.selected-general-icon {
|
||||
display: flex;
|
||||
max-width: 260px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin: 8px auto;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #666;
|
||||
background: rgb(23 42 82 / 70%);
|
||||
}
|
||||
.selected-general-icon img {
|
||||
flex: 0 0 48px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.general-icon-choice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -949,16 +888,44 @@ dt {
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.legacy-page {
|
||||
width: 500px;
|
||||
height: 1798.34px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.my-page-mobile-scroll-spacer {
|
||||
display: block;
|
||||
height: 100px;
|
||||
display: none;
|
||||
}
|
||||
.top-grid,
|
||||
.log-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.title-row {
|
||||
height: auto;
|
||||
min-height: 54px;
|
||||
}
|
||||
dl > div {
|
||||
grid-template-columns: 62px minmax(0, 1fr);
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
padding: 2px 3px;
|
||||
}
|
||||
.settings-column {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.screen-mode-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
.button-group {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.item-group {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.custom-css textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
type Result = Awaited<ReturnType<typeof trpc.nation.getSecretGeneralList.query>>;
|
||||
@@ -147,7 +148,7 @@ onMounted(load);
|
||||
>
|
||||
</td>
|
||||
<td>{{ general.killTurn }}</td>
|
||||
<td>{{ general.turnTime.slice(14, 19) }}</td>
|
||||
<td>{{ formatServerDateTime(general.turnTime, { format: 'minuteSecond' }) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -159,8 +160,8 @@ onMounted(load);
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="legacy-banner">
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 :
|
||||
HideD(hided62@gmail.com) /
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD(hided62@gmail.com)
|
||||
/
|
||||
<a href="https://github.com/hided/SamK" target="_blank" rel="noopener noreferrer">Credit</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
@@ -67,16 +68,9 @@ const newVoteOptions = computed(() => newVoteOptionsText.value.split('\n').filte
|
||||
|
||||
const percentage = (count: number, total: number): string => ((count / Math.max(1, total)) * 100).toFixed(1);
|
||||
|
||||
const formatStartDate = (value: string): string => value.slice(0, 10);
|
||||
const formatStartDate = (value: string): string => formatServerDateTime(value, { format: 'date' });
|
||||
|
||||
const formatCommentDate = (value: string): string => {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value;
|
||||
}
|
||||
const pad = (part: number) => String(part).padStart(2, '0');
|
||||
return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
||||
};
|
||||
const formatCommentDate = (value: string): string => formatServerDateTime(value, { format: 'monthDayTime' });
|
||||
|
||||
const voteColor = (index: number): string =>
|
||||
['#ff0000', '#ffa500', '#ffff00', '#008000', '#0000ff', '#000080', '#800080'][index % 7]!;
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import TournamentBracket from '../components/tournament/TournamentBracket.vue';
|
||||
import GeneralIdentity from '../components/ui/GeneralIdentity.vue';
|
||||
import { trpc } from '../utils/trpc';
|
||||
import { resolveTournamentStageName } from '../utils/tournamentStatus';
|
||||
|
||||
type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
|
||||
|
||||
@@ -12,22 +15,11 @@ const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const actionMessage = ref<string | null>(null);
|
||||
const adminEnabled = ref(false);
|
||||
const activeFinalGroup = ref(0);
|
||||
const activePreliminaryGroup = ref(0);
|
||||
|
||||
const typeNames = ['전력전', '통솔전', '일기토', '설전'];
|
||||
const stageNames = [
|
||||
'경기 없음',
|
||||
'참가 모집중',
|
||||
'예선 진행중',
|
||||
'본선 추첨중',
|
||||
'본선 진행중',
|
||||
'16강 배정중',
|
||||
'베팅 진행중',
|
||||
'16강 진행중',
|
||||
'8강 진행중',
|
||||
'4강 진행중',
|
||||
'결승 진행중',
|
||||
];
|
||||
|
||||
const typeStatNames = ['종합', '통솔', '무력', '지력'];
|
||||
const errorText = (value: unknown) => (value instanceof Error ? value.message : String(value));
|
||||
|
||||
const load = async () => {
|
||||
@@ -62,7 +54,9 @@ const matchesAt = (stage: number) =>
|
||||
.sort((a, b) => a.roundIndex - b.roundIndex);
|
||||
const nameOf = (id?: number) => (id ? (participantsById.value.get(id)?.name ?? `#${id}`) : '-');
|
||||
const totalBet = computed(() => betting.value?.totalAmount ?? 0);
|
||||
const openingTime = computed(() => snapshot.value?.state?.nextAt?.slice(11, 16) ?? '--:--');
|
||||
const openingTime = computed(() =>
|
||||
formatServerDateTime(snapshot.value?.state?.nextAt, { format: 'hourMinute', fallback: '--:--' })
|
||||
);
|
||||
const betTotals = computed(() => betting.value?.totals as Record<number, number> | undefined);
|
||||
const isParticipant = computed(() =>
|
||||
(snapshot.value?.participants ?? []).some((participant) => participant.id === myGeneralId.value)
|
||||
@@ -74,6 +68,26 @@ const groups = computed(() =>
|
||||
.sort((a, b) => (a.finalRank ?? 99) - (b.finalRank ?? 99) || (a.groupNo ?? 99) - (b.groupNo ?? 99))
|
||||
)
|
||||
);
|
||||
const preliminaryGroups = computed(() =>
|
||||
Array.from({ length: 8 }, (_, index) =>
|
||||
(snapshot.value?.participants ?? [])
|
||||
.filter((participant) => participant.groupId === index)
|
||||
.sort((a, b) => (a.seedRank ?? 99) - (b.seedRank ?? 99) || (a.groupNo ?? 99) - (b.groupNo ?? 99))
|
||||
)
|
||||
);
|
||||
const groupNames = ['一', '二', '三', '四', '五', '六', '七', '八'];
|
||||
const statOf = (participant: Snapshot['participants'][number] | undefined): number | '' => {
|
||||
if (!participant) return '';
|
||||
const type = snapshot.value?.state?.type ?? 0;
|
||||
if (type === 0) return participant.leadership + participant.strength + participant.intel;
|
||||
if (type === 1) return participant.leadership;
|
||||
if (type === 2) return participant.strength;
|
||||
return participant.intel;
|
||||
};
|
||||
const gamesOf = (participant: Snapshot['participants'][number] | undefined): number | '' =>
|
||||
participant ? (participant.win ?? 0) + (participant.draw ?? 0) + (participant.lose ?? 0) : '';
|
||||
const pointsOf = (participant: Snapshot['participants'][number] | undefined): number | '' =>
|
||||
participant ? (participant.win ?? 0) * 3 + (participant.draw ?? 0) : '';
|
||||
const currentMatch = computed(() => {
|
||||
const state = snapshot.value?.state;
|
||||
if (!state || state.stage < 7 || state.stage > 10) return null;
|
||||
@@ -152,7 +166,7 @@ const start = async () => {
|
||||
<section class="operator-row bg0">운영자 메세지 : <span></span></section>
|
||||
<section class="state-row bg0">
|
||||
<span class="type">{{ typeNames[snapshot?.state?.type ?? 0] }}</span>
|
||||
({{ stageNames[snapshot?.state?.stage ?? 0] ?? '상태 확인 중' }}, 개막시간 {{ openingTime }}, 경기당
|
||||
({{ resolveTournamentStageName(snapshot?.state?.stage ?? 0) }}, 개막시간 {{ openingTime }}, 경기당
|
||||
{{ snapshot?.state?.termSeconds ?? '-' }}초)
|
||||
</section>
|
||||
<section class="section-title bg2">16강 승자전</section>
|
||||
@@ -164,7 +178,6 @@ const start = async () => {
|
||||
:winner-id="snapshot?.state?.winnerId"
|
||||
:bet-totals="betTotals"
|
||||
:total-bet="totalBet"
|
||||
force-desktop
|
||||
/>
|
||||
|
||||
<section v-if="currentMatch" class="fight bg0">
|
||||
@@ -173,18 +186,35 @@ const start = async () => {
|
||||
</section>
|
||||
|
||||
<section class="section-title groups-title bg2">조별 본선 순위</section>
|
||||
<div class="group-tabs bg0" role="tablist" aria-label="본선 조 선택">
|
||||
<button
|
||||
v-for="(groupName, groupIndex) in groupNames"
|
||||
:key="`final-tab-${groupName}`"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="activeFinalGroup === groupIndex"
|
||||
:class="{ active: activeFinalGroup === groupIndex }"
|
||||
@click="activeFinalGroup = groupIndex"
|
||||
>
|
||||
{{ groupName }}조
|
||||
</button>
|
||||
</div>
|
||||
<section class="group-grid bg0">
|
||||
<table v-for="(group, groupIndex) in groups" :key="groupIndex">
|
||||
<table
|
||||
v-for="(group, groupIndex) in groups"
|
||||
:key="groupIndex"
|
||||
:class="{ 'mobile-active': activeFinalGroup === groupIndex }"
|
||||
>
|
||||
<caption>
|
||||
{{
|
||||
['一', '二', '三', '四', '五', '六', '七', '八'][groupIndex]
|
||||
groupNames[groupIndex]
|
||||
}}조
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>순</th>
|
||||
<th>장수</th>
|
||||
<th>{{ typeNames[snapshot?.state?.type ?? 0].replace('전', '') }}</th>
|
||||
<th>{{ typeStatNames[snapshot?.state?.type ?? 0] }}</th>
|
||||
<th>경</th>
|
||||
<th>승</th>
|
||||
<th>무</th>
|
||||
@@ -196,26 +226,21 @@ const start = async () => {
|
||||
<tbody>
|
||||
<tr v-for="rowIndex in 4" :key="rowIndex">
|
||||
<td>{{ rowIndex }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.name ?? '' }}</td>
|
||||
<td>
|
||||
{{
|
||||
group[rowIndex - 1]
|
||||
? (group[rowIndex - 1]!.win ?? 0) +
|
||||
(group[rowIndex - 1]!.draw ?? 0) +
|
||||
(group[rowIndex - 1]!.lose ?? 0)
|
||||
: ''
|
||||
}}
|
||||
<td class="general-cell">
|
||||
<GeneralIdentity
|
||||
v-if="group[rowIndex - 1]"
|
||||
:name="group[rowIndex - 1]!.name"
|
||||
:picture="group[rowIndex - 1]!.picture"
|
||||
:image-server="group[rowIndex - 1]!.imageServer"
|
||||
:icon-size="24"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ statOf(group[rowIndex - 1]) }}</td>
|
||||
<td>{{ gamesOf(group[rowIndex - 1]) }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.win ?? '' }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.draw ?? '' }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.lose ?? '' }}</td>
|
||||
<td>
|
||||
{{
|
||||
group[rowIndex - 1]
|
||||
? (group[rowIndex - 1]!.win ?? 0) * 3 + (group[rowIndex - 1]!.draw ?? 0)
|
||||
: ''
|
||||
}}
|
||||
</td>
|
||||
<td>{{ pointsOf(group[rowIndex - 1]) }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.gl ?? '' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -223,18 +248,35 @@ const start = async () => {
|
||||
</section>
|
||||
|
||||
<section class="section-title groups-title bg2">조별 예선 순위</section>
|
||||
<div class="group-tabs bg0" role="tablist" aria-label="예선 조 선택">
|
||||
<button
|
||||
v-for="(groupName, groupIndex) in groupNames"
|
||||
:key="`preliminary-tab-${groupName}`"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="activePreliminaryGroup === groupIndex"
|
||||
:class="{ active: activePreliminaryGroup === groupIndex }"
|
||||
@click="activePreliminaryGroup = groupIndex"
|
||||
>
|
||||
{{ groupName }}조
|
||||
</button>
|
||||
</div>
|
||||
<section class="group-grid preliminary-grid bg0">
|
||||
<table v-for="groupIndex in 8" :key="`preliminary-${groupIndex}`">
|
||||
<table
|
||||
v-for="(group, groupIndex) in preliminaryGroups"
|
||||
:key="`preliminary-${groupIndex}`"
|
||||
:class="{ 'mobile-active': activePreliminaryGroup === groupIndex }"
|
||||
>
|
||||
<caption>
|
||||
{{
|
||||
['一', '二', '三', '四', '五', '六', '七', '八'][groupIndex - 1]
|
||||
groupNames[groupIndex]
|
||||
}}조
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>순</th>
|
||||
<th>장수</th>
|
||||
<th>{{ typeNames[snapshot?.state?.type ?? 0].replace('전', '') }}</th>
|
||||
<th>{{ typeStatNames[snapshot?.state?.type ?? 0] }}</th>
|
||||
<th>경</th>
|
||||
<th>승</th>
|
||||
<th>무</th>
|
||||
@@ -246,14 +288,22 @@ const start = async () => {
|
||||
<tbody>
|
||||
<tr v-for="rowIndex in 8" :key="rowIndex">
|
||||
<td>{{ rowIndex }}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="general-cell">
|
||||
<GeneralIdentity
|
||||
v-if="group[rowIndex - 1]"
|
||||
:name="group[rowIndex - 1]!.name"
|
||||
:picture="group[rowIndex - 1]!.picture"
|
||||
:image-server="group[rowIndex - 1]!.imageServer"
|
||||
:icon-size="24"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ statOf(group[rowIndex - 1]) }}</td>
|
||||
<td>{{ gamesOf(group[rowIndex - 1]) }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.win ?? '' }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.draw ?? '' }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.lose ?? '' }}</td>
|
||||
<td>{{ pointsOf(group[rowIndex - 1]) }}</td>
|
||||
<td>{{ group[rowIndex - 1]?.gl ?? '' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -287,8 +337,7 @@ const start = async () => {
|
||||
<button class="close-button" type="button" @click="navigate">창 닫기</button>
|
||||
</RouterLink>
|
||||
<small>
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 :
|
||||
HideD(hided62@gmail.com) / Credit
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD(hided62@gmail.com) / Credit
|
||||
</small>
|
||||
</footer>
|
||||
|
||||
@@ -302,9 +351,10 @@ const start = async () => {
|
||||
|
||||
<style scoped>
|
||||
.legacy-page {
|
||||
width: 2009px;
|
||||
height: 1059px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
font-family: var(--sammo-font-sans);
|
||||
@@ -431,13 +481,15 @@ button:focus-visible {
|
||||
}
|
||||
.group-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 250px);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
table {
|
||||
width: 250px;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
table-layout: fixed;
|
||||
}
|
||||
caption {
|
||||
padding: 3px;
|
||||
@@ -450,14 +502,99 @@ th {
|
||||
}
|
||||
th,
|
||||
td {
|
||||
height: 17px;
|
||||
height: 30px;
|
||||
border: 1px solid #555;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
.group-grid th:first-child,
|
||||
.group-grid td:first-child {
|
||||
width: 24px;
|
||||
}
|
||||
.group-grid th:nth-child(2),
|
||||
.group-grid td:nth-child(2) {
|
||||
width: 92px;
|
||||
}
|
||||
.general-cell {
|
||||
overflow: hidden;
|
||||
}
|
||||
.group-tabs {
|
||||
display: none;
|
||||
}
|
||||
.admin-row {
|
||||
text-align: left;
|
||||
}
|
||||
.error-row {
|
||||
color: #ff8080;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.legacy-page {
|
||||
max-width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
.legacy-title {
|
||||
height: auto;
|
||||
min-height: 55px;
|
||||
}
|
||||
.state-row {
|
||||
font-size: 18px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.group-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(44px, 1fr));
|
||||
overflow-x: auto;
|
||||
padding: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
.group-tabs button {
|
||||
min-width: 44px;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.group-tabs button.active {
|
||||
border-color: #f39c12;
|
||||
background: #8a5b13;
|
||||
color: #fff;
|
||||
}
|
||||
.group-grid {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.group-grid table {
|
||||
display: none;
|
||||
min-width: 370px;
|
||||
}
|
||||
.group-grid table.mobile-active {
|
||||
display: table;
|
||||
}
|
||||
.group-grid th,
|
||||
.group-grid td {
|
||||
height: 31px;
|
||||
padding: 1px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.group-grid th:first-child,
|
||||
.group-grid td:first-child {
|
||||
width: 22px;
|
||||
}
|
||||
.group-grid th:nth-child(2),
|
||||
.group-grid td:nth-child(2) {
|
||||
width: 108px;
|
||||
}
|
||||
.tournament-guide {
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.tournament-footer {
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
.tournament-footer small {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
@@ -50,10 +51,7 @@ const onlineRows = computed(() =>
|
||||
}))
|
||||
);
|
||||
|
||||
const timeLabel = (value: string): string => {
|
||||
const timePart = value.includes('T') ? value.split('T')[1] : value.slice(11);
|
||||
return (timePart ?? '').slice(0, 5);
|
||||
};
|
||||
const timeLabel = (value: string): string => formatServerDateTime(value, { format: 'hourMinute' });
|
||||
|
||||
const trafficColor = (percentage: number): string => {
|
||||
const channel = (value: number): string =>
|
||||
@@ -204,8 +202,8 @@ onMounted(() => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="banner">
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 :
|
||||
HideD(hided62@gmail.com) /
|
||||
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD(hided62@gmail.com)
|
||||
/
|
||||
<a href="https://sam.hided.net/wiki/hidche/credit" target="_blank" rel="noreferrer">Credit</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { formatServerDateTime } from '@sammo-ts/common';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
@@ -166,10 +167,7 @@ const hideMemberPopup = () => {
|
||||
const iconPath = (troop: Troop): string => resolveGeneralIconUrl(troop.leader ?? {});
|
||||
|
||||
const formatTurn = (turnTime: string | null): string => {
|
||||
if (!turnTime) {
|
||||
return '--:--';
|
||||
}
|
||||
return turnTime.slice(14, 19);
|
||||
return formatServerDateTime(turnTime, { format: 'minuteSecond', fallback: '--:--' });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
Reference in New Issue
Block a user