@pretty-chitty/core 1.1.1

package/src/library/utilities/CardMesh.ts

@@ -0,0 +1,55 @@
+import { Group, Material, Mesh, PlaneGeometry } from "three";
+
+type CardMeshOptions = {
+  castShadow?: boolean;
+  receiveShadow?: boolean;
+  zDifference?: number;
+};
+
+export class CardMesh extends Group {
+  constructor(
+    private width: number,
+    private height: number,
+    private front: Material,
+    private back: Material,
+    private options: CardMeshOptions = {},
+  ) {
+    super();
+
+    const face1 = new PlaneGeometry(width, height);
+    this.add(new Mesh(face1, front));
+
+    const face2 = new PlaneGeometry(width, height);
+    face2.rotateY(Math.PI);
+    face2.translate(0, 0, -(options.zDifference ?? 0.05));
+    this.add(new Mesh(face2, back));
+
+    if (options.castShadow) {
+      this.children[0].castShadow = options.castShadow;
+      this.children[1].castShadow = options.castShadow;
+    }
+    if (options.receiveShadow) {
+      this.children[0].receiveShadow = options.receiveShadow;
+      this.children[1].receiveShadow = options.receiveShadow;
+    }
+  }
+
+  override clone(): this {
+    const cloned = new CardMesh(this.width, this.height, this.front, this.back, this.options);
+    cloned.position.copy(this.position);
+    cloned.rotation.copy(this.rotation);
+    cloned.scale.copy(this.scale);
+    cloned.quaternion.copy(this.quaternion);
+    cloned.matrix.copy(this.matrix);
+    cloned.matrixWorld.copy(this.matrixWorld);
+    cloned.matrixAutoUpdate = this.matrixAutoUpdate;
+    cloned.matrixWorldNeedsUpdate = this.matrixWorldNeedsUpdate;
+    cloned.layers.mask = this.layers.mask;
+    cloned.visible = this.visible;
+    cloned.castShadow = this.castShadow;
+    cloned.receiveShadow = this.receiveShadow;
+    cloned.frustumCulled = this.frustumCulled;
+    cloned.renderOrder = this.renderOrder;
+    return cloned as this;
+  }
+}

package/src/library/utilities/Dice.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import { BoxGeometry, Mesh, MeshPhongMaterial } from "three";
+import { Chit } from "../game/Chit";
+import { ChitRenderSpec } from "../rendering/ChitRenderSpec";
+import { Color, Horizontal, Layered, Pad, RoundedRect, Vertical } from "./CanvasStack/ReactCanvas";
+import { ParameterizedCanvas } from "./ParameterizedCanvas";
+
+function Shadow({ start, total }: { start: number; total: number }) {
+  if (start === total) {
+    return null;
+  }
+  const hex = `#${Math.ceil((1 - start / total) * 200)
+    .toString(16)
+    .padStart(2, "0")
+    .repeat(3)}`;
+  return (
+    <Layered>
+      <Color hex={hex} />
+      <Pad amount={1}>
+        <Shadow start={start + 1} total={total} />
+      </Pad>
+    </Layered>
+  );
+}
+
+export class DiceFace extends ParameterizedCanvas {
+  value: number = 1;
+  backgroundColor: string = "#ffffff";
+  foregroundColor: string = "#000000";
+  shadow = false;
+  width = 100;
+  height = 100;
+  pipPadding = 3;
+
+  pips() {
+    const pips: boolean[][] = [
+      [false, false, false],
+      [false, false, false],
+      [false, false, false],
+    ];
+    switch (this.value) {
+      case 1: {
+        pips[1][1] = true;
+        break;
+      }
+      case 2: {
+        pips[0][2] = true;
+        pips[2][0] = true;
+        break;
+      }
+      case 3: {
+        pips[0][0] = true;
+        pips[1][1] = true;
+        pips[2][2] = true;
+        break;
+      }
+      case 4: {
+        pips[0][0] = true;
+        pips[2][0] = true;
+        pips[0][2] = true;
+        pips[2][2] = true;
+        break;
+      }
+      case 5: {
+        pips[1][1] = true;
+        pips[0][0] = true;
+        pips[2][0] = true;
+        pips[0][2] = true;
+        pips[2][2] = true;
+        break;
+      }
+      case 6: {
+        pips[0][0] = true;
+        pips[0][2] = true;
+        pips[1][0] = true;
+        pips[1][2] = true;
+        pips[2][0] = true;
+        pips[2][2] = true;
+        break;
+      }
+    }
+    return pips;
+  }
+
+  render() {
+    const pips = this.pips();
+    return (
+      <Layered>
+        {this.shadow ? <Shadow start={1} total={this.shadow ? 6 : 1} /> : <Color hex={this.backgroundColor} />}
+
+        <Pad amount={this.pipPadding}>
+          <Vertical>
+            {pips.map((row, i) => (
+              <Horizontal key={i}>
+                {row.map((isPip, i) => (
+                  <Pad amount={this.pipPadding} key={i}>
+                    {isPip && (
+                      <RoundedRect radius={this.width}>
+                        <Color hex={this.shadow ? "#ffffff" : this.foregroundColor} />
+                      </RoundedRect>
+                    )}
+                  </Pad>
+                ))}
+              </Horizontal>
+            ))}
+          </Vertical>
+        </Pad>
+      </Layered>
+    );
+  }
+}
+
+export class DiceChit extends Chit {
+  size = 1;
+  value: number = 1;
+  pipPadding = 3;
+  dpi = 100;
+  backgroundColor: string = "#ffffff";
+  foregroundColor: string = "#000000";
+
+  public override render(spec: ChitRenderSpec): void {
+    const boxGeometry = new BoxGeometry(this.size, this.size, this.size);
+    const FACE_ORDER = [2, 5, 3, 4, 1, 6];
+    spec.object = new Mesh(
+      boxGeometry,
+      FACE_ORDER.map((i) => {
+        const texture = new DiceFace()
+          .set((d) => {
+            d.width = this.dpi;
+            d.height = this.dpi;
+            d.backgroundColor = this.backgroundColor;
+            d.foregroundColor = this.foregroundColor;
+            d.value = i;
+            d.pipPadding = this.pipPadding;
+          })
+          .get().texture;
+        const bump = new DiceFace()
+          .set((d) => {
+            d.width = this.dpi;
+            d.height = this.dpi;
+            d.shadow = true;
+            d.value = i;
+            d.pipPadding = this.pipPadding;
+          })
+          .get().texture;
+
+        return new MeshPhongMaterial({
+          map: texture,
+          bumpMap: bump,
+          bumpScale: -5,
+        });
+      }),
+    );
+    spec.object.castShadow = true;
+
+    switch (this.value) {
+      case 1:
+        break;
+      case 2:
+        spec.rotateY = -Math.PI / 2;
+        break;
+      case 3:
+        spec.rotateX = Math.PI / 2;
+        break;
+      case 4:
+        spec.rotateX = Math.PI / 2;
+        spec.rotateY = -Math.PI;
+        break;
+      case 5:
+        spec.rotateY = Math.PI / 2;
+        spec.rotateX = Math.PI;
+        break;
+      case 6:
+        spec.rotateY = Math.PI;
+        break;
+    }
+
+    spec.galleryRotateX = spec.rotateX;
+    spec.galleryRotateY = spec.rotateY;
+    spec.galleryRotateZ = spec.rotateZ;
+    spec.galleryPreferredWidth = 65;
+  }
+}

