Added new feature to main menu, Added mock subscription pop up, and cleaned up some functions.

Author: J-Code26

index.html

@@ -10,7 +10,7 @@
 <div class="page-layout">
 
     <!-- LEFT AD -->
-    <div class="side-ad left-ad">
+    <div id= "leftAd" class="side-ad left-ad">
         <img src="ads/ad_part_1.png" alt="Left Ad">
         <img src="ads/ad_part_2.png" alt="Left Ad 2">
     </div>
@@ -19,10 +19,15 @@
     <div class="main-content">
 
         <h1>Skill Issue Main Menu</h1>
-        <div>
+        <button id="mainMenuBtn" aria-label="Main Menu">Main Menu</button>
+        <div id="menuContainer" style="text-align:center;">
             <button id="startBtn">Start Game</button>
-            <button id="mainMenuBtn" aria-label="Main Menu">Main Menu</button>
-            <button id="loginBtn" aria-label="loginBtn">Login / Sign-up</button>
+            <button id="continueGameBtn" style="display:none;">Continue</button>
+        </div>
+
+        <div class="top-right-buttons">
+            <button id="loginBtn">Login</button>
+            <button id="subscriptionBtn">Subscribe</button>
         </div>
 
         <div id="panel" style="display: none;">
@@ -55,12 +60,21 @@ <h2>Skill Shop</h2>
     </div>
 
     <!-- RIGHT AD -->
-    <div class="side-ad right-ad">
+    <div id= "rightAd" class="side-ad right-ad">
         <img src="ads/ad_part_3.png" alt="Right Ad">
         <img src="ads/ad_part_4.png" alt="Right Ad 2">
     </div>
 
 </div>
+
+<div id="popupWindow" class="hidden">
+    <div class="popup-box">
+        <h3>Skill Issue Subscription</h3>
+        <p>Remove all Advertisements - $4.99</p>
+        <button id="runFuncBtn">Accept</button>
+        <button id="closePopupBtn">Close</button>
+    </div>
+</div>
 <script type="module" src="firebase.js"></script>
 <script type="module" src="script.js"></script>
 </body>

script.js

@@ -307,6 +307,16 @@ const shop = document.getElementById("shop");
 const lifeDisplay = document.getElementById("lifePoints");
 const skillCountDisplay = document.getElementById("skillCount");
 const loginBtn = document.getElementById("loginBtn");
