@pretty-chitty/core 1.1.1

package/dist/utilities/zIndex.d.ts

@@ -0,0 +1,14 @@
+export declare const ZINDEX_GALLERY_INVISIBLE = -1;
+export declare const ZINDEX_BOTTOM_BAR_BUTTON_LONG_CLICK = 1;
+export declare const ZINDEX_BOTTOM_BAR_BUTTON_LABEL = 2;
+export declare const ZINDEX_PROMPT_CONTROLS = 3;
+export declare const ZINDEX_SPARKS = 10;
+export declare const ZINDEX_PANEL_CUTOUTS = 11;
+export declare const ZINDEX_PINCH_OUT = 50;
+export declare const ZINDEX_PINCH_OUT_FOCUSED = 51;
+export declare const ZINDEX_CONTEXT_GALLERY_DISPLAY = 140;
+export declare const ZINDEX_MATCH_END_DISPLAY = 150;
+export declare const ZINDEX_GALLERY_VISIBLE = 160;
+export declare const ZINDEX_TOP_BAR_HEADER = 210;
+export declare const ZINDEX_TOP_BAR_BODY = 200;
+//# sourceMappingURL=zIndex.d.ts.map

package/dist/utilities/zIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.d.ts","sourceRoot":"","sources":["../../src/library/utilities/zIndex.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mCAAmC,IAAI,CAAC;AACrD,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAChD,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAClD,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAC5C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}

package/dist/utilities/zIndex.js

@@ -0,0 +1,14 @@
+export const ZINDEX_GALLERY_INVISIBLE = -1;
+export const ZINDEX_BOTTOM_BAR_BUTTON_LONG_CLICK = 1;
+export const ZINDEX_BOTTOM_BAR_BUTTON_LABEL = 2;
+export const ZINDEX_PROMPT_CONTROLS = 3;
+export const ZINDEX_SPARKS = 10;
+export const ZINDEX_PANEL_CUTOUTS = 11;
+export const ZINDEX_PINCH_OUT = 50;
+export const ZINDEX_PINCH_OUT_FOCUSED = 51;
+export const ZINDEX_CONTEXT_GALLERY_DISPLAY = 140;
+export const ZINDEX_MATCH_END_DISPLAY = 150;
+export const ZINDEX_GALLERY_VISIBLE = 160;
+export const ZINDEX_TOP_BAR_HEADER = 210;
+export const ZINDEX_TOP_BAR_BODY = 200;
+//# sourceMappingURL=zIndex.js.map

package/dist/utilities/zIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.js","sourceRoot":"","sources":["../../src/library/utilities/zIndex.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,CAAC,CAAC;AAC3C,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAAC,CAAC;AACrD,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,CAAC;AAChC,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AACnC,MAAM,CAAC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAC;AAClD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAC5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AACzC,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC"}

package/package.json

