@pretty-chitty/core 1.1.1

package/src/library/components/PersistentCanvas.tsx

@@ -0,0 +1,81 @@
+import React, { useLayoutEffect, useRef, useState } from "react";
+
+interface PersistentCanvasProps {
+  width: number;
+  height: number;
+  displayWidth: number;
+  displayHeight: number;
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+  onSnapshotCleared?: () => void;
+}
+
+export default function PersistentCanvas({
+  width,
+  height,
+  displayWidth,
+  displayHeight,
+  canvasRef,
+  onSnapshotCleared,
+}: PersistentCanvasProps) {
+  const [snapshotDataUrl, setSnapshotDataUrl] = useState<string | null>(null);
+  const prevSizeRef = useRef({ width: 0, height: 0 });
+
+  // Capture snapshot BEFORE DOM updates using useLayoutEffect
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas && (prevSizeRef.current.width !== width || prevSizeRef.current.height !== height)) {
+      // Only capture if we had a previous size (not first render)
+      if (prevSizeRef.current.width > 0 && prevSizeRef.current.height > 0) {
+        try {
+          setSnapshotDataUrl(canvas.toDataURL());
+        } catch (e) {
+          // Ignore errors from tainted canvas
+          setSnapshotDataUrl(null);
+        }
+      }
+      prevSizeRef.current = { width, height };
+    }
+  }, [width, height, canvasRef]);
+
+  // Expose method to clear snapshot
+  React.useImperativeHandle(
+    canvasRef,
+    () => {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        (canvas as any).clearSnapshot = () => {
+          setSnapshotDataUrl(null);
+          onSnapshotCleared?.();
+        };
+      }
+      return canvas as HTMLCanvasElement;
+    },
+    [canvasRef, onSnapshotCleared]
+  );
+
+  return (
+    <div style={{ position: "absolute", top: 0, right: 0, left: 0, bottom: 0 }}>
+      {snapshotDataUrl && (
+        <img
+          src={snapshotDataUrl}
+          alt=""
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            imageRendering: "auto",
+          }}
+        />
+      )}
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        style={{ width: displayWidth, height: displayHeight }}
+      />
+    </div>
+  );
+}

package/src/library/components/PlayerImage.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Box, SxProps } from "@mui/material";
+import { PlayerChit } from "../game/PlayerChit";
+import { useGameTheme } from "../hooks/useGameTheme";
+
+export default function PlayerImage({
+  player,
+  borderColor,
+  size = 50,
+  sx,
+}: {
+  player: PlayerChit;
+  borderColor?: string;
+  size?: number;
+  sx?: SxProps;
+}) {
+  const theme = useGameTheme();
+  const BORDER_RATIO = player.color === "transparent" ? 0 : 1 / 12;
+  const IMAGE_SIZE = Math.ceil(size * (1 - BORDER_RATIO * 2));
+  return (
+    <Box
+      sx={{
+        background: player.color,
+        border: `${size * BORDER_RATIO}px solid ${borderColor ?? player.color}`,
+        borderRadius: 2,
+        boxShadow: `0 0 ${theme.spacing / 4}px ${theme.spacing / 4}px ${theme.topBarPlayerDropShadowColor}`,
+        overflow: "hidden",
+        position: "relative",
+        width: size,
+        height: size,
+        lineHeight: `${IMAGE_SIZE}px`,
+        ...sx,
+      }}
+    >
+      <Box sx={{ position: "absolute", top: 0, left: 0 }}>
+        <img src={player.imageUrl} style={{ width: IMAGE_SIZE, height: IMAGE_SIZE }} />
+      </Box>
+    </Box>
+  );
+}

