3 files changed, 99 insertions, 6 deletions

diff --git a/js/game-frame/README.md b/js/game-frame/README.md
index cd787f2..91ae7e6 100644
--- a/js/game-frame/README.md
+++ b/js/game-frame/README.md
@@ -4,8 +4,8 @@ My *hope* is to make this a sort of generic starting point to prototype little e
 
 Needs to support: 
 
-- 2d, grid-based movement
-- collectable items
+- [x] 2d, grid-based movement
+- [x] collectable items
 - configurable map
 - panning camera to follow the character across a map larger than the default viewport
 
diff --git a/js/game-frame/game.js b/js/game-frame/game.js
index 935263d..f63b835 100644
--- a/js/game-frame/game.js
+++ b/js/game-frame/game.js
@@ -4,6 +4,9 @@ const ctx = canvas.getContext('2d');
 canvas.width = 512;
 canvas.height = 512;
 
+
+
+
 // Create the player
 const player = {
     x: 0,
@@ -14,10 +17,24 @@ const player = {
     color: 'blue',
     spriteUrl: "chickadee.svg"
 };
+
+// If you wanna have a sprite, you need to create an image object
 const playerSprite = new Image();
 playerSprite.src = player.spriteUrl;
 
+// Empty player inventory
+player.inventory = [];
+
+// Ability to collect items
+player.collectItem = function(item) {
+  this.inventory.push(item);
+}
+
+
+
 
+
+// MAP
 const TILE_SIZE = 64;
 // Create the map
 const map = [
@@ -31,10 +48,49 @@ const map = [
     [{ walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }]
 ];
 
-function displayCoordinates() {
-    document.getElementById("coordinates").innerHTML = "x: " + player.x + " y: " + player.y;
+
+
+
+// ITEMS
+// Define the Item object
+function Item(name, x, y, type, color) {
+  this.name = name;
+  this.x = x;
+  this.y = y;
+  this.type = type;
+  this.color = color;
 }
 
+// Create some bespoke items
+let items = [
+  new Item('helmet', 16, 16, 'clothes', 'red'),
+  new Item('banana', 24, 128, 'food', 'yellow'),
+  new Item('bucket', 128, 256, 'object', 'green'),
+  new Item('big key', 216, 216, 'key', 'cyan'),
+];
+
+
+
+
+
+// Funtion to display the player's stats, useful for debugging
+function displayStats() {
+  document.getElementById("stats").innerHTML = "";
+  for (let stat in player) {
+    if (typeof player[stat] === "string" || typeof player[stat] === "number") {
+      document.getElementById("stats").innerHTML += stat + ": " + player[stat] + "<br>";
+    }
+  }
+  document.getElementById("stats").innerHTML += "Inventory: ";
+  for (let i = 0; i < player.inventory.length; i++) {
+    document.getElementById("stats").innerHTML += player.inventory[i].name + ", ";
+  }
+}
+
+
+
+
+
 
 // Game loop
 function gameLoop() {
@@ -63,9 +119,24 @@ function gameLoop() {
     // context.drawImage(playerSprite, player.x, player.y, player.width, player.height);
   
 
+    // Draw items
+    items.forEach(item => {
+      ctx.fillStyle = item.color;
+      ctx.fillRect(item.x, item.y, 8, 8);
+    });
+
+    for (let i = 0; i < items.length; i++) {
+      if (player.x === items[i].x && player.y === items[i].y) {
+          player.collectItem(items[i]);
+          items.splice(i, 1); // Remove the item from the map
+          i--;
+      }
+    }
+
+
     // Call the game loop again next frame
     requestAnimationFrame(gameLoop);
-    displayCoordinates();
+    displayStats();
 }
 
 // Start the game loop
@@ -101,4 +172,22 @@ window.addEventListener('keydown', (e) => {
       player.x = newX;
       player.y = newY;
     }
+});
+
+
+canvas.addEventListener('click', function(event) {
+  // Calculate the mouse position
+  var rect = canvas.getBoundingClientRect();
+  var mouseX = Math.round(event.clientX - rect.left);
+  var mouseY = Math.round(event.clientY - rect.top);
+
+  // Calculate the map coordinates
+  var mapX = Math.floor(mouseX / TILE_SIZE);
+  var mapY = Math.floor(mouseY / TILE_SIZE);
+
+  // Write the map coordinates to the DOM element
+  document.getElementById('coordinates').innerText = 'Map grid: x ' + mapX + ', y ' + mapY;
+
+  // Write the canvas coordinates to the DOM element
+  document.getElementById('canvasCoordinates').innerText = 'Canvas: x ' + mouseX + ', y ' + mouseY;
 });
\ No newline at end of file
diff --git a/js/game-frame/index.html b/js/game-frame/index.html
index 6585662..a18d1d2 100644
--- a/js/game-frame/index.html
+++ b/js/game-frame/index.html
@@ -8,7 +8,11 @@
 </head>
 <body>
     <main>
-        <p id="coordinates"></p>
+        <ul>
+            <li id="coordinates"></li>
+            <li id="canvasCoordinates"></li>
+        </ul>
+        <p id="stats"></p>
         <canvas id="gameCanvas"></canvas>
     </main>
     <script src="game.js"></script>