@pretty-chitty/core 1.1.1

package/src/library/components/Panel/PanelTabStack.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Box, Stack } from "@mui/material";
+import Color from "color";
+import { Chit } from "../../game/Chit";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { useAnimationSpeedMultiplier } from "../../hooks/useTimeController";
+import { UpdatingCanvasImage } from "../UpdatingCanvasImage";
+import { ZINDEX_PANEL_CUTOUTS } from "../../utilities/zIndex";
+import { IconCanvas } from "../../utilities/CanvasStack/IconCanvas";
+import { IUpdatingCanvas } from "../../utilities/IUpdatingCanvas";
+import { ImageSpec } from "../../utilities/CanvasStack/CanvasOperations";
+
+const TAB_HEIGHT = 20;
+const ANIMATION_DURATION = 0.125;
+const TAB_WIDTH = TAB_HEIGHT * 2;
+
+function PanelTab({ chit, onClick, selected }: { selected?: boolean; chit: Chit; onClick: () => void }) {
+  // eslint-disable-next-line prefer-const
+  let { color, icon } = chit.panelTab ?? {};
+  if (!color) {
+    color = "#ffffff";
+  }
+  const lightness = Color(color).lightness();
+
+  const outlineColor = Color(color)
+    .lightness(lightness < 35 ? lightness + 10 : 20)
+    .hex();
+
+  const image = icon
+    ? (icon as any)?.canvas
+      ? (icon as IUpdatingCanvas)
+      : new IconCanvas(icon as ImageSpec).get()
+    : undefined;
+
+  return (
+    <Box
+      onMouseDown={onClick}
+      sx={{ pt: 1, pb: 1, mt: -1, mb: -1, position: "relative", zIndex: ZINDEX_PANEL_CUTOUTS }}
+    >
+      <Box
+        sx={{
+          opacity: selected ? 1 : 0.75,
+          transition: "opacity linear 0.25s",
+          background: color,
+          border: `2px solid ${outlineColor}`,
+          borderTop: "none",
+          overflow: "hidden",
+          cursor: "pointer",
+          height: TAB_HEIGHT,
+          textAlign: "center",
+          width: TAB_WIDTH,
+          borderBottomLeftRadius: TAB_HEIGHT / 4,
+          borderBottomRightRadius: TAB_HEIGHT / 4,
+        }}
+      >
+        {image && <UpdatingCanvasImage image={image} style={{ height: TAB_HEIGHT - 2, width: TAB_HEIGHT - 2 }} />}
+      </Box>
+    </Box>
+  );
+}
+
+export function PanelTabStack({
+  chits,
+  selectedIndex,
+  onSelectedIndexChange,
+}: {
+  chits: Chit[];
+  selectedIndex: number;
+  onSelectedIndexChange: (index: number) => void;
+}) {
+  const theme = useGameTheme();
+  const timeMultiplier = useAnimationSpeedMultiplier();
+
+  return (
+    <Stack direction="row" sx={{ height: TAB_HEIGHT }}>
+      <Box flex={1} />
+      <Stack direction="row" sx={{ position: "relative", width: TAB_WIDTH * chits.length }}>
+        {chits.map((chit, index) => (
+          <PanelTab
+            key={chit.id}
+            chit={chit}
+            onClick={() => onSelectedIndexChange(index)}
+            selected={index === selectedIndex}
+          />
+        ))}
+        <Box
+          sx={{
+            height: "2px",
+            width: TAB_WIDTH * 0.75,
+            transition: `left ease-in-out ${ANIMATION_DURATION * timeMultiplier}s`,
+            background: theme.panelSelectionCutoutSelected,
+            position: "absolute",
+            bottom: -2,
+            left: selectedIndex * TAB_WIDTH + TAB_WIDTH * 0.125,
+          }}
+        />
+      </Stack>
+      <Box flex={1} />
+    </Stack>
+  );
+}
+
+export { TAB_HEIGHT };

