@pretty-chitty/core 1.1.2 → 1.2.0

package/src/library/components/GameDesigner.tsx

@@ -5,13 +5,23 @@ import CanvasLibraryViewer from "./CanvasLibraryViewer";
 import { Game } from "../game/Game";
 import ChitLibraryViewer from "./ChitLibraryViewer";
 import Playground from "./Playground";
-import GalleryPlayground from "./GalleryPlayground";
+import { DemoWrapper } from "./DemoWrapper";
 
 export function GameDesigner({ game }: { game: Game<any, any> }) {
   const [tabIndex, setTabIndex] = useLocalStorageState("selectedMainTab", {
     defaultValue: 2,
   });
 
+  const isDemo = window.location.pathname.endsWith("/demo");
+
+  if (isDemo) {
+    return (
+      <Stack sx={{ height: "100vh", maxHeight: "-webkit-fill-available", width: "100vw" }}>
+        <DemoWrapper game={game} />
+      </Stack>
+    );
+  }
+
   return (
     <Stack sx={{ height: "100vh", maxHeight: "-webkit-fill-available", width: "100vw" }}>
       <CssBaseline />
@@ -19,7 +29,13 @@ export function GameDesigner({ game }: { game: Game<any, any> }) {
       <AppBar position="static">
         <Tabs
           value={tabIndex}
-          onChange={(e, newValue) => setTabIndex(newValue)}
+          onChange={(e, newValue) => {
+            if (newValue === 3) {
+              document.location.pathname = "/demo";
+            } else {
+              setTabIndex(newValue);
+            }
+          }}
           indicatorColor="secondary"
           textColor="inherit"
           variant="fullWidth"
@@ -27,13 +43,14 @@ export function GameDesigner({ game }: { game: Game<any, any> }) {
           <Tab label="Canvas" />
           <Tab label="Chits" />
           <Tab label="Playground" />
-          <Tab label="Gallery" />
+          <Tab label="Demo" />
+          {/* <Tab label="Gallery" /> */}
         </Tabs>
       </AppBar>
       {tabIndex === 0 && <CanvasLibraryViewer library={game.canvasLibrary} />}
       {tabIndex === 1 && <ChitLibraryViewer library={game.chitLibrary} />}
       {tabIndex === 2 && <Playground game={game} />}
-      {tabIndex === 3 && <GalleryPlayground game={game} />}
+      {/* {tabIndex === 3 && <GalleryPlayground game={game} />} */}
     </Stack>
   );
 }

package/src/library/components/InlineGalleryDisplay.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Box, IconButton } from "@mui/material";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import { useModalState } from "../hooks/useModalState";
+import { GalleryItem, GalleryViewer } from "./GalleryViewer";
+import useSize from "@react-hook/size";
+import { useAnimationSpeedMultiplier } from "../hooks/useTimeController";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { ScreenshotMonitor } from "@mui/icons-material";
+import { useButtonGalleriesOptions } from "../hooks/useButtonGalleriesOptions";
+
+const DELAY = 300;
+const DEFAULT_INLINE_GALLERY_SIZE = 125;
+
+export function InlineGalleryDisplay() {
+  const theme = useGameTheme();
+  const animationSpeedMultiplier = useAnimationSpeedMultiplier();
+  const ref = useRef(null);
+  const [width, height] = useSize(ref);
+  const modalState = useModalState();
+  const [items, setItems] = useState<GalleryItem[] | undefined>(undefined);
+  const [_source, setSource] = useEventChannelState(modalState.gallerySource);
+  const [inlineSource, setInlineSource] = useEventChannelState(modalState.inlineGallerySource);
+  const inlineGallerySize = inlineSource?.inlineGallerySize ?? DEFAULT_INLINE_GALLERY_SIZE;
+  const [displaySize, setDisplaySize] = useState(0);
+  const [_galleryDisplayMode, setGalleryDisplayMode] = useButtonGalleriesOptions();
+
+  useEffect(() => {
+    if (inlineSource) {
+      setItems(inlineSource.items);
+      const unSub = inlineSource.registerUpdateHandler(() => {
+        setItems(inlineSource.items);
+      });
+      return () => {
+        inlineSource.close();
+        unSub();
+      };
+    } else {
+      setItems(undefined);
+    }
+  }, [inlineSource, setItems, inlineGallerySize]);
+
+  useEffect(() => {
+    if (items && items.length > 0) {
+      setDisplaySize(inlineGallerySize);
+    } else {
+      const to = setTimeout(() => {
+        setDisplaySize(0);
+      }, 250);
+      return () => clearTimeout(to);
+    }
+  }, [inlineGallerySize, items, setDisplaySize]);
+
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        background: theme.inlineGalleryBackgroundColor,
+        height: `${displaySize}px`,
+        overflow: "hidden",
+      }}
+      ref={ref}
+    >
+      {
+        <>
+          <IconButton
+            sx={{
+              backgroundColor: theme.inlineGalleryButtonBackgroundColor,
+              position: "absolute",
+              bottom: 4,
+              right: 4,
+              zIndex: 2,
+            }}
+            size="small"
+            onClick={() => {
+              setSource(inlineSource);
+              setInlineSource(undefined);
+              setGalleryDisplayMode("modal");
+            }}
+          >
+            <ScreenshotMonitor sx={{ color: theme.inlineGalleryButtonForegroundColor }} />
+          </IconButton>
+
+          <GalleryViewer
+            zFactor={0}
+            onClose={() => {}}
+            fov={5}
+            items={items ?? []}
+            tweenDuration={DELAY * animationSpeedMultiplier * 0.8}
+            galleryItemWidth={theme.galleryItemWidth}
+            galleryItemHeight={theme.galleryItemHeight}
+            itemSpacing={theme.galleryItemSpacing}
+            showSummary={"partial"}
+            w={width}
+            h={height}
+          />
+        </>
+      }
+    </Box>
+  );
+}

