dal4segno/HolodoriCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refresh timeline axes when switching songs
Publish GitHub Pages output / publish (push) Successful in 43s
Details

Browse Source
This commit is contained in:
dal4segno
2026-09-07 17:13:01 +09:00
parent 0af64052c6
commit 7d79e0ab97
3 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/analysis/+page.svelte
+16 -16
View File
@@ -842,16 +842,16 @@
return Array.from({ length: Math.floor(durationSeconds / interval) + 1 }, (_, index) => index * interval);
}
function timelinePosition(seconds: number): number {
return timelineDuration > 0 ? Math.max(0, Math.min(100, seconds / timelineDuration * 100)) : 0;
function timelinePosition(seconds: number, duration: number): number {
return duration > 0 ? Math.max(0, Math.min(100, seconds / duration * 100)) : 0;
}
function skillWindowStyle(startSeconds: number, endSeconds: number): string {
return `left: ${timelinePosition(startSeconds)}%; width: ${Math.max(0, timelinePosition(endSeconds) - timelinePosition(startSeconds))}%;`;
function skillWindowStyle(startSeconds: number, endSeconds: number, duration: number): string {
return `left: ${timelinePosition(startSeconds, duration)}%; width: ${Math.max(0, timelinePosition(endSeconds, duration) - timelinePosition(startSeconds, duration))}%;`;
}
function timelineTrackStyle(): string {
return `min-width: ${timelineWidth}px; --time-grid-step: ${timelinePosition(10)}%;`;
function timelineTrackStyle(width: number, duration: number): string {
return `min-width: ${width}px; --time-grid-step: ${timelinePosition(10, duration)}%;`;
}
function memberColor(cardId: string): string {
@@ -859,8 +859,8 @@
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 coloredWindowStyle(window: SkillWindow, duration: number): string {
return `${skillWindowStyle(window.startSeconds, window.endSeconds, duration)} --member-color: ${memberColor(window.cardId)};`;
}
function mergeEffectiveActiveWindows(windows: readonly EffectiveSkillWindow[]): DisplayEffectiveWindow[] {
@@ -1113,11 +1113,11 @@
{#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()}>
<div class="timeline-track skill-track" style={timelineTrackStyle(timelineWidth, timelineDuration)}>
{#each result.activeWindows.filter((window) => window.cardId === cardId) as window}
<span
class="skill-window active-window"
style={coloredWindowStyle(window)}
style={coloredWindowStyle(window, timelineDuration)}
title={`액티브 ${formatSeconds(window.startSeconds)}~${formatSeconds(window.endSeconds)} · ${window.scoreUpPercent}%`}
role="img"
aria-label={`액티브 ${formatSeconds(window.startSeconds)}부터 ${formatSeconds(window.endSeconds)}까지`}
@@ -1128,11 +1128,11 @@
{/each}
<div class="timeline-row summary-row">
<strong class="lane-label summary-label">최종 액티브</strong>
<div class="timeline-track skill-track" style={timelineTrackStyle()}>
<div class="timeline-track skill-track" style={timelineTrackStyle(timelineWidth, timelineDuration)}>
{#each displayedEffectiveActiveWindows as window}
<span
class="skill-window effective-window"
style={coloredWindowStyle(window)}
style={coloredWindowStyle(window, timelineDuration)}
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)}까지 적용`}
@@ -1142,11 +1142,11 @@
</div>
<div class="timeline-row summary-row">
<strong class="lane-label summary-label">스페셜</strong>
<div class="timeline-track skill-track" style={timelineTrackStyle()}>
<div class="timeline-track skill-track" style={timelineTrackStyle(timelineWidth, timelineDuration)}>
{#each result.specialWindows as window}
<span
class="skill-window special-window"
style={coloredWindowStyle(window)}
style={coloredWindowStyle(window, timelineDuration)}
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)}까지 적용`}
@@ -1156,8 +1156,8 @@
</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 class="timeline-track time-axis" style={timelineTrackStyle(timelineWidth, timelineDuration)}>
{#each timelineTicks as second}<span style={`left: ${timelinePosition(second, timelineDuration)}%;`}>{second}초</span>{/each}
</div>
</div>
</div>