The player must select a direction of movement. Then end the turn for the character to move

script.js

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const gameState = {
         playerTurn: true,
         playerPosition: { x: 100, y: 100 },
+        selectedMove: null,
         enemies: [
             { x: 300, y: 100, speed: 2, direction: 'right' },
             { x: 200, y: 200, speed: 1, direction: 'down' }
@@ -10,8 +11,9 @@ document.addEventListener('DOMContentLoaded', () => {
         swordAngle: 0,
         swordSpinning: false,
         swordSpeed: 0,
-        gameLog: []
-    };
+        gameLog: [],
+        moveConfirmed: false
+};
 
     // DOM elements
     const gameCanvas = document.getElementById('gameCanvas');
@@ -62,15 +64,59 @@ document.addEventListener('DOMContentLoaded', () => {
             gameCanvas.appendChild(enemyElement);
         });
     }
-
     function setupControls() {
-        moveUp.addEventListener('click', () => movePlayer(0, -30));
-        moveDown.addEventListener('click', () => movePlayer(0, 30));
-        moveLeft.addEventListener('click', () => movePlayer(-30, 0));
-        moveRight.addEventListener('click', () => movePlayer(30, 0));
-        spinBlade.addEventListener('click', startSpin);
+        moveUp.addEventListener('click', () => selectMove(0, -30));
+        moveDown.addEventListener('click', () => selectMove(0, 30));
+        moveLeft.addEventListener('click', () => selectMove(-30, 0));
+        moveRight.addEventListener('click', () => selectMove(30, 0));
+        spinBlade.addEventListener('click', () => {
+            if (!gameState.moveConfirmed) {
+                selectMove(0, 0, true);
+            }
+        });
+
+        // Add confirm button
+        const confirmButton = document.createElement('button');
+        confirmButton.id = 'confirmMove';
+        confirmButton.className = 'btn-action bg-green-600 hover:bg-green-700 col-span-3';
+        confirmButton.innerHTML = '<i data-feather="check"></i> Confirm Move';
+        document.querySelector('.grid.grid-cols-3').appendChild(confirmButton);
+        confirmButton.addEventListener('click', confirmMove);
+        feather.replace();
     }
 
+    function selectMove(dx, dy, isSpin = false) {
+        if (!gameState.playerTurn || gameState.moveConfirmed) return;
+
+        const newX = gameState.playerPosition.x + dx;
+        const newY = gameState.playerPosition.y + dy;
+
+        // Boundary check for moves (not needed for spin)
+        if (!isSpin && (newX < 0 || newX > gameCanvas.offsetWidth - 30 || 
+                       newY < 0 || newY > gameCanvas.offsetHeight - 30)) {
+            logMessage("Can't move there - out of bounds!");
+            return;
+        }
+
+        gameState.selectedMove = { dx, dy, isSpin };
+        logMessage(isSpin ? "Spin blade selected!" : `Move to (${newX}, ${newY}) selected`);
+    }
+
+    function confirmMove() {
+        if (!gameState.playerTurn || !gameState.selectedMove || gameState.moveConfirmed) return;
+
+        gameState.moveConfirmed = true;
+        
+        if (gameState.selectedMove.isSpin) {
+            startSpin();
+        } else {
+            gameState.playerPosition.x += gameState.selectedMove.dx;
+            gameState.playerPosition.y += gameState.selectedMove.dy;
+            renderGame();
+            endTurn();
+        }
+}
+
     function movePlayer(dx, dy) {
         if (!gameState.playerTurn) return;
 
@@ -159,32 +205,31 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     }
-
     function endTurn() {
         gameState.playerTurn = false;
+        gameState.selectedMove = null;
+        gameState.moveConfirmed = false;
         turnIndicator.textContent = "Enemy Turn";
         turnIndicator.className = "px-3 py-1 bg-red-600 rounded-full";
-        
-        setTimeout(() => {
+setTimeout(() => {
             // Enemy moves
             moveEnemies();
             renderGame();
             
             // Blade keeps spinning if it was activated
             updateSpinning();
-            
             // Return to player turn
             setTimeout(() => {
                 if (!gameState.swordSpinning) {
                     gameState.playerTurn = true;
                     turnIndicator.textContent = "Player Turn";
                     turnIndicator.className = "px-3 py-1 bg-blue-600 rounded-full";
-                    logMessage("Your turn!");
+                    logMessage("Your turn! Select a move.");
                 } else {
                     // If blade is still spinning, enemies get another turn
                     endTurn();
                 }
-            }, 500);
+}, 500);
         }, 1000);
     }
 

style.css

@@ -5,11 +5,17 @@ body {
     display: flex;
     flex-direction: column;
 }
-
 .btn-action {
     @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition-all flex items-center justify-center gap-2;
 }
 
+.btn-action.selected {
+    @apply bg-purple-600 hover:bg-purple-700;
+}
+
+#confirmMove:disabled {
+    @apply bg-gray-500 cursor-not-allowed;
+}
 #gameCanvas {
     border: 2px solid #4a5568;
     position: relative;