@@ -0,0 +1,138 @@
+{
+  "name": "@pretty-chitty/core",
+  "version": "1.1.1",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "description": "A TypeScript framework for building high-quality async or realtime 3D strategy board games",
+  "author": "Pretty Chitty, LLC",
+  "homepage": "https://pretty-chitty.github.io/pretty-chitty/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pretty-chitty/pretty-chitty.git"
+  },
+  "keywords": [
+    "game-engine",
+    "board-game",
+    "3d",
+    "threejs",
+    "game-development",
+    "strategy-game",
+    "multiplayer",
+    "typescript",
+    "react"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./ReactCanvas": {
+      "import": "./dist/utilities/CanvasStack/ReactCanvas.js",
+      "types": "./dist/utilities/CanvasStack/ReactCanvas.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src/library",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.23.5",
+    "@babel/plugin-syntax-decorators": "^7.23.3",
+    "@babel/plugin-transform-typescript": "^7.23.6",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@types/base-64": "^1.0.2",
+    "@types/color": "^3.0.6",
+    "@types/jest": "^29.5.11",
+    "@types/next-tick": "^1.0.2",
+    "@types/node": "^20.11.3",
+    "@types/wheel": "^0.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitest/coverage-v8": "^1.2.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-transform-typescript-metadata": "^0.3.2",
+    "css-loader": "^6.9.1",
+    "depcheck": "^1.4.7",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.5.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "react-refresh": "^0.14.0",
+    "style-loader": "^3.3.4",
+    "ts-jest": "^29.4.6",
+    "ts-loader": "^9.5.1",
+    "ts-patch": "^3.3.0",
+    "typedoc": "^0.28.15",
+    "typescript": "5.9",
+    "vitest": "^1.2.0",
+    "vitest-mock-extended": "^1.3.1",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "prettier": {
+    "printWidth": 120
+  },
+  "dependencies": {
+    "@egjs/hammerjs": "^2.0.17",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/raleway": "^5.0.16",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
+    "@multiavatar/multiavatar": "^1.0.7",
+    "@react-hook/debounce": "^4.0.0",
+    "@react-hook/hover": "^4.0.0",
+    "@react-hook/size": "^2.1.2",
+    "@tweenjs/tween.js": "^23.1.1",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "@types/three": "^0.158.0",
+    "base-64": "^1.0.0",
+    "color": "^4.2.3",
+    "extrude-polyline": "^1.0.6",
+    "mui-modal-provider": "^2.4.2",
+    "next-tick": "^1.1.0",
+    "quick-lru": "^7.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-interval-hook": "^1.1.4",
+    "react-markdown": "^9.0.1",
+    "react-random-avatars": "^1.3.1",
+    "react-window": "^2.2.1",
+    "reflect-metadata": "^0.1.14",
+    "three": "^0.158.0",
+    "three-csg-ts": "^3.1.13",
+    "use-local-storage-state": "^19.1.0",
+    "use-long-press": "^3.2.0",
+    "wheel": "^1.0.0"
+  },
+  "scripts": {
+    "dev": "webpack serve",
+    "start": "webpack serve",
+    "build": "rm -rf dist && yarn tsc --project tsconfig.build.json && yarn docs && yarn pack",
+    "build:no-sourcemaps": "rm -rf dist && yarn tsc --project tsconfig.build.json --sourceMap false --declarationMap false && yarn pack",
+    "build:demo": "NODE_ENV=production webpack --config webpack.demo.config.js",
+    "build:all": "yarn build && yarn build:demo",
+    "test": "vitest",
+    "compile:check": "tsc",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "coverage": "vitest run --coverage",
+    "docs": "typedoc"
+  }
+}

package/src/library/assets/checker.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path d="M0 0h8v16h8V8H0z" opacity=".07"/>
+</svg>

package/src/library/assets/cutout.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="40"
+   height="20"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="cutout.svg"
+   viewport="0 0 40 20"
+   inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <rect
+     style="fill:#000000;stroke-width:1.58232"
+     id="rect4"
+     width="34"
+     height="8"
+     x="3"
+     y="6"
+     ry="4" />
+</svg>

