@pretty-chitty/core 1.1.1

package/src/library/rendering/ChitRenderSpec.ts

@@ -0,0 +1,213 @@
+import React from "react";
+import { Box3, Group, Mesh, MeshPhongMaterial, Object3D, PlaneGeometry, Vector3 } from "three";
+import { CameraSpec } from "./CameraSpec";
+import { Chit } from "../game/Chit";
+import { LightSpec } from "./LightSpec";
+import { HighlightSpec } from "./HighlightSpec";
+import { Splay } from "./Splay";
+import { OrderedOutlet } from "../game/OrderedOutlet";
+import { ParameterizedCanvas } from "../utilities/ParameterizedCanvas";
+import { IconMap } from "../utilities/CanvasStack/CanvasOperations";
+import { SplayCounter, SplayCounterOptions } from "./SplayCounter";
+import { fixBbox } from "../utilities/BboxUtils";
+import { GalleryItemChitChildrenSource } from "../game/GalleryItemChitChildrenSource";
+import { IUpdatingCanvas } from "../utilities/IUpdatingCanvas";
+import { RichTextRenderOptionsParameters } from "../utilities/CanvasStack/RichTextRenderer";
+
+// prettier-ignore
+export enum OwnerOriginPosition {
+  Default,
+  TopLeft, TopCenter, TopRight,
+  MiddleLeft, MiddleCenter, MiddleRight,
+  BottomLeft, BottomCenter, BottomRight,
+}
+
+export class ChitRenderSpec {
+  public offsetSpeed: number = 250; // speed it takes to move "1" unit
+  public maxDistanceForSpeed: number = 3; // The max "distance" to measure speed.  AKA a distance of length 4 will take as long as a distance of length 3.
+  public offsetX: number = 0;
+  public offsetY: number = 0;
+  public offsetZ: number = 0;
+  public zLiftRatio: number = 0.01;
+
+  public childrenOffsetZ: number = 0.025;
+
+  public rotationSpeed: number = 2000; // time it takes to do a 360 degree spin
+  public rotateX: number = 0;
+  public rotateY: number = 0;
+  public rotateZ: number = 0;
+  public zLiftRotationMultiplier = 1;
+
+  public galleryRotateX: number = 0;
+  public galleryRotateY: number = 0;
+  public galleryRotateZ: number = 0;
+
+  public galleryMaximumWidth: number | undefined;
+  public galleryMaximumHeight: number | undefined;
+  public galleryPreferredWidth: number | undefined;
+  public galleryPreferredHeight: number | undefined;
+
+  public ownerOrigin: string | OwnerOriginPosition = OwnerOriginPosition.Default;
+  public outletPositions: { [key: string]: Vector3 } = {};
+
+  public object: Object3D = new Group();
+  public ornaments: Object3D[] = [];
+  public camera?: CameraSpec = undefined;
+  public lightSpec?: LightSpec = undefined;
+  public highlight = new HighlightSpec();
+  public splay = new Splay();
+
+  public summary: string | undefined;
+  public summaryIconMap: IconMap | undefined;
+  public summaryRenderingOptions: RichTextRenderOptionsParameters | undefined;
+
+  /**
+   * The active player that is playing this match
+   */
+  public renderedForPlayerId: string | undefined;
+
+  /**
+   * Lets the system know that changes to this object aren't worth flipping to a panel to show that change
+   * Note: you might also have to set this on parents or children of the objects you are concerned with
+   */
+  public worthSlidingToPanelToShowChange = true;
+
+  public showDetailsOnLongPress = false;
+
+  constructor(public readonly chit: Chit) {
+    this.object.visible = false;
+
+    if ((chit as any).__outletPosition) {
+      this.outletPositions = { ...(chit as any).__outletPosition };
+    }
+  }
+
+  public offset(x: number, y: number, z: number | undefined): ChitRenderSpec {
+    this.offsetX = x;
+    this.offsetY = y;
+    this.offsetZ = z ?? 0;
+    return this;
+  }
+
+  public rotate(x: number, y: number, z: number | undefined): ChitRenderSpec {
+    this.offsetX = x;
+    this.offsetY = y;
+    this.offsetZ = z ?? 0;
+    return this;
+  }
+
+  public isShowingChildrenAsGallery = false;
+
+  public showChildrenAsGallery() {
+    this.chit.onClick = () => {
+      this.chit.renderInstance?.rootRenderInstance.showGallery(new GalleryItemChitChildrenSource(this.chit));
+    };
+
+    // TODO: this should be a highlight
+    this.isShowingChildrenAsGallery = true;
+  }
+
+  public setOutletPosition(key: string, x: number, y: number, z: number = 0) {
+    this.outletPositions[key] = new Vector3(x, y, z);
+  }
+
+  public setOutletPositionFromCanvas(renderStack: IUpdatingCanvas | ParameterizedCanvas) {
+    if (renderStack instanceof ParameterizedCanvas) {
+      renderStack = renderStack.get();
+    }
+
+    const bb = new Box3();
+    bb.expandByObject(this.object);
+
+    const w = bb.max.x - bb.min.x,
+      h = bb.max.y - bb.min.y,
+      scaleX = w / renderStack.width,
+      scaleY = h / renderStack.height;
+
+    Object.entries(renderStack.outlets).forEach(([key, coords]) => {
+      this.setOutletPosition(key, coords.x * scaleX + bb.min.x, (renderStack.height - coords.y) * scaleY + bb.min.y, 0);
+    });
+  }
+
+  public addCounterToOrderedOutlet(
+    ordered: OrderedOutlet<any>,
+    canvas: SplayCounterOptions | (ParameterizedCanvas & { value: number }),
+    minimumToRender = 2,
+    dpi: number = 100,
+    position: "top" | "left" | "right" | "bottom" = "bottom",
+    margin: number = 0,
+    formatter: (value: number) => string = (value) => value.toString(),
+  ) {
+    if (ordered.length >= minimumToRender) {
+      let offsetY = 0,
+        offsetX = 0,
+        itemWidth = 0.0001,
+        itemHeight = 0.0001;
+      const label = formatter(ordered.length);
+      const firstItem = ordered.get(0) as Chit;
+      if (firstItem) {
+        const fakeRenderSpec = new ChitRenderSpec(firstItem);
+        firstItem.render(fakeRenderSpec);
+
+        const itemBox3 = new Box3();
+        itemBox3.expandByObject(fakeRenderSpec.object);
+        fixBbox(itemBox3);
+        itemWidth = fakeRenderSpec.splay.itemWidth ?? itemBox3.max.x - itemBox3.min.x;
+        itemHeight = fakeRenderSpec.splay.itemHeight ?? itemBox3.max.y - itemBox3.min.y;
+
+        const positionResult = fakeRenderSpec.splay.splayEndPosition(itemWidth, itemHeight, position);
+        offsetX += positionResult.x;
+        offsetY += positionResult.y;
+      }
+
+      if (!(canvas instanceof ParameterizedCanvas)) {
+        const w = label.length * canvas.fontSize * dpi;
+        const h = canvas.fontSize * dpi;
+
+        const c = new SplayCounter(Math.round(w), Math.round(h), canvas, dpi, label);
+        c.label = label;
+        canvas = c;
+      } else {
+        canvas.value = ordered.length;
+      }
+
+      const w = canvas.width / dpi,
+        h = canvas.height / dpi;
+
+      const mesh = new Mesh(
+        new PlaneGeometry(w, h),
+        new MeshPhongMaterial({
+          map: canvas.get().texture,
+          transparent: true,
+          alphaTest: 0.1,
+        }),
+      );
+      mesh.castShadow = false;
+      mesh.receiveShadow = false;
+
+      // this kinda sucks, but maybe isn't so bad?
+      const box3 = new Box3();
+      box3.expandByObject(this.object);
+      fixBbox(box3);
+
+      switch (position) {
+        case "bottom":
+          offsetY -= h / 2 + margin;
+          break;
+        case "top":
+          offsetY += h / 2 + margin;
+          break;
+        case "left":
+          offsetX -= w / 2 + margin;
+          break;
+        case "right":
+          offsetX += w / 2 + margin;
+          break;
+      }
+
+      const p = this.outletPositions[ordered.outletName] ?? new Vector3(0, 0, 0);
+      mesh.position.set(p.x + offsetX, p.y + offsetY, box3.max.z - box3.min.z + p.z + 0.001);
+      this.ornaments.push(mesh);
+    }
+  }
+}

