Client core (#2)

* Implement a basic Grid class to keep track of grid state * Add Interaction, Cursor, Input, Support Grid.distroyCell * Ensure Cursor Remains Visible * Up and Down arrow during input save cell * Remove unused console.log s * clean up comments
quadratichq · Nov 19, 2021 · 05b5ac9 · 05b5ac9
1 parent 5f304ea
commit 05b5ac9
Show file tree

Hide file tree

Showing 17 changed files with 486 additions and 80 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "polyhedron",
+  "name": "quadratic",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -11,6 +11,7 @@
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "pixi-cull": "^2.1.0",
+    "pixi-text-input": "^1.0.6",
     "pixi-viewport": "^4.34.1",
     "pixi.js": "^6.2.0",
     "react": "^17.0.2",

diff --git a/public/index.html b/public/index.html
@@ -27,7 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Polyhedron</title>
+    <title>Quadratic</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,14 @@
 import * as React from "react";
-
 import { Application, Ticker } from "pixi.js";
 import { Viewport } from "pixi-viewport";
 import { Simple } from "pixi-cull";
 
 import "./styles.css";
 import useWindowDimensions from "./utils/useWindowDimensions.js";
-
 import drawGrid from "./core/graphics/drawGrid";
-import fillCell from "./core/graphics/cells/fillCell";
-import highlightCell from "./core/graphics/cells/highlightCell";
-import { CELL_WIDTH, CELL_HEIGHT } from "./constants/gridConstants";
+import Interaction from "./core/interaction/interaction";
+import Grid from "./core/grid/Grid";
+import Globals from "./globals";
 
 export default function App() {
   const ref = React.useRef<HTMLDivElement>(null);
@@ -23,6 +21,7 @@ export default function App() {
       resizeTo: window,
       resolution: window.devicePixelRatio,
       backgroundColor: 0xffffff,
+      antialias: true,
       autoDensity: true,
     });
 
@@ -53,47 +52,36 @@ export default function App() {
 
       drawGrid(viewport);
 
-      // Fill 25 Cells with their information
-      // for (let i = 0; i < 10000; i++) {
-      //   let x = i % 50;
-      //   let y = Math.floor(i / 50);
-      //   fillCell(viewport, { x: x, y: y }, `Cell (${x}, ${y})`);
-      // }
-
-      fillCell(viewport, { x: 1, y: 1 }, `Breed`);
-      fillCell(viewport, { x: 1, y: 2 }, `Dachshund`);
-      fillCell(viewport, { x: 2, y: 1 }, `Count`);
-      fillCell(viewport, { x: 2, y: 2 }, `2`);
-      fillCell(viewport, { x: 1, y: 3 }, `Rhodesian`);
-      let cell = fillCell(viewport, { x: 2, y: 3 }, `2`);
-
-      // Select Active Cell
-      viewport.on("clicked", (event) => {
-        console.log(event);
-        console.log(event.world.x, event.world.y);
-        let cell_x = Math.floor(event.world.x / CELL_WIDTH);
-        let cell_y = Math.floor(event.world.y / CELL_HEIGHT);
-        console.log(cell_x);
-
-        highlightCell(viewport, { x: cell_x, y: cell_y }, "normal");
-      });
+      let grid = new Grid(viewport);
+
+      grid.createOrUpdateCell({ x: 1, y: 0 }, "World");
+
+      // Fill Cells dummy information
+      for (let i = 0; i < 100; i++) {
+        let x = i % 10;
+        let y = Math.floor(i / 10);
+
+        grid.createOrUpdateCell({ x: x, y: y }, `Cell ${x} ${y}`);
+      }
+      grid.getCell({ x: 0, y: 0 });
+
+      const globals = new Globals(viewport, app.view, grid);
+
+      let interaction = new Interaction(globals);
+      interaction.makeInteractive();
 
       // FPS log
       // app.ticker.add(function (time) {
       //   console.log(app.ticker.FPS);
       // });
 
       // Culling
-      const cull = new Simple(); // new SpatialHash()
+      const cull = new Simple();
       cull.addList(viewport.children);
       cull.cull(viewport.getVisibleBounds()); // TODO: Recalculate on screen resize
 
       // cull whenever the viewport moves
-      let count = 0;
       Ticker.shared.add(() => {
-        cell.text = count.toString();
-        count += 1;
-
         if (viewport.dirty) {
           cull.cull(viewport.getVisibleBounds());
           viewport.dirty = false;

diff --git a/src/core/graphics/cells/drawCell.ts b/src/core/graphics/cells/drawCell.ts
@@ -0,0 +1,49 @@
+import { BitmapText, Container, Graphics } from "pixi.js";
+import { Viewport } from "pixi-viewport";
+
+import highlightCell from "./highlightCell";
+import CellReference from "../../types/cellReference";
+import { CELL_WIDTH, CELL_HEIGHT } from "../../../constants/gridConstants";
+
+interface CellReturn {
+  container: Container;
+  bitmap_text: BitmapText;
+  cell_outline: Graphics;
+}
+
+const drawCell = (
+  viewport: Viewport,
+  cell: CellReference,
+  text: string
+): CellReturn => {
+  // Calculate X and Y positions
+  const x_pos = cell.x * CELL_WIDTH;
+  const y_pos = cell.y * CELL_HEIGHT;
+  const margin_left = 2;
+  const margin_top = -1;
+
+  // render text
+  let bitmap_text = new BitmapText(text, {
+    fontName: "OpenSans",
+    tint: 0x000000,
+    fontSize: 14,
+    align: "right",
+  });
+  bitmap_text.position.set(x_pos + margin_left, y_pos + margin_top);
+
+  // highlight cell
+  let cell_outline = highlightCell(cell, "normal");
+
+  // create Container
+  let container = new Container();
+  container.addChild(bitmap_text);
+  container.addChild(cell_outline);
+
+  return {
+    container,
+    bitmap_text,
+    cell_outline,
+  };
+};
+
+export default drawCell;
diff --git a/src/core/graphics/cells/fillCell.ts b/src/core/graphics/cells/fillCell.ts
diff --git a/src/core/graphics/cells/highlightCell.ts b/src/core/graphics/cells/highlightCell.ts
@@ -1,24 +1,27 @@
 import { Graphics } from "pixi.js";
-import { Viewport } from "pixi-viewport";
 
-import CellReference from "./types/cellReference";
+import CellReference from "../../types/cellReference";
 
 import { CELL_WIDTH, CELL_HEIGHT } from "../../../constants/gridConstants";
 
 import colors from "../../../utils/colors.js";
 
-const highlightCell = (
-  viewport: Viewport,
-  cell: CellReference,
-  type: string
-) => {
+const highlightCell = (cell: CellReference, type: string): Graphics => {
   const x_pos = cell.x * CELL_WIDTH;
   const y_pos = cell.y * CELL_HEIGHT;
   // highlight cell
   let cell_outline = new Graphics();
-  cell_outline.lineStyle(1, colors.cellColorUserText, 0.9, 0.5, true);
+
+  // set type
+  if (type === "cursor") {
+    cell_outline.lineStyle(1.5, colors.cursorCell);
+  } else {
+    cell_outline.lineStyle(1, colors.cellColorUserText, 0.9, 0.5, true);
+  }
+
   cell_outline.drawRect(x_pos, y_pos, CELL_WIDTH, CELL_HEIGHT);
-  viewport.addChild(cell_outline);
+
+  return cell_outline;
 };
 
 export default highlightCell;
diff --git a/src/core/grid/Cell.ts b/src/core/grid/Cell.ts
@@ -0,0 +1,38 @@
+import { BitmapText, Container, Graphics } from "pixi.js";
+import { Viewport } from "pixi-viewport";
+import CellReference from "../types/cellReference";
+
+import drawCell from "../graphics/cells/drawCell";
+
+export default class Cell {
+  location: CellReference;
+  bitmap_text: BitmapText;
+  container: Container;
+  viewport: Viewport;
+  cell_outline: Graphics;
+
+  constructor(location: CellReference, viewport: Viewport, text: string) {
+    this.location = location;
+
+    // draw cell
+    let { bitmap_text, container, cell_outline } = drawCell(
+      viewport,
+      location,
+      text
+    );
+    this.bitmap_text = bitmap_text;
+    this.container = container;
+    this.cell_outline = cell_outline;
+    this.viewport = viewport;
+    viewport.addChild(container);
+  }
+
+  update(text: string) {
+    this.bitmap_text.text = text;
+  }
+
+  destroy() {
+    this.viewport.removeChild(this.container);
+    this.container.destroy();
+  }
+}
diff --git a/src/core/grid/Grid.ts b/src/core/grid/Grid.ts
@@ -0,0 +1,48 @@
+import Cell from "./Cell";
+import CellReference from "../types/cellReference";
+import { Viewport } from "pixi-viewport";
+
+export default class Grid {
+  data: { [key: string]: { [key: string]: Cell } };
+  viewport: Viewport;
+
+  constructor(viewport: Viewport) {
+    this.data = {};
+    this.viewport = viewport;
+  }
+
+  getCell(location: CellReference): Cell | null {
+    if (this.data[location.x] === undefined) {
+      return null;
+    }
+    return this.data[location.x][location.y] || null;
+  }
+
+  destroyCell(location: CellReference) {
+    if (this.data[location.x] !== undefined) {
+      let cell = this.data[location.x][location.y];
+      if (cell) {
+        cell.destroy();
+        delete this.data[location.x][location.y];
+      }
+    }
+  }
+
+  createOrUpdateCell(location: CellReference, text: string) {
+    let cell: Cell | null = this.getCell(location);
+
+    if (cell === null) {
+      if (this.data[location.x] === undefined) {
+        this.data[location.x] = {};
+      }
+
+      this.data[location.x][location.y] = new Cell(
+        { x: location.x, y: location.y },
+        this.viewport,
+        text
+      );
+    } else {
+      cell.update(text);
+    }
+  }
+}