@pretty-chitty/core 1.1.1

package/src/library/components/BottomBarButton.tsx

@@ -0,0 +1,181 @@
+import { Box, Stack, SvgIconTypeMap, Typography } from "@mui/material";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { LongPressEventType, useLongPress } from "use-long-press";
+import useHover from "@react-hook/hover";
+import { OverridableComponent } from "@mui/material/OverridableComponent";
+import { useInterval } from "react-interval-hook";
+import { ZINDEX_BOTTOM_BAR_BUTTON_LABEL, ZINDEX_BOTTOM_BAR_BUTTON_LONG_CLICK } from "../utilities/zIndex";
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type BottomBarButtonIcon = OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string };
+
+export default function BottomBarButton({
+  icon,
+  label,
+  highlight = false,
+  disabled = false,
+  removeLabel = false,
+  onClick,
+  onLongClick,
+  whileHolding,
+}: {
+  icon: BottomBarButtonIcon;
+  label?: string;
+  disabled?: boolean;
+  removeLabel?: boolean;
+  highlight?: boolean;
+  onClick?: () => void;
+  onLongClick?: () => void;
+  whileHolding?: (steps: number) => void;
+}) {
+  if (disabled) {
+    onClick = undefined;
+    onLongClick = undefined;
+    whileHolding = undefined;
+  }
+
+  const theme = useGameTheme();
+  const ref = useRef(null);
+  const hovered = useHover(ref);
+
+  let listenForLongPress = true;
+
+  const INTERVAL = 400;
+  const [holdStart, setHoldStart] = useState(0);
+  const holdFn = useCallback(() => {
+    const steps = holdStart ? Math.round((Date.now() - holdStart) / INTERVAL) : 0;
+    if (whileHolding) {
+      whileHolding(Math.round(Math.pow(steps + 1, 1.5)));
+    }
+  }, [whileHolding, holdStart]);
+
+  if (!whileHolding) {
+    listenForLongPress = false;
+  }
+
+  const { start, stop } = useInterval(holdFn, INTERVAL, {
+    autoStart: false,
+    immediate: true,
+    selfCorrecting: false,
+  });
+
+  // eslint-disable-next-line prefer-const
+  let [isPressed, setIsPressed] = useState(false);
+
+  // Stop interval and reset state when button becomes disabled
+  useEffect(() => {
+    if (disabled) {
+      setIsPressed(false);
+      setHoldStart(0);
+      stop();
+    }
+  }, [disabled, stop]);
+
+  const LONG_PRESS_SECONDS = 1.25;
+  const bind = useLongPress(
+    () => {
+      // long press done!
+      onLongClick && onLongClick();
+    },
+    {
+      onStart: () => {
+        setIsPressed(true);
+        if (listenForLongPress) {
+          setHoldStart(Date.now());
+          start();
+        }
+      },
+      onFinish: () => {
+        setIsPressed(false);
+        if (listenForLongPress) {
+          setHoldStart(0);
+          stop();
+        }
+      },
+      onCancel: () => {
+        setIsPressed(false);
+        if (listenForLongPress) {
+          setHoldStart(0);
+          stop();
+        }
+      },
+      onMove: () => {
+        // console.log("Detected mouse or touch movement"),
+      },
+      filterEvents: () => true,
+      threshold: LONG_PRESS_SECONDS * 1000,
+      captureEvent: true,
+      cancelOnMovement: 25,
+      cancelOutsideElement: true,
+      detect: LongPressEventType.Pointer,
+    },
+  );
+
+  label = label?.toUpperCase();
+  let color = theme.barTextColor;
+  let textShadowColor: string | null = null;
+  if (hovered) {
+    color = theme.barActiveTextColor;
+    textShadowColor = theme.barActiveTextColor;
+  }
+  if (disabled) {
+    color = theme.barDisabledTextColor;
+    textShadowColor = null;
+    isPressed = false;
+  }
+  const IconType = icon;
+
+  const iconColor = highlight ? theme.barTextHighlightColor : color;
+
+  return (
+    <Box
+      ref={ref}
+      onClick={() => {
+        if (onClick) {
+          onClick();
+        }
+      }}
+      {...bind()}
+      sx={{
+        position: "relative",
+        top: isPressed ? 1 : 0,
+        left: isPressed ? 1 : 0,
+        userSelect: "none",
+        cursor: !disabled ? "pointer" : undefined,
+        p: 1,
+        height: "100%",
+        textShadow: textShadowColor && `0 0 4px ${textShadowColor}`,
+        color,
+        transition: "color linear 0.25s, left linear 0.05s, top linear 0.05s",
+      }}
+    >
+      {onLongClick && (
+        <Box
+          sx={{
+            background: theme.fullResetColor,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: ZINDEX_BOTTOM_BAR_BUTTON_LONG_CLICK,
+            borderRadius: "200px",
+            position: "absolute",
+            transition: `transform ease-out ${isPressed ? LONG_PRESS_SECONDS : 0.1}s`,
+            transform: isPressed ? "scale(1.1)" : "scale(0)",
+            top: 0,
+          }}
+        />
+      )}
+      <Stack sx={{ position: "relative", zIndex: ZINDEX_BOTTOM_BAR_BUTTON_LABEL, height: "100%" }}>
+        <Box flex={1} />
+        <Box sx={{ color: iconColor, fontSize: "30px", lineHeight: "30px", height: "30px", textAlign: "center" }}>
+          <IconType fontSize="inherit" />
+        </Box>
+        {!removeLabel && (
+          <Typography sx={{ textAlign: "center", mt: 0.5, fontSize: 12 }}>{label ?? "\u00a0"}</Typography>
+        )}
+        <Box flex={1} />
+      </Stack>
+    </Box>
+  );
+}

