@pretty-chitty/core 1.1.1

package/src/library/game/Connection.ts

@@ -0,0 +1,122 @@
+import { ConnectionObject } from "./ConnectionObject";
+import { ConnectionTransport } from "./ConnectionTransport";
+
+type Message = {
+  name: string;
+  fnName: string;
+  requestId: number;
+  args: any[];
+  isResponse: boolean;
+  response: any;
+  errorMessage: string;
+};
+
+export class Connection {
+  private requestCounter = 0;
+  private actualConnectionObjects: ConnectionObject[] = [];
+  private registry: { [name: string]: object } = {};
+  private requestRegistry: { [id: number]: { resolve: (a: any) => void; reject: (message: string) => void } } = {};
+  private unprocessableMessages: Message[] = [];
+
+  constructor(public transport: ConnectionTransport) {
+    this.transport.onReceiveMessage((message) => this.handleMessage(message));
+  }
+
+  handleMessage(message: Message) {
+    const { name, fnName, requestId, args, isResponse, errorMessage, response } = message;
+
+    if (isResponse) {
+      const { resolve, reject } = this.requestRegistry[requestId];
+      if (!resolve) {
+        throw new Error("Cannot find requestId");
+      }
+
+      if (errorMessage) {
+        reject(errorMessage);
+      } else {
+        resolve(response);
+      }
+    } else {
+      const obj = this.registry[name] as any;
+      if (!obj) {
+        this.unprocessableMessages.push(message);
+        return;
+      }
+      const fn = obj[fnName];
+      if (!fn) {
+        throw new Error(`${fn} is not found`);
+      }
+
+      try {
+        fn.apply(obj, args)
+          .then((response: any) => {
+            this.transport.sendMessage({ requestId, response, isResponse: true });
+          })
+          .catch((error: Error) => {
+            console.error(error);
+            this.transport.sendMessage({ requestId, errorMessage: error.message ?? error, isResponse: true });
+          });
+      } catch (error) {
+        console.error(error);
+        this.transport.sendMessage({
+          requestId,
+          errorMessage: error instanceof Error ? error.message : error,
+          isResponse: true,
+        });
+      }
+    }
+  }
+
+  dispose() {
+    this.actualConnectionObjects.forEach((conn) => conn.dispose());
+  }
+
+  register<T extends ConnectionObject>(instance: T, name?: string) {
+    if (!name) {
+      name = Object.getPrototypeOf(instance).constructor.name;
+    }
+    if (!name) {
+      throw new Error("Name must be specified");
+    }
+
+    this.registry[name] = instance;
+    this.actualConnectionObjects.push(instance);
+
+    const messagesToProcess = this.unprocessableMessages;
+    this.unprocessableMessages = [];
+    messagesToProcess.forEach((message) => this.handleMessage(message));
+  }
+
+  // wish we didn't have to pass "name" in here... but
+  // javascript is javascript
+  get<T>(name: string): T {
+    let result = this.registry[name];
+    if (!result) {
+      result = new Proxy(
+        {},
+        {
+          get: (target, prop) => {
+            return (...args: any) => {
+              const fnName = prop;
+              const requestId = this.requestCounter++;
+              const result = new Promise((resolve, reject) => {
+                this.requestRegistry[requestId] = { resolve, reject };
+              });
+
+              this.transport.sendMessage({
+                name,
+                fnName,
+                requestId,
+                args,
+                isResponse: false,
+              });
+
+              return result;
+            };
+          },
+        },
+      );
+    }
+    return result as T;
+  }
+}

package/src/library/game/ConnectionObject.ts

@@ -0,0 +1,13 @@
+export class ConnectionObject {
+  private cbsToCallWhenDisposing: (() => void)[] = [];
+  protected register(cb: () => void) {
+    this.cbsToCallWhenDisposing.push(cb);
+    return cb;
+  }
+  protected unregister(cb: () => void) {
+    this.cbsToCallWhenDisposing = this.cbsToCallWhenDisposing.filter((c) => c !== cb);
+  }
+  public dispose() {
+    this.cbsToCallWhenDisposing.forEach((cb) => cb());
+  }
+}

package/src/library/game/ConnectionTransport.ts