package/src/library/rendering/HighlightSpec.ts

@@ -0,0 +1,5 @@
+export class HighlightSpec {
+  public color?: string;
+  public clickColor?: string = "#fff";
+  public childrenInheritOutline?: boolean;
+}

package/src/library/rendering/LightSpec.ts

@@ -0,0 +1,41 @@
+export class Light {
+  public angleRadians = Math.PI * (3 / 4);
+  public angleElevationRadians = Math.PI / 4;
+  public color = 0xffffff;
+  public intensity = 1;
+  public shadow = true;
+
+  // TODO: extra stuff for spot lights?
+}
+
+export class LightSpec {
+  public ambientColor = 0xffffff;
+  public ambientIntensity = 1.0;
+
+  public shadowOpacity = 0.3;
+  public shadowColor = 0x000000;
+
+  public shadowZDepth = 0.001;
+  public lights: Light[] = [];
+
+  // friendly default
+  static realistic() {
+    const result = new LightSpec();
+
+    result.ambientIntensity = 0.3;
+
+    const light1 = new Light();
+    light1.intensity = 1.5;
+    light1.angleRadians = Math.PI * (2.75 / 4);
+    light1.angleElevationRadians = Math.PI * (0.75 / 4); // Math.PI * (3 / 4);
+    result.lights.push(light1);
+
+    const light2 = new Light();
+    light2.intensity = 1.5;
+    light2.angleRadians = -Math.PI * (6.6 / 8);
+    light2.angleElevationRadians = Math.PI * (1.5 / 4); // Math.PI * (3 / 4);
+    result.lights.push(light2);
+
+    return result;
+  }
+}

package/src/library/rendering/LightWrapper.ts

