PapaStrumpf/brickstack-pocker-palace
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>BrickStack Poker Palace | Play Poker</title>7 <link rel="icon" type="image/x-icon" href="https://static.photos/red/200x200/1">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Rubik:wght@400;700&display=swap');12 .font-lego {13 font-family: 'Bangers', cursive;14 }15 .font-sans-lego {16 font-family: 'Rubik', sans-serif;17 }18 .card {19 width: 120px;20 height: 180px;21 background: white;22 border-radius: 10px;23 box-shadow: 0 4px 8px rgba(0,0,0,0.2);24 display: flex;25 flex-direction: column;26 justify-content: space-between;27 padding: 10px;28 margin: 5px;29 position: relative;30 transition: transform 0.3s ease;31 }32 .card:hover {33 transform: translateY(-10px);34 }35 .card-value {36 font-size: 24px;37 font-weight: bold;38 }39 .card-suit {40 font-size: 30px;41 }42 .heart, .diamond {43 color: red;44 }45 .club, .spade {46 color: black;47 }48 .poker-table {49 background: #2e8b57;50 border-radius: 50%;51 border: 20px solid #654321;52 box-shadow: 0 0 20px rgba(0,0,0,0.5);53 }54 </style>55</head>56<body class="bg-lego-50 font-sans-lego">57 <!-- Navigation -->58 <nav class="bg-lego-500 text-white shadow-lg">59 <div class="container mx-auto px-4 py-3">60 <div class="flex justify-between items-center">61 <div class="flex items-center space-x-2">62 <i data-feather="box" class="w-8 h-8"></i>63 <span class="font-lego text-3xl">BRICKSTACK POKER</span>64 </div>65 <div class="hidden md:flex space-x-6">66 <a href="index.html" class="hover:text-secondary-500 transition">Home</a>67 <a href="poker.html" class="text-secondary-500">Poker</a>68 <a href="#" class="hover:text-secondary-500 transition">Tournaments</a>69 <a href="#" class="hover:text-secondary-500 transition">Leaderboard</a>70 </div>71 <button class="md:hidden">72 <i data-feather="menu" class="w-6 h-6"></i>73 </button>74 </div>75 </div>76 </nav>77 78 <!-- Poker Game -->79 <section class="py-16">80 <div class="container mx-auto px-4">81 <h1 class="font-lego text-5xl text-lego-700 text-center mb-12">BRICKSTACK POKER PALACE</h1>82 83 <div class="poker-table mx-auto max-w-4xl p-8 mb-12">84 <div class="flex justify-center mb-8 gap-2" id="community-cards">85<!-- Community cards will be placed here -->86 </div>87 <div class="flex justify-center gap-4">88 <div class="flex gap-2" id="player-cards">89<!-- Player cards will be placed here -->90 </div>91 </div>92 </div>93 94 <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">95 <div class="flex justify-between mb-6">96 <div>97 <h3 class="font-bold text-lg">Chips: <span id="chips" class="text-secondary-500">10,000</span></h3>98 </div>99 <div>100 <h3 class="font-bold text-lg">Pot: <span id="pot" class="text-lego-500">0</span></h3>101 </div>102 </div>103 104 <div class="flex flex-wrap justify-center gap-4 mb-6">105 <button class="bg-lego-500 hover:bg-lego-600 text-white font-bold py-3 px-6 rounded-lg lego-button" id="deal-btn">106 Deal107 </button>108 <button class="bg-secondary-500 hover:bg-secondary-600 text-white font-bold py-3 px-6 rounded-lg lego-button" id="bet-btn">109 Bet (100)110 </button>111 <button class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg lego-button" id="check-btn">112 Check113 </button>114 <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg lego-button" id="fold-btn">115 Fold116 </button>117</div>118 119 <div class="text-center">120 <p id="game-message" class="text-lg font-semibold text-gray-700 min-h-8">Welcome to BrickStack Poker! Press Deal to start.</p>121</div>122 </div>123 </div>124 </section>125 126 <!-- Footer -->127 <footer class="bg-lego-900 text-white py-8">128 <div class="container mx-auto px-4">129 <div class="flex flex-col md:flex-row justify-between items-center">130 <div class="mb-4 md:mb-0">131 <div class="flex items-center space-x-2">132 <i data-feather="box" class="w-6 h-6 text-lego-400"></i>133 <span class="font-lego text-2xl">BRICKSTACK POKER</span>134 </div>135 <p class="mt-2 text-lego-300">Building your poker skills one hand at a time</p>136 </div>137 <div class="flex space-x-6">138 <a href="#" class="hover:text-secondary-500 transition"><i data-feather="facebook" class="w-5 h-5"></i></a>139 <a href="#" class="hover:text-secondary-500 transition"><i data-feather="twitter" class="w-5 h-5"></i></a>140 <a href="#" class="hover:text-secondary-500 transition"><i data-feather="instagram" class="w-5 h-5"></i></a>141 </div>142 </div>143 <div class="border-t border-lego-700 mt-8 pt-8 text-sm text-lego-300">144 <div class="flex flex-col md:flex-row justify-between">145 <div class="mb-4 md:mb-0">146 <p>© 2023 BrickStack Poker Palace. All rights reserved.</p>147 </div>148 <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6">149 <a href="#" class="hover:text-white transition">Terms</a>150 <a href="#" class="hover:text-white transition">Privacy</a>151 <a href="#" class="hover:text-white transition">Contact</a>152 </div>153 </div>154 </div>155 </div>156 </footer>157 <script>158 // Initialize Feather Icons159 feather.replace();160 161 // Game state162 let gameState = {163 deck: [],164 playerCards: [],165 communityCards: [],166 chips: 10000,167 pot: 0,168 currentBet: 0,169 gamePhase: 'waiting' // waiting, preflop, flop, turn, river, showdown170 };171 172 // Initialize deck173 function initDeck() {174 const suits = ['♥', '♦', '♣', '♠'];175 const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];176 gameState.deck = [];177 178 for (let suit of suits) {179 for (let value of values) {180 gameState.deck.push({ suit, value });181 }182 }183 shuffleDeck();184 }185 186 // Fisher-Yates shuffle187 function shuffleDeck() {188 for (let i = gameState.deck.length - 1; i > 0; i--) {189 const j = Math.floor(Math.random() * (i + 1));190 [gameState.deck[i], gameState.deck[j]] = [gameState.deck[j], gameState.deck[i]];191 }192 }193 194 // Deal cards195 function dealCards() {196 if (gameState.gamePhase !== 'waiting') return;197 198 gameState.playerCards = [drawCard(), drawCard()];199 gameState.communityCards = [];200 gameState.gamePhase = 'preflop';201 gameState.currentBet = 100;202 gameState.chips -= 100;203 gameState.pot += 100;204 205 updateUI();206 updateMessage('Pre-flop: Your bet is 100 chips. Check, Bet, or Fold?');207 }208 209 function drawCard() {210 return gameState.deck.pop();211 }212 213 // Game phases214 function flop() {215 gameState.communityCards = [drawCard(), drawCard(), drawCard()];216 gameState.gamePhase = 'flop';217 updateUI();218 updateMessage('Flop: Community cards revealed. Check, Bet, or Fold?');219 }220 221 function turn() {222 gameState.communityCards.push(drawCard());223 gameState.gamePhase = 'turn';224 updateUI();225 updateMessage('Turn: Another community card. Check, Bet, or Fold?');226 }227 228 function river() {229 gameState.communityCards.push(drawCard());230 gameState.gamePhase = 'river';231 updateUI();232 updateMessage('River: Final community card. Check, Bet, or Fold?');233 }234 235 function showdown() {236 gameState.gamePhase = 'showdown';237 updateUI();238 evaluateHand();239 }240 241 // Player actions242 function bet(amount) {243 if (gameState.chips < amount) {244 updateMessage('Not enough chips!');245 return;246 }247 248 gameState.chips -= amount;249 gameState.pot += amount;250 gameState.currentBet = amount;251 252 advanceGamePhase();253 updateUI();254 updateMessage(`You bet ${amount} chips.`);255 }256 257 function check() {258 if (gameState.currentBet > 0) {259 updateMessage("Can't check when there's a bet. Call or Fold.");260 return;261 }262 263 advanceGamePhase();264 updateMessage('You checked.');265 }266 267 function fold() {268 gameState.gamePhase = 'waiting';269 gameState.pot = 0;270 updateUI();271 updateMessage('You folded. Press Deal to start a new game.');272 }273 274 function advanceGamePhase() {275 switch(gameState.gamePhase) {276 case 'preflop': flop(); break;277 case 'flop': turn(); break;278 case 'turn': river(); break;279 case 'river': showdown(); break;280 }281 }282 283 // Evaluate poker hand (simplified)284 function evaluateHand() {285 // In a real game, you'd evaluate the best 5-card hand from player + community cards286 // For demo purposes, we'll just show a random outcome287 const outcomes = [288 "You have a pair!",289 "You have two pairs!",290 "You have three of a kind!",291 "Straight!",292 "Flush!",293 "Full house!",294 "Four of a kind!",295 "Straight flush!",296 "Royal flush!"297 ];298 299 const winChance = Math.random();300 if (winChance > 0.7) {301 const winAmount = gameState.pot * (winChance > 0.9 ? 2 : 1.5);302 gameState.chips += Math.floor(winAmount);303 updateMessage(`You win! ${outcomes[Math.floor(Math.random() * outcomes.length)]} Won ${Math.floor(winAmount)} chips!`);304 } else {305 updateMessage(`You lose this hand. ${outcomes[Math.floor(Math.random() * outcomes.length)]}`);306 }307 308 gameState.pot = 0;309 gameState.gamePhase = 'waiting';310 updateUI();311 }312 313 // UI updates314 function updateUI() {315 // Update chips and pot316 document.getElementById('chips').textContent = gameState.chips.toLocaleString();317 document.getElementById('pot').textContent = gameState.pot.toLocaleString();318 319 // Update player cards320 const playerCardsEl = document.getElementById('player-cards');321 playerCardsEl.innerHTML = '';322 323 for (let card of gameState.playerCards) {324 const cardEl = document.createElement('div');325 cardEl.className = 'card';326 cardEl.innerHTML = `327 <div class="card-value ${card.suit === '♥' || card.suit === '♦' ? 'heart' : 'club'}">${card.value}</div>328 <div class="card-suit ${card.suit === '♥' || card.suit === '♦' ? 'heart' : 'club'}">${card.suit}</div>329 <div class="card-value ${card.suit === '♥' || card.suit === '♦' ? 'heart' : 'club'}" style="transform: rotate(180deg);">${card.value}</div>330 `;331 playerCardsEl.appendChild(cardEl);332 }333 334 // Update community cards335 const communityCardsEl = document.getElementById('community-cards');336 communityCardsEl.innerHTML = '';337 338 for (let card of gameState.communityCards) {339 const cardEl = document.createElement('div');340 cardEl.className = 'card';341 cardEl.innerHTML = `342 <div class="card-value ${card.suit === '♥' || card.suit === '♦' ? 'heart' : 'club'}">${card.value}</div>343 <div class="card-suit ${card.suit === '♥' || card.suit === '♦' ? 'heart' : 'club'}">${card.suit}</div>344 <div class="card-value ${card.suit === '♥' || card.suit === '♦' ? 'heart' : 'club'}" style="transform: rotate(180deg);">${card.value}</div>345 `;346 communityCardsEl.appendChild(cardEl);347 }348 }349 350 function updateMessage(msg) {351 document.getElementById('game-message').textContent = msg;352 }353 354 // Initialize game355 document.addEventListener('DOMContentLoaded', () => {356 initDeck();357 358 // Button event listeners359 document.querySelector('.bg-lego-500').addEventListener('click', dealCards);360 document.querySelector('.bg-secondary-500').addEventListener('click', () => bet(100));361 document.querySelector('.bg-gray-500').addEventListener('click', check);362 document.querySelector('.bg-red-500').addEventListener('click', fold);363 });364 </script>365</body>366</html>