package/src/library/utilities/EventChannel.ts

@@ -0,0 +1,52 @@
+import nextTick from "next-tick";
+
+export class EventChannel<T> {
+  private cbs: ((t: T) => void)[] = [];
+  public on(cb: (t: T) => void, notifyImmediate = true) {
+    this.cbs.push(cb);
+
+    // it's important to stash the original value otherwise we might the same value 2x in a row to the channel
+    const valueToPush = this._value;
+    if (notifyImmediate) {
+      nextTick(() => cb(valueToPush));
+    }
+
+    return () => {
+      this.cbs = this.cbs.filter((c) => c !== cb);
+    };
+  }
+
+  private _triggerTimeout = setTimeout(() => {}, 0);
+  public trigger(force = false) {
+    clearTimeout(this._triggerTimeout);
+    if (force || this.latency === 0) {
+      nextTick(() => {
+        this.cbs.forEach((cb) => cb(this._value));
+      });
+    } else {
+      this._triggerTimeout = setTimeout(() => {
+        this.cbs.forEach((cb) => cb(this._value));
+      });
+    }
+  }
+
+  public force(newValue: T) {
+    this._value = newValue;
+    this.trigger(true);
+  }
+
+  public get value(): T {
+    return this._value;
+  }
+  public set value(newValue: T) {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this.trigger();
+    }
+  }
+
+  constructor(
+    private _value: T,
+    private latency = 0,
+  ) {}
+}

package/src/library/utilities/GalleryItemConversion.ts

@@ -0,0 +1,30 @@
+import { Chit } from "../game/Chit";
+import { ChitGalleryItemInstance } from "../rendering/ChitGalleryItemInstance";
+
+export function chitsToGalleryItems(chits: Chit[]) {
+  const result: ChitGalleryItemInstance[] = [];
+  const resultChits: Chit[] = [];
+  const dupeCounts: { [id: string]: number } = {};
+  chits.forEach((chit) => {
+    const dupe = resultChits.find((c) => c.functionallyIdentical(chit));
+    if (dupe && dupe.id) {
+      dupeCounts[dupe.id] = (dupeCounts[dupe.id] || 1) + 1;
+      return;
+    }
+    resultChits.push(chit);
+    if (chit.renderInstance?.currentGalleryItem) {
+      result.push(chit.renderInstance?.currentGalleryItem);
+    } else {
+      result.push(new ChitGalleryItemInstance(chit));
+    }
+  });
+
+  for (const [id, count] of Object.entries(dupeCounts)) {
+    const dupe = result.find((item) => item.chit.id === id);
+    if (dupe) {
+      dupe.summary = `${count}x\n${dupe.originalSummary || ""}`;
+    }
+  }
+
+  return result;
+}

package/src/library/utilities/IUpdatingCanvas.ts

@@ -0,0 +1,14 @@
+import { Material, Texture } from "three";
+
+export interface IUpdatingCanvas {
+  get width(): number;
+  get height(): number;
+  get canvas(): HTMLCanvasElement | undefined;
+  dispose(): void;
+  get createdAt(): number;
+  get hasBuiltTexture(): boolean;
+  onUpdate(cb: () => void): () => void;
+  get texture(): Texture;
+  get material(): Material;
+  get outlets(): { [id: string]: { x: number; y: number } };
+}