@pretty-chitty/core 1.1.1

package/src/library/components/GameDesigner.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import useLocalStorageState from "use-local-storage-state";
+import { AppBar, Tabs, Tab, CssBaseline, Stack } from "@mui/material";
+import CanvasLibraryViewer from "./CanvasLibraryViewer";
+import { Game } from "../game/Game";
+import ChitLibraryViewer from "./ChitLibraryViewer";
+import Playground from "./Playground";
+import GalleryPlayground from "./GalleryPlayground";
+
+export function GameDesigner({ game }: { game: Game<any, any> }) {
+  const [tabIndex, setTabIndex] = useLocalStorageState("selectedMainTab", {
+    defaultValue: 2,
+  });
+
+  return (
+    <Stack sx={{ height: "100vh", maxHeight: "-webkit-fill-available", width: "100vw" }}>
+      <CssBaseline />
+
+      <AppBar position="static">
+        <Tabs
+          value={tabIndex}
+          onChange={(e, newValue) => setTabIndex(newValue)}
+          indicatorColor="secondary"
+          textColor="inherit"
+          variant="fullWidth"
+        >
+          <Tab label="Canvas" />
+          <Tab label="Chits" />
+          <Tab label="Playground" />
+          <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} />}
+    </Stack>
+  );
+}

package/src/library/components/GameDialog.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Color from "color";
+import { Dialog, useTheme } from "@mui/material";
+import { ReactNode } from "react";
+import { useGameTheme } from "../hooks/useGameTheme";
+
+export default function GameDialog({
+  children,
+  open,
+  onClose,
+}: {
+  children: ReactNode[] | ReactNode;
+  open: boolean;
+  onClose: () => void;
+}) {
+  const muiTheme = useTheme();
+  const theme = useGameTheme();
+
+  return (
+    <Dialog
+      onClose={onClose}
+      open={open}
+      PaperProps={{
+        style: {
+          backgroundColor: "transparent",
+          color: theme.dialogForegroundColor,
+          fontSize: 16,
+          fontFamily: muiTheme.typography.fontFamily,
+        },
+        elevation: 0,
+      }}
+      slotProps={{
+        backdrop: {
+          sx: {
+            backgroundColor: Color(theme.dialogBackgroundColor).alpha(0.8).hexa(),
+          },
+        },
+      }}
+    >
+      {children}
+    </Dialog>
+  );
+}

package/src/library/components/GameModalBackdrop.tsx

@@ -0,0 +1,47 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import { Box } from "@mui/material";
+import { ZINDEX_GALLERY_INVISIBLE, ZINDEX_GALLERY_VISIBLE } from "../utilities/zIndex";
+import { useAnimationSpeedMultiplier } from "../hooks/useTimeController";
+import { useGameTheme } from "../hooks/useGameTheme";
+
+const DELAY = 300;
+
+interface GameModalBackdropProps {
+  visible: boolean;
+  children: ReactNode;
+  persist?: boolean;
+  opacity?: number;
+}
+
+export function GameModalBackdrop({ opacity, visible, children, persist = false }: GameModalBackdropProps) {
+  const theme = useGameTheme();
+  const animationSpeedMultiplier = useAnimationSpeedMultiplier();
+  const [visibleDelayed, setVisibleDelayed] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      setVisibleDelayed(true);
+    } else {
+      const to = setTimeout(() => setVisibleDelayed(false), DELAY * animationSpeedMultiplier);
+      return () => clearTimeout(to);
+    }
+  }, [visible, animationSpeedMultiplier]);
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        opacity: opacity,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: visibleDelayed ? ZINDEX_GALLERY_VISIBLE : ZINDEX_GALLERY_INVISIBLE,
+        background: visible ? theme.dialogBackgroundColor : "rgba(0,0,0,0)",
+        transition: `background linear ${(DELAY / 1000) * animationSpeedMultiplier}s`,
+      }}
+    >
+      {(visibleDelayed || persist) && children}
+    </Box>
+  );
+}