package/src/library/components/LiveButton.tsx

@@ -19,7 +19,8 @@ export default function LiveButton({ hideIfLive = true }: { hideIfLive?: boolean
     <BottomBarButton
       disabled={targetClock >= maxClock.clock && live}
       icon={SkipNext}
-      label={"Live"}
+      label={live && targetClock < maxClock.clock ? "Skip" : "Live"}
+      invisible={live && targetClock >= maxClock.clock}
       onClick={() => timeState.goLive(maxClock.clock)}
     />
   );

package/src/library/components/MatchViewer.tsx

@@ -1,29 +1,33 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useGame } from "../hooks/useGame";
 import { Box, CssBaseline, Stack, ThemeProvider, createTheme } from "@mui/material";
 import { TimeControllerProvider, useClientStatus, useTimeController } from "../hooks/useTimeController";
 import BottomBar from "./BottomBar";
 import { GameThemeProvider, useGameTheme } from "../hooks/useGameTheme";
-
-import "@fontsource/raleway/400.css";
 import TopBar from "./TopBar";
 import { useEventChannelState } from "../hooks/useEventChannelState";
 import { MatchEndDisplay } from "./MatchEndDisplay";
 import { PanelScaleProvider } from "../hooks/usePanelScale";
 import { ModalProvider } from "../hooks/useModalState";
-import { GalleryDisplay } from "./GalleryDisplay";
+import { FullScreenGalleryDisplay } from "./FullScreenGalleryDisplay";
 import { ActionLogDisplay } from "./ActionLogDisplay";
 import { ActionLogHistoryDisplay } from "./ActionLogHistoryDisplay";
 import { PanelContents } from "./Panel/PanelContents";
 import useSize from "@react-hook/size";
 import { SettingsDisplay } from "./SettingsDisplay";
 import { ActionLogSidebar } from "./ActionLogSidebar";
