Embed

<!DOCTYPE html>
<html>
<head>
  <title>Sic Bo Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    h1 {
      color: #d35400;
      text-align: center;
    }
    .game-container {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .dice-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 30px 0;
    }
    .dice {
      width: 60px;
      height: 60px;
      background-color: white;
      border: 2px solid #333;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    button {
      background-color: #e67e22;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 18px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin: 5px;
    }
    button:hover {
      background-color: #d35400;
    }
    button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    .reset-btn {
      background-color: #34495e;
      margin-top: 20px;
    }
    .reset-btn:hover {
      background-color: #2c3e50;
    }
    #output {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      min-height: 60px;
      text-align: center;
    }
    .result {
      margin: 15px auto;
      padding: 10px;
      border-radius: 5px;
      max-width: 300px;
      text-align: center;
    }
    .small {
      background-color: #2ecc71;
      color: white;
    }
    .big {
      background-color: #e74c3c;
      color: white;
    }
    .triple {
      background-color: #9b59b6;
      color: white;
      animation: pulse 1s infinite;
    }
    .win {
      background-color: #27ae60;
      color: white;
    }
    .lose {
      background-color: #e74c3c;
      color: white;
    }
    .info-panel {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 15px;
      background-color: #34495e;
      color: white;
      border-radius: 5px;
    }
    .betting-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 20px 0;
    }
    .bet-option {
      padding: 10px 15px;
      background-color: #3498db;
      color: white;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s;
    }
    .bet-option:hover, .bet-option.selected {
      background-color: #2980b9;
      transform: scale(1.05);
    }
    .bet-option.selected {
      box-shadow: 0 0 0 3px #f39c12;
    }
    .instructions {
      background-color: #ecf0f1;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
    }
    input {
      padding: 10px;
      font-size: 16px;
      width: 100px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    @keyframes roll {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(90deg); }
      50% { transform: rotate(180deg); }
      75% { transform: rotate(270deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <h1>Sic Bo Game 🎲</h1>
  
  <div class="game-container">
    <div class="info-panel">
      <div>Balance: $<span id="balance">1000</span></div>
      <div>Current Bet: $<span id="currentBet">0</span></div>
      <div>Bet On: <span id="betType">None</span></div>
    </div>
    
    <div class="betting-area">
      <div class="bet-option" onclick="selectBet('small')">Small (4-10)</div>
      <div class="bet-option" onclick="selectBet('big')">Big (11-17)</div>
      <div class="bet-option" onclick="selectBet('triple')">Triple (All same)</div>
    </div>
    
    <div style="text-align: center; margin: 20px 0;">
      <input type="number" id="betAmount" min="10" max="1000" value="50" step="10">
      <button onclick="placeBet()">Place Bet</button>
    </div>
    
    <div class="dice-container">
      <div class="dice" id="dice1">?</div>
      <div class="dice" id="dice2">?</div>
      <div class="dice" id="dice3">?</div>
    </div>
    
    <button id="rollButton" onclick="rollDice()" disabled>Roll Dice</button>
    
    <button class="reset-btn" onclick="resetGame()">Reset Game</button>
    
    <div id="output"></div>
    
    <div class="instructions">
      <h3>How to Play:</h3>
      <ol>
        <li>Select a bet type (Small, Big, or Triple)</li>
        <li>Enter your bet amount (minimum $10)</li>
        <li>Click "Place Bet"</li>
        <li>Click "Roll Dice" to play</li>
        <li>Small wins on totals 4-10 (1:1 payout)</li>
        <li>Big wins on totals 11-17 (1:1 payout)</li>
        <li>Triple wins when all dice match (10:1 payout)</li>
        <li>Click "Reset Game" to start over</li>
      </ol>
    </div>
  </div>
  
  <script>
    // Game state
    let balance = 1000;
    let currentBet = 0;
    let betType = '';
    let betPlaced = false;
    
    // DOM elements
    const balanceEl = document.getElementById('balance');
    const currentBetEl = document.getElementById('currentBet');
    const betTypeEl = document.getElementById('betType');
    const betAmountEl = document.getElementById('betAmount');
    const rollButton = document.getElementById('rollButton');
    const outputEl = document.getElementById('output');
    
    function selectBet(type) {
      // Remove selected class from all options
      document.querySelectorAll('.bet-option').forEach(option => {
        option.classList.remove('selected');
      });
      
      // Add selected class to clicked option
      event.target.classList.add('selected');
      
      betType = type;
      betTypeEl.textContent = type.charAt(0).toUpperCase() + type.slice(1);
      updateUI();
    }
    
    function placeBet() {
      const amount = parseInt(betAmountEl.value);
      
      if (isNaN(amount) || amount < 10) {
        outputEl.textContent = "Minimum bet is $10";
        return;
      }
      
      if (amount > balance) {
        outputEl.textContent = "You don't have enough balance";
        return;
      }
      
      if (betType === '') {
        outputEl.textContent = "Please select a bet type first";
        return;
      }
      
      currentBet = amount;
      balance -= amount;
      betPlaced = true;
      
      updateUI();
      outputEl.textContent = `Bet placed: $${amount} on ${betType}`;
      rollButton.disabled = false;
    }
    
    function rollDice() {
      if (!betPlaced) {
        outputEl.textContent = "Please place a bet first";
        return;
      }
      
      // Reset display
      outputEl.innerHTML = '';
      document.querySelectorAll('.result').forEach(el => el.remove());
      
      // Disable roll button during animation
      rollButton.disabled = true;
      
      // Animate dice rolling
      const diceElements = [
        document.getElementById('dice1'),
        document.getElementById('dice2'),
        document.getElementById('dice3')
      ];
      
      // Show rolling animation
      diceElements.forEach(die => {
        die.textContent = '...';
        die.style.animation = 'roll 0.5s linear infinite';
      });
      
      // After a delay, show the actual roll
      setTimeout(() => {
        // Roll three dice
        const dice = [
          Math.floor(Math.random() * 6) + 1,
          Math.floor(Math.random() * 6) + 1,
          Math.floor(Math.random() * 6) + 1
        ];
        
        // Update dice display
        diceElements.forEach((die, index) => {
          die.textContent = dice[index];
          die.style.animation = 'none';
        });
        
        // Calculate results
        const total = dice.reduce((a, b) => a + b, 0);
        let category = total >= 4 && total <= 10 ? "Small" : "Big";
        const isTriple = dice[0] === dice[1] && dice[1] === dice[2];
        
        // Display results
        outputEl.innerHTML = `You rolled: ${dice.join(", ")} (Total: ${total})`;
        
        // Create result elements
        const categoryEl = document.createElement('div');
        categoryEl.className = `result ${category.toLowerCase()}`;
        categoryEl.textContent = category;
        document.querySelector('.game-container').appendChild(categoryEl);
        
        if (isTriple) {
          const tripleEl = document.createElement('div');
          tripleEl.className = 'result triple';
          tripleEl.textContent = 'TRIPLE!';
          document.querySelector('.game-container').appendChild(tripleEl);
        }
        
        // Check for winning conditions
        checkWinConditions(category, isTriple, total);
        
        // Reset for next round
        betPlaced = false;
        currentBet = 0;
        updateUI();
        
      }, 1000);
    }
    
    function checkWinConditions(category, isTriple, total) {
      let winAmount = 0;
      let resultMessage = '';
      let resultClass = '';
      
      if (betType === 'small' && category === 'Small') {
        winAmount = currentBet * 2; // 1:1 payout
        resultMessage = `You won $${winAmount}! Small (${total})`;
        resultClass = 'win';
      } 
      else if (betType === 'big' && category === 'Big') {
        winAmount = currentBet * 2; // 1:1 payout
        resultMessage = `You won $${winAmount}! Big (${total})`;
        resultClass = 'win';
      }
      else if (betType === 'triple' && isTriple) {
        winAmount = currentBet * 11; // 10:1 payout
        resultMessage = `JACKPOT! You won $${winAmount}! Triple ${dice[0]}`;
        resultClass = 'win';
      }
      else {
        resultMessage = `You lost $${currentBet}`;
        resultClass = 'lose';
      }
      
      // Update balance if won
      if (winAmount > 0) {
        balance += winAmount;
      }
      
      // Display result
      const resultEl = document.createElement('div');
      resultEl.className = `result ${resultClass}`;
      resultEl.textContent = resultMessage;
      document.querySelector('.game-container').appendChild(resultEl);
      
      updateUI();
    }
    
    function resetGame() {
      // Reset game state
      balance = 1000;
      currentBet = 0;
      betType = '';
      betPlaced = false;
      
      // Reset UI
      document.querySelectorAll('.bet-option').forEach(option => {
        option.classList.remove('selected');
      });
      
      document.getElementById('dice1').textContent = '?';
      document.getElementById('dice2').textContent = '?';
      document.getElementById('dice3').textContent = '?';
      
      betTypeEl.textContent = 'None';
      outputEl.textContent = 'Game reset. Place your bets!';
      rollButton.disabled = true;
      
      // Clear any result displays
      document.querySelectorAll('.result').forEach(el => el.remove());
      
      updateUI();
    }
    
    function updateUI() {
      balanceEl.textContent = balance;
      currentBetEl.textContent = currentBet;
      
      if (balance < 10) {
        outputEl.textContent = "Game over! Click Reset Game to play again.";
        rollButton.disabled = true;
      }
    }
    
    // Initialize game
    window.onload = function() {
      updateUI();
    };
  </script>
</body>
</html>

betdiamonds