moth11.net
frontend for xcvr appview
idk
+3
-18
src/lib/components/CursorEffect.svelte
+3
-18
src/lib/components/CursorEffect.svelte
···
3
3
import { browser } from "$app/environment";
4
4
import { Polyline, Renderer, Transform, Vec3, Color } from "ogl";
5
5
interface Props {
6
-
enabled: boolean;
7
6
colors?: Array<string>;
8
7
}
9
8
10
-
let { enabled, colors = ["#e18f39", "#c5c042", "#387f4d", "#1d4633"] } =
11
-
$props();
9
+
let { colors = ["#e18f39", "#c5c042", "#387f4d", "#1d4633"] } = $props();
12
10
13
11
let canvas: undefined | HTMLCanvasElement = $state();
14
12
const thickness: [number, number] = [14, 35];
···
74
72
premultipliedAlpha: true,
75
73
canvas,
76
74
});
77
-
if (!browser || !enabled) return;
75
+
if (!browser) return;
78
76
const gl = renderer.gl;
79
77
gl.clearColor(0, 0, 0, 0);
80
78
gl.enable(gl.BLEND);
···
124
122
);
125
123
}
126
124
function update() {
127
-
if (!enabled) {
128
-
animationId = null;
129
-
return;
130
-
}
131
125
animationId = requestAnimationFrame(update);
132
126
lines.forEach((line) => {
133
127
for (let i = line.points.length - 1; i >= 0; i--) {
···
158
152
animationId = null;
159
153
}
160
154
}
161
-
$effect(() => {
162
-
if (enabled) {
163
-
startAnimation();
164
-
} else {
165
-
stopAnimation();
166
-
}
167
-
});
168
155
onMount(() => {
169
156
if (!browser) return;
170
157
initializeCursorEffect();
···
179
166
});
180
167
</script>
181
168
182
-
{#if enabled}
183
-
<canvas bind:this={canvas} id="cursor-canvas"></canvas>
184
-
{/if}
169
+
<canvas bind:this={canvas} id="cursor-canvas"></canvas>
185
170
186
171
<style>
187
172
#cursor-canvas {
+3
-1
src/routes/+layout.svelte
+3
-1
src/routes/+layout.svelte
+5
-7
src/routes/settings/+page.svelte
+5
-7
src/routes/settings/+page.svelte
···
34
34
: defaultCursor;
35
35
let cursor = $state(initialCursor === "t");
36
36
$effect(() => {
37
-
if (cursor !== undefined) {
38
-
window.localStorage.setItem("cursor", cursor ? "t" : "f");
39
-
if (cursor) {
40
-
cursorContext.setCursorTrue();
41
-
} else {
42
-
cursorContext.setCursorFalse();
43
-
}
37
+
window.localStorage.setItem("cursor", cursor ? "t" : "f");
38
+
if (cursor) {
39
+
cursorContext.setCursorTrue();
40
+
} else {
41
+
cursorContext.setCursorFalse();
44
42
}
45
43
});
46
44
</script>