fix game ui

public/assets/css/style.css

@@ -21,7 +21,6 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 24px;
     width: 100%;
 }
 
@@ -90,6 +89,16 @@ button{
     margin-top:10px;
 }
 
+button#stand, button#hit{
+    width: 75px;
+}
+
+button:disabled{
+    background:#2d2d2d;
+    opacity:.5;
+    cursor:not-allowed
+}
+
 .note{
     text-align:center; 
     margin-top:10px; 
@@ -300,162 +309,18 @@ table#leaderboard thead tr th, table#leaderboard tbody tr td{
     font-size: 20px;
 }
 
-.stage{
+.p16{
-    width:960px;
+    padding-bottom: 16px
-    height:540px;
-    border-radius:12px;
-    overflow:hidden;
-    position:relative;
-    box-shadow:0 18px 50px rgba(0,0,0,.6)
-  }
-.bg{ 
-    position:absolute; 
-    inset:0; background:#153f28 
 }
+
 .overlay{
-    position:absolute; inset:0;
-    background:linear-gradient(180deg, rgba(11,31,20,.45), rgba(8,24,16,.65));
-    display:flex; flex-direction:column; padding:18px
-  }
-.header{ 
-    color:#dff6e9; 
-    font-weight:700; 
-    display:flex; 
-    justify-content:space-between 
-  }
-.table-area{ 
-    flex:1; display:flex; 
-    align-items:center; 
-    justify-content:center; 
-    position:relative 
-  }
-.deck {
     position:absolute; 
-    display: hidden;
+    inset:0;
-    right:80px; 
-    top: 200px;
-    width: 80px; 
-    height: 120px; 
-    border-radius: 10px;
-    background: #113625;
-    box-shadow: 0 0 0 2px #0d291c inset, 0 10px 20px rgba(0,0,0,0.55);
-    display:flex; 
-    align-items:center; 
-    justify-content:center;
-    color:#b9e4d0; 
-    font-weight:900; 
-    font-size:14px; 
-    letter-spacing:2px; 
-  }
-.player-zone{ 
-    position:absolute; 
-    left:50%; 
-    bottom:-25px; 
-    transform:translateX(-50%); 
-    width:65%; 
     display:flex; 
     flex-direction:column; 
-    align-items:center 
+    padding:18px
-  }
-.cards-wrapper{ 
-    position:relative;
-    right: 250px; 
-    width:600px; 
-    height:170px; 
-    display:flex; 
-    justify-content:center; 
-    align-items:center; 
-  }
-.dealer-zone{ 
-    position:relative; 
-    margin:20 px;
-    width:65%;
-    max-width:800px ;
-    margin-bottom: 25%;
-    margin-right: flex;
-    display:flex; 
-    flex-direction:column; 
-    align-items:center; 
-    gap:8px; 
-    color:#dff6e9; 
-    font-weight:700 
-  }
-.dealer-cards{ 
-    position:relative; 
-    width:580px; 
-    height:170px 
-  }
-.card-wrapper { 
-    position: absolute; 
-    width: var(--card-w); 
-    height: var(--card-h); 
-    transition: transform .4s cubic-bezier(.68,-0.55,.27,1.55); 
-    align-items: center;
-    transform-origin: center; 
-    z-index: 100; 
-  }
-.card{ 
-    width:var(--card-w); 
-    height:var(--card-h); 
-    border-radius:10px; 
-    background:#fff; 
-    display:flex; 
-    flex-direction:column; 
-    justify-content:space-between; 
-    padding:10px; 
-    font-weight:800; 
-    box-shadow:0 10px 22px rgba(0,0,0,.45); 
-    position:absolute; 
-    transition: transform .4s cubic-bezier(.68,-0.55,.27,1.55), opacity .3s ease, filter .3s ease; 
-    backface-visibility:hidden; 
-    transform-origin:center center; 
-    color: #000; 
-  }
-.card.is-moving { 
-    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)); 
-  }
-.card.red{ 
-    color:#c42b2b 
-  }
-.card .corner{
-    font-size:18px
-  }
-.card .center{
-    font-size:40px;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-  }
-.back-card{ 
-    background:#122f21; 
-    display:flex; 
-    align-items:center; 
-    justify-content:center; 
-    font-size:20px; 
-    color:#bddfcf; 
-    letter-spacing:4px; 
-    font-weight:900; 
-    border-radius:10px; 
-  }
-.controls{
-    display:flex;
-    gap:12px;
-    margin-top:8px
-  }
-button{
-    background:#0f5436;
-    color:#e6fff2;
-    border:0;
-    padding:10px 16px;
-    border-radius:8px;
-    cursor:pointer;
-    font-weight:700
-  }
-button:disabled{
-    background:#2d2d2d;
-    opacity:.5;
-    cursor:not-allowed
 }