package/src/library/components/CanvasLibraryViewer.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo, useEffect, useState } from "react";
+
+import { Box, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import {
+  FormatColorFill,
+  PhotoSizeSelectSmall,
+  PhotoSizeSelectActual,
+  PhotoSizeSelectLarge,
+  GridOn,
+  GridOff,
+} from "@material-ui/icons";
+
+import UpdatingCanvasViewer, { Size } from "./UpdatingCanvasViewer";
+import ObjectWithPropsEditor from "./ObjectWithPropsEditor";
+import { ParameterizedCanvas } from "../utilities/ParameterizedCanvas";
+import { IUpdatingCanvas } from "../utilities/IUpdatingCanvas";
+import StageAndEditor from "./StageAndEditor";
+import SelectableItemAndStage from "./SelectableItemAndStage";
+import useLocalStorageState from "use-local-storage-state";
+
+export interface ICanvasLibrary {
+  [key: string]: new () => ParameterizedCanvas;
+}
+
+function Editor({ size, ClassDef }: { size: Size; ClassDef: new () => ParameterizedCanvas }) {
+  const instance = useMemo(() => ClassDef && new ClassDef(), [ClassDef]);
+  const [canvas, setCanvas] = useState<IUpdatingCanvas | null>(null);
+
+  useEffect(() => {
+    if (!instance) {
+      return;
+    }
+
+    setCanvas(instance.get());
+    return instance.onChange(null, () => setCanvas(instance.get()));
+  }, [instance]);
+
+  return (
+    <StageAndEditor editor={<ObjectWithPropsEditor obj={instance} />}>
+      <Box sx={{ p: 3 }}>{canvas && <UpdatingCanvasViewer size={size} updatingCanvas={instance.get()} />}</Box>
+    </StageAndEditor>
+  );
+}
+
+export default function CanvasLibraryViewer({ library }: { library: ICanvasLibrary }) {
+  const items = useMemo(() => Object.keys(library), [library]);
+  const [selectedSize, setSelectedSize] = useLocalStorageState<Size>("canvasLibrarySize", {
+    defaultValue: "actual",
+  });
+
+  return (
+    <SelectableItemAndStage
+      keySpace="canvasLibrary"
+      topOptions={
+        <ToggleButtonGroup
+          exclusive
+          size="small"
+          sx={{ m: 2 }}
+          value={selectedSize}
+          onChange={(e, newValue) => setSelectedSize(newValue)}
+        >
+          <ToggleButton value="actual">
+            <PhotoSizeSelectActual />
+          </ToggleButton>
+          <ToggleButton value="fill">
+            <FormatColorFill />
+          </ToggleButton>
+          <ToggleButton value="small">
+            <PhotoSizeSelectSmall />
+          </ToggleButton>
+          <ToggleButton value="large">
+            <PhotoSizeSelectLarge />
+          </ToggleButton>
+          <ToggleButton value="tile">
+            <GridOn />
+          </ToggleButton>
+          <ToggleButton value="small_tile">
+            <GridOff />
+          </ToggleButton>
+        </ToggleButtonGroup>
+      }
+      items={items}
+      render={(item) => <Editor size={selectedSize} ClassDef={library[item]} />}
+    />
+  );
+}

package/src/library/components/ChitLibraryViewer.tsx

@@ -0,0 +1,168 @@
+import React, { useMemo, useEffect, useState, useRef } from "react";
+
+import ObjectWithPropsEditor from "./ObjectWithPropsEditor";
+import StageAndEditor from "./StageAndEditor";
+import SelectableItemAndStage from "./SelectableItemAndStage";
+import { Chit } from "../game/Chit";
+import Viewer from "./Viewer";
+import { Box, Checkbox, FormControlLabel, MenuItem, Select, Stack, Typography } from "@mui/material";
+import { BaseTable } from "../utilities/BaseTable";
+import { ChitRenderSpec } from "../rendering/ChitRenderSpec";
+import useLocalStorageState from "use-local-storage-state";
+import { useTimeState } from "../hooks/useTimeController";
+import useSize from "@react-hook/size";
+import { PlayerProvider } from "../hooks/usePlayer";
+
+export interface IChitLibrary {
+  [key: string]: new () => Chit;
+}
+
+function ResizingViewer({ wireframes, chit }: { wireframes: boolean; chit: Chit }) {
+  const ref = useRef(null);
+  const [width, height] = useSize(ref);
+  return (
+    <Box sx={{ position: "absolute", top: 0, right: 0, left: 0, bottom: 0, overflow: "hidden" }} ref={ref}>
+      <PlayerProvider playerId="abc">
+        <Viewer w={width} h={height} wireframes={wireframes} chit={chit} />
+      </PlayerProvider>
+    </Box>
+  );
+}
+
+function Editor({
+  wireframes = false,
+  ClassDef,
+  ParentClassDef,
+}: {
+  wireframes: boolean;
+  ClassDef: new () => Chit;
+  ParentClassDef?: new () => Chit;
+}) {
+  const timeState = useTimeState();
+  const [instance, setInstance] = useState<Chit | undefined>();
+  const [parentInstance, setParentInstance] = useState<Chit | undefined>();
+  const [rootInstance, setRootInstance] = useState<Chit | undefined>();
+
+  useEffect(() => {
+    if (!ClassDef) {
+      setInstance(undefined);
+      return;
+    }
+
+    const newInstance = new ClassDef();
+    setInstance(newInstance);
+    return () => newInstance.removeFromParent();
+  }, [ClassDef]);
+
+  useEffect(() => {
+    if (ParentClassDef) {
+      const newInstance = new ParentClassDef();
+      setParentInstance(newInstance);
+      return () => newInstance.removeFromParent();
+    } else {
+      setParentInstance(undefined);
+    }
+  }, [ParentClassDef]);
+
+  const BT = BaseTable;
+  useEffect(() => {
+    let needsToHaveStageCreated = true;
+
+    if (!instance) {
+      return;
+    }
+
+    try {
+      timeState.animationSpeedMultiplier.value = 1;
+      timeState.isLoading.value = false;
+      setTimeout(() => rootInstance?.renderInstance?.tweenGroup?.update(Number.MAX_SAFE_INTEGER), 10);
+
+      const instanceRenderResult = new ChitRenderSpec(instance);
+      instance.render(instanceRenderResult);
+      parentInstance?.add(instance);
+      if (instanceRenderResult.camera || instanceRenderResult.lightSpec) {
+        needsToHaveStageCreated = false;
+      }
+
+      if (parentInstance) {
+        needsToHaveStageCreated = true;
+        const parentRenderResult = new ChitRenderSpec(parentInstance);
+        parentInstance.render(parentRenderResult);
+        if (parentRenderResult.camera || parentRenderResult.lightSpec) {
+          needsToHaveStageCreated = false;
+        }
+      }
+
+      if (needsToHaveStageCreated) {
+        if (!(rootInstance instanceof BT)) {
+          const stage = new BT();
+          stage.add(parentInstance ?? instance);
+          stage.target = instance;
+          stage.parentTarget = parentInstance;
+          setRootInstance(stage);
+        } else {
+          rootInstance.add(parentInstance ?? instance);
+          rootInstance.target = instance;
+          rootInstance.parentTarget = parentInstance;
+          rootInstance.notifyChange("target");
+          rootInstance.notifyChange("parentTarget");
+        }
+      } else {
+        setRootInstance(parentInstance ?? instance);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, [timeState, instance, parentInstance, rootInstance, BT]);
+
+  return (
+    <StageAndEditor editor={rootInstance && <ObjectWithPropsEditor obj={rootInstance} />}>
+      {rootInstance && <ResizingViewer wireframes={wireframes} chit={rootInstance} />}
+    </StageAndEditor>
+  );
+}
+
+export default function ChitLibraryViewer({ library }: { library: IChitLibrary }) {
+  const items = useMemo(() => Object.keys(library), [library]);
+  const [parentType, setParentType] = useLocalStorageState<string>("chitLibraryParentType", {
+    defaultValue: "",
+  });
+  const [wireframes, setWireframes] = useLocalStorageState<boolean>("showBoundingBoxes", { defaultValue: false });
+
+  return (
+    <SelectableItemAndStage
+      keySpace="chitLibrary"
+      topOptions={
+        <Stack direction="row">
+          <Typography sx={{ ml: 4, lineHeight: 4 }}>Parent:</Typography>
+          <Select
+            variant="standard"
+            sx={{ m: 2, width: 200 }}
+            value={parentType}
+            label="Select Choice"
+            onChange={(e) => setParentType(e.target.value ?? undefined)}
+          >
+            <MenuItem value={""}>(none)</MenuItem>
+            {items.map((item) => (
+              <MenuItem value={item} key={item}>
+                {item}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormControlLabel
+            control={<Checkbox checked={wireframes} onChange={(e) => setWireframes(e.target.checked)} />}
+            label={"Bounding Boxes"}
+          />
+        </Stack>
+      }
+      items={items}
+      render={(item) => (
+        <Editor
+          wireframes={wireframes}
+          ParentClassDef={parentType ? library[parentType] : undefined}
+          ClassDef={library[item]}
+        />
+      )}
+    />
+  );
+}

package/src/library/components/ClientTrustMatchViewer.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import { Game } from "../game/Game";
+import { IMatchStorage } from "../game/MatchStorage";
+import { IPlayerInfo, PlayerInfo } from "../game/PlayerInfo";
+import { ConnectionProvider } from "../hooks/useConnection";
+import { GameProvider } from "../hooks/useGame";
+import { PlayerProvider } from "../hooks/usePlayer";
+import { MatchViewer } from "./MatchViewer";
+import { Match } from "../game/Match";
+import { Connection } from "../game/Connection";
+import { LocalConnectionTransport } from "../game/ConnectionTransport";
+
+export function ClientTrustMatchViewer({
+  playerId,
+  players,
+  game,
+  matchStorage,
+  onBack,
+}: {
+  playerId: string;
+  players: IPlayerInfo[];
+  game: Game<any, any>;
+  matchStorage: IMatchStorage;
+  onBack?: () => void;
+}) {
+  const [match, setMatch] = useState<Match<any, any> | undefined>();
+  const [localConnection, setLocalConnection] = useState<Connection | undefined>();
+
+  useEffect(() => {
+    if (game && players && matchStorage) {
+      const match = new Match(
+        game,
+        players.map((p) => new PlayerInfo(p)),
+        matchStorage,
+      );
+      let cancelled = false;
+      match.load().then(() => {
+        if (cancelled) {
+          return;
+        }
+        match.start();
+        setMatch(match);
+      });
+      return () => {
+        match.dispose();
+        cancelled = true;
+      };
+    } else {
+      setMatch(undefined);
+    }
+  }, [game, matchStorage, players]);
+
+  useEffect(() => {
+    if (!match) {
+      setLocalConnection(undefined);
+      return;
+    }
+
+    const newRemoteConnection = new LocalConnectionTransport();
+    const newConnection = new Connection(new LocalConnectionTransport());
+    (newConnection.transport as LocalConnectionTransport).connect(newRemoteConnection);
+    match.connect(newRemoteConnection, playerId);
+
+    setLocalConnection(newConnection);
+    return () => {
+      newConnection.dispose();
+    };
+  }, [match, playerId]);
+
+  if (!localConnection) {
+    return null; // loading...
+  }
+
+  return (
+    <GameProvider game={game}>
+      <ConnectionProvider connection={localConnection}>
+        <PlayerProvider playerId={playerId}>
+          <MatchViewer onBack={onBack} />
+        </PlayerProvider>
+      </ConnectionProvider>
+    </GameProvider>
+  );
+}

package/src/library/components/ContextGalleryDisplay.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { Box } from "@mui/material";
+import { GalleryItem, GalleryViewer } from "./GalleryViewer";
+import { useRef } from "react";
+import { ZINDEX_CONTEXT_GALLERY_DISPLAY } from "../utilities/zIndex";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { useAnimationSpeedMultiplier, useClientPrompts } from "../hooks/useTimeController";
+import { PickPrompt } from "../game/Prompt";
+import { Chit } from "../game/Chit";
+import { chitsToGalleryItems } from "../utilities/GalleryItemConversion";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+
+export function ContextGalleryDisplay({ size }: { size: number }) {
+  const theme = useGameTheme();
+  const ref = useRef(null);
+  const speed = useAnimationSpeedMultiplier();
+  const clientPrompts = useClientPrompts();
+  const [currentPrompt] = useEventChannelState(clientPrompts.currentPrompt);
+  const [items, setItems] = useState<GalleryItem[]>([]);
+  const hasItems = items && items?.length > 0;
+
+  let targetChit: Chit | undefined = undefined;
+  if (currentPrompt && currentPrompt instanceof PickPrompt) {
+    const pickWithContext = currentPrompt.picks.find((p) => p.contextChit);
+    if (pickWithContext) {
+      targetChit = pickWithContext.contextChit;
+    }
+  }
+
+  useEffect(() => {
+    if (targetChit) {
+      setItems(chitsToGalleryItems([targetChit]));
+    } else {
+      setItems([]);
+    }
+  }, [targetChit, setItems]);
+
+  return (
+    <Box sx={{ position: "relative" }}>
+      <Box
+        ref={ref}
+        sx={{
+          width: size,
+          height: size,
+          top: theme.spacing,
+          position: hasItems ? "relative" : "absolute",
+          ml: `${theme.spacing}px`,
+          right: hasItems ? 0 : `${-size - theme.spacing}px`,
+          zIndex: ZINDEX_CONTEXT_GALLERY_DISPLAY,
+          borderRadius: "10px",
+          background: theme.actionBarContextColor,
+          boxShadow: `inset 0px 2px 3px 3px ${theme.actionBarContextShadow}`,
+          transition: `right ease-in-out ${theme.actionBarContextAnimationDuration * speed}s`,
+        }}
+      >
+        <GalleryViewer
+          fov={2}
+          angle={0}
+          showSummary={false}
+          paused={items.length > 0 ? false : true}
+          items={items ?? []}
+          tweenDuration={0}
+          galleryItemWidth={size - theme.spacing * 2}
+          galleryItemHeight={size - theme.spacing * 2}
+          itemSpacing={0}
+          w={size}
+          h={size}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/library/components/GalleryDisplay.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Box } 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 { GameModalBackdrop } from "./GameModalBackdrop";
+
+const DELAY = 300;
+
+export function GalleryDisplay() {
+  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 hasItems = items && items?.length > 0;
+
+  useEffect(() => {
+    if (source) {
+      setItems(source.items);
+      const unSub = source.registerUpdateHandler(() => {
+        setItems(source.items);
+      });
+      return () => {
+        source.close();
+        unSub();
+      };
+    } else {
+      setItems(undefined);
+    }
+  }, [source, setItems]);
+
+  return (
+    // This has to be outside of the modal backdrop so we can get the size correctly
+    <Box ref={ref} sx={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}>
+      <GameModalBackdrop visible={!!hasItems}>
+        <GalleryViewer
+          onClose={() => {
+            setSource(undefined);
+          }}
+          items={items ?? []}
+          tweenDuration={DELAY * animationSpeedMultiplier * 0.8}
+          galleryItemWidth={theme.galleryItemWidth}
+          galleryItemHeight={theme.galleryItemHeight}
+          itemSpacing={theme.galleryItemSpacing}
+          w={width}
+          h={height}
+        />
+      </GameModalBackdrop>
+    </Box>
+  );
+}

package/src/library/components/GalleryPlayground.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import { Game } from "../game/Game";
+import { Box } from "@mui/material";
+import { GalleryViewer } from "./GalleryViewer";
+import type { GalleryItem } from "./GalleryViewer";
+import { BoxGeometry, Mesh, MeshPhongMaterial } from "three";
+
+export class MyItem implements GalleryItem {
+  constructor(
+    public color: number,
+    public id: string,
+  ) {}
+
+  createMesh() {
+    const result = new Mesh(new BoxGeometry(50, 50, 50), new MeshPhongMaterial({ color: this.color }));
+    return result;
+  }
+
+  registerUpdateHandler(cb: () => void) {
+    console.log(cb);
+    return () => {};
+  }
+}
+
+export default function GalleryPlayground({ game }: { game: Game<any, any> }) {
+  const [items, setItems] = useState(
+    [...new Array(5)].map((d, i) => new MyItem(Math.random() * 0xffffff, i.toString())),
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      const index = Math.floor(Math.random() * items.length);
+      if (Math.random() > 0.5) {
+        const item = new MyItem(Math.random() * 0xffffff, Math.random().toString());
+
+        setItems(items.slice(0, index).concat([item]).concat(items.slice(index)));
+      } else {
+        setItems(items.slice(0, index).concat(items.slice(index + 1)));
+      }
+    }, 1000);
+  }, [items]);
+
+  return (
+    <Box>
+      <Box sx={{ position: "relative" }}>
+        <GalleryViewer items={items} galleryItemWidth={150} itemSpacing={20} w={800} h={600} />
+      </Box>
+    </Box>
+  );
+}