package/src/library/components/ActionLogDisplay.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Stack } from "@mui/material";
+import { useGameTheme } from "../hooks/useGameTheme";
+import useSize from "@react-hook/size";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import {
+  useAnimationSpeedMultiplier,
+  useClientPrompts,
+  useTimeController,
+  useTimeState,
+} from "../hooks/useTimeController";
+import { TokenizedMessage } from "./TokenizedMessage";
+import { useChit, useChits } from "../hooks/useChits";
+import { PlayerChit } from "../game/PlayerChit";
+import { RootChit } from "../game/RootChit";
+import { usePlayerId } from "../hooks/usePlayer";
+import { NoValidMovesPrompt } from "../game/Prompt";
+import { useTokenMap } from "../hooks/useTokenMap";
+import { useModalState } from "../hooks/useModalState";
+import { KeyboardDoubleArrowUp } from "@mui/icons-material";
+import { useSmartDebouncedState } from "../hooks/useSmartDebouncedState";
+
+function Arrow({ flipped, sideways }: { flipped?: boolean; sideways?: boolean }) {
+  const theme = useGameTheme();
+  return (
+    <Box
+      sx={{
+        color: theme.actionLogTextColor,
+        opacity: 0.25,
+        alignItems: "center",
+        display: "flex",
+        transform: !sideways
+          ? flipped
+            ? "rotate(180deg)"
+            : "rotate(0deg)"
+          : flipped
+            ? "rotate(90deg)"
+            : "rotate(270deg)",
+        transition: "transform 0.1s ease-in-out",
+      }}
+    >
+      <KeyboardDoubleArrowUp />
+    </Box>
+  );
+}
+
+export function ActionLogDisplay({ toggleSidebarLog }: { toggleSidebarLog: boolean }) {
+  const modalState = useModalState();
+  const animationSpeedMultiplier = useAnimationSpeedMultiplier();
+  const [visible, setVisible] = useEventChannelState(modalState.actionLogVisible);
+  const timeController = useTimeController();
+  const timeState = useTimeState();
+  const [currentClock] = useEventChannelState(timeController.currentClock);
+  const [targetClock] = useEventChannelState(timeState.targetClock);
+  const [live] = useEventChannelState(timeState.live);
+  const [maxClock] = useEventChannelState(timeController.maxClock);
+  const [showLog, setShowLog] = useEventChannelState(timeController.clientTimeState.showLog);
+
+  const theme = useGameTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [width] = useSize(containerRef);
+  const layoutSize = theme.layoutSize(width);
+  const clientPrompt = useClientPrompts();
+
+  const [prompt] = useEventChannelState(clientPrompt.currentPrompt);
+  const [promptMode, setPromptMode] = useState(false);
+  const playerId = usePlayerId();
+  const [promptSpec] = useEventChannelState(clientPrompt.getPromptEventChannelForPlayer(playerId));
+  const tokenMap = useTokenMap();
+
+  const [message, setMessage] = useSmartDebouncedState<string | undefined>(undefined, {
+    interval: 1000 * animationSpeedMultiplier,
+    // immediate: 50,
+  });
+  const [isSteppingBack, setIsSteppingBack] = useState(false);
+  const [messageHasntChanged, setMessageHasntChanged] = useState(false);
+  const [logMessage] = useEventChannelState(timeController.activeLog);
+
+  const PADDING_SIZE = 8; // bs i know
+
+  const root = useChit<RootChit<PlayerChit>>("root");
+
+  const playerChits = useChits<PlayerChit>(root?.players.map((p) => p.id ?? "") ?? []);
+  playerChits.map((p) => p.promptStatus.latestPromptMessage).fill;
+
+  // calc if a prompt message.  this has highest priority
+  let promptMessage: string | undefined;
+  if (prompt) {
+    if (prompt instanceof NoValidMovesPrompt) {
+      promptMessage = `:warning: ${prompt?.message ?? ""}`;
+    } else {
+      promptMessage = `:${playerId}: to ${prompt?.message ?? ""}`;
+    }
+  }
+
+  useEffect(() => {
+    if (!live) {
+      setPromptMode(false);
+    } else if (!prompt) {
+      // duplicated from promptcontrols... not ideal, but can fix later if this works
+      const to = setTimeout(() => setPromptMode(false), promptSpec ? 4000 : 400);
+      return () => clearTimeout(to);
+    } else {
+      setPromptMode(true);
+    }
+  }, [live, prompt, promptSpec]);
+
+  // debounce messages and lock up animation loop
+  useEffect(() => {
+    setMessage(logMessage);
+    setMessageHasntChanged(false);
+    const key = `ActionLogDisplay${Date.now()}`;
+    setTimeout(() => timeState.setAnimationState(key, false), 1000 * animationSpeedMultiplier);
+    const to2 = setTimeout(() => {
+      setMessageHasntChanged(true);
+    }, 5000 * animationSpeedMultiplier);
+    return () => {
+      clearTimeout(to2);
+    };
+  }, [logMessage, animationSpeedMultiplier, timeState, setMessage]);
+
+  // mark if we are stepping back
+  useEffect(() => {
+    if (live && targetClock < currentClock.clock) {
+      setIsSteppingBack(true);
+      setTimeout(() => setIsSteppingBack(false), 1000 * animationSpeedMultiplier);
+    }
+  }, [live, currentClock.clock, currentClock.pass, targetClock, maxClock.pass, animationSpeedMultiplier]);
+
+  let messageToShow = message;
+  if (promptMode) {
+    messageToShow = promptMessage;
+  } else if (isSteppingBack) {
+    messageToShow = "↩ Stepping back...";
+  } else if (messageHasntChanged && live) {
+    const waitingPlayers = playerChits.filter((p) => p.promptStatus?.latestPromptMessage);
+    if (waitingPlayers.length > 0 && !waitingPlayers.find((p) => p.playerId === playerId)) {
+      messageToShow = `Waiting for ${waitingPlayers.map((p) => `:${p.playerId}:`).join(" and ")}`;
+    }
+  }
+
+  const toggle = () => {
+    if (toggleSidebarLog) {
+      setShowLog(!showLog);
+    } else {
+      setVisible(!visible);
+    }
+  };
+
+  return (
+    <Stack
+      direction={"row"}
+      ref={containerRef}
+      sx={{
+        background: theme.actionLogBackgroundColor,
+        cursor: "pointer",
+      }}
+      onClick={toggle}
+    >
+      <Box flex={1} />
+      {!toggleSidebarLog && <Arrow flipped={visible} />}
+      <Box
+        flex={1000}
+        sx={{
+          p: 1,
+          lineHeight: 1,
+          textAlign: "center",
+          minHeight: 14 * theme.actionBarLinesToShow * 1.1 + PADDING_SIZE * 2, // 8px for padding?
+          color: theme.actionLogTextColor,
+          maxWidth: layoutSize !== "mobile" ? `${theme.actionBarWidth - 40}px` : undefined,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <TokenizedMessage message={messageToShow ?? ""} fontSize={14} tokenMap={tokenMap} />
+      </Box>
+      {!toggleSidebarLog && <Arrow flipped={visible} />}
+      <Box flex={1} />
+      {toggleSidebarLog && <Arrow sideways flipped={showLog} />}
+    </Stack>
+  );
+}

package/src/library/components/ActionLogHistory.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from "react";
+import { Box, Stack } from "@mui/material";
+import { useListRef, type RowComponentProps } from "react-window";
+import { List, useDynamicRowHeight } from "react-window";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { TokenDefinition, TokenizedMessage } from "./TokenizedMessage";
+import { useTokenMap } from "../hooks/useTokenMap";
+import { GameTheme } from "../game/GameTheme";
+import { useModalState } from "../hooks/useModalState";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import { useClientPrompts, useTimeController, useTimeState } from "../hooks/useTimeController";
+
+interface LogEntry {
+  message: string;
+  clock: number;
+  endClock: number;
+}
+
+interface RowData {
+  messages: LogEntry[];
+  tokenMap: Record<string, TokenDefinition>;
+  theme: GameTheme;
+}
+
+function RowComponent({ index, messages, style, tokenMap, theme }: RowComponentProps<RowData>) {
+  const clientPrompt = useClientPrompts();
+  const [prompt] = useEventChannelState(clientPrompt.currentPrompt);
+  const modalState = useModalState();
+  const clientTime = useTimeController();
+  const clientTimeState = useTimeState();
+  const [currentClock] = useEventChannelState(clientTime.currentClock);
+  const [, setTargetClock] = useEventChannelState(clientTimeState.targetClock);
+  const [, setLive] = useEventChannelState(clientTimeState.live);
+  const isCurrent =
+    !prompt && currentClock.clock > messages[index].clock && currentClock.clock <= messages[index].endClock;
+
+  return (
+    <Stack
+      onClick={() => {
+        setTargetClock(messages[index].clock + 1);
+        setLive(false);
+        modalState.actionLogVisible.value = false;
+      }}
+      direction={"row"}
+      style={style}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        p: 1,
+        pl: 2,
+        pr: 2,
+        cursor: "pointer",
+        color: theme.actionLogTextColor,
+        background: isCurrent
+          ? theme.actionLogDialogHighlightBackgroundColor
+          : index % 2 === 0
+            ? "rgba(128,128,128,0.1)"
+            : "transparent",
+      }}
+    >
+      <Box sx={{ width: 25, fontSize: 11, textAlign: "right" }}>{messages[index].clock + 1}</Box>
+      <Box flex={1} sx={{ pl: 2 }}>
+        <TokenizedMessage message={messages[index].message} fontSize={14} tokenMap={tokenMap} />
+      </Box>
+    </Stack>
+  );
+}
+
+interface ActionLogHistoryProps {
+  visible: boolean;
+}
+
+export function ActionLogHistory({ visible }: ActionLogHistoryProps) {
+  const theme = useGameTheme();
+  const tokenMap = useTokenMap();
+  const [messages, setMessages] = useState<LogEntry[]>([]);
+  const listRef = useListRef(null);
+  const clientTime = useTimeController();
+  const [maxClock] = useEventChannelState(clientTime.maxClock);
+  const [currentClock] = useEventChannelState(clientTime.currentClock);
+
+  const dynamicRowHeight = useDynamicRowHeight({ defaultRowHeight: 40 });
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    let ignoreResponse = false;
+    clientTime.gameLogs().then((logs) => {
+      if (!ignoreResponse) {
+        setMessages(
+          logs
+            ?.map((l, i) => ({
+              message: l.message,
+              clock: l.clock,
+              endClock: logs[i + 1]?.clock ?? Number.MAX_SAFE_INTEGER,
+            }))
+            .reverse() ?? [],
+        );
+      }
+    });
+    return () => {
+      ignoreResponse = true;
+    };
+  }, [maxClock, clientTime, visible]);
+
+  // Scroll to top when visible changes from false to true
+  useEffect(() => {
+    if (visible && listRef.current) {
+      const index = messages.findIndex((m) => m.clock <= currentClock.clock && m.endClock > currentClock.clock);
+      if (index >= 0) {
+        listRef.current.scrollToRow({ index });
+      }
+    }
+  }, [visible, listRef, messages, currentClock]);
+
+  return (
+    <List<RowData>
+      listRef={listRef}
+      rowComponent={RowComponent}
+      rowCount={messages.length}
+      rowHeight={dynamicRowHeight}
+      rowProps={{ messages, tokenMap, theme }}
+    />
+  );
+}

