Merge branch 'main' of https://github.com/zero-to-mastery/ZTM-Quest i…

…nto fullspeccoder

index.html

@@ -178,6 +178,7 @@
                         </div>
                     </div>
                     <div id="minimap-container">
+                        <div id="minimap-name"></div>
                         <canvas id="minimap"></canvas>
                     </div>
                 </div>

src/init/map.init.js

@@ -20,16 +20,22 @@ export const initMap = async (
 
     shapeOffset = shapeOffset || k.vec2(0, 0);
 
+    // Convert the map name from the file path
+    const mapFileName = pathToMapJson.split('/').pop(); // Extract 'map_start.json'
+    const mapName = mapFileName.replace('map_', '').replace('.json', ''); // Get 'start
+
     const map = k.make([
         k.sprite('map'),
         k.pos(mapConfig.mapOffset ? mapConfig.mapOffset : 0),
         k.scale(scaleFactor),
         k.layer('map'),
         'main_map',
         mapConfig.additionalProperties,
+        {
+            png: pathToMapPng,
+            name: mapName,
+        },
     ]);
-
-    map.png = pathToMapPng;
     k.onLoad(() => {
         if (!uiLoaded) {
             const app = document.getElementById('app');

src/player.controls.js

@@ -176,7 +176,7 @@ export const addPlayerControls = (player) => {
 
     // Set up the button press event to toggle the minimap
     k.onButtonPress('map', () => {
-        toggleMinimap();
+        toggleMinimap(k);
     });
 
     // Only stop animations if no buttons are pressed

src/styles/screen.css

@@ -176,6 +176,8 @@
     display: flex;
     padding: 0.5rem 1rem;
     justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }
 
 #minimap-button-container {
@@ -202,6 +204,12 @@
     display: none;
 }
 
+#minimap-name {
+    color: #fff;
+    text-transform: capitalize;
+    font-size: 1rem;
+}
+
 .top,
 .bottom,
 .left,

src/utils/miniMap.js

@@ -19,6 +19,10 @@ export const drawMinimap = (k, player) => {
     // Set the image to be drawn to the png of current map
     mapImage.src = map.png;
 
+    // Draw the map title
+    const mapName = document.getElementById('minimap-name');
+    mapName.innerHTML = miniMapVisible ? map.name : '';
+
     // Clear previous frame
     minimapCtx.clearRect(0, 0, minimapCanvas.width, minimapCanvas.height);
 
@@ -39,13 +43,26 @@ export const drawMinimap = (k, player) => {
     const playerMinimapX = player.pos.x * xScale; // Scale player X position
     const playerMinimapY = player.pos.y * yScale; // Scale player Y position
 
-    // Draw player market on the map
-    minimapCtx.fillStyle = 'red'; // Player marker color
-    minimapCtx.fillRect(playerMinimapX, playerMinimapY, 5, 5); // Player marker
+    // Once the sprite is loaded, extract the specific frame for the player's current animation
+    const spriteSheet = new Image();
+    spriteSheet.src = './assets/sprites/characters.png'; // Load the sprite sheet
+
+    // Draw the specific frame on the minimap
+    minimapCtx.drawImage(
+        spriteSheet,
+        0,
+        32, // Source X and Y position on the sprite sheet
+        16,
+        16, // Source width and height
+        playerMinimapX,
+        playerMinimapY - 10, // Destination X and Y on the minimap canvas
+        16,
+        16 // size on mini-map
+    );
 };
 
 // Function to toggle the minimap
-export const toggleMinimap = () => {
+export const toggleMinimap = (k) => {
     // Get minimap element
     const minimapCanvas = document.getElementById('minimap');
     // Set a true/false variable depending on current minimap status