Merge branch 'frost' of github.com:Aevann1/rDrama into frost

remotes/1693045480750635534/spooky-22
Outrun Colors 2022-09-04 16:58:26 -05:00
commit e2ad3e6ca3
3 changed files with 324 additions and 324 deletions

View File

@ -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: 2rem;
}
/* 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;
}

View File

@ -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 `
<button
type="button"
class="btn btn-${
fullWidth ? "primary" : "secondary"
} lottery-page--action"
id="${id}"
onclick="${method}()"
style="${fullWidth ? "width: 100%;" : ""}"
>
${title}
</button>
`;
return `
<button
type="button"
class="btn btn-${
fullWidth ? "primary" : "secondary"
} lottery-page--action"
id="${id}"
onclick="${method}()"
style="${fullWidth ? "width: 100%;" : ""}"
>
${title}
</button>
`;
}
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);
}
}

View File

@ -1,6 +1,6 @@
{% extends "default.html" %} {% block content %}
<link rel="stylesheet" href="/assets/css/casino.css?v=12" />
<script src="/assets/js/casino.js?v=2002"></script>
<link rel="stylesheet" href="/assets/css/casino.css?v=13" />
<script src="/assets/js/casino.js?v=2003"></script>
<!-- New -->
<div class="casino-games">