From 71986e064fa399f1a9f6284c1693322571015afa Mon Sep 17 00:00:00 2001 From: AloneInSky Date: Tue, 2 Dec 2025 22:40:05 +0700 Subject: [PATCH] fix game ui --- public/assets/css/style.css | 295 +++++++++++------------ public/assets/js/game.js | 459 +++++++++++++++++------------------- public/assets/js/menu.js | 4 + public/game.php | 36 +-- public/index.php | 75 +++--- 5 files changed, 413 insertions(+), 456 deletions(-) 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
+
-
-
DEALER
-
-
Total Dealer: 0
+ +
+
DEALER
+
+
Total Dealer: 0
-
-
PLAYER
-
-
Total Card: 0
-
+
+
PLAYER
+
+
Total Card: 0
+
-
-
-
- diff --git a/public/index.php b/public/index.php index 7619d9a..5f9f9ce 100644 --- a/public/index.php +++ b/public/index.php @@ -18,51 +18,46 @@ - - - - Hit & Run - - - - -
-
- Hit & Run
- Hit or you Lose. + + + + Hit & Run + + + +
+
+
+ Hit & Run
+ Hit or you Lose. +
+
+
+ Place your bet here +
+
+ + + +
+ +
-
-
- Place your bet here +
+
+
P
+ +
+
+
Saldo:
+
Status: Masih Pemula Banghh....
+
-
- - - -
- +
- -
-
-
P
- -
-
-
Saldo:
-
Status: Masih Pemula Banghh....
-
-
- -
- - - +
© 2025 Hit Or Run by Rafael 5803025007, Stephen 5803025009, Biema 5803025018