@@ -0,0 +1,152 @@
+import {
+  AmbientLight,
+  Box2,
+  Box3,
+  DirectionalLight,
+  Group,
+  Mesh,
+  PlaneGeometry,
+  ShadowMaterial,
+  Vector2,
+  Vector3,
+} from "three";
+import { LightSpec } from "./LightSpec";
+
+export class LightWrapper {
+  private bbox = new Box3();
+  private lightSpec = new LightSpec();
+  public group = new Group();
+  private width: number = 1;
+  private height: number = 1;
+
+  private ambient = new AmbientLight();
+  private directionalLights: DirectionalLight[] = [];
+  private shadowMesh = new Mesh(
+    new PlaneGeometry(1000, 1000),
+    new ShadowMaterial({
+      depthWrite: false,
+    }),
+  );
+
+  constructor() {
+    this.group.add(this.ambient);
+
+    this.shadowMesh.position.z = 0.001;
+    this.shadowMesh.renderOrder = Number.MAX_SAFE_INTEGER;
+    this.shadowMesh.receiveShadow = true;
+    this.shadowMesh.visible = false;
+
+    this.group.add(this.shadowMesh);
+  }
+
+  setLightSpec(lightSpec?: LightSpec): void {
+    this.lightSpec = lightSpec ?? new LightSpec();
+    this.shadowMesh.position.z = this.lightSpec.shadowZDepth;
+    this.adjust(this.bbox);
+  }
+
+  setSize(width: number, height: number): void {
+    this.width = width;
+    this.height = height;
+    this.adjust(this.bbox);
+  }
+
+  destroy() {
+    this.ambient.dispose();
+    this.directionalLights.forEach((light) => light.dispose());
+  }
+
+  adjust(bbox: Box3) {
+    this.bbox = bbox;
+
+    this.ambient.color.set(this.lightSpec.ambientColor);
+    this.ambient.intensity = this.lightSpec.ambientIntensity;
+
+    // deleting lights is bad... but we can just make them invisible
+    this.directionalLights.forEach((light) => (light.visible = false));
+
+    let makeShadow = false;
+    this.lightSpec.lights.forEach((light, index) => {
+      let l = this.directionalLights[index];
+      if (!l) {
+        l = this.directionalLights[index] = new DirectionalLight();
+        l.shadow.camera.left = -0.1;
+        l.shadow.camera.right = 0.1;
+        l.shadow.camera.top = 0.1;
+        l.shadow.camera.bottom = -0.1;
+        l.shadow.camera.near = 0.000001;
+        this.group.add(l);
+      }
+
+      l.visible = true;
+      l.color.set(light.color);
+      l.intensity = light.intensity;
+
+      l.position.z = 100 * Math.sin(light.angleElevationRadians);
+      l.position.y = 100 * Math.cos(light.angleRadians) * Math.cos(light.angleElevationRadians);
+      l.position.x = 100 * -Math.sin(light.angleRadians) * Math.cos(light.angleElevationRadians);
+
+      if (light.shadow) {
+        makeShadow = true;
+        l.castShadow = true;
+        this.adjustCameraForBbox(l);
+      } else {
+        l.castShadow = false;
+      }
+    });
+
+    if (this.lightSpec.shadowOpacity > 0 && makeShadow) {
+      (this.shadowMesh.material as ShadowMaterial).opacity = this.lightSpec.shadowOpacity;
+      (this.shadowMesh.material as ShadowMaterial).color.set(this.lightSpec.shadowColor);
+      this.shadowMesh.visible = true;
+    } else {
+      this.shadowMesh.visible = false;
+    }
+  }
+
+  adjustCameraForBbox(light: DirectionalLight) {
+    if (!Number.isFinite(this.bbox.max.x)) {
+      return;
+    }
+
+    //
+    // the more precise the range of this camera is, the better the shadows look
+    // since it renders to a 512x512 map.
+    //
+    // However, this should really just grow and not ever shrink - otherwise
+    // we will have to recompute this camera in a tween.
+    //
+    // This should be fine almost everywhere.
+    //
+
+    const camera = light.shadow.camera;
+    const { left, right, bottom, top } = camera;
+
+    camera.left = -1;
+    camera.right = 1;
+    camera.bottom = -1;
+    camera.top = 1;
+    camera.updateProjectionMatrix();
+
+    const b = new Box2();
+    const adjust = (x: number, y: number, z: number) => {
+      const v = new Vector3(x, y, z);
+      const cameraPoint = v.project(camera);
+      b.expandByPoint(new Vector2(cameraPoint.x * 2, cameraPoint.y * 2));
+    };
+
+    [this.bbox.min.x, this.bbox.max.x].forEach((x) =>
+      [this.bbox.min.y, this.bbox.max.y].forEach((y) =>
+        [this.bbox.min.z, this.bbox.max.z].forEach((z) => {
+          adjust(x, y, z);
+        }),
+      ),
+    );
+
+    camera.left = Math.min(left, b.min.x);
+    camera.right = Math.max(right, b.max.x);
+    camera.bottom = Math.min(bottom, b.min.y);
+    camera.top = Math.max(top, b.max.y);
+    camera.updateProjectionMatrix();
+  }
+}