vod frog, frog with the vods
add credits lilypad button with wavy modal for SFX attribution
+209
+184
src/lib/CreditsButton.svelte
+184
src/lib/CreditsButton.svelte
···
1
+
<!--
2
+
CreditsButton: A lilypad button in the bottom-left that opens a credits modal.
3
+
-->
4
+
<script lang="ts">
5
+
import WavyBorder from './WavyBorder.svelte';
6
+
import { playCroak } from './croak';
7
+
8
+
let showModal = $state(false);
9
+
10
+
function open() {
11
+
playCroak();
12
+
showModal = true;
13
+
}
14
+
15
+
function close() {
16
+
showModal = false;
17
+
}
18
+
19
+
function onBackdropClick(e: MouseEvent) {
20
+
if (e.target === e.currentTarget) close();
21
+
}
22
+
23
+
function onKeyDown(e: KeyboardEvent) {
24
+
if (e.key === 'Escape') close();
25
+
}
26
+
</script>
27
+
28
+
<svelte:window onkeydown={onKeyDown} />
29
+
30
+
<button class="credits-btn" onclick={open} title="Credits">
31
+
<img src="/lilymenu.svg" alt="Credits" class="lilypad-img" />
32
+
<span class="credits-label">credits</span>
33
+
</button>
34
+
35
+
{#if showModal}
36
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
37
+
<div class="modal-backdrop" onclick={onBackdropClick}>
38
+
<div class="modal-content">
39
+
<WavyBorder seed="credits-modal" fill="#39FF44" strokeColor="#0A182B" strokeWidth={2.5} padding={48}>
40
+
<div class="credits-body">
41
+
<h2 class="credits-title">credits</h2>
42
+
43
+
<div class="credit-item">
44
+
<p class="credit-label">Frog Croaking</p>
45
+
<p class="credit-author">by DrinkingWindGames</p>
46
+
<a href="https://freesound.org/s/848549/" target="_blank" class="credit-link">
47
+
freesound.org/s/848549/
48
+
</a>
49
+
<p class="credit-license">License: Attribution 4.0</p>
50
+
</div>
51
+
52
+
<button class="close-btn" onclick={close}>
53
+
close
54
+
</button>
55
+
</div>
56
+
</WavyBorder>
57
+
</div>
58
+
</div>
59
+
{/if}
60
+
61
+
<style>
62
+
.credits-btn {
63
+
all: unset;
64
+
position: fixed;
65
+
bottom: 16px;
66
+
left: 16px;
67
+
z-index: 100;
68
+
cursor: pointer;
69
+
display: flex;
70
+
align-items: center;
71
+
justify-content: center;
72
+
transition: transform 0.2s ease;
73
+
}
74
+
75
+
.credits-btn:hover {
76
+
transform: scale(1.1) rotate(-5deg);
77
+
}
78
+
79
+
.lilypad-img {
80
+
width: clamp(70px, 10vw, 100px);
81
+
height: auto;
82
+
filter: drop-shadow(2px 3px 4px rgba(10, 24, 43, 0.3));
83
+
}
84
+
85
+
.credits-label {
86
+
position: absolute;
87
+
font-family: 'PicNic', cursive, system-ui;
88
+
font-size: clamp(0.7rem, 1.2vw, 0.9rem);
89
+
color: #0A182B;
90
+
pointer-events: none;
91
+
margin-top: 2px;
92
+
}
93
+
94
+
.modal-backdrop {
95
+
position: fixed;
96
+
inset: 0;
97
+
background: rgba(10, 24, 43, 0.6);
98
+
z-index: 1000;
99
+
display: flex;
100
+
align-items: center;
101
+
justify-content: center;
102
+
padding: 20px;
103
+
}
104
+
105
+
.modal-content {
106
+
width: min(500px, 90vw);
107
+
}
108
+
109
+
.credits-body {
110
+
display: flex;
111
+
flex-direction: column;
112
+
align-items: center;
113
+
text-align: center;
114
+
gap: 12px;
115
+
}
116
+
117
+
.credits-title {
118
+
font-family: 'PicNic', cursive, system-ui;
119
+
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
120
+
color: #0A182B;
121
+
margin: 0;
122
+
}
123
+
124
+
.credit-item {
125
+
display: flex;
126
+
flex-direction: column;
127
+
gap: 4px;
128
+
}
129
+
130
+
.credit-label {
131
+
font-family: 'PicNic', cursive, system-ui;
132
+
font-size: 1.1rem;
133
+
color: #0A182B;
134
+
margin: 0;
135
+
font-weight: bold;
136
+
}
137
+
138
+
.credit-author {
139
+
font-family: 'Fang', system-ui, sans-serif;
140
+
font-size: 0.95rem;
141
+
color: #0A182B;
142
+
margin: 0;
143
+
opacity: 0.8;
144
+
}
145
+
146
+
.credit-link {
147
+
font-family: 'Fang', system-ui, sans-serif;
148
+
font-size: 0.9rem;
149
+
color: #0A182B;
150
+
text-decoration: underline;
151
+
text-decoration-color: #FF3992;
152
+
transition: color 0.15s;
153
+
}
154
+
155
+
.credit-link:hover {
156
+
color: #FF3992;
157
+
}
158
+
159
+
.credit-license {
160
+
font-family: 'Fang', system-ui, sans-serif;
161
+
font-size: 0.8rem;
162
+
color: #0A182B;
163
+
opacity: 0.65;
164
+
margin: 0;
165
+
font-style: italic;
166
+
}
167
+
168
+
.close-btn {
169
+
all: unset;
170
+
font-family: 'PicNic', cursive, system-ui;
171
+
font-size: 1rem;
172
+
color: #FFDEED;
173
+
background: #0A182B;
174
+
padding: 8px 28px;
175
+
border-radius: 30px;
176
+
cursor: pointer;
177
+
margin-top: 8px;
178
+
transition: transform 0.15s ease;
179
+
}
180
+
181
+
.close-btn:hover {
182
+
transform: scale(1.05);
183
+
}
184
+
</style>
+2
src/routes/+layout.svelte
+2
src/routes/+layout.svelte
···
3
3
import MeshBackground from '$lib/MeshBackground.svelte';
4
4
import PlantOverlay from '$lib/PlantOverlay.svelte';
5
5
import FlySpawner from '$lib/FlySpawner.svelte';
6
+
import CreditsButton from '$lib/CreditsButton.svelte';
6
7
import { initAuth } from '$lib/auth.svelte';
7
8
8
9
let { children } = $props();
···
49
50
<MeshBackground />
50
51
<PlantOverlay />
51
52
<FlySpawner />
53
+
<CreditsButton />
52
54
53
55
{@render children()}
54
56