package/src/library/components/Panel/SinglePanel.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import { Box } from "@mui/material";
+import { Chit } from "../../game/Chit";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { panelTransition } from "./util";
+import { useAnimationSpeedMultiplier } from "../../hooks/useTimeController";
+import { ZINDEX_PINCH_OUT_FOCUSED } from "../../utilities/zIndex";
+import { usePanelPositioning } from "../../hooks/usePanelPositioning";
+
+export function SinglePanel({
+  chit,
+  x,
+  y,
+  w,
+  h,
+  enabled,
+  paused = false,
+  focusedPanel,
+  setFocusedPanel: _setFocusedPanel,
+}: {
+  chit: Chit;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  enabled: boolean;
+  paused?: boolean;
+  focusedPanel?: Chit | undefined;
+  setFocusedPanel: (chit: Chit | undefined) => void;
+}) {
+  const theme = useGameTheme();
+  const animationSpeedMultiplier = useAnimationSpeedMultiplier();
+  const { registerPosition } = usePanelPositioning();
+
+  const effectivePaused = !enabled ? true : paused;
+
+  // Register position for ViewerWrapper (only when NOT in full-screen focus mode)
+  useEffect(() => {
+    // If focusedPanel is set, don't register - the full-screen MultiPanel in PanelContents handles it
+    if (!enabled) {
+      return;
+    }
+
+    const chitId = chit.id ?? "";
+    registerPosition(chitId, {
+      chitId,
+      x: x + theme.spacing / 4,
+      y: y + theme.spacing / 4,
+      w: w - theme.spacing / 2,
+      h: h - theme.spacing / 2,
+      paused: effectivePaused,
+      refContainer: null,
+      front: true,
+      visible: true,
+    });
+  }, [chit, x, y, w, h, effectivePaused, enabled, focusedPanel, registerPosition, theme.spacing]);
+
+  return (
+    <Box
+      sx={{
+        overflow: "hidden",
+        width: `${w}px`,
+        height: `${h}px`,
+        left: `${x}px`,
+        top: `${y}px`,
+        position: "absolute",
+        p: `${theme.spacing / 4}px`,
+        transition: panelTransition(theme, animationSpeedMultiplier),
+        zIndex: enabled ? "auto" : -1,
+      }}
+    >
+      <Box sx={{ width: "100%", height: "100%", position: "relative", borderRadius: "10px", overflow: "hidden" }} />
+    </Box>
+  );
+}

package/src/library/components/Panel/ViewerWrapper.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Stack } from "@mui/material";
+import { Chit } from "../../game/Chit";
+import Viewer from "../Viewer";
+import { useTimeState } from "../../hooks/useTimeController";
+import { useEventChannelState } from "../../hooks/useEventChannelState";
+import PanelSpark from "../PanelSpark";
+import { useChit } from "../../hooks/useChits";
+import { ZINDEX_SPARKS } from "../../utilities/zIndex";
+import { RootChitRenderInstance } from "../../rendering/RootChitRenderInstance";
+
+export function ViewerWrapper({
+  chit,
+  w,
+  h,
+  x,
+  y,
+  paused,
+  front,
+  panCallback,
+  refContainer,
+  focusedPanel,
+  setFocusedPanel,
+  transition,
+}: {
+  chit: Chit;
+  w: number;
+  h: number;
+  x?: number;
+  y?: number;
+  paused: boolean;
+  front: boolean;
+  panCallback?: (direction: "left" | "right") => void;
+  refContainer: React.RefObject<HTMLElement> | null;
+  focusedPanel?: Chit | undefined;
+  setFocusedPanel: (chit: Chit | undefined) => void;
+  transition?: string | null;
+}) {
+  const chitInstance = useChit(chit.id ?? "nochit");
+
+  // if time is overridden, we don't want to pause ourselves (ever)
+  // it's likely trying to play "catchup" and will go very very fast
+  const timeState = useTimeState();
+  const [override] = useEventChannelState(timeState.animationSpeedOverrideMultiplier);
+  const [opacity, setOpacity] = useState(front ? 1 : 0);
+
+  const sparks = chitInstance?.getSparks("panel") ?? [];
+
+  // Use refs to maintain latest values without causing zoomCallback to change
+  const focusedPanelRef = useRef(focusedPanel);
+  const setFocusedPanelRef = useRef(setFocusedPanel);
+
+  useEffect(() => {
+    const to = setTimeout(
+      () => {
+        if (front) {
+          setOpacity(1);
+        } else {
+          setOpacity(0);
+        }
+      },
+      front ? 0 : 250,
+    );
+    return () => {
+      clearTimeout(to);
+    };
+  }, [front]);
+
+  // Update refs on each render
+  useEffect(() => {
+    focusedPanelRef.current = focusedPanel;
+    setFocusedPanelRef.current = setFocusedPanel;
+  }, [focusedPanel, setFocusedPanel]);
+
+  // Create a stable callback that uses the refs
+  const zoomCallback = useCallback(
+    (newZoom: number, oldZoom: number) => {
+      if (newZoom > oldZoom) {
+        setFocusedPanelRef.current(chit);
+      } else if (newZoom <= 1 && oldZoom > 1 && focusedPanelRef.current === chit) {
+        setFocusedPanelRef.current(undefined);
+      }
+    },
+    [chit],
+  );
+
+  useEffect(() => {
+    if (focusedPanel !== chit) {
+      (chit.renderInstance as RootChitRenderInstance)?.cameraWrapper?.handleZoom(0, 0, -20, false);
+    } else {
+      (chit.renderInstance as RootChitRenderInstance)?.cameraWrapper?.handleZoom(0, 0, 0.00001, false);
+    }
+  }, [focusedPanel, chit]);
+
+  const rootRenderInstance = chit.renderInstance as RootChitRenderInstance;
+
+  return (
+    <Box
+      sx={{
+        borderRadius: "10px",
+        overflow: "hidden",
+        position: "absolute",
+        left: x !== undefined ? `${x}px` : 0,
+        top: y !== undefined ? `${y}px` : 0,
+        width: `${w}px`,
+        height: `${h}px`,
+        transition: transition,
+        zIndex: front ? 1 : 0,
+        opacity,
+      }}
+    >
+      <Stack direction={"row"} flexWrap={"wrap"} sx={{ position: "absolute", zIndex: ZINDEX_SPARKS }}>
+        {sparks.map((spark, i) => (
+          <PanelSpark zIndex={ZINDEX_SPARKS + sparks.length - i} key={spark.id} chit={spark} paused={paused} />
+        ))}
+      </Stack>
+
+      <Viewer
+        refContainer={refContainer}
+        paused={override ? false : paused}
+        hardPaused={override ? false : !front}
+        chit={chit}
+        w={Math.ceil(w)}
+        h={Math.ceil(h)}
+        panCallback={panCallback}
+        zoomCallback={zoomCallback}
+        enableGestures={!focusedPanel || focusedPanel === chit}
+      />
+    </Box>
+  );
+}

