update

Author: shakiba

docs/assets/index-DUu6bOcc.js renamed to docs/assets/index-LLLP__H6.js

@@ -7,7 +7,7 @@
     content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
   <meta name="theme-color" content="#323130" />
   <meta name="color-scheme" content="dark" />
-  <script type="module" crossorigin src="/polymatic-example-eight-ball/assets/index-DUu6bOcc.js"></script>
+  <script type="module" crossorigin src="/polymatic-example-eight-ball/assets/index-LLLP__H6.js"></script>
   <link rel="stylesheet" crossorigin href="/polymatic-example-eight-ball/assets/index-L93qdzHF.css">
 </head>
 

docs/index.html

@@ -1,20 +1,7 @@
 import { Middleware } from "polymatic";
 
 import { MainContext } from "./Main";
-import { Ball } from "./Physics";
-
-class Point {
-  x: number;
-  y: number;
-}
-
-export class CueStick {
-  key = "cue-" + Date.now();
-  type = "cue" as const;
-  ball: Ball;
-  start = { x: 0, y: 0 };
-  end = { x: 0, y: 0 };
-}
+import { CueStick, Point } from "./Data";
 
 export class Cue extends Middleware<MainContext> {
   constructor() {

src/Cue.ts

@@ -0,0 +1,61 @@
+export class Color {
+  static all = [
+    "yellow-solid",
+    "yellow-stripe",
+    "red-solid",
+    "red-stripe",
+    "burgundy-solid",
+    "burgundy-stripe",
+    "orange-solid",
+    "orange-stripe",
+    "green-solid",
+    "green-stripe",
+    "purple-solid",
+    "purple-stripe",
+    "blue-solid",
+    "blue-stripe",
+  ];
+  static white = "white";
+  static black = "black";
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Ball {
+  type: "ball";
+  key: string;
+  position: { x: number; y: number };
+  radius: number;
+  color: string;
+}
+
+export interface Rail {
+  type: "rail";
+  key: string;
+  vertices: Point[] | undefined;
+}
+
+export interface Table {
+  type: "table";
+  key: string;
+  width: number;
+  height: number;
+}
+
+export interface Pocket {
+  type: "pocket";
+  key: string;
+  position: { x: number; y: number };
+  radius: number;
+}
+
+export class CueStick {
+  key = "cue-" + Date.now();
+  type = "cue" as const;
+  ball: Ball;
+  start = { x: 0, y: 0 };
+  end = { x: 0, y: 0 };
+}

src/Data.ts

@@ -1,7 +1,6 @@
 import { Middleware } from "polymatic";
 
-import { Ball, Pocket } from "./Physics";
-import { BLACK, WHITE } from "./PoolTable";
+import { Ball, Pocket, Color } from "./Data";
 import { MainContext } from "./Main";
 
 export class EightBall extends Middleware<MainContext> {
@@ -20,10 +19,10 @@ export class EightBall extends Middleware<MainContext> {
     const index = this.context.balls.indexOf(event.ball);
     if (index !== -1) this.context.balls.splice(index, 1);
 
-    if (event.ball.color === BLACK) {
+    if (event.ball.color ===Color. black) {
       this.context.balls = [];
       setTimeout(() => this.emit("init-balls"), 400);
-    } else if (event.ball.color === WHITE) {
+    } else if (event.ball.color === Color.white) {
       setTimeout(() => this.emit("init-cue-ball"), 400);
     }
     this.emit("update");

src/EightBall.ts

@@ -2,12 +2,13 @@ import { World } from "planck";
 
 import { Middleware } from "polymatic";
 
-import { Ball, Physics, Pocket, Rail, Table } from "./Physics";
+import { Ball, CueStick, Pocket, Rail, Table } from "./Data";
 import { PoolTable } from "./PoolTable";
 import { EightBall } from "./EightBall";
 import { Terminal } from "./Terminal";
 import { FrameLoop } from "./FrameLoop";
-import { Cue, CueStick } from "./Cue";
+import { Cue } from "./Cue";
+import { Physics } from "./Physics";
 
 export class MainContext {
   cue: CueStick | null;

src/Main.ts

@@ -1,44 +1,10 @@
-import {
-  World,
-  Circle,
-  Polygon,
-  Vec2Value,
-  Contact,
-  Body,
-  Settings,
-} from "planck";
+import { World, Circle, Polygon, Vec2Value, Contact, Body, Settings } from "planck";
 
 import { Dataset, Driver, Middleware } from "polymatic";
+
 import { MainContext } from "./Main";
 import { FrameLoopEvent } from "./FrameLoop";
-
-export interface Ball {
-  type: "ball";
-  key: string;
-  position: { x: number; y: number };
-  radius: number;
-  color: string;
-}
-
-export interface Rail {
-  type: "rail";
-  key: string;
-  vertices: Vec2Value[] | undefined;
-}
-
-export interface Table {
-  type: "table";
-  key: string;
-  width: number;
-  height: number;
-}
-
-export interface Pocket {
-  type: "pocket";
-  key: string;
-  position: { x: number; y: number };
-  radius: number;
-}
+import { Ball, Pocket, Rail } from "./Data";
 
 export type Entity = Ball | Rail | Pocket;
 
@@ -73,11 +39,7 @@ export class Physics extends Middleware<MainContext> {
   }
 
   handleFrameLoop(ev: FrameLoopEvent) {
-    this.dataset.data([
-      ...this.context.balls,
-      ...this.context.rails,
-      ...this.context.pockets,
-    ]);
+    this.dataset.data([...this.context.balls, ...this.context.rails, ...this.context.pockets]);
     this.time += ev.dt;
     while (this.time >= this.timeStep) {
       this.time -= this.timeStep;
@@ -96,16 +58,12 @@ export class Physics extends Middleware<MainContext> {
 
     if (!dataA || !dataB) return;
 
-    const ball =
-      dataA.type === "ball" ? dataA : dataB.type === "ball" ? dataB : null;
-    const pocket =
-      dataA.type === "pocket" ? dataA : dataB.type === "pocket" ? dataB : null;
+    const ball = dataA.type === "ball" ? dataA : dataB.type === "ball" ? dataB : null;
+    const pocket = dataA.type === "pocket" ? dataA : dataB.type === "pocket" ? dataB : null;
 
     if (ball && pocket) {
       // do not change world immediately
-      this.world.queueUpdate(() =>
-        this.emit("ball-in-pocket", { ball, pocket })
-      );
+      this.world.queueUpdate(() => this.emit("ball-in-pocket", { ball, pocket }));
     }
   };
 

src/Physics.ts

@@ -1,25 +1,6 @@
 import { Middleware } from "polymatic/src";
-import { Ball } from "./Physics";
 import { MainContext } from "./Main";
-
-export const BLACK = "black";
-export const WHITE = "white";
-export const COLORS = [
-  "yellow-solid",
-  "yellow-stripe",
-  "red-solid",
-  "red-stripe",
-  "burgundy-solid",
-  "burgundy-stripe",
-  "orange-solid",
-  "orange-stripe",
-  "green-solid",
-  "green-stripe",
-  "purple-solid",
-  "purple-stripe",
-  "blue-solid",
-  "blue-stripe",
-];
+import { Ball, Color } from "./Data";
 
 // table data
 export class PoolTable extends Middleware<MainContext> {
@@ -50,7 +31,7 @@ export class PoolTable extends Middleware<MainContext> {
     const leftRail = [
       { x: this.width * 0.5, y: -(this.height * 0.5 - r / SPI4) },
       { x: this.width * 0.5 + 2 * r, y: -(this.height * 0.5 - r / SPI4 + 2 * r) },
-      { x: this.width * 0.5 + 2 * r, y: this.height * 0.5 - r / SPI4 +  2 * r },
+      { x: this.width * 0.5 + 2 * r, y: this.height * 0.5 - r / SPI4 + 2 * r },
       { x: this.width * 0.5, y: this.height * 0.5 - r / SPI4 },
     ];
 
@@ -152,7 +133,7 @@ export class PoolTable extends Middleware<MainContext> {
 
     const SPI3 = Math.sin(Math.PI / 3);
 
-    shuffleArray(COLORS);
+    shuffleArray(Color.all);
 
     const n = 5;
     const balls: Ball[] = [];
@@ -168,13 +149,13 @@ export class PoolTable extends Middleware<MainContext> {
             y: cy + (j - i * 0.5) * d + Math.random() * r * 0.02,
           },
           radius: this.ballRadius,
-          color: COLORS[balls.length],
+          color: Color.all[balls.length],
         });
       }
     }
 
     balls[14].color = balls[4].color;
-    balls[4].color = BLACK;
+    balls[4].color = Color.black;
 
     this.context.balls = balls;
 
@@ -191,7 +172,7 @@ export class PoolTable extends Middleware<MainContext> {
       },
 
       radius: this.ballRadius,
-      color: WHITE,
+      color: Color.white,
     });
   }
 }

src/PoolTable.ts

@@ -1,8 +1,7 @@
 import { Dataset, Driver, Middleware } from "polymatic";
 
 import { MainContext } from "./Main";
-import { Ball, Pocket, Rail, Table } from "./Physics";
-import { CueStick } from "./Cue";
+import { CueStick, Ball, Pocket, Rail, Table } from "./Data";
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 
@@ -81,8 +80,9 @@ export class Terminal extends Middleware<MainContext> {
   getSvgPoint = (event: PointerEvent) => {
     if (!this.container) return;
     const domPoint = new DOMPoint(event.clientX, event.clientY);
-    const svgMatrix = this.container.getScreenCTM();
-    const svgPoint = domPoint.matrixTransform(svgMatrix.inverse());
+    const transform = this.container.getScreenCTM();
+    if (!transform) return;
+    const svgPoint = domPoint.matrixTransform(transform.inverse());
     return svgPoint;
   };
 
@@ -91,6 +91,7 @@ export class Terminal extends Middleware<MainContext> {
   handlePointerDown = (event: PointerEvent) => {
     this.pointerDown = true;
     const point = this.getSvgPoint(event);
+    if (!point) return;
     this.emit("user-pointer-start", point);
   };
 
@@ -99,12 +100,14 @@ export class Terminal extends Middleware<MainContext> {
     if (!this.pointerDown) return;
     event.preventDefault();
     const point = this.getSvgPoint(event);
+    if (!point) return;
     this.emit("user-pointer-move", point);
   };
 
   handlePointerUp = (event: PointerEvent) => {
     this.pointerDown = false;
     const point = this.getSvgPoint(event);
+    if (!point) return;
     this.emit("user-pointer-end", point);
   };