blob: 3ed96c4530ddc4f65b84e083238dee48a9be4691 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<script lang="ts">
import MenuButton from '@hollowdark/lib/components/MenuButton.svelte'
import type { BeginState } from '@hollowdark/loading/session'
interface Props {
state: BeginState
onBegin: () => void
onContinue?: () => void
onSettings: () => void
onCredits: () => void
}
let {
state,
onBegin,
onContinue,
onSettings,
onCredits
}: Props = $props()
function handleContinue(): void {
onContinue?.()
}
</script>
<div class="begin-actions">
{#if state.kind === 'first-ever'}
<MenuButton variant="primary" onclick={onBegin}>Begin</MenuButton>
{:else if state.kind === 'returning-active'}
<MenuButton variant="primary" onclick={handleContinue}>
Continue {state.characterName}'s life
</MenuButton>
<MenuButton variant="secondary" onclick={onBegin}>Begin a new life</MenuButton>
{:else}
<MenuButton variant="primary" onclick={handleContinue}>Continue</MenuButton>
<MenuButton variant="secondary" onclick={onBegin}>Begin a new life</MenuButton>
{/if}
<MenuButton variant="tertiary" onclick={onSettings}>Settings</MenuButton>
<MenuButton variant="tertiary" onclick={onCredits}>Credits</MenuButton>
</div>
<style>
.begin-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
}
</style>
|