package/src/library/components/ActionLogHistoryDisplay.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+import { GameModalDialog } from "./GameModalDialog";
+import { ActionLogHistory } from "./ActionLogHistory";
+import { useModalState } from "../hooks/useModalState";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import { useTimeState } from "../hooks/useTimeController";
+
+export function ActionLogHistoryDisplay() {
+  const modalState = useModalState();
+  const [visible, setVisible] = useEventChannelState(modalState.actionLogVisible);
+  const timeState = useTimeState();
+  useEffect(() => {
+    timeState.setAnimationState("actionLogOpen", visible);
+  }, [visible, timeState]);
+
+  return (
+    <GameModalDialog visible={visible} onClose={() => setVisible(false)} title="Log">
+      <ActionLogHistory visible={visible} />
+    </GameModalDialog>
+  );
+}

package/src/library/components/ActionLogSidebar.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { ActionLogHistory } from "./ActionLogHistory";
+
+export function ActionLogSidebar() {
+  const theme = useGameTheme();
+  return (
+    <Box
+      sx={{ position: "relative", height: `100%`, width: "350px", background: theme.actionLogDialogBackgroundColor }}
+    >
+      <Box sx={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}>
+        <ActionLogHistory visible />
+      </Box>
+    </Box>
+  );
+}