package/src/library/components/Playground.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useState, ReactNode } from "react";
+
+import SelectableItemAndStage from "./SelectableItemAndStage";
+import { Chit } from "../game/Chit";
+import { Box, Button, Stack, Tabs, Tab, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import useLocalStorageState from "use-local-storage-state";
+import { MatchViewer } from "./MatchViewer";
+import { Game } from "../game/Game";
+import { GameProvider } from "../hooks/useGame";
+import { ConnectionProvider } from "../hooks/useConnection";
+import { Connection } from "../game/Connection";
+import { LocalConnectionTransport } from "../game/ConnectionTransport";
+import { Match } from "../game/Match";
+import { PlayerInfo } from "../game/PlayerInfo";
+import { LocalMatchStorage } from "../game/MatchStorage";
+import { GridOn, PhoneIphone, Tab as TabIcon } from "@material-ui/icons";
+import { PlayerProvider } from "../hooks/usePlayer";
+
+type Layout = "tile" | "tab" | "phone";
+
+export interface IChitLibrary {
+  [key: string]: new () => Chit;
+}
+
+function PlayerEditor({ playerId, match, showBack }: { showBack?: boolean; playerId: string; match: Match<any, any> }) {
+  const [localConnection, setLocalConnection] = useState<Connection | undefined>();
+  const [, setRemoteConnection] = useState<LocalConnectionTransport>(new LocalConnectionTransport());
+
+  useEffect(() => {
+    const newRemoteConnection = new LocalConnectionTransport();
+    const newConnection = new Connection(new LocalConnectionTransport());
+    (newConnection.transport as LocalConnectionTransport).connect(newRemoteConnection);
+    match.connect(newRemoteConnection, playerId);
+
+    setLocalConnection(newConnection);
+    setRemoteConnection(newRemoteConnection);
+    return () => {
+      newConnection.dispose();
+      // TODO:
+      // match.disconnection(newRemoteConnection);
+    };
+  }, [match, playerId]);
+
+  if (!localConnection) {
+    return null;
+  }
+
+  return (
+    <ConnectionProvider connection={localConnection}>
+      <PlayerProvider playerId={playerId}>
+        <MatchViewer onBack={showBack ? () => {} : undefined} />
+      </PlayerProvider>
+    </ConnectionProvider>
+  );
+}
+
+function MatchGrid({ match }: { match: Match<any, any> }) {
+  let rows = Math.ceil(Math.sqrt(match.players.length));
+  let columns = Math.ceil(match.players.length / rows);
+
+  if (rows > columns) {
+    const t = rows;
+    rows = columns;
+    columns = t;
+  }
+
+  const playerRows = match.players.reduce((acc: PlayerInfo[][], player, i) => {
+    const rowIndex = Math.floor(i / columns);
+    acc[rowIndex] ??= [];
+    acc[rowIndex].push(player);
+    return acc;
+  }, []);
+  return (
+    <Stack direction={"column"} sx={{ overflow: "hidden", height: "100%", width: "100%" }}>
+      {playerRows.map((ps, i) => (
+        <Stack key={i} direction="row" sx={{ height: `${100 / playerRows.length}%`, width: "100%" }}>
+          {ps.map((p) => (
+            <Box key={p.id} sx={{ width: `${100 / ps.length}%`, height: "100%" }}>
+              <PlayerEditor playerId={p.id} match={match} />
+            </Box>
+          ))}
+        </Stack>
+      ))}
+    </Stack>
+  );
+}
+
+function MatchTabs({ match }: { match: Match<any, any> }) {
+  const [tabIndex, setTabIndex] = useLocalStorageState("selectedPlayerIndex", {
+    defaultValue: 0,
+  });
+  if (tabIndex >= match.players.length && tabIndex > 0) {
+    setTabIndex(0);
+    return null;
+  }
+
+  return (
+    <Stack sx={{ height: "100%", width: "100%" }}>
+      <Tabs
+        value={tabIndex}
+        onChange={(e, newValue) => setTabIndex(newValue)}
+        indicatorColor="secondary"
+        textColor="inherit"
+        variant="fullWidth"
+      >
+        {match.players.map((p) => (
+          <Tab label={p.name} key={p.id} />
+        ))}
+      </Tabs>
+      <Box flex={1} sx={{ height: "100%" }}>
+        {[match.players[tabIndex].id].map((id) => (
+          <PlayerEditor key={id} playerId={id} match={match} />
+        ))}
+      </Box>
+    </Stack>
+  );
+}
+
+function MatchPhone({ match }: { match: Match<any, any> }) {
+  return (
+    <Box sx={{ height: "100%", width: "100%", overflow: "scroll" }}>
+      <Stack direction={"row"} sx={{ width: `${390 * match.players.length}px` }}>
+        {match.players.map((p) => (
+          <Box key={p.id} sx={{ width: `390px`, height: "684px" }}>
+            <PlayerEditor showBack playerId={p.id} match={match} />
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
+
+function Editor({
+  setButtons,
+  layout,
+  game,
+  matchInformation,
+}: {
+  setButtons: (buttons: ReactNode) => void;
+  layout: Layout;
+  game: Game<any, any>;
+  matchInformation: string;
+}) {
+  const [match, setMatch] = useState<Match<any, any> | null>(null);
+
+  useEffect(() => {
+    const FIRST_NAMES = ["Fred", "Steve", "Paul", "Josh", "Sara", "Miles"];
+    const LAST_NAMES = ["Johnson", "Dennis", "Green", "Breckman", "Stevens", "Smith"];
+    const storage = new LocalMatchStorage(matchInformation);
+    const players = [];
+    let playerCount = parseInt(matchInformation);
+    if (!Number.isFinite(playerCount)) {
+      playerCount = 2;
+    }
+    for (let i = 0; i < playerCount; i++) {
+      players.push(
+        new PlayerInfo(
+          `p${i}`,
+          `${FIRST_NAMES[(i + playerCount) % FIRST_NAMES.length]} ${LAST_NAMES[i % LAST_NAMES.length]}`,
+        ),
+      );
+    }
+    const match = new Match(game, players, storage);
+    let cancelled = false;
+    match.load().then(() => {
+      if (cancelled) {
+        return;
+      }
+      match.start();
+      setMatch(match);
+
+      const saveStateToLocalStorage = (key: string, state: any) => {
+        localStorage.setItem(key, JSON.stringify(state));
+      };
+
+      const readStateFromLocalStorage = (key: string) => {
+        const state = localStorage.getItem(key);
+        return state ? JSON.parse(state) : {};
+      };
+
+      let aState = readStateFromLocalStorage("aState");
+      let bState = readStateFromLocalStorage("bState");
+
+      setButtons(
+        <>
+          <Button>New</Button>
+          <Button onClick={() => storage.saveState({}, [], "active", undefined, true)}>Reset</Button>
+
+          <Button
+            onClick={() =>
+              storage.readState().then((d) => {
+                aState = d;
+                saveStateToLocalStorage("aState", aState);
+              })
+            }
+          >
+            Save A
+          </Button>
+          <Button
+            onClick={() =>
+              storage.readState().then((d) => {
+                bState = d;
+                saveStateToLocalStorage("bState", bState);
+              })
+            }
+          >
+            Save B
+          </Button>
+          <Button
+            onClick={() => {
+              aState = readStateFromLocalStorage("aState");
+              storage.saveState(aState, [], "active", undefined, true);
+            }}
+          >
+            Read A
+          </Button>
+          <Button
+            onClick={() => {
+              bState = readStateFromLocalStorage("bState");
+              storage.saveState(bState, [], "active", undefined, true);
+            }}
+          >
+            Read B
+          </Button>
+        </>,
+      );
+    });
+    return () => {
+      match.dispose();
+      cancelled = true;
+    };
+  }, [game, matchInformation, setButtons]);
+
+  if (!match) {
+    return null;
+  }
+
+  return (
+    <GameProvider game={game}>
+      {layout === "tile" && <MatchGrid match={match} />}
+      {layout === "tab" && <MatchTabs match={match} />}
+      {layout === "phone" && <MatchPhone match={match} />}
+    </GameProvider>
+  );
+}
+
+export default function Playground({ game }: { game: Game<any, any> }) {
+  const [layout, setLayout] = useLocalStorageState<Layout>("matchViewerLayout", {
+    defaultValue: "tile",
+  });
+  const [buttons, setButtons] = useState<ReactNode | null>(null);
+
+  const items = ["2", "3", "4", "5", "1", "6", "7", "8", "9", "10"];
+
+  return (
+    <SelectableItemAndStage
+      keySpace="playground"
+      items={items}
+      topOptions={
+        <Stack direction="row">
+          {buttons}
+
+          <ToggleButtonGroup
+            exclusive
+            size="small"
+            sx={{ m: 2 }}
+            value={layout}
+            onChange={(e, newValue) => setLayout(newValue)}
+          >
+            <ToggleButton value="tile">
+              <GridOn />
+            </ToggleButton>
+            <ToggleButton value="tab">
+              <TabIcon />
+            </ToggleButton>
+            <ToggleButton value="phone">
+              <PhoneIphone />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Stack>
+      }
+      render={(item) => <Editor setButtons={setButtons} layout={layout} matchInformation={item} game={game} />}
+    />
+  );
+}

package/src/library/components/PromptControls.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import { ChevronRight, ChevronLeft, Replay, QuestionMark } from "@mui/icons-material";
+import { Box, Stack } from "@mui/material";
+import BottomBarButton from "./BottomBarButton";
+import { useGameTheme } from "../hooks/useGameTheme";
+import BottomBarBreak from "./BottomBarBreak";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import { useAnimationSpeedMultiplier, useClientPrompts, useTimeState } from "../hooks/useTimeController";
+import { usePlayerId } from "../hooks/usePlayer";
+import GameDialog from "./GameDialog";
+import Markdown from "react-markdown";
+import { ZINDEX_PROMPT_CONTROLS } from "../utilities/zIndex";
+import { GameButton, ToggleGalleryButton } from "../game/GameButton";
+import { useModalState } from "../hooks/useModalState";
+import { ContextGalleryDisplay } from "./ContextGalleryDisplay";
+import { NoValidMovesPrompt } from "../game/Prompt";
+
+function GameButtonWrapper({ button }: { button: GameButton }) {
+  const modalState = useModalState();
+  const [source, setSource] = useEventChannelState(modalState.gallerySource);
+
+  let highlight = false;
+  let cb = button.cb;
+
+  if (button instanceof ToggleGalleryButton) {
+    if (
+      (button.galleryItemSource === source && source) ||
+      (source?.backingObject && button.galleryItemSource?.backingObject === source.backingObject)
+    ) {
+      highlight = true;
+      cb = () => setSource(undefined);
+    } else if (button.galleryItemSource) {
+      const source = button.galleryItemSource;
+      cb = () => setSource(source);
+    }
+  }
+
+  return <BottomBarButton highlight={highlight} icon={button.icon} label={button.label} onClick={cb} />;
+}
+
+export default function PromptControls({ collapsible }: { collapsible?: boolean }) {
+  const [expanded, setExpanded] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const timeState = useTimeState();
+  const playerId = usePlayerId();
+  const speed = useAnimationSpeedMultiplier();
+  const clientPrompt = useClientPrompts();
+  const [prompt] = useEventChannelState(clientPrompt.currentPrompt);
+  const [promptSpec] = useEventChannelState(clientPrompt.getPromptEventChannelForPlayer(playerId));
+  const [expandedBecauseOfPrompt, setExpandedBecauseOfPrompt] = useState(!!prompt);
+  const [live] = useEventChannelState(timeState.live);
+  const theme = useGameTheme();
+
+  useEffect(() => {
+    setExpanded(true);
+    if (!live) {
+      setExpandedBecauseOfPrompt(false);
+    } else if (prompt) {
+      if (prompt instanceof NoValidMovesPrompt) {
+        setShowHelp(true);
+      }
+
+      setExpandedBecauseOfPrompt(true);
+    } else {
+      const to = setTimeout(() => setExpandedBecauseOfPrompt(false), promptSpec ? 4000 : 400);
+      return () => clearTimeout(to);
+    }
+  }, [prompt, live, promptSpec]);
+
+  if (!prompt && showHelp) {
+    setShowHelp(false);
+  }
+
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        position: collapsible ? "absolute" : "static",
+        overflow: "hidden",
+        zIndex: ZINDEX_PROMPT_CONTROLS,
+        background: theme.actionBarColor,
+        maxWidth: collapsible ? "calc(100% - 30px)" : undefined,
+        width: collapsible ? "97%" : "100%",
+        minWidth: "100px",
+        height: theme.bottomBarHeight,
+        transform: collapsible
+          ? expandedBecauseOfPrompt
+            ? `translateX(${expanded ? "0px" : "calc(100% - 55px)"})`
+            : "translateX(100%)"
+          : "",
+        opacity: !collapsible ? (expandedBecauseOfPrompt ? 1 : 0.4) : 1,
+        transition: `transform ease-in-out ${theme.actionBarAnimationDuration * speed}s, opacity linear ${theme.actionBarAnimationDuration * speed}s`,
+        pr: 1,
+        pl: collapsible ? 0 : 1,
+        right: 0,
+        boxShadow: "-2px -2px 10px 0px rgba(0,0,0,0.2)",
+      }}
+    >
+      {collapsible && (
+        <>
+          <BottomBarButton
+            removeLabel
+            icon={expanded ? ChevronRight : ChevronLeft}
+            onClick={() => setExpanded(!expanded)}
+          />
+          <BottomBarBreak />
+        </>
+      )}
+
+      {/* {prompt && <BottomBarButton icon={QuestionMark} label="Help" onClick={() => setShowHelp(true)} />} */}
+      {/* {prompt && (
+        <GameDialog onClose={() => setShowHelp(false)} open={showHelp}>
+          <Markdown>{prompt.formatHelpText()}</Markdown>
+        </GameDialog>
+      )} */}
+
+      {prompt?.canReset && (
+        <BottomBarButton
+          icon={Replay}
+          label="Undo"
+          onClick={() => prompt.stepBack()}
+          onLongClick={() => prompt.stepBack(true)}
+        />
+      )}
+      <Box flex={1} />
+      {prompt?.buttons.map((button, idx) => (
+        <GameButtonWrapper key={idx} button={button} />
+      ))}
+      <ContextGalleryDisplay size={theme.bottomBarHeight - theme.spacing * 2} />
+    </Stack>
+  );
+}

package/src/library/components/SelectableItemAndStage.tsx

@@ -0,0 +1,49 @@
+import React, { ReactNode, useEffect } from "react";
+import useLocalStorageState from "use-local-storage-state";
+import { Stack, Box, Select, MenuItem, Paper } from "@mui/material";
+
+export default function SelectableItemAndStage({
+  items,
+  render,
+  keySpace,
+  topOptions,
+}: {
+  items: string[];
+  keySpace: string;
+  render: (t: string) => ReactNode;
+  topOptions?: ReactNode;
+}) {
+  const [selected, setSelected] = useLocalStorageState<string>(`dropdown${keySpace}`, {
+    defaultValue: "",
+  });
+
+  useEffect(() => {
+    if (selected === "" && items.length > 0) {
+      setSelected(items[0]);
+    }
+  }, [selected, items, setSelected]);
+
+  return (
+    <Stack sx={{ height: "100%" }}>
+      <Paper elevation={3} sx={{ position: "relative" }}>
+        <Stack direction={"row"}>
+          <Select
+            variant="standard"
+            sx={{ m: 2, width: 200 }}
+            value={selected}
+            label="Select Choice"
+            onChange={(e) => setSelected(e.target.value)}
+          >
+            {items.map((item) => (
+              <MenuItem value={item} key={item}>
+                {item}
+              </MenuItem>
+            ))}
+          </Select>
+          {topOptions}
+        </Stack>
+      </Paper>
+      <Box flexGrow={1}>{selected ? render(selected) : null}</Box>
+    </Stack>
+  );
+}