revisi js dan css

cliff.css

@@ -1,26 +1,197 @@
-    :root{--bg:#0b1220;--card:#ffffff;--muted:#9aa6b2;--accent:#0abf5b}
+/* ==============================
-    *{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}
+   BASE TABLE LAYOUT
-    body{margin:0;min-height:100vh;background:linear-gradient(180deg,#08101a 0%, #0c1620 100%);color:var(--card);display:flex;align-items:center;justify-content:center;padding:24px}
+================================*/
-    .table{width:960px;max-width:98vw;background:linear-gradient(180deg,#072029,#0a2530);border-radius:14px;padding:20px;box-shadow:0 10px 40px rgba(2,6,12,.6)}
+body {
-    header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
+  margin: 0;
-    header h1{font-size:20px;margin:0}
+  padding: 0;
-    .controls{display:flex;gap:10px;align-items:center}
+  background: #0b6528;
+  font-family: Arial, sans-serif;
+  color: white;
+  display: flex;
+  justify-content: center;
+}
 
-    .info{display:flex;gap:12px;align-items:center}
+.table {
-    .chip{background:#072a1f;padding:8px 12px;border-radius:12px;color:var(--muted);font-weight:600}
+  width: 900px;
-    .bet{display:flex;gap:8px;align-items:center}
+  margin-top: 20px;
-    input[type=number]{width:90px;padding:6px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:transparent;color:var(--card)}
+  background: #134b2f;
-    button{background:var(--accent);border:none;padding:8px 12px;border-radius:10px;font-weight:700;color:#02220f;cursor:pointer}
+  padding: 20px;
-    button.secondary{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--card)}
+  border-radius: 15px;
-    main{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+  box-shadow: 0 0 20px #000a;
-    .board{padding:14px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border-radius:12px;min-height:220px}
+}
-    .section-title{color:var(--muted);font-size:12px;margin-bottom:6px}
+
-    .hand{display:flex;gap:10px;align-items:flex-end}
+header {
-    .card{width:86px;height:120px;border-radius:8px;background:white;color:#000;display:flex;flex-direction:column;justify-content:space-between;padding:8px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.35)}
+  text-align: center;
-    .card.red{color:#b22222}
+  margin-bottom: 20px;
-    .card.back{background:linear-gradient(180deg,#0a76b9,#094e7a);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
+}
-    .values{margin-top:8px;color:var(--muted);font-weight:700}
+
-    .actions{display:flex;gap:8px;margin-top:12px}
+.controls {
-    .message{margin-top:10px;color:var(--muted)}
+  display: flex;
-    footer{margin-top:12px;text-align:center;color:var(--muted);font-size:13px}
+  justify-content: space-between;
-    @media(max-width:700px){.hand{overflow:auto;padding-bottom:8px}.card{min-width:72px;width:72px;height:100px}}
+  margin-top: 10px;
+}
+
+.info {
+  display: flex;
+  gap: 15px;
+}
+
+.chip {
+  background: #222;
+  padding: 8px 14px;
+  border-radius: 10px;
+  font-weight: bold;
+}
+
+.bet {
+  display: flex;
+  gap: 10px;
+}
+
+.bet input {
+  width: 80px;
+  padding: 6px;
+  font-size: 16px;
+  border-radius: 6px;
+  border: none;
+}
+
+button {
+  padding: 7px 14px;
+  font-size: 16px;
+  border: none;
+  background: #28a745;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+button.secondary {
+  background: #dc3545;
+}
+
+button:hover {
+  filter: brightness(1.15);
+}
+
+/* ==============================
+            MAIN BOARD
+================================*/
+
+main {
+  display: flex;
+  justify-content: space-between;
+}
+
+.board {
+  width: 48%;
+  background: #0d3d23;
+  padding: 15px;
+  border-radius: 15px;
+  text-align: center;
+  box-shadow: inset 0 0 10px #000a;
+}
+
+.section-title {
+  font-size: 24px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+/* ==============================
+              CARDS
+================================*/
+
+.hand {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  min-height: 120px;
+  margin-bottom: 10px;
+}
+
+.card {
+  width: 70px;
+  height: 100px;
+  background: white;
+  color: black;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 8px;
+  font-size: 20px;
+  box-shadow: 0 0 5px #000;
+}
+
+.card.red {
+  color: red;
+}
+
+.card.back {
+  background: #222;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.values {
+  font-size: 20px;
+  margin-top: 5px;
+  font-weight: bold;
+}
+
+/* ==============================
+             ACTION BUTTONS
+================================*/
+
+.actions {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+/* ==============================
+         MESSAGE (WIN/LOSE)
+================================*/
+
+#message {
+  font-size: 28px;
+  font-weight: bold;
+  margin-top: 15px;
+  min-height: 40px;
+  text-shadow: none;
+}
+
+/* WIN EFFECT */
+.win {
+  color: #00ff55;
+  animation: glowWin 1s ease-in-out infinite alternate;
+}
+
+@keyframes glowWin {
+  from { text-shadow: 0 0 10px #00ff55; }
+  to   { text-shadow: 0 0 20px #55ff88; }
+}
+
+/* LOSE EFFECT */
+.lose {
+  color: #ff3333;
+  animation: glowLose 1s ease-in-out infinite alternate;
+}
+
+@keyframes glowLose {
+  from { text-shadow: 0 0 10px #ff3333; }
+  to   { text-shadow: 0 0 20px #ff7777; }
+}
+
+/* TIE (no class = normal text) */
+
+footer {
+  margin-top: 20px;
+  text-align: center;
+  opacity: .8;
+  font-size: 14px;
+}

ody git.js

@@ -1,3 +1,9 @@
+// SET MESSAGE (WIN/LOSE)
+function setMessage(text, status){
+  messageEl.textContent = text;
+  messageEl.className = status; // 'win', 'lose', atau '' (tie)
+}
+
 // Simple Blackjack implementation
 const SUITS = ['♠','♥','♦','♣'];
 const RANKS = ['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
@@ -49,7 +55,6 @@
 }
 
 function handValues(hand){
-      // returns best value <=21 or smallest if bust
   let totals = [0];
   for(const c of hand){
     const vals = cardValue(c);
@@ -59,7 +64,6 @@
     }
     totals = Array.from(new Set(newTotals));
   }
-      // separate <=21 and >21
   const valid = totals.filter(t=>t<=21);
   if(valid.length) return Math.max(...valid);
   return Math.min(...totals);
@@ -70,12 +74,20 @@
   hand.forEach((c,i)=>{
     const div = document.createElement('div');
     div.className='card'+(c.suit==='♥'||c.suit==='♦'?' red':'');
-        if(hideFirst && i===0){ div.className='card back'; div.textContent='TERSEMBUNYI'; }
+
-        else{
+    if(hideFirst && i===0){
-          const top = document.createElement('div'); top.textContent = c.rank + ' ' + c.suit; // top-left
+      div.className='card back'; 
-          const bot = document.createElement('div'); bot.style.alignSelf='flex-end'; bot.textContent = c.rank + ' ' + c.suit; // bottom-right
+      div.textContent='TERSEMBUNYI';
-          div.appendChild(top); div.appendChild(bot);
+    } else {
+      const top = document.createElement('div'); 
+      top.textContent = c.rank + ' ' + c.suit;
+      const bot = document.createElement('div'); 
+      bot.style.alignSelf='flex-end'; 
+      bot.textContent = c.rank + ' ' + c.suit;
+      div.appendChild(top); 
+      div.appendChild(bot);
     }
+
     el.appendChild(div);
   });
 }
@@ -91,75 +103,130 @@
 
 function startRound(){
   if(inRound) return;
+
   const bet = Number(betInput.value) || 0;
   if(bet <=0 || bet > balance){ alert(' BANK TIDAK CUKUP! '); return; }
-      currentBet = bet; balance -= bet; inRound=true; dealerHidden=true; messageEl.textContent='';
+
+  currentBet = bet; 
+  balance -= bet; 
+  inRound=true; 
+  dealerHidden=true;
+
+  setMessage('', ''); // RESET MESSAGE
 
   makeDeck(); shuffle();
   dealer = [deck.pop(), deck.pop()];
   player = [deck.pop(), deck.pop()];
 
-      // Check for natural blackjack
   updateUI();
+
+  // NATURAL BLACKJACK
   if(handValues(player)===21){
-        dealerHidden=false; updateUI();
+    dealerHidden=false; 
+    updateUI();
     const dealerVal = handValues(dealer);
-        if(dealerVal===21){ // push
+
-          balance += currentBet; messageEl.textContent = 'Tie (seri). Taruhan dikembalikan.';
+    if(dealerVal===21){
+      balance += currentBet;
+      setMessage('Tie (seri).', '');
     } else {
-          // player blackjack 3:2
       const payout = Math.floor(currentBet * 2.5);
-          balance += payout; messageEl.textContent = 'Blackjack! You Win.';
+      balance += payout;
+      setMessage('Blackjack! You Win!', 'win');
     }
-        inRound=false; currentBet=0; updateUI();
+
-      } else {
+    inRound=false; 
+    currentBet=0; 
     updateUI();
   }
 }
 
 function playerHit(){
-      if(!inRound) return; player.push(deck.pop()); updateUI();
+  if(!inRound) return;
-      const val = handValues(player);
+
-      if(val>21){ // bust
+  player.push(deck.pop());
-        dealerHidden=false; messageEl.textContent='Bust! Dealer Win!'; inRound=false; currentBet=0; updateUI();
+  updateUI();
+
+  if(handValues(player) > 21){
+    dealerHidden=false;
+    setMessage('Bust! You Lose!', 'lose');
+    inRound=false;
+    currentBet=0;
+    updateUI();
   }
 }
 
 function playerStand(){
-      if(!inRound) return; dealerHidden=false; // reveal dealer
+  if(!inRound) return;
-      // dealer plays
+
-      while(handValues(dealer)<17){ dealer.push(deck.pop()); }
+  dealerHidden=false;
-      const pv = handValues(player); const dv = handValues(dealer);
+
-      if(dv>21 || pv>dv){ // player wins
+  while(handValues(dealer)<17){
-        const payout = currentBet*2; balance += payout; messageEl.textContent='You Win!';
+    dealer.push(deck.pop());
-      } else if(pv===dv){ // push
+  }
-        balance += currentBet; messageEl.textContent='Tie (seri).';
+
-      } else { messageEl.textContent='Dealer Win!'; }
+  const pv = handValues(player);
-      inRound=false; currentBet=0; updateUI();
+  const dv = handValues(dealer);
+
+  if(dv>21 || pv>dv){
+    balance += currentBet*2;
+    setMessage('You Win!', 'win');
+
+  } else if(pv===dv){
+    balance += currentBet;
+    setMessage('Tie (seri).', '');
+
+  } else {
+    setMessage('You Lose!', 'lose');
+  }
+
+  inRound=false; 
+  currentBet=0; 
+  updateUI();
 }
 
 function playerDouble(){
   if(!inRound) return;
   if(balance < currentBet){ alert('Bank tidak cukup untuk double.'); return; }
-      // double: take exactly one card then stand
+
-      balance -= currentBet; currentBet = currentBet*2; player.push(deck.pop()); updateUI();
+  balance -= currentBet; 
-      const val = handValues(player);
+  currentBet *= 2;
-      if(val>21){ dealerHidden=false; messageEl.textContent='Bust setelah double. Dealer Win!'; inRound=false; currentBet=0; updateUI(); return; }
+
+  player.push(deck.pop());
+  updateUI();
+
+  if(handValues(player)>21){
+    dealerHidden=false;
+    setMessage('Bust! You Lose!', 'lose');
+    inRound=false;
+    currentBet=0;
+    updateUI();
+    return;
+  }
+
   playerStand();
 }
 
-    // Events
+// EVENTS
 betBtn.addEventListener('click', startRound);
 hitBtn.addEventListener('click', playerHit);
 standBtn.addEventListener('click', playerStand);
 doubleBtn.addEventListener('click', playerDouble);
+
 newRoundBtn.addEventListener('click', ()=>{
-      // reset everything
+  if(inRound && !confirm('Masih dalam ronde. Reset?')) return;
-      if(inRound){ if(!confirm('Masih dalam ronde. Ingin reset?')) return; }
+  balance = 1000;
-      balance = 1000; currentBet=0; inRound=false; dealer=[]; player=[]; deck=[]; dealerHidden=true; messageEl.textContent='Bank di-reset.'; updateUI();
+  currentBet=0;
+  inRound=false;
+  dealer=[]; 
+  player=[];
+  deck=[];
+  dealerHidden=true;
+  setMessage('Bank di-reset.', '');
+  updateUI();
 });
 
-    // keyboard shortcuts
+// KEYBOARD
 window.addEventListener('keydown', e=>{
   if(e.key==='h') playerHit();
   if(e.key==='s') playerStand();
@@ -167,5 +234,4 @@
   if(e.key==='Enter') startRound();
 });
 
-    // initial UI
 updateUI();