continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,144 @@
+import { Ticker } from "@/components/shared/pixi/Pixi";
+import { sleep } from "@/utils/sleep";
+
+import { CELL_SIZE, MAIN_COLOR } from "./cell";
+import AnimatedRect, { IAnimatedRect } from "./components/AnimatedRect";
+import { IBlinkingContainer } from "./components/BlinkingContainer";
+import Dot from "./components/Dot";
+
+type Props = Parameters<Ticker>[0] & {
+  x: number;
+  y: number;
+  blinkingContainer: IBlinkingContainer;
+  anchorGraphic: IAnimatedRect;
+};
+
+export default async function search(props: Props) {
+  const rects = Array.from({ length: 8 }, () => {
+    return AnimatedRect({
+      app: props.app,
+      x: CELL_SIZE / 2,
+      y: CELL_SIZE / 2,
+      width: 10,
+      height: 10,
+      radius: 0,
+      color: MAIN_COLOR,
+    });
+  });
+
+  const dots = Array.from({ length: 16 }, () => {
+    return Dot({
+      x: CELL_SIZE / 2,
+      y: CELL_SIZE / 2,
+      app: props.app,
+    });
+  });
+
+  dots.forEach((dot) =>
+    props.blinkingContainer.container.addChild(dot.graphic),
+  );
+
+  await sleep(500);
+
+  await props.anchorGraphic.animate({
+    radius: 0,
+    width: 12,
+    height: 12,
+  });
+
+  rects.forEach((rect) =>
+    props.blinkingContainer.container.addChild(rect.graphic),
+  );
+
+  rects.unshift(props.anchorGraphic);
+
+  await sleep(500);
+
+  props.blinkingContainer.blink({ delay: 0.1 });
+  await props.blinkingContainer.shrink();
+
+  await Promise.all(
+    [
+      dots.map((dot, index) => {
+        const x = 13 + (index % 4) * 18;
+        const y = 13 + Math.floor(index / 4) * 18;
+
+        return dot.animate({ x, y });
+      }),
+
+      rects[0].animate({ width: 10, height: 10 }),
+
+      rects.map((rect, index) => {
+        const x = 22 + (index % 3) * 18;
+        const y = 22 + Math.floor(index / 3) * 18;
+
+        return rect.animate({ x, y });
+      }),
+    ].flat(),
+  );
+
+  await sleep(300);
+
+  Promise.all(
+    [
+      rects.map((rect) => rect.animate({ alpha: 0.68 })),
+      dots.map((dot) => dot.animate({ alpha: 0.68 })),
+    ].flat(),
+  );
+
+  props.blinkingContainer.blink();
+  await sleep(400);
+
+  for await (const rect of rects) {
+    // Get the surrounding dots of this rect
+    const rectX = rect.currentProps.x;
+    const rectY = rect.currentProps.y;
+    const surroundingDots = dots.filter((dot) => {
+      const dx = Math.abs(dot.currentProps.x - rectX);
+      const dy = Math.abs(dot.currentProps.y - rectY);
+
+      // Consider "surrounding" as adjacent horizontally, vertically, or diagonally (distance 18)
+      return (
+        (dx === 0 && dy === 9) ||
+        (dx === 9 && dy === 0) ||
+        (dx === 9 && dy === 9)
+      );
+    });
+
+    await Promise.all(
+      [
+        surroundingDots.map((dot) =>
+          dot.animate({ alpha: 1 }, { duration: 0.75 }),
+        ),
+        rect.animate({ alpha: 1, width: 14, height: 14 }, { duration: 0.75 }),
+      ].flat(),
+    );
+
+    rect.animate({ alpha: 0.68, width: 10, height: 10 }, { duration: 0.75 });
+    Promise.all(
+      surroundingDots.map((dot) =>
+        dot.animate({ alpha: 0.68 }, { duration: 0.75 }),
+      ),
+    );
+  }
+
+  await Promise.all(
+    [
+      rects.map((rect) =>
+        rect.animate(props.anchorGraphic.defaultProps, {
+          delay: Math.random() * 0.3,
+          duration: 0.3,
+        }),
+      ),
+
+      dots.map((dot) =>
+        dot.animate(dot.defaultProps, { delay: Math.random() * 0.3 }),
+      ),
+    ].flat(),
+  );
+
+  rects.shift();
+
+  rects.forEach((rect) => rect.graphic.destroy());
+  dots.forEach((dot) => dot.graphic.destroy());
+}