@@ -0,0 +1,52 @@
+import { EventChannel } from "../utilities/EventChannel";
+
+export interface ConnectionTransport {
+  sendMessage(message: any): void;
+  onReceiveMessage(cb: (message: any) => void): () => void;
+  connected: EventChannel<boolean>;
+}
+
+const LOCAL_LATENCY_SIMULATION = 50;
+
+export class LocalConnectionTransport implements ConnectionTransport {
+  public connected = new EventChannel(false);
+  private cbs: ((message: any) => void)[] = [];
+  private connectedTransport?: LocalConnectionTransport;
+
+  private queue: (() => void)[] = [];
+
+  connect(transport: LocalConnectionTransport) {
+    this.connectedTransport = transport;
+    transport.connectedTransport = this;
+    this.connected.value = true;
+  }
+
+  sendMessage(message: any): void {
+    if (!this.connectedTransport) {
+      throw new Error("Not connected");
+    }
+
+    const copied = JSON.parse(JSON.stringify(message));
+
+    this.queue.push(() => {
+      if (this.connectedTransport) {
+        this.connectedTransport.cbs.forEach((cb) => cb(copied));
+      }
+    });
+    setTimeout(() => this.processMessageOnQueue(), Math.random() * LOCAL_LATENCY_SIMULATION);
+  }
+
+  processMessageOnQueue() {
+    const cb = this.queue.shift();
+    if (cb) {
+      cb();
+    }
+  }
+
+  onReceiveMessage(cb: (message: any) => void): () => void {
+    this.cbs.push(cb);
+    return () => {
+      this.cbs = this.cbs.filter((c) => c !== cb);
+    };
+  }
+}

package/src/library/game/DropdownChit.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import { Chit } from "./Chit";
+import TopBarDropdown from "../components/TopBarDropdown";
+import { NonEditable } from "../utilities/Annotations";
+
+export abstract class DropdownChit extends Chit {
+  /** @internal */
+  @NonEditable type = "dropdown";
+
+  abstract renderLabel(playerId: string): string | ReactNode;
+  abstract renderBody(playerId: string): string | ReactNode | ReactNode[];
+
+  /** @internal */
+  render() {
+    return <TopBarDropdown label={this.renderLabel("")}>{this.renderBody("")}</TopBarDropdown>;
+  }
+}

package/src/library/game/GalleryItemChitChildrenSource.ts

@@ -0,0 +1,31 @@
+import { GalleryItem, GalleryItemSource } from "../components/GalleryViewer";
+import { chitsToGalleryItems } from "../utilities/GalleryItemConversion";
+import { Chit } from "./Chit";
+
+export class GalleryItemChitChildrenSource implements GalleryItemSource {
+  private unSub: () => void;
+
+  constructor(public backingObject: Chit) {
+    this.unSub = backingObject.onChange("deserialized", () => {
+      this.cbs.forEach((cb) => cb());
+    });
+  }
+
+  close() {
+    this.unSub();
+  }
+
+  get items(): GalleryItem[] {
+    const children = this.backingObject.children.concat();
+    children.sort((a, b) => a.createdOrder - b.createdOrder);
+    return chitsToGalleryItems(children);
+  }
+
+  private cbs: (() => void)[] = [];
+  registerUpdateHandler(cb: () => void): () => void {
+    this.cbs.push(cb);
+    return () => {
+      this.cbs = this.cbs.filter((c) => c !== cb);
+    };
+  }
+}

package/src/library/game/GalleryItemRawSource.ts

@@ -0,0 +1,15 @@
+import { GalleryItem, GalleryItemSource } from "../components/GalleryViewer";
+
+export class GalleryItemRawSource implements GalleryItemSource {
+  constructor(private galleryItems: GalleryItem[]) {}
+
+  get items() {
+    return this.galleryItems;
+  }
+
+  close() {}
+
+  registerUpdateHandler() {
+    return () => {};
+  }
+}

package/src/library/game/Game.ts