package/src/library/components/BottomBar.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode, useRef } from "react";
+import { Box, Stack } from "@mui/material";
+import { useGameTheme } from "../hooks/useGameTheme";
+import TimeControlBar from "./TimeControlBar";
+import PromptControls from "./PromptControls";
+import useSize from "@react-hook/size";
+
+function BaseBottomBar({ children }: { children: ReactNode | ReactNode[] }) {
+  const theme = useGameTheme();
+  return (
+    <Box
+      sx={{
+        overflow: "hidden",
+        position: "relative",
+        background: `${theme.barColor} linear-gradient(${theme.barGradientAngle}deg, rgba(255,255,255,${theme.barGradientPercent}) 0%, rgba(0,0,0,${theme.barGradientPercent}) 100%)`,
+        height: theme.bottomBarHeight,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export default function BottomBar() {
+  const theme = useGameTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [width] = useSize(containerRef);
+
+  const layoutSize = theme.layoutSize(width);
+
+  // Mobile: current behavior (live mode shows buttons, timeline mode shows TimeControlBar)
+  if (layoutSize === "mobile") {
+    return (
+      <BaseBottomBar>
+        <Stack ref={containerRef} direction="row" sx={{ width: "100%", height: "100%" }}>
+          <TimeControlBar />
+          <Box flex={1} />
+          <PromptControls collapsible />
+        </Stack>
+      </BaseBottomBar>
+    );
+  }
+
+  // Medium: time controls left half, prompt controls right half
+  if (layoutSize === "medium") {
+    return (
+      <BaseBottomBar>
+        <Stack ref={containerRef} direction="row" sx={{ width: "100%", height: "100%" }}>
+          <Box sx={{ width: "50%", display: "flex" }}>
+            <TimeControlBar autoLive includeGridButton />
+          </Box>
+          <Box sx={{ width: "50%", display: "flex" }}>
+            <PromptControls />
+          </Box>
+        </Stack>
+      </BaseBottomBar>
+    );
+  }
+
+  // Large: time controls left 1/3, prompt controls middle 1/3, empty right 1/3
+  return (
+    <BaseBottomBar>
+      <Stack ref={containerRef} direction="row" sx={{ width: "100%", height: "100%" }}>
+        <Box flex={1}>
+          <TimeControlBar autoLive />
+        </Box>
+        <Box sx={{ width: `${theme.actionBarWidth}px`, display: "flex" }}>
+          <PromptControls />
+        </Box>
+        <Box flex={1}>
+          <Stack direction="row" sx={{ pr: 1, pl: 1, height: "100%", width: "100%" }}>
+            <Box flex={1} />
+          </Stack>
+        </Box>
+      </Stack>
+    </BaseBottomBar>
+  );
+}

package/src/library/components/BottomBarBreak.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { useGameTheme } from "../hooks/useGameTheme";
+
+export default function BottomBarBreak() {
+  const theme = useGameTheme();
+  return (
+    <Box sx={{ width: "1px", height: "100%", pt: 1, pb: 1 }}>
+      <Box sx={{ background: theme.barBreak, width: "1px", height: "100%" }} />;
+    </Box>
+  );
+}