aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/ui/src/components/ParticleBackground.svelte
diff options
context:
space:
mode:
authorBegonia, HE <163421589+BegoniaHe@users.noreply.github.com>2026-01-14 22:05:25 +0100
committerBegonia, HE <163421589+BegoniaHe@users.noreply.github.com>2026-01-14 22:05:25 +0100
commitb473aa744e1382e946a92a116707b93151558888 (patch)
treea8957a732caac948412c78ac7a443771f7ee12d0 /ui/src/components/ParticleBackground.svelte
parent2cb21f2bbc601ae134095cf0e68b5bcc6966d227 (diff)
parent18111ef323a81e399e3b907c9046170afcb8e0eb (diff)
downloadDropOut-b473aa744e1382e946a92a116707b93151558888.tar.gz
DropOut-b473aa744e1382e946a92a116707b93151558888.zip
Merge main into feat/download-java-rt
- Integrate latest main branch changes (Fabric, Forge support, new UI) - Keep Adoptium Java download feature with SHA256 support - Merge improved download progress tracking with checksum verification - Update dependencies and build configuration
Diffstat (limited to 'ui/src/components/ParticleBackground.svelte')
-rw-r--r--ui/src/components/ParticleBackground.svelte57
1 files changed, 57 insertions, 0 deletions
diff --git a/ui/src/components/ParticleBackground.svelte b/ui/src/components/ParticleBackground.svelte
new file mode 100644
index 0000000..080f1f2
--- /dev/null
+++ b/ui/src/components/ParticleBackground.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+ import { onMount, onDestroy } from "svelte";
+ import { ConstellationEffect } from "../lib/effects/ConstellationEffect";
+ import { SaturnEffect } from "../lib/effects/SaturnEffect";
+ import { settingsState } from "../stores/settings.svelte";
+
+ let canvas: HTMLCanvasElement;
+ let activeEffect: any;
+
+ function loadEffect() {
+ if (activeEffect) {
+ activeEffect.destroy();
+ }
+
+ if (!canvas) return;
+
+ if (settingsState.settings.active_effect === "saturn") {
+ activeEffect = new SaturnEffect(canvas);
+ } else {
+ activeEffect = new ConstellationEffect(canvas);
+ }
+
+ // Ensure correct size immediately
+ activeEffect.resize(window.innerWidth, window.innerHeight);
+ }
+
+ $effect(() => {
+ const _ = settingsState.settings.active_effect;
+ if (canvas) {
+ loadEffect();
+ }
+ });
+
+ onMount(() => {
+ const resizeObserver = new ResizeObserver(() => {
+ if (canvas && activeEffect) {
+ activeEffect.resize(window.innerWidth, window.innerHeight);
+ }
+ });
+
+ resizeObserver.observe(document.body);
+
+ return () => {
+ resizeObserver.disconnect();
+ if (activeEffect) activeEffect.destroy();
+ };
+ });
+
+ onDestroy(() => {
+ if (activeEffect) activeEffect.destroy();
+ });
+</script>
+
+<canvas
+ bind:this={canvas}
+ class="absolute inset-0 z-0 pointer-events-none"
+></canvas>