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