feat: add combination search workflow
This commit is contained in:
@@ -0,0 +1,897 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
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 AnalysisResultView from '$lib/components/AnalysisResultView.svelte';
|
||||
import {
|
||||
calculateBoardEffects,
|
||||
calculateUnitPower,
|
||||
countOptimizationCandidates,
|
||||
generateCombinationCandidates,
|
||||
memoryParameterPermil,
|
||||
perfectNoteScoreFromPower,
|
||||
toOptimizerCard
|
||||
} from '$lib/engine/index.ts';
|
||||
import type { CooldownReduction, ExactOptimizationResult, ExactSongChart, OptimizationProgress, OptimizerCard } from '$lib/engine/index.ts';
|
||||
import { USER_DATA_STORAGE_KEY } from '$lib/storage/browser-storage';
|
||||
|
||||
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 PreparedCandidate = {
|
||||
cards: OptimizerCard[];
|
||||
overallPower: number;
|
||||
perfectNoteScore: number;
|
||||
directSongScoreBonusPercent: number;
|
||||
heuristic: number;
|
||||
skillPotential: number;
|
||||
};
|
||||
type RankedResult = { result: ExactOptimizationResult; overallPower: number };
|
||||
type SavedState = {
|
||||
schemaVersion: 1;
|
||||
songId: string;
|
||||
difficulty: DifficultyKey;
|
||||
fixedCardIds: string[];
|
||||
awakening: number;
|
||||
candidateGenerationBonus?: number | null;
|
||||
fixedAwakenings?: number[];
|
||||
fixedCooldownReductions?: (CooldownReduction | null)[];
|
||||
fixedAllBlueNodes?: boolean[];
|
||||
fixedMaxGenerationBonuses?: boolean[];
|
||||
fixedGenerationBonusOverrides?: (number | null)[];
|
||||
maximizeCompute?: boolean;
|
||||
leaderCharacterId: string;
|
||||
leaderOutfitCardId: string;
|
||||
};
|
||||
type SavedAnalysisState = {
|
||||
schemaVersion: 2;
|
||||
songId: string;
|
||||
difficulty: DifficultyKey;
|
||||
cardIds: string[];
|
||||
awakenings: number[];
|
||||
fixedCooldownReductions: (CooldownReduction | null)[];
|
||||
leaderCharacterId: string;
|
||||
leaderOutfitCardId: string;
|
||||
};
|
||||
|
||||
const STORAGE_KEY = 'holodori.combination.v1';
|
||||
const ANALYSIS_STORAGE_KEY = 'holodori.analysis.v2';
|
||||
const SCREENING_LIMIT = 3_000;
|
||||
const EXACT_FINALIST_LIMIT = 24;
|
||||
const REDUCTION_LOCK_OPTIONS = [null, 0, 4, 8, 12] as const;
|
||||
const fiveStarCards = cardSummary.cards.filter((card) => card.rarity === 5);
|
||||
const cardById = new Map(fiveStarCards.map((card) => [card.id, card]));
|
||||
const charts = exactChartCatalog.charts;
|
||||
const blueGroupsByCharacter = Object.fromEntries(boardSummary.members.map((member) => [
|
||||
member.id,
|
||||
(boardSummary.models as Record<string, { groupId: string }[]>)[member.positionGroupId]
|
||||
?.filter((position) => position.groupId.startsWith('B'))
|
||||
.map((position) => position.groupId) ?? []
|
||||
]));
|
||||
const songs = Array.from(new Map(charts.map((chart) => [chart.songId, { id: chart.songId, title: chart.title }])).values());
|
||||
const leaderMembers = fiveStarCards.filter((card, index, cards) => cards.findIndex((entry) => entry.characterId === card.characterId) === index);
|
||||
|
||||
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 fixedCardIds = ['', '', '', ''];
|
||||
let candidateAwakening = 5;
|
||||
let candidateGenerationBonus: number | null = null;
|
||||
let fixedAwakenings = [5, 5, 5, 5];
|
||||
let fixedCooldownReductions: (CooldownReduction | null)[] = [null, null, null, null];
|
||||
let fixedAllBlueNodes = [false, false, false, false];
|
||||
let fixedGenerationBonusOverrides: (number | null)[] = [null, null, null, null];
|
||||
let maximizeCompute = false;
|
||||
let leaderCharacterId = leaderMembers[0]?.characterId ?? '';
|
||||
let leaderOutfitCardId = leaderMembers[0]?.id ?? '';
|
||||
let worker: Worker | null = null;
|
||||
let parallelWorkers: Worker[] = [];
|
||||
let baselineWorker: Worker | null = null;
|
||||
let running = false;
|
||||
let progress: OptimizationProgress = { evaluatedCandidates: 0, totalCandidates: 0 };
|
||||
let result: ExactOptimizationResult | null = null;
|
||||
let rankedResults: RankedResult[] = [];
|
||||
let baselineState: SavedAnalysisState | null = null;
|
||||
let baselineResult: ExactOptimizationResult | null = null;
|
||||
let baselineOverallPower = 0;
|
||||
let baselineRunning = false;
|
||||
let baselineProgress: OptimizationProgress = { evaluatedCandidates: 0, totalCandidates: 0 };
|
||||
let baselineError = '';
|
||||
let screenedCombinationCount = 0;
|
||||
let exactCombinationCount = 0;
|
||||
let searchPhase: 'idle' | 'screening' | 'exact' = 'idle';
|
||||
let screeningProgress = 0;
|
||||
let errorMessage = '';
|
||||
let ready = false;
|
||||
|
||||
$: selectedChart = charts.find((chart) => chart.songId === selectedSongId && chart.difficulty === difficulty);
|
||||
$: baselineChartMetadata = baselineState
|
||||
? charts.find((chart) => chart.songId === baselineState!.songId && chart.difficulty === baselineState!.difficulty)
|
||||
: undefined;
|
||||
$: baselineMatchesConditions = Boolean(baselineState?.songId === selectedSongId && baselineState?.difficulty === difficulty);
|
||||
$: comparableToBaseline = Boolean(baselineResult && baselineMatchesConditions);
|
||||
$: if (ready && connectionCards && baselineState && baselineMatchesConditions && !baselineResult && !baselineRunning && !baselineError) void analyzeBaseline();
|
||||
$: if (!result && rankedResults.length > 0) rankedResults = [];
|
||||
$: fixedCards = fixedCardIds.map((id) => cardById.get(id)).filter((card): card is CardRow => Boolean(card));
|
||||
$: leaderMember = leaderMembers.find((card) => card.characterId === leaderCharacterId);
|
||||
$: leaderOutfitOptions = leaderMember
|
||||
? fiveStarCards.filter((card) => card.characterId === leaderCharacterId && card.details.costume)
|
||||
.filter((card, index, cards) => cards.findIndex((entry) => entry.details.costume?.name === card.details.costume?.name) === index)
|
||||
: [];
|
||||
$: leaderOutfit = cardById.get(leaderOutfitCardId)?.details.costume ?? null;
|
||||
$: leaderOutfitDescription = (leaderOutfit?.description ?? '')
|
||||
.replace(/\[[^\]]+\]/g, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
$: 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
|
||||
}));
|
||||
$: if (ready) saveState({
|
||||
schemaVersion: 1,
|
||||
songId: selectedSongId,
|
||||
difficulty,
|
||||
fixedCardIds,
|
||||
awakening: candidateAwakening,
|
||||
candidateGenerationBonus,
|
||||
fixedAwakenings,
|
||||
fixedCooldownReductions,
|
||||
fixedAllBlueNodes,
|
||||
fixedGenerationBonusOverrides,
|
||||
maximizeCompute,
|
||||
leaderCharacterId,
|
||||
leaderOutfitCardId
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
try {
|
||||
const stored = JSON.parse(localStorage.getItem(USER_DATA_STORAGE_KEY) ?? 'null');
|
||||
collection = stored?.collection && typeof stored.collection === 'object' ? stored.collection : {};
|
||||
memberBoards = stored?.memberBoards && typeof stored.memberBoards === 'object' ? stored.memberBoards : {};
|
||||
boardCards = stored?.boardCards && typeof stored.boardCards === 'object' ? stored.boardCards : {};
|
||||
memoryCount = Number.isFinite(stored?.memoryCount) ? stored.memoryCount : 0;
|
||||
memberPowerUpPercent = Number.isFinite(stored?.memberPowerUpPercent) ? stored.memberPowerUpPercent : 0;
|
||||
} catch {
|
||||
collection = {};
|
||||
}
|
||||
try {
|
||||
const state = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null') as SavedState | null;
|
||||
if (state?.schemaVersion === 1) {
|
||||
if (songs.some((song) => song.id === state.songId)) selectedSongId = state.songId;
|
||||
if (state.difficulty === 'hard' || state.difficulty === 'expert') difficulty = state.difficulty;
|
||||
fixedCardIds = Array.from({ length: 4 }, (_, index) => cardById.has(state.fixedCardIds?.[index]) ? state.fixedCardIds[index] : '');
|
||||
candidateAwakening = normalizeAwakening(state.awakening);
|
||||
candidateGenerationBonus = typeof state.candidateGenerationBonus === 'number' && Number.isFinite(state.candidateGenerationBonus)
|
||||
? normalizeGenerationBonus(state.candidateGenerationBonus)
|
||||
: null;
|
||||
fixedAwakenings = Array.from({ length: 4 }, (_, index) => normalizeAwakening(state.fixedAwakenings?.[index] ?? state.awakening));
|
||||
fixedCooldownReductions = Array.from({ length: 4 }, (_, index) => normalizeFixedReduction(state.fixedCooldownReductions?.[index]));
|
||||
fixedAllBlueNodes = Array.from({ length: 4 }, (_, index) => state.fixedAllBlueNodes?.[index] === true);
|
||||
fixedGenerationBonusOverrides = Array.from({ length: 4 }, (_, index) => {
|
||||
const savedValue = state.fixedGenerationBonusOverrides?.[index];
|
||||
if (typeof savedValue === 'number' && Number.isFinite(savedValue)) return normalizeGenerationBonus(savedValue);
|
||||
return state.fixedMaxGenerationBonuses?.[index] === true ? 900 : null;
|
||||
});
|
||||
maximizeCompute = state.maximizeCompute === true;
|
||||
if (leaderMembers.some((member) => member.characterId === state.leaderCharacterId)) leaderCharacterId = state.leaderCharacterId;
|
||||
const outfit = cardById.get(state.leaderOutfitCardId);
|
||||
leaderOutfitCardId = outfit?.characterId === leaderCharacterId && outfit.details.costume
|
||||
? outfit.id
|
||||
: fiveStarCards.find((card) => card.characterId === leaderCharacterId && card.details.costume)?.id ?? '';
|
||||
}
|
||||
} catch {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
worker = new Worker(new URL('../../lib/workers/score-optimizer.worker.ts', import.meta.url), { type: 'module' });
|
||||
worker.onmessage = (event) => {
|
||||
if (event.data.type === 'progress') progress = event.data.progress;
|
||||
if (event.data.type === 'combination-result') {
|
||||
result = event.data.result;
|
||||
rankedResults = Array.isArray(event.data.rankings) ? event.data.rankings : [{ result: event.data.result, overallPower: event.data.overallPower }];
|
||||
running = false;
|
||||
searchPhase = 'idle';
|
||||
}
|
||||
if (event.data.type === 'error') {
|
||||
errorMessage = event.data.message;
|
||||
running = false;
|
||||
searchPhase = 'idle';
|
||||
}
|
||||
};
|
||||
baselineWorker = new Worker(new URL('../../lib/workers/score-optimizer.worker.ts', import.meta.url), { type: 'module' });
|
||||
baselineWorker.onmessage = (event) => {
|
||||
if (event.data.type === 'progress') baselineProgress = event.data.progress;
|
||||
if (event.data.type === 'result') {
|
||||
baselineResult = event.data.result;
|
||||
baselineRunning = false;
|
||||
}
|
||||
if (event.data.type === 'error') {
|
||||
baselineError = event.data.message;
|
||||
baselineRunning = false;
|
||||
}
|
||||
};
|
||||
try {
|
||||
baselineState = readAnalysisState(localStorage.getItem(ANALYSIS_STORAGE_KEY));
|
||||
} catch {
|
||||
baselineState = null;
|
||||
baselineError = '배치 분석의 저장 데이터를 읽지 못했습니다.';
|
||||
}
|
||||
ready = true;
|
||||
return () => {
|
||||
worker?.terminate();
|
||||
terminateParallelWorkers();
|
||||
baselineWorker?.terminate();
|
||||
};
|
||||
});
|
||||
|
||||
function normalizeAwakening(value: unknown): number {
|
||||
return Math.max(0, Math.min(5, Number.isFinite(value) ? Math.round(Number(value)) : 5));
|
||||
}
|
||||
|
||||
function normalizeFixedReduction(value: unknown): CooldownReduction | null {
|
||||
return value === 0 || value === 4 || value === 8 || value === 12 ? value : null;
|
||||
}
|
||||
|
||||
function normalizeGenerationBonus(value: unknown): number {
|
||||
return Math.max(0, Math.min(900, Number.isFinite(value) ? Math.round(Number(value)) : 0));
|
||||
}
|
||||
|
||||
function saveState(state: SavedState): void {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
|
||||
}
|
||||
|
||||
function readAnalysisState(stored: string | null): SavedAnalysisState | null {
|
||||
if (!stored) return null;
|
||||
const state = JSON.parse(stored) as Partial<SavedAnalysisState>;
|
||||
if (state.schemaVersion !== 2 || !Array.isArray(state.cardIds) || state.cardIds.length !== 5) return null;
|
||||
const cards = state.cardIds.map((id) => cardById.get(id)).filter((card): card is CardRow => Boolean(card));
|
||||
if (cards.length !== 5 || new Set(cards.map((card) => card.characterId)).size !== 5) return null;
|
||||
return {
|
||||
schemaVersion: 2,
|
||||
songId: typeof state.songId === 'string' ? state.songId : '',
|
||||
difficulty: state.difficulty === 'hard' ? 'hard' : 'expert',
|
||||
cardIds: cards.map((card) => card.id),
|
||||
awakenings: cards.map((_, index) => Number.isFinite(state.awakenings?.[index]) ? normalizeAwakening(state.awakenings?.[index]) : 0),
|
||||
fixedCooldownReductions: cards.map((_, index) => normalizeFixedReduction(state.fixedCooldownReductions?.[index])),
|
||||
leaderCharacterId: typeof state.leaderCharacterId === 'string' ? state.leaderCharacterId : '',
|
||||
leaderOutfitCardId: typeof state.leaderOutfitCardId === 'string' ? state.leaderOutfitCardId : ''
|
||||
};
|
||||
}
|
||||
|
||||
function cardLabel(card: CardRow): string {
|
||||
return `${collection[card.id]?.owned ? '● ' : ''}${card.name}${card.versionName ? ` · ${card.versionName}` : ''}`;
|
||||
}
|
||||
|
||||
function selectedInAnotherSlot(card: CardRow, slot: number): boolean {
|
||||
return fixedCardIds.some((id, index) => index !== slot && cardById.get(id)?.characterId === card.characterId);
|
||||
}
|
||||
|
||||
function updateFixedCard(slot: number, cardId: string): void {
|
||||
const cardChanged = fixedCardIds[slot] !== cardId;
|
||||
fixedCardIds = fixedCardIds.map((id, index) => index === slot ? cardId : id);
|
||||
if (cardChanged) {
|
||||
fixedCooldownReductions = fixedCooldownReductions.map((reduction, index) => index === slot ? null : reduction);
|
||||
fixedGenerationBonusOverrides = fixedGenerationBonusOverrides.map((bonus, index) => index === slot ? null : bonus);
|
||||
}
|
||||
if (cardId && collection[cardId]?.owned) {
|
||||
fixedAwakenings = fixedAwakenings.map((value, index) => index === slot ? normalizeAwakening(collection[cardId]?.awakening) : value);
|
||||
}
|
||||
result = null;
|
||||
}
|
||||
|
||||
function updateFixedAwakening(slot: number, value: number): void {
|
||||
fixedAwakenings = fixedAwakenings.map((awakening, index) => index === slot ? normalizeAwakening(value) : awakening);
|
||||
result = null;
|
||||
}
|
||||
|
||||
function updateCandidateAwakening(value: number): void {
|
||||
candidateAwakening = normalizeAwakening(value);
|
||||
result = null;
|
||||
}
|
||||
|
||||
function updateFixedReduction(slot: number, value: CooldownReduction | null): void {
|
||||
fixedCooldownReductions = fixedCooldownReductions.map((reduction, index) => index === slot ? value : reduction);
|
||||
result = null;
|
||||
}
|
||||
|
||||
function toggleFixedAllBlueNodes(slot: number): void {
|
||||
fixedAllBlueNodes = fixedAllBlueNodes.map((enabled, index) => index === slot ? !enabled : enabled);
|
||||
result = null;
|
||||
}
|
||||
|
||||
function updateFixedGenerationBonus(slot: number, rawValue: string): void {
|
||||
const parsed = Number(rawValue);
|
||||
const value = rawValue.trim() === '' || !Number.isFinite(parsed) ? null : normalizeGenerationBonus(parsed);
|
||||
fixedGenerationBonusOverrides = fixedGenerationBonusOverrides.map((bonus, index) => index === slot ? value : bonus);
|
||||
result = null;
|
||||
}
|
||||
|
||||
function updateCandidateGenerationBonus(rawValue: string): void {
|
||||
const parsed = Number(rawValue);
|
||||
candidateGenerationBonus = rawValue.trim() === '' || !Number.isFinite(parsed) ? null : normalizeGenerationBonus(parsed);
|
||||
result = null;
|
||||
}
|
||||
|
||||
function fixedSlot(cardId: string): number {
|
||||
return fixedCardIds.indexOf(cardId);
|
||||
}
|
||||
|
||||
function awakeningForCard(card: CardRow): number {
|
||||
const slot = fixedSlot(card.id);
|
||||
return slot >= 0 ? fixedAwakenings[slot] : candidateAwakening;
|
||||
}
|
||||
|
||||
function updateLeader(characterId: string): void {
|
||||
leaderCharacterId = characterId;
|
||||
leaderOutfitCardId = fiveStarCards.find((card) => card.characterId === characterId && card.details.costume)?.id ?? '';
|
||||
result = null;
|
||||
}
|
||||
|
||||
function roughCardScore(card: CardRow): number {
|
||||
const statTotal = Object.values(card.power.statsAtMaxLevel).reduce((sum, value) => sum + value, 0);
|
||||
const { activeValue, specialValue } = roughSkillValues(card);
|
||||
return statTotal * (1 + activeValue / 100 + specialValue / 500);
|
||||
}
|
||||
|
||||
function roughStatScore(card: CardRow): number {
|
||||
return Object.values(card.power.statsAtMaxLevel).reduce((sum, value) => sum + value, 0);
|
||||
}
|
||||
|
||||
function roughSkillScore(card: CardRow): number {
|
||||
const { adapted, activeValue, specialValue } = roughSkillValues(card);
|
||||
return activeValue + specialValue + (adapted.scoreSupportPercent ?? 0);
|
||||
}
|
||||
|
||||
function roughSkillValues(card: CardRow) {
|
||||
const adapted = toOptimizerCard(card, awakeningForCard(card), [0], [card]);
|
||||
const activeValue = adapted.active.scoreUpPercent * adapted.active.durationSeconds /
|
||||
Math.max(1, adapted.active.cooldownSeconds) * ((adapted.active.probabilityPercent ?? 100) / 100);
|
||||
const specialValue = adapted.special.scoreUpPercent * adapted.special.durationSeconds / 100;
|
||||
return { adapted, activeValue, specialValue };
|
||||
}
|
||||
|
||||
function combinationKey(cards: readonly CardRow[] | readonly OptimizerCard[]): string {
|
||||
return cards.map((card) => card.id).sort().join('|');
|
||||
}
|
||||
|
||||
function boardsForCombination(cards: readonly CardRow[]): MemberBoards {
|
||||
const boards = Object.fromEntries(Object.entries(memberBoards).map(([characterId, groupIds]) => [characterId, Array.from(groupIds)]));
|
||||
for (const card of cards) {
|
||||
const slot = fixedSlot(card.id);
|
||||
if (slot >= 0 && !fixedAllBlueNodes[slot]) continue;
|
||||
const existingNonBlue = (boards[card.characterId] ?? []).filter((groupId) => !groupId.startsWith('B'));
|
||||
boards[card.characterId] = [...existingNonBlue, ...(blueGroupsByCharacter[card.characterId] ?? [])];
|
||||
}
|
||||
return boards;
|
||||
}
|
||||
|
||||
function screeningCombinations(): CardRow[][] {
|
||||
if (fixedCards.length === 4) {
|
||||
return generateCombinationCandidates(fixedCards, fiveStarCards, 5, roughCardScore, SCREENING_LIMIT);
|
||||
}
|
||||
const perStrategy = Math.ceil(SCREENING_LIMIT / 3);
|
||||
const combined = new Map<string, CardRow[]>();
|
||||
for (const score of [roughCardScore, roughSkillScore, roughStatScore]) {
|
||||
for (const cards of generateCombinationCandidates(fixedCards, fiveStarCards, 5, score, perStrategy)) {
|
||||
combined.set(combinationKey(cards), cards);
|
||||
}
|
||||
}
|
||||
return Array.from(combined.values()).slice(0, SCREENING_LIMIT);
|
||||
}
|
||||
|
||||
function selectExactFinalists(prepared: PreparedCandidate[]): PreparedCandidate[] {
|
||||
if (fixedCards.length === 4) return prepared;
|
||||
const selected = new Map<string, PreparedCandidate>();
|
||||
const add = (candidates: PreparedCandidate[], count: number) => {
|
||||
for (const candidate of candidates.slice(0, count)) selected.set(combinationKey(candidate.cards), candidate);
|
||||
};
|
||||
add([...prepared].sort((left, right) => right.heuristic - left.heuristic), 12);
|
||||
add([...prepared].sort((left, right) => right.skillPotential - left.skillPotential), 6);
|
||||
add([...prepared].sort((left, right) => right.overallPower - left.overallPower), 6);
|
||||
if (selected.size < EXACT_FINALIST_LIMIT) {
|
||||
for (const candidate of [...prepared].sort((left, right) => right.heuristic - left.heuristic)) {
|
||||
selected.set(combinationKey(candidate.cards), candidate);
|
||||
if (selected.size >= EXACT_FINALIST_LIMIT) break;
|
||||
}
|
||||
}
|
||||
return Array.from(selected.values()).slice(0, EXACT_FINALIST_LIMIT);
|
||||
}
|
||||
|
||||
function prepareCandidate(cards: CardRow[]): PreparedCandidate {
|
||||
const generationBonusByCardId = Object.fromEntries(cards
|
||||
.filter((card) => {
|
||||
const slot = fixedSlot(card.id);
|
||||
return slot < 0 ? candidateGenerationBonus !== null : fixedGenerationBonusOverrides[slot] !== null;
|
||||
})
|
||||
.map((card) => {
|
||||
const slot = fixedSlot(card.id);
|
||||
return [card.id, slot < 0 ? candidateGenerationBonus ?? 0 : fixedGenerationBonusOverrides[slot] ?? 0];
|
||||
}));
|
||||
const boardEffects = calculateBoardEffects(boardSummary, boardsForCombination(cards), cards, leaderCharacterId, selectedChart, {
|
||||
placements: boardCards,
|
||||
cards: connectionCards
|
||||
}, {
|
||||
generationBonusByCardId,
|
||||
directSongScoreBonusPercent: 10
|
||||
});
|
||||
const power = calculateUnitPower(
|
||||
cards.map((card) => ({ card, awakening: awakeningForCard(card) })),
|
||||
leaderOutfit,
|
||||
boardEffects,
|
||||
memoryParameterPermil(memoryCount, memorySummary.effects),
|
||||
memberPowerUpPercent
|
||||
);
|
||||
const optimizerCards = cards.map((card) => {
|
||||
const slot = fixedSlot(card.id);
|
||||
const fixedReduction = slot >= 0 ? fixedCooldownReductions[slot] : null;
|
||||
const adapted = toOptimizerCard(
|
||||
card,
|
||||
awakeningForCard(card),
|
||||
fixedReduction === null ? boardEffects.allowedCooldownReductionsByCardId[card.id] : [fixedReduction],
|
||||
cards
|
||||
);
|
||||
const activationRate = boardEffects.activationRateUpByCardId[card.id] ?? 0;
|
||||
return {
|
||||
...adapted,
|
||||
active: { ...adapted.active, probabilityPercent: (adapted.active.probabilityPercent ?? 100) * (1 + activationRate / 100) },
|
||||
scoreSupportPercent: power.outfitScoreSupportPercent + boardEffects.scoreSupportPercent
|
||||
};
|
||||
});
|
||||
const skillPotential = optimizerCards.reduce((sum, card) => sum +
|
||||
card.active.scoreUpPercent * card.active.durationSeconds / Math.max(1, card.active.cooldownSeconds) * ((card.active.probabilityPercent ?? 100) / 100) +
|
||||
card.special.scoreUpPercent * card.special.durationSeconds / 100 +
|
||||
(card.scoreSupportPercent ?? 0) +
|
||||
(card.passiveScoreSupportEffects ?? []).reduce((effectSum, effect) => effectSum + effect.percent * (effect.target === 'all' ? 5 : effect.targetCount ?? 1), 0), 0);
|
||||
return {
|
||||
cards: optimizerCards,
|
||||
overallPower: power.overallPower,
|
||||
perfectNoteScore: perfectNoteScoreFromPower(power.overallPower, selectedChart?.scoreRatio ?? null),
|
||||
directSongScoreBonusPercent: boardEffects.directSongScoreBonusPercent,
|
||||
heuristic: power.overallPower * (1 + skillPotential / 500),
|
||||
skillPotential
|
||||
};
|
||||
}
|
||||
|
||||
async function analyzeBaseline(): Promise<void> {
|
||||
const state = baselineState;
|
||||
const chartMetadata = baselineChartMetadata;
|
||||
if (!state || !chartMetadata || !baselineWorker || !baselineMatchesConditions) return;
|
||||
baselineRunning = true;
|
||||
baselineError = '';
|
||||
baselineProgress = { evaluatedCandidates: 0, totalCandidates: 1 };
|
||||
try {
|
||||
const cards = state.cardIds.map((id) => cardById.get(id)).filter((card): card is CardRow => Boolean(card));
|
||||
if (cards.length !== 5) throw new Error('기준 조합의 카드 정보를 찾지 못했습니다.');
|
||||
const outfit = cardById.get(state.leaderOutfitCardId)?.details.costume ?? null;
|
||||
const boardEffects = calculateBoardEffects(boardSummary, memberBoards, cards, state.leaderCharacterId, chartMetadata, {
|
||||
placements: boardCards,
|
||||
cards: connectionCards
|
||||
});
|
||||
const power = calculateUnitPower(
|
||||
cards.map((card, index) => ({ card, awakening: state.awakenings[index] })),
|
||||
outfit,
|
||||
boardEffects,
|
||||
memoryParameterPermil(memoryCount, memorySummary.effects),
|
||||
memberPowerUpPercent
|
||||
);
|
||||
const optimizerCards = cards.map((card, index) => {
|
||||
const fixedReduction = state.fixedCooldownReductions[index];
|
||||
const adapted = toOptimizerCard(
|
||||
card,
|
||||
state.awakenings[index],
|
||||
fixedReduction === null ? boardEffects.allowedCooldownReductionsByCardId[card.id] : [fixedReduction],
|
||||
cards
|
||||
);
|
||||
const activationRate = boardEffects.activationRateUpByCardId[card.id] ?? 0;
|
||||
return {
|
||||
...adapted,
|
||||
active: { ...adapted.active, probabilityPercent: (adapted.active.probabilityPercent ?? 100) * (1 + activationRate / 100) },
|
||||
scoreSupportPercent: power.outfitScoreSupportPercent + boardEffects.scoreSupportPercent
|
||||
};
|
||||
});
|
||||
const response = await fetch(chartMetadata.path);
|
||||
if (!response.ok) throw new Error('기준 조합의 정확 채보 데이터를 불러오지 못했습니다.');
|
||||
const chart = await response.json() as ExactSongChart;
|
||||
baselineOverallPower = power.overallPower;
|
||||
baselineProgress = { evaluatedCandidates: 0, totalCandidates: countOptimizationCandidates(optimizerCards) };
|
||||
baselineWorker.postMessage({
|
||||
type: 'optimize-exact',
|
||||
cards: optimizerCards,
|
||||
chart,
|
||||
perfectNoteScore: perfectNoteScoreFromPower(power.overallPower, chartMetadata.scoreRatio ?? null),
|
||||
directSongScoreBonusPercent: boardEffects.directSongScoreBonusPercent
|
||||
});
|
||||
} catch (error) {
|
||||
baselineError = error instanceof Error ? error.message : '기준 조합을 분석하지 못했습니다.';
|
||||
baselineRunning = false;
|
||||
}
|
||||
}
|
||||
|
||||
function scoreDelta(current: number, baseline: number): string {
|
||||
const difference = current - baseline;
|
||||
return `${difference >= 0 ? '+' : ''}${difference.toLocaleString('ko-KR')}`;
|
||||
}
|
||||
|
||||
function terminateParallelWorkers(): void {
|
||||
for (const parallelWorker of parallelWorkers) parallelWorker.terminate();
|
||||
parallelWorkers = [];
|
||||
}
|
||||
|
||||
function runParallelExact(finalists: PreparedCandidate[], chart: ExactSongChart): void {
|
||||
terminateParallelWorkers();
|
||||
const reportedCores = typeof navigator === 'undefined' ? 1 : navigator.hardwareConcurrency || 4;
|
||||
const workerCount = Math.min(finalists.length, Math.max(1, reportedCores));
|
||||
const groups = Array.from({ length: workerCount }, () => [] as PreparedCandidate[]);
|
||||
finalists.forEach((candidate, index) => groups[index % workerCount].push(candidate));
|
||||
|
||||
const groupProgress = Array.from({ length: workerCount }, () => 0);
|
||||
const totalCandidates = finalists.reduce((sum, candidate) => sum + countOptimizationCandidates(candidate.cards), 0);
|
||||
const completedRankings: RankedResult[] = [];
|
||||
let completedWorkers = 0;
|
||||
let failed = false;
|
||||
progress = { evaluatedCandidates: 0, totalCandidates };
|
||||
|
||||
const fail = (message: string) => {
|
||||
if (failed) return;
|
||||
failed = true;
|
||||
terminateParallelWorkers();
|
||||
errorMessage = message;
|
||||
running = false;
|
||||
searchPhase = 'idle';
|
||||
};
|
||||
|
||||
groups.forEach((candidates, workerIndex) => {
|
||||
const parallelWorker = new Worker(new URL('../../lib/workers/score-optimizer.worker.ts', import.meta.url), { type: 'module' });
|
||||
parallelWorkers.push(parallelWorker);
|
||||
parallelWorker.onmessage = (event) => {
|
||||
if (failed) return;
|
||||
if (event.data.type === 'progress') {
|
||||
groupProgress[workerIndex] = event.data.progress.evaluatedCandidates;
|
||||
progress = {
|
||||
evaluatedCandidates: groupProgress.reduce((sum, value) => sum + value, 0),
|
||||
totalCandidates
|
||||
};
|
||||
}
|
||||
if (event.data.type === 'combination-result') {
|
||||
const rankings = Array.isArray(event.data.rankings)
|
||||
? event.data.rankings as RankedResult[]
|
||||
: [{ result: event.data.result, overallPower: event.data.overallPower }];
|
||||
completedRankings.push(...rankings);
|
||||
completedWorkers += 1;
|
||||
parallelWorker.terminate();
|
||||
if (completedWorkers !== workerCount) return;
|
||||
completedRankings.sort((left, right) => right.result.theoreticalMaxScore - left.result.theoreticalMaxScore ||
|
||||
right.result.expectedScore - left.result.expectedScore);
|
||||
rankedResults = completedRankings.slice(0, 10);
|
||||
result = rankedResults[0]?.result ?? null;
|
||||
parallelWorkers = [];
|
||||
running = false;
|
||||
searchPhase = 'idle';
|
||||
}
|
||||
if (event.data.type === 'error') fail(event.data.message);
|
||||
};
|
||||
parallelWorker.onerror = () => fail('병렬 분석 Worker에서 오류가 발생했습니다.');
|
||||
parallelWorker.postMessage({ type: 'optimize-combinations', candidates, chart });
|
||||
});
|
||||
}
|
||||
|
||||
async function search(): Promise<void> {
|
||||
errorMessage = '';
|
||||
result = null;
|
||||
if (!worker || !selectedChart) return;
|
||||
if (new Set(fixedCards.map((card) => card.characterId)).size !== fixedCards.length) {
|
||||
errorMessage = '같은 멤버의 일반 카드와 이격 카드는 함께 고정할 수 없습니다.';
|
||||
return;
|
||||
}
|
||||
running = true;
|
||||
searchPhase = 'screening';
|
||||
screeningProgress = 0;
|
||||
progress = { evaluatedCandidates: 0, totalCandidates: 1 };
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
try {
|
||||
const combinations = screeningCombinations();
|
||||
screenedCombinationCount = combinations.length;
|
||||
const prepared: PreparedCandidate[] = [];
|
||||
for (let index = 0; index < combinations.length; index += 1) {
|
||||
prepared.push(prepareCandidate(combinations[index]));
|
||||
if (index % 50 === 49 || index === combinations.length - 1) {
|
||||
screeningProgress = (index + 1) / combinations.length;
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
}
|
||||
}
|
||||
const finalists = selectExactFinalists(prepared);
|
||||
exactCombinationCount = finalists.length;
|
||||
if (finalists.length === 0) throw new Error('조건에 맞는 카드 조합이 없습니다.');
|
||||
const response = await fetch(selectedChart.path);
|
||||
if (!response.ok) throw new Error('정확 채보 데이터를 불러오지 못했습니다.');
|
||||
const chart = await response.json() as ExactSongChart;
|
||||
searchPhase = 'exact';
|
||||
if (maximizeCompute) runParallelExact(finalists, chart);
|
||||
else worker.postMessage({ type: 'optimize-combinations', candidates: finalists, chart });
|
||||
} catch (error) {
|
||||
errorMessage = error instanceof Error ? error.message : '조합 탐색을 준비하지 못했습니다.';
|
||||
running = false;
|
||||
searchPhase = 'idle';
|
||||
}
|
||||
}
|
||||
|
||||
function baselineCardLabel(cardId: string): string {
|
||||
const card = cardById.get(cardId);
|
||||
const index = baselineState?.cardIds.indexOf(cardId) ?? -1;
|
||||
const awakening = index >= 0 ? baselineState?.awakenings[index] ?? 0 : 0;
|
||||
return card ? `${card.name}${card.versionName ? ` · ${card.versionName}` : ''} · ${awakening}개화` : cardId;
|
||||
}
|
||||
|
||||
function resultCardName(cardId: string): string {
|
||||
const card = cardById.get(cardId);
|
||||
return card ? cardLabel(card) : cardId;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>조합 탐색 · 홀로도리</title></svelte:head>
|
||||
|
||||
<main>
|
||||
<header><h1>조합 탐색</h1></header>
|
||||
{#if baselineState && baselineMatchesConditions}
|
||||
<section class="panel baseline-panel" aria-labelledby="baseline-title">
|
||||
<div class="section-title">
|
||||
<div><span>00</span><h2 id="baseline-title">기준 조합</h2></div>
|
||||
<strong>배치 분석 저장값</strong>
|
||||
</div>
|
||||
<p class="baseline-condition">{baselineChartMetadata?.title} · {baselineState.difficulty === 'expert' ? 'Expert' : 'Hard'}</p>
|
||||
<div class="baseline-members">
|
||||
{#each baselineResult?.order ?? baselineState.cardIds as cardId, slot}
|
||||
<div><span>{slot + 1}</span><strong>{baselineCardLabel(cardId)}</strong></div>
|
||||
{/each}
|
||||
</div>
|
||||
{#if baselineResult}
|
||||
<div class="scores baseline-scores">
|
||||
<div><span>종합력</span><strong>{baselineOverallPower.toLocaleString('ko-KR')}</strong></div>
|
||||
<div><span>평균 점수</span><strong>{baselineResult.expectedScore.toLocaleString('ko-KR')}</strong></div>
|
||||
<div><span>최고 점수</span><strong>{baselineResult.theoreticalMaxScore.toLocaleString('ko-KR')}</strong></div>
|
||||
</div>
|
||||
{:else if baselineRunning}
|
||||
<p class="baseline-status">배치 분석의 저장 조건으로 기준 점수를 계산하고 있습니다.</p>
|
||||
<progress value={baselineProgress.evaluatedCandidates} max={Math.max(1, baselineProgress.totalCandidates)}></progress>
|
||||
{:else if baselineError}
|
||||
<p class="error" role="alert">{baselineError}</p>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
<section class="panel" aria-labelledby="conditions-title">
|
||||
<div class="section-title"><div><span>01</span><h2 id="conditions-title">탐색 조건</h2></div><strong>5성 전체 대상</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>
|
||||
<div class="candidate-fields">
|
||||
<div class="candidate-awakening">
|
||||
<span>자동 후보 개화</span>
|
||||
<div class="awakening-stepper">
|
||||
<button type="button" disabled={candidateAwakening <= 0} aria-label="자동 후보 개화 낮추기" on:click={() => updateCandidateAwakening(candidateAwakening - 1)}>‹</button>
|
||||
<strong>{candidateAwakening}</strong>
|
||||
<button type="button" disabled={candidateAwakening >= 5} aria-label="자동 후보 개화 높이기" on:click={() => updateCandidateAwakening(candidateAwakening + 1)}>›</button>
|
||||
</div>
|
||||
</div>
|
||||
<label>자동 후보 기수 보너스 덮어쓰기<input class="number-input" type="text" inputmode="numeric" pattern="[0-9]*" value={candidateGenerationBonus ?? ''} placeholder="미사용" on:change={(event) => updateCandidateGenerationBonus(event.currentTarget.value)}></label>
|
||||
</div>
|
||||
<p class="candidate-guide">기수 보너스는 녹색 노드를 활성화해 얻을 수 있는 보너스를 의미합니다.</p>
|
||||
<div class="fixed-fields">
|
||||
<div class="fixed-column-headings">
|
||||
<span></span><span></span><span></span>
|
||||
<div><span>파란 노드 전체</span><span class="generation-heading">기수 보너스<br>덮어쓰기</span></div>
|
||||
</div>
|
||||
{#each fixedCardIds as selectedId, slot}
|
||||
<div class="fixed-field">
|
||||
<label>{slot + 1}번 고정
|
||||
<select value={selectedId} on:change={(event) => updateFixedCard(slot, event.currentTarget.value)}>
|
||||
<option value="">고정하지 않음</option>
|
||||
{#each fiveStarCards as card}<option value={card.id} disabled={selectedInAnotherSlot(card, slot)}>{cardLabel(card)}</option>{/each}
|
||||
</select>
|
||||
</label>
|
||||
<div class="fixed-awakening">
|
||||
<span>개화</span>
|
||||
<div class="awakening-stepper">
|
||||
<button type="button" disabled={!selectedId || fixedAwakenings[slot] <= 0} aria-label={`${slot + 1}번 고정 카드 개화 낮추기`} on:click={() => updateFixedAwakening(slot, fixedAwakenings[slot] - 1)}>‹</button>
|
||||
<strong>{fixedAwakenings[slot]}</strong>
|
||||
<button type="button" disabled={!selectedId || fixedAwakenings[slot] >= 5} aria-label={`${slot + 1}번 고정 카드 개화 높이기`} on:click={() => updateFixedAwakening(slot, fixedAwakenings[slot] + 1)}>›</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-reduction">
|
||||
<span>빈도 감소 고정</span>
|
||||
<div class="reduction-options">
|
||||
{#each REDUCTION_LOCK_OPTIONS as reduction}
|
||||
<button type="button" disabled={!selectedId} class:active={fixedCooldownReductions[slot] === reduction} aria-pressed={fixedCooldownReductions[slot] === reduction} on:click={() => updateFixedReduction(slot, reduction)}>{reduction === null ? '미사용' : `${reduction}%`}</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-overrides">
|
||||
<label class="override-checkbox">
|
||||
<input type="checkbox" disabled={!selectedId} checked={fixedAllBlueNodes[slot]} aria-label={`${slot + 1}번 고정 카드 파란 노드 전체 활성화`} on:change={() => toggleFixedAllBlueNodes(slot)}>
|
||||
<span aria-hidden="true"></span>
|
||||
</label>
|
||||
<input class="generation-input" type="text" inputmode="numeric" pattern="[0-9]*" disabled={!selectedId} value={fixedGenerationBonusOverrides[slot] ?? ''} placeholder="미사용" aria-label={`${slot + 1}번 고정 카드 기수 보너스 덮어쓰기`} on:change={(event) => updateFixedGenerationBonus(slot, event.currentTarget.value)}>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<p class="fixed-guide">‘파란 노드 전체’를 사용하지 않으면 사용자 데이터에 저장된 해당 멤버의 보드를 사용합니다.</p>
|
||||
<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 bind:value={leaderOutfitCardId} on:change={() => result = null}>{#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="hint">기수 보너스 덮어쓰기는 빈칸이면 저장된 실제 보드를 사용하고, 숫자를 입력하면 해당 값으로 대체합니다. 자동 후보는 파란 노드 전체 활성화·기수 보너스 {candidateGenerationBonus === null ? '저장값' : candidateGenerationBonus}·악곡 보너스 10% 조건으로 비교합니다.</p>
|
||||
{#if errorMessage}<p class="error" role="alert">{errorMessage}</p>{/if}
|
||||
<button class="search" type="button" disabled={running} on:click={search}>{running ? searchPhase === 'screening' ? `후보 선별 중 ${Math.round(screeningProgress * 100)}%` : `정밀 분석 중 ${Math.round(progress.evaluatedCandidates / Math.max(1, progress.totalCandidates) * 100)}%` : '최적 조합 탐색'}</button>
|
||||
<label class="compute-option">
|
||||
<input type="checkbox" bind:checked={maximizeCompute} disabled={running}>
|
||||
<span aria-hidden="true"></span>
|
||||
<strong>최대 컴퓨팅 자원 활용</strong>
|
||||
</label>
|
||||
<p class="compute-warning">탐색 속도는 빨라지지만, 분석 중 브라우저 및 기기 사용이 불편할 수 있습니다.</p>
|
||||
{#if running}<progress value={searchPhase === 'screening' ? screeningProgress : progress.evaluatedCandidates} max={searchPhase === 'screening' ? 1 : progress.totalCandidates}></progress>{/if}
|
||||
</section>
|
||||
|
||||
<section class="panel" aria-labelledby="result-title">
|
||||
<div class="section-title"><div><span>02</span><h2 id="result-title">탐색 결과</h2></div>{#if result}<strong>{screenedCombinationCount.toLocaleString('ko-KR')}개 선별 · {exactCombinationCount}개 정밀 분석 · 상위 {rankedResults.length}개</strong>{/if}</div>
|
||||
{#if rankedResults.length > 0}
|
||||
<div class="ranking-list">
|
||||
{#each rankedResults as ranking, rank}
|
||||
<details class="ranking-card" open={rank === 0}>
|
||||
<summary>
|
||||
<span class="rank-number">{rank + 1}위</span>
|
||||
<span class="rank-members">
|
||||
{#each ranking.result.order as cardId, memberIndex}
|
||||
<span class:added-member={!fixedCardIds.includes(cardId)}>
|
||||
{resultCardName(cardId)}
|
||||
</span>
|
||||
{#if memberIndex < ranking.result.order.length - 1}<i aria-hidden="true">·</i>{/if}
|
||||
{/each}
|
||||
</span>
|
||||
<span class="rank-metric"><small>최고 점수</small><strong>{ranking.result.theoreticalMaxScore.toLocaleString('ko-KR')}</strong>{#if comparableToBaseline}<i>{scoreDelta(ranking.result.theoreticalMaxScore, baselineResult!.theoreticalMaxScore)}</i>{/if}</span>
|
||||
</summary>
|
||||
<div class="ranking-detail">
|
||||
<AnalysisResultView
|
||||
result={ranking.result}
|
||||
durationSeconds={selectedChart?.durationSeconds ?? 0}
|
||||
cardName={resultCardName}
|
||||
instanceId={`combination-${rank}`}
|
||||
baseline={comparableToBaseline ? baselineResult : null}
|
||||
showScoreSummary={false}
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="empty">고정할 카드와 악곡을 선택한 뒤 조합 탐색을 시작해 주세요.</div>
|
||||
{/if}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 46px 0 80px; }
|
||||
header { margin-bottom: 28px; }
|
||||
h1 { margin: 0; color: #f3f5f8; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.045em; }
|
||||
.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: 11px; font-weight: 900; }
|
||||
.section-title h2 { margin: 0; font-size: 18px; }
|
||||
.section-title > strong { color: #aeb6c4; font-size: 12px; }
|
||||
.baseline-panel { border-color: #4a3a4b; background: #1c1920; }
|
||||
.baseline-condition { margin: 12px 0 0; color: #b8a8b4; font-size: 12px; }
|
||||
.baseline-members { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
|
||||
.baseline-members div { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 42px; padding: 7px 9px; border: 1px solid #37303a; border-radius: 9px; background: #141218; }
|
||||
.baseline-members span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #181118; background: #d987ac; font-size: 10px; font-weight: 900; }
|
||||
.baseline-members strong { overflow: hidden; color: #e8e1e7; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; }
|
||||
.baseline-status { margin: 15px 0 0; color: #9ba4b1; font-size: 12px; }
|
||||
label { display: grid; gap: 7px; color: #8f98a8; font-size: 12px; font-weight: 750; }
|
||||
select, .number-input { 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, .number-input:focus, .generation-input:focus { border-color: #d86f9c; outline: 3px solid rgb(216 111 156 / 14%); }
|
||||
.song-fields { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; margin-top: 22px; }
|
||||
.candidate-fields { display: grid; grid-template-columns: 130px minmax(220px, 320px); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #292f39; }
|
||||
.candidate-awakening { display: grid; gap: 7px; color: #8f98a8; font-size: 12px; font-weight: 750; }
|
||||
.candidate-guide { margin: 7px 0 0; color: #737d8d; font-size: 10px; line-height: 1.5; }
|
||||
.fixed-fields { display: grid; gap: 9px; margin-top: 16px; }
|
||||
.fixed-guide { margin: 8px 0 0; color: #737d8d; font-size: 10px; line-height: 1.5; }
|
||||
.fixed-column-headings { display: grid; grid-template-columns: minmax(0, 1fr) 120px 304px 180px; gap: 9px; margin-bottom: -3px; }
|
||||
.fixed-column-headings > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; color: #8f98a8; font-size: 10px; font-weight: 800; text-align: center; }
|
||||
.generation-heading { line-height: 1.25; white-space: nowrap; }
|
||||
.fixed-field { display: grid; grid-template-columns: minmax(0, 1fr) 120px 304px 180px; gap: 9px; }
|
||||
.fixed-awakening, .fixed-reduction { display: grid; align-self: end; align-items: center; height: 42px; gap: 7px; color: #8f98a8; font-size: 12px; font-weight: 750; }
|
||||
.fixed-awakening { grid-template-columns: 32px minmax(0, 1fr); }
|
||||
.fixed-reduction { grid-template-columns: 88px minmax(0, 1fr); }
|
||||
.awakening-stepper { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; 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: 22px; cursor: pointer; }
|
||||
.awakening-stepper strong { color: #e8ebf1; font-size: 12px; text-align: center; }
|
||||
.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 5px; border: 0; border-left: 1px solid #2d3440; color: #8f98a8; background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
|
||||
.reduction-options button:first-child { border-left: 0; }
|
||||
.reduction-options button.active { color: #171019; background: #ed8bb5; }
|
||||
.fixed-overrides { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-self: end; height: 42px; }
|
||||
.override-checkbox { display: grid; place-items: center; cursor: pointer; }
|
||||
.override-checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
||||
.override-checkbox span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #4a5361; border-radius: 6px; background: #11151b; transition: border-color .12s, background .12s; }
|
||||
.override-checkbox input:checked + span { border-color: #ed8bb5; background: #ed8bb5; }
|
||||
.override-checkbox input:checked + span::after { content: '✓'; color: #171019; font-size: 14px; font-weight: 950; }
|
||||
.override-checkbox input:focus-visible + span { outline: 3px solid rgb(216 111 156 / 20%); }
|
||||
.override-checkbox input:disabled + span { opacity: .35; cursor: default; }
|
||||
.generation-input { align-self: center; width: 100%; min-width: 0; height: 32px; padding: 0 7px; border: 1px solid #414957; border-radius: 7px; color: #e8ebf1; background: #11151b; font-size: 10px; font-weight: 800; text-align: center; }
|
||||
.generation-input::placeholder { color: #68717f; opacity: 1; }
|
||||
.generation-input:disabled { opacity: .35; }
|
||||
.awakening-stepper button:disabled, .reduction-options button:disabled { opacity: .35; cursor: default; }
|
||||
.leader-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #303641; }
|
||||
.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: 11px; font-weight: 850; }
|
||||
.outfit-effect p { margin: 0; color: #b9c1cd; font-size: 12px; line-height: 1.55; }
|
||||
.hint { margin: 13px 0 0; color: #858f9f; font-size: 11px; line-height: 1.6; }
|
||||
.error { margin: 14px 0 0; color: #ff9f9f; font-size: 13px; }
|
||||
.search { width: 100%; height: 46px; margin-top: 18px; border: 0; border-radius: 10px; color: #171019; background: #ed8bb5; font-weight: 900; cursor: pointer; }
|
||||
.search:disabled { opacity: .55; cursor: default; }
|
||||
.compute-option { display: flex; align-items: center; gap: 9px; width: fit-content; margin-top: 12px; cursor: pointer; }
|
||||
.compute-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
||||
.compute-option span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #4a5361; border-radius: 6px; background: #11151b; }
|
||||
.compute-option input:checked + span { border-color: #ed8bb5; background: #ed8bb5; }
|
||||
.compute-option input:checked + span::after { content: '✓'; color: #171019; font-size: 13px; font-weight: 950; }
|
||||
.compute-option input:focus-visible + span { outline: 3px solid rgb(216 111 156 / 20%); }
|
||||
.compute-option input:disabled + span, .compute-option input:disabled ~ strong { opacity: .5; cursor: default; }
|
||||
.compute-option strong { color: #c9d0da; font-size: 12px; }
|
||||
.compute-warning { margin: 6px 0 0 29px; color: #a98686; font-size: 11px; line-height: 1.5; }
|
||||
progress { display: block; width: 100%; height: 4px; margin-top: 8px; accent-color: #ed8bb5; }
|
||||
.ranking-list { display: grid; gap: 10px; margin-top: 18px; }
|
||||
.ranking-card { overflow: hidden; border: 1px solid #303744; border-radius: 12px; background: #12161c; }
|
||||
.ranking-card[open] { border-color: #55404f; background: #15151b; }
|
||||
.ranking-card summary { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 170px; align-items: center; gap: 14px; min-height: 76px; padding: 12px 42px 12px 16px; cursor: pointer; list-style: none; }
|
||||
.ranking-card summary::-webkit-details-marker { display: none; }
|
||||
.ranking-card summary::after { content: '⌄'; position: absolute; top: 50%; right: 15px; color: #858f9f; font-size: 16px; transform: translateY(-50%); transition: transform .15s; }
|
||||
.ranking-card[open] summary::after { transform: translateY(-50%) rotate(180deg); }
|
||||
.rank-number { display: grid; place-items: center; width: 48px; height: 34px; border-radius: 8px; color: #171019; background: #ed8bb5; font-size: 12px; font-weight: 900; }
|
||||
.rank-members { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; color: #dce1e8; font-size: 13px; font-weight: 800; line-height: 1.55; }
|
||||
.rank-members > span { white-space: nowrap; }
|
||||
.rank-members > i { flex: 0 0 auto; color: #596270; font-style: normal; }
|
||||
.rank-members .added-member { color: #f3a5c6; }
|
||||
.rank-metric { display: grid; gap: 4px; }
|
||||
.rank-metric small { color: #9ca5b3; font-size: 11px; font-style: normal; font-weight: 750; }
|
||||
.rank-metric strong { color: #f0a0c2; font-size: 18px; line-height: 1.2; }
|
||||
.rank-metric i { color: #90d8ae; font-size: 10px; font-style: normal; font-weight: 800; }
|
||||
.ranking-detail { padding: 0 16px 18px; border-top: 1px solid #2b313c; }
|
||||
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
|
||||
.scores div { display: grid; gap: 7px; padding: 15px; border-radius: 10px; background: #22202a; }
|
||||
.scores span { color: #a9b1be; font-size: 12px; }
|
||||
.scores strong { color: #f2a3c4; font-size: 19px; }
|
||||
.baseline-scores { margin-top: 10px; }
|
||||
.empty { display: grid; place-items: center; min-height: 150px; margin-top: 18px; padding: 28px; border: 1px dashed #303744; border-radius: 12px; color: #858f9f; font-size: 12px; text-align: center; }
|
||||
@media (max-width: 700px) {
|
||||
main { width: calc(100% - 24px); padding-top: 28px; }
|
||||
.panel { padding: 17px; }
|
||||
.song-fields { grid-template-columns: 1fr 100px; }
|
||||
.candidate-fields { grid-template-columns: 1fr; }
|
||||
.fixed-column-headings { grid-template-columns: minmax(0, 1fr) 102px; }
|
||||
.fixed-column-headings > span { display: none; }
|
||||
.fixed-column-headings > div { grid-column: 1 / -1; }
|
||||
.fixed-field { grid-template-columns: minmax(0, 1fr) 102px; }
|
||||
.fixed-reduction, .fixed-overrides { grid-column: 1 / -1; }
|
||||
.fixed-awakening { grid-template-columns: 1fr; }
|
||||
.leader-fields, .scores { grid-template-columns: 1fr; }
|
||||
.outfit-effect { grid-template-columns: 1fr; gap: 5px; }
|
||||
.baseline-members { grid-template-columns: 1fr; }
|
||||
.ranking-card summary { grid-template-columns: 48px minmax(0, 1fr); gap: 12px 10px; padding: 13px 34px 13px 12px; }
|
||||
.rank-number { grid-column: 1; grid-row: 1; }
|
||||
.rank-members { grid-column: 2; grid-row: 1; }
|
||||
.rank-metric:nth-of-type(3) { grid-column: 2; grid-row: 2; }
|
||||
.ranking-detail { padding: 0 10px 14px; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user