From 85e2bbb48bfcc5490ed89a3e0bbab03f002dd5b0 Mon Sep 17 00:00:00 2001
From: OpenClaw Engineer <engineer@local.dev>
Date: Thu, 5 Mar 2026 06:55:38 -0600
Subject: [PATCH] Simplify death screen restart and add biome parallax visuals

---
 index.php  |  6 +-----
 js/game.js | 50 ++++++++++++++++++++++++++++++++++++++++++--------
 styles.css |  7 +------
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/index.php b/index.php
index 3de90bb..ae0c64e 100644
--- a/index.php
+++ b/index.php
@@ -52,11 +52,7 @@
         <input id="playerName" maxlength="20" required />
         <button type="submit">Save Score</button>
       </form>
-      <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>
+      <button id="restartBtn">Restart</button>
     </div>
   </div>
 
diff --git a/js/game.js b/js/game.js
index 2ef9cb6..1cdb954 100644
--- a/js/game.js
+++ b/js/game.js
@@ -8,8 +8,6 @@ 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');
@@ -241,8 +239,7 @@ startFormEl.addEventListener('submit', (e) => {
   startErrorEl.textContent = '';
 });
 
-function restartRun(accessModeOverride = null) {
-  if (accessModeOverride) gameConfig.accessMode = accessModeOverride;
+function restartToStartScreen() {
   state = createInitialState(gameConfig);
   keys.clear();
   deathScreenEl.classList.add('hidden');
@@ -250,12 +247,16 @@ function restartRun(accessModeOverride = null) {
   saveEligible = false;
   scoreSavedThisRun = false;
   setSaveFormBusy(false);
-  state.running = true;
+  state.running = false;
+  state.dead = false;
+  accessModeEl.value = gameConfig.accessMode;
+  difficultyEl.value = gameConfig.difficulty;
+  passwordEl.value = '';
+  startErrorEl.textContent = '';
+  startScreenEl.classList.remove('hidden');
 }
 
-restartBtnEl.addEventListener('click', () => restartRun());
-restartVipBtnEl.addEventListener('click', () => restartRun('vip'));
-restartVipPlusBtnEl.addEventListener('click', () => restartRun('vipPlus'));
+restartBtnEl.addEventListener('click', restartToStartScreen);
 
 saveScoreFormEl.addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -282,12 +283,45 @@ saveScoreFormEl.addEventListener('submit', async (e) => {
   }
 });
 
+function drawBiomeParallax(biome) {
+  const farOffset = -(state.cameraX * 0.15);
+  const midOffset = -(state.cameraX * 0.35);
+
+  if (biome.name === 'Plains') {
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    for (let i = -1; i < 6; i++) ctx.fillRect(((i * 220 + farOffset) % 1300), 70 + (i % 2) * 18, 120, 22);
+    ctx.fillStyle = 'rgba(72,140,72,0.55)';
+    for (let i = -1; i < 8; i++) ctx.fillRect(((i * 170 + midOffset) % 1500), groundY - 90, 90, 90);
+  } else if (biome.name === 'Desert') {
+    ctx.fillStyle = 'rgba(232,187,120,0.55)';
+    for (let i = -1; i < 7; i++) ctx.fillRect(((i * 190 + farOffset) % 1500), groundY - 120, 160, 120);
+    ctx.fillStyle = 'rgba(180,135,70,0.6)';
+    for (let i = -1; i < 10; i++) ctx.fillRect(((i * 140 + midOffset) % 1600), groundY - 70, 26, 70);
+  } else if (biome.name === 'Jungle') {
+    ctx.fillStyle = 'rgba(40,106,50,0.45)';
+    for (let i = -1; i < 9; i++) ctx.fillRect(((i * 150 + farOffset) % 1600), groundY - 170, 80, 170);
+    ctx.fillStyle = 'rgba(27,78,38,0.62)';
+    for (let i = -1; i < 12; i++) ctx.fillRect(((i * 118 + midOffset) % 1700), groundY - 115, 40, 115);
+  } else if (biome.name === 'Snow') {
+    ctx.fillStyle = 'rgba(255,255,255,0.75)';
+    for (let i = -1; i < 8; i++) ctx.fillRect(((i * 180 + farOffset) % 1600), groundY - 145, 140, 145);
+    ctx.fillStyle = 'rgba(196,220,242,0.7)';
+    for (let i = -1; i < 10; i++) ctx.fillRect(((i * 140 + midOffset) % 1700), groundY - 92, 95, 92);
+  } else if (biome.name === 'Lava') {
+    ctx.fillStyle = 'rgba(98,58,54,0.7)';
+    for (let i = -1; i < 8; i++) ctx.fillRect(((i * 185 + farOffset) % 1600), groundY - 150, 150, 150);
+    ctx.fillStyle = 'rgba(255,128,40,0.45)';
+    for (let i = -1; i < 14; i++) ctx.fillRect(((i * 112 + midOffset) % 1800), groundY - 85, 18, 85);
+  }
+}
+
 function drawBackground() {
   const camCenter = state.cameraX + canvas.width / 2;
   const biome = getBiomeAt(camCenter);
 
   ctx.fillStyle = biome.sky;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
+  drawBiomeParallax(biome);
   ctx.fillStyle = biome.ground;
   ctx.fillRect(0, groundY, canvas.width, canvas.height - groundY);
 
diff --git a/styles.css b/styles.css
index 4fd14b9..5ed5413 100644
--- a/styles.css
+++ b/styles.css
@@ -67,12 +67,7 @@ label {
 }
 ol { padding-left: 22px; }
 
-.play-again-row {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-  margin-top: 10px;
-}
+/* removed unused play-again-row styles */
 
 .heart {
   display: inline-block;