From 4995a69ace438d9abbdc775ba69dfc4bec4cb043 Mon Sep 17 00:00:00 2001 From: Aevann1 Date: Sun, 4 Sep 2022 23:58:01 +0200 Subject: [PATCH] convert to tabs --- files/assets/css/casino.css | 144 +++++------ files/assets/js/casino.js | 500 ++++++++++++++++++------------------ files/templates/casino.html | 4 +- 3 files changed, 324 insertions(+), 324 deletions(-) diff --git a/files/assets/css/casino.css b/files/assets/css/casino.css index 61f239acd..f497c7b2e 100644 --- a/files/assets/css/casino.css +++ b/files/assets/css/casino.css @@ -1,138 +1,138 @@ .casino-games { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; } .casino-game { - flex: 1; + flex: 1; } /* Slots */ #slots-block { - max-width: 700px; + max-width: 700px; } .casino-slots-results { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .casino-slots-results .reel { - display: flex; - align-items: center; - justify-content: center; - width: 100px; - height: 100px; - border: 2px solid black; - background-color: var(--gray); - border: 1px solid var(--black); - border-radius: 8px; - font-size: 64px; + display: flex; + align-items: center; + justify-content: center; + width: 100px; + height: 100px; + border: 2px solid black; + background-color: var(--gray); + border: 1px solid var(--black); + border-radius: 8px; + font-size: 64px; } .casino-slots-outcome { - visibility: hidden; - text-align: right; - margin: 1rem 0; + visibility: hidden; + text-align: right; + margin: 1rem 0; } /* Blackjack */ #blackjack-block { - max-width: 800px; + max-width: 800px; } @media screen and (max-width: 600px) { - .blackjack-table .hand .playing-card { - width: 60px; - height: 90px; - } + .blackjack-table .hand .playing-card { + width: 60px; + height: 90px; + } } .casino-blackjack-outcome { - visibility: hidden; - text-align: right; - margin-bottom: 1rem; + visibility: hidden; + text-align: right; + margin-bottom: 1rem; } .blackjack-table { - max-width: 500px; + max-width: 500px; } .blackjack-table .hand { - display: flex; - align-items: center; - justify-content: space-evenly; + display: flex; + align-items: center; + justify-content: space-evenly; } .blackjack-table .hand .playing-card { - display: flex; - align-items: center; - justify-content: center; - width: 60px; - height: 90px; - border: 2px solid black; - background-color: var(--gray); - border: 1px solid var(--black); - border-radius: 8px; - font-size: 30px; + display: flex; + align-items: center; + justify-content: center; + width: 60px; + height: 90px; + border: 2px solid black; + background-color: var(--gray); + border: 1px solid var(--black); + border-radius: 8px; + font-size: 30px; } .blackjack-table .hand .playing-card.dealt { - background-color: #ddd; + background-color: #ddd; } .casino-blackjack-actions { - text-align: right; + text-align: right; } /* Lottery */ .casino-lottery { - margin-top: 5rem; + margin-top: 5rem; } /* Blocks */ .casino-block { - padding: 1rem; - border: 4px solid #361506; - border-radius: 8px; - background-color: #092711; - margin: 2rem 0; + padding: 1rem; + border: 4px solid #361506; + border-radius: 8px; + background-color: #092711; + margin: 2rem 0; } .casino-block-title { - display: flex; - align-items: center; - font-size: 32px; - text-transform: uppercase; - letter-spacing: 4px; - opacity: 0.5; + display: flex; + align-items: center; + font-size: 32px; + text-transform: uppercase; + letter-spacing: 4px; + opacity: 0.5; } .casino-block-inner { - display: flex; - align-items: center; - justify-content: space-between; + display: flex; + align-items: center; + justify-content: space-between; } .casino-block-left { - display: flex; - align-items: flex-end; - justify-content: center; - flex: 1; + display: flex; + align-items: flex-end; + justify-content: center; + flex: 1; } @media screen and (max-width: 600px) { - .casino-block-left { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } + .casino-block-left { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } } .casino-block-game { - margin-right: 2rem; + margin-right: 2rem; } diff --git a/files/assets/js/casino.js b/files/assets/js/casino.js index 8f7ebd74f..aa539c812 100644 --- a/files/assets/js/casino.js +++ b/files/assets/js/casino.js @@ -1,311 +1,311 @@ // Shared function updatePlayerCoins(updated) { - if (updated.coins) { - document.getElementById('user-coins-amount').innerText = updated.coins; - } - - if (updated.procoins) { - document.getElementById('user-bux-amount').innerText = updated.procoins; - } + if (updated.coins) { + document.getElementById('user-coins-amount').innerText = updated.coins; + } + + if (updated.procoins) { + document.getElementById('user-bux-amount').innerText = updated.procoins; + } } // Slots function pullSlots() { - const wager = document.getElementById("casinoSlotsBet").value; - const currency = document.querySelector( - 'input[name="casinoSlotsCurrency"]:checked' - ).value; + const wager = document.getElementById("casinoSlotsBet").value; + const currency = document.querySelector( + 'input[name="casinoSlotsCurrency"]:checked' + ).value; - document.getElementById("casinoSlotsBet").disabled = true; - document.getElementById("casinoSlotsPull").disabled = true; + document.getElementById("casinoSlotsBet").disabled = true; + document.getElementById("casinoSlotsPull").disabled = true; - const xhr = new XMLHttpRequest(); - xhr.open("post", "/casino/slots"); - xhr.onload = handleSlotsResponse.bind(null, xhr); + const xhr = new XMLHttpRequest(); + xhr.open("post", "/casino/slots"); + xhr.onload = handleSlotsResponse.bind(null, xhr); - const form = new FormData(); - form.append("formkey", formkey()); - form.append("wager", wager); - form.append("currency", currency); + const form = new FormData(); + form.append("formkey", formkey()); + form.append("wager", wager); + form.append("currency", currency); - xhr.send(form); + xhr.send(form); } function handleSlotsResponse(xhr) { - let response; + let response; - try { - response = JSON.parse(xhr.response); - } catch (error) { - console.error(error); - } + try { + response = JSON.parse(xhr.response); + } catch (error) { + console.error(error); + } - const succeeded = - xhr.status >= 200 && xhr.status < 300 && response && !response.error; - const slotsResult = document.getElementById("casinoSlotsResult"); - slotsResult.classList.remove("text-success", "text-danger"); + const succeeded = + xhr.status >= 200 && xhr.status < 300 && response && !response.error; + const slotsResult = document.getElementById("casinoSlotsResult"); + slotsResult.classList.remove("text-success", "text-danger"); - if (succeeded) { - const { game_state, gambler } = response; - const state = JSON.parse(game_state); - const reels = Array.from(document.querySelectorAll(".reel")); - const symbols = state.symbols.split(","); + if (succeeded) { + const { game_state, gambler } = response; + const state = JSON.parse(game_state); + const reels = Array.from(document.querySelectorAll(".reel")); + const symbols = state.symbols.split(","); - for (let i = 0; i < 3; i++) { - reels[i].innerHTML = symbols[i]; - } + for (let i = 0; i < 3; i++) { + reels[i].innerHTML = symbols[i]; + } - slotsResult.style.visibility = "visible"; - slotsResult.innerText = state.text; + slotsResult.style.visibility = "visible"; + slotsResult.innerText = state.text; - if (state.text.includes("Won")) { - if (state.text.includes("Jackpot")) { - slotsResult.classList.add("text-warning"); - } else { - slotsResult.classList.add("text-success"); - } - } else if (state.text.includes("Lost")) { - slotsResult.classList.add("text-danger"); - } + if (state.text.includes("Won")) { + if (state.text.includes("Jackpot")) { + slotsResult.classList.add("text-warning"); + } else { + slotsResult.classList.add("text-success"); + } + } else if (state.text.includes("Lost")) { + slotsResult.classList.add("text-danger"); + } - updatePlayerCoins(gambler); - } else { - slotsResult.style.visibility = "visible"; - slotsResult.innerText = response.error; - slotsResult.classList.add("text-danger"); + updatePlayerCoins(gambler); + } else { + slotsResult.style.visibility = "visible"; + slotsResult.innerText = response.error; + slotsResult.classList.add("text-danger"); - console.error(response.error); - } + console.error(response.error); + } - document.getElementById("casinoSlotsBet").disabled = false; - document.getElementById("casinoSlotsPull").disabled = false; + document.getElementById("casinoSlotsBet").disabled = false; + document.getElementById("casinoSlotsPull").disabled = false; } // Blackjack // When the casino loads, look up the "blackjack status" of a player to either start a new game or continue an existing game. if ( - document.readyState === "complete" || - (document.readyState !== "loading" && !document.documentElement.doScroll) + document.readyState === "complete" || + (document.readyState !== "loading" && !document.documentElement.doScroll) ) { - checkBlackjackStatus(); + checkBlackjackStatus(); } else { - document.addEventListener("DOMContentLoaded", checkBlackjackStatus); + document.addEventListener("DOMContentLoaded", checkBlackjackStatus); } function checkBlackjackStatus() { - const xhr = new XMLHttpRequest(); - xhr.open("get", "/casino/blackjack"); - xhr.onload = handleBlackjackStatusResponse.bind(null, xhr); - xhr.send(); + const xhr = new XMLHttpRequest(); + xhr.open("get", "/casino/blackjack"); + xhr.onload = handleBlackjackStatusResponse.bind(null, xhr); + xhr.send(); } function handleBlackjackStatusResponse(xhr) { - let response; + let response; - try { - response = JSON.parse(xhr.response); - } catch (error) { - console.error(error); - } + try { + response = JSON.parse(xhr.response); + } catch (error) { + console.error(error); + } - const succeeded = - xhr.status >= 200 && xhr.status < 300 && response && !response.error; + const succeeded = + xhr.status >= 200 && xhr.status < 300 && response && !response.error; - if (succeeded) { - if (response.active) { - updateBlackjack(response.game_state); - } - } else { - console.error("error"); - } + if (succeeded) { + if (response.active) { + updateBlackjack(response.game_state); + } + } else { + console.error("error"); + } } // When starting a new game or taking an action in an existing one, a new state will be returned, and the DOM must be updated. function updateBlackjack(state) { - const { player, dealer, status } = state; - const lettersToSuits = { - S: "♠️", - H: "♥️", - C: "♣️", - D: "♦️", - "?": "?", - }; - const suitsToColors = { - "♠️": "black", - "♥️": "red", - "♣️": "black", - "♦️": "red", - "?": "black", - }; + const { player, dealer, status } = state; + const lettersToSuits = { + S: "♠️", + H: "♥️", + C: "♣️", + D: "♦️", + "?": "?", + }; + const suitsToColors = { + "♠️": "black", + "♥️": "red", + "♣️": "black", + "♦️": "red", + "?": "black", + }; - // Clear everything. - Array.from(document.querySelectorAll(".playing-card")).forEach((card) => { - card.innerText = ""; - card.style.color = "unset"; - card.classList.remove("dealt"); - }); + // Clear everything. + Array.from(document.querySelectorAll(".playing-card")).forEach((card) => { + card.innerText = ""; + card.style.color = "unset"; + card.classList.remove("dealt"); + }); - // Show dealer cards. - const dealerSlots = Array.from( - document.querySelectorAll('.playing-card[data-who="dealer"]') - ); - for (let i = 0; i < dealer.length; i++) { - const slot = dealerSlots[i]; + // Show dealer cards. + const dealerSlots = Array.from( + document.querySelectorAll('.playing-card[data-who="dealer"]') + ); + for (let i = 0; i < dealer.length; i++) { + const slot = dealerSlots[i]; - if (slot) { - // Technically, the dealer can use more than 5 cards, though it's rare. - // In that case, the result message is good enough. - // Thanks, Carp. 🐠 - slot.classList.add("dealt"); + if (slot) { + // Technically, the dealer can use more than 5 cards, though it's rare. + // In that case, the result message is good enough. + // Thanks, Carp. 🐠 + slot.classList.add("dealt"); - if (i > 0 && status === "active") { - break; - } + if (i > 0 && status === "active") { + break; + } - const rank = dealer[i][0]; - const suit = lettersToSuits[dealer[i][1]]; - const card = rank + suit; - slot.innerText = card; - slot.style.color = suitsToColors[suit]; - } - } + const rank = dealer[i][0]; + const suit = lettersToSuits[dealer[i][1]]; + const card = rank + suit; + slot.innerText = card; + slot.style.color = suitsToColors[suit]; + } + } - // Show player cards. - const playerSlots = Array.from( - document.querySelectorAll('.playing-card[data-who="player"]') - ); - for (let i = 0; i < player.length; i++) { - const slot = playerSlots[i]; - const rank = player[i][0]; - const suit = lettersToSuits[player[i][1]]; - const card = rank + suit; - slot.innerText = card; - slot.style.color = suitsToColors[suit]; - slot.classList.add("dealt"); - } + // Show player cards. + const playerSlots = Array.from( + document.querySelectorAll('.playing-card[data-who="player"]') + ); + for (let i = 0; i < player.length; i++) { + const slot = playerSlots[i]; + const rank = player[i][0]; + const suit = lettersToSuits[player[i][1]]; + const card = rank + suit; + slot.innerText = card; + slot.style.color = suitsToColors[suit]; + slot.classList.add("dealt"); + } - updateBlackjackActions(state); + updateBlackjackActions(state); - if (status !== "active") { - revealBlackjackResult(state); - } + if (status !== "active") { + revealBlackjackResult(state); + } } function revealBlackjackResult(state) { - const blackjackResult = document.getElementById("casinoBlackjackResult"); - const lookup = { - bust: ["Bust. Didn't work out for you, did it?", "danger"], - push: ["Pushed. This whole hand never happened.", "secondary"], - insured_loss: ["Lost, but at least you had insurance.", "secondary"], - lost: ["Lost. That was pathetic.", "danger"], - won: ["Won. This time.", "success"], - blackjack: ["Blackjack! Must be your lucky day.", "warning"], - }; - const [resultText, resultClass] = lookup[state.status]; + const blackjackResult = document.getElementById("casinoBlackjackResult"); + const lookup = { + bust: ["Bust. Didn't work out for you, did it?", "danger"], + push: ["Pushed. This whole hand never happened.", "secondary"], + insured_loss: ["Lost, but at least you had insurance.", "secondary"], + lost: ["Lost. That was pathetic.", "danger"], + won: ["Won. This time.", "success"], + blackjack: ["Blackjack! Must be your lucky day.", "warning"], + }; + const [resultText, resultClass] = lookup[state.status]; - blackjackResult.style.visibility = "visible"; - blackjackResult.innerText = resultText; - blackjackResult.classList.add(`text-${resultClass}`); + blackjackResult.style.visibility = "visible"; + blackjackResult.innerText = resultText; + blackjackResult.classList.add(`text-${resultClass}`); } function buildBlackjackAction(id, method, title, fullWidth = false) { - return ` - - `; + return ` + + `; } function clearBlackjackActions() { - const actionWrapper = document.getElementById("casinoBlackjackActions"); - actionWrapper.innerHTML = ""; + const actionWrapper = document.getElementById("casinoBlackjackActions"); + actionWrapper.innerHTML = ""; } function updateBlackjackActions(state) { - const actionWrapper = document.getElementById("casinoBlackjackActions"); + const actionWrapper = document.getElementById("casinoBlackjackActions"); - clearBlackjackActions(); + clearBlackjackActions(); - if (state.status === "active") { - document.getElementById("casinoBlackjackWager").style.display = "none"; + if (state.status === "active") { + document.getElementById("casinoBlackjackWager").style.display = "none"; - const actionLookup = { - hit: buildBlackjackAction("casinoBlackjackHit", "hitBlackjack", "Hit"), - stay: buildBlackjackAction( - "casinoBlackjackStay", - "stayBlackjack", - "Stay" - ), - double_down: buildBlackjackAction( - "casinoBlackjackDouble", - "doubleBlackjack", - "Double Down" - ), - insure: buildBlackjackAction( - "casinoBlackjackInsure", - "insureBlackjack", - "Insure" - ), - }; - const actions = state.actions.map((action) => actionLookup[action]); + const actionLookup = { + hit: buildBlackjackAction("casinoBlackjackHit", "hitBlackjack", "Hit"), + stay: buildBlackjackAction( + "casinoBlackjackStay", + "stayBlackjack", + "Stay" + ), + double_down: buildBlackjackAction( + "casinoBlackjackDouble", + "doubleBlackjack", + "Double Down" + ), + insure: buildBlackjackAction( + "casinoBlackjackInsure", + "insureBlackjack", + "Insure" + ), + }; + const actions = state.actions.map((action) => actionLookup[action]); - actionWrapper.innerHTML = actions.join("\n"); - } else { - // Game is over, deal a new game. - document.getElementById("casinoBlackjackWager").style.display = "flex"; + actionWrapper.innerHTML = actions.join("\n"); + } else { + // Game is over, deal a new game. + document.getElementById("casinoBlackjackWager").style.display = "flex"; - const deal = buildBlackjackAction( - "casinoBlackjackDeal", - "dealBlackjack", - "Deal", - true - ); + const deal = buildBlackjackAction( + "casinoBlackjackDeal", + "dealBlackjack", + "Deal", + true + ); - actionWrapper.innerHTML = deal; - } + actionWrapper.innerHTML = deal; + } } function dealBlackjack() { - const wager = document.getElementById("casinoBlackjackBet").value; - const currency = document.querySelector( - 'input[name="casinoBlackjackCurrency"]:checked' - ).value; + const wager = document.getElementById("casinoBlackjackBet").value; + const currency = document.querySelector( + 'input[name="casinoBlackjackCurrency"]:checked' + ).value; - document.getElementById("casinoBlackjackBet").disabled = true; - document.getElementById("casinoBlackjackDeal").disabled = true; - document.getElementById("casinoBlackjackWager").style.display = "none"; - document.getElementById("casinoBlackjackResult").style.visibility = "hidden"; + document.getElementById("casinoBlackjackBet").disabled = true; + document.getElementById("casinoBlackjackDeal").disabled = true; + document.getElementById("casinoBlackjackWager").style.display = "none"; + document.getElementById("casinoBlackjackResult").style.visibility = "hidden"; - const xhr = new XMLHttpRequest(); - xhr.open("post", "/casino/blackjack"); - xhr.onload = handleBlackjackResponse.bind(null, xhr); + const xhr = new XMLHttpRequest(); + xhr.open("post", "/casino/blackjack"); + xhr.onload = handleBlackjackResponse.bind(null, xhr); - const form = new FormData(); - form.append("formkey", formkey()); - form.append("wager", wager); - form.append("currency", currency); + const form = new FormData(); + form.append("formkey", formkey()); + form.append("wager", wager); + form.append("currency", currency); - xhr.send(form); + xhr.send(form); } function takeBlackjackAction(action) { - const xhr = new XMLHttpRequest(); - xhr.open("post", "/casino/blackjack/action"); - xhr.onload = handleBlackjackResponse.bind(null, xhr); + const xhr = new XMLHttpRequest(); + xhr.open("post", "/casino/blackjack/action"); + xhr.onload = handleBlackjackResponse.bind(null, xhr); - const form = new FormData(); - form.append("formkey", formkey()); - form.append("action", action); + const form = new FormData(); + form.append("formkey", formkey()); + form.append("action", action); - xhr.send(form); + xhr.send(form); } const hitBlackjack = takeBlackjackAction.bind(null, "hit"); @@ -314,32 +314,32 @@ const doubleBlackjack = takeBlackjackAction.bind(null, "double_down"); const insureBlackjack = takeBlackjackAction.bind(null, "insure"); function handleBlackjackResponse(xhr) { - let response; + let response; - try { - response = JSON.parse(xhr.response); - } catch (error) { - console.error(error); - } + try { + response = JSON.parse(xhr.response); + } catch (error) { + console.error(error); + } - const succeeded = - xhr.status >= 200 && xhr.status < 300 && response && !response.error; - const blackjackResult = document.getElementById("casinoBlackjackResult"); - blackjackResult.classList.remove("text-success", "text-danger"); + const succeeded = + xhr.status >= 200 && xhr.status < 300 && response && !response.error; + const blackjackResult = document.getElementById("casinoBlackjackResult"); + blackjackResult.classList.remove("text-success", "text-danger"); - if (succeeded) { - if (response.game_state) { - updateBlackjack(response.game_state); - } + if (succeeded) { + if (response.game_state) { + updateBlackjack(response.game_state); + } - if (response.gambler) { - updatePlayerCoins(response.gambler); - } - } else { - blackjackResult.style.visibility = "visible"; - blackjackResult.innerText = response.error; - blackjackResult.classList.add("text-danger"); + if (response.gambler) { + updatePlayerCoins(response.gambler); + } + } else { + blackjackResult.style.visibility = "visible"; + blackjackResult.innerText = response.error; + blackjackResult.classList.add("text-danger"); - console.error(response.error); - } + console.error(response.error); + } } diff --git a/files/templates/casino.html b/files/templates/casino.html index f24af6661..113589d49 100644 --- a/files/templates/casino.html +++ b/files/templates/casino.html @@ -1,6 +1,6 @@ {% extends "default.html" %} {% block content %} - - + +