+
 .end-screen { 
     position: absolute; 
     inset: 0; 
@@ -472,3 +337,123 @@ button:disabled{
     text-align: center; 
     z-index: 999; 
 }
+
+.card .center{
+    font-size:40px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+
+.back-card{ 
+    border-radius: 10px;
+    width:var(--card-w); 
+    height:var(--card-h); 
+    background:#122f21; 
+    display:flex; 
+    align-items:center; 
+    justify-content:center; 
+    font-size:20px; 
+    color:#bddfcf; 
+    letter-spacing:4px; 
+    font-weight:900; 
+    padding: 10px !important
+}
+
+.controls{
+    display:flex;
+    gap:12px;
+    margin-top:8px
+}
+
+.card.is-moving { 
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)); 
+}
+
+.card .corner{
+    font-size:18px
+}
+
+.play-zone{ 
+    position:relative; 
+    display:flex; 
+    flex-direction:column; 
+    align-items:center; 
+    gap:8px; 
+    font-weight:700 
+}
+
+.card-wrapper { 
+    position: absolute; 
+    width: var(--card-w); 
+    height: var(--card-h); 
+    transition: transform .4s cubic-bezier(.68,-0.55,.27,1.55); 
+    align-items: center;
+    transform-origin: center; 
+    z-index: 100; 
+}
+
+.cards-wrapper{ 
+    position:relative;
+    right: 250px; 
+    width:600px; 
+    height:174px; 
+    display:flex; 
+    justify-content:center; 
+}
+
+.whois-label{
+    font-size: 22px;
+}
+
+.totaltext{
+    margin-top:8px;
+    font-size: 20px;
+}
+
+.totals{
+    font-size: 26px;
+    color: #ffd54a;
+}
+
+.dealer-cards{ 
+    position:relative; 
+    width:580px; 
+    height:174px 
+}
+
+.stage{
+    scale:1.2;
+    padding: 16px;
+    border-radius:12px;
+    background-color: #0e3b33;
+    box-shadow:0 18px 50px rgba(0,0,0,.6)
+}
+
+.deck {
+    scale: 120%;
+    display: none;
+    right:80px; 
+}
+
+.center{
+    text-align: center;
+}
+
+.bjcard{ 
+    width:var(--card-w); 
+    height:var(--card-h); 
+    border-radius:10px; 
+    background:#fff; 
+    display:flex; 
+    flex-direction:column; 
+    justify-content:space-between; 
+    padding:10px; 
+    font-weight:800; 
+    box-shadow:0 10px 22px rgba(0,0,0,.45); 
+    position:absolute; 
+    transition: transform .4s cubic-bezier(.68,-0.55,.27,1.55), opacity .3s ease, filter .3s ease; 
+    backface-visibility:hidden; 
+    transform-origin:center center; 
+    color: #000; 
+}

public/assets/js/game.js

