diff options
| author | 2026-02-25 02:06:07 +0800 | |
|---|---|---|
| committer | 2026-02-25 02:06:07 +0800 | |
| commit | 78ac61904d78d558d092eff08c9f261cbdb187e8 (patch) | |
| tree | 96f68d1f1554ee3a0532793afaaa52b0c73dcbec /packages/ui/src/components/particle-background.tsx | |
| parent | 8ff3af6cb908fd824b512379dd21ed4f595ab6bb (diff) | |
| parent | 329734b23957b84cde2af459fa61c7385fb5b5f1 (diff) | |
| download | DropOut-78ac61904d78d558d092eff08c9f261cbdb187e8.tar.gz DropOut-78ac61904d78d558d092eff08c9f261cbdb187e8.zip | |
feat(ui): partial react rewrite (#77)
## Summary by Sourcery
Export backend data structures to TypeScript for the new React-based UI
and update CI to build additional targets.
New Features:
- Generate TypeScript definitions for core backend structs and enums
used by the UI.
- Now use our own Azure app(_DropOut_) to finish the authorize process.
Enhancements:
- Annotate existing Rust models with ts-rs metadata to control exported
TypeScript shapes, including tagged enums and opaque JSON fields.
Build:
- Add ts-rs as a dependency for generating TypeScript bindings from Rust
types.
CI:
- Extend the Semifold CI workflow to run on the dev branch and build
additional Linux musl and Windows GNU targets using cross where needed.
Diffstat (limited to 'packages/ui/src/components/particle-background.tsx')
| -rw-r--r-- | packages/ui/src/components/particle-background.tsx | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/packages/ui/src/components/particle-background.tsx b/packages/ui/src/components/particle-background.tsx new file mode 100644 index 0000000..2e0b15a --- /dev/null +++ b/packages/ui/src/components/particle-background.tsx @@ -0,0 +1,63 @@ +import { useEffect, useRef } from "react"; +import { SaturnEffect } from "../lib/effects/SaturnEffect"; + +export function ParticleBackground() { + const canvasRef = useRef<HTMLCanvasElement | null>(null); + const effectRef = useRef<SaturnEffect | null>(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + // Instantiate SaturnEffect and attach to canvas + let effect: SaturnEffect | null = null; + try { + effect = new SaturnEffect(canvas); + effectRef.current = effect; + } catch (err) { + // If effect fails, silently degrade (keep background blank) + // eslint-disable-next-line no-console + console.warn("SaturnEffect initialization failed:", err); + } + + const resizeHandler = () => { + if (effectRef.current) { + try { + effectRef.current.resize(window.innerWidth, window.innerHeight); + } catch { + // ignore + } + } + }; + + window.addEventListener("resize", resizeHandler); + + // Expose getter for HomeView interactions (getSaturnEffect) + // HomeView will call window.getSaturnEffect()?.handleMouseDown/Move/Up + ( + window as unknown as { getSaturnEffect?: () => SaturnEffect | null } + ).getSaturnEffect = () => effectRef.current; + + return () => { + window.removeEventListener("resize", resizeHandler); + if (effectRef.current) { + try { + effectRef.current.destroy(); + } catch { + // ignore + } + } + effectRef.current = null; + ( + window as unknown as { getSaturnEffect?: () => SaturnEffect | null } + ).getSaturnEffect = undefined; + }; + }, []); + + return ( + <canvas + ref={canvasRef} + className="absolute inset-0 z-0 pointer-events-none" + /> + ); +} |