@@ -0,0 +1,55 @@
+import { Chit } from "./Chit";
+import { Turn } from "./Turn";
+import { ParameterizedCanvas } from "../utilities/ParameterizedCanvas";
+import { GameTheme } from "./GameTheme";
+import { GameButton } from "./GameButton";
+import { PlayerChit } from "./PlayerChit";
+import { RootChit } from "./RootChit";
+import { ChitRenderSpec } from "../rendering/ChitRenderSpec";
+import { TokenDefinition } from "../components/TokenizedMessage";
+
+export interface IChitLibrary<P extends PlayerChit, R extends RootChit<P>> {
+  [key: string]: new () => Chit;
+  Player: new () => P;
+  Root: new () => R;
+}
+
+export interface ICanvasLibrary {
+  [key: string]: new () => ParameterizedCanvas;
+}
+
+export interface IButtonLibrary {
+  [key: string]: new () => GameButton;
+}
+
+export type GameResult<P extends PlayerChit> = {
+  winners: P[];
+};
+
+/**
+ * Core entry point for a pretty-chitty game.  This needs to ultimately provide:
+ * - A way to generate players
+ * - A way to generate the root chit
+ * - An async `run` method to actually execute the game logic
+ * - A library of chits, buttons and canvases
+ *
+ * See documentation on {@link Turn} for more details on how to structure your game logic.
+ *
+ * @group Core Game Elements
+ */
+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;
+  tokenMap?: { [key: string]: TokenDefinition };
+
+  run(setup: Turn<GameResult<P>, P, R>, rootChit: R): Promise<GameResult<P>>;
+
+  /**
+   * Useful if you want consistent lighting and ornaments for all of your panels
+   * @param spec
+   */
+  renderDefaultRootChit?(spec: ChitRenderSpec): void;
+}

package/src/library/game/GameBagChit.ts

@@ -0,0 +1,42 @@
+import { NonEditable } from "../utilities/Annotations";
+import { Chit } from "./Chit";
+
+/**
+ * A GameBag is an infinite supply of a game component available to the game.  It's important that it allows
+ * players taking concurrent turns to all oeprate against this same bag without creating a mismatch conflict.
+ *
+ * @group Chits
+ */
+export abstract class GameBagChit<T extends Chit> extends Chit {
+  @NonEditable type = "bag";
+
+  public abstract chitGenerator(): T;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override shouldRenderChild(childChit: Chit): boolean {
+    return false;
+  }
+
+  draw(): T {
+    const chit = this.chitGenerator();
+    chit.parentFallback = this;
+    return chit;
+  }
+
+  drawMultiple(count: number): T[] {
+    const chits = [...new Array(count)].map(() =>
+      this.chitGenerator().set((c) => {
+        c.parentFallback = this;
+      }),
+    );
+    return chits;
+  }
+
+  discard(chit: T | T[]): void {
+    if (Array.isArray(chit)) {
+      chit.forEach((c) => c.removeFromParent());
+    } else {
+      chit.removeFromParent();
+    }
+  }
+}

package/src/library/game/GameButton.ts

