From e106d8ea65f8fba4a0fd998c9367fa114380b176 Mon Sep 17 00:00:00 2001
From: OpenClaw Engineer <engineer@local.dev>
Date: Thu, 5 Mar 2026 06:39:06 -0600
Subject: [PATCH] Add VIP+ mode to PIN screen and Play Again options

---
 index.php  | 15 +++++++++++----
 js/game.js | 28 +++++++++++++++++++++-------
 styles.css |  7 +++++++
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/index.php b/index.php
index c00767a..3de90bb 100644
--- a/index.php
+++ b/index.php
@@ -21,9 +21,12 @@
         <label for="startPassword">Password</label>
         <input id="startPassword" type="password" required placeholder="Enter password" />
 
-        <label class="inline-option" for="vipMode">
-          <input id="vipMode" type="checkbox" /> VIP mode (6 hearts)
-        </label>
+        <label for="accessMode">Access Mode</label>
+        <select id="accessMode">
+          <option value="standard" selected>Standard (3 hearts)</option>
+          <option value="vip">VIP (6 hearts)</option>
+          <option value="vipPlus">VIP+ (9 hearts)</option>
+        </select>
 
         <label for="difficulty">Difficulty</label>
         <select id="difficulty">
@@ -49,7 +52,11 @@
         <input id="playerName" maxlength="20" required />
         <button type="submit">Save Score</button>
       </form>
-      <button id="restartBtn">Play Again</button>
+      <div class="play-again-row">
+        <button id="restartBtn">Play Again</button>
+        <button id="restartVipBtn" type="button">Play Again (VIP)</button>
+        <button id="restartVipPlusBtn" type="button">Play Again (VIP+)</button>
+      </div>
     </div>
   </div>
 
diff --git a/js/game.js b/js/game.js
index 4a91077..2ef9cb6 100644
--- a/js/game.js
+++ b/js/game.js
@@ -8,11 +8,13 @@ const leaderboardEl = document.getElementById('leaderboard');
 const saveScoreFormEl = document.getElementById('saveScoreForm');
 const playerNameEl = document.getElementById('playerName');
 const restartBtnEl = document.getElementById('restartBtn');
+const restartVipBtnEl = document.getElementById('restartVipBtn');
+const restartVipPlusBtnEl = document.getElementById('restartVipPlusBtn');
 
 const startScreenEl = document.getElementById('startScreen');
 const startFormEl = document.getElementById('startForm');
 const passwordEl = document.getElementById('startPassword');
-const vipModeEl = document.getElementById('vipMode');
+const accessModeEl = document.getElementById('accessMode');
 const difficultyEl = document.getElementById('difficulty');
 const startErrorEl = document.getElementById('startError');
 
@@ -60,7 +62,7 @@ const BIOMES = [
 ];
 
 let audioCtx = null;
-let gameConfig = { vipMode: false, difficulty: 'medium' };
+let gameConfig = { accessMode: 'standard', difficulty: 'medium' };
 
 function ensureAudioCtx() {
   if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@@ -142,8 +144,14 @@ function getBiomeAt(x) {
   return BIOMES.find((b) => x >= b.start && x < b.end) || BIOMES[BIOMES.length - 1];
 }
 
+function getMaxHearts(accessMode) {
+  if (accessMode === 'vipPlus') return 9;
+  if (accessMode === 'vip') return 6;
+  return 3;
+}
+
 function createInitialState(config = gameConfig) {
-  const maxHearts = config.vipMode ? 6 : 3;
+  const maxHearts = getMaxHearts(config.accessMode);
   return {
     running: false,
     dead: false,
@@ -218,7 +226,7 @@ startFormEl.addEventListener('submit', (e) => {
   }
 
   gameConfig = {
-    vipMode: vipModeEl.checked,
+    accessMode: accessModeEl.value,
     difficulty: difficultyEl.value
   };
 
@@ -233,7 +241,8 @@ startFormEl.addEventListener('submit', (e) => {
   startErrorEl.textContent = '';
 });
 
-restartBtnEl.addEventListener('click', () => {
+function restartRun(accessModeOverride = null) {
+  if (accessModeOverride) gameConfig.accessMode = accessModeOverride;
   state = createInitialState(gameConfig);
   keys.clear();
   deathScreenEl.classList.add('hidden');
@@ -242,7 +251,11 @@ restartBtnEl.addEventListener('click', () => {
   scoreSavedThisRun = false;
   setSaveFormBusy(false);
   state.running = true;
-});
+}
+
+restartBtnEl.addEventListener('click', () => restartRun());
+restartVipBtnEl.addEventListener('click', () => restartRun('vip'));
+restartVipPlusBtnEl.addEventListener('click', () => restartRun('vipPlus'));
 
 saveScoreFormEl.addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -307,7 +320,8 @@ function drawBackground() {
   ctx.font = 'bold 20px Arial';
   ctx.fillText(`Biome: ${biome.name}`, 18, 70);
   ctx.fillText(`Difficulty: ${gameConfig.difficulty.toUpperCase()}`, 18, 96);
-  ctx.fillText(gameConfig.vipMode ? 'VIP MODE' : 'STANDARD', 18, 122);
+  const modeLabel = gameConfig.accessMode === 'vipPlus' ? 'VIP+ MODE' : gameConfig.accessMode === 'vip' ? 'VIP MODE' : 'STANDARD';
+  ctx.fillText(modeLabel, 18, 122);
 }
 
 function drawTRex(p) {
diff --git a/styles.css b/styles.css
index 635fb36..4fd14b9 100644
--- a/styles.css
+++ b/styles.css
@@ -67,6 +67,13 @@ label {
 }
 ol { padding-left: 22px; }
 
+.play-again-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  margin-top: 10px;
+}
+
 .heart {
   display: inline-block;
   margin-right: 2px;