Initial commit: TSS Bot Web Frontend (React/Vite + production server)

2026-07-02 02:09:34 +00:00
commit 36092f0269
87 changed files with 34597 additions and 0 deletions
@@ -0,0 +1,143 @@
+import React, { useEffect, useRef } from "react";
+import { TRUNK_TOP_CSS } from "./Tree";
+
+interface Leaf {
+  x: number;
+  y: number;
+  size: number;
+  speed: number;
+  drift: number;
+  rotation: number;
+  rotationSpeed: number;
+  opacity: number;
+  sway: number;
+  swaySpeed: number;
+  phase: number;
+}
+
+export default function FallingLeaves({ treeRef }: { treeRef: React.RefObject<HTMLCanvasElement | null> }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext("2d")!;
+    let animId: number;
+    const leaves: Leaf[] = [];
+    const MAX_LEAVES = 36;
+    const frameInterval = 1000 / 30;
+    let lastFrame = 0;
+    let isVisible = true;
+    let isRunning = false;
+    let treeBounds = { left: 0, top: 0, width: 0 };
+    let canvasBounds = { left: 0, top: 0 };
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    function measure() {
+      const parent = canvas.parentElement;
+      const rect = parent?.getBoundingClientRect();
+      canvas.width = Math.max(1, Math.round(rect?.width || window.innerWidth));
+      canvas.height = Math.max(1, Math.round(rect?.height || window.innerHeight));
+      const treeRect = treeRef.current?.getBoundingClientRect();
+      const canvasRect = canvas.getBoundingClientRect();
+      treeBounds = treeRect
+        ? { left: treeRect.left, top: treeRect.top, width: treeRect.width }
+        : { left: canvasRect.left + canvas.width * 0.2, top: canvasRect.top + canvas.height * 0.4, width: canvas.width * 0.6 };
+      canvasBounds = { left: canvasRect.left, top: canvasRect.top };
+    }
+    measure();
+    const resizeObserver = new ResizeObserver(measure);
+    if (canvas.parentElement) resizeObserver.observe(canvas.parentElement);
+    if (treeRef.current) resizeObserver.observe(treeRef.current);
+
+    function spawnLeaf(): Leaf {
+      const spawnY = treeBounds.top - canvasBounds.top + TRUNK_TOP_CSS;
+      const spawnX = treeBounds.left - canvasBounds.left + Math.random() * treeBounds.width * 0.8 + treeBounds.width * 0.1;
+      return {
+        x: spawnX,
+        y: spawnY,
+        size: Math.random() * 4 + 2,
+        speed: Math.random() * 0.3 + 0.15,
+        drift: Math.random() * 0.5 - 0.25,
+        rotation: Math.random() * Math.PI * 2,
+        rotationSpeed: (Math.random() - 0.5) * 0.02,
+        opacity: Math.random() * 0.25 + 0.08,
+        sway: Math.random() * 30 + 15,
+        swaySpeed: Math.random() * 0.008 + 0.003,
+        phase: Math.random() * Math.PI * 2,
+      };
+    }
+
+    let spawnTimer = 0;
+
+    function draw(timestamp: number) {
+      if (!isRunning) return;
+      animId = requestAnimationFrame(draw);
+      if (timestamp - lastFrame < frameInterval) return;
+      lastFrame = timestamp;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      spawnTimer++;
+      if (spawnTimer > 30 && leaves.length < MAX_LEAVES) {
+        leaves.push(spawnLeaf());
+        spawnTimer = 0;
+      }
+
+      for (let i = leaves.length - 1; i >= 0; i--) {
+        const l = leaves[i];
+        l.y += l.speed;
+        l.x += l.drift + Math.sin(l.phase) * l.swaySpeed * l.sway * 0.05;
+        l.phase += l.swaySpeed;
+        l.rotation += l.rotationSpeed;
+
+        ctx.save();
+        ctx.translate(l.x, l.y);
+        ctx.rotate(l.rotation);
+        ctx.globalAlpha = l.opacity;
+        ctx.fillStyle = "#fdb068";
+
+        const s = Math.round(l.size);
+        ctx.fillRect(-s / 2, -s / 2, s, s);
+
+        ctx.restore();
+
+        if (l.y > canvas.height + 10) {
+          leaves.splice(i, 1);
+        }
+      }
+
+    }
+
+    function start() {
+      if (reducedMotion || isRunning || !isVisible || document.hidden) return;
+      isRunning = true;
+      animId = requestAnimationFrame(draw);
+    }
+
+    function stop() {
+      isRunning = false;
+      if (animId) cancelAnimationFrame(animId);
+    }
+
+    const intersectionObserver = new IntersectionObserver(([entry]) => {
+      isVisible = entry.isIntersecting;
+      if (isVisible) start();
+      else stop();
+    });
+    const onVisibilityChange = () => {
+      if (document.hidden) stop();
+      else start();
+    };
+    intersectionObserver.observe(canvas);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    start();
+
+    return () => {
+      stop();
+      intersectionObserver.disconnect();
+      resizeObserver.disconnect();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} className="falling-leaves" />;
+}