Instruction added

css/style.css

@@ -317,4 +317,33 @@ side {
 
 .green .dot {
     background-color: var(--green-text);
-}
+}
+
+.instruction-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 10px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.instruction-popup {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 0.5rem;
+    background-color: #f9f9f9;
+    padding: 15px;
+    z-index: 1;
+}
+
+.instruction-popup p {
+    font-size: 20px;
+}
+
+.show-instruction {
+    display: block;
+}

index.html

@@ -74,6 +74,25 @@ <h2>Add computer opponents</h2>
         </section>
 
         <button class="play">Play!</button>
+
+        <button class="instruction-button" onclick="toggleInstructionPopup()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" style="fill:#71a5de">
+                <path d="M0 0h24v24H0V0zm2 17h2v2H2zm0-4h2v2H2zm0-4h2v2H2zm0-4h2v2H2zm4 12h14v-2H6zm0-4h14v-2H6zm0-4h14V3H6z"/>
+            </svg>
+        </button>
+
+        <div class="instruction-popup" id="instructionPopup">
+            <p>In the first step, you choose the number of players and decide how many opponents will be controlled by the computer. 
+                Next, a game of Ludo will be played. The first move can be made after rolling a six. The player who gets all their tokens to the central area first wins. 
+                If a player lands on the same space as an opponent, it sends the opponent's token back to the starting area. 
+                There are "safe spaces" on the starting point and on colored squares on the board.</p>
+            <button onclick="toggleInstructionPopup()">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:#71a5de">
+                    <path d="M19 6.41l-1.41-1.41L12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+                </svg>
+            </button>
+        </div>
+
     </div>
 
     <main>

js/setupPage.js

@@ -7,6 +7,11 @@ const playButton = document.querySelector('.play');
 
 const opponentsContainer = document.querySelector('.opponents-container');
 
+function toggleInstructionPopup() {
+    const instructionPopup = document.getElementById('instructionPopup');
+    instructionPopup.classList.toggle('show-instruction');
+}
+
 let playersNumber = 4;
 
 document.getElementById('players-2').addEventListener('change', () => {