diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 2fa4194..7135e2a 100644
--- a/public/assets/css/style.css
+++ b/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;
@@ -299,163 +308,19 @@ table#leaderboard thead tr th, table#leaderboard tbody tr td{
width: 40%;
font-size: 20px;
}
-
-.stage{
- width:960px;
- 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
- }
+
+.p16{
+ padding-bottom: 16px
+}
+
.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;
- 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%;
+ inset:0;
display:flex;
flex-direction:column;
- align-items:center
- }
-.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
- }
+ padding:18px
+}
+
.end-screen {
position: absolute;
inset: 0;
@@ -471,4 +336,124 @@ button:disabled{
letter-spacing: 2px;
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;
+}
diff --git a/public/assets/js/game.js b/public/assets/js/game.js
index dd6e7fb..385a03f 100644
--- a/public/assets/js/game.js
+++ b/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,326 +18,300 @@ 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'};
+ const r = ranks[Math.floor(Math.random()*ranks.length)];
+ const s = suits[Math.floor(Math.random()*suits.length)];
+ return {rank:r, suit:s};
}
function createCardEl(card){
- const el = document.createElement('div');
- el.className = 'card' + (card.color==='red' ? ' red' : '');
- el.innerHTML = `
- ${card.rank}
- ${card.suit}
- ${card.rank}
- `;
- return el;
+ const el = document.createElement('div');
+ el.className = 'bjcard';
+ el.innerHTML = `
+ ${card.rank}
+ ${card.suit}
+ ${card.rank}
+ `;
+ return el;
}
function createBackCardEl(){
- const el = document.createElement('div');
- el.className = 'card back-card';
- el.innerText = 'HIT';
- return el;
+ const el = document.createElement('div');
+ el.className = 'back-card';
+ el.innerText = 'HIT';
+ return el;
}
function wrapCardInContainer(cardEl){
- const wrapper = document.createElement('div');
- wrapper.className = 'card-wrapper';
- wrapper.style.perspective = '1000px';
- wrapper.appendChild(cardEl);
- return wrapper;
+ const wrapper = document.createElement('div');
+ wrapper.className = 'card-wrapper';
+ wrapper.style.perspective = '1000px';
+ wrapper.appendChild(cardEl);
+ return wrapper;
}
function calc(cards){
- let t = 0, aces = 0;
- for(const c of cards){
- if(c.rank === 'A'){ t += 11; aces++; }
- else if(['J','Q','K'].includes(c.rank)) t += 10;
- else t += Number(c.rank);
- }
- while(t > 21 && aces > 0){
- t -= 10; aces--;
- }
- return t;
+ let t = 0, aces = 0;
+ for(const c of cards){
+ if(c.rank === 'A'){ t += 11; aces++; }
+ else if(['J','Q','K'].includes(c.rank)) t += 10;
+ else t += Number(c.rank);
+ }
+ while(t > 21 && aces > 0){
+ t -= 10; aces--;
+ }
+ return t;
}
function updateTotals(){
- document.getElementById('playerTotalUI').innerText = calc(playerCards);
- if(dealerHiddenEls.length){
- document.getElementById('dealerTotalUI').innerText = '??';
- } else {
- document.getElementById('dealerTotalUI').innerText = calc(dealerCards);
- }
+ document.getElementById('playerTotalUI').innerText = calc(playerCards);
+ if (dealerCards.length == 2 && gamePhase != 'DEALER_TURN') {
+ document.getElementById('dealerTotalUI').innerText = calc([dealerCards[0]]) + (dealerHiddenEls.length ? " + ??" : "")
+ } else {
+ document.getElementById('dealerTotalUI').innerText = calc(dealerCards)
+ }
}
-
-/* ===========================================
- BUTTON ENABLE/DISABLE HANDLING
- =========================================== */
function updateButtonState(){
- if(gamePhase !== 'PLAYING'){
- hitBtn.disabled = true;
- standBtn.disabled = true;
- return;
- }
- hitBtn.disabled = animLock;
- standBtn.disabled = animLock;
+ if(gamePhase !== 'PLAYING'){
+ hitBtn.disabled = true;
+ standBtn.disabled = true;
+ return;
+ }
+ hitBtn.disabled = animLock;
+ standBtn.disabled = animLock;
}
-
-/* ===========================================
- LAYOUT
- =========================================== */
function layoutOverlap(list, wrapper){
- const cardW = 110;
- const cardH = 154;
- const overlap = 28;
+ const cardW = 110;
+ const cardH = 154;
+ const overlap = 28;
- const count = list.length;
- const totalW = cardW + Math.max(0, count - 1)*overlap;
- const startX = (wrapper.clientWidth - totalW) / 2;
- const startY = (wrapper.clientHeight - cardH) / 2;
+ const count = list.length;
+ const totalW = cardW + Math.max(0, count - 1)*overlap;
+ const startX = (wrapper.clientWidth - totalW) / 2;
+ const startY = (wrapper.clientHeight - cardH) / 2;
- list.forEach((el, i) => {
- const x = startX + i*overlap;
- el.style.transform = `translate3d(${x}px, ${startY}px, 0)`;
- el.style.zIndex = 100 + i;
- });
-}
-
-
-/* ===========================================
- ANIMATION FROM DECK
- =========================================== */
-function animateFromDeck(wrapper){
- animLock = true;
- updateButtonState();
-
- const targetX = parseFloat(wrapper.style.transform.match(/translate3d\((.*?)px/)?.[1] || 0);
- const targetY = parseFloat(wrapper.style.transform.match(/,\s*(.*?)px/)?.[1] || 0);
-
- const startX = deckEl.offsetLeft;
- const startY = deckEl.offsetTop;
-
- wrapper.style.transition = 'none';
- wrapper.style.transform = `translate3d(${startX}px, ${startY}px, 0) scale(0.4)`;
-
- const inner = wrapper.querySelector('.card');
-
- requestAnimationFrame(()=>{
- requestAnimationFrame(()=>{
- wrapper.style.transition = '';
- wrapper.style.transform = `translate3d(${targetX}px, ${targetY}px, 0) scale(1)`;
-
- if(inner){
- inner.style.transition = 'transform .4s cubic-bezier(.68,-0.55,.27,1.55)';
- inner.style.transform = `rotateZ(${(Math.random()-0.5)*12}deg)`;
- }
-
- setTimeout(()=>{
- if(inner){
- inner.style.transform = '';
- inner.style.transition = '';
- }
- animLock = false;
- updateButtonState();
- }, 420);
+ list.forEach((el, i) => {
+ const x = startX + i*overlap;
+ el.style.transform = `translate3d(${x}px, ${startY}px, 0)`;
+ el.style.zIndex = 100 + i;
+ });
+ }
+
+ function animateFromDeck(wrapper){
+ animLock = true;
+ updateButtonState();
+
+ const targetX = parseFloat(wrapper.style.transform.match(/translate3d\((.*?)px/)?.[1] || 0);
+ const targetY = parseFloat(wrapper.style.transform.match(/,\s*(.*?)px/)?.[1] || 0);
+
+ const startX = deckEl.offsetLeft;
+ const startY = deckEl.offsetTop;
+
+ wrapper.style.transition = 'none';
+ wrapper.style.transform = `translate3d(${startX}px, ${startY}px, 0) scale(0.4)`;
+
+ const inner = wrapper.querySelector('.card');
+
+ requestAnimationFrame(()=>{
+ requestAnimationFrame(()=>{
+ wrapper.style.transition = '';
+ wrapper.style.transform = `translate3d(${targetX}px, ${targetY}px, 0) scale(1)`;
+
+ if(inner){
+ inner.style.transition = 'transform .4s cubic-bezier(.68,-0.55,.27,1.55)';
+ inner.style.transform = `rotateZ(${(Math.random()-0.5)*12}deg)`;
+ }
+
+ setTimeout(()=>{
+ if(inner){
+ inner.style.transform = '';
+ inner.style.transition = '';
+ }
+ animLock = false;
+ updateButtonState();
+ }, 420);
+ });
});
- });
}
function dealPlayer(){
- const card = randomCard();
- playerCards.push(card);
+ const card = randomCard();
+ playerCards.push(card);
- const el = createCardEl(card);
- const wrap = wrapCardInContainer(el);
- cardsWrapper.appendChild(wrap);
+ const el = createCardEl(card);
+ const wrap = wrapCardInContainer(el);
+ cardsWrapper.appendChild(wrap);
- playerEls.push(wrap);
- layoutOverlap(playerEls, cardsWrapper);
- animateFromDeck(wrap);
+ playerEls.push(wrap);
+ layoutOverlap(playerEls, cardsWrapper);
+ animateFromDeck(wrap);
- updateTotals();
+ updateTotals();
}
function dealDealer(faceDown=false){
- const card = randomCard();
- dealerCards.push(card);
+ const card = randomCard();
+ dealerCards.push(card);
- let wrap;
- if(faceDown){
- const back = createBackCardEl();
- wrap = wrapCardInContainer(back);
- dealerHiddenCards.push(card);
- dealerHiddenEls.push(wrap);
- } else {
- const el = createCardEl(card);
- wrap = wrapCardInContainer(el);
- }
+ let wrap;
+ if(faceDown){
+ const back = createBackCardEl();
+ wrap = wrapCardInContainer(back);
+ dealerHiddenCards.push(card);
+ dealerHiddenEls.push(wrap);
+ } else {
+ const el = createCardEl(card);
+ wrap = wrapCardInContainer(el);
+ }
- dealerEls.push(wrap);
- dealerWrapper.appendChild(wrap);
+ dealerEls.push(wrap);
+ dealerWrapper.appendChild(wrap);
- layoutOverlap(dealerEls, dealerWrapper);
- animateFromDeck(wrap);
+ layoutOverlap(dealerEls, dealerWrapper);
+ animateFromDeck(wrap);
- updateTotals();
+ updateTotals();
}
function flipAllDealerHidden(){
- animLock = true;
- updateButtonState();
+ animLock = true;
+ updateButtonState();
- const hidden = Array.from(dealerHiddenEls);
+ const hidden = Array.from(dealerHiddenEls);
- hidden.forEach((wrapper, i)=>{
- const back = wrapper.querySelector('.back-card');
- const card = dealerHiddenCards[i];
- const real = createCardEl(card);
+ hidden.forEach((wrapper, i)=>{
+ const back = wrapper.querySelector('.back-card');
+ const card = dealerHiddenCards[i];
+ const real = createCardEl(card);
+
+ setTimeout(()=>{
+ if(back){
+ back.style.transform = 'rotateY(90deg)';
+ back.style.opacity = '0';
+ }
+ real.style.transform = 'rotateY(-90deg)';
+ real.style.opacity = '0';
+ wrapper.appendChild(real);
+
+ setTimeout(()=>{
+ if(back) back.remove();
+ real.style.transform = 'rotateY(0deg)';
+ real.style.opacity = '1';
+ updateTotals();
+ }, 220);
+
+ }, 250 + i*250);
+ });
setTimeout(()=>{
- if(back){
- back.style.transform = 'rotateY(90deg)';
- back.style.opacity = '0';
- }
- real.style.transform = 'rotateY(-90deg)';
- real.style.opacity = '0';
- wrapper.appendChild(real);
-
- setTimeout(()=>{
- if(back) back.remove();
- real.style.transform = 'rotateY(0deg)';
- real.style.opacity = '1';
- updateTotals();
- }, 220);
-
- }, 250 + i*250);
- });
-
- setTimeout(()=>{
- dealerHiddenCards = [];
- dealerHiddenEls = [];
- animLock = false;
- updateButtonState();
- }, 250 + hidden.length*250 + 300);
+ dealerHiddenCards = [];
+ dealerHiddenEls = [];
+ animLock = false;
+ updateButtonState();
+ }, 250 + hidden.length*250 + 300);
}
function dealerPlay(){
- gamePhase = 'DEALER_TURN';
- updateButtonState();
+ gamePhase = 'DEALER_TURN';
+ updateButtonState();
- const interval = setInterval(()=>{
- if(calc(dealerCards) < 17){
- dealDealer(false);
- } else {
- clearInterval(interval);
- finishResult();
- }
- }, 900);
+ const interval = setInterval(()=>{
+ if(calc(dealerCards) < 17){
+ dealDealer(false);
+ } else {
+ clearInterval(interval);
+ finishResult();
+ }
+ }, 900);
}
function finishResult(){
- gamePhase = 'END';
- updateButtonState();
+ gamePhase = 'END';
+ updateButtonState();
- const p = calc(playerCards);
- const d = calc(dealerCards);
+ const p = calc(playerCards);
+ const d = calc(dealerCards);
- const playerBJ = (p === 21 && playerCards.length === 2);
- const dealerBJ = (d === 21 && dealerCards.length === 2);
+ const playerBJ = (p === 21 && playerCards.length === 2);
+ const dealerBJ = (d === 21 && dealerCards.length === 2);
- let msg = '';
+ let msg = '';
- if(playerBJ && dealerBJ) msg = 'PUSH — BOTH BLACKJACK';
- else if(playerBJ) msg = 'BLACKJACK! YOU WIN (3:2)';
- else if(dealerBJ) msg = 'DEALER BLACKJACK — YOU LOSE';
- else if(p > 21) msg = 'PLAYER BUST — YOU LOSE';
- else if(d > 21) msg = 'DEALER BUST — YOU WIN!';
- else if(p > d) msg = 'YOU WIN!';
- else if(p < d) msg = 'YOU LOSE!';
- else msg = 'PUSH (DRAW)';
+ if(playerBJ && dealerBJ) msg = 'PUSH — BOTH BLACKJACK';
+ else if(playerBJ) msg = 'BLACKJACK! YOU WIN (3:2)';
+ else if(dealerBJ) msg = 'DEALER BLACKJACK — YOU LOSE';
+ else if(p > 21) msg = 'PLAYER BUST — YOU LOSE';
+ else if(d > 21) msg = 'DEALER BUST — YOU WIN!';
+ else if(p > d) msg = 'YOU WIN!';
+ else if(p < d) msg = 'YOU LOSE!';
+ else msg = 'PUSH (DRAW)';
- endMessage.innerText = msg;
- endScreen.style.display = 'flex';
- document.getElementById('status').innerText = msg;
+ endMessage.innerText = msg;
+ endScreen.style.display = 'flex';
}
function hit(){
- if(gamePhase !== 'PLAYING' || animLock) return;
- updateButtonState();
+ if(gamePhase !== 'PLAYING' || animLock) return;
+ updateButtonState();
- dealPlayer();
- if(calc(playerCards) > 21){
- setTimeout(()=> finishResult(), 500);
- }
+ dealPlayer();
+ if(calc(playerCards) > 21){
+ setTimeout(()=> finishResult(), 500);
+ }
}
function stand(){
- if(gamePhase !== 'PLAYING' || animLock) return;
+ if(gamePhase !== 'PLAYING' || animLock) return;
- gamePhase = 'DEALER_TURN';
- updateButtonState();
+ gamePhase = 'DEALER_TURN';
+ updateButtonState();
- document.getElementById('status').innerText = 'DEALER TURN';
+ const hiddenCount = dealerHiddenEls.length;
- const hiddenCount = dealerHiddenEls.length;
-
- flipAllDealerHidden();
- setTimeout(()=> dealerPlay(), 300 + hiddenCount*250);
+ flipAllDealerHidden();
+ setTimeout(()=> dealerPlay(), 300 + hiddenCount*250);
}
function startGame(){
- gamePhase = 'DEALING';
- updateButtonState();
-
- // cleanup previous if any
- playerCards = [];
- dealerCards = [];
- playerEls.forEach(e=>e.remove());
- dealerEls.forEach(e=>e.remove());
- playerEls = [];
- dealerEls = [];
- dealerHiddenCards = [];
- dealerHiddenEls = [];
- endScreen.style.display = 'none';
-
- setTimeout(()=>dealPlayer(), 100);
- setTimeout(()=>dealDealer(false), 350);
- setTimeout(()=>dealPlayer(), 600);
- setTimeout(()=>dealDealer(true), 850);
-
- setTimeout(()=>{
- gamePhase = 'PLAYING';
+ gamePhase = 'DEALING';
updateButtonState();
- document.getElementById('status').innerText = 'YOUR TURN';
- const p = calc(playerCards);
- const playerBJ = (p === 21 && playerCards.length === 2);
+ playerCards = [];
+ dealerCards = [];
+ playerEls.forEach(e=>e.remove());
+ dealerEls.forEach(e=>e.remove());
+ playerEls = [];
+ dealerEls = [];
+ dealerHiddenCards = [];
+ dealerHiddenEls = [];
+ endScreen.style.display = 'none';
- if(playerBJ) stand(); // natural blackjack auto-resolve
- }, 1000);
+ setTimeout(()=>dealPlayer(), 100);
+ setTimeout(()=>dealDealer(false), 350);
+ setTimeout(()=>dealPlayer(), 600);
+ setTimeout(()=>dealDealer(true), 850);
+
+ setTimeout(()=>{
+ gamePhase = 'PLAYING';
+ updateButtonState();
+
+ const p = calc(playerCards);
+ const playerBJ = (p === 21 && playerCards.length === 2);
+
+ if(playerBJ) stand();
+ }, 1000);
}
-
-/* ===========================================
- EVENTS
- =========================================== */
hitBtn.addEventListener('click', hit);
standBtn.addEventListener('click', stand);
window.addEventListener('resize', ()=>{
- layoutOverlap(playerEls, cardsWrapper);
- layoutOverlap(dealerEls, dealerWrapper);
+ layoutOverlap(playerEls, cardsWrapper);
+ layoutOverlap(dealerEls, dealerWrapper);
});
-/* START GAME ONLY ONCE */
-startGame();
+startGame();
\ No newline at end of file
diff --git a/public/assets/js/menu.js b/public/assets/js/menu.js
index ffc4b52..38acdea 100644
--- a/public/assets/js/menu.js
+++ b/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");
+});
diff --git a/public/game.php b/public/game.php
index d071d0f..8a023b6 100644
--- a/public/game.php
+++ b/public/game.php
@@ -7,34 +7,36 @@
-
-
-
DECK
+
+
+
+
DECK
+
-
-
DEALER
-
-
Total Dealer: 0
+
+
+
DEALER
+
+
Total Dealer: 0
-
-
PLAYER
-
-
Total Card: 0
-
+
+
PLAYER
+
+
Total Card: 0
+
-
-
-
-