feat: add game instructions modal for new players

index.html

@@ -21,7 +21,33 @@ <h1>2048</h1>
       <button id="new-game">New Game</button>
       <button id="undo" disabled>Undo</button>
       <button id="theme-toggle">🌙</button>
+      <button id="how-to-play">How to Play</button>
     </header>
+
+    <!-- Instructions Modal -->
+    <div id="instructions-modal" class="modal">
+      <div class="modal-content">
+        <h2>How to Play 2048</h2>
+        <div class="instructions-text">
+          <h3>Goal</h3>
+          <p>Combine tiles to create the number 2048! Keep combining to achieve higher scores.</p>
+
+          <h3>Controls</h3>
+          <ul>
+            <li>Use arrow keys (←↑↓→) to move tiles</li>
+            <li>On mobile, swipe in any direction</li>
+          </ul>
+
+          <h3>Rules</h3>
+          <ul>
+            <li>Tiles with the same number merge when they touch</li>
+            <li>Each move causes a new tile to appear</li>
+            <li>Plan your moves to prevent the board from filling up!</li>
+          </ul>
+        </div>
+        <button id="close-instructions">Got it!</button>
+      </div>
+    </div>
     <div class="grid-wrapper">
       <div class="grid-container">
         <div class="grid">

script.js

@@ -9,19 +9,49 @@ const messageText = messageBox.querySelector("p");
 const scoreElement = document.getElementById("score");
 const bestScoreElement = document.getElementById("best-score");
 
+// Instructions Modal Elements
+const howToPlayBtn = document.getElementById("how-to-play");
+const instructionsModal = document.getElementById("instructions-modal");
+const closeInstructionsBtn = document.getElementById("close-instructions");
+
 let grid = [];
 let score = 0;
 let bestScore = 0;
 let gameWon = false;
 
 // === Initialize Game ===
-document.addEventListener("DOMContentLoaded", startNewGame);
+document.addEventListener("DOMContentLoaded", () => {
+  startNewGame();
+
+  // Show instructions modal on first visit
+  if (!localStorage.getItem("2048_instructions_shown")) {
+    instructionsModal.style.display = "flex";
+    localStorage.setItem("2048_instructions_shown", "true");
+  }
+});
+
 newGameBtn.addEventListener("click", startNewGame);
 tryAgainBtn.addEventListener("click", () => startNewGame());
 continueBtn.addEventListener("click", () => {
   messageBox.style.display = "none"; // Hide win message
 });
 
+// Instructions Modal Event Listeners
+howToPlayBtn.addEventListener("click", () => {
+  instructionsModal.style.display = "flex";
+});
+
+closeInstructionsBtn.addEventListener("click", () => {
+  instructionsModal.style.display = "none";
+});
+
+// Close modal when clicking outside
+instructionsModal.addEventListener("click", (e) => {
+  if (e.target === instructionsModal) {
+    instructionsModal.style.display = "none";
+  }
+});
+
 // === Start / Reset Game ===
 function startNewGame() {
   grid = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0));

style.css

@@ -71,6 +71,85 @@ body {
   height: 100%;
 }
 
+/* Instructions Modal */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background-color: #faf8ef;
+  padding: 2rem;
+  border-radius: 8px;
+  max-width: 90%;
+  width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content h2 {
+  color: #776e65;
+  margin-top: 0;
+  text-align: center;
+}
+
+.modal-content h3 {
+  color: #776e65;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.instructions-text {
+  color: #776e65;
+  line-height: 1.5;
+}
+
+.instructions-text ul {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+#close-instructions {
+  display: block;
+  margin: 1.5em auto 0;
+  padding: 10px 20px;
+  background-color: #8f7a66;
+  border: none;
+  border-radius: 3px;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+#close-instructions:hover {
+  background-color: #9f8a76;
+}
+
+#how-to-play {
+  margin-left: 8px;
+  padding: 5px 10px;
+  background-color: #8f7a66;
+  border: none;
+  border-radius: 3px;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+#how-to-play:hover {
+  background-color: #9f8a76;
+}
+
 @media (max-width: 500px) {
   .game-container {
     max-width: 98vw;
@@ -83,5 +162,9 @@ body {
     gap: 8px;
     padding: 8px;
   }
+  .modal-content {
+    padding: 1.5rem;
+    font-size: 0.9em;
+  }
 }