jheaps/JoshHeaps.Net
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Feature/casino texas holdem #13

Merged
jheaps merged 2 commits from feature/casino-texas-holdem into master 2026-08-31 16:06:56 -06:00
Conversation 0 Commits 2 Files Changed 5
+165 -56
5 changed files with 165 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml
+7 -1
View File
@@ -23,6 +23,7 @@
<section id="tableSection">
<div id="pokerTableWrap">
<div id="pokerTable">
<div id="tableWatermark">Texas Hold'em</div>
<div id="potBadge">
<span id="potBadgeLabel">Pot</span>
<span id="potBadgeAmount">$0</span>
@@ -30,7 +31,7 @@
</div>
<div id="seatsLayer"></div>
</div>
<p class="tableHint">Drag a seat onto another seat to swap players. Click the dealer chip on a seat to make it the button.</p>
<p id="tableHint" class="tableHint"></p>
</section>
<aside id="holdemSidebar">
@@ -55,6 +56,11 @@
<option value="counterclockwise">Counterclockwise</option>
</select>
</label>
<label class="fieldRow">
<span>Dedicated dealer (not a seat)</span>
<input type="checkbox" id="dedicatedDealerToggle" />
</label>
<p class="fieldHint">Turn this on if a person outside the game deals — no seat shows the dealer button, but blinds still rotate automatically each hand.</p>
<label class="fieldRow">
<span>Base pot amount ($)</span>
<input type="number" id="basePotInput" min="0" step="1" placeholder="e.g. 500" />
JoshHeaps.Net/wwwroot/css/casino/holdem.css
+125 -53
View File
@@ -1,5 +1,5 @@
body {
background: #141414;
background: radial-gradient(ellipse at 50% -10%, #1c1c1c 0%, #101010 55%, #0a0a0a 100%);
min-height: 100vh;
margin: 0;
color: #e6e6e6;
@@ -29,6 +29,20 @@ body {
font-weight: 300;
letter-spacing: 0.04em;
color: #f5f5f5;
position: relative;
display: inline-block;
padding-bottom: 0.4rem;
}
#holdemHeader h1::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 42px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, #d8b46a, #a9782f);
}
.holdemSubtitle {
@@ -44,43 +58,45 @@ body {
}
.holdemBtn {
background: #2a2a2a;
background: linear-gradient(180deg, #2e2e2e, #232323);
color: #eee;
border: 1px solid #3a3a3a;
border-radius: 6px;
border-radius: 7px;
padding: 0.6rem 1rem;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.15s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.holdemBtn:hover {
background: #333;
background: linear-gradient(180deg, #383838, #2a2a2a);
border-color: #4a4a4a;
transform: translateY(-1px);
}
.holdemBtnAccent {
background: #0f5c1c;
background: linear-gradient(180deg, #16783a, #0d5225);
border-color: #1e8449;
color: #d6ffe0;
color: #ecffef;
}
.holdemBtnAccent:hover {
background: #146623;
background: linear-gradient(180deg, #1a8a44, #0f602c);
}
.holdemBtnDanger {
background: #3a1717;
background: linear-gradient(180deg, #4a1f1f, #351515);
border-color: #6b2626;
color: #ffd6d6;
}
.holdemBtnDanger:hover {
background: #4a1c1c;
background: linear-gradient(180deg, #572525, #401818);
}
.holdemBtnGhost {
@@ -124,35 +140,57 @@ body {
position: absolute;
inset: 6%;
border-radius: 50%;
background: radial-gradient(ellipse at center, #1f6b3a 0%, #124a27 70%, #0d3a1e 100%);
border: 10px solid #4a2e1a;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
background: radial-gradient(ellipse at 50% 42%, #227a45 0%, #175f37 45%, #0e4527 75%, #082c19 100%);
border: 14px solid #6b4225;
box-shadow:
inset 0 0 0 3px rgba(216, 180, 106, 0.55),
inset 0 0 80px rgba(0, 0, 0, 0.55),
0 0 0 4px #2c1a0d,
0 20px 50px rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
}
#tableWatermark {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.06);
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
pointer-events: none;
user-select: none;
}
#potBadge {
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 0.6rem 1.2rem;
position: relative;
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.55));
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
padding: 0.7rem 1.7rem;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.15rem;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.45);
}
#potBadgeLabel {
font-size: 0.7rem;
letter-spacing: 0.1em;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #bde9c9;
color: #d8b46a;
}
#potBadgeAmount {
font-size: 1.4rem;
font-weight: 600;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
}
@@ -168,14 +206,15 @@ body {
transform: translate(-50%, -50%);
width: 96px;
min-height: 54px;
background: #232323;
border: 2px solid #3a3a3a;
border-radius: 10px;
background: linear-gradient(160deg, #2c2c2c, #1b1b1b);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 0.3rem 0.4rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
cursor: grab;
z-index: 1;
text-align: center;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.seat.dragging {
@@ -183,36 +222,36 @@ body {
}
.seat.dropTarget {
outline: 2px dashed #09ff00;
outline: 2px dashed #d8b46a;
outline-offset: 2px;
}
.seat.seatInactive {
opacity: 0.45;
opacity: 0.4;
}
.seat.seatFolded {
border-style: dashed;
opacity: 0.6;
opacity: 0.55;
}
.seat.seatSelected {
border-color: #09ff00;
box-shadow: 0 0 0 2px rgba(9, 255, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.4);
border-color: rgba(9, 255, 0, 0.6);
box-shadow: 0 0 0 2px rgba(9, 255, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.seatChairNumber {
position: absolute;
top: 2px;
left: 5px;
font-size: 0.6rem;
left: 6px;
font-size: 0.58rem;
color: #777;
}
.seatPuckName {
font-size: 0.72rem;
font-weight: 600;
color: #eee;
color: #f0f0f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -220,17 +259,29 @@ body {
}
.seatPuckCards {
font-size: 0.65rem;
font-size: 0.68rem;
font-weight: 700;
font-family: var(--font-mono, monospace);
color: #bbb;
min-height: 0.9em;
color: #ddd;
min-height: 0.95em;
letter-spacing: 0.05em;
}
.seatPuckCards .cardRed {
color: #ff6b6b;
}
.seatPuckTotal {
font-size: 0.7rem;
display: inline-block;
margin-top: 0.15rem;
font-size: 0.64rem;
font-weight: 700;
color: #9be6a8;
min-height: 1em;
color: #a9f5b8;
background: rgba(9, 255, 0, 0.1);
border-radius: 999px;
padding: 0 0.35rem;
min-height: 1.1em;
line-height: 1.4;
}
.dealerChip {
@@ -240,19 +291,31 @@ body {
width: 22px;
height: 22px;
border-radius: 50%;
background: #444;
color: #ccc;
border: 2px solid #666;
background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8 55%, #b8b8b8 100%);
color: #222;
border: 2px solid #999;
font-weight: 700;
font-size: 0.68rem;
cursor: pointer;
z-index: 2;
opacity: 0.32;
transition: opacity 0.15s ease;
}
.seat:hover .dealerChip,
.dealerChip:focus-visible {
opacity: 1;
}
.dealerChip.active {
background: #f5d547;
border-color: #cba428;
background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5d547 55%, #cba428 100%);
border-color: #a9782f;
color: #3a2e00;
opacity: 1;
}
.dealerChip.hidden {
display: none;
}
.blindBadge {
@@ -261,9 +324,10 @@ body {
top: -9px;
font-size: 0.58rem;
font-weight: 700;
padding: 0.05rem 0.3rem;
border-radius: 8px;
padding: 0.05rem 0.34rem;
border-radius: 999px;
z-index: 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.blindBadge.visible {
@@ -272,13 +336,13 @@ body {
.sbBadge {
left: -6px;
background: #2b6cb0;
color: #dbeafe;
background: linear-gradient(180deg, #3f82d1, #2b5fa0);
color: #eaf3ff;
}
.bbBadge {
left: 22px;
background: #b7791f;
background: linear-gradient(180deg, #dba13f, #b7791f);
color: #fff7e6;
}
@@ -290,9 +354,11 @@ body {
.seatEditorPanel h2 {
margin: 0 0 0.6rem;
padding-bottom: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
color: #f5f5f5;
border-bottom: 1px solid rgba(216, 180, 106, 0.35);
}
.seatEditorForm {
@@ -340,10 +406,15 @@ body {
background: #fdfdfd;
color: #111;
border: 1px solid #3a3a3a;
border-radius: 5px;
border-radius: 6px;
padding: 0.35rem 0;
font-weight: 700;
font-family: var(--font-mono, monospace);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.cardInput.cardRed {
color: #c0392b;
}
.seatContribution {
@@ -444,10 +515,11 @@ body {
}
.sidebarPanel {
background: #1e1e1e;
background: linear-gradient(160deg, #212121, #1a1a1a);
border: 1px solid #333;
border-radius: 8px;
border-radius: 10px;
padding: 0.2rem 0.9rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.sidebarPanel summary {
JoshHeaps.Net/wwwroot/js/casino/holdem/main.js
+7
View File
@@ -26,6 +26,13 @@ document.addEventListener("DOMContentLoaded", () => {
Render.renderAll();
});
document.getElementById("dedicatedDealerToggle").addEventListener("change", e => {
state.dedicatedDealer = e.target.checked;
hooks.save(state);
Render.renderSeats();
Render.renderTableHint();
});
document.getElementById("tableNotes").addEventListener("input", e => {
state.notes = e.target.value;
hooks.save(state);
JoshHeaps.Net/wwwroot/js/casino/holdem/render.js
+25 -2
View File
@@ -29,12 +29,21 @@ const Render = {
this.renderNotes();
this.updatePotBadge();
this.renderSetupFields();
this.renderTableHint();
},
renderSetupFields() {
document.getElementById("seatCountInput").value = this.state.seatCount;
document.getElementById("directionSelect").value = this.state.direction;
document.getElementById("basePotInput").value = this.state.basePotAmount ?? "";
document.getElementById("dedicatedDealerToggle").checked = !!this.state.dedicatedDealer;
},
renderTableHint() {
const hint = document.getElementById("tableHint");
hint.textContent = this.state.dedicatedDealer
? "Drag a seat onto another seat to swap players."
: "Drag a seat onto another seat to swap players. Click the dealer chip on a seat to make it the button.";
},
renderNotes() {
@@ -80,6 +89,7 @@ const Render = {
const dealerChip = node.querySelector(".dealerChip");
dealerChip.classList.toggle("active", index === dealerIndex);
dealerChip.classList.toggle("hidden", !!this.state.dedicatedDealer);
dealerChip.addEventListener("click", e => {
e.stopPropagation();
this.state.dealerSeatIndex = index;
@@ -105,10 +115,21 @@ const Render = {
});
},
isRedSuit(card) {
return /[HD]$/i.test(card || "");
},
updatePuckContent(node, player, index) {
node.querySelector(".seatPuckName").textContent = player.name && player.name.trim() ? player.name.trim() : "";
const cards = (player.cards || []).filter(Boolean).join(" ");
node.querySelector(".seatPuckCards").textContent = cards;
const cardsEl = node.querySelector(".seatPuckCards");
cardsEl.innerHTML = "";
(player.cards || []).filter(Boolean).forEach((card, i) => {
if (i > 0) cardsEl.appendChild(document.createTextNode(" "));
const span = document.createElement("span");
if (this.isRedSuit(card)) span.className = "cardRed";
span.textContent = card;
cardsEl.appendChild(span);
});
const total = HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount);
node.querySelector(".seatPuckTotal").textContent = total > 0 ? Money.format(total) : "";
node.classList.toggle("seatInactive", !player.inHand);
@@ -222,8 +243,10 @@ const Render = {
card1.value = player.cards[0] || "";
card2.value = player.cards[1] || "";
[card1, card2].forEach((input, cardIdx) => {
input.classList.toggle("cardRed", this.isRedSuit(input.value));
input.addEventListener("input", () => {
input.value = input.value.toUpperCase();
input.classList.toggle("cardRed", this.isRedSuit(input.value));
player.cards[cardIdx] = input.value;
this.commitSeatChange(form, player, index);
});
JoshHeaps.Net/wwwroot/js/casino/holdem/state.js
+1
View File
@@ -36,6 +36,7 @@ const HoldemState = {
direction: "clockwise",
basePotAmount: null,
dealerSeatIndex: 0,
dedicatedDealer: false,
chipLegend: this.DEFAULT_CHIP_LEGEND.map(c => ({ ...c })),
seats: Array.from({ length: seatCount }, () => this.makePlayer()),
notes: "",