@pretty-chitty/core 1.1.2 → 1.2.1

package/src/library/game/serverTransport/ServerTime.ts

@@ -36,7 +36,7 @@ export class ServerTime<P extends PlayerChit, R extends RootChit<P>> extends Con
   }
 
   private stateCounter = 0;
-  private stateLookups: { [chitId: string]: number } = {};
+  private stateLookups: { [chitState: string]: number } = {};
   async serializeDelta(to: number) {
     if (this.match.turn.value) {
       const result = this.match.turn.value.serialize(this.playerId, to);
@@ -46,7 +46,7 @@ export class ServerTime<P extends PlayerChit, R extends RootChit<P>> extends Con
       Object.entries(result.chits).forEach(([key, value]: [string, string]) => {
         let state = this.stateLookups[value];
         if (state === undefined) {
-          state = this.stateLookups[key] = ++this.stateCounter;
+          state = this.stateLookups[value] = ++this.stateCounter;
           newStates[this.stateCounter] = Chit.fixVisibility(value, this.playerId);
         }
         chitIdToStateCounter[key] = state;

package/src/library/hooks/useButtonGalleriesOptions.tsx

@@ -0,0 +1,9 @@
+import useLocalStorageState from "use-local-storage-state";
+
+type GalleryDisplayMode = "inline" | "modal";
+
+export function useButtonGalleriesOptions() {
+  return useLocalStorageState<GalleryDisplayMode>("galleryFullScreen", {
+    defaultValue: "inline",
+  });
+}

package/src/library/hooks/useEventChannelState.ts

@@ -5,7 +5,7 @@ export function useEventChannelState<T>(e: EventChannel<T>): [T, (a: T) => void]
   const [v, setV] = useState<T>(e.value);
 
   useEffect(() => {
-    // calling explicitly here saves a `nextTick` scheduling and fixes the problem where a value
+    // calling explicitly here saves a `queueMicrotask` scheduling and fixes the problem where a value
     // changes between when this is invoked and when useEffect is invoked.
     setV(e.value);
     e.on(setV, false);

package/src/library/hooks/useLoadingStates.tsx

@@ -0,0 +1,55 @@
+import React, { useContext, createContext, ReactNode } from "react";
+
+export type LoadingStatesCallback = (panelsCreated: number, panelsLoaded: number) => void;
+
+export class LoadingStates {
+  private cbs: LoadingStatesCallback[] = [];
+  private loadingMap: { [id: string]: boolean } = {};
+  private errored = false;
+
+  setLoading(key: string, isLoading: boolean) {
+    if (this.loadingMap[key] !== isLoading) {
+      this.loadingMap[key] = isLoading;
+      this.notify();
+    }
+  }
+
+  markError() {
+    this.errored = true;
+    this.notify();
+  }
+
+  public onChange(cb: LoadingStatesCallback): () => void {
+    this.cbs.push(cb);
+    setTimeout(() => this.notify(), 0);
+    return () => {
+      this.cbs = this.cbs.filter((c) => c !== cb);
+    };
+  }
+
+  private notify() {
+    if (!this.errored) {
+      const values = Object.values(this.loadingMap);
+      const loaded = values.filter((v) => !v);
+      this.cbs.forEach((cb) => cb(values.length, loaded.length));
+    } else {
+      this.cbs.forEach((cb) => cb(1, 1));
+    }
+  }
+}
+
+const LoadingStateContext = createContext<LoadingStates>(new LoadingStates());
+
+export function useLoadingState(): LoadingStates {
+  return useContext(LoadingStateContext);
+}
+
+export function LoadingStateProvider({
+  children,
+  loadingStates,
+}: {
+  children: ReactNode;
+  loadingStates: LoadingStates;
+}) {
+  return <LoadingStateContext.Provider value={loadingStates}>{children}</LoadingStateContext.Provider>;
+}

package/src/library/hooks/useModalState.tsx

@@ -8,6 +8,6 @@ export function useModalState(): ModalState {
   return result;
 }
 
-export function ModalProvider({ children }: { children: ReactNode }) {
-  return <ModalContext.Provider value={new ModalState()}>{children}</ModalContext.Provider>;
+export function ModalProvider({ children, modalState }: { modalState: ModalState; children: ReactNode }) {
+  return <ModalContext.Provider value={modalState}>{children}</ModalContext.Provider>;
 }

package/src/library/hooks/usePanelPositioning.tsx

@@ -7,7 +7,6 @@ export interface ViewerPosition {
   w: number;
   h: number;
   paused: boolean;
-  refContainer: React.RefObject<HTMLElement> | null;
   front: boolean;
   panCallback?: (direction: "left" | "right") => void;
   visible: boolean; // For MultiPanel sliding animations

package/src/library/index.ts

@@ -1,5 +1,7 @@
 /** @group Core Game Elements */
 export type { Game } from "./game/Game";
+/** @group Core Game Elements */
+export type { GameMetaData } from "./game/GameMetaData";
 
 // NOTE: must be before Turn! or circular dependency!
 /** @group Chits */
@@ -29,7 +31,9 @@ export { DiceChit } from "./utilities/Dice";
 /** @group Chit Annotations */
 export { OrderedOutlet } from "./game/OrderedOutlet";
 /** @group Chit Annotations */
-export { ChildOutlet, NonEditable, Ordered } from "./utilities/Annotations";
+export { ChildOutlet, NonEditable, Ordered, Selectable } from "./utilities/Annotations";
+/** @group Chit Annotations */
+export type { SelectableChoice, SelectableConfig, SelectablePropertyInfo } from "./utilities/Annotations";
 
 /** @group Buttons */
 export { GameButton, DynamicGameButton, ToggleGalleryButton } from "./game/GameButton";
@@ -57,6 +61,8 @@ export { Splay } from "./rendering/Splay";
 /** @group Utilities */
 export { extrudeSVGToGeometry } from "./utilities/SvgExtruder";
 /** @group Utilities */
+export { loadGLB } from "./utilities/GlbLoader";
+/** @group Utilities */
 export { CardMesh } from "./utilities/CardMesh";
 
 //
@@ -76,10 +82,24 @@ export type { Stage } from "./game/GameDeckChit";
 export { PlayerInfo } from "./game/PlayerInfo";
 /** @group Supporting Types */
 export type { IPlayerInfo } from "./game/PlayerInfo";
+/** @internal */
 /** @group Supporting Types */
 export { MatchViewer } from "./components/MatchViewer";
+/** @internal */
+/** @group Supporting Types */
+export { DemoWrapper } from "./components/DemoWrapper";
+/** @internal */
+/** @group Supporting Types */
+export { Match } from "./game/Match";
+/** @internal */
+/** @group Supporting Types */
+export { Connection } from "./game/Connection";
+/** @internal */
 /** @group Supporting Types */
 export { ClientTrustMatchViewer } from "./components/ClientTrustMatchViewer";
+/** @internal */
+/** @group Supporting Types */
+export { ServerTrustMatchViewer } from "./components/ServerTrustMatchViewer";
 /** @group Supporting Types */
 export type { BottomBarButtonIcon } from "./components/BottomBarButton";
 /** @group Supporting Types */

package/src/library/rendering/CameraWrapperPerspective.ts

@@ -119,7 +119,7 @@ export class CameraWrapperPerspective {
     this.rotationTween.stop();
     this.nearFarTween.stop();
     this.camera.updateProjectionMatrix();
-    this.adjust(this.bbox);
+    this.adjust(this.bbox, true);
   }
 
   public get zoom() {
@@ -583,17 +583,15 @@ export class CameraWrapperPerspective {
 
       // Always tween near/far if they differ, even slightly
       if (nearFarDistance > 0.001) {
-        this.nearFarTween = this.chit.createTween(
-          { near: currentNear, far: currentFar },
-          (tween) =>
-            tween
-              .to({ near: optimalPlanes.near, far: optimalPlanes.far }, duration)
-              .easing(Easing.Quadratic.InOut)
-              .onUpdate((obj) => {
-                this.camera.near = obj.near;
-                this.camera.far = obj.far;
-                this.camera.updateProjectionMatrix();
-              }),
+        this.nearFarTween = this.chit.createTween({ near: currentNear, far: currentFar }, (tween) =>
+          tween
+            .to({ near: optimalPlanes.near, far: optimalPlanes.far }, duration)
+            .easing(Easing.Quadratic.InOut)
+            .onUpdate((obj) => {
+              this.camera.near = obj.near;
+              this.camera.far = obj.far;
+              this.camera.updateProjectionMatrix();
+            }),
         );
       } else if (nearFarDistance > 0) {
         // If difference is tiny, just set immediately

package/src/library/rendering/ChitGalleryItemInstance.ts

@@ -20,8 +20,10 @@ export class ChitGalleryItemInstance implements GalleryItem {
 
   originalSummary?: string;
   summary?: string;
+  shortSummary?: string;
   summaryIconMap?: IconMap;
   summaryRenderingOptions?: RichTextRenderOptionsParameters;
+  shortSummaryRenderingOptions?: RichTextRenderOptionsParameters;
 
   private sceneWrapper: SceneWrapper | undefined;
 

package/src/library/rendering/ChitRenderInstance.ts

@@ -2,16 +2,12 @@ import {
   Box3,
   BoxGeometry,
   Euler,
-  FrontSide,
   Group,
   Mesh,
   MeshBasicMaterial,
-  MeshPhongMaterial,
   Plane,
-  PlaneGeometry,
   Quaternion,
   Raycaster,
-  Shape,
   Vector2,
   Vector3,
   Color as ThreeColor,
@@ -20,12 +16,9 @@ import { Chit } from "../game/Chit";
 import { ChitRenderSpec, OwnerOriginPosition } from "./ChitRenderSpec";
 import { Easing, Tween, Group as TweenGroup } from "@tweenjs/tween.js";
 import { RootChitRenderInstance } from "./RootChitRenderInstance";
-import { OutlineCanvas } from "../utilities/OutlineCanvas";
-import { outlineGeometry } from "../utilities/OutlineGeometry";
 import { fixBbox } from "../utilities/BboxUtils";
 import { ChitGalleryItemInstance } from "./ChitGalleryItemInstance";
 import Color from "color";
-import nextTick from "next-tick";
 
 const LINE_COLOR = new MeshBasicMaterial({ color: 0xff0000, wireframe: true, wireframeLinewidth: 2 });
 const CLICK_LINE_COLOR = new MeshBasicMaterial({ color: 0xffff00, wireframe: true, wireframeLinewidth: 2 });
@@ -44,6 +37,11 @@ interface PointZ {
   z: number;
 }
 
+export type DragHandler = {
+  duringDrag: (dx: number, dy: number) => void;
+  finishDrag: () => void;
+};
+
 class DestroyedError extends Error {}
 
 export class ChitRenderInstance {
@@ -55,6 +53,7 @@ export class ChitRenderInstance {
 
   // threejs info
   public group = new Group(); // group storing the visible meshes.  Will tween
+  protected targetAnchorPoints = new Map<OwnerOriginPosition | string, Vector3>();
   protected anchorPoints = new Map<OwnerOriginPosition | string, Group>();
 
   protected sizeX = 0;
@@ -337,13 +336,23 @@ export class ChitRenderInstance {
     return coordinates;
   }
 
+  public targetAnchorPoint(ownerPosition: OwnerOriginPosition | string): Vector3 {
+    let result = this.targetAnchorPoints.get(ownerPosition);
+    if (!result) {
+      result = new Vector3();
+      this.updateAnchorPosition(result, ownerPosition);
+      this.targetAnchorPoints.set(ownerPosition, result);
+    }
+    return result;
+  }
+
   public anchor(ownerPosition: OwnerOriginPosition | string): Group {
     let result = this.anchorPoints.get(ownerPosition);
     if (!result) {
       result = new Group();
-      this.updateGroupPosition(result, ownerPosition);
       this.group.add(result);
       this.anchorPoints.set(ownerPosition, result);
+      this.updateGroupPosition(ownerPosition, result);
     }
     return result;
   }
@@ -352,60 +361,66 @@ export class ChitRenderInstance {
     let result = this.bboxAnchorPoints.get(ownerPosition);
     if (!result) {
       result = new Group();
-      this.updateGroupPosition(result, ownerPosition);
       this.bboxGroup.add(result);
       this.bboxAnchorPoints.set(ownerPosition, result);
+      this.updateGroupPosition(ownerPosition, result);
     }
     return result;
   }
 
+  protected updateGroupPosition(key: OwnerOriginPosition | string, group: Group) {
+    const vector = this.targetAnchorPoint(key);
+    group.position.set(vector.x, vector.y, vector.z + this.sizeZ / 2 + (this.renderSpec?.childrenOffsetZ ?? 0));
+  }
+
   protected setOutletPosition(positionKey: string, position: Vector3) {
-    this.anchor(positionKey).position.set(position.x, position.y, position.z);
-    this.bboxAnchor(positionKey).position.set(position.x, position.y, position.z);
+    this.targetAnchorPoint(positionKey).copy(position);
+    this.updateGroupPosition(positionKey, this.anchor(positionKey));
+    this.updateGroupPosition(positionKey, this.bboxAnchor(positionKey));
   }
 
-  protected updateGroupPosition(group: Group, position: OwnerOriginPosition | string) {
-    const z = this.sizeZ / 2 + (this.renderSpec?.childrenOffsetZ ?? 0);
+  protected updateAnchorPosition(vector: Vector3, position: OwnerOriginPosition | string) {
+    const z = 0;
     switch (position) {
       case OwnerOriginPosition.TopLeft: {
-        group.position.set(-this.sizeX / 2, this.sizeY / 2, z);
+        vector.set(-this.sizeX / 2, this.sizeY / 2, z);
         break;
       }
       case OwnerOriginPosition.TopCenter: {
-        group.position.set(0, this.sizeY / 2, z);
+        vector.set(0, this.sizeY / 2, z);
         break;
       }
       case OwnerOriginPosition.TopRight: {
-        group.position.set(this.sizeX / 2, this.sizeY / 2, z);
+        vector.set(this.sizeX / 2, this.sizeY / 2, z);
         break;
       }
       case OwnerOriginPosition.MiddleLeft: {
-        group.position.set(-this.sizeX / 2, 0, z);
+        vector.set(-this.sizeX / 2, 0, z);
         break;
       }
       case OwnerOriginPosition.MiddleCenter: {
-        group.position.set(0, 0, z);
+        vector.set(0, 0, z);
         break;
       }
       case OwnerOriginPosition.MiddleRight: {
-        group.position.set(this.sizeX / 2, 0, z);
+        vector.set(this.sizeX / 2, 0, z);
         break;
       }
       case OwnerOriginPosition.BottomLeft: {
-        group.position.set(-this.sizeX / 2, -this.sizeY / 2, z);
+        vector.set(-this.sizeX / 2, -this.sizeY / 2, z);
         break;
       }
       case OwnerOriginPosition.BottomCenter: {
-        group.position.set(0, -this.sizeY / 2, z);
+        vector.set(0, -this.sizeY / 2, z);
         break;
       }
       case OwnerOriginPosition.BottomRight: {
-        group.position.set(this.sizeX / 2, -this.sizeY / 2, z);
+        vector.set(this.sizeX / 2, -this.sizeY / 2, z);
         break;
       }
       // named strings --- they will reset the position correctly later (or not if they aren't set and then this will be correct)
       default: {
-        group.position.set(0, 0, z);
+        vector.set(0, 0, z);
         break;
       }
     }
@@ -418,9 +433,11 @@ export class ChitRenderInstance {
     item.preferredHeight = this.renderSpec?.galleryPreferredHeight;
     item.preferredWidth = this.renderSpec?.galleryPreferredWidth;
     item.summary = this.renderSpec?.summary;
+    item.shortSummary = this.renderSpec?.shortSummary;
     item.originalSummary = item.summary;
     item.summaryIconMap = this.renderSpec?.summaryIconMap;
     item.summaryRenderingOptions = this.renderSpec?.summaryRenderingOptions;
+    item.shortSummaryRenderingOptions = this.renderSpec?.shortSummaryRenderingOptions;
 
     if (this._galleryItem === item) {
       return;
@@ -539,7 +556,76 @@ export class ChitRenderInstance {
   public outlineContext?: ChitRenderInstance;
 
   public hasExplicitOnClick() {
-    return this.chit.onClick && !this.renderSpec?.isShowingChildrenAsGallery;
+    return (
+      (this.chit.onClick || this.chit.onDrag || this.chit.isDropTarget) && !this.renderSpec?.isShowingChildrenAsGallery
+    );
+  }
+
+  public executeDrag(x: number, y: number) {
+    const root = this.rootRenderInstance;
+    const dragPoint = root.attemptToFindPlaneZ0OfCanvasPoints(x, y) ?? new Vector3(0, 0, 0);
+    const startPosition = this.group.position.clone();
+    if (!this.chit.dropTargets) {
+      throw "Must have drop targets";
+    }
+
+    const startWorldPosition = this.bboxGroup.getWorldPosition(new Vector3());
+    const targets: { chit: Chit; distance: Vector3 }[] = [];
+    this.chit.dropTargets.map((target) => {
+      if (target.renderInstance && target !== this.chit) {
+        const position = target.renderInstance.bboxGroup.getWorldPosition(new Vector3());
+        targets.push({ chit: target, distance: position.sub(startWorldPosition) });
+      }
+    });
+    let dropTarget: Chit | undefined = undefined;
+
+    return {
+      duringDrag: (dx: number, dy: number) => {
+        x += dx;
+        y += dy;
+        const currentPoint = root.attemptToFindPlaneZ0OfCanvasPoints(x, y) ?? new Vector3(0, 0, 0);
+        const worldDx = currentPoint.x - dragPoint.x;
+        const worldDy = currentPoint.y - dragPoint.y;
+        this.group.position.set(
+          startPosition.x + worldDx,
+          startPosition.y + worldDy,
+          startPosition.z + (this.renderSpec?.dragZLiftAmount ?? 0),
+        );
+
+        let closestIndex = 0;
+        let closest = Number.MAX_SAFE_INTEGER;
+        targets.forEach(({ distance }, i) => {
+          const computed = Math.sqrt(
+            (worldDx - distance.x) * (worldDx - distance.x) + (worldDy - distance.y) * (worldDy - distance.y),
+          );
+          if (computed < closest) {
+            closest = computed;
+            closestIndex = i;
+          }
+        });
+
+        if (dropTarget && dropTarget !== targets[closestIndex].chit) {
+          dropTarget.isDropTarget = false;
+          dropTarget.renderInstance?.refresh();
+        }
+
+        dropTarget = targets[closestIndex].chit;
+        dropTarget.isDropTarget = true;
+        dropTarget.renderInstance!.refresh();
+
+        root.markDirty();
+      },
+      finishDrag: () => {
+        if (dropTarget) {
+          dropTarget.isDropTarget = false;
+          dropTarget.renderInstance?.refresh();
+
+          this.chit.onDrag!(dropTarget);
+          dropTarget.add(this.chit);
+        }
+        this.refresh();
+      },
+    };
   }
 
   public fixOutline() {
@@ -611,39 +697,11 @@ export class ChitRenderInstance {
 
     const screenCoordsOfNewLocation =
       chit instanceof Vector2 ? chit : chit ? chit.screenCoordinates() : new Vector2(0, 0);
-    if (rootRenderInstance && rootRenderInstance.rootGroup && screenCoordsOfNewLocation) {
-      // find the current screen coordinates of its new home and map it to "camera space"
-      const cameraSpace = rootRenderInstance.convertScreenSpaceToCameraSpace(
+    if (screenCoordsOfNewLocation) {
+      return rootRenderInstance.attemptToFindPlaneZ0OfScreenPoints(
         screenCoordsOfNewLocation.x,
         screenCoordsOfNewLocation.y,
       );
-
-      if (!cameraSpace) {
-        return;
-      }
-
-      const scale = Math.max(Math.abs(cameraSpace.x), Math.abs(cameraSpace.y));
-      if (!Number.isFinite(scale) || scale === 0) {
-        return undefined;
-      }
-
-      let multiplier = scale > 1 ? 1 : 1 / scale;
-
-      // figure out what camera space means at Z=0
-      for (; multiplier > 0.11; multiplier *= 0.75) {
-        const raycaster = new Raycaster();
-        raycaster.setFromCamera(
-          new Vector2(cameraSpace.x * multiplier, cameraSpace.y * multiplier),
-          rootRenderInstance.camera,
-        );
-        const planeZ = new Plane(new Vector3(0, 0, 1), 0);
-        const intersection = new Vector3();
-        const intersects = raycaster.ray.intersectPlane(planeZ, intersection);
-        if (intersects) {
-          return intersects;
-        }
-      }
-      // return intersection;
     }
   }
 
@@ -729,7 +787,7 @@ export class ChitRenderInstance {
     if (this.isUsingSyntheticBbox) {
       if (!this._boundingBoxDirty) {
         this._boundingBoxDirty = true;
-        nextTick(() => {
+        queueMicrotask(() => {
           this.updateBoundingBox();
           this._boundingBoxDirty = false;
         });
@@ -799,6 +857,10 @@ export class ChitRenderInstance {
     this.centerY = this.sizeY / 2 + box3.min.y;
     this.centerZ = this.sizeZ / 2 + box3.min.z;
 
+    Object.entries(this.renderSpec.outletPositions).forEach(([key, position]) => {
+      this.targetAnchorPoint(key).copy(new Vector3(position.x, position.y, position.z));
+    });
+
     const newKey = this.positionKey(clickBox3);
     const keyChanged = newKey !== this._lastUpdateBoudingBoxKey;
     if (keyChanged) {
@@ -810,9 +872,6 @@ export class ChitRenderInstance {
         clickBox3.max.z - clickBox3.min.z,
       );
 
-      [...this.anchorPoints.entries()].forEach(([key, value]) => this.updateGroupPosition(value, key));
-      [...this.bboxAnchorPoints.entries()].forEach(([key, value]) => this.updateGroupPosition(value, key));
-
       this.fixObjectPosition();
       this.bbox.position.z = this.centerZ;
       this.bbox.position.x = this.centerX;
@@ -833,9 +892,8 @@ export class ChitRenderInstance {
       this.bboxGroup.rotation.order = "ZYX";
       this.bboxGroup.rotation.set(this.renderSpec.rotateX, this.renderSpec.rotateY, this.renderSpec.rotateZ);
 
-      Object.entries(this.renderSpec.outletPositions).forEach(([key, position]) => {
-        this.setOutletPosition(key, new Vector3(position.x, position.y, position.z));
-      });
+      [...this.anchorPoints.entries()].forEach(([key, value]) => this.updateGroupPosition(key, value));
+      [...this.bboxAnchorPoints.entries()].forEach(([key, value]) => this.updateGroupPosition(key, value));
 
       if (keyChanged) {
         this.notifyBoundingBoxChanged();

package/src/library/rendering/ChitRenderSpec.ts

@@ -58,8 +58,12 @@ export class ChitRenderSpec {
   public splay = new Splay();
 
   public summary: string | undefined;
+  public shortSummary: string | undefined;
   public summaryIconMap: IconMap | undefined;
   public summaryRenderingOptions: RichTextRenderOptionsParameters | undefined;
+  public shortSummaryRenderingOptions: RichTextRenderOptionsParameters | undefined;
+
+  public dragZLiftAmount: number = 1;
 
   /**
    * The active player that is playing this match