style: update colours and style for game.html

dvfrancis · Oct 27, 2024 · aa46715 · aa46715
1 parent 9dee986
commit aa46715
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 29 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -200,11 +200,36 @@ input {
 #wager-info-group {
   height: 5rem;
   width: 15rem;
-  border: 5px goldenrod solid;
+  border-top: 7px rgba(255, 255, 255, 0.5) solid;
+  border-bottom: 3px rgba(255, 255, 255, 0.4) solid;
+  /* border-radius: 10px; */
+  justify-content: center;
+}
+
+#aces-info,
+#round-info,
+#card-info,
+#points-info,
+#wager {
+  font-family: 'Hind Madurai', serif;
+  font-size: 1.25rem;
 }
 
 #game-messages {
-  border: 5px goldenrod solid;
+  font-family: 'Hind Madurai', serif;
+  font-size: 1.25rem;
+  width: 75%;
+  text-align: center;
+  border: 10px rgba(237, 30, 0, 0.4) solid;
+  border-radius: 10px;
+  justify-content: center;
+  height: 100%;
+}
+
+#info-title {
+  font-family: 'Lora', serif;
+  font-size: 1.25rem;
+  font-weight: 700;
 }
 
 #player-card,
@@ -220,6 +245,29 @@ input {
   background-color: #1A4E04;
 }
 
+.card-container {
+  margin-top: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#card-deck {
+  border: 10px rgba(250, 198, 0, 0.65) solid;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100%
+}
+
+.card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 /* faq.html */
 
 .accordion {

diff --git a/assets/scripts/game.js b/assets/scripts/game.js
@@ -269,9 +269,10 @@ function initialView() {
  */
 function getWager() {
   changeMsg.innerHTML = `<div>
-    <label for="wager-amount">What is your wager for this round?</label>
-    <input type="number" id="wager-amount" min="1" max="${playerPoints}" required>
-    <button id="wager-submit" aria-label="Submit Wager">Submit</button>
+    <label for="wager-amount" class="pb-3">Please place your wager</label>
+    <br>
+    <input type="number" id="wager-amount" class="mb-3" min="1" max="${playerPoints}" required>
+    <button id="wager-submit" class="mb-3" aria-label="Submit Wager">Submit</button>
     <span id="error-message"></span>
   </div>`;
   displayWager();

diff --git a/game.html b/game.html
@@ -46,55 +46,57 @@
   </header>
   <main>
     <!-- Playing Cards Section -->
-    <section class="card-container container-fluid pt-5">
-      <div class="row justify-content-center pt-5 pb-4">
+    <section class="card-container container-fluid d-flex justify-content-center align-items-center">
+      <div id="card-deck" class="row justify-content-center align-items-center p-5 mt-5 m-4">
         <div id="player-card" class="col-12 card me-3 mb-3">Card 1</div>
         <div id="card-1" class="col-12 card me-3 mb-3">Card 2</div>
         <div id="card-2" class="col-12 card me-3 mb-3">Card 3</div>
         <div id="card-3" class="col-12 card me-3 mb-3">Card 4</div>
         <div id="card-4" class="col-12 card me-3 mb-3">Card 5</div>
       </div>
     </section>
-    <!-- Game Information Panel -->
+
+    <!-- Game Messages Panel -->
     <section class="container-fluid">
       <div class="row justify-content-center">
-        <div class="col-10 col-lg-10 text-center d-flex flex-row justify-content-center">
-          <div id="aces-info-group" class="me-3 mb-3">
-            <div>Aces</div>
+        <div class="col-10 col-lg-10 text-center d-flex flex-row justify-content-center mb-4">
+          <div id="game-messages" class="pt-3 pb-3"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Game Information Panel -->
+    <section class="container-fluid pb-3">
+      <div class="row justify-content-center">
+        <div class="col-10 col-lg-10 text-center d-flex flex-row justify-content-center align-items-center">
+          <div id="aces-info-group" class="me-3 mb-3 d-flex flex-column align-items-center">
+            <div id="info-title">Aces</div>
             <div id="aces-info"></div>
           </div>
         </div>
-        <div class="col-10 col-lg-10 text-center d-flex flex-row justify-content-center">
-          <div id="round-info-group" class="me-3 mb-3">
-            <div>Current Round / 10</div>
+        <div class="col-10 col-lg-10 text-center d-flex flex-row justify-content-center align-items-center">
+          <div id="round-info-group" class="me-3 mb-3 p-4 d-flex flex-column align-items-center">
+            <div id="info-title">Round</div>
             <div id="round-info"></div>
           </div>
-          <div id="card-info-group" class="me-3 mb-3">
-            <div>Current Card / 50</div>
+          <div id="card-info-group" class="me-3 mb-3 p-4 d-flex flex-column align-items-center">
+            <div id="info-title">Card</div>
             <div id="card-info"></div>
           </div>
         </div>
-        <div class="col-10 col-lg-10 text-center d-flex flex-row justify-content-center">
-          <div id="points-info-group" class="me-3 mb-3">
-            <div>Player's Points</div>
+        <div class="col-10 col-lg-10 text-center d-flex flex-row justify-content-center align-items-center">
+          <div id="points-info-group" class="me-3 mb-3 p-4 d-flex flex-column align-items-center">
+            <div id="info-title">Points</div>
             <div id="points-info"></div>
           </div>
-          <div id="wager-info-group" class="me-3 mb-3">
-            <div>Current Wager</div>
+          <div id="wager-info-group" class="me-3 mb-3 p-4 d-flex flex-column align-items-center">
+            <div id="info-title">Wager</div>
             <div id="wager"></div>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- Game Messages Panel -->
-    <section class="container-fluid">
-      <div class="row justify-content-center">
-        <div class="col-10 col-lg-10 pt-3 pb-3 text-center">
-          <div id="game-messages"></div>
-        </div>
-      </div>
-    </section>
   </main>
   <!-- Footer / Social Media Icons -->
   <footer id="footer" class="container-fluid">