board, tiles: Started on tile stuff.

src/board/board.js

@@ -1,8 +1,5 @@
 import { fabric } from "fabric";
 
-fabric.perfLimitSizeTotal = 134217728;
-fabric.maxCacheSideLimit = 65536;
-
 export default class Board {
   constructor(id, {grid} = {grid: {}}) {
     this.id = id;
@@ -18,18 +15,21 @@ export default class Board {
 
     this.canvas = new fabric.Canvas(this.canvasElement, {backgroundColor: "#555"});
     
+    this.contentGroup = new fabric.Group();
     this.gridGroup = new fabric.Group();
-    this.canvas.add(this.gridGroup);
+    this.cursorGroup = new fabric.Group();
+    this.canvas.add(this.contentGroup, this.gridGroup, this.cursorGroup);
 
     this.gridOptions = {
-      ...(grid || {}),
       enabled: true,
       size: 64,
       hightlightInterval: 8,
       lineColor: "#444",
       highlightColor: "#333",
+      ...(grid || {}),
     };
 
+    this.redrawGrid();
     this.setupPanning();
   }
 

src/board/layer.js

@@ -2,6 +2,6 @@ import { fabric } from "fabric";
 
 export default class Layer {
   constructor() {
-    this.group = new fabric.Group([], {});
+    this.group = new fabric.Group();
   }
 }

src/board/room.js

@@ -0,0 +1,15 @@
+import { fabric } from "fabric";
+
+export default class Room {
+  constructor() {
+    this.group = new fabric.Group();
+  }
+
+  addLayer(layer) {
+    this.group.addWithUpdate(layer.group);
+  }
+
+  removeLayer(layer) {
+    this.group.removeWithUpdate(layer.group);
+  }
+}

src/index.js

@@ -1,3 +1,8 @@
+import { fabric } from "fabric";
+
+fabric.perfLimitSizeTotal = 134217728;
+fabric.maxCacheSideLimit = 65536;
+
 import Board from "./board/board";
 
 export {

src/tiles/tilemap.js

@@ -0,0 +1,43 @@
+import { fabric } from "fabric";
+import TileSet from "./tileset";
+
+const image = new fabric.Image();
+
+export default class TileMap {
+  /**
+   * @param {TileSet} tileset 
+   * @param {{chunkSiz:number}} opts 
+   */
+  constructor(tileset, opts = {}) {
+    this.tileset = tileset;
+
+    this.opts = {
+      chunkSize: 8,
+      ...opts,
+    }
+
+    this.chunks = [];
+  }
+
+  getChunk(x, y) {
+    const cs = this.opts.chunkSize;
+    const cx = x > 0 ? Math.floor(x / cs) : Math.ceil(x / cs);
+    const cy = y > 0 ? Math.floor(y / cs) : Math.ceil(y / cs);
+
+    let chunk = this.chunks.find(c => c.x === cx && c.y === cy);
+    if (chunk == null) {
+      chunk = new Chunk(x, y, cs);
+      this.chunks.push(chunk);
+    }
+
+    return chunk;
+  }
+}
+
+class Chunk {
+  constructor(x, y, size) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+  }
+}

src/tiles/tileset.js

@@ -0,0 +1,12 @@
+import { fabric } from "fabric";
+
+export default class TileSet {
+  constructor(opts) {
+    this.opts = {
+      tileSize: [32, 32],
+      tileSep: [0, 0],
+      src: "/res/tilesets/default.png",
+      ...opts,
+    }
+  }
+}