Initial setup page revamp

mhawryluk · Jan 4, 2024 · e9d3e4c · e9d3e4c
1 parent 5e8a4ed
commit e9d3e4c
Show file tree

Hide file tree

Showing 4 changed files with 266 additions and 47 deletions.
diff --git a/css/style.css b/css/style.css
@@ -34,6 +34,7 @@ body {
     display: flex;
     align-items: flex-end;
     transition: all var(--transition-duration);
+    overflow: hidden;
 }
 
 .dot-bg {
@@ -61,6 +62,12 @@ h1 {
     transition: all var(--transition-duration);
 }
 
+button:hover,
+h1:hover {
+    color: white;
+    transition: none;
+}
+
 main {
     margin-top: auto;
     opacity: 0;
@@ -81,6 +88,8 @@ button {
     background-color: transparent;
 }
 
+/* side bar */
+
 side {
     position: absolute;
     right: 0;
@@ -108,52 +117,157 @@ side {
         translate var(--transition-duration);
 }
 
-.popup {
+/* initial setup popup */
+
+.initial-setup * {
+    margin: 0;
+}
+
+.initial-setup {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    color: var(--green-text);
     width: 75%;
     height: 65%;
     z-index: 3;
-    background-color: var(--green-bg);
     padding: 50px;
+
+    background-color: #2F4858;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    color: var(--yellow-text);
+    border-radius: 1rem;
+
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     text-align: center;
+
     overflow: auto;
+    gap: 3rem;
+
+    transition:
+        color var(--transition-duration);
 }
 
-.popup div {
+.initial-setup div {
     font-size: 2rem;
 }
 
-.popup button {
+.initial-setup h2 {
+    margin-bottom: 0.75rem;
+}
+
+.initial-setup button {
     font-size: 2.25rem;
     color: inherit;
     padding: 0 1rem;
     border-radius: 0.5rem;
-    margin-top: 1rem;
     cursor: pointer;
 }
 
-button:hover,
-h1:hover {
-    color: white;
-    transition: none;
+.player-number input {
+    display: none;
 }
 
-.button-row {
+.player-number label {
+    padding-inline: 1rem;
+    aspect-ratio: 1;
+}
+
+.player-number input:checked+label {
+    border-bottom: var(--yellow-text) 5px solid;
+}
+
+.player-number-row {
     display: flex;
     justify-content: center;
-    gap: 30px;
-    margin-bottom: 30px;
+    align-items: center;
+    gap: 2rem;
+}
+
+.opponents-section {
+    color: var(--red-text);
+}
+
+.opponents-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
 }
 
+.opponents-container button {
+    margin: 0;
+}
+
+.opponent {
+    border: var(--red-text) 2px solid;
+    border-radius: 0.75rem;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem;
+    gap: 1rem;
+}
+
+.initial-setup svg {
+    fill: var(--red-text);
+}
+
+.opponent .robot {
+    width: 3rem;
+}
+
+.opponent .delete {
+    padding: 0;
+    padding-left: 1rem;
+}
+
+.opponent .delete svg {
+    width: 2rem;
+}
+
+.initial-setup .play {
+    color: var(--green-text);
+}
+
+.opponent select {
+    appearance: none;
+    width: max-content;
+    background: var(--red-bg);
+    padding: 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+    color: inherit;
+}
+
+.initial-setup button:hover {
+    color: white;
+}
+
+.initial-setup button:hover svg {
+    fill: white;
+}
+
+.initial-setup label:hover {
+    color: white;
+}
+
+.add-opponent {
+    order: 999;
+}
+
+.delete-opponent {
+    order: 0;
+}
+
+/* scoreboard */
+
 .scoreboard {
     position: relative;
     display: flex;

diff --git a/index.html b/index.html
@@ -26,21 +26,54 @@
         <h1>Ludo 3D</h1>
     </header>
 
-    <div class="popup">
-        <div>Select number of players:</div>
-        <div class="button-row">
-            <button id="2-players-button">2</button>
-            <button id="3-players-button">3</button>
-            <button id="4-players-button">4</button>
-        </div>
+    <div class="initial-setup">
 
-        <div>or play one-on-one against the computer</div>
-        <div>Select difficulty:</div>
+        <section class="player-number">
+            <h2>Select number of players</h2>
 
-        <div class="button-row">
-            <button id="easy-mode">Easy</button>
-            <button id="hard-mode">Hard</button>
-        </div>
+            <div class="player-number-row">
+                <input type="radio" id="players-2" name="number-players">
+                <label for="players-2">2</label>
+
+                <input type="radio" id="players-3" name="number-players">
+                <label for="players-3">3</label>
+
+                <input type="radio" id="players-4" name="number-players" checked>
+                <label for="players-4">4</label>
+            </div>
+        </section>
+
+
+        <section class="opponents-section">
+            <h2>Add computer opponents</h2>
+            <div class="opponents-container">
+                <button class="delete-opponent">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path d="M0 9h24v6h-24z" />
+                    </svg>
+                </button>
+
+                <button class="add-opponent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
+                    </svg></button>
+
+                <div class="opponent">
+                    <svg class="robot" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
+                        viewBox="0 0 48 48">
+                        <path
+                            d="M42.466,17.023c-0.839,0-1.52,0.685-1.52,1.531c0,2.359-1.108,4.552-2.946,6.034V7.059C38,5.921,36.956,5,35.666,5H12.333 C11.044,5,10,5.921,10,7.059v18.856C6.401,28.048,4,32.256,4,36.5C4,37.329,4.672,38,5.5,38S7,37.329,7,36.5 c0-2.515,1.177-5.079,3-6.826v8.267C10,39.079,11.044,40,12.333,40H16v4.5c0,0.829,0.672,1.5,1.5,1.5s1.5-0.671,1.5-1.5V40h10v4.5 c0,0.829,0.672,1.5,1.5,1.5s1.5-0.671,1.5-1.5V40h3.667C36.956,40,38,39.079,38,37.941v-9.725c3.665-1.905,5.987-5.6,5.987-9.662 C43.987,17.708,43.305,17.023,42.466,17.023z M17.5,12c0.828,0,1.5,0.672,1.5,1.5S18.328,15,17.5,15S16,14.328,16,13.5 S16.672,12,17.5,12z M21,31.5c0,0.276-0.224,0.5-0.5,0.5H19v1.5c0,0.276-0.224,0.5-0.5,0.5h-1c-0.276,0-0.5-0.224-0.5-0.5V32h-1.5 c-0.276,0-0.5-0.224-0.5-0.5v-1c0-0.276,0.224-0.5,0.5-0.5H17v-1.5c0-0.276,0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5V30h1.5 c0.276,0,0.5,0.224,0.5,0.5V31.5z M27.317,20.142c-0.908,0.303-1.863,0.454-2.817,0.454s-1.909-0.151-2.817-0.454l-0.657-0.219 c-0.786-0.262-1.211-1.112-0.948-1.897c0.262-0.786,1.11-1.212,1.897-0.948l0.657,0.219c1.205,0.401,2.531,0.401,3.736,0 l0.657-0.219c0.787-0.263,1.635,0.162,1.897,0.948c0.263,0.786-0.162,1.635-0.948,1.897L27.317,20.142z M30,34 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C32,33.105,31.105,34,30,34z M30.5,15c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S31.328,15,30.5,15z">
+                        </path>
+                    </svg>
+                    <select>
+                        <option>Easy</option>
+                        <option>Hard</option>
+                    </select>
+                </div>
+            </div>
+        </section>
+
+        <button class="play">Play!</button>
     </div>
 
     <main>

diff --git a/js/game.js b/js/game.js
@@ -1,11 +1,9 @@
 const infoDiv = document.getElementById('info');
 const currentPlayerDiv = document.getElementById('current-player');
 const rollDiceButton = document.getElementById('roll-button');
-const popup = document.querySelector('.popup');
 const root = document.querySelector(':root');
 const side = document.querySelector('side');
 const main = document.querySelector('main');
-const h1 = document.querySelector('h1');
 const dice = document.querySelector('.dice');
 
 const tokens = {};
@@ -14,10 +12,9 @@ let game;
 
 class Game {
 
-    constructor(players, computerOpponentIndices = [], computerOpponentLevel = 'easy') {
+    constructor(players, computerOpponentLevels = []) {
         this.players = players;
         this.numberOfPlayers = players.length;
-        this.computerOpponentIndices = computerOpponentIndices; // which of the indices of players are robots
         this.currentPlayerIndex = 0;
         this.currentPossibleMoves = [];
         this.lastRolledValue = 0;
@@ -60,8 +57,11 @@ class Game {
 
         // create computer components
         this.computerOpponents = {};
-        for (let index of this.computerOpponentIndices) {
-            this.computerOpponents[index] = new (computerOpponentLevel === 'hard' ? MonteCarloOpponent : ComputerOpponent)(this, this.players[index]);
+        this.computerOpponentIndices = []; // which of the indices of players are robots
+        for (let i = 0; i < computerOpponentLevels.length; i++) {
+            const index = i + this.numberOfPlayers - computerOpponentLevels.length;
+            this.computerOpponentIndices.push(index);
+            this.computerOpponents[index] = new (computerOpponentLevels[i] === 'Hard' ? MonteCarloOpponent : ComputerOpponent)(this, this.players[index]);
         }
     }
 
@@ -347,16 +347,10 @@ window.addEventListener('keypress', event => {
     }
 });
 
-function setPlayers(players, computerOpponentIndices, computerOpponentLevel) {
-    game = new Game(players, computerOpponentIndices, computerOpponentLevel);
+function setPlayers(players, computerOpponentLevels) {
+    game = new Game(players, computerOpponentLevels);
 
-    popup.style.display = 'none';
-    main.style.opacity = 1;
-
-    side.style.translate = '0';
-
-    h1.style.left = '10rem';
-    h1.style.fontSize = '2rem';
+    hideSetupPage();
 
     viewPoints['blue'].setAttribute('set_bind', 'true');
 }