@@ -1,6 +1,3 @@
-/* ===========================================
-   GLOBALS & SETUP
-   =========================================== */
 const ranks = ['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
 const suits = ['♠','♥','♦','♣'];
 
@@ -21,21 +18,17 @@ let dealerHiddenCards = [];
 let dealerHiddenEls = [];
 
 let gamePhase = 'INIT';
-let animLock = false; // prevents button spam
+let animLock = false;
 
-
-/* ===========================================
-   HELPERS
-   =========================================== */
 function randomCard(){
     const r = ranks[Math.floor(Math.random()*ranks.length)];
     const s = suits[Math.floor(Math.random()*suits.length)];
-  return {rank:r, suit:s, color:(s==='♥'||s==='♦')?'red':'black'};
+    return {rank:r, suit:s};
 }
 
 function createCardEl(card){
     const el = document.createElement('div');
-  el.className = 'card' + (card.color==='red' ? ' red' : '');
+    el.className = 'bjcard';
     el.innerHTML = `
         <div class="corner">${card.rank}</div>
         <div class="center">${card.suit}</div>
@@ -46,7 +39,7 @@ function createCardEl(card){
 
 function createBackCardEl(){
     const el = document.createElement('div');
-  el.className = 'card back-card';
+    el.className = 'back-card';
     el.innerText = 'HIT';
     return el;
 }
@@ -74,17 +67,13 @@ function calc(cards){
 
 function updateTotals(){
     document.getElementById('playerTotalUI').innerText = calc(playerCards);
-  if(dealerHiddenEls.length){
+    if (dealerCards.length == 2 && gamePhase != 'DEALER_TURN') {
-    document.getElementById('dealerTotalUI').innerText = '??';
+        document.getElementById('dealerTotalUI').innerText = calc([dealerCards[0]]) + (dealerHiddenEls.length ? " + ??" : "")
     } else {
-    document.getElementById('dealerTotalUI').innerText = calc(dealerCards);
+        document.getElementById('dealerTotalUI').innerText = calc(dealerCards)
     }
 }
 
-
-/* ===========================================
-   BUTTON ENABLE/DISABLE HANDLING
-   =========================================== */
 function updateButtonState(){
     if(gamePhase !== 'PLAYING'){
         hitBtn.disabled = true;
@@ -95,10 +84,6 @@ function updateButtonState(){
     standBtn.disabled = animLock;
 }
 
-
-/* ===========================================
-   LAYOUT
-   =========================================== */
 function layoutOverlap(list, wrapper){
     const cardW = 110;
     const cardH = 154;
@@ -116,10 +101,6 @@ function layoutOverlap(list, wrapper){
     });
     }
 
-
-/* ===========================================
-   ANIMATION FROM DECK
-   =========================================== */
     function animateFromDeck(wrapper){
     animLock = true;
     updateButtonState();
@@ -271,7 +252,6 @@ function finishResult(){
 
     endMessage.innerText = msg;
     endScreen.style.display = 'flex';
-  document.getElementById('status').innerText = msg;
 }
 
 function hit(){
@@ -290,8 +270,6 @@ function stand(){
     gamePhase = 'DEALER_TURN';
     updateButtonState();
 
-  document.getElementById('status').innerText = 'DEALER TURN';
-
     const hiddenCount = dealerHiddenEls.length;
 
     flipAllDealerHidden();
@@ -302,7 +280,6 @@ function startGame(){
     gamePhase = 'DEALING';
     updateButtonState();
 
-  // cleanup previous if any
     playerCards = [];
     dealerCards = [];
     playerEls.forEach(e=>e.remove());
@@ -321,19 +298,14 @@ function startGame(){
     setTimeout(()=>{
         gamePhase = 'PLAYING';
         updateButtonState();
-    document.getElementById('status').innerText = 'YOUR TURN';
 
         const p = calc(playerCards);
         const playerBJ = (p === 21 && playerCards.length === 2);
 
-    if(playerBJ) stand(); // natural blackjack auto-resolve
+        if(playerBJ) stand();
     }, 1000);
 }
 
-
-/* ===========================================
-   EVENTS
-   =========================================== */
 hitBtn.addEventListener('click', hit);
 standBtn.addEventListener('click', stand);
 
@@ -342,5 +314,4 @@ window.addEventListener('resize', ()=>{
     layoutOverlap(dealerEls, dealerWrapper);
 });
 
-/* START GAME ONLY ONCE */
 startGame();

public/assets/js/menu.js

@@ -25,3 +25,7 @@ document.querySelector(".minus").addEventListener("click", () => {
 
     input.value = newValue;
 });
+
+document.querySelector('#playBtn').addEventListener("click", () => {
+    console.log("Startgame");
+});

public/game.php

@@ -7,34 +7,36 @@
         <link rel="stylesheet" href="assets/css/style.css">
     </head>
     <body>
-        <div class="stage" id="stage">
         <div class="overlay">
-                <div id="deck" class="deck" aria-hidden="true">DECK</div>
-                <div class="table-area">
-                    <div class="dealer-zone" aria-live="polite">
-                        <div class="dealer-label">DEALER</div>
-                        <div class="dealer-cards" id="dealerWrapper" aria-hidden="false"></div>
-                        <div class="dealer-label">Total Dealer: <span id="dealerTotalUI">0</span></div>
-                    </div>
-
-                    <div class="player-zone">
-                        <div class="dealer-label">PLAYER</div>
-                        <div class="cards-wrapper" id="cardsWrapper" aria-live="polite"></div>
-                        <div>Total Card: <strong id="playerTotalUI">0</strong></div>
-                        <div class="controls">
-                            <button id="stand" disabled>STAND</button>
-                            <button id="hit" disabled>HIT</button>
-                        </div>
-                    </div>
-                    </div>
-
             <div class="end-screen" id="endScreen" role="dialog" aria-modal="true">
                 <div id="endMessage">RESULT</div>
             </div>
         </div>
-            </div>
+        <div class="main-wrapper">
+            <div class="stage" id="stage">
+                <div id="deck" class="deck">DECK</div>
+
+                <div class="table-area">
+                    
+                    <div class="play-zone p16">
+                        <div class="whois-label">DEALER</div>
+                        <div class="dealer-cards" id="dealerWrapper"></div>
+                        <div class="totaltext">Total Dealer: <span class="totals" id="dealerTotalUI">0</span></div>
                     </div>
 
+                    <div class="play-zone">
+                        <div class="whois-label">PLAYER</div>
+                        <div class="dealer-cards" id="cardsWrapper" aria-hidden="false"></div>
+                        <div class="totaltext">Total Card: <strong class="totals" id="playerTotalUI">0</strong></div>
+                         <div class="controls">
+                            <button id="stand" disabled>STAND</button>
+                            <button id="hit" disabled>HIT</button>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
         <script src="assets/js/game.js"></script>
     </body>
 </html>

public/index.php

@@ -24,16 +24,15 @@
     <title>Hit & Run</title>
     <link rel="stylesheet" href="assets/css/style.css">
 </head>
-
 <body>
+    <div class="main-wrapper">
         <div style="padding-right: 32px;">
             <div class="gamename card">
                 Hit & Run <br> 
                 Hit or you Lose.
             </div>
             <div style="padding-top: 32px; display:flex; flex-direction:column; align-items:center;">
-            <div>
+                <div class="p16">
-
                     Place your bet here
                 </div>
                 <div class="num-box">
@@ -57,11 +56,7 @@
             </div>
 
         </div>
-
+    </div>
-        <script>
-            const playBtn = document.getElementById('playBtn');
-            console.log("Startgame");
-        </script>
 </body>
     <footer>© 2025 Hit Or Run by Rafael 5803025007, Stephen 5803025009, Biema 5803025018</footer>
     <script src="assets/js/menu.js"></script>