825 lines
45 KiB
Svelte
825 lines
45 KiB
Svelte
<script lang="ts">
|
||
import { onMount } from 'svelte';
|
||
import { page } from '$app/stores';
|
||
import cardSummary from '$lib/data/cards-summary.json';
|
||
import boardSummary from '$lib/data/boards-summary.json';
|
||
import memorySummary from '$lib/data/memory-summary.json';
|
||
import exactChartCatalog from '$lib/data/exact-chart-catalog.json';
|
||
import { loadExactSongChart } from '$lib/data/chart-loader.ts';
|
||
import { createInitialReleaseClock, synchronizeReleaseClock } from '$lib/data/release-clock.ts';
|
||
import { releasedSongCharts } from '$lib/data/song-release.ts';
|
||
import PresetManager from '$lib/components/PresetManager.svelte';
|
||
import { calculateBoardEffects, calculateUnitPower, countOptimizationCandidates, memoryParameterPermil, perfectNoteScoreFromPower, toOptimizerCard } from '$lib/engine/index.ts';
|
||
import type { CooldownReduction, EffectiveSkillWindow, ExactOptimizationResult, ExactSongChart, OptimizationProgress, ScoreAchievementProbabilities, SkillWindow } from '$lib/engine/index.ts';
|
||
import { USER_DATA_STORAGE_KEY } from '$lib/storage/browser-storage';
|
||
import { createScoreOptimizerWorker } from '$lib/workers/create-score-optimizer-worker.ts';
|
||
|
||
type CardRow = (typeof cardSummary.cards)[number];
|
||
type DifficultyKey = 'hard' | 'expert';
|
||
type CollectionState = Record<string, { owned?: boolean; awakening?: number }>;
|
||
type MemberBoards = Record<string, string[]>;
|
||
type BoardCards = Record<string, Record<string, string>>;
|
||
type DisplayEffectiveWindow = SkillWindow & {
|
||
baseScoreUpPercent: number;
|
||
minScoreUpPercent: number;
|
||
maxScoreUpPercent: number;
|
||
maxOverlapCount: number;
|
||
};
|
||
type SavedAnalysisState = {
|
||
schemaVersion: 2;
|
||
songId: string;
|
||
difficulty: DifficultyKey;
|
||
cardIds: string[];
|
||
awakenings: number[];
|
||
fixedCooldownReductions?: (CooldownReduction | null)[];
|
||
leaderCharacterId: string;
|
||
leaderOutfitCardId: string;
|
||
};
|
||
|
||
const ANALYSIS_STORAGE_KEY = 'holodori.analysis.v2';
|
||
const ANALYSIS_PRESET_STORAGE_KEY = 'holodori.analysis.presets.v1';
|
||
const LEGACY_ANALYSIS_STORAGE_KEY = 'holodori.analysis.v1';
|
||
const MEMBER_COLORS = ['#f08db8', '#64cbe4', '#f2b85b', '#a995f5', '#69cf9b'] as const;
|
||
const REDUCTION_LOCK_OPTIONS = [null, 0, 4, 8, 12] as const;
|
||
|
||
const fiveStarCards = cardSummary.cards.filter((card) => card.rarity === 5);
|
||
const allCharts = exactChartCatalog.charts;
|
||
const initialReleaseClock = createInitialReleaseClock($page.data?.serverNow);
|
||
let currentReleaseClock = initialReleaseClock;
|
||
let releaseNow = currentReleaseClock.now();
|
||
let charts = releasedSongCharts(allCharts, releaseNow);
|
||
let songs = Array.from(new Map(charts.map((chart) => [chart.songId, { id: chart.songId, title: chart.title }])).values());
|
||
const cardById = new Map(fiveStarCards.map((card) => [card.id, card]));
|
||
|
||
function uniqueMemberCards(cards: readonly CardRow[], limit = Number.POSITIVE_INFINITY): CardRow[] {
|
||
const memberIds = new Set<string>();
|
||
return cards.filter((card) => {
|
||
if (memberIds.has(card.characterId)) return false;
|
||
memberIds.add(card.characterId);
|
||
return true;
|
||
}).slice(0, limit);
|
||
}
|
||
|
||
const leaderMembers = uniqueMemberCards(fiveStarCards);
|
||
|
||
let collection: CollectionState = {};
|
||
let memberBoards: MemberBoards = {};
|
||
let boardCards: BoardCards = {};
|
||
let memoryCount = 0;
|
||
let memberPowerUpPercent = 0;
|
||
let selectedSongId = songs[0]?.id ?? '';
|
||
let difficulty: DifficultyKey = 'expert';
|
||
let selectedCardIds = uniqueMemberCards(fiveStarCards, 5).map((card) => card.id);
|
||
let selectedAwakenings = selectedCardIds.map(() => 5);
|
||
let fixedCooldownReductions: (CooldownReduction | null)[] = selectedCardIds.map(() => null);
|
||
let leaderCharacterId = leaderMembers[0]?.characterId ?? '';
|
||
let leaderOutfitCardId = leaderMembers[0]?.id ?? '';
|
||
let worker: Worker | null = null;
|
||
let running = false;
|
||
let progress: OptimizationProgress = { evaluatedCandidates: 0, totalCandidates: 0 };
|
||
let result: ExactOptimizationResult | null = null;
|
||
let achievementProbabilities: ScoreAchievementProbabilities | undefined;
|
||
let errorMessage = '';
|
||
let analysisReady = false;
|
||
|
||
$: charts = releasedSongCharts(allCharts, releaseNow);
|
||
$: songs = Array.from(new Map(charts.map((chart) => [chart.songId, { id: chart.songId, title: chart.title }])).values());
|
||
$: if (!songs.some((song) => song.id === selectedSongId)) selectedSongId = songs[0]?.id ?? '';
|
||
$: selectedSong = songs.find((song) => song.id === selectedSongId) ?? songs[0];
|
||
$: selectedChart = charts.find((chart) => chart.songId === selectedSongId && chart.difficulty === difficulty);
|
||
$: leaderMember = leaderMembers.find((card) => card.characterId === leaderCharacterId);
|
||
$: leaderOutfitOptions = leaderMember
|
||
? fiveStarCards.filter((card) => card.characterId === leaderCharacterId && card.details.costume)
|
||
.filter((card, index, cards) => cards.findIndex((candidate) => candidate.details.costume?.name === card.details.costume?.name) === index)
|
||
: [];
|
||
$: leaderOutfit = cardById.get(leaderOutfitCardId)?.details.costume ?? null;
|
||
$: leaderOutfitDescription = (leaderOutfit?.description ?? '')
|
||
.replace(/\[[^\]]+\]/g, '')
|
||
.replace(/\s+/g, ' ')
|
||
.trim();
|
||
$: selectedSourceCards = selectedCardIds.map((id) => cardById.get(id)).filter((card): card is CardRow => Boolean(card));
|
||
$: connectionCards = cardSummary.cards
|
||
.filter((card) => card.details.connect.length > 0)
|
||
.map((card) => ({
|
||
id: card.id,
|
||
awakening: collection[card.id]?.awakening ?? 0,
|
||
connect: card.details.connect
|
||
}));
|
||
$: boardEffects = calculateBoardEffects(boardSummary, memberBoards, selectedSourceCards, leaderCharacterId, selectedChart, {
|
||
placements: boardCards,
|
||
cards: connectionCards
|
||
});
|
||
$: memoryPermil = memoryParameterPermil(memoryCount, memorySummary.effects);
|
||
$: unitPower = (() => {
|
||
try {
|
||
return calculateUnitPower(selectedCardIds.map((id, index) => ({
|
||
card: cardById.get(id)!,
|
||
awakening: selectedAwakenings[index]
|
||
})), leaderOutfit, boardEffects, memoryPermil, memberPowerUpPercent);
|
||
} catch {
|
||
return { overallPower: 0, baseParameterTotal: 0, potentialTotal: 0, passiveTotal: 0, outfitTotal: 0, boardTotal: 0, memoryTotal: 0, memberPowerUpTotal: 0, outfitScoreSupportPercent: 0 };
|
||
}
|
||
})();
|
||
$: overallPower = unitPower.overallPower;
|
||
$: perfectNoteScore = perfectNoteScoreFromPower(overallPower, selectedChart?.scoreRatio ?? null);
|
||
$: timelineDuration = selectedChart?.durationSeconds ?? 0;
|
||
$: noteCountsBySecond = result ? countNotesBySecond(result, timelineDuration) : [];
|
||
$: displayedEffectiveActiveWindows = mergeEffectiveActiveWindows(result?.effectiveActiveWindows ?? []);
|
||
$: maxNotesPerSecond = Math.max(1, ...noteCountsBySecond);
|
||
$: timelineTicks = buildTimelineTicks(timelineDuration);
|
||
$: timelineWidth = Math.max(720, timelineDuration * 6);
|
||
$: candidateCount = (() => {
|
||
fixedCooldownReductions;
|
||
try {
|
||
const sourceCards = selectedSourceCards;
|
||
if (new Set(sourceCards.map((card) => card.characterId)).size !== 5) return 0;
|
||
const cards = sourceCards.map((card, index) => optimizerCardWithBoard(card, index, sourceCards));
|
||
return cards.length === 5 ? countOptimizationCandidates(cards) : 0;
|
||
} catch {
|
||
return 0;
|
||
}
|
||
})();
|
||
$: presetSnapshot = {
|
||
schemaVersion: 2,
|
||
songId: selectedSongId,
|
||
difficulty,
|
||
cardIds: selectedCardIds,
|
||
awakenings: selectedAwakenings,
|
||
fixedCooldownReductions,
|
||
leaderCharacterId,
|
||
leaderOutfitCardId
|
||
} satisfies SavedAnalysisState;
|
||
$: if (analysisReady) saveAnalysisState({
|
||
schemaVersion: 2,
|
||
songId: selectedSongId,
|
||
difficulty,
|
||
cardIds: selectedCardIds,
|
||
awakenings: selectedAwakenings,
|
||
fixedCooldownReductions,
|
||
leaderCharacterId,
|
||
leaderOutfitCardId
|
||
});
|
||
|
||
onMount(() => {
|
||
let mounted = true;
|
||
void synchronizeReleaseClock().then((clock) => {
|
||
if (!mounted) return;
|
||
currentReleaseClock = clock;
|
||
releaseNow = currentReleaseClock.now();
|
||
});
|
||
const releaseClock = window.setInterval(() => {
|
||
releaseNow = currentReleaseClock.now();
|
||
}, 1_000);
|
||
const applyStoredUserData = (stored: string | null) => {
|
||
const parsed = stored ? JSON.parse(stored) : null;
|
||
collection = parsed?.collection && typeof parsed.collection === 'object' ? parsed.collection : {};
|
||
memberBoards = parsed?.memberBoards && typeof parsed.memberBoards === 'object' ? parsed.memberBoards : {};
|
||
boardCards = parsed?.boardCards && typeof parsed.boardCards === 'object' ? parsed.boardCards : {};
|
||
memoryCount = typeof parsed?.memoryCount === 'number' && Number.isFinite(parsed.memoryCount)
|
||
? Math.max(0, Math.min(memorySummary.maxCount, Math.round(parsed.memoryCount)))
|
||
: 0;
|
||
memberPowerUpPercent = typeof parsed?.memberPowerUpPercent === 'number' && Number.isFinite(parsed.memberPowerUpPercent)
|
||
? Math.max(0, Math.min(50, parsed.memberPowerUpPercent))
|
||
: 0;
|
||
return parsed;
|
||
};
|
||
try {
|
||
const parsed = applyStoredUserData(localStorage.getItem(USER_DATA_STORAGE_KEY));
|
||
const owned = uniqueMemberCards(fiveStarCards.filter((card) => collection[card.id]?.owned), 5);
|
||
if (owned.length === 5) {
|
||
selectedCardIds = owned.map((card) => card.id);
|
||
selectedAwakenings = owned.map((card) => collection[card.id]?.awakening ?? 0);
|
||
}
|
||
} catch {
|
||
collection = {};
|
||
memberBoards = {};
|
||
boardCards = {};
|
||
memoryCount = 0;
|
||
memberPowerUpPercent = 0;
|
||
}
|
||
|
||
try {
|
||
const currentState = localStorage.getItem(ANALYSIS_STORAGE_KEY);
|
||
const legacyState = currentState ? null : localStorage.getItem(LEGACY_ANALYSIS_STORAGE_KEY);
|
||
restoreAnalysisState(currentState ?? legacyState, Boolean(legacyState));
|
||
if (legacyState) localStorage.removeItem(LEGACY_ANALYSIS_STORAGE_KEY);
|
||
} catch {
|
||
localStorage.removeItem(ANALYSIS_STORAGE_KEY);
|
||
} finally {
|
||
analysisReady = true;
|
||
}
|
||
|
||
worker = createScoreOptimizerWorker();
|
||
worker.onmessage = (event) => {
|
||
if (event.data.type === 'progress') progress = event.data.progress;
|
||
if (event.data.type === 'result') {
|
||
result = event.data.result;
|
||
achievementProbabilities = event.data.achievementProbabilities;
|
||
running = false;
|
||
}
|
||
if (event.data.type === 'error') {
|
||
errorMessage = event.data.message;
|
||
running = false;
|
||
}
|
||
};
|
||
const syncStorage = (event: StorageEvent) => {
|
||
if (event.key !== USER_DATA_STORAGE_KEY) return;
|
||
try {
|
||
applyStoredUserData(event.newValue);
|
||
result = null;
|
||
} catch {
|
||
// 다른 탭에서 쓰기가 끝나지 않은 순간에는 기존 상태를 유지한다.
|
||
}
|
||
};
|
||
window.addEventListener('storage', syncStorage);
|
||
return () => {
|
||
mounted = false;
|
||
window.clearInterval(releaseClock);
|
||
window.removeEventListener('storage', syncStorage);
|
||
worker?.terminate();
|
||
};
|
||
});
|
||
|
||
function cardLabel(card: CardRow, awakening?: number): string {
|
||
const variant = card.versionName ? ` · ${card.versionName}` : '';
|
||
const growth = awakening === undefined ? '' : ` · ${awakening === 0 ? '명함' : `${awakening}개화`}`;
|
||
return `${card.name}${variant}${growth}`;
|
||
}
|
||
|
||
function saveAnalysisState(state: SavedAnalysisState): void {
|
||
try {
|
||
localStorage.setItem(ANALYSIS_STORAGE_KEY, JSON.stringify(state));
|
||
} catch {
|
||
// 저장소 사용이 차단된 환경에서도 분석 기능은 계속 동작한다.
|
||
}
|
||
}
|
||
|
||
function normalizeAwakening(value: unknown): number {
|
||
const awakening = typeof value === 'number' && Number.isFinite(value) ? Math.round(value) : 0;
|
||
return Math.max(0, Math.min(5, awakening));
|
||
}
|
||
|
||
function restoreAnalysisState(stored: string | null, legacy = false): void {
|
||
if (!stored) return;
|
||
const state = JSON.parse(stored) as Partial<SavedAnalysisState>;
|
||
if (!legacy && state.schemaVersion !== 2) return;
|
||
if (typeof state.songId === 'string' && songs.some((song) => song.id === state.songId)) selectedSongId = state.songId;
|
||
if (state.difficulty === 'hard' || state.difficulty === 'expert') difficulty = state.difficulty;
|
||
|
||
if (Array.isArray(state.cardIds) && state.cardIds.length === 5) {
|
||
const restoredCards = state.cardIds.map((id) => cardById.get(id)).filter((card): card is CardRow => Boolean(card));
|
||
if (restoredCards.length === 5 && new Set(restoredCards.map((card) => card.characterId)).size === 5) {
|
||
selectedCardIds = restoredCards.map((card) => card.id);
|
||
selectedAwakenings = restoredCards.map((card, index) => {
|
||
if (legacy && collection[card.id]?.owned) return normalizeAwakening(collection[card.id]?.awakening);
|
||
return normalizeAwakening(state.awakenings?.[index]);
|
||
});
|
||
fixedCooldownReductions = restoredCards.map((_, index) => normalizeFixedReduction(state.fixedCooldownReductions?.[index]));
|
||
}
|
||
}
|
||
|
||
if (typeof state.leaderCharacterId === 'string' && leaderMembers.some((member) => member.characterId === state.leaderCharacterId)) {
|
||
leaderCharacterId = state.leaderCharacterId;
|
||
const validOutfit = typeof state.leaderOutfitCardId === 'string'
|
||
? cardById.get(state.leaderOutfitCardId)
|
||
: undefined;
|
||
leaderOutfitCardId = validOutfit?.characterId === leaderCharacterId && validOutfit.details.costume
|
||
? validOutfit.id
|
||
: fiveStarCards.find((card) => card.characterId === leaderCharacterId && card.details.costume)?.id ?? '';
|
||
}
|
||
}
|
||
|
||
function applyPreset(event: CustomEvent<unknown>): void {
|
||
try {
|
||
restoreAnalysisState(JSON.stringify(event.detail));
|
||
result = null;
|
||
achievementProbabilities = undefined;
|
||
errorMessage = '';
|
||
} catch {
|
||
errorMessage = '이 프리셋의 분석 조건을 불러오지 못했습니다.';
|
||
}
|
||
}
|
||
|
||
function updateAwakening(slot: number, awakening: number): void {
|
||
const normalized = normalizeAwakening(awakening);
|
||
selectedAwakenings = selectedAwakenings.map((value, index) => index === slot ? normalized : value);
|
||
result = null;
|
||
}
|
||
|
||
function normalizeFixedReduction(value: unknown): CooldownReduction | null {
|
||
return value === 0 || value === 4 || value === 8 || value === 12 ? value : null;
|
||
}
|
||
|
||
function updateFixedReduction(slot: number, reduction: CooldownReduction | null): void {
|
||
fixedCooldownReductions = fixedCooldownReductions.map((value, index) => index === slot ? reduction : value);
|
||
result = null;
|
||
}
|
||
|
||
function memberSelectedInAnotherSlot(card: CardRow, slot: number): boolean {
|
||
return selectedCardIds.some((id, index) => index !== slot && cardById.get(id)?.characterId === card.characterId);
|
||
}
|
||
|
||
function updateCard(slot: number, cardId: string): void {
|
||
selectedCardIds = selectedCardIds.map((id, index) => (index === slot ? cardId : id));
|
||
if (collection[cardId]?.owned) updateAwakening(slot, normalizeAwakening(collection[cardId]?.awakening));
|
||
result = null;
|
||
}
|
||
|
||
function updateLeader(characterId: string): void {
|
||
leaderCharacterId = characterId;
|
||
const outfit = fiveStarCards.find((card) => card.characterId === characterId && card.details.costume);
|
||
leaderOutfitCardId = outfit?.id ?? '';
|
||
result = null;
|
||
}
|
||
|
||
function updateOutfit(cardId: string): void {
|
||
leaderOutfitCardId = cardId;
|
||
result = null;
|
||
}
|
||
|
||
function optimizerCardWithBoard(card: CardRow, index: number, unitMembers: readonly CardRow[]) {
|
||
const fixedReduction = fixedCooldownReductions[index];
|
||
const adapted = toOptimizerCard(
|
||
card,
|
||
selectedAwakenings[index] ?? 0,
|
||
fixedReduction === null || fixedReduction === undefined
|
||
? boardEffects.allowedCooldownReductionsByCardId[card.id]
|
||
: [fixedReduction],
|
||
unitMembers
|
||
);
|
||
const activationRate = boardEffects.activationRateUpByCardId[card.id] ?? 0;
|
||
return {
|
||
...adapted,
|
||
active: {
|
||
...adapted.active,
|
||
probabilityPercent: (adapted.active.probabilityPercent ?? 100) * (1 + activationRate / 100)
|
||
},
|
||
scoreSupportPercent: unitPower.outfitScoreSupportPercent + boardEffects.scoreSupportPercent
|
||
};
|
||
}
|
||
|
||
async function analyze(): Promise<void> {
|
||
errorMessage = '';
|
||
result = null;
|
||
achievementProbabilities = undefined;
|
||
if (!worker || !selectedSong || !selectedChart) return;
|
||
if (new Set(selectedCardIds).size !== 5) {
|
||
errorMessage = '서로 다른 카드 5장을 선택해 주세요.';
|
||
return;
|
||
}
|
||
const selectedCards = selectedCardIds.map((id) => cardById.get(id));
|
||
if (new Set(selectedCards.map((card) => card?.characterId)).size !== 5) {
|
||
errorMessage = '같은 멤버의 일반 카드와 이격 카드는 함께 편성할 수 없습니다.';
|
||
return;
|
||
}
|
||
const unitMembers = selectedCards.filter((card): card is CardRow => Boolean(card));
|
||
|
||
try {
|
||
const cards = selectedCardIds.map((id, index) => {
|
||
const card = cardById.get(id);
|
||
if (!card) throw new Error('선택한 카드 정보를 찾을 수 없습니다.');
|
||
return optimizerCardWithBoard(card, index, unitMembers);
|
||
});
|
||
if (!Number.isFinite(overallPower) || overallPower <= 0) throw new Error('선택한 카드의 종합력을 계산하지 못했습니다.');
|
||
const chart = await loadExactSongChart(selectedChart.path);
|
||
running = true;
|
||
progress = { evaluatedCandidates: 0, totalCandidates: countOptimizationCandidates(cards) };
|
||
worker.postMessage({
|
||
type: 'optimize-exact',
|
||
cards,
|
||
chart,
|
||
perfectNoteScore,
|
||
directSongScoreBonusPercent: boardEffects.directSongScoreBonusPercent,
|
||
includeAchievementProbabilities: true
|
||
});
|
||
} catch (error) {
|
||
errorMessage = error instanceof Error ? error.message : '분석 입력을 준비하지 못했습니다.';
|
||
}
|
||
}
|
||
|
||
function resultCardName(cardId: string): string {
|
||
const card = cardById.get(cardId);
|
||
return card ? cardLabel(card) : cardId;
|
||
}
|
||
|
||
function probabilityLabel(value: number | undefined): string {
|
||
if (value === undefined) return '—';
|
||
if (value <= 0) return '0%';
|
||
if (value < 0.000001) return '<0.0001%';
|
||
if (value < 0.0001) return `${(value * 100).toFixed(4)}%`;
|
||
if (value < 0.01) return `${(value * 100).toFixed(2)}%`;
|
||
return `${(value * 100).toFixed(1)}%`;
|
||
}
|
||
|
||
function scoreThreshold(maximumScore: number, ratio: number): string {
|
||
return Math.ceil(maximumScore * ratio).toLocaleString('ko-KR');
|
||
}
|
||
|
||
function countNotesBySecond(scoreResult: ExactOptimizationResult, durationSeconds: number): number[] {
|
||
const counts = Array.from({ length: Math.ceil(durationSeconds) }, () => 0);
|
||
for (const note of scoreResult.notes) {
|
||
const second = Math.floor(note.timeSeconds);
|
||
if (second >= 0 && second < counts.length) counts[second] += 1;
|
||
}
|
||
return counts;
|
||
}
|
||
|
||
function buildTimelineTicks(durationSeconds: number): number[] {
|
||
if (durationSeconds <= 0) return [];
|
||
const interval = 10;
|
||
const ticks = Array.from({ length: Math.floor(durationSeconds / interval) + 1 }, (_, index) => index * interval);
|
||
if (ticks.at(-1) !== durationSeconds) ticks.push(durationSeconds);
|
||
return ticks;
|
||
}
|
||
|
||
function timelinePosition(seconds: number): number {
|
||
return timelineDuration > 0 ? Math.max(0, Math.min(100, seconds / timelineDuration * 100)) : 0;
|
||
}
|
||
|
||
function skillWindowStyle(startSeconds: number, endSeconds: number): string {
|
||
return `left: ${timelinePosition(startSeconds)}%; width: ${Math.max(0, timelinePosition(endSeconds) - timelinePosition(startSeconds))}%;`;
|
||
}
|
||
|
||
function timelineTrackStyle(): string {
|
||
return `width: ${timelineWidth}px; --time-grid-step: ${timelinePosition(10)}%;`;
|
||
}
|
||
|
||
function memberColor(cardId: string): string {
|
||
const index = result?.order.indexOf(cardId) ?? -1;
|
||
return MEMBER_COLORS[index >= 0 ? index % MEMBER_COLORS.length : 0];
|
||
}
|
||
|
||
function coloredWindowStyle(window: SkillWindow): string {
|
||
return `${skillWindowStyle(window.startSeconds, window.endSeconds)} --member-color: ${memberColor(window.cardId)};`;
|
||
}
|
||
|
||
function mergeEffectiveActiveWindows(windows: readonly EffectiveSkillWindow[]): DisplayEffectiveWindow[] {
|
||
const merged: DisplayEffectiveWindow[] = [];
|
||
for (const window of windows) {
|
||
const previous = merged.at(-1);
|
||
if (previous?.cardId === window.cardId && Math.abs(previous.endSeconds - window.startSeconds) < 0.001) {
|
||
previous.endSeconds = window.endSeconds;
|
||
previous.minScoreUpPercent = Math.min(previous.minScoreUpPercent, window.scoreUpPercent);
|
||
previous.maxScoreUpPercent = Math.max(previous.maxScoreUpPercent, window.scoreUpPercent);
|
||
previous.maxOverlapCount = Math.max(previous.maxOverlapCount, window.overlapCount);
|
||
continue;
|
||
}
|
||
merged.push({
|
||
...window,
|
||
minScoreUpPercent: window.scoreUpPercent,
|
||
maxScoreUpPercent: window.scoreUpPercent,
|
||
maxOverlapCount: window.overlapCount
|
||
});
|
||
}
|
||
return merged;
|
||
}
|
||
|
||
function effectivePercentLabel(window: DisplayEffectiveWindow): string {
|
||
const minimum = Number(window.minScoreUpPercent.toFixed(1));
|
||
const maximum = Number(window.maxScoreUpPercent.toFixed(1));
|
||
return minimum === maximum ? `${minimum}%` : `${minimum}~${maximum}%`;
|
||
}
|
||
|
||
function formatSeconds(seconds: number): string {
|
||
return `${Number(seconds.toFixed(1)).toLocaleString('ko-KR')}초`;
|
||
}
|
||
</script>
|
||
|
||
<svelte:head><title>배치 분석 · 홀로도리 계산기</title></svelte:head>
|
||
|
||
<main>
|
||
<header class="page-header">
|
||
<div>
|
||
<h1>배치 분석</h1>
|
||
<p class="page-description">특정 악곡과 카드 조합에서 최고 점수를 낼 수 있는 스페셜 발동 순서와 빈도 감소 조합을 찾습니다.</p>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="panel inputs" aria-labelledby="input-title">
|
||
<div class="section-title">
|
||
<div><span>01</span><h2 id="input-title">분석 조건</h2></div>
|
||
<strong>{candidateCount.toLocaleString('ko-KR')}개 후보</strong>
|
||
</div>
|
||
|
||
<div class="song-fields">
|
||
<label>악곡
|
||
<select bind:value={selectedSongId} on:change={() => result = null}>
|
||
{#each songs as song}<option value={song.id}>{song.title}</option>{/each}
|
||
</select>
|
||
</label>
|
||
<label>난이도
|
||
<select bind:value={difficulty} on:change={() => result = null}>
|
||
<option value="expert">Expert</option>
|
||
<option value="hard">Hard</option>
|
||
</select>
|
||
</label>
|
||
<div class="power-summary"><span>자동 계산 종합력</span><strong>{overallPower.toLocaleString('ko-KR')}</strong></div>
|
||
<div class="chart-meta"><span>길이 {selectedChart?.durationSeconds ?? 0}초</span><span>노트 {selectedChart?.totalNotes?.toLocaleString('ko-KR') ?? 0}개</span><span>1노트 {Math.ceil(perfectNoteScore).toLocaleString('ko-KR')}점</span>{#if boardEffects.directSongScoreBonusPercent > 0}<span>가창 보너스 {boardEffects.directSongScoreBonusPercent}%</span>{/if}</div>
|
||
</div>
|
||
|
||
<div class="card-fields">
|
||
<div class="card-field-header" aria-hidden="true">
|
||
<span>카드 선택</span>
|
||
<span>개화</span>
|
||
<span>빈도 감소 고정</span>
|
||
</div>
|
||
{#each selectedCardIds as selectedId, slot}
|
||
<div class="card-field">
|
||
<label><span>{slot + 1}번 선택</span>
|
||
<select value={selectedId} on:change={(event) => updateCard(slot, event.currentTarget.value)}>
|
||
{#each fiveStarCards as card}
|
||
<option value={card.id} disabled={memberSelectedInAnotherSlot(card, slot)}>{collection[card.id]?.owned ? '● ' : ''}{cardLabel(card)}</option>
|
||
{/each}
|
||
</select>
|
||
</label>
|
||
<div class="awakening">
|
||
<div class="awakening-stepper">
|
||
<button
|
||
type="button"
|
||
disabled={selectedAwakenings[slot] <= 0}
|
||
aria-label={`${slot + 1}번 카드 개화 단계 낮추기`}
|
||
on:click={() => updateAwakening(slot, selectedAwakenings[slot] - 1)}
|
||
>‹</button>
|
||
<strong aria-live="polite">{selectedAwakenings[slot]}</strong>
|
||
<button
|
||
type="button"
|
||
disabled={selectedAwakenings[slot] >= 5}
|
||
aria-label={`${slot + 1}번 카드 개화 단계 높이기`}
|
||
on:click={() => updateAwakening(slot, selectedAwakenings[slot] + 1)}
|
||
>›</button>
|
||
</div>
|
||
</div>
|
||
<div class="cooldown-lock">
|
||
<div class="reduction-options">
|
||
{#each REDUCTION_LOCK_OPTIONS as reduction}
|
||
<button
|
||
type="button"
|
||
class:active={fixedCooldownReductions[slot] === reduction}
|
||
aria-pressed={fixedCooldownReductions[slot] === reduction}
|
||
on:click={() => updateFixedReduction(slot, reduction)}
|
||
>{reduction === null ? '미사용' : `${reduction}%`}</button>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
<div class="leader-fields">
|
||
<label>리더
|
||
<select value={leaderCharacterId} on:change={(event) => updateLeader(event.currentTarget.value)}>
|
||
{#each leaderMembers as member}<option value={member.characterId}>{member.name}</option>{/each}
|
||
</select>
|
||
</label>
|
||
<label>리더 의상
|
||
<select value={leaderOutfitCardId} on:change={(event) => updateOutfit(event.currentTarget.value)}>
|
||
{#each leaderOutfitOptions as card}<option value={card.id}>{card.details.costume?.name}</option>{/each}
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div class="outfit-effect">
|
||
<span>리더 의상 효과</span>
|
||
<p>{leaderOutfitDescription || '적용할 수 있는 5성 의상이 없습니다.'}</p>
|
||
</div>
|
||
<p class="power-detail">최대 레벨 기준 · 기본 {unitPower.baseParameterTotal.toLocaleString('ko-KR')} + 개화 {unitPower.potentialTotal.toLocaleString('ko-KR')} + 패시브 {unitPower.passiveTotal.toLocaleString('ko-KR')} + 의상 {unitPower.outfitTotal.toLocaleString('ko-KR')} + 보드 {unitPower.boardTotal.toLocaleString('ko-KR')} + 메모리 {unitPower.memoryTotal.toLocaleString('ko-KR')} ({memoryCount}개) + 멤버 강화 {unitPower.memberPowerUpTotal.toLocaleString('ko-KR')} ({memberPowerUpPercent.toLocaleString('ko-KR')}%)</p>
|
||
|
||
<PresetManager storageKey={ANALYSIS_PRESET_STORAGE_KEY} snapshot={presetSnapshot} disabled={running} on:apply={applyPreset} />
|
||
|
||
{#if errorMessage}<p class="error" role="alert">{errorMessage}</p>{/if}
|
||
<button class="analyze" type="button" disabled={running || candidateCount === 0} on:click={analyze}>
|
||
{running ? `분석 중 ${Math.round(progress.evaluatedCandidates / Math.max(1, progress.totalCandidates) * 100)}%` : '최적 배치 분석'}
|
||
</button>
|
||
{#if running}<progress value={progress.evaluatedCandidates} max={progress.totalCandidates}></progress>{/if}
|
||
</section>
|
||
|
||
<section class="panel result" aria-labelledby="result-title">
|
||
<div class="section-title"><div><span>02</span><h2 id="result-title">분석 결과</h2></div></div>
|
||
{#if result}
|
||
<div class="order-sections">
|
||
<section class="order-section">
|
||
<h3>추천 스페셜 발동 순서</h3>
|
||
<ol class="order-list">
|
||
{#each result.order as cardId, slot}
|
||
<li><span class="slot">{slot + 1}</span><strong>{resultCardName(cardId)}</strong><span class="reduction">쿨타임 {result.cooldownReductions[cardId]}% 감소</span></li>
|
||
{/each}
|
||
</ol>
|
||
</section>
|
||
</div>
|
||
<div class="score-grid">
|
||
<div class="score-summary"><span>예상 점수</span><strong>{result.expectedScore.toLocaleString('ko-KR')}</strong></div>
|
||
<div class="score-summary"><span>이론상 고점</span><strong>{result.theoreticalMaxScore.toLocaleString('ko-KR')}</strong></div>
|
||
<div class="score-summary"><span>스킬 미발동 기준</span><strong>{result.baselineScore.toLocaleString('ko-KR')}</strong></div>
|
||
</div>
|
||
<div class="probability-grid">
|
||
<div><span>최고점 100%</span><strong>{probabilityLabel(achievementProbabilities?.maximum)}</strong></div>
|
||
<div><span>최고점의 99% 이상</span><strong>{probabilityLabel(achievementProbabilities?.atLeast99Percent)}</strong><small>{scoreThreshold(result.theoreticalMaxScore, 0.99)}점 이상</small></div>
|
||
<div><span>최고점의 95% 이상</span><strong>{probabilityLabel(achievementProbabilities?.atLeast95Percent)}</strong><small>{scoreThreshold(result.theoreticalMaxScore, 0.95)}점 이상</small></div>
|
||
</div>
|
||
<p class="probability-guide">모든 노트를 PERFECT로 처리한다고 가정하고 액티브 발동 확률만 반영합니다. 100%는 정확 계산, 99%·95% 이상은 25,000회 반복 계산값이며 최고점에 영향을 주지 않는 발동 실패는 100% 달성 확률을 낮추지 않습니다.</p>
|
||
|
||
<section class="skill-timeline" aria-labelledby="timeline-title">
|
||
<div class="timeline-heading">
|
||
<div><h3 id="timeline-title">스킬 발동과 노트 분포</h3><p>멤버별 액티브와 실제 적용 구간, 스페셜 순서를 같은 시간축에서 비교합니다.</p></div>
|
||
<div class="timeline-legend" aria-label="멤버 색상 범례">
|
||
{#each result.order as cardId}<span><i style={`background: ${memberColor(cardId)};`}></i>{resultCardName(cardId)}</span>{/each}
|
||
</div>
|
||
</div>
|
||
<div class="timeline-scroll" role="region" aria-label="스킬 발동 시간대 그래프">
|
||
<div class="timeline-canvas" style={`width: ${timelineWidth + 156}px;`}>
|
||
<div class="timeline-row note-row">
|
||
<strong class="lane-label">초당 노트</strong>
|
||
<div class="timeline-track note-track" style={timelineTrackStyle()} aria-label={`최대 초당 ${maxNotesPerSecond}개`}>
|
||
{#each noteCountsBySecond as count, second}
|
||
<span class="note-bar" style={`left: ${timelinePosition(second)}%; width: ${100 / Math.max(1, noteCountsBySecond.length)}%; height: ${count / maxNotesPerSecond * 100}%; opacity: ${count === 0 ? 0 : 0.18 + count / maxNotesPerSecond * 0.82};`} title={`${second}~${second + 1}초 · ${count}개`}></span>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
{#each result.order as cardId, slot}
|
||
<div class="timeline-row member-row">
|
||
<strong class="lane-label"><small style={`--member-color: ${memberColor(cardId)};`}>{slot + 1}</small>{resultCardName(cardId)}</strong>
|
||
<div class="timeline-track skill-track" style={timelineTrackStyle()}>
|
||
{#each result.activeWindows.filter((window) => window.cardId === cardId) as window}
|
||
<span
|
||
class="skill-window active-window"
|
||
style={coloredWindowStyle(window)}
|
||
title={`액티브 ${formatSeconds(window.startSeconds)}~${formatSeconds(window.endSeconds)} · ${window.scoreUpPercent}%`}
|
||
role="img"
|
||
aria-label={`액티브 ${formatSeconds(window.startSeconds)}부터 ${formatSeconds(window.endSeconds)}까지`}
|
||
></span>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
<div class="timeline-row summary-row">
|
||
<strong class="lane-label summary-label">최종 액티브</strong>
|
||
<div class="timeline-track skill-track" style={timelineTrackStyle()}>
|
||
{#each displayedEffectiveActiveWindows as window}
|
||
<span
|
||
class="skill-window effective-window"
|
||
style={coloredWindowStyle(window)}
|
||
title={`${resultCardName(window.cardId)} 액티브 적용 · ${formatSeconds(window.startSeconds)}~${formatSeconds(window.endSeconds)} · 기본 ${window.baseScoreUpPercent}% → 서포트 반영 ${effectivePercentLabel(window)}${window.maxOverlapCount > 1 ? ` · 최대 ${window.maxOverlapCount}명 중 가장 높은 효과` : ''}`}
|
||
role="img"
|
||
aria-label={`${resultCardName(window.cardId)} 액티브가 ${formatSeconds(window.startSeconds)}부터 ${formatSeconds(window.endSeconds)}까지 적용`}
|
||
></span>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
<div class="timeline-row summary-row">
|
||
<strong class="lane-label summary-label">스페셜</strong>
|
||
<div class="timeline-track skill-track" style={timelineTrackStyle()}>
|
||
{#each result.specialWindows as window}
|
||
<span
|
||
class="skill-window special-window"
|
||
style={coloredWindowStyle(window)}
|
||
title={`${resultCardName(window.cardId)} 스페셜 · ${formatSeconds(window.startSeconds)}~${formatSeconds(window.endSeconds)} · ${window.scoreUpPercent}%`}
|
||
role="img"
|
||
aria-label={`${resultCardName(window.cardId)} 스페셜이 ${formatSeconds(window.startSeconds)}부터 ${formatSeconds(window.endSeconds)}까지 적용`}
|
||
></span>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
<div class="timeline-row axis-row" aria-hidden="true">
|
||
<span class="lane-label axis-label"></span>
|
||
<div class="timeline-track time-axis" style={timelineTrackStyle()}>
|
||
{#each timelineTicks as second}<span style={`left: ${timelinePosition(second)}%;`}>{second}초</span>{/each}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{:else}
|
||
<div class="empty">조건을 선택하고 분석을 시작하면 최적 배치와 각 멤버의 쿨타임 감소량이 여기에 표시됩니다.</div>
|
||
{/if}
|
||
</section>
|
||
</main>
|
||
|
||
<style>
|
||
main { width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: var(--page-content-top) 0 80px; }
|
||
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--page-header-bottom); }
|
||
h1 { margin: 0; color: #f3f5f8; font-size: var(--page-title-size); line-height: 1.15; letter-spacing: -.045em; }
|
||
.page-description { margin: 10px 0 0; color: #929cab; font-size: var(--page-description-size); line-height: 1.6; }
|
||
.panel { margin-top: 16px; padding: 24px; border: 1px solid #2a303a; border-radius: 16px; background: #171b22; }
|
||
.section-title, .section-title > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||
.section-title > div { justify-content: flex-start; }
|
||
.section-title span { color: #ef8cb6; font-size: 13px; font-weight: 900; }
|
||
h2 { margin: 0; font-size: 18px; }
|
||
.section-title > strong { color: #aeb6c4; font-size: 14px; }
|
||
label { display: grid; gap: 7px; color: #8f98a8; font-size: 14px; font-weight: 750; }
|
||
select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #343c49; border-radius: 9px; color: #e8ebf1; background: #11151b; font: inherit; }
|
||
select:focus { border-color: #d86f9c; outline: 3px solid rgb(216 111 156 / 14%); }
|
||
.song-fields { display: grid; grid-template-columns: minmax(0, 2fr) clamp(110px, 11vw, 170px) clamp(140px, 14vw, 220px); align-items: end; gap: 12px; margin-top: 22px; }
|
||
.power-summary { display: grid; gap: 4px; min-height: 42px; padding: 7px 11px; border-radius: 9px; background: #22202a; }
|
||
.power-summary span { color: #929cab; font-size: 12px; font-weight: 750; }
|
||
.power-summary strong { color: #f2a3c4; font-size: 16px; }
|
||
.chart-meta { display: flex; gap: 8px; height: 42px; align-items: center; }
|
||
.chart-meta span { padding: 7px 9px; border-radius: 7px; color: #adb5c2; background: #202631; font-size: 13px; white-space: nowrap; }
|
||
.card-fields { display: grid; gap: 9px; margin-top: 18px; }
|
||
.card-field-header, .card-field { display: grid; grid-template-columns: minmax(320px, 1fr) clamp(130px, 12vw, 180px) clamp(304px, 27vw, 400px); gap: 9px; }
|
||
.card-field-header { padding: 0 2px; color: #8f98a8; font-size: 13px; font-weight: 800; }
|
||
.card-field-header span { padding-left: 2px; }
|
||
.card-field > label { grid-template-columns: 74px minmax(0, 1fr); align-items: center; }
|
||
.card-field > .awakening { min-width: 0; }
|
||
.awakening-stepper { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; height: 42px; overflow: hidden; border: 1px solid #343c49; border-radius: 9px; background: #11151b; }
|
||
.awakening-stepper button { align-self: stretch; padding: 0; border: 0; color: #c1c8d3; background: #202630; font-size: 24px; line-height: 1; cursor: pointer; }
|
||
.awakening-stepper button:hover:not(:disabled) { color: #f5afcc; background: #2d2530; }
|
||
.awakening-stepper button:focus-visible { position: relative; z-index: 1; outline: 2px solid #df74a2; outline-offset: -2px; }
|
||
.awakening-stepper button:disabled { color: #525b69; background: #171c24; cursor: default; }
|
||
.awakening-stepper strong { color: #e8ebf1; font-size: 14px; text-align: center; white-space: nowrap; }
|
||
.cooldown-lock { min-width: 0; }
|
||
.reduction-options { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); height: 42px; overflow: hidden; border: 1px solid #343c49; border-radius: 9px; background: #11151b; }
|
||
.reduction-options button { min-width: 0; padding: 0 6px; border: 0; border-left: 1px solid #2d3440; color: #8f98a8; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
|
||
.reduction-options button:first-child { border-left: 0; }
|
||
.reduction-options button:hover { color: #e9edf3; background: #202630; }
|
||
.reduction-options button.active { color: #171019; background: #ed8bb5; }
|
||
.reduction-options button:focus-visible { position: relative; z-index: 1; outline: 2px solid #f1a0c2; outline-offset: -2px; }
|
||
.leader-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
|
||
.outfit-effect { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; margin-top: 9px; padding: 11px 13px; border: 1px solid #2d3440; border-radius: 9px; background: #12161c; }
|
||
.outfit-effect span { color: #d993b1; font-size: 13px; font-weight: 850; }
|
||
.outfit-effect p { margin: 0; color: #b9c1cd; font-size: 14px; line-height: 1.55; }
|
||
.power-detail { margin: 10px 0 0; color: #858f9f; font-size: 13px; text-align: right; }
|
||
.analyze { width: 100%; height: 46px; margin-top: 20px; border: 0; border-radius: 10px; color: #171019; background: #ed8bb5; font-weight: 900; cursor: pointer; }
|
||
.analyze:hover:not(:disabled) { background: #f2a0c2; }
|
||
.analyze:disabled { opacity: .55; cursor: default; }
|
||
progress { display: block; width: 100%; height: 4px; margin-top: 8px; accent-color: #ed8bb5; }
|
||
.error { margin: 16px 0 0; color: #ff9f9f; font-size: 13px; }
|
||
.order-sections { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
|
||
.order-section { min-width: 0; }
|
||
.order-section h3 { margin: 0 0 9px; color: #aeb7c5; font-size: 14px; }
|
||
.order-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
|
||
.order-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px; border: 1px solid #2d3440; border-radius: 10px; background: #12161c; }
|
||
.slot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #171019; background: #e98ab2; font-weight: 900; }
|
||
.order-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.reduction { padding: 6px 8px; border-radius: 7px; color: #b9c1cd; background: #252c36; font-size: 13px; }
|
||
.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
|
||
.score-summary { display: grid; gap: 7px; padding: 16px; border-radius: 10px; background: #22202a; }
|
||
.score-summary span { color: #a9b1be; font-size: 14px; }
|
||
.score-summary strong { color: #f2a3c4; font-size: 20px; }
|
||
.probability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
|
||
.probability-grid > div { display: grid; gap: 7px; padding: 16px; border: 1px solid #303744; border-radius: 10px; background: #171d25; }
|
||
.probability-grid span { color: #9ca5b3; font-size: 14px; }
|
||
.probability-grid strong { color: #e5e9ef; font-size: 20px; }
|
||
.probability-grid small { color: #8d96a5; font-size: 12px; font-weight: 700; }
|
||
.probability-guide { margin: 9px 2px 0; color: #7f8998; font-size: 12px; line-height: 1.55; }
|
||
.empty { color: #858f9f; font-size: 14px; line-height: 1.65; }
|
||
.skill-timeline { margin-top: 22px; padding-top: 20px; border-top: 1px solid #2b313c; }
|
||
.timeline-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
|
||
.timeline-heading h3 { margin: 0; color: #e8ebf1; font-size: 16px; }
|
||
.timeline-heading p { margin: 6px 0 0; color: #838d9d; font-size: 13px; }
|
||
.timeline-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; color: #99a2b1; font-size: 12px; }
|
||
.timeline-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
|
||
.timeline-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
|
||
.timeline-scroll { overflow-x: auto; border: 1px solid #2c3440; border-radius: 11px; background: #10141a; scrollbar-width: thin; }
|
||
.timeline-canvas { min-width: 100%; padding: 12px 12px 8px 0; }
|
||
.timeline-row { display: flex; min-height: 36px; }
|
||
.timeline-row + .timeline-row { border-top: 1px solid rgb(255 255 255 / 5%); }
|
||
.lane-label { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: 7px; flex: 0 0 144px; min-width: 144px; padding: 0 10px 0 12px; overflow: hidden; color: #bac2ce; background: #141920; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
|
||
.lane-label small { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border: 1px solid color-mix(in srgb, var(--member-color) 65%, transparent); border-radius: 5px; color: var(--member-color); background: color-mix(in srgb, var(--member-color) 12%, transparent); font-size: 11px; }
|
||
.timeline-track { position: relative; flex: none; }
|
||
.timeline-track::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 9%) 1px, transparent 1px); background-size: var(--time-grid-step, 10%) 100%; pointer-events: none; }
|
||
.note-row { min-height: 68px; }
|
||
.note-track { height: 52px; align-self: center; border-bottom: 1px solid #465062; }
|
||
.note-bar { position: absolute; bottom: 0; min-height: 1px; border-right: 1px solid #10141a; background: #8ca9d7; }
|
||
.skill-track { height: 36px; }
|
||
.skill-window { position: absolute; min-width: 2px; border-radius: 3px; background: var(--member-color); }
|
||
.active-window { top: 12px; height: 12px; opacity: .72; }
|
||
.summary-row { background: rgb(255 255 255 / 1.5%); }
|
||
.summary-label { color: #e1e5ec; font-weight: 800; }
|
||
.effective-window { top: 9px; height: 18px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%); }
|
||
.special-window { top: 11px; height: 14px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }
|
||
.axis-row { min-height: 24px; border-top: 1px solid #343c49 !important; }
|
||
.axis-label { color: #778293; font-size: 12px; font-weight: 750; }
|
||
.time-axis { height: 24px; }
|
||
.time-axis::before { display: none; }
|
||
.time-axis span { position: absolute; top: 5px; color: #747f90; font-size: 11px; transform: translateX(-50%); white-space: nowrap; }
|
||
.time-axis span:first-child { transform: none; }
|
||
.time-axis span:last-child { transform: translateX(-100%); }
|
||
.empty { display: grid; place-items: center; min-height: 150px; margin-top: 18px; border: 1px dashed #303744; border-radius: 12px; padding: 28px; text-align: center; }
|
||
@media (max-width: 1100px) {
|
||
.card-field { grid-template-columns: minmax(0, 1fr) 130px 304px; }
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.order-sections { grid-template-columns: 1fr; }
|
||
main { width: calc(100% - 24px); padding-top: var(--page-content-top); }
|
||
.page-header { align-items: flex-start; }
|
||
.panel { padding: 17px; }
|
||
.song-fields { grid-template-columns: 1fr 100px; }
|
||
.power-summary { grid-column: 1 / -1; }
|
||
.chart-meta { grid-column: 1 / -1; height: auto; }
|
||
.card-field { grid-template-columns: minmax(0, 1fr) 102px; }
|
||
.card-field-header { display: none; }
|
||
.card-field > label { grid-template-columns: 58px minmax(0, 1fr); }
|
||
.card-field > .awakening { grid-template-columns: 1fr; }
|
||
.awakening-stepper { grid-template-columns: 28px minmax(0, 1fr) 28px; }
|
||
.cooldown-lock { grid-column: 1 / -1; grid-template-columns: 88px minmax(0, 1fr); }
|
||
.leader-fields { grid-template-columns: 1fr; }
|
||
.outfit-effect { grid-template-columns: 1fr; gap: 5px; }
|
||
.order-list li { grid-template-columns: 30px minmax(0, 1fr); }
|
||
.reduction { grid-column: 2; justify-self: start; }
|
||
.score-grid { grid-template-columns: 1fr; }
|
||
.timeline-heading { align-items: flex-start; flex-direction: column; }
|
||
.timeline-legend { justify-content: flex-start; }
|
||
.lane-label { flex-basis: 118px; min-width: 118px; }
|
||
.timeline-canvas { padding-right: 8px; }
|
||
}
|
||
</style>
|