package/src/library/components/GameModalDialog.tsx

@@ -0,0 +1,77 @@
+import React, { ReactNode } from "react";
+import { Box, Stack, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { GameModalBackdrop } from "./GameModalBackdrop";
+import { useAnimationSpeedMultiplier } from "../hooks/useTimeController";
+
+interface GameModalDialogProps {
+  opacity?: number;
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+}
+
+export function GameModalDialog({ opacity, visible, onClose, title, children }: GameModalDialogProps) {
+  const theme = useGameTheme();
+  const animationSpeedMultiplier = useAnimationSpeedMultiplier();
+
+  return (
+    <GameModalBackdrop visible={visible} persist opacity={opacity}>
+      <Box
+        sx={{
+          display: "grid",
+          placeItems: "center",
+          position: "absolute",
+          overflow: "hidden",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        }}
+        onClick={onClose}
+      >
+        <Stack
+          onClick={(e) => e.stopPropagation()}
+          sx={{
+            background: theme.actionLogDialogBackgroundColor,
+            width: `min(90%,${theme.actionBarWidth}px)`,
+            height: "90%",
+            overflow: "hidden",
+            borderRadius: 2,
+            transform: !visible ? "translateY(120%)" : "translateY(0)",
+            transition: `transform ${0.1 * animationSpeedMultiplier}s ease-in-out`,
+          }}
+        >
+          <Box
+            sx={{
+              padding: 2,
+              borderBottom: `2px solid ${theme.actionLogBackgroundColor}`,
+              color: theme.actionLogTextColor,
+              fontWeight: "bold",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Box>{title}</Box>
+            <IconButton
+              onClick={onClose}
+              size="small"
+              sx={{
+                color: theme.actionLogTextColor,
+                "&:hover": {
+                  backgroundColor: "rgba(255, 255, 255, 0.1)",
+                },
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          {children}
+        </Stack>
+      </Box>
+    </GameModalBackdrop>
+  );
+}

package/src/library/components/LiveButton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { SkipNext } from "@mui/icons-material";
+import { useTimeController, useTimeState } from "../hooks/useTimeController";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import BottomBarButton from "./BottomBarButton";
+
+export default function LiveButton({ hideIfLive = true }: { hideIfLive?: boolean }) {
+  const timeController = useTimeController();
+  const timeState = useTimeState();
+  const [targetClock] = useEventChannelState(timeState.targetClock);
+  const [maxClock] = useEventChannelState(timeController.maxClock);
+  const [live] = useEventChannelState(timeState.live);
+
+  if (hideIfLive && targetClock >= maxClock.clock) {
+    return null;
+  }
+
+  return (
+    <BottomBarButton
+      disabled={targetClock >= maxClock.clock && live}
+      icon={SkipNext}
+      label={"Live"}
+      onClick={() => timeState.goLive(maxClock.clock)}
+    />
+  );
+}

package/src/library/components/MatchEndDisplay.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, Typography } from "@mui/material";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { useClientStatus, useTimeController, useTimeState } from "../hooks/useTimeController";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import { useChit, useChits } from "../hooks/useChits";
+import { PlayerChit } from "../game/PlayerChit";
+import { GameModalDialog } from "./GameModalDialog";
+import { RootChit } from "../game/RootChit";
+import { SparkChit } from "../game/SparkChit";
+import { SparkLineChart } from "./SparkLineChart";
+
+function InnerMatchEndContents({ maxClock }: { maxClock: number }) {
+  const theme = useGameTheme();
+  const clientStatus = useClientStatus();
+  const timeController = useTimeController();
+
+  const root = useChit<RootChit<PlayerChit>>("root");
+  const playerChits = useChits<PlayerChit>(root?.players.map((p) => p.id ?? "") ?? []);
+  const [matchResult] = useEventChannelState(clientStatus.matchResult);
+  const winnerPlayers = useChits<PlayerChit>(matchResult?.winnerIds ?? []);
+
+  // Map of endGameLabel -> player -> history data
+  const [chartState, setChartState] = useState<
+    | {
+        [endGameLabel: string]: {
+          [playerId: string]: { player: PlayerChit; history: { clock: number; chit: SparkChit }[] };
+        };
+      }
+    | undefined
+  >(undefined);
+
+  const allSparksWithPlayers: { spark: SparkChit; player: PlayerChit }[] = useMemo(
+    () =>
+      playerChits
+        .map((player) => {
+          return player.getSparks("endgame").map((spark) => ({ spark, player }));
+        })
+        .flat(),
+    [playerChits],
+  );
+
+  useEffect(() => {
+    const allSparks = allSparksWithPlayers.map((sp) => sp.spark);
+    timeController.chitHistory(allSparks).then((history) => {
+      console.log(history);
+
+      // Reorganize history by endGameLabel -> player
+      const organized: {
+        [endGameLabel: string]: {
+          [playerId: string]: { player: PlayerChit; history: { clock: number; chit: SparkChit }[] };
+        };
+      } = {};
+
+      allSparksWithPlayers.forEach(({ spark, player }) => {
+        const label = spark.endGameLabel;
+        const historyData = history[spark.id!] as { clock: number; chit: SparkChit }[] | undefined;
+
+        // Skip if there's no history data for this spark
+        if (!historyData || historyData.length === 0) return;
+
+        if (!organized[label]) {
+          organized[label] = {};
+        }
+
+        if (!organized[label][player.id!]) {
+          organized[label][player.id!] = { player, history: historyData };
+        }
+      });
+
+      setChartState(organized);
+    });
+  }, [allSparksWithPlayers, timeController]);
+
+  return (
+    <Box
+      sx={{
+        color: theme.endGameTextColor,
+        p: 3,
+        pr: 1,
+        maxHeight: "100%",
+        overflowY: "auto",
+      }}
+    >
+      <Typography align="center">The winner is</Typography>
+      <Typography align="center" variant="h4">
+        {winnerPlayers?.map((winner) => winner.name)}
+      </Typography>
+      {chartState &&
+        Object.entries(chartState).map(([endGameLabel, playerData]) => (
+          <SparkLineChart
+            key={endGameLabel}
+            label={endGameLabel}
+            playerData={playerData}
+            maxClock={maxClock}
+            backgroundColor={theme.endGameBackgroundColor}
+            width={700}
+          />
+        ))}
+    </Box>
+  );
+}
+
+export function MatchEndDisplay() {
+  const clientStatus = useClientStatus();
+  const timeState = useTimeState();
+  const timeController = useTimeController();
+  const [matchResult] = useEventChannelState(clientStatus.matchResult);
+  const [isLive, setLive] = useEventChannelState(timeState.live);
+  const [maxClock] = useEventChannelState(timeController.maxClock);
+  const [currentClock] = useEventChannelState(timeController.currentClock);
+
+  const visible = !!matchResult && !!isLive && maxClock.clock === currentClock.clock;
+
+  return (
+    <GameModalDialog visible={visible} title="Match Results" onClose={() => setLive(false)}>
+      {visible && <InnerMatchEndContents maxClock={maxClock.clock} />}
+    </GameModalDialog>
+  );
+}

package/src/library/components/MatchViewer.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, 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 { 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";
+
+const theme = createTheme({
+  typography: {
+    fontFamily: ["Raleway", "sans-serif"].join(","),
+  },
+});
+
+function InnerMatchViewer({ onBack }: { onBack?: () => void }) {
+  const timeController = useTimeController();
+  const theme = useGameTheme();
+  const clientStatus = useClientStatus();
+  const [errorMessage] = useEventChannelState(clientStatus.errorMessage);
+  const [rootChit, setRootChit] = useState(timeController.rootChit.value);
+  const ref = useRef(null);
+  const outerRef = useRef(null);
+  const [width, height] = useSize(ref);
+  const [outerWidth] = useSize(outerRef);
+  const [showLog] = useEventChannelState(timeController.clientTimeState.showLog);
+
+  useEffect(
+    () =>
+      timeController.rootChit.on((rootChit) => {
+        if (rootChit) {
+          setRootChit(rootChit);
+        }
+      }),
+    [timeController],
+  );
+
+  const largeEnoughToShowLogSidebar = outerWidth >= 1000;
+
+  return (
+    <Stack
+      direction={"row"}
+      ref={outerRef}
+      sx={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        userSelect: "none",
+        touchAction: "none", // Prevent dragging on touch devices
+        WebkitTouchCallout: "none", // Prevent highlighting phone numbers on iOS
+      }}
+    >
+      <Stack flex={1} sx={{ maxWidth: "100%" }}>
+        <TopBar onBack={onBack} />
+        <Stack
+          direction={"column"}
+          flex={1}
+          ref={ref}
+          sx={{
+            background: `${theme.backgroundColor} linear-gradient(${theme.backgroundGradientAngle}deg, rgba(255,255,255,${theme.backgroundGradientPercent}) 0%, rgba(0,0,0,${theme.backgroundGradientPercent}) 100%)`,
+          }}
+        >
+          <Box flex={1} style={{ display: "flex", position: "relative" }}>
+            <MatchEndDisplay />
+            <GalleryDisplay />
+            <SettingsDisplay />
+            <ActionLogHistoryDisplay />
+
+            {!errorMessage && rootChit && <PanelContents rootChit={rootChit} scaleWidth={width} scaleHeight={height} />}
+            {errorMessage}
+          </Box>
+          <ActionLogDisplay toggleSidebarLog={largeEnoughToShowLogSidebar} />
+        </Stack>
+        <BottomBar />
+      </Stack>
+
+      {largeEnoughToShowLogSidebar && showLog && <ActionLogSidebar />}
+    </Stack>
+  );
+}
+
+export function MatchViewer({ onBack }: { onBack?: () => void }) {
+  const game = useGame();
+  return (
+    <TimeControllerProvider>
+      <CssBaseline />
+      <PanelScaleProvider>
+        <ModalProvider>
+          <GameThemeProvider theme={game.theme}>
+            <ThemeProvider theme={theme}>
+              <InnerMatchViewer onBack={onBack} />
+            </ThemeProvider>
+          </GameThemeProvider>
+        </ModalProvider>
+      </PanelScaleProvider>
+    </TimeControllerProvider>
+  );
+}

package/src/library/components/ObjectWithPropsEditor.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from "react";
+import { TextField, Grid, Checkbox, FormControlLabel, Box, Paper, Typography } from "@mui/material";
+import { ObjectWithProps } from "../utilities/ObjectWithProps";
+
+function createEffectProps(obj: ObjectWithProps, entry: string, value: any) {
+  return () => {
+    if (obj.props.indexOf(entry) >= 0) {
+      (obj as any)[entry] = value;
+      obj.notifyChange(entry);
+      obj.notifyChange("deserialized");
+    }
+  };
+}
+
+function TextPropEditor({ entry, obj }: { entry: string; obj: ObjectWithProps }) {
+  const [value, setValue] = useState((obj as any)[entry]);
+
+  const set = (val: string) => setValue(val);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(createEffectProps(obj, entry, value), [obj, entry, value]);
+
+  return (
+    <TextField
+      fullWidth
+      id={entry}
+      label={entry}
+      variant="standard"
+      type="text"
+      value={value ?? ""}
+      onChange={(e) => set(e.target.value)}
+    />
+  );
+}
+
+function ArrayPropEditor({ entry, obj }: { entry: string; obj: ObjectWithProps }) {
+  const [value, setValue] = useState((obj as any)[entry]);
+
+  const set = (val: string[]) => setValue(val);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(createEffectProps(obj, entry, value), [obj, entry, value]);
+
+  return (
+    <TextField
+      fullWidth
+      id={entry}
+      label={entry}
+      variant="standard"
+      type="text"
+      value={value.join(",") ?? ""}
+      onChange={(e) => set(e.target.value.split(","))}
+    />
+  );
+}
+
+function NumberPropEditor({ entry, obj }: { entry: string; obj: ObjectWithProps }) {
+  const [value, setValue] = useState((obj as any)[entry]);
+  const set = (val: number) => setValue(val);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(createEffectProps(obj, entry, value), [createEffectProps, obj, entry, value]);
+
+  return (
+    <TextField
+      fullWidth
+      id={entry}
+      label={entry}
+      variant="standard"
+      type="number"
+      value={value ?? ""}
+      onChange={(e) => set(+e.target.value)}
+    />
+  );
+}
+
+function BooleanPropEditor({ entry, obj }: { entry: string; obj: ObjectWithProps }) {
+  const [value, setValue] = useState((obj as any)[entry] ?? false);
+  const set = (val: boolean) => setValue(val);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(createEffectProps(obj, entry, value), [obj, entry, value]);
+
+  return (
+    <FormControlLabel control={<Checkbox checked={value} onChange={(e) => set(e.target.checked)} />} label={entry} />
+  );
+}
+
+function SubObjectPropEditor({ entry, obj }: { entry: string; obj: ObjectWithProps }) {
+  const value = (obj as any)[entry];
+
+  return (
+    <Box>
+      <Typography>{entry}</Typography>
+      <Box>
+        <Paper sx={{ p: 2 }} elevation={3}>
+          <ObjectWithPropsEditor obj={value} />
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+function PropEditor({ entry, obj }: { entry: string; obj: ObjectWithProps }) {
+  const [value, setValue] = useState((obj as any)[entry]);
+  useEffect(
+    () =>
+      obj.onChange(null, () => {
+        setValue((obj as any)[entry]);
+      }),
+    [obj, setValue, entry],
+  );
+
+  let ComponentType: undefined | (({ entry, obj }: { entry: string; obj: ObjectWithProps }) => JSX.Element);
+
+  if (typeof value === "number") {
+    ComponentType = NumberPropEditor;
+  }
+  if (typeof value === "string") {
+    ComponentType = TextPropEditor;
+  }
+  if (typeof value === "boolean") {
+    ComponentType = BooleanPropEditor;
+  }
+  if (entry !== "parent" && value instanceof ObjectWithProps) {
+    ComponentType = SubObjectPropEditor;
+  }
+  if (Array.isArray(value)) {
+    ComponentType = ArrayPropEditor;
+  }
+
+  if (ComponentType) {
+    return <ComponentType entry={entry} obj={obj} />;
+  }
+  return null;
+}
+
+const defaultObjWithProps = new ObjectWithProps();
+
+export default function ObjectWithPropsEditor({ obj }: { obj: ObjectWithProps }) {
+  if (!obj) {
+    obj = defaultObjWithProps;
+  }
+
+  const [targetType, setTargetType] = useState("");
+  const [objProps, setObjProps] = useState<string[]>(obj.props);
+
+  useEffect(() => {
+    setObjProps(obj.props);
+    const proto = Object.getPrototypeOf(obj);
+    const constructor = proto.constructor;
+    const keySpace = constructor.name;
+    setTargetType(keySpace);
+  }, [obj]);
+
+  return (
+    <>
+      {[targetType].map((c) => (
+        <Grid key={c} container spacing={3}>
+          {objProps.map((entry) => (
+            <Grid key={entry} item xs={12}>
+              <PropEditor obj={obj} entry={entry} />
+            </Grid>
+          ))}
+        </Grid>
+      ))}
+    </>
+  );
+}