+const subscriptionBtn = document.getElementById("subscriptionBtn");
+const popup = document.getElementById("popupWindow");
+const closeBtn = document.getElementById("closePopupBtn");
+const runFuncBtn = document.getElementById("runFuncBtn");
+const leftAd = document.getElementById("leftAd");
+const rightAd = document.getElementById("rightAd");
+
+const continueGameBtn = document.getElementById("continueGameBtn");
+
+const saved = localStorage.getItem("savedGame");
 // ---------- Show question ----------
 function showQuestion() {
     const q = questions[currentIndex];
@@ -329,12 +339,14 @@ function checkAnswer(selected, correct) {
         skillCount += skillMultiplier;
         message.textContent = "Correct! +1 skill!";
         saveStats();
+        saveGameToLocal();
 
     } else {
         wrongCount++;
         lifePoints--;
         message.textContent = `Wrong! -1 Life Point!`;
         saveStats();
+        saveGameToLocal();
     }
 
     correctDisplay.textContent = correctCount;
@@ -455,29 +467,92 @@ continueBtn.onclick = () => {
 }
 
 mainMenuBtn.onclick = () => {
-    showWelcomeMessage();
     panel.style.display = "none";
-    startBtn.style.display = "inline-block";
     shop.style.display = "none";
 
-    currentIndex = 0;
-    correctCount = 0;
-    wrongCount = 0;
-    skillCount = 0;
-    lifePoints = 5;
-    skillMultiplier = 1;
-
-    correctDisplay.textContent = correctCount;
-    wrongDisplay.textContent = wrongCount;
-    skillDisplay.textContent = skillCount;
-    lifeDisplay.textContent = lifePoints;
+    document.getElementById("menuContainer").style.display = "block";
+    startBtn.style.display = "none";
+    continueGameBtn.style.display = "inline-block";
 };
 
 loginBtn.onclick = () => {
     window.location.href = "LoginPage.html";
 
 }
 
+subscriptionBtn.onclick = () => {
+    popup.classList.remove("hidden");
+}
+
+closeBtn.onclick = () => {
+    popup.classList.add("hidden");
+};
+
+runFuncBtn.onclick = () => {
+    adBanner.classList.add("hidden");
+    leftAd.classList.add("hidden");
+    rightAd.classList.add("hidden");
+    subscriptionBtn.disabled = true;
+    subscriptionBtn.textContent = "(Subscribed)";
+    subscriptionBtn.style.opacity = "0.5";
+    popup.classList.add("hidden");
+};
+
+continueGameBtn.onclick = () => {
+    try {
+        const raw = localStorage.getItem('savedGame');
+        console.log('Continue clicked. raw savedGame:', raw);
+
+        if (!raw) {
+            console.warn('No saved game found in localStorage.');
+            return;
+        }
+
+        const saved = JSON.parse(raw);
+
+        // Validate required keys
+        if (typeof saved.questionIndex !== 'number' ||
+            typeof saved.correct !== 'number' ||
+            typeof saved.wrong !== 'number' ||
+            typeof saved.skill !== 'number' ||
+            typeof saved.life !== 'number') {
+            console.error('Saved game missing required numeric fields:', saved);
+            return;
+        }
+
+        // Restore stats safely
+        currentIndex = saved.questionIndex;
+        correctCount = saved.correct;
+        wrongCount = saved.wrong;
+        skillCount = saved.skill;
+        lifePoints = saved.life;
+
+        // Update UI numbers
+        correctDisplay.textContent = correctCount;
+        wrongDisplay.textContent = wrongCount;
+        skillDisplay.textContent = skillCount;
+        lifeDisplay.textContent = lifePoints;
+
+        // Make sure index is within bounds
+        if (currentIndex < 0) currentIndex = 0;
+        if (currentIndex >= questions.length) {
+            console.warn('Saved questionIndex out of range, resetting to last question.');
+            currentIndex = Math.max(0, questions.length - 1);
+        }
+
+        // showQuestion uses currentIndex global — call without args
+        showQuestion();
+
+        // Hide main-menu/continue and show panel
+        startBtn.style.display = "none";
+        continueGameBtn.style.display = "none";
+        panel.style.display = "block";
+
+        console.log('Game restored. currentIndex =', currentIndex);
+    } catch (err) {
+        console.error('Error while restoring saved game:', err);
+    }
+};
 // --- Initialize display on page load ---
 function initializeDisplay() {
     correctDisplay.textContent = correctCount;
@@ -523,3 +598,18 @@ async function saveStats() {
     }, { merge: true });
 }
 
+if (saved) {
+    continueGameBtn.style.display = "inline-block";
+}
+
+function saveGameToLocal() {
+    const payload = {
+        questionIndex: currentIndex,
+        correct: correctCount,
+        wrong: wrongCount,
+        skill: skillCount,
+        life: lifePoints
+    };
+    localStorage.setItem('savedGame', JSON.stringify(payload));
+}
+

style.css

@@ -66,14 +66,19 @@ button {
   background: #2ecc71;
 }
 
-#loginBtn {
-  position: fixed;
-  right: 12px;
-  top: 12px;
-  z-index: 1100;
-  background: #2ecc71;
+.top-right-buttons {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
+.top-right-buttons button {
+    width: 120px;
+    background: #2ecc71;
+}
 #panel {
   display: none;
   margin-top: 20px;
@@ -125,6 +130,7 @@ button {
   cursor: pointer;
 }
 
+
 /* Rotating ad */
 .rotating-ad {
   margin-top: 20px;
@@ -163,5 +169,50 @@ button {
   }
 }
 
+/* Popup background overlay */
+
+.hidden {
+    display: none;
+}
+
+#popupWindow {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    padding: 20px;
+    border: 2px solid black;
+    z-index: 1000;
+}
+
+
+
+/* Popup box */
+.popup-box {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    min-width: 250px;
+}
+
+.main-content > div {
+    text-align: center;
+}
+
+#startBtn,
+#continueGameBtn {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 12px 20px;
+    font-size: 18px;
+}
+
+#continueGameBtn {
+    display: none;
+}
+
+