UI Improve, Score Buttom Bug Fix

Minemetero · Jun 5, 2024 · 3798e0e · 3798e0e
1 parent 54be814
commit 3798e0e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -26,20 +26,22 @@ <h2>Players:</h2>
         </div>
 
         <div class="scoreboard" id="scoreboard" style="display: none;">
-            <div class="scoreboard-section" id="playerContainer">
-                <h2>Players' Scores</h2>
-                <ul id="playerScoreList"></ul>
-            </div>
-            <div class="scoreboard-section" id="matchContainer">
-                <h2>Current Match</h2>
-                <div id="currentMatch"></div>
-                <div class="result-group">
-                    <p id="result"></p>
+            <div class="scoreboard-inner">
+                <div class="scoreboard-section" id="playerContainer">
+                    <h2>Players' Scores</h2>
+                    <ul id="playerScoreList"></ul>
+                </div>
+                <div class="scoreboard-section" id="matchContainer">
+                    <h2>Current Match</h2>
+                    <div id="currentMatch"></div>
+                    <div class="result-group">
+                        <p id="result"></p>
+                    </div>
+                </div>
+                <div class="scoreboard-section" id="orderContainer">
+                    <h2>Match Order</h2>
+                    <ul id="matchOrderList"></ul>
                 </div>
-            </div>
-            <div class="scoreboard-section" id="orderContainer">
-                <h2>Match Order</h2>
-                <ul id="matchOrderList"></ul>
             </div>
             <div class="buttons">
                 <button class="reset-button" id="resetButton">Reset</button>

diff --git a/script.js b/script.js
@@ -46,7 +46,7 @@ function startGame() {
     document.getElementById('playerInputGroup').style.display = 'none';
     document.getElementById('playerListGroup').style.display = 'none';
     document.getElementById('initialButtons').style.display = 'none';
-    document.getElementById('scoreboard').style.display = 'flex';
+    document.getElementById('scoreboard').style.display = 'block';
     updatePlayerScoreList();
     startNewMatch();
 }

diff --git a/styles.css b/styles.css
@@ -25,7 +25,7 @@ body {
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    width: 800px;
+    width: 900px;
     text-align: center;
     transition: all 0.3s ease;
 }
@@ -103,6 +103,10 @@ label {
 }
 
 .scoreboard {
+    display: none;
+}
+
+.scoreboard-inner {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;