package/src/library/components/Panel/ViewerZoomControls.tsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Stack } from "@mui/material";
+import { ZoomIn, ZoomInMap } from "@mui/icons-material";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { ZINDEX_PINCH_OUT } from "../../utilities/zIndex";
+
+interface ViewerZoomControlsProps {
+  onZoomOut: () => void;
+  onZoomIn: () => void;
+  onZoomChange: (delta: number, totalDelta: number) => void;
+}
+
+export function ViewerZoomControls({ onZoomOut, onZoomIn, onZoomChange }: ViewerZoomControlsProps) {
+  const theme = useGameTheme();
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const startYRef = useRef<number>(0);
+  const totalDeltaRef = useRef<number>(0);
+  const hasDraggedRef = useRef<boolean>(false);
+
+  const handleSliderStart = (clientY: number) => {
+    setIsDragging(true);
+    startYRef.current = clientY;
+    hasDraggedRef.current = false;
+  };
+
+  const handleSliderMove = (clientY: number) => {
+    if (!isDragging) return;
+
+    const deltaY = startYRef.current - clientY; // positive = up = zoom in
+
+    // If there's any movement, mark that we've dragged
+    if (Math.abs(deltaY) > 2) {
+      hasDraggedRef.current = true;
+    }
+
+    totalDeltaRef.current += deltaY;
+
+    const sensitivity = 0.05; // Adjust this to control zoom sensitivity
+    onZoomChange(deltaY * sensitivity, totalDeltaRef.current * sensitivity);
+
+    startYRef.current = clientY;
+  };
+
+  const handleSliderEnd = () => {
+    setIsDragging(false);
+  };
+
+  // Add global mouse/touch move and up listeners when dragging
+  useEffect(() => {
+    if (!isDragging) return;
+
+    totalDeltaRef.current = 0;
+
+    const handleGlobalMouseMove = (e: MouseEvent) => {
+      handleSliderMove(e.clientY);
+    };
+
+    const handleGlobalTouchMove = (e: TouchEvent) => {
+      if (e.touches[0]) {
+        handleSliderMove(e.touches[0].clientY);
+      }
+    };
+
+    const handleGlobalEnd = () => {
+      handleSliderEnd();
+    };
+
+    window.addEventListener("mousemove", handleGlobalMouseMove);
+    window.addEventListener("mouseup", handleGlobalEnd);
+    window.addEventListener("touchmove", handleGlobalTouchMove);
+    window.addEventListener("touchend", handleGlobalEnd);
+
+    return () => {
+      window.removeEventListener("mousemove", handleGlobalMouseMove);
+      window.removeEventListener("mouseup", handleGlobalEnd);
+      window.removeEventListener("touchmove", handleGlobalTouchMove);
+      window.removeEventListener("touchend", handleGlobalEnd);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDragging]);
+
+  return (
+    <Stack
+      direction="column"
+      sx={{
+        position: "absolute",
+        bottom: `${theme.spacing}px`,
+        left: `${theme.spacing}px`,
+        zIndex: ZINDEX_PINCH_OUT,
+        opacity: 0.5,
+      }}
+    >
+      {/* Zoom In Button */}
+      <Box
+        sx={{
+          cursor: "pointer",
+          backgroundColor: theme.barColor,
+          color: theme.barTextColor,
+          p: `${theme.spacing / 2}px`,
+          borderTopRightRadius: `${theme.spacing}px`,
+          borderTopLeftRadius: `${theme.spacing}px`,
+          height: `${theme.spacing * 4}px`,
+          width: `${theme.spacing * 4}px`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
+        }}
+        onClick={() => {
+          if (!hasDraggedRef.current) {
+            onZoomIn();
+          }
+        }}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          handleSliderStart(e.clientY);
+        }}
+        onTouchStart={(e) => {
+          e.preventDefault();
+          if (e.touches[0]) {
+            handleSliderStart(e.touches[0].clientY);
+          }
+        }}
+      >
+        <ZoomIn sx={{ width: `${theme.spacing * 1.5}px` }} />
+      </Box>
+
+      {/* Zoom Slider */}
+      <Box
+        ref={sliderRef}
+        sx={{
+          cursor: "ns-resize",
+          backgroundColor: theme.barColor,
+          color: theme.barTextColor,
+          width: `${theme.spacing * 4}px`,
+          height: `${theme.spacing * 8}px`, // 4x taller than wide
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          userSelect: "none",
+        }}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          handleSliderStart(e.clientY);
+        }}
+        onTouchStart={(e) => {
+          e.preventDefault();
+          if (e.touches[0]) {
+            handleSliderStart(e.touches[0].clientY);
+          }
+        }}
+      >
+        {/* Visual indicator lines */}
+        <Box
+          sx={{
+            width: "60%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-around",
+            py: `${theme.spacing}px`,
+          }}
+        >
+          {[...Array(5)].map((_, i) => (
+            <Box
+              key={i}
+              sx={{
+                width: "100%",
+                height: "2px",
+                backgroundColor: theme.barTextColor,
+                opacity: 0.2,
+              }}
+            />
+          ))}
+        </Box>
+      </Box>
+
+      {/* Zoom Out Button */}
+      <Box
+        sx={{
+          cursor: "pointer",
+          backgroundColor: theme.barColor,
+          color: theme.barTextColor,
+          p: `${theme.spacing / 2}px`,
+          height: `${theme.spacing * 4}px`,
+          width: `${theme.spacing * 4}px`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
+          borderBottomRightRadius: `${theme.spacing}px`,
+          borderBottomLeftRadius: `${theme.spacing}px`,
+        }}
+        onClick={() => {
+          if (!hasDraggedRef.current) {
+            onZoomOut();
+          }
+        }}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          handleSliderStart(e.clientY);
+        }}
+        onTouchStart={(e) => {
+          e.preventDefault();
+          if (e.touches[0]) {
+            handleSliderStart(e.touches[0].clientY);
+          }
+        }}
+      >
+        <ZoomInMap sx={{ width: `${theme.spacing * 1.5}px` }} />
+      </Box>
+    </Stack>
+  );
+}

