diff --git a/css/style.css b/css/style.css index f03485e..577685b 100644 --- a/css/style.css +++ b/css/style.css @@ -317,4 +317,33 @@ side { .green .dot { background-color: var(--green-text); -} \ No newline at end of file +} + +.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; +} diff --git a/index.html b/index.html index 9a4e426..5486542 100644 --- a/index.html +++ b/index.html @@ -74,6 +74,25 @@

Add computer opponents

+ + + +
+

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.

+ +
+
diff --git a/js/setupPage.js b/js/setupPage.js index 283b5cc..b613bd1 100644 --- a/js/setupPage.js +++ b/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', () => {