fix(client): revert rendering refactor

packages/client/src/renderer/camera.ts

@@ -352,12 +352,17 @@ export default class Camera {
      * Iterates through every grid coordinate in the view port.
      * @param callback Callback contains the grid coordinates being iterated in the view.
      * @param offset How much to look outside the width and height of the viewport.
+     * @param offsetRight How much to look outside the right edge of the viewport.
      */
 
-    public forEachVisiblePosition(callback: (x: number, y: number) => void, offset = 1): void {
-        for (let y = this.gridY - offset, maxY = y + this.gridHeight + offset * 2; y < maxY; y++)
+    public forEachVisiblePosition(
+        callback: (x: number, y: number) => void,
+        offset = 2,
+        offsetRight = offset
+    ): void {
+        for (let y = this.gridY - offset, maxY = y + this.gridHeight + offsetRight; y < maxY; y++)
             for (
-                let x = this.gridX - offset, maxX = x + this.gridWidth + offset * 2;
+                let x = this.gridX - offset, maxX = x + this.gridWidth + offsetRight;
                 x < maxX;
                 x++
             ) {

packages/client/src/renderer/canvas.ts

@@ -86,6 +86,7 @@ export default class Canvas extends Renderer {
      */
 
     private draw(): void {
+        // Draw only tiles with animated indexes if we have rendered a frame.
         if (this.hasRenderedFrame()) return this.drawAnimatedIndexes();
 
         this.clearDrawing();
@@ -94,23 +95,11 @@ export default class Canvas extends Renderer {
         // Sets the view according to the camera.
         this.updateDrawingView();
 
-        /**
-         * I made a decision to sacrifice legibility to maximize performance. We avoid using
-         * `forEachVisiblePosition` so that we do not make a ridiculous amount of callbacks
-         * for each tile. We do the iteration through the visible tiles using a for loop and
-         * all within one function.
-         */
-
-        for (let y = this.camera.gridY - 2; y < this.camera.gridY + this.map.height + 2; y++)
-            for (let x = this.camera.gridX - 2; x < this.camera.gridX + this.map.width + 2; x++) {
-                // Prevent out of bounds coordinates.
-                if (x < 0 || y < 0 || x >= this.map.width || y >= this.map.height) continue;
-
-                let index = x + y * this.map.width,
-                    tile = this.map.data[index];
-
-                this.parseTile(tile, index);
-            }
+        // Iterate through all the visible tiles and draw them.
+        this.forEachVisibleTile(
+            (tile: ClientTile, index: number) => this.parseTile(tile, index),
+            2
+        );
 
         this.saveFrame();
         this.restoreDrawing();

packages/client/src/renderer/renderer.ts

@@ -525,7 +525,11 @@ export default class Renderer {
 
     private drawFPS(): void {
         this.calculateFPS();
-        this.drawText(`[${this.type}] FPS: ${this.fps}`, 50, 180);
+        this.drawText(
+            `[${this.type}, cw: ${this.camera.gridWidth}, ch: ${this.camera.gridHeight}] FPS: ${this.fps}`,
+            50,
+            180
+        );
     }
 
     /**
@@ -1779,6 +1783,31 @@ export default class Renderer {
         //
     }
 
+    /**
+     * Iterates through all the indexes and extracts the tile data at that
+     * specified index by iterating through each tile array (if present) or
+     * returning the tile data from the map.
+     * @param callback Returns a region tile object containing rendering information
+     * such as tileId, x, y, and flip flags. The index is the positioning in the map.
+     * @param offset How much to look outside the visible camera proportions.
+     */
+
+    protected forEachVisibleTile(
+        callback: (data: ClientTile, index: number) => void,
+        offset?: number
+    ): void {
+        if (!this.map?.mapLoaded) return;
+
+        this.forEachVisibleIndex((index) => {
+            let indexData = this.map.data[index];
+
+            if (indexData === 0) return;
+
+            if (Array.isArray(indexData)) for (let data of indexData) callback(data, index);
+            else if (this.map.data[index]) callback(this.map.data[index], index);
+        }, offset);
+    }
+
     /**
      * Iterates through all the indexes in the current camera view. The offset
      * is used to look `offset` amount of tiles outside the camera view.
@@ -1799,10 +1828,14 @@ export default class Renderer {
      */
 
     protected forEachVisibleEntity(callback: (entity: Entity) => void): void {
-        this.camera.forEachVisiblePosition((x, y) => {
-            for (let entity in this.grids.renderingGrid[y][x])
-                callback(this.grids.renderingGrid[y][x][entity]);
-        }, 4);
+        this.camera.forEachVisiblePosition(
+            (x, y) => {
+                for (let entity in this.grids.renderingGrid[y][x])
+                    callback(this.grids.renderingGrid[y][x][entity]);
+            },
+            3,
+            4
+        );
     }
 
     /**