Hide_D
3202509051
daemon 진행 뒤 국가 명령을 현재 슬롯에 재기준화하고 Ref 명령별 장수 대상 필터를 적용한다. 모바일 고급 편집기 12턴과 500px 8수뇌 행렬을 실제 Chromium 기준으로 복원한다.
937 lines
25 KiB
Vue
937 lines
25 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref, watch } from 'vue';
|
||
import { useMediaQuery } from '@vueuse/core';
|
||
import { addMinutes } from 'date-fns';
|
||
import { useRouter } from 'vue-router';
|
||
import SkeletonLines from '../components/ui/SkeletonLines.vue';
|
||
import ChiefTurnCard from '../components/chief/ChiefTurnCard.vue';
|
||
import ChiefCommandEditor from '../components/chief/ChiefCommandEditor.vue';
|
||
import { trpc } from '../utils/trpc';
|
||
import { formatOfficerLevelText } from '../utils/nationFormat';
|
||
import type { CommandMapData, CommandMapLayout, CommandPatternEntry, CommandTable } from '../components/command/types';
|
||
|
||
type ChiefTurn = {
|
||
index: number;
|
||
action: string;
|
||
args: unknown;
|
||
};
|
||
|
||
type ChiefEntry = {
|
||
officerLevel: number;
|
||
name: string | null;
|
||
npcState: number | null;
|
||
turnTime: string | null;
|
||
revision: number;
|
||
turns: ChiefTurn[];
|
||
};
|
||
|
||
type ChiefCenterResponse = {
|
||
me: {
|
||
id: number;
|
||
officerLevel: number;
|
||
nationId: number;
|
||
};
|
||
nation: {
|
||
id: number;
|
||
name: string;
|
||
level: number;
|
||
};
|
||
currentYear: number;
|
||
currentMonth: number;
|
||
turnTermMinutes: number;
|
||
maxTurns: number;
|
||
chiefs: ChiefEntry[];
|
||
};
|
||
|
||
const chiefApi = trpc as unknown as {
|
||
nation: {
|
||
getChiefCenter: {
|
||
query: () => Promise<ChiefCenterResponse>;
|
||
};
|
||
};
|
||
turns: {
|
||
getCommandTable: {
|
||
query: (input: { generalId: number }) => Promise<CommandTable>;
|
||
};
|
||
};
|
||
world: {
|
||
getMap: { query: () => Promise<CommandMapData> };
|
||
getMapLayout: { query: () => Promise<CommandMapLayout> };
|
||
};
|
||
};
|
||
|
||
type TurnRow = {
|
||
index: number;
|
||
time: string;
|
||
action: string;
|
||
isRest: boolean;
|
||
args: unknown;
|
||
label: string;
|
||
actionCode: string;
|
||
};
|
||
|
||
const loading = ref(false);
|
||
const commandLoading = ref(false);
|
||
const error = ref<string | null>(null);
|
||
const data = ref<ChiefCenterResponse | null>(null);
|
||
const commandTable = ref<CommandTable | null>(null);
|
||
const worldMap = ref<CommandMapData | null>(null);
|
||
const mapLayout = ref<CommandMapLayout | null>(null);
|
||
|
||
const selectedChiefLevel = ref<number | null>(null);
|
||
const router = useRouter();
|
||
|
||
const isMobile = useMediaQuery('(max-width: 1024px)');
|
||
|
||
const resolveErrorMessage = (value: unknown): string => {
|
||
if (value instanceof Error) {
|
||
return value.message;
|
||
}
|
||
if (typeof value === 'string') {
|
||
return value;
|
||
}
|
||
return 'unknown_error';
|
||
};
|
||
|
||
const loadChiefCenter = async () => {
|
||
if (loading.value) {
|
||
return;
|
||
}
|
||
loading.value = true;
|
||
error.value = null;
|
||
|
||
try {
|
||
data.value = await chiefApi.nation.getChiefCenter.query();
|
||
} catch (err) {
|
||
error.value = resolveErrorMessage(err);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const loadCommandTable = async (generalId: number) => {
|
||
if (commandLoading.value) {
|
||
return;
|
||
}
|
||
commandLoading.value = true;
|
||
try {
|
||
const [nextCommandTable, nextWorldMap, nextMapLayout] = await Promise.all([
|
||
chiefApi.turns.getCommandTable.query({ generalId }),
|
||
chiefApi.world.getMap.query().catch(() => null),
|
||
chiefApi.world.getMapLayout.query().catch(() => null),
|
||
]);
|
||
commandTable.value = nextCommandTable;
|
||
worldMap.value = nextWorldMap;
|
||
mapLayout.value = nextMapLayout;
|
||
} catch (err) {
|
||
error.value = resolveErrorMessage(err);
|
||
} finally {
|
||
commandLoading.value = false;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
void loadChiefCenter();
|
||
});
|
||
|
||
watch(
|
||
() => data.value?.me.id,
|
||
(generalId) => {
|
||
if (generalId && !commandTable.value) {
|
||
void loadCommandTable(generalId);
|
||
}
|
||
}
|
||
);
|
||
|
||
watch(
|
||
() => data.value,
|
||
(snapshot) => {
|
||
if (!snapshot) {
|
||
return;
|
||
}
|
||
if (selectedChiefLevel.value !== null) {
|
||
return;
|
||
}
|
||
const preferred =
|
||
snapshot.me.officerLevel >= 5 ? snapshot.me.officerLevel : (snapshot.chiefs[0]?.officerLevel ?? null);
|
||
selectedChiefLevel.value = preferred;
|
||
}
|
||
);
|
||
|
||
const commandLabelMap = computed(() => {
|
||
const map = new Map<string, string>();
|
||
if (!commandTable.value) {
|
||
return map;
|
||
}
|
||
for (const group of commandTable.value.general) {
|
||
for (const entry of group.values) {
|
||
map.set(entry.key, entry.name);
|
||
}
|
||
}
|
||
for (const group of commandTable.value.nation) {
|
||
for (const entry of group.values) {
|
||
map.set(entry.key, entry.name);
|
||
}
|
||
}
|
||
return map;
|
||
});
|
||
|
||
const selectedChief = computed<ChiefEntry | null>(() => {
|
||
const snapshot = data.value;
|
||
if (!snapshot) {
|
||
return null;
|
||
}
|
||
const targetLevel = selectedChiefLevel.value ?? snapshot.me.officerLevel;
|
||
let match: ChiefEntry | null = null;
|
||
for (const chief of snapshot.chiefs) {
|
||
if (chief.officerLevel === targetLevel) {
|
||
match = chief;
|
||
break;
|
||
}
|
||
}
|
||
return match;
|
||
});
|
||
|
||
const isEditingAllowed = computed(() => {
|
||
if (!data.value || !selectedChief.value) {
|
||
return false;
|
||
}
|
||
return data.value.me.officerLevel >= 5 && data.value.me.officerLevel === selectedChief.value.officerLevel;
|
||
});
|
||
|
||
const buildTurnRows = (chief: ChiefEntry): TurnRow[] => {
|
||
const turnTermMinutes = data.value?.turnTermMinutes ?? 0;
|
||
const labelMap = commandLabelMap.value;
|
||
const baseTime = chief.turnTime ? new Date(chief.turnTime) : null;
|
||
|
||
return chief.turns.map((turn, idx) => {
|
||
const turnDate =
|
||
baseTime && Number.isFinite(turnTermMinutes) ? addMinutes(baseTime, idx * turnTermMinutes) : null;
|
||
const timeLabel = turnDate
|
||
? turnTermMinutes >= 5
|
||
? `${String(turnDate.getUTCHours()).padStart(2, '0')}:${String(turnDate.getUTCMinutes()).padStart(2, '0')}`
|
||
: `${String(turnDate.getUTCMinutes()).padStart(2, '0')}:${String(turnDate.getUTCSeconds()).padStart(2, '0')}`
|
||
: '--:--';
|
||
const actionLabel = labelMap.get(turn.action) ?? turn.action;
|
||
return {
|
||
index: turn.index,
|
||
time: timeLabel,
|
||
action: actionLabel,
|
||
label: actionLabel,
|
||
actionCode: turn.action,
|
||
args: turn.args,
|
||
isRest: turn.action === '휴식',
|
||
};
|
||
});
|
||
};
|
||
|
||
const chiefViews = computed(() => {
|
||
if (!data.value) {
|
||
return [] as Array<ChiefEntry & { rows: TurnRow[]; officerLevelText: string }>;
|
||
}
|
||
return data.value.chiefs.map((chief) => ({
|
||
...chief,
|
||
officerLevelText: formatOfficerLevelText(chief.officerLevel, data.value?.nation.level),
|
||
rows: buildTurnRows(chief),
|
||
}));
|
||
});
|
||
|
||
const selectedChiefRows = computed(() => {
|
||
if (!selectedChief.value) {
|
||
return [] as TurnRow[];
|
||
}
|
||
return buildTurnRows(selectedChief.value);
|
||
});
|
||
|
||
const updateMyTurns = (turns: Array<{ index: number; action: string; args?: unknown }>, revision: number) => {
|
||
if (!data.value) {
|
||
return;
|
||
}
|
||
const myLevel = data.value.me.officerLevel;
|
||
const entry = data.value.chiefs.find((chief) => chief.officerLevel === myLevel);
|
||
if (!entry) {
|
||
return;
|
||
}
|
||
entry.turns = turns.map((turn) => ({ ...turn, args: turn.args ?? {} }));
|
||
entry.revision = revision;
|
||
};
|
||
|
||
const shiftTurns = async (amount: number) => {
|
||
if (!data.value || !isEditingAllowed.value) {
|
||
return;
|
||
}
|
||
try {
|
||
const result = await trpc.turns.reserved.shiftNation.mutate({
|
||
generalId: data.value.me.id,
|
||
amount,
|
||
expectedRevision: selectedChief.value?.revision ?? 0,
|
||
});
|
||
updateMyTurns(result.turns, result.revision);
|
||
} catch (err) {
|
||
await loadChiefCenter();
|
||
error.value = resolveErrorMessage(err);
|
||
}
|
||
};
|
||
|
||
const reserveTurns = async (entries: CommandPatternEntry[]) => {
|
||
if (!data.value || !isEditingAllowed.value) return;
|
||
try {
|
||
const result = await trpc.turns.reserved.setNationBulk.mutate({
|
||
generalId: data.value.me.id,
|
||
entries,
|
||
expectedRevision: selectedChief.value?.revision ?? 0,
|
||
});
|
||
updateMyTurns(result.turns, result.revision);
|
||
} catch (err) {
|
||
await loadChiefCenter();
|
||
error.value = resolveErrorMessage(err);
|
||
}
|
||
};
|
||
|
||
const repeatTurns = async (amount: number) => {
|
||
if (!data.value || !isEditingAllowed.value) return;
|
||
try {
|
||
const result = await trpc.turns.reserved.repeatNation.mutate({
|
||
generalId: data.value.me.id,
|
||
amount,
|
||
expectedRevision: selectedChief.value?.revision ?? 0,
|
||
});
|
||
updateMyTurns(result.turns, result.revision);
|
||
} catch (err) {
|
||
await loadChiefCenter();
|
||
error.value = resolveErrorMessage(err);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<main class="chief-page">
|
||
<header class="chief-top legacy-bg0">
|
||
<button class="chief-nav" type="button" @click="router.push('/')">돌아가기</button>
|
||
<button class="chief-nav" @click="loadChiefCenter">갱신</button>
|
||
<h1>사령부</h1>
|
||
<div></div>
|
||
<div></div>
|
||
</header>
|
||
|
||
<div v-if="error" class="game-feedback game-feedback--error" role="alert">{{ error }}</div>
|
||
|
||
<section v-if="loading && !data" class="loading-panel"><SkeletonLines :lines="5" /></section>
|
||
|
||
<section v-else-if="data && isMobile" class="layout-mobile">
|
||
<ChiefCommandEditor
|
||
v-if="isEditingAllowed && selectedChief"
|
||
:officer-level-text="formatOfficerLevelText(selectedChief.officerLevel, data.nation.level)"
|
||
:name="selectedChief.name"
|
||
:npc-state="selectedChief.npcState"
|
||
:rows="selectedChiefRows"
|
||
:command-table="commandTable"
|
||
:loading="commandLoading"
|
||
:general-id="data.me.id"
|
||
:officer-level="selectedChief.officerLevel"
|
||
:mobile="true"
|
||
:map-data="worldMap"
|
||
:map-layout="mapLayout"
|
||
@reserve-bulk="reserveTurns"
|
||
@shift="shiftTurns"
|
||
@repeat="repeatTurns"
|
||
/>
|
||
<div v-else-if="selectedChief" class="mobile-readonly">
|
||
<div class="mobile-turn-index legacy-bg0">
|
||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||
</div>
|
||
<ChiefTurnCard
|
||
:officer-level-text="formatOfficerLevelText(selectedChief.officerLevel, data.nation.level)"
|
||
:name="selectedChief.name"
|
||
:npc-state="selectedChief.npcState"
|
||
:rows="selectedChiefRows"
|
||
/>
|
||
<div class="mobile-turn-index legacy-bg0">
|
||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="chief-overview-frame">
|
||
<div class="chief-overview">
|
||
<div
|
||
v-for="(rowChiefs, rowIndex) in [chiefViews.slice(0, 4), chiefViews.slice(4, 8)]"
|
||
:key="rowIndex"
|
||
class="chief-overview-row"
|
||
>
|
||
<div class="overview-turn-index legacy-bg0" :aria-label="`${rowIndex + 1}행 턴 번호`">
|
||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||
</div>
|
||
<template v-for="chief in rowChiefs" :key="chief.officerLevel">
|
||
<ChiefTurnCard
|
||
v-if="chief.name"
|
||
:officer-level-text="chief.officerLevelText"
|
||
:name="chief.name"
|
||
:npc-state="chief.npcState"
|
||
:rows="chief.rows"
|
||
:compact="true"
|
||
:selected="chief.officerLevel === selectedChief?.officerLevel"
|
||
:is-me="chief.officerLevel === data.me.officerLevel"
|
||
:clickable="true"
|
||
:turn-time-label="chief.rows[0]?.time"
|
||
@select="selectedChiefLevel = chief.officerLevel"
|
||
/>
|
||
<div v-else class="empty-chief-slot" aria-hidden="true"></div>
|
||
</template>
|
||
<div class="overview-turn-index legacy-bg0" :aria-label="`${rowIndex + 1}행 턴 번호`">
|
||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-else-if="data" class="layout-desktop">
|
||
<div
|
||
v-for="(rowChiefs, rowIndex) in [chiefViews.slice(0, 4), chiefViews.slice(4, 8)]"
|
||
:key="rowIndex"
|
||
class="chief-grid-row"
|
||
>
|
||
<div class="turn-index-gutter legacy-bg0">
|
||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||
</div>
|
||
<template v-for="chief in rowChiefs" :key="chief.officerLevel">
|
||
<ChiefCommandEditor
|
||
v-if="chief.officerLevel === data.me.officerLevel && data.me.officerLevel >= 5"
|
||
:officer-level-text="chief.officerLevelText"
|
||
:name="chief.name"
|
||
:npc-state="chief.npcState"
|
||
:rows="chief.rows"
|
||
:command-table="commandTable"
|
||
:loading="commandLoading"
|
||
:general-id="data.me.id"
|
||
:officer-level="chief.officerLevel"
|
||
:map-data="worldMap"
|
||
:map-layout="mapLayout"
|
||
@reserve-bulk="reserveTurns"
|
||
@shift="shiftTurns"
|
||
@repeat="repeatTurns"
|
||
/>
|
||
<ChiefTurnCard
|
||
v-else-if="chief.name"
|
||
:officer-level-text="chief.officerLevelText"
|
||
:name="chief.name"
|
||
:npc-state="chief.npcState"
|
||
:rows="chief.rows"
|
||
/>
|
||
<div v-else class="empty-chief-slot" aria-hidden="true"></div>
|
||
</template>
|
||
<div class="turn-index-gutter legacy-bg0">
|
||
<span></span><span v-for="idx in data.maxTurns" :key="idx">{{ idx }}</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div class="legacy-copy-helpers" aria-hidden="true">
|
||
<template v-for="idx in 8" :key="idx">
|
||
<button type="button" tabindex="-1">복사하기</button>
|
||
<button type="button" tabindex="-1">텍스트 복사</button>
|
||
</template>
|
||
</div>
|
||
<footer class="chief-footer legacy-bg0">
|
||
<button class="chief-nav" type="button" @click="router.push('/')">돌아가기</button>
|
||
</footer>
|
||
</main>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.layout-desktop {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
|
||
gap: 0;
|
||
}
|
||
|
||
.chief-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 0;
|
||
}
|
||
|
||
.chief-side {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.layout-mobile {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.chief-overview {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 125px);
|
||
gap: 0;
|
||
}
|
||
|
||
.command-selected {
|
||
border: 1px solid rgba(201, 164, 90, 0.3);
|
||
padding: 8px;
|
||
display: grid;
|
||
gap: 6px;
|
||
font-size: 0.75rem;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.command-selected .label {
|
||
color: rgba(232, 221, 196, 0.6);
|
||
}
|
||
|
||
.command-selected .meta {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 0.7rem;
|
||
color: rgba(232, 221, 196, 0.6);
|
||
}
|
||
|
||
.turn-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.turn-actions button {
|
||
border: 1px solid rgba(201, 164, 90, 0.3);
|
||
padding: 4px 8px;
|
||
font-size: 0.75rem;
|
||
background: rgba(12, 12, 12, 0.6);
|
||
color: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.turn-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.turn-item {
|
||
border: 1px solid rgba(201, 164, 90, 0.25);
|
||
padding: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.turn-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.turn-index {
|
||
color: rgba(232, 221, 196, 0.6);
|
||
}
|
||
|
||
.turn-time {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.turn-action {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.turn-buttons {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.turn-buttons button {
|
||
border: 1px solid rgba(201, 164, 90, 0.3);
|
||
padding: 4px 8px;
|
||
font-size: 0.7rem;
|
||
background: rgba(12, 12, 12, 0.6);
|
||
color: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.turn-buttons .ghost {
|
||
background: rgba(16, 16, 16, 0.6);
|
||
}
|
||
|
||
.muted {
|
||
color: rgba(232, 221, 196, 0.6);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.chief-page {
|
||
box-sizing: border-box;
|
||
width: 500px;
|
||
min-width: 500px;
|
||
padding: 0;
|
||
gap: 0;
|
||
}
|
||
|
||
.chief-overview {
|
||
grid-template-columns: repeat(4, 125px);
|
||
}
|
||
|
||
.turn-list {
|
||
gap: 0;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.turn-item {
|
||
min-height: 24px;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
gap: 2px;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.turn-info {
|
||
flex: 1;
|
||
flex-wrap: nowrap;
|
||
gap: 5px;
|
||
}
|
||
|
||
.turn-buttons {
|
||
gap: 2px;
|
||
}
|
||
|
||
.turn-buttons button {
|
||
min-height: 20px;
|
||
padding: 1px 5px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024.01px) {
|
||
.chief-page {
|
||
box-sizing: border-box;
|
||
width: 1000px;
|
||
max-width: 1000px;
|
||
min-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 0;
|
||
gap: 0;
|
||
}
|
||
}
|
||
|
||
.chief-page {
|
||
margin: 0 auto;
|
||
color: #fff;
|
||
font: 14px/21px var(--sammo-font-sans);
|
||
}
|
||
.chief-top {
|
||
height: 32px;
|
||
display: grid;
|
||
grid-template-columns: 90px 90px 1fr 90px 90px;
|
||
background-color: transparent;
|
||
}
|
||
.chief-top h1 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
font-weight: 400;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
}
|
||
.chief-nav {
|
||
box-sizing: border-box;
|
||
height: 32px;
|
||
margin-right: 2px;
|
||
border: 0;
|
||
border-radius: 3px;
|
||
display: grid;
|
||
place-items: center;
|
||
background: #00582c;
|
||
color: #fff;
|
||
font: inherit;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
.layout-desktop {
|
||
display: block;
|
||
}
|
||
.chief-footer {
|
||
min-height: 56px;
|
||
padding-top: 20px;
|
||
}
|
||
.chief-footer .chief-nav {
|
||
width: 70px;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.chief-page {
|
||
width: 500px;
|
||
min-width: 500px;
|
||
}
|
||
.chief-top {
|
||
grid-template-columns: 89px 89px 1fr 0 0;
|
||
}
|
||
}
|
||
|
||
/* Ref PageChiefCenter의 24 + 4×238 + 24 행렬과 500px 축소 overview 계약입니다. */
|
||
.layout-desktop {
|
||
display: block;
|
||
}
|
||
.chief-grid-row {
|
||
display: grid;
|
||
grid-template-columns: 24px repeat(4, 238px) 24px;
|
||
align-items: start;
|
||
}
|
||
.turn-index-gutter {
|
||
display: grid;
|
||
grid-template-rows: 24px repeat(12, 30px);
|
||
text-align: center;
|
||
}
|
||
.turn-index-gutter span {
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.chief-grid-row :deep(.chief-card) {
|
||
border: 0;
|
||
box-shadow: none;
|
||
}
|
||
.chief-grid-row :deep(.chief-header) {
|
||
box-sizing: border-box;
|
||
height: 24px;
|
||
min-height: 24px;
|
||
justify-content: center;
|
||
padding: 0;
|
||
background-color: transparent;
|
||
font-size: 16.8px;
|
||
line-height: 14.7px;
|
||
}
|
||
.chief-grid-row :deep(.chief-title) {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
}
|
||
.chief-grid-row :deep(.chief-level),
|
||
.chief-grid-row :deep(.chief-name) {
|
||
font-size: 16.8px;
|
||
font-weight: 400;
|
||
line-height: 14.7px;
|
||
color: inherit;
|
||
}
|
||
.chief-grid-row :deep(.chief-level)::after {
|
||
content: ':';
|
||
}
|
||
.chief-grid-row :deep(.chief-row) {
|
||
box-sizing: border-box;
|
||
min-height: 30px;
|
||
height: 30px;
|
||
grid-template-columns: 40px 198px;
|
||
gap: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
font-size: 14px;
|
||
line-height: 14.7px;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
.chief-grid-row :deep(.row-index) {
|
||
display: none;
|
||
}
|
||
.chief-grid-row :deep(.row-time),
|
||
.chief-grid-row :deep(.row-action) {
|
||
height: 30px;
|
||
display: grid;
|
||
place-items: center;
|
||
line-height: 30px;
|
||
}
|
||
.chief-grid-row :deep(.row-time) {
|
||
background: #000;
|
||
}
|
||
.chief-grid-row :deep(.chief-row:nth-child(odd)) {
|
||
background-color: rgb(12 26 65);
|
||
}
|
||
.chief-grid-row :deep(.chief-row:nth-child(even)) {
|
||
background-color: rgb(7 22 56);
|
||
}
|
||
.chief-grid-row :deep(.chief-row:nth-child(odd) .row-action) {
|
||
background-color: rgb(12 26 65);
|
||
}
|
||
.chief-grid-row :deep(.chief-row:nth-child(even) .row-action) {
|
||
background-color: rgb(7 22 56);
|
||
}
|
||
|
||
.layout-mobile {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
.chief-overview-frame {
|
||
width: 500px;
|
||
height: 310px;
|
||
margin-top: 0;
|
||
margin-bottom: 11px;
|
||
overflow: hidden;
|
||
}
|
||
.chief-overview {
|
||
width: 500px;
|
||
height: 310px;
|
||
margin-top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.chief-overview-row {
|
||
width: 500px;
|
||
height: 155px;
|
||
display: grid;
|
||
grid-template-columns: 12px repeat(4, 119px) 12px;
|
||
}
|
||
.chief-overview :deep(.chief-card) {
|
||
width: 119px;
|
||
height: 155px;
|
||
border: 0;
|
||
border-left: 1px solid #fff;
|
||
box-shadow: none;
|
||
box-sizing: border-box;
|
||
}
|
||
.chief-overview :deep(.row-index) {
|
||
display: none;
|
||
}
|
||
.chief-overview :deep(.chief-card.compact .chief-row) {
|
||
grid-template-columns: 38px minmax(0, 1fr);
|
||
height: 11.25px !important;
|
||
min-height: 0;
|
||
padding: 0;
|
||
gap: 0;
|
||
text-align: center;
|
||
font-size: 0.55rem;
|
||
line-height: 11.25px !important;
|
||
}
|
||
.chief-overview :deep(.chief-card.compact .chief-header) {
|
||
box-sizing: border-box;
|
||
height: 20px !important;
|
||
min-height: 20px !important;
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 10px 10px;
|
||
line-height: 10px;
|
||
}
|
||
.chief-overview :deep(.compact-name),
|
||
.chief-overview :deep(.compact-meta) {
|
||
height: 10px;
|
||
line-height: 10px;
|
||
}
|
||
.chief-overview :deep(.row-time),
|
||
.chief-overview :deep(.row-action) {
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.overview-turn-index {
|
||
display: grid;
|
||
grid-template-rows: 20px repeat(12, 11.25px);
|
||
width: 12px;
|
||
height: 155px;
|
||
color: #fff;
|
||
font-size: 0.55rem;
|
||
line-height: 11.25px;
|
||
text-align: center;
|
||
}
|
||
.overview-turn-index span {
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.mobile-readonly {
|
||
width: 404px;
|
||
height: 420px;
|
||
margin: 10px 0 0 96px;
|
||
display: grid;
|
||
grid-template-columns: 24px 260px 24px 96px;
|
||
overflow: hidden;
|
||
}
|
||
.mobile-readonly :deep(.chief-card) {
|
||
width: 260px;
|
||
}
|
||
.mobile-readonly :deep(.chief-header) {
|
||
height: 24px;
|
||
min-height: 24px;
|
||
justify-content: center;
|
||
padding: 0;
|
||
background-color: transparent;
|
||
font-size: 16.8px;
|
||
line-height: 14.7px;
|
||
}
|
||
.mobile-readonly :deep(.chief-title) {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
}
|
||
.mobile-readonly :deep(.chief-level),
|
||
.mobile-readonly :deep(.chief-name) {
|
||
font-size: 16.8px;
|
||
font-weight: 400;
|
||
line-height: 14.7px;
|
||
color: inherit;
|
||
}
|
||
.mobile-readonly :deep(.chief-level)::after {
|
||
content: ':';
|
||
}
|
||
.mobile-readonly :deep(.chief-row) {
|
||
height: 30px;
|
||
grid-template-columns: 43.33px 216.67px;
|
||
padding: 0;
|
||
font-size: 14px;
|
||
line-height: 14.7px;
|
||
color: #fff;
|
||
}
|
||
.mobile-readonly :deep(.chief-row:nth-child(odd)) {
|
||
background-color: rgb(12 26 65);
|
||
}
|
||
.mobile-readonly :deep(.chief-row:nth-child(even)) {
|
||
background-color: rgb(7 22 56);
|
||
}
|
||
.mobile-readonly :deep(.row-time),
|
||
.mobile-readonly :deep(.row-action) {
|
||
height: 30px;
|
||
display: grid;
|
||
place-items: center;
|
||
line-height: 30px;
|
||
}
|
||
.mobile-readonly :deep(.row-time) {
|
||
background-color: #000;
|
||
}
|
||
.mobile-readonly :deep(.chief-row:nth-child(odd) .row-action) {
|
||
background-color: rgb(12 26 65);
|
||
}
|
||
.mobile-readonly :deep(.chief-row:nth-child(even) .row-action) {
|
||
background-color: rgb(7 22 56);
|
||
}
|
||
.mobile-readonly :deep(.row-index) {
|
||
display: none;
|
||
}
|
||
.mobile-turn-index {
|
||
display: grid;
|
||
grid-template-rows: 24px repeat(12, 30px);
|
||
text-align: center;
|
||
}
|
||
.mobile-turn-index span {
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
|
||
.legacy-copy-helpers {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.chief-overview {
|
||
width: 500px;
|
||
}
|
||
}
|
||
|
||
.empty-chief-slot {
|
||
min-width: 0;
|
||
background-color: #071638;
|
||
background-image: var(--sammo-texture-blue);
|
||
}
|
||
.chief-grid-row > .empty-chief-slot {
|
||
height: 384px;
|
||
}
|
||
.chief-overview-row > .empty-chief-slot {
|
||
width: 119px;
|
||
height: 155px;
|
||
}
|
||
</style>
|