55 lines
2.3 KiB
Svelte
55 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { page } from '$app/stores';
|
|
import { events } from '$lib/data/events.ts';
|
|
import { createInitialReleaseClock, synchronizeReleaseClock } from '$lib/data/release-clock.ts';
|
|
import { activeEventAt } from '$lib/engine/event-optimization.ts';
|
|
import CombinationPage from '../combination/+page.svelte';
|
|
|
|
let clock = createInitialReleaseClock($page.data?.serverNow);
|
|
let now = clock.now();
|
|
let eventScoreMode = false;
|
|
$: activeEvent = activeEventAt(events, now);
|
|
|
|
onMount(() => {
|
|
let mounted = true;
|
|
void synchronizeReleaseClock().then((nextClock) => {
|
|
if (!mounted) return;
|
|
clock = nextClock;
|
|
now = clock.now();
|
|
});
|
|
const timer = window.setInterval(() => now = clock.now(), 1_000);
|
|
return () => {
|
|
mounted = false;
|
|
window.clearInterval(timer);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<svelte:head><title>이벤트 PT·점수 · 홀로도리 계산기</title></svelte:head>
|
|
|
|
{#if activeEvent}
|
|
<nav class="event-objective" aria-label="이벤트 계산 목적">
|
|
<button class:active={!eventScoreMode} aria-pressed={!eventScoreMode} on:click={() => eventScoreMode = false}>PT</button>
|
|
<button class:active={eventScoreMode} aria-pressed={eventScoreMode} on:click={() => eventScoreMode = true}>스코어</button>
|
|
</nav>
|
|
{#key activeEvent.id + ':' + eventScoreMode}
|
|
<CombinationPage eventMode {eventScoreMode} />
|
|
{/key}
|
|
{:else}
|
|
<main class="inactive-event">
|
|
<h1>진행 중인 이벤트가 없습니다</h1>
|
|
<p>포인트 획득 이벤트가 시작되면 이 메뉴와 최적화 기능이 자동으로 활성화됩니다.</p>
|
|
</main>
|
|
{/if}
|
|
|
|
<style>
|
|
.event-objective { display: flex; gap: 8px; width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 20px auto 0; }
|
|
button { padding: 10px 16px; border: 1px solid #604653; border-radius: 8px; background: #261d23; color: #c9b4bd; cursor: pointer; }
|
|
button.active { background: #573448; color: #fff; border-color: #f2a6c6; }
|
|
|
|
.inactive-event { width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: var(--page-content-top) 0 80px; }
|
|
h1 { margin: 0; color: #f3f5f8; font-size: var(--page-title-size); letter-spacing: -.045em; }
|
|
p { margin: 12px 0 0; color: #929cab; line-height: 1.7; }
|
|
</style>
|