From fa89a653adff8f1c370ce51a0ae44825e2324393 Mon Sep 17 00:00:00 2001
From: Juan Sebastian Montoya <juansmm@outlook.com>
Date: Thu, 11 Jul 2024 08:41:04 -0500
Subject: [PATCH] feat(#1): added grid drawing

---
 src/index.js | 43 +++++++++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/index.js b/src/index.js
index 0d18c14..54d588e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,18 +1,41 @@
 import CanvasWindow from "./canvas-windows";
 import ResourceLoader from "./resource-loader";
-(async function gameloop() {
-  const canvasWindow = new CanvasWindow({
-    canvas: document.querySelector("canvas"),
-    maxMultiplier: 5,
-    windowPercentage: 0.9,
-  });
+
+const canvasWindow = new CanvasWindow({
+  canvas: document.querySelector("canvas"),
+  maxMultiplier: 5,
+  windowPercentage: 0.9,
+});
+
+const DEBUG = true;
+const GAME_TILE = 16;
+const ROWS = canvasWindow.nativeHeight / GAME_TILE;
+const COLUMNS = canvasWindow.nativeWidth / GAME_TILE;
+
+(async () => {
   await canvasWindow.load();
   const { canvas } = canvasWindow;
   const ctx = canvas.getContext("2d");
 
-  const [overworld] = await Promise.all([
-    "assets/overworld.png",
-  ].map(ResourceLoader.load));
+  const [overworld] = await Promise.all(
+    ["assets/overworld.png"].map(ResourceLoader.load)
+  );
+  for (let row = 0; row < ROWS; row++) {
+    for (let col = 0; col < COLUMNS; col++) {
+      ctx.drawImage(
+        overworld,
+        0,
+        0,
+        GAME_TILE,
+        GAME_TILE,
+        col * GAME_TILE,
+        row * GAME_TILE,
+        GAME_TILE,
+        GAME_TILE
+      );
 
-  ctx.drawImage(overworld, 0, 0);
+      DEBUG &&
+        ctx.strokeRect(col * GAME_TILE, row * GAME_TILE, GAME_TILE, GAME_TILE);
+    }
+  }
 })();