1 files changed, 54 insertions, 39 deletions

diff --git a/js/game-frame/game.js b/js/game-frame/game.js
index b0f3fb6..744991d 100644
--- a/js/game-frame/game.js
+++ b/js/game-frame/game.js
@@ -106,6 +106,8 @@ let items = [
   new Item('banana', 24, 128, 'food', 'yellow'),
   new Item('bucket', 128, 256, 'object', 'green'),
   new Item('big key', 216, 216, 'key', 'cyan'),
+  new Item('small key', 456, 256, 'key', 'cyan'),
+  new Item('bike', 0, 48, 'bike', 'orange'),
 ];
 
 // Populate the world with really very weird objects
@@ -183,7 +185,6 @@ function displayStats() {
 
 // Game loop
 function gameLoop() {
-
   // Update the camera position to follow the player
   camera.x = player.x - camera.width / 2;
   camera.y = player.y - camera.height / 2;
@@ -193,19 +194,19 @@ function gameLoop() {
   camera.y = Math.max(0, Math.min(map.length * TILE_SIZE - camera.height, camera.y));
 
   // Draw the map
-  for (let y = 0; y < map.length; y++) {
-      for (let x = 0; x < map[y].length; x++) {
-          ctx.fillStyle = map[y][x].color;
+  map.forEach((row, y) => {
+    row.forEach((tile, x) => {
+      ctx.fillStyle = tile.color;
 
-          // Draw the tile
-          ctx.fillRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE);
+      // Draw the tile
+      ctx.fillRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE);
 
-          // Draw the grid
-          ctx.strokeStyle = 'white';
-          ctx.lineWidth = 1;
-          ctx.strokeRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE);
-      }
-  }
+      // Draw the grid
+      ctx.strokeStyle = 'white';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE);
+    });
+  });
 
   // Draw the player
   ctx.fillStyle = player.color;
@@ -213,41 +214,57 @@ function gameLoop() {
 
   // Draw items and check for collisions
   items.forEach(item => {
-      ctx.fillStyle = item.color;
-      ctx.fillRect(item.x - camera.x, item.y - camera.y, player.width, player.height);
+    ctx.fillStyle = item.color;
+    ctx.fillRect(item.x - camera.x, item.y - camera.y, player.width, player.height);
   });
-  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--;
-      }
+  items = items.filter(item => {
+    if (player.x === item.x && player.y === item.y) {
+      player.collectItem(item);
+      return false; // Remove the item from the map
+    }
+    return true;
+  });
+  if (player.inventory.find(item => item.type === 'bike')) {
+    player.step = 12;
+  } else {
+    player.step = 8;
   }
 
-    // Draw signs and check for collisions
-    signs.forEach(sign => {
-    let dx = player.x - sign.x;
-    let dy = player.y - sign.y;
-    let distance = Math.sqrt(dx * dx + dy * dy);
 
-    if (distance < player.width / 2 + sign.width / 2) {
+  // Draw signs and check for collisions
+  signs.forEach(sign => {
+    const dx = player.x - sign.x;
+    const dy = player.y - sign.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
 
+    if (distance < player.width / 2 + sign.width / 2) {
       document.getElementById("dialog").innerHTML = sign.message;
 
       ctx.fillStyle = 'black';
       ctx.font = '22px Serif';
 
-      // Wrap text within the canvas width
-      // FIXME: this works, but is too agressive -- it'll wrap text that *was* at the canvas' edge, but that isn't any more
-      const maxWidth = canvas.width - sign.x - camera.x;
-      let words = sign.message.split(' ');
+      // Calculate the starting position of the text
+      const lineHeight = 24;
+
+      // Calculate the starting position of the text within the sign
+      const textWidth = ctx.measureText(sign.message).width;
+      const textHeight = lineHeight;
+      const startX = sign.x - camera.x + (sign.width - textWidth) / 2;
+      const startYWithinSign = sign.y - camera.y + (sign.height - textHeight) / 2;
+
+      // Calculate the final position of the text within the canvas area
+      const padding = 12; // Set the desired padding value
+      const finalX = Math.max(padding, Math.min(canvas.width - textWidth - padding, startX));
+      const finalY = Math.max(padding, Math.min(canvas.height - textHeight - padding, startYWithinSign));
+
+      // Wrap the text to multiple lines if it exceeds the canvas width
+      const words = sign.message.split(' ');
       let line = '';
       let lines = [];
       for (let i = 0; i < words.length; i++) {
-        let testLine = line + words[i] + ' ';
-        let metrics = ctx.measureText(testLine);
-        let testWidth = metrics.width;
-        if (testWidth > maxWidth && i > 0) {
+        const testLine = line + words[i] + ' ';
+        const testWidth = ctx.measureText(testLine).width;
+        if (testWidth > canvas.width - padding * 2) {
           lines.push(line);
           line = words[i] + ' ';
         } else {
@@ -256,11 +273,9 @@ function gameLoop() {
       }
       lines.push(line);
 
-      // Draw wrapped text
-      let lineHeight = 24;
-      let startY = sign.y - camera.y - (lines.length * lineHeight) / 2;
+      // Draw each line of the text
       for (let i = 0; i < lines.length; i++) {
-        ctx.fillText(lines[i], sign.x - camera.x, startY + (i * lineHeight));
+        ctx.fillText(lines[i], finalX, finalY + i * lineHeight);
       }
     }
 
@@ -268,7 +283,7 @@ function gameLoop() {
     ctx.beginPath();
     ctx.arc(sign.x - camera.x + sign.width / 2, sign.y - camera.y + sign.height / 2, sign.width / 2, 0, Math.PI * 2);
     ctx.fill();
-    });
+  });
 
   // Call the game loop again next frame
   requestAnimationFrame(gameLoop);