@@ -0,0 +1,127 @@
+import { Check, Flip } from "@mui/icons-material";
+import { BottomBarButtonIcon } from "../components/BottomBarButton";
+import { ButtonPick, ChitPick, FindChit } from "./Pick";
+import { NonEditable } from "../utilities/Annotations";
+import { Chit } from "./Chit";
+import { GalleryItemSource } from "../components/GalleryViewer";
+import { GalleryItemChitChildrenSource } from "./GalleryItemChitChildrenSource";
+import { GalleryItemRawSource } from "./GalleryItemRawSource";
+import { chitsToGalleryItems } from "../utilities/GalleryItemConversion";
+
+export type ButtonCallback = () => void | Promise<void>;
+
+export class GameButton {
+  /** @internal */
+  @NonEditable type = "button";
+
+  public icon: BottomBarButtonIcon = Flip;
+  public label: string = "Flip Me";
+  public message: string | undefined;
+
+  /** @internal */
+  public canAutoResolve = true;
+
+  constructor(public cb?: ButtonCallback) {}
+
+  static pick(button: GameButton): ButtonPick {
+    const result = new ButtonPick();
+    result.messageContents = button.message;
+    result.button = button;
+    return result;
+  }
+
+  public pick(): ButtonPick {
+    return GameButton.pick(this);
+  }
+
+  public set(cb: (chit: this) => void): this {
+    cb(this);
+    return this;
+  }
+
+  /** @internal */
+  serialize(): any {
+    return {};
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  /** @internal */
+  deserialize(config: any, findChit: FindChit) {}
+}
+
+export class ToggleGalleryButton extends GameButton {
+  autoShow = true;
+
+  /** @internal */
+  parentChit?: Chit;
+
+  /** @internal */
+  galleryItemSource?: GalleryItemSource;
+
+  setParentChit(parentChit: Chit): this {
+    this.parentChit = parentChit;
+    return this;
+  }
+
+  /** @internal */
+  serialize() {
+    return {
+      parentChitId: this.parentChit?.id,
+      autoShow: this.autoShow,
+    };
+  }
+
+  /** @internal */
+  deserialize({ parentChitId, autoShow }: { parentChitId?: string; autoShow: boolean }, findChit: FindChit) {
+    if (parentChitId) {
+      this.parentChit = findChit(parentChitId);
+    }
+    this.autoShow = autoShow;
+  }
+
+  /** @internal */
+  computeItemSource(chitPick: ChitPick<any>) {
+    if (this.parentChit) {
+      this.galleryItemSource = new GalleryItemChitChildrenSource(this.parentChit);
+    } else {
+      this.galleryItemSource = new GalleryItemRawSource(chitsToGalleryItems(chitPick.chits));
+    }
+  }
+}
+
+export abstract class DynamicGameButton<T> extends GameButton {
+  private spec: T | undefined;
+
+  config(spec: T): this {
+    this.spec = spec;
+    this.process(spec);
+    return this;
+  }
+
+  abstract process(spec: T): void;
+
+  /** @internal */
+  serialize(): any {
+    if (this.spec === undefined) {
+      throw "Not configured";
+    }
+
+    return {
+      spec: this.spec,
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  /** @internal */
+  deserialize({ spec }: { spec: T }) {
+    this.spec = spec;
+    this.process(this.spec);
+  }
+}
+
+export class Confirm extends GameButton {
+  label = "Confirm";
+  icon = Check;
+  /** @internal */
+  canAutoResolve = false;
+}

package/src/library/game/GameDeckChit.ts

@@ -0,0 +1,77 @@
+import { NonEditable } from "../utilities/Annotations";
+import { Chit } from "./Chit";
+
+export type Stage<T> = {
+  type: "draw" | "discard";
+  chits: T[];
+};
+
+/**
+ * A GameDeck contains a fixed number of chits.  The deck is broken into "stages", and all draws happen from the top stage.
+ * Discards are added to a bottom stage.  If a stage is empty, the stage is removed and all other stages move up in line.
+ * If you need to draw a card from the discard stage, it becomes a primary stage and a new discard stage is created.
+ *
+ * @group Chits
+ */
+export class GameDeckChit<T extends Chit> extends Chit {
+  @NonEditable type = "deck";
+
+  public chitGenerator?: () => T;
+  public stages: Stage<T>[] = [];
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override shouldRenderChild(childChit: Chit): boolean {
+    return false;
+  }
+
+  async draw(message?: string): Promise<T | undefined> {
+    while (this.isEmpty(this.stages[0])) {
+      this.stages.shift();
+    }
+
+    const stage = this.stages[0];
+    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;
+        }
+        case "discard": {
+          stage.type = "draw";
+          return this.draw(message);
+        }
+      }
+    }
+
+    if (this.chitGenerator) {
+      return this.chitGenerator();
+    }
+  }
+
+  private isEmpty(stage?: Stage<T>) {
+    return stage?.chits.length === 0;
+  }
+
+  private findDiscardStage() {
+    if (!(this.stages[this.stages.length - 1]?.type === "discard")) {
+      this.stages.push({ type: "discard", chits: [] });
+    }
+    return this.stages[this.stages.length - 1];
+  }
+
+  discard(chit: T | T[]) {
+    if (Array.isArray(chit)) {
+      chit.forEach((chit) => this.orderedChildren.add(chit));
+      const stage = this.findDiscardStage();
+      stage.chits = stage.chits.concat(chit);
+    } else {
+      this.orderedChildren.add(chit);
+      this.findDiscardStage().chits.push(chit);
+    }
+  }
+
+  // TODO: add functions stackTop(shuffled), stackBottom(shuffled),
+}

package/src/library/game/GameTheme.ts

