Update game.html

game.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!-- VERSION: DOUBLE-JUMP-MINUTES-ACTIVATION v12 -->
 <!-- VERSION: DOUBLE-JUMP-FIX + POLISH-PASS-1 v11 -->
 <!-- VERSION: FIXED-GREEN-PLATFORM-SPEED + FIXED-RUNTIME + FIXED-BOOK-PATTERN + INFINITE-STABLE-BOOKCASE + FULLSCREEN + TALL-AUTO-EXTENDING-WORLD + ALWAYS-VISIBLE-JUMP v8 -->
 <html>
@@ -457,9 +458,9 @@ function init(){
   score = 0;
   landingCount = 0;
   scoringStarted = false;
-  // Owning Double Jump means every new run starts with one extra jump ready.
-  // Landing on a platform recharges it after it is used.
-  doubleJumpReady = ownsDoubleJump;
+  // Buying Double Jump unlocks the feature, but it only works while
+  // Double Jump time is active. Use the on-screen button to choose minutes.
+  doubleJumpReady = ownsDoubleJump && timeLeftSeconds > 0;
   landingParticles = [];
   gameOverAngle = 0;
 }
@@ -506,7 +507,7 @@ function triggerGameOver(){
 }
 
 function attemptDoubleJump(){
-  if(state !== 'playing' || !ownsDoubleJump || !doubleJumpReady || !player) return false;
+  if(state !== 'playing' || !ownsDoubleJump || timeLeftSeconds <= 0 || !doubleJumpReady || !player) return false;
 
   doubleJumpReady = false;
   player.vy = BOUNCE_V;
@@ -530,14 +531,33 @@ function openCustomMinutesPurchase(){
 }
 
 function openMinutesPrompt(){
-  const input = window.prompt('How many minutes do you want to use? (' + minutesBank + ' banked)');
+  if(!ownsDoubleJump){
+    playBeep(150, 0.2);
+    return;
+  }
+
+  if(minutesBank <= 0){
+    window.alert('You do not have any Double Jump minutes banked. Buy minutes in the Shop first.');
+    playBeep(150, 0.2);
+    return;
+  }
+
+  const input = window.prompt(
+    'How many minutes of Double Jump do you want to use? (' +
+    minutesBank + ' minute' + (minutesBank === 1 ? '' : 's') + ' banked)'
+  );
+
   if(input === null) return;
+
   let n = Math.floor(Number(input));
   if(!isFinite(n) || n <= 0) return;
+
   n = Math.min(n, minutesBank);
   if(n <= 0) return;
+
   minutesBank -= n;
   timeLeftSeconds += n * 60;
+  doubleJumpReady = true;
   saveGame();
   playBeep(900, 0.15);
 }
@@ -770,7 +790,7 @@ function update(){
         if(coinsCollected >= DOUBLE_JUMP_COST){
           coinsCollected -= DOUBLE_JUMP_COST;
           ownsDoubleJump = true;
-          doubleJumpReady = true;
+          doubleJumpReady = false;
           // Save ownership in two places so the upgrade cannot disappear if
           // the rest of the JSON save is ever replaced or corrupted.
           localStorage.setItem(DOUBLE_JUMP_OWNED_KEY, "true");
@@ -800,7 +820,7 @@ function update(){
   pointerWasDown = mouse.pressed;
   if(pauseClicked && hitRect(mouse.x, mouse.y, PAUSE_BTN)){ state = 'paused'; return; }
 
-  const minutesBtnVisible = ownsDoubleJump && minutesBank > 0;
+  const minutesBtnVisible = ownsDoubleJump;
   if(pauseClicked && hitRect(mouse.x, mouse.y, JUMP_BTN)){ attemptDoubleJump(); }
   if(pauseClicked && minutesBtnVisible && hitRect(mouse.x, mouse.y, MINUTES_BTN)){ openMinutesPrompt(); return; }
   const jumpInputDown = keys[' '] || keys['w'] || keys['W'] || keys['ArrowUp'];
@@ -908,7 +928,7 @@ function update(){
         wobble = 8;
         spawnLandingParticles(player.x, platTop);
         lastLandedY = platTop;
-        if(ownsDoubleJump) doubleJumpReady = true;
+        doubleJumpReady = ownsDoubleJump && timeLeftSeconds > 0;
         playBeep(500 + Math.random()*200, 0.1);
         landingCount++;
         if(landingCount === 2){ scoringStarted = true; baseline = player.y; }
@@ -1409,9 +1429,10 @@ function draw(){
       screen.drawText('BUY - ' + DOUBLE_JUMP_COST, DJ_BUY_BTN.x, DJ_BUY_BTN.y, 17, '#ffffff');
     }
 
-    // Minutes
-    screen.drawText('MINUTES', -175, 55, 24, '#333');
+    // Double Jump minutes
+    screen.drawText('DOUBLE JUMP MINUTES', -175, 55, 22, '#333');
     screen.drawText('You have ' + minutesBank + ' minute' + (minutesBank===1?'':'s') + ' banked.', -175, 26, 14, '#666');
+    screen.drawText('Use them with the purple button during the game.', -175, 5, 12, '#777');
     MINUTE_PACKS.forEach((pack, i) => {
       const btn = MINUTE_PACK_BTNS[i];
       const afford = coinsCollected >= pack.cost;
@@ -1462,8 +1483,9 @@ function draw(){
     screen.drawRect(PAUSE_BTN.x-6, PAUSE_BTN.y, 5, 18, '#ffffff');
     screen.drawRect(PAUSE_BTN.x+6, PAUSE_BTN.y, 5, 18, '#ffffff');
 
-    // Always show the JUMP button. It stays gray until Double Jump is purchased.
-    const jumpButtonColor = !ownsDoubleJump
+    // Always show the JUMP button. Buying the upgrade unlocks it, but
+    // Double Jump time must also be active before the jump can be used.
+    const jumpButtonColor = !ownsDoubleJump || timeLeftSeconds <= 0
       ? '#777777'
       : (doubleJumpReady ? '#ff9f3f' : '#b97842');
 
@@ -1471,12 +1493,21 @@ function draw(){
     screen.drawCircle(JUMP_BTN.x, JUMP_BTN.y, 40, '#ffffff');
     screen.drawCircle(JUMP_BTN.x, JUMP_BTN.y, 34, jumpButtonColor);
     screen.drawText('JUMP', JUMP_BTN.x, JUMP_BTN.y+5, 15, '#ffffff');
-    screen.drawText(!ownsDoubleJump ? 'LOCKED' : (doubleJumpReady ? 'READY' : 'USED'),
-      JUMP_BTN.x, JUMP_BTN.y-14, 9, '#ffffff');
-    if(ownsDoubleJump && minutesBank > 0){
-      screen.drawRect(MINUTES_BTN.x, MINUTES_BTN.y, MINUTES_BTN.w, MINUTES_BTN.h, '#8a5cff');
-      screen.drawText('ADD', MINUTES_BTN.x, MINUTES_BTN.y+13, 16, '#ffffff');
-      screen.drawText('MINUTES', MINUTES_BTN.x, MINUTES_BTN.y-9, 16, '#ffffff');
+
+    let jumpStatus = 'LOCKED';
+    if(ownsDoubleJump && timeLeftSeconds <= 0) jumpStatus = 'NO TIME';
+    else if(ownsDoubleJump && doubleJumpReady) jumpStatus = 'READY';
+    else if(ownsDoubleJump) jumpStatus = 'USED';
+    screen.drawText(jumpStatus, JUMP_BTN.x, JUMP_BTN.y-14, 9, '#ffffff');
+
+    // This button is the way to activate Double Jump time. It is visible
+    // on both desktop and mobile after the upgrade has been purchased.
+    if(ownsDoubleJump){
+      const useTimeColor = minutesBank > 0 ? '#8a5cff' : '#777777';
+      screen.drawRect(MINUTES_BTN.x, MINUTES_BTN.y, MINUTES_BTN.w, MINUTES_BTN.h, useTimeColor);
+      screen.drawText(timeLeftSeconds > 0 ? 'ADD TIME' : 'USE DOUBLE JUMP',
+        MINUTES_BTN.x, MINUTES_BTN.y+12, timeLeftSeconds > 0 ? 15 : 13, '#ffffff');
+      screen.drawText(minutesBank + ' min banked', MINUTES_BTN.x, MINUTES_BTN.y-13, 11, '#ffffff');
     }
     if(timeLeftSeconds > 0){
       const totalSec = Math.ceil(timeLeftSeconds);
@@ -1535,7 +1566,10 @@ function loop(now){
   if(lastFrameTime === null) lastFrameTime = now;
   const dtSec = (now - lastFrameTime) / 1000;
   lastFrameTime = now;
-  if(timeLeftSeconds > 0) timeLeftSeconds = Math.max(0, timeLeftSeconds - dtSec);
+  if(timeLeftSeconds > 0){
+    timeLeftSeconds = Math.max(0, timeLeftSeconds - dtSec);
+    if(timeLeftSeconds === 0) doubleJumpReady = false;
+  }
   update();
   draw();
   requestAnimationFrame(loop);