From a2c363a95c4d3e1f82b3c0bcfa0cb730037de692 Mon Sep 17 00:00:00 2001
From: EDWIN_ADAMS_V <edwinmontfort2005@gmail.com>
Date: Tue, 21 Oct 2025 17:05:51 +0530
Subject: [PATCH] feat(hint): Apply +10 moves penalty and 3-star cap on hint
 usage #39

---
 index.html    |  4 ----
 src/js/app.js | 32 +++++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 8283e783..673509d1 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,6 @@ <h1 class="title">Vault‑Tec Memory</h1>
 
         <div class="hint">Tip: Try to remember positions — the Pip‑Boy rewards patience.</div>
         
-        <!-- Leaderboard (top-5 per difficulty) -->
         <div style="margin-top:0.8rem">
           <div class="label">Leaderboard</div>
           <div class="lb-list" id="leaderboardList"></div>
@@ -108,7 +107,6 @@ <h1 class="title">Vault‑Tec Memory</h1>
           <button class="btn difficulty-btn" data-diff="hard">Hard</button>
         </div>
         
-        <!-- Small controls: Mute and Play Demo -->
         <div style="display:flex;gap:0.5rem;align-items:center">
           <button class="btn ghost" id="mute" aria-pressed="false">Mute</button>
           <button class="btn ghost" id="playDemo">Play Demo</button>
@@ -117,7 +115,6 @@ <h1 class="title">Vault‑Tec Memory</h1>
 
       <section class="deck" id="deck" aria-live="polite" aria-label="Game cards"></section>
 
-  <!-- confetti canvas used by the win animation -->
   <canvas id="confettiCanvas" aria-hidden="true"></canvas>
 
       <div style="width:100%;display:flex;align-items:center;justify-content:center">
@@ -158,7 +155,6 @@ <h2 id="modalTitle"></h2>
     </div>
   </div>
 
-  <!-- High Scores Modal -->
   <div class="modal-overlay" id="highScoresOverlay" role="dialog" aria-modal="true" aria-hidden="true">
     <div class="modal-box" role="document">
       <h2>High Scores</h2>
diff --git a/src/js/app.js b/src/js/app.js
index 51c7c38f..b703c243 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -73,6 +73,8 @@
   let moveLimitEnabled = false;
   let moveLimitMax = 0;
   let remainingMoves = 0;
+  // NEW: State for hint penalty
+  let hintUsed = false; 
 
   // toggle listener
   moveLimitToggle.addEventListener('change', () => {
@@ -283,9 +285,18 @@
     pairsEl.textContent = `${matched} / ${totalTiles}`;
     // star logic per difficulty thresholds
     const [threeThresh, twoThresh] = difficulties[selectedDifficulty].stars;
-    if (moves <= threeThresh) starCount = 3;
-    else if (moves <= twoThresh) starCount = 2;
-    else starCount = 1;
+    let newStarCount;
+    if (moves <= threeThresh) newStarCount = 3;
+    else if (moves <= twoThresh) newStarCount = 2;
+    else newStarCount = 1;
+
+    // Apply Hint Penalty: Cap stars at 2 if hint was used, effectively preventing 3 stars.
+    if (hintUsed && newStarCount === 3) {
+      newStarCount = 2;
+    }
+    
+    starCount = newStarCount;
+    
     Array.from(starsEl.children).forEach((el, idx) => {
       el.classList.toggle('star--lost', idx + 1 > starCount);
     });
@@ -299,6 +310,8 @@
     matched = 0;
     moves = 0;
     starCount = 3;
+    // NEW: Reset hint state
+    hintUsed = false;
     updateUI();
     started = false;
     // enable hint based on difficulty
@@ -435,6 +448,11 @@
   function showWinModal() {
     modalTitle.textContent = 'CONGRATULATIONS, Vault Dweller';
     modalMessage.textContent = 'You matched all pairs — Vault‑Tec is proud.';
+    // Add warning if hint was used
+    if (hintUsed) {
+      modalMessage.textContent += ' (Note: Hint used, score capped at 2 Stars.)';
+    }
+
     modalStats.innerHTML = '';
     const elapsed = timeTotal - timeLeft;
     modalStats.appendChild(statCard('Time', formatTime(Math.floor(elapsed / 60), elapsed % 60)));
@@ -485,6 +503,14 @@
 
   // hint
   hintBtn.addEventListener('click', () => {
+    // Apply Hint Penalty
+    if (hintBtn.style.display !== 'none' && !locked) {
+        moves += 10; // Penalty: +10 moves
+        hintUsed = true; // Penalty: Mark hint as used
+        updateUI(); // Reflect the penalty in the score
+        playTone(150, 0.10); // Play a negative tone for penalty
+    }
+
     const nodes = Array.from(deckEl.querySelectorAll('.card:not(.matched):not(.is-flip)'));
     if (nodes.length < 2) return;
     const grouped = {};