fix game ui
This commit is contained in:
AloneInSky
parent
11e1bc0209
commit
71986e064f
@ -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{
|
||||
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;
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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){
|
||||
document.getElementById('dealerTotalUI').innerText = '??';
|
||||
if (dealerCards.length == 2 && gamePhase != 'DEALER_TURN') {
|
||||
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();
|
||||
@ -25,3 +25,7 @@ document.querySelector(".minus").addEventListener("click", () => {
|
||||
|
||||
input.value = newValue;
|
||||
});
|
||||
|
||||
document.querySelector('#playBtn').addEventListener("click", () => {
|
||||
console.log("Startgame");
|
||||
});
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
<script>
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
console.log("Startgame");
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
<footer>© 2025 Hit Or Run by Rafael 5803025007, Stephen 5803025009, Biema 5803025018</footer>
|
||||
<script src="assets/js/menu.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user