fix game ui
This commit is contained in:
AloneInSky
parent
11e1bc0209
commit
71986e064f
@ -21,7 +21,6 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 24px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -90,6 +89,16 @@ button{
|
|||||||
margin-top:10px;
|
margin-top:10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button#stand, button#hit{
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled{
|
||||||
|
background:#2d2d2d;
|
||||||
|
opacity:.5;
|
||||||
|
cursor:not-allowed
|
||||||
|
}
|
||||||
|
|
||||||
.note{
|
.note{
|
||||||
text-align:center;
|
text-align:center;
|
||||||
margin-top:10px;
|
margin-top:10px;
|
||||||
@ -300,162 +309,18 @@ table#leaderboard thead tr th, table#leaderboard tbody tr td{
|
|||||||
font-size: 20px;
|
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{
|
.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;
|
position:absolute;
|
||||||
left:50%;
|
inset:0;
|
||||||
bottom:-25px;
|
|
||||||
transform:translateX(-50%);
|
|
||||||
width:65%;
|
|
||||||
display:flex;
|
display:flex;
|
||||||
flex-direction:column;
|
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 {
|
.end-screen {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@ -471,4 +336,124 @@ button:disabled{
|
|||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 999;
|
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 ranks = ['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
|
||||||
const suits = ['♠','♥','♦','♣'];
|
const suits = ['♠','♥','♦','♣'];
|
||||||
|
|
||||||
@ -21,326 +18,300 @@ let dealerHiddenCards = [];
|
|||||||
let dealerHiddenEls = [];
|
let dealerHiddenEls = [];
|
||||||
|
|
||||||
let gamePhase = 'INIT';
|
let gamePhase = 'INIT';
|
||||||
let animLock = false; // prevents button spam
|
let animLock = false;
|
||||||
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
HELPERS
|
|
||||||
=========================================== */
|
|
||||||
function randomCard(){
|
function randomCard(){
|
||||||
const r = ranks[Math.floor(Math.random()*ranks.length)];
|
const r = ranks[Math.floor(Math.random()*ranks.length)];
|
||||||
const s = suits[Math.floor(Math.random()*suits.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){
|
function createCardEl(card){
|
||||||
const el = document.createElement('div');
|
const el = document.createElement('div');
|
||||||
el.className = 'card' + (card.color==='red' ? ' red' : '');
|
el.className = 'bjcard';
|
||||||
el.innerHTML = `
|
el.innerHTML = `
|
||||||
<div class="corner">${card.rank}</div>
|
<div class="corner">${card.rank}</div>
|
||||||
<div class="center">${card.suit}</div>
|
<div class="center">${card.suit}</div>
|
||||||
<div class="corner" style="transform:rotate(180deg)">${card.rank}</div>
|
<div class="corner" style="transform:rotate(180deg)">${card.rank}</div>
|
||||||
`;
|
`;
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createBackCardEl(){
|
function createBackCardEl(){
|
||||||
const el = document.createElement('div');
|
const el = document.createElement('div');
|
||||||
el.className = 'card back-card';
|
el.className = 'back-card';
|
||||||
el.innerText = 'HIT';
|
el.innerText = 'HIT';
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
|
|
||||||
function wrapCardInContainer(cardEl){
|
function wrapCardInContainer(cardEl){
|
||||||
const wrapper = document.createElement('div');
|
const wrapper = document.createElement('div');
|
||||||
wrapper.className = 'card-wrapper';
|
wrapper.className = 'card-wrapper';
|
||||||
wrapper.style.perspective = '1000px';
|
wrapper.style.perspective = '1000px';
|
||||||
wrapper.appendChild(cardEl);
|
wrapper.appendChild(cardEl);
|
||||||
return wrapper;
|
return wrapper;
|
||||||
}
|
}
|
||||||
|
|
||||||
function calc(cards){
|
function calc(cards){
|
||||||
let t = 0, aces = 0;
|
let t = 0, aces = 0;
|
||||||
for(const c of cards){
|
for(const c of cards){
|
||||||
if(c.rank === 'A'){ t += 11; aces++; }
|
if(c.rank === 'A'){ t += 11; aces++; }
|
||||||
else if(['J','Q','K'].includes(c.rank)) t += 10;
|
else if(['J','Q','K'].includes(c.rank)) t += 10;
|
||||||
else t += Number(c.rank);
|
else t += Number(c.rank);
|
||||||
}
|
}
|
||||||
while(t > 21 && aces > 0){
|
while(t > 21 && aces > 0){
|
||||||
t -= 10; aces--;
|
t -= 10; aces--;
|
||||||
}
|
}
|
||||||
return t;
|
return t;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTotals(){
|
function updateTotals(){
|
||||||
document.getElementById('playerTotalUI').innerText = calc(playerCards);
|
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 {
|
} else {
|
||||||
document.getElementById('dealerTotalUI').innerText = calc(dealerCards);
|
document.getElementById('dealerTotalUI').innerText = calc(dealerCards)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
BUTTON ENABLE/DISABLE HANDLING
|
|
||||||
=========================================== */
|
|
||||||
function updateButtonState(){
|
function updateButtonState(){
|
||||||
if(gamePhase !== 'PLAYING'){
|
if(gamePhase !== 'PLAYING'){
|
||||||
hitBtn.disabled = true;
|
hitBtn.disabled = true;
|
||||||
standBtn.disabled = true;
|
standBtn.disabled = true;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
hitBtn.disabled = animLock;
|
hitBtn.disabled = animLock;
|
||||||
standBtn.disabled = animLock;
|
standBtn.disabled = animLock;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ===========================================
|
|
||||||
LAYOUT
|
|
||||||
=========================================== */
|
|
||||||
function layoutOverlap(list, wrapper){
|
function layoutOverlap(list, wrapper){
|
||||||
const cardW = 110;
|
const cardW = 110;
|
||||||
const cardH = 154;
|
const cardH = 154;
|
||||||
const overlap = 28;
|
const overlap = 28;
|
||||||
|
|
||||||
const count = list.length;
|
const count = list.length;
|
||||||
const totalW = cardW + Math.max(0, count - 1)*overlap;
|
const totalW = cardW + Math.max(0, count - 1)*overlap;
|
||||||
const startX = (wrapper.clientWidth - totalW) / 2;
|
const startX = (wrapper.clientWidth - totalW) / 2;
|
||||||
const startY = (wrapper.clientHeight - cardH) / 2;
|
const startY = (wrapper.clientHeight - cardH) / 2;
|
||||||
|
|
||||||
list.forEach((el, i) => {
|
list.forEach((el, i) => {
|
||||||
const x = startX + i*overlap;
|
const x = startX + i*overlap;
|
||||||
el.style.transform = `translate3d(${x}px, ${startY}px, 0)`;
|
el.style.transform = `translate3d(${x}px, ${startY}px, 0)`;
|
||||||
el.style.zIndex = 100 + i;
|
el.style.zIndex = 100 + i;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function animateFromDeck(wrapper){
|
||||||
/* ===========================================
|
animLock = true;
|
||||||
ANIMATION FROM DECK
|
updateButtonState();
|
||||||
=========================================== */
|
|
||||||
function animateFromDeck(wrapper){
|
const targetX = parseFloat(wrapper.style.transform.match(/translate3d\((.*?)px/)?.[1] || 0);
|
||||||
animLock = true;
|
const targetY = parseFloat(wrapper.style.transform.match(/,\s*(.*?)px/)?.[1] || 0);
|
||||||
updateButtonState();
|
|
||||||
|
const startX = deckEl.offsetLeft;
|
||||||
const targetX = parseFloat(wrapper.style.transform.match(/translate3d\((.*?)px/)?.[1] || 0);
|
const startY = deckEl.offsetTop;
|
||||||
const targetY = parseFloat(wrapper.style.transform.match(/,\s*(.*?)px/)?.[1] || 0);
|
|
||||||
|
wrapper.style.transition = 'none';
|
||||||
const startX = deckEl.offsetLeft;
|
wrapper.style.transform = `translate3d(${startX}px, ${startY}px, 0) scale(0.4)`;
|
||||||
const startY = deckEl.offsetTop;
|
|
||||||
|
const inner = wrapper.querySelector('.card');
|
||||||
wrapper.style.transition = 'none';
|
|
||||||
wrapper.style.transform = `translate3d(${startX}px, ${startY}px, 0) scale(0.4)`;
|
requestAnimationFrame(()=>{
|
||||||
|
requestAnimationFrame(()=>{
|
||||||
const inner = wrapper.querySelector('.card');
|
wrapper.style.transition = '';
|
||||||
|
wrapper.style.transform = `translate3d(${targetX}px, ${targetY}px, 0) scale(1)`;
|
||||||
requestAnimationFrame(()=>{
|
|
||||||
requestAnimationFrame(()=>{
|
if(inner){
|
||||||
wrapper.style.transition = '';
|
inner.style.transition = 'transform .4s cubic-bezier(.68,-0.55,.27,1.55)';
|
||||||
wrapper.style.transform = `translate3d(${targetX}px, ${targetY}px, 0) scale(1)`;
|
inner.style.transform = `rotateZ(${(Math.random()-0.5)*12}deg)`;
|
||||||
|
}
|
||||||
if(inner){
|
|
||||||
inner.style.transition = 'transform .4s cubic-bezier(.68,-0.55,.27,1.55)';
|
setTimeout(()=>{
|
||||||
inner.style.transform = `rotateZ(${(Math.random()-0.5)*12}deg)`;
|
if(inner){
|
||||||
}
|
inner.style.transform = '';
|
||||||
|
inner.style.transition = '';
|
||||||
setTimeout(()=>{
|
}
|
||||||
if(inner){
|
animLock = false;
|
||||||
inner.style.transform = '';
|
updateButtonState();
|
||||||
inner.style.transition = '';
|
}, 420);
|
||||||
}
|
});
|
||||||
animLock = false;
|
|
||||||
updateButtonState();
|
|
||||||
}, 420);
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function dealPlayer(){
|
function dealPlayer(){
|
||||||
const card = randomCard();
|
const card = randomCard();
|
||||||
playerCards.push(card);
|
playerCards.push(card);
|
||||||
|
|
||||||
const el = createCardEl(card);
|
const el = createCardEl(card);
|
||||||
const wrap = wrapCardInContainer(el);
|
const wrap = wrapCardInContainer(el);
|
||||||
cardsWrapper.appendChild(wrap);
|
cardsWrapper.appendChild(wrap);
|
||||||
|
|
||||||
playerEls.push(wrap);
|
playerEls.push(wrap);
|
||||||
layoutOverlap(playerEls, cardsWrapper);
|
layoutOverlap(playerEls, cardsWrapper);
|
||||||
animateFromDeck(wrap);
|
animateFromDeck(wrap);
|
||||||
|
|
||||||
updateTotals();
|
updateTotals();
|
||||||
}
|
}
|
||||||
|
|
||||||
function dealDealer(faceDown=false){
|
function dealDealer(faceDown=false){
|
||||||
const card = randomCard();
|
const card = randomCard();
|
||||||
dealerCards.push(card);
|
dealerCards.push(card);
|
||||||
|
|
||||||
let wrap;
|
let wrap;
|
||||||
if(faceDown){
|
if(faceDown){
|
||||||
const back = createBackCardEl();
|
const back = createBackCardEl();
|
||||||
wrap = wrapCardInContainer(back);
|
wrap = wrapCardInContainer(back);
|
||||||
dealerHiddenCards.push(card);
|
dealerHiddenCards.push(card);
|
||||||
dealerHiddenEls.push(wrap);
|
dealerHiddenEls.push(wrap);
|
||||||
} else {
|
} else {
|
||||||
const el = createCardEl(card);
|
const el = createCardEl(card);
|
||||||
wrap = wrapCardInContainer(el);
|
wrap = wrapCardInContainer(el);
|
||||||
}
|
}
|
||||||
|
|
||||||
dealerEls.push(wrap);
|
dealerEls.push(wrap);
|
||||||
dealerWrapper.appendChild(wrap);
|
dealerWrapper.appendChild(wrap);
|
||||||
|
|
||||||
layoutOverlap(dealerEls, dealerWrapper);
|
layoutOverlap(dealerEls, dealerWrapper);
|
||||||
animateFromDeck(wrap);
|
animateFromDeck(wrap);
|
||||||
|
|
||||||
updateTotals();
|
updateTotals();
|
||||||
}
|
}
|
||||||
|
|
||||||
function flipAllDealerHidden(){
|
function flipAllDealerHidden(){
|
||||||
animLock = true;
|
animLock = true;
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
|
|
||||||
const hidden = Array.from(dealerHiddenEls);
|
const hidden = Array.from(dealerHiddenEls);
|
||||||
|
|
||||||
hidden.forEach((wrapper, i)=>{
|
hidden.forEach((wrapper, i)=>{
|
||||||
const back = wrapper.querySelector('.back-card');
|
const back = wrapper.querySelector('.back-card');
|
||||||
const card = dealerHiddenCards[i];
|
const card = dealerHiddenCards[i];
|
||||||
const real = createCardEl(card);
|
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(()=>{
|
setTimeout(()=>{
|
||||||
if(back){
|
dealerHiddenCards = [];
|
||||||
back.style.transform = 'rotateY(90deg)';
|
dealerHiddenEls = [];
|
||||||
back.style.opacity = '0';
|
animLock = false;
|
||||||
}
|
updateButtonState();
|
||||||
real.style.transform = 'rotateY(-90deg)';
|
}, 250 + hidden.length*250 + 300);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function dealerPlay(){
|
function dealerPlay(){
|
||||||
gamePhase = 'DEALER_TURN';
|
gamePhase = 'DEALER_TURN';
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
|
|
||||||
const interval = setInterval(()=>{
|
const interval = setInterval(()=>{
|
||||||
if(calc(dealerCards) < 17){
|
if(calc(dealerCards) < 17){
|
||||||
dealDealer(false);
|
dealDealer(false);
|
||||||
} else {
|
} else {
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
finishResult();
|
finishResult();
|
||||||
}
|
}
|
||||||
}, 900);
|
}, 900);
|
||||||
}
|
}
|
||||||
|
|
||||||
function finishResult(){
|
function finishResult(){
|
||||||
gamePhase = 'END';
|
gamePhase = 'END';
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
|
|
||||||
const p = calc(playerCards);
|
const p = calc(playerCards);
|
||||||
const d = calc(dealerCards);
|
const d = calc(dealerCards);
|
||||||
|
|
||||||
const playerBJ = (p === 21 && playerCards.length === 2);
|
const playerBJ = (p === 21 && playerCards.length === 2);
|
||||||
const dealerBJ = (d === 21 && dealerCards.length === 2);
|
const dealerBJ = (d === 21 && dealerCards.length === 2);
|
||||||
|
|
||||||
let msg = '';
|
let msg = '';
|
||||||
|
|
||||||
if(playerBJ && dealerBJ) msg = 'PUSH — BOTH BLACKJACK';
|
if(playerBJ && dealerBJ) msg = 'PUSH — BOTH BLACKJACK';
|
||||||
else if(playerBJ) msg = 'BLACKJACK! YOU WIN (3:2)';
|
else if(playerBJ) msg = 'BLACKJACK! YOU WIN (3:2)';
|
||||||
else if(dealerBJ) msg = 'DEALER BLACKJACK — YOU LOSE';
|
else if(dealerBJ) msg = 'DEALER BLACKJACK — YOU LOSE';
|
||||||
else if(p > 21) msg = 'PLAYER BUST — YOU LOSE';
|
else if(p > 21) msg = 'PLAYER BUST — YOU LOSE';
|
||||||
else if(d > 21) msg = 'DEALER BUST — YOU WIN!';
|
else if(d > 21) msg = 'DEALER BUST — YOU WIN!';
|
||||||
else if(p > d) msg = 'YOU WIN!';
|
else if(p > d) msg = 'YOU WIN!';
|
||||||
else if(p < d) msg = 'YOU LOSE!';
|
else if(p < d) msg = 'YOU LOSE!';
|
||||||
else msg = 'PUSH (DRAW)';
|
else msg = 'PUSH (DRAW)';
|
||||||
|
|
||||||
endMessage.innerText = msg;
|
endMessage.innerText = msg;
|
||||||
endScreen.style.display = 'flex';
|
endScreen.style.display = 'flex';
|
||||||
document.getElementById('status').innerText = msg;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function hit(){
|
function hit(){
|
||||||
if(gamePhase !== 'PLAYING' || animLock) return;
|
if(gamePhase !== 'PLAYING' || animLock) return;
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
|
|
||||||
dealPlayer();
|
dealPlayer();
|
||||||
if(calc(playerCards) > 21){
|
if(calc(playerCards) > 21){
|
||||||
setTimeout(()=> finishResult(), 500);
|
setTimeout(()=> finishResult(), 500);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function stand(){
|
function stand(){
|
||||||
if(gamePhase !== 'PLAYING' || animLock) return;
|
if(gamePhase !== 'PLAYING' || animLock) return;
|
||||||
|
|
||||||
gamePhase = 'DEALER_TURN';
|
gamePhase = 'DEALER_TURN';
|
||||||
updateButtonState();
|
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(){
|
function startGame(){
|
||||||
gamePhase = 'DEALING';
|
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';
|
|
||||||
updateButtonState();
|
updateButtonState();
|
||||||
document.getElementById('status').innerText = 'YOUR TURN';
|
|
||||||
|
|
||||||
const p = calc(playerCards);
|
playerCards = [];
|
||||||
const playerBJ = (p === 21 && playerCards.length === 2);
|
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
|
setTimeout(()=>dealPlayer(), 100);
|
||||||
}, 1000);
|
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);
|
hitBtn.addEventListener('click', hit);
|
||||||
standBtn.addEventListener('click', stand);
|
standBtn.addEventListener('click', stand);
|
||||||
|
|
||||||
window.addEventListener('resize', ()=>{
|
window.addEventListener('resize', ()=>{
|
||||||
layoutOverlap(playerEls, cardsWrapper);
|
layoutOverlap(playerEls, cardsWrapper);
|
||||||
layoutOverlap(dealerEls, dealerWrapper);
|
layoutOverlap(dealerEls, dealerWrapper);
|
||||||
});
|
});
|
||||||
|
|
||||||
/* START GAME ONLY ONCE */
|
|
||||||
startGame();
|
startGame();
|
||||||
@ -25,3 +25,7 @@ document.querySelector(".minus").addEventListener("click", () => {
|
|||||||
|
|
||||||
input.value = newValue;
|
input.value = newValue;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.querySelector('#playBtn').addEventListener("click", () => {
|
||||||
|
console.log("Startgame");
|
||||||
|
});
|
||||||
|
|||||||
@ -7,34 +7,36 @@
|
|||||||
<link rel="stylesheet" href="assets/css/style.css">
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="stage" id="stage">
|
<div class="overlay">
|
||||||
<div class="overlay">
|
<div class="end-screen" id="endScreen" role="dialog" aria-modal="true">
|
||||||
<div id="deck" class="deck" aria-hidden="true">DECK</div>
|
<div id="endMessage">RESULT</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="table-area">
|
||||||
<div class="dealer-zone" aria-live="polite">
|
|
||||||
<div class="dealer-label">DEALER</div>
|
<div class="play-zone p16">
|
||||||
<div class="dealer-cards" id="dealerWrapper" aria-hidden="false"></div>
|
<div class="whois-label">DEALER</div>
|
||||||
<div class="dealer-label">Total Dealer: <span id="dealerTotalUI">0</span></div>
|
<div class="dealer-cards" id="dealerWrapper"></div>
|
||||||
|
<div class="totaltext">Total Dealer: <span class="totals" id="dealerTotalUI">0</span></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="player-zone">
|
<div class="play-zone">
|
||||||
<div class="dealer-label">PLAYER</div>
|
<div class="whois-label">PLAYER</div>
|
||||||
<div class="cards-wrapper" id="cardsWrapper" aria-live="polite"></div>
|
<div class="dealer-cards" id="cardsWrapper" aria-hidden="false"></div>
|
||||||
<div>Total Card: <strong id="playerTotalUI">0</strong></div>
|
<div class="totaltext">Total Card: <strong class="totals" id="playerTotalUI">0</strong></div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button id="stand" disabled>STAND</button>
|
<button id="stand" disabled>STAND</button>
|
||||||
<button id="hit" disabled>HIT</button>
|
<button id="hit" disabled>HIT</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="end-screen" id="endScreen" role="dialog" aria-modal="true">
|
|
||||||
<div id="endMessage">RESULT</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="assets/js/game.js"></script>
|
<script src="assets/js/game.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -18,51 +18,46 @@
|
|||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="id">
|
<html lang="id">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>Hit & Run</title>
|
<title>Hit & Run</title>
|
||||||
<link rel="stylesheet" href="assets/css/style.css">
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
<body>
|
||||||
<body>
|
<div class="main-wrapper">
|
||||||
<div style="padding-right: 32px;">
|
<div style="padding-right: 32px;">
|
||||||
<div class="gamename card">
|
<div class="gamename card">
|
||||||
Hit & Run <br>
|
Hit & Run <br>
|
||||||
Hit or you Lose.
|
Hit or you Lose.
|
||||||
|
</div>
|
||||||
|
<div style="padding-top: 32px; display:flex; flex-direction:column; align-items:center;">
|
||||||
|
<div class="p16">
|
||||||
|
Place your bet here
|
||||||
|
</div>
|
||||||
|
<div class="num-box">
|
||||||
|
<button class="btn minus">-</button>
|
||||||
|
<input min="1000" max="<?php echo $_SESSION['data']['money']; ?>"type="number" value="1000" style="margin-bottom: -1px;">
|
||||||
|
<button class="btn plus">+</button>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" id="playBtn">▶️ MAINKAN</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding-top: 32px; display:flex; flex-direction:column; align-items:center;">
|
|
||||||
<div>
|
|
||||||
|
|
||||||
Place your bet here
|
<div>
|
||||||
|
<div class="userbox">
|
||||||
|
<div class="avatar">P</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<div class="name"><?php echo $_SESSION['data']["username"]; ?></div>
|
||||||
|
<div class="saldo">Saldo: <span><?php echo $_SESSION['data']["money"]; ?></span></div>
|
||||||
|
<div class="status">Status: Masih Pemula Banghh....</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="num-box">
|
|
||||||
<button class="btn minus">-</button>
|
|
||||||
<input min="1000" max="<?php echo $_SESSION['data']['money']; ?>"type="number" value="1000" style="margin-bottom: -1px;">
|
|
||||||
<button class="btn plus">+</button>
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-primary" id="playBtn">▶️ MAINKAN</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
<div>
|
|
||||||
<div class="userbox">
|
|
||||||
<div class="avatar">P</div>
|
|
||||||
|
|
||||||
<div class="info">
|
|
||||||
<div class="name"><?php echo $_SESSION['data']["username"]; ?></div>
|
|
||||||
<div class="saldo">Saldo: <span><?php echo $_SESSION['data']["money"]; ?></span></div>
|
|
||||||
<div class="status">Status: Masih Pemula Banghh....</div>
|
|
||||||
</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>
|
<footer>© 2025 Hit Or Run by Rafael 5803025007, Stephen 5803025009, Biema 5803025018</footer>
|
||||||
<script src="assets/js/menu.js"></script>
|
<script src="assets/js/menu.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user