package/src/library/components/Panel/util.ts

@@ -0,0 +1,7 @@
+import { GameTheme } from "../../game/GameTheme";
+
+const DURATION = 0.125;
+
+export function panelTransition(theme: GameTheme, animationSpeedMultiplier: number): string {
+  return `width ease-in-out ${DURATION * animationSpeedMultiplier}s, height ease-in-out ${DURATION * animationSpeedMultiplier}s, left ease-in-out ${DURATION * animationSpeedMultiplier}s, top ease-in-out ${DURATION * animationSpeedMultiplier}s, opacity ease-in-out ${(DURATION / 2) * animationSpeedMultiplier}s`;
+}

package/src/library/components/PanelSpark.tsx

@@ -0,0 +1,112 @@
+import Color from "color";
+import React, { useEffect, useRef, useState } from "react";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { Box, Typography } from "@mui/material";
+import { useChit } from "../hooks/useChits";
+import { SparkChit } from "../game/SparkChit";
+import { useTimeState } from "../hooks/useTimeController";
+import { ImageSpec } from "../utilities/CanvasStack/CanvasOperations";
+import { UpdatingCanvasImage } from "./UpdatingCanvasImage";
+import { PlayerChit } from "../game/PlayerChit";
+import { PlayerCanvas } from "../utilities/CanvasStack/PlayerCanvas";
+import { IconCanvas } from "../utilities/CanvasStack/IconCanvas";
+
+export default function PanelSpark({ chit, paused, zIndex }: { zIndex: number; chit: SparkChit; paused: boolean }) {
+  const ref = useRef<HTMLElement>(null);
+  const timeState = useTimeState();
+  const sparkChit = useChit<SparkChit>(chit.id ?? "no id");
+
+  const [value, setValue] = useState(sparkChit?.value ?? Number.MIN_SAFE_INTEGER);
+  const targetValue = sparkChit?.value ?? Number.MIN_SAFE_INTEGER;
+
+  const [flashed, setFlashed] = useState(false);
+  const theme = useGameTheme();
+
+  const BORDER_WIDTH = theme.sparkBorderWidth;
+  const DURATION = theme.sparkDuration;
+
+  if (ref) {
+    chit.element = ref;
+  }
+  const HEIGHT = theme.sparkSize;
+
+  useEffect(() => {
+    if (targetValue !== value) {
+      if (paused && value !== Number.MIN_SAFE_INTEGER) {
+        chit.parent?.renderInstance?.rootRenderInstance.markHasPendingChange();
+        return;
+      }
+
+      setValue(targetValue);
+      if (targetValue !== Number.MIN_SAFE_INTEGER && value !== Number.MIN_SAFE_INTEGER) {
+        const key = `spark${chit.id ?? "no id"}`;
+        timeState.setAnimationState(key, true);
+        setFlashed(true);
+        setTimeout(() => {
+          setFlashed(false);
+          timeState.setAnimationState(key, false);
+        }, DURATION);
+      }
+    }
+  }, [chit, timeState, paused, value, targetValue, DURATION]);
+
+  if (!chit.icon) {
+    return;
+  }
+  const image = chit.icon;
+
+  const color = chit.color.length > 0 ? chit.color : "#ffffff";
+
+  if (value === Number.MIN_SAFE_INTEGER) {
+    return null;
+  }
+
+  let backgroundColor = color;
+  let foregroundColor = theme.sparkForegroundColor;
+  const borderColor = color;
+
+  if (Color(color).isLight()) {
+    backgroundColor = Color(color).darken(0.1).hex();
+  } else {
+    backgroundColor = Color(color).lighten(0.3).hex();
+  }
+
+  if (Color(backgroundColor).lightness() < 30) {
+    foregroundColor = Color(foregroundColor).lightness(80).hex();
+  } else {
+    foregroundColor = Color(foregroundColor).lightness(10).hex();
+  }
+
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        position: "relative",
+        background: flashed ? theme.sparkFlashColor : backgroundColor,
+        transition: flashed ? "background linear 0.02s" : `background linear ${DURATION / 1000}s`,
+        color: foregroundColor,
+        p: `${theme.spacing * 0.75}px`,
+        pt: 0,
+        pb: 0,
+        pl: `${theme.spacing * 0.75 + HEIGHT + BORDER_WIDTH * 2}px`,
+        top: -BORDER_WIDTH,
+        marginLeft: `${-BORDER_WIDTH * 2}px`,
+        borderWidth: BORDER_WIDTH,
+        borderStyle: "solid",
+        borderColor: borderColor,
+        borderBottomRightRadius: "10px",
+        borderLeftWidth: 0,
+        overflow: "hidden",
+        zIndex,
+      }}
+    >
+      <UpdatingCanvasImage
+        image={image}
+        style={{ position: "absolute", left: BORDER_WIDTH * 2, top: 0, width: HEIGHT, height: HEIGHT }}
+      />
+      <Typography sx={{ lineHeight: `${HEIGHT}px`, fontSize: theme.sparkFontSize, fontWeight: 700 }}>
+        {value}
+      </Typography>
+    </Box>
+  );
+}