@pretty-chitty/core 1.1.2 → 1.2.1

package/src/library/components/PromptControls.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { ChevronRight, ChevronLeft, Replay, QuestionMark } from "@mui/icons-material";
+import { ChevronRight, ChevronLeft, Replay } from "@mui/icons-material";
 import { Box, Stack } from "@mui/material";
 import BottomBarButton from "./BottomBarButton";
 import { useGameTheme } from "../hooks/useGameTheme";
@@ -7,23 +7,64 @@ 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";
+import { useButtonGalleriesOptions } from "../hooks/useButtonGalleriesOptions";
+
+function SimpleToggle({ checked }: { checked: boolean }) {
+  const gameTheme = useGameTheme();
+  const trackWidth = 28;
+  const trackHeight = 10;
+  const thumbSize = 6;
+
+  return (
+    <Box
+      sx={{
+        width: trackWidth,
+        height: trackHeight,
+        borderRadius: trackHeight / 2,
+        backgroundColor: checked ? gameTheme.actionBarToggleSelectedColor : "rgba(0,0,0,.25)",
+        position: "relative",
+        transition: "background-color 0.2s ease",
+      }}
+    >
+      <Box
+        sx={{
+          width: thumbSize,
+          height: thumbSize,
+          borderRadius: "50%",
+          backgroundColor: gameTheme.barTextColor,
+          boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
+          position: "absolute",
+          top: (trackHeight - thumbSize) / 2,
+          left: checked ? trackWidth - thumbSize - 2 : 2,
+          transition: "left 0.2s ease",
+        }}
+      />
+    </Box>
+  );
+}
 
 function GameButtonWrapper({ button }: { button: GameButton }) {
   const modalState = useModalState();
   const [source, setSource] = useEventChannelState(modalState.gallerySource);
-
-  let highlight = false;
-  let cb = button.cb;
+  const [inlineSource, setInlineSource] = useEventChannelState(modalState.inlineGallerySource);
+  const [galleryDisplayMode] = useButtonGalleriesOptions();
 
   if (button instanceof ToggleGalleryButton) {
+    let highlight = false;
+    let cb = button.cb;
+
     if (
+      (button.galleryItemSource === inlineSource && inlineSource) ||
+      (inlineSource?.backingObject && button.galleryItemSource?.backingObject === inlineSource.backingObject)
+    ) {
+      highlight = true;
+      cb = () => setInlineSource(undefined);
+    } else if (
       (button.galleryItemSource === source && source) ||
       (source?.backingObject && button.galleryItemSource?.backingObject === source.backingObject)
     ) {
@@ -31,11 +72,23 @@ function GameButtonWrapper({ button }: { button: GameButton }) {
       cb = () => setSource(undefined);
     } else if (button.galleryItemSource) {
       const source = button.galleryItemSource;
-      cb = () => setSource(source);
+      cb = () => (galleryDisplayMode === "inline" ? setInlineSource(source) : setSource(source));
     }
+
+    return (
+      <Box sx={{ position: "relative" }}>
+        <BottomBarButton icon={button.icon} label={button.label} onClick={cb} />
+
+        <Stack direction={"row"} sx={{ fontSize: 5, zIndex: -1, position: "absolute", bottom: 4, left: 0, right: 0 }}>
+          <Box flex={1} />
+          <SimpleToggle checked={highlight} />
+          <Box flex={1} />
+        </Stack>
+      </Box>
+    );
   }
 
-  return <BottomBarButton highlight={highlight} icon={button.icon} label={button.label} onClick={cb} />;
+  return <BottomBarButton icon={button.icon} label={button.label} onClick={button.cb} />;
 }
 
 export default function PromptControls({ collapsible }: { collapsible?: boolean }) {

package/src/library/components/ServerTrustMatchViewer.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+import { Game } from "../game/Game";
+import { ConnectionProvider } from "../hooks/useConnection";
+import { GameProvider } from "../hooks/useGame";
+import { PlayerProvider } from "../hooks/usePlayer";
+import { MatchViewer } from "./MatchViewer";
+import { Connection } from "../game/Connection";
+import { ConnectionTransport } from "../game/ConnectionTransport";
+import { LoadingStateProvider, LoadingStates, LoadingStatesCallback } from "../hooks/useLoadingStates";
+
+export function ServerTrustMatchViewer({
+  playerId,
+  game,
+  transport,
+  onBack,
+  onLoadProgress,
+}: {
+  playerId: string;
+  game: Game<any, any>;
+  transport: ConnectionTransport;
+  onBack?: () => void;
+  onLoadProgress?: LoadingStatesCallback;
+}) {
+  const [loadingStates] = useState<LoadingStates>(new LoadingStates());
+  const [localConnection, setLocalConnection] = useState<Connection | undefined>();
+
+  useEffect(() => {
+    const newConnection = new Connection(transport);
+    setLocalConnection(newConnection);
+  }, [transport]);
+
+  useEffect(() => {
+    if (onLoadProgress) {
+      return loadingStates.onChange(onLoadProgress);
+    }
+  }, [loadingStates, onLoadProgress]);
+
+  if (!localConnection) {
+    return null; // loading...
+  }
+
+  return (
+    <LoadingStateProvider loadingStates={loadingStates}>
+      <GameProvider game={game}>
+        <ConnectionProvider connection={localConnection}>
+          <PlayerProvider playerId={playerId}>
+            <MatchViewer onBack={onBack} />
+          </PlayerProvider>
+        </ConnectionProvider>
+      </GameProvider>
+    </LoadingStateProvider>
+  );
+}

package/src/library/components/Viewer.tsx

@@ -13,6 +13,8 @@ import { useGameTheme } from "../hooks/useGameTheme";
 import { requestSharedAnimationFrame } from "../utilities/RequestSharedAnimationFrame";
 import PersistentCanvas from "./PersistentCanvas";
 import { useGestureContext, ViewerGestureHandlers } from "./Panel/PanelContents";
+import { useLoadingState } from "../hooks/useLoadingStates";
+import { DragHandler } from "../rendering/ChitRenderInstance";
 
 let ID_COUNTER = 1;
 
@@ -41,6 +43,7 @@ export default function Viewer({
   refContainer?: React.RefObject<HTMLElement> | null;
   enableGestures?: boolean;
 }) {
+  const loadingState = useLoadingState();
   const playerId = usePlayerId();
   const [id] = useState(`Viewer${ID_COUNTER++}`);
   const timeState = useTimeState();
@@ -50,6 +53,10 @@ export default function Viewer({
   const rendererWrapper = useWebGlRenderer();
   const theme = useGameTheme();
 
+  useEffect(() => {
+    loadingState.setLoading(id, true);
+  }, [id, loadingState]);
+
   const modalState = useModalState();
   const [chitRenderInstance, setChitRenderInstance] = useState<RootChitRenderInstance | null>(null);
 
@@ -134,6 +141,8 @@ export default function Viewer({
       return;
     }
 
+    loadingState.setLoading(id, true);
+
     const context = canvas.getContext("2d");
     if (!context) {
       return;
@@ -160,18 +169,17 @@ export default function Viewer({
           ) {
             if (!hardPaused) {
               // Clear canvas and render
-              rendererWrapper.render(
-                chitRenderInstance.sceneWrapper,
-                chitRenderInstance.camera,
-                context,
-                theme,
-              );
+              rendererWrapper.render(chitRenderInstance.sceneWrapper, chitRenderInstance.camera, context, theme);
+
+              loadingState.setLoading(id, false);
 
               // Clear snapshot after first render at new size
               const canvasEl = canvas as any;
               if (canvasEl.clearSnapshot) {
                 canvasEl.clearSnapshot();
               }
+            } else {
+              loadingState.setLoading(id, false);
             }
 
             chitRenderInstance.resetDirty();
@@ -180,6 +188,7 @@ export default function Viewer({
             }
           } else {
             timeState.setAnimationState(id, false);
+            loadingState.setLoading(id, false);
           }
         } catch (e) {
           console.error(e);
@@ -192,7 +201,18 @@ export default function Viewer({
       timeState.setAnimationState(id, false);
       cancelled = true;
     };
-  }, [id, timeState, hardPaused, rendererWrapper, chitRenderInstance, paused, actualRef, myRefContainer, theme]);
+  }, [
+    id,
+    timeState,
+    hardPaused,
+    rendererWrapper,
+    chitRenderInstance,
+    paused,
+    actualRef,
+    myRefContainer,
+    theme,
+    loadingState,
+  ]);
 
   useEffect(() => {
     if (chitRenderInstance) {
@@ -241,6 +261,7 @@ export default function Viewer({
       let pinchEndedRecently = false;
       let pinchScale = 1;
       let pinchCancelled = false;
+      let dragHandler: DragHandler | undefined;
 
       const handlers: ViewerGestureHandlers = {
         onSingleTap: (x, y, isMouse) => {
@@ -257,18 +278,28 @@ export default function Viewer({
         onLongTap: (x, y, isMouse) => {
           chitRenderInstance.handleLongClick(x, y, isMouse ? 3 : 6, isMouse ? 1.5 : 3);
         },
-        onPanStart: () => {
+        onPanStart: (x, y, isMouse) => {
           if (pinchEndedRecently) {
             cancelled = true;
             return;
           }
           cancelled = false;
+
+          const draggingChit = chitRenderInstance.handleBeginDrag(x, y, isMouse ? 3 : 6, isMouse ? 1.5 : 3);
+          if (draggingChit) {
+            dragHandler = draggingChit.renderInstance!.executeDrag(x, y);
+          }
         },
         onPan: (dx, dy, ev) => {
           if (cancelled) {
             return;
           }
 
+          if (dragHandler) {
+            dragHandler.duringDrag(dx, dy);
+            return;
+          }
+
           if (panCallback) {
             const isMouse = ev.pointerType === "mouse";
             const neededVelocity = chitRenderInstance.cameraZoom <= 1.1 ? 0.3 : isMouse ? 7.5 : 2.5;
@@ -279,21 +310,30 @@ export default function Viewer({
               return;
             }
           }
-          if (zoomCallback) {
-            const isMouse = ev.pointerType === "mouse";
-            const neededVelocity = chitRenderInstance.cameraZoom <= 1.1 ? 0.3 : isMouse ? 7.5 : 2.5;
-            if (Math.abs(ev.velocityY) > neededVelocity && ev.distance > 20 && Math.abs(ev.velocityX) < 0.2) {
-              const prev = chitRenderInstance.cameraZoom;
-              chitRenderInstance.handleZoom(0, 0, chitRenderInstance.cameraZoom <= 1 ? 0.0001 : -20, !!zoomCallback);
-              zoomCallback(chitRenderInstance.cameraZoom, prev);
-              setTimeout(() => chitRenderInstance.handleZoom(0, 0, 0, false), 100);
-              cancelled = true;
-              return;
-            }
-          }
+          // if (zoomCallback) {
+          //   const isMouse = ev.pointerType === "mouse";
+          //   const neededVelocity = chitRenderInstance.cameraZoom <= 1.1 ? 0.3 : isMouse ? 7.5 : 2.5;
+          //   if (Math.abs(ev.velocityY) > neededVelocity && ev.distance > 20 && Math.abs(ev.velocityX) < 0.2) {
+          //     const prev = chitRenderInstance.cameraZoom;
+          //     chitRenderInstance.handleZoom(0, 0, chitRenderInstance.cameraZoom <= 1 ? 0.0001 : -20, !!zoomCallback);
+          //     zoomCallback(chitRenderInstance.cameraZoom, prev);
+          //     setTimeout(() => chitRenderInstance.handleZoom(0, 0, 0, false), 100);
+          //     cancelled = true;
+          //     return;
+          //   }
+          // }
 
           chitRenderInstance.handlePan(dx, dy);
         },
+        onPanEnd: () => {
+          if (cancelled) {
+            return;
+          }
+          if (dragHandler) {
+            dragHandler.finishDrag();
+            dragHandler = undefined;
+          }
+        },
         onPinchStart: () => {
           pinchScale = chitRenderInstance.cameraZoom;
           pinchCancelled = false;

package/src/library/game/Chit.ts

@@ -1,9 +1,9 @@
 import { ChitRenderInstance } from "../rendering/ChitRenderInstance";
 import { ChitRenderSpec } from "../rendering/ChitRenderSpec";
-import { Turn } from "./Turn";
+import type { Turn } from "./Turn";
 import { FixChildOutlets, NonEditable, Ordered } from "../utilities/Annotations";
 import { ObjectWithProps } from "../utilities/ObjectWithProps";
-import { ChitPick } from "./Pick";
+import { ChitPick, DragPick, DragTarget } from "./Pick";
 import { Vector2 } from "three";
 import { OrderedOutlet } from "./OrderedOutlet";
 import { SparkChit } from "./SparkChit";
@@ -14,7 +14,18 @@ import { ImageSpec } from "../utilities/CanvasStack/CanvasOperations";
 
 export const ORDERED_CHILDREN = "orderedChildren";
 
+const EXTRA_SERIALIZATION_PROPS_ARRAY = [
+  "id",
+  "_parent",
+  "_parentOutlet",
+  "_parentOutletIndex",
+  "_parentFallback",
+  "__hiddenProps",
+];
+const EXTRA_SERIALIZATION_PROPS_SET = new Set(EXTRA_SERIALIZATION_PROPS_ARRAY);
+
 export type ChitClick = () => void;
+export type ChitDrag = (dropOn: Chit) => void;
 
 export type HiddenPropertySerializationRule = {
   fields: "all" | string[];
@@ -186,11 +197,32 @@ export class Chit extends ObjectWithProps {
     this.notifyChange("onClick");
   }
 
+  @NonEditable
+  private _onDrag?: ChitDrag;
+
+  /** @internal */
+  @NonEditable
+  public dropTargets?: Chit[];
+
+  @NonEditable
+  public isDropTarget = false;
+
+  /** @internal */
+  public set onDrag(newValue: undefined | ChitDrag) {
+    this._onDrag = newValue;
+    this.notifyChange("onClick");
+  }
+
+  /** @internal */
+  public get onDrag(): undefined | ChitDrag {
+    return this._onDrag;
+  }
+
   /**
    * Returns true if the chit is currently clickable
    */
   public get isClickable(): boolean {
-    return !!this.onClick;
+    return !!this.onClick || !!this.onDrag;
   }
 
   @NonEditable private _lockedBy?: Turn<any, any, any>;
@@ -378,7 +410,7 @@ export class Chit extends ObjectWithProps {
   }
 
   private get serializationProps() {
-    return [...this.props, "id", "_parent", "_parentOutlet", "_parentOutletIndex", "_parentFallback"];
+    return [...this.props, ...EXTRA_SERIALIZATION_PROPS_ARRAY];
   }
 
   /** @internal */
@@ -437,9 +469,13 @@ export class Chit extends ObjectWithProps {
       }
     };
 
-    this.props.forEach((key) => {
-      const value = j[key];
+    // expanded props will introduce undefined for things that used to be there but aren't
+    this.expandedPropsFromJson(j).forEach((key) => {
+      if (EXTRA_SERIALIZATION_PROPS_SET.has(key)) {
+        return;
+      }
 
+      const value = (j as any)[key];
       if (value?.___orderedOutlet) {
         (this as any)[key].deserialize(value.___orderedOutlet.map(inflateValue));
       } else {
@@ -566,6 +602,17 @@ export class Chit extends ObjectWithProps {
     return result;
   }
 
+  public static dragPick<T extends Chit>(
+    chit: T | (T | undefined | null | false)[] | OrderedOutlet<T>,
+    targets: DragTarget<any, T>[],
+  ) {
+    const result = new DragPick<T>();
+    result.chits =
+      chit instanceof OrderedOutlet ? chit.copy() : Array.isArray(chit) ? (chit.filter((c) => c) as T[]) : [chit];
+    result.dropTargets = targets;
+    return result;
+  }
+
   /** @internal */
   public static deletedIfSerialized(): string {
     return JSON.stringify({

package/src/library/game/ClientTimeState.ts

@@ -33,10 +33,14 @@ export class ClientTimeState {
   public goLive(clock: number) {
     this.live.value = true;
     this.targetClock.value = clock;
+    this.killAnimations();
+  }
+
+  public killAnimations() {
     clearTimeout(this._animationOverrideTimeout);
     this.animationSpeedOverrideMultiplier.value = 0.075;
     this._animationOverrideTimeout = setTimeout(() => {
       this.animationSpeedOverrideMultiplier.value = undefined;
-    }, 250);
+    }, 400);
   }
 }

package/src/library/game/GalleryItemChitChildrenSource.ts

@@ -5,6 +5,8 @@ import { Chit } from "./Chit";
 export class GalleryItemChitChildrenSource implements GalleryItemSource {
   private unSub: () => void;
 
+  public inlineGallerySize?: number | undefined = undefined;
+
   constructor(public backingObject: Chit) {
     this.unSub = backingObject.onChange("deserialized", () => {
       this.cbs.forEach((cb) => cb());

package/src/library/game/GalleryItemRawSource.ts

@@ -3,6 +3,8 @@ import { GalleryItem, GalleryItemSource } from "../components/GalleryViewer";
 export class GalleryItemRawSource implements GalleryItemSource {
   constructor(private galleryItems: GalleryItem[]) {}
 
+  public inlineGallerySize?: number | undefined = undefined;
+
   get items() {
     return this.galleryItems;
   }

package/src/library/game/Game.ts

@@ -7,6 +7,7 @@ import { PlayerChit } from "./PlayerChit";
 import { RootChit } from "./RootChit";
 import { ChitRenderSpec } from "../rendering/ChitRenderSpec";
 import { TokenDefinition } from "../components/TokenizedMessage";
+import { GameMetaData } from "./GameMetaData";
 
 export interface IChitLibrary<P extends PlayerChit, R extends RootChit<P>> {
   [key: string]: new () => Chit;
@@ -39,10 +40,11 @@ export type GameResult<P extends PlayerChit> = {
  */
 export interface Game<P extends PlayerChit, R extends RootChit<P>> {
   get theme(): GameTheme;
-  get name(): string;
   get chitLibrary(): IChitLibrary<P, R>;
   get canvasLibrary(): ICanvasLibrary;
   get buttonLibrary(): IButtonLibrary;
+  get metadata(): GameMetaData;
+
   tokenMap?: { [key: string]: TokenDefinition };
 
   run(setup: Turn<GameResult<P>, P, R>, rootChit: R): Promise<GameResult<P>>;

package/src/library/game/GameButton.ts

@@ -52,6 +52,8 @@ export class GameButton {
 export class ToggleGalleryButton extends GameButton {
   autoShow = true;
 
+  toggleSmallSize?: number = 125;
+
   /** @internal */
   parentChit?: Chit;
 
@@ -86,6 +88,7 @@ export class ToggleGalleryButton extends GameButton {
     } else {
       this.galleryItemSource = new GalleryItemRawSource(chitsToGalleryItems(chitPick.chits));
     }
+    this.galleryItemSource.inlineGallerySize = this.toggleSmallSize;
   }
 }
 

package/src/library/game/GameDeckChit.ts

@@ -16,6 +16,12 @@ export type Stage<T> = {
 export class GameDeckChit<T extends Chit> extends Chit {
   @NonEditable type = "deck";
 
+  /**
+   * If true, the contents of chits are shuffled as they are drawn.  This should only be used if
+   * all chits are of the same class type
+   */
+  public protectSecrets = true;
+
   public chitGenerator?: () => T;
   public stages: Stage<T>[] = [];
 
@@ -33,11 +39,32 @@ export class GameDeckChit<T extends Chit> extends Chit {
     if (stage) {
       switch (stage.type) {
         case "draw": {
-          const index = Math.floor(stage.chits.length * (await this.currentTurn.rng(message)));
-          const selected = stage.chits[index];
-          stage.chits.splice(index, 1);
-          selected.setParent();
-          return selected;
+          if (this.protectSecrets) {
+            const rngs = await this.currentTurn.takeRng(2, message);
+            const resultIndex = Math.floor(stage.chits.length * rngs());
+            const swapIndex = Math.floor(stage.chits.length * rngs());
+            const selected = stage.chits[resultIndex];
+            const swap = stage.chits[swapIndex];
+
+            if (selected.id) {
+              const selectedSerialized = selected.serialize();
+              const swapSerialized = swap.serialize();
+
+              selected.deserialize(swapSerialized, this.currentTurn.findChit);
+              swap.deserialize(selectedSerialized, this.currentTurn.findChit);
+            }
+
+            stage.chits.splice(resultIndex, 1);
+            selected.setParent();
+            return selected;
+          } else {
+            const rng = await this.currentTurn.rng();
+            const resultIndex = Math.floor(stage.chits.length * rng);
+            const selected = stage.chits[resultIndex];
+            stage.chits.splice(resultIndex, 1);
+            selected.setParent();
+            return selected;
+          }
         }
         case "discard": {
           stage.type = "draw";
@@ -51,6 +78,10 @@ export class GameDeckChit<T extends Chit> extends Chit {
     }
   }
 
+  public shuffle() {
+    this.stages = [{ type: "draw", chits: this.stages.map((stage) => stage.chits).flat() }];
+  }
+
   private isEmpty(stage?: Stage<T>) {
     return stage?.chits.length === 0;
   }

package/src/library/game/GameMetaData.ts

@@ -0,0 +1,19 @@
+export type GameMetaData = {
+  name: string;
+  description: string;
+  licenseInformation?: string;
+  implementationNotes?: string;
+  publisher?: string;
+  designer?: string;
+  artist?: string;
+
+  tutorialVideoUrl?: string;
+  rulesPdfUrl?: string;
+  purchaseUrl?: string;
+  publisherUrl?: string;
+  repositoryUrl?: string;
+  bugReportUrl?: string;
+
+  boxArt: string;
+  screenshot: string;
+};

package/src/library/game/GameTheme.ts

@@ -1,5 +1,7 @@
 import Color from "color";
 
+export const DEFAULT_FONT_FAMILY = "Quicksand, sans-serif";
+
 /**
  * Controls color scheme and layout options for all things in a pretty-chitty game.  Much of
  * this can be overridden per chit, but some cannot.  For example, the background color of the game
@@ -11,6 +13,17 @@ import Color from "color";
  * @group Core Game Elements
  */
 export class GameTheme {
+  public static defaultFontFamily = DEFAULT_FONT_FAMILY;
+
+  private _fontFamily = DEFAULT_FONT_FAMILY;
+  public get fontFamily() {
+    return this._fontFamily;
+  }
+  public set fontFamily(value: string) {
+    this._fontFamily = value;
+    GameTheme.defaultFontFamily = value;
+  }
+
   public backgroundColor = "#0f0119";
 
   public spacing = 8;
@@ -28,13 +41,14 @@ export class GameTheme {
   public actionBarContextColor = "#3a1957";
   public actionBarContextAnimationDuration = 0.3;
   public actionBarContextShadow = "rgba(0,0,0,0.2)";
+  public actionBarToggleSelectedColor = "rgba(255,255,255,0.6)";
 
   public barTextColor = "rgba(255,255,255,0.6)";
   public barTextHighlightColor = "rgba(255,255,255,0.6)";
   public barBreak = "rgba(255,255,255,0.3)";
   public barActiveTextColor = "rgba(255,255,255,0.9)";
   public barHighlightTextColor = "#66d5c1";
-  public barDisabledTextColor = "rgba(255,255,255,0.2)";
+  public barDisabledTextColor = "rgba(255,255,255,0.3)";
   public panelSlotColor = "#858b99";
   public panelSlotSelectedColor = "#66d5c1";
   public fullResetColor = "#66d5c1";
@@ -69,6 +83,8 @@ export class GameTheme {
   public galleryItemWidth = 150;
   public galleryItemHeight: number | undefined;
   public galleryItemSpacing = 20;
+  public galleryItemMinimumWidth = 75;
+  public galleryItemMinimumHeight = 50;
 
   public gallerySummaryBackgroundColor = "#000000";
   public gallerySummaryBackgroundOpacity = 0.7;
@@ -79,6 +95,9 @@ export class GameTheme {
   public actionLogTextColor = "#ffffff";
   public actionBarWidth = 600;
   public actionBarLinesToShow = 2;
+  public inlineGalleryBackgroundColor = "rgba(255,255,255,0.1)";
+  public inlineGalleryButtonBackgroundColor = "#000000";
+  public inlineGalleryButtonForegroundColor = "rgba(255,255,255,0.5)";
 
   /** Reference to .png or .jpg file to show as box art in advertising the game */
   public boxArt = "";
@@ -96,6 +115,9 @@ export class GameTheme {
     result.barHighlightTextColor = highlight;
     result.barTopDropdownColor = Color(primaryColor).mix(Color(highlight), 0.1).alpha(0.9).hexa();
     result.barTextHighlightColor = highlight;
+    result.actionBarToggleSelectedColor = primaryColor;
+
+    result.inlineGalleryButtonBackgroundColor = primaryColor;
 
     result.endGameBackgroundColor = result.barTopDropdownColor;
 
@@ -106,10 +128,6 @@ export class GameTheme {
     result.barTopLineColor = Color(textColor).alpha(0.1).hexa();
     result.endGameTextColor = Color(textColor).alpha(1).hexa();
 
-    result.barDisabledTextColor = Color(result.barColor).isLight()
-      ? Color(result.barColor).darken(0.75).hexa()
-      : Color(result.barColor).lighten(0.75).hexa();
-
     result.actionLogTextColor = result.barActiveTextColor;
     result.actionLogDialogBackgroundColor = result.backgroundColor;