+import { InlineGalleryDisplay } from "./InlineGalleryDisplay";
+import { useLoadingState } from "../hooks/useLoadingStates";
+import { GameTheme } from "../game/GameTheme";
+import { ModalState } from "../game/ModalState";
 
-const theme = createTheme({
-  typography: {
-    fontFamily: ["Raleway", "sans-serif"].join(","),
-  },
-});
+function createMuiTheme(gameTheme: GameTheme) {
+  return createTheme({
+    typography: {
+      fontFamily: gameTheme.fontFamily,
+    },
+  });
+}
 
 function InnerMatchViewer({ onBack }: { onBack?: () => void }) {
   const timeController = useTimeController();
@@ -36,6 +40,11 @@ function InnerMatchViewer({ onBack }: { onBack?: () => void }) {
   const [width, height] = useSize(ref);
   const [outerWidth] = useSize(outerRef);
   const [showLog] = useEventChannelState(timeController.clientTimeState.showLog);
+  const loadingStates = useLoadingState();
+
+  if (errorMessage) {
+    loadingStates.markError();
+  }
 
   useEffect(
     () =>
@@ -75,13 +84,20 @@ function InnerMatchViewer({ onBack }: { onBack?: () => void }) {
         >
           <Box flex={1} style={{ display: "flex", position: "relative" }}>
             <MatchEndDisplay />
-            <GalleryDisplay />
+            <FullScreenGalleryDisplay />
             <SettingsDisplay />
             <ActionLogHistoryDisplay />
 
-            {!errorMessage && rootChit && <PanelContents rootChit={rootChit} scaleWidth={width} scaleHeight={height} />}
+            <Stack direction={"column"} flex={1}>
+              {!errorMessage && rootChit && (
+                <PanelContents rootChit={rootChit} scaleWidth={width} scaleHeight={height} />
+              )}
+
+              <InlineGalleryDisplay />
+            </Stack>
             {errorMessage}
           </Box>
+
           <ActionLogDisplay toggleSidebarLog={largeEnoughToShowLogSidebar} />
         </Stack>
         <BottomBar />
@@ -94,13 +110,15 @@ function InnerMatchViewer({ onBack }: { onBack?: () => void }) {
 
 export function MatchViewer({ onBack }: { onBack?: () => void }) {
   const game = useGame();
+  const [modalState] = useState<ModalState>(new ModalState());
+  const muiTheme = useMemo(() => createMuiTheme(game.theme), [game.theme]);
   return (
     <TimeControllerProvider>
-      <CssBaseline />
       <PanelScaleProvider>
-        <ModalProvider>
+        <ModalProvider modalState={modalState}>
           <GameThemeProvider theme={game.theme}>
-            <ThemeProvider theme={theme}>
+            <ThemeProvider theme={muiTheme}>
+              <CssBaseline />
               <InnerMatchViewer onBack={onBack} />
             </ThemeProvider>
           </GameThemeProvider>

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

@@ -1,9 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Stack } from "@mui/material";
-import { useDebounce } from "@react-hook/debounce";
 import { Chit } from "../../game/Chit";
 import { useGameTheme } from "../../hooks/useGameTheme";
-import { useAnimationSpeedMultiplier, useTimeController, useTimeState } from "../../hooks/useTimeController";
+import {
+  useAnimationSpeedMultiplier,
+  useClientPrompts,
+  useTimeController,
+  useTimeState,
+} from "../../hooks/useTimeController";
 import { usePanelStates } from "../../hooks/usePanelStates";
 import { RootChitRenderInstance } from "../../rendering/RootChitRenderInstance";
 import { useEventChannelState } from "../../hooks/useEventChannelState";
@@ -15,7 +19,7 @@ import { ViewerZoomControls } from "./ViewerZoomControls";
 
 const ANIMATION_DURATION = 0.125;
 
-const PANEL_ADJUST_IGNORE_DURATION = 5000;
+const PANEL_ADJUST_IGNORE_DURATION = 10000;
 
 export function MultiPanel({
   chits,
@@ -52,6 +56,8 @@ export function MultiPanel({
   const timeMultiplier = useAnimationSpeedMultiplier();
 
   const [ignoreChangesBefore, setIgnoreChangesBefore] = useState(0);
+  const clientPrompt = useClientPrompts();
+  const [prompt] = useEventChannelState(clientPrompt.currentPrompt);
 
   const [isSliding, setIsSliding] = useState(false);
   const [isLoading] = useEventChannelState(timeState.isLoading);
@@ -71,6 +77,8 @@ export function MultiPanel({
   );
   const panelStates = usePanelStates(rootRenders);
 
+  const effectiveTabHeight = rootRenders.length > 1 ? TAB_HEIGHT : 0;
+
   const manuallyChangeSelectedIndex = useCallback(
     (index: number) => {
       if (index !== selectedIndex) {
@@ -81,6 +89,7 @@ export function MultiPanel({
         if (!prompt) {
           setIgnoreChangesBefore(Date.now() + PANEL_ADJUST_IGNORE_DURATION);
         }
+        timeState.killAnimations();
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -89,10 +98,13 @@ export function MultiPanel({
 
   useEffect(() => {
     if (ignoreChangesBefore) {
-      const to = setTimeout(() => setIgnoreChangesBefore(0), ignoreChangesBefore - Date.now());
+      const to = setTimeout(() => {
+        setIgnoreChangesBefore(0);
+        rootRenders.forEach((chit) => chit && chit.resetMarks());
+      }, ignoreChangesBefore - Date.now());
       return () => clearTimeout(to);
     }
-  }, [ignoreChangesBefore]);
+  }, [ignoreChangesBefore, rootRenders]);
 
   useEffect(() => {
     if (isFocusedPanel) {
@@ -197,9 +209,8 @@ export function MultiPanel({
         x: x + theme.spacing / 4,
         y: y + theme.spacing / 4,
         w: w - theme.spacing / 2,
-        h: h - TAB_HEIGHT - theme.spacing / 2,
+        h: h - effectiveTabHeight - theme.spacing / 2,
         paused: isPaused,
-        refContainer,
         panCallback,
         visible: true,
         front: index === effectiveSelectedIndex,
@@ -224,6 +235,7 @@ export function MultiPanel({
     refContainer,
     panCallback,
     timeMultiplier,
+    effectiveTabHeight,
   ]);
 
   const focusedRoot = focusedPanel?.renderInstance as RootChitRenderInstance;
@@ -264,7 +276,7 @@ export function MultiPanel({
         )}
       </Box>
 
-      {enabled && (
+      {enabled && chits.length > 1 && (
         <PanelTabStack
           chits={chits}
           selectedIndex={effectiveSelectedIndex}

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

@@ -17,8 +17,9 @@ export interface ViewerGestureHandlers {
   onSingleTap?: (x: number, y: number, isMouse: boolean) => void;
   onDoubleTap?: (x: number, y: number) => void;
   onLongTap?: (x: number, y: number, isMouse: boolean) => void;
-  onPanStart?: () => void;
+  onPanStart?: (x: number, y: number, isMouse: boolean) => void;
   onPan?: (dx: number, dy: number, ev: HammerInput) => void;
+  onPanEnd?: () => void;
   onPinchStart?: () => void;
   onPinch?: (scale: number, deltaScale: number, centerX: number, centerY: number) => void;
   onPinchEnd?: () => void;
@@ -76,12 +77,7 @@ export function PanelContents({
 
   // Panel positioning system
   const positionsRef = useRef<Map<string, ViewerPosition>>(
-    new Map([
-      [
-        "root",
-        { chitId: "root", x: -40, y: 0, w: 30, h: 30, front: true, visible: true, paused: true, refContainer: null },
-      ],
-    ]),
+    new Map([["root", { chitId: "root", x: -40, y: 0, w: 30, h: 30, front: true, visible: true, paused: true }]]),
   );
   const [, forceUpdate] = useState({});
 
@@ -173,11 +169,18 @@ export function PanelContents({
 
     // Pan handlers
     hammer.on("panstart", (ev) => {
-      activeViewer = findViewerAtPoint(ev.center.x, ev.center.y);
+      const startX = ev.center.x - ev.deltaX;
+      const startY = ev.center.y - ev.deltaY;
+      activeViewer = findViewerAtPoint(startX, startY);
       lastDeltaX = 0;
       lastDeltaY = 0;
       panCancelled = false;
-      activeViewer?.handlers.onPanStart?.();
+      const bounds = activeViewer?.getBounds();
+      if (bounds) {
+        const x = startX - bounds.left;
+        const y = startY - bounds.top;
+        activeViewer!.handlers.onPanStart?.(x, y, ev.pointerType === "mouse");
+      }
     });
 
     hammer.on("pan", (ev) => {
@@ -195,6 +198,9 @@ export function PanelContents({
     });
 
     hammer.on("panend", () => {
+      if (activeViewer) {
+        activeViewer.handlers.onPanEnd?.();
+      }
       activeViewer = null;
     });
 
@@ -265,7 +271,7 @@ export function PanelContents({
             }}
           >
             {layout.map((cell) => {
-              if (Array.isArray(cell.chit)) {
+              if (Array.isArray(cell.chit) && cell.chit.length > 1) {
                 return (
                   <MultiPanel
                     enabled={focusedPanel === undefined}
@@ -287,7 +293,7 @@ export function PanelContents({
                     focusedPanel={focusedPanel}
                     setFocusedPanel={setFocusedPanel}
                     key={cell.id}
-                    chit={cell.chit}
+                    chit={Array.isArray(cell.chit) ? cell.chit[0] : cell.chit}
                     w={cell.w}
                     h={cell.h}
                     x={cell.x}
@@ -345,7 +351,6 @@ export function PanelContents({
                   x={position.x}
                   y={position.y}
                   paused={position.paused}
-                  refContainer={position.refContainer}
                   panCallback={position.panCallback}
                   transition={position.transition}
                 />

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

@@ -4,7 +4,6 @@ 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({
@@ -34,6 +33,8 @@ export function SinglePanel({
 
   const effectivePaused = !enabled ? true : paused;
 
+  const transition = panelTransition(theme, animationSpeedMultiplier);
+
   // 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
@@ -49,11 +50,11 @@ export function SinglePanel({
       w: w - theme.spacing / 2,
       h: h - theme.spacing / 2,
       paused: effectivePaused,
-      refContainer: null,
       front: true,
       visible: true,
+      transition,
     });
-  }, [chit, x, y, w, h, effectivePaused, enabled, focusedPanel, registerPosition, theme.spacing]);
+  }, [chit, x, y, w, h, transition, effectivePaused, enabled, focusedPanel, registerPosition, theme.spacing]);
 
   return (
     <Box
@@ -65,7 +66,7 @@ export function SinglePanel({
         top: `${y}px`,
         position: "absolute",
         p: `${theme.spacing / 4}px`,
-        transition: panelTransition(theme, animationSpeedMultiplier),
+        transition,
         zIndex: enabled ? "auto" : -1,
       }}
     >

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

@@ -18,7 +18,6 @@ export function ViewerWrapper({
   paused,
   front,
   panCallback,
-  refContainer,
   focusedPanel,
   setFocusedPanel,
   transition,
@@ -31,7 +30,6 @@ export function ViewerWrapper({
   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;
@@ -92,8 +90,6 @@ export function ViewerWrapper({
     }
   }, [focusedPanel, chit]);
 
-  const rootRenderInstance = chit.renderInstance as RootChitRenderInstance;
-
   return (
     <Box
       sx={{
@@ -116,7 +112,6 @@ export function ViewerWrapper({
       </Stack>
 
       <Viewer
-        refContainer={refContainer}
         paused={override ? false : paused}
         hardPaused={override ? false : !front}
         chit={chit}