@@ -0,0 +1,122 @@
+import Color from "color";
+
+/**
+ * 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
+ * is controlled here while the default chitHighlightColor is set here, but can be overridden per chit.
+ *
+ * Highly recommend using `GameTheme.withDefaults(primaryColor, highlightColor, textColor)` to
+ * generate a base theme and then override what you need from there.
+ *
+ * @group Core Game Elements
+ */
+export class GameTheme {
+  public backgroundColor = "#0f0119";
+
+  public spacing = 8;
+  public bottomBarHeight = 80;
+  public topBarHeight = 40;
+  public barColor = "#1c092c";
+  public barGradientPercent = 0.05;
+  public barGradientAngle = 110;
+
+  public backgroundGradientPercent = 0.2;
+  public backgroundGradientAngle = 150;
+
+  public actionBarColor = "#3a1957";
+  public actionBarAnimationDuration = 0.3;
+  public actionBarContextColor = "#3a1957";
+  public actionBarContextAnimationDuration = 0.3;
+  public actionBarContextShadow = "rgba(0,0,0,0.2)";
+
+  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 panelSlotColor = "#858b99";
+  public panelSlotSelectedColor = "#66d5c1";
+  public fullResetColor = "#66d5c1";
+  public barTopDropdownColor = "#1c092c";
+  public barTopLineColor = "rgba(255,255,255,0.1)";
+
+  public endGameBackgroundColor = "#1c092c";
+  public endGameTextColor = "rgba(255,255,255,1)";
+
+  public chitHighlightColor = "#66d5c1";
+  public chitOutlineWidth = 3;
+  public chitOutlineStrength = 0.75;
+
+  public panelSelectionCutoutBackground = "#ffffff";
+  public panelSelectionCutoutSelected = "#66d5c1";
+
+  public dialogBackgroundColor = "rgba(0,0,0,0.5)";
+  public dialogForegroundColor = "#ffffff";
+  public dialogFontSize = 14;
+
+  public sparkForegroundColor = "#222";
+  public sparkDuration = 200;
+  public sparkBorderWidth = 4;
+  public sparkPadding = 2;
+  public sparkBorderColor = "rgba(0,0,0,0.3)";
+  public sparkFlashColor = "#0ff";
+  public sparkSize = 20;
+  public sparkFontSize = 12;
+  public topBarDropShadowColor = "rgba(0,0,0,0.7)";
+  public topBarPlayerDropShadowColor = "rgba(0,0,0,0.2)";
+
+  public galleryItemWidth = 150;
+  public galleryItemHeight: number | undefined;
+  public galleryItemSpacing = 20;
+
+  public gallerySummaryBackgroundColor = "#000000";
+  public gallerySummaryBackgroundOpacity = 0.7;
+
+  public actionLogBackgroundColor = "rgba(255,255,255,0.05)";
+  public actionLogDialogBackgroundColor = "#000000";
+  public actionLogDialogHighlightBackgroundColor = "rgba(255,255,255,0.3)";
+  public actionLogTextColor = "#ffffff";
+  public actionBarWidth = 600;
+  public actionBarLinesToShow = 2;
+
+  /** Reference to .png or .jpg file to show as box art in advertising the game */
+  public boxArt = "";
+  /** Reference to .png or .jpg file to show as a screenshot in advertising the game */
+  public screenshot = "";
+
+  static withDefaults(primaryColor: string, highlight: string, textColor: string = "#ffffff") {
+    const result = new GameTheme();
+    result.chitHighlightColor = highlight;
+    result.backgroundColor = Color(primaryColor).darken(0.5).hex();
+    result.barColor = primaryColor;
+    result.actionBarColor = Color(primaryColor).mix(Color(highlight), 0.4).hex();
+    result.actionBarContextColor = primaryColor;
+    result.fullResetColor = highlight;
+    result.barHighlightTextColor = highlight;
+    result.barTopDropdownColor = Color(primaryColor).mix(Color(highlight), 0.1).alpha(0.9).hexa();
+    result.barTextHighlightColor = highlight;
+
+    result.endGameBackgroundColor = result.barTopDropdownColor;
+
+    result.barTextColor = Color(textColor).alpha(0.9).hexa();
+    result.barTextHighlightColor = Color(textColor).mix(Color(highlight), 0.5).alpha(0.9).hexa();
+    result.barBreak = Color(textColor).alpha(0.3).hexa();
+    result.barActiveTextColor = Color(textColor).alpha(0.9).hexa();
+    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;
+
+    return result;
+  }
+
+  layoutSize(width: number): "large" | "medium" | "mobile" {
+    return width >= this.actionBarWidth * 2 ? "large" : width >= this.actionBarWidth * 1.3 ? "medium" : "mobile";
+  }
+}