tanner/html-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add 'High scoring' checkbox to find best hand with animation

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2025-12-25 14:23:39 -07:00
parent 7e52d5b7cd
commit 0c7c49b714
1 changed files with 64 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crib-count.html
+64 -8
View File
@@ -114,6 +114,24 @@
margin-bottom: 5px; margin-bottom: 5px;
font-size: 1.1em; font-size: 1.1em;
} }
#optionsContainer {
margin: 15px 0;
font-size: 1.1em;
}
#optionsContainer input {
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 5px;
cursor: pointer;
}
#optionsContainer label {
vertical-align: middle;
cursor: pointer;
}
</style> </style>
</head> </head>
<body> <body>
@@ -123,6 +141,10 @@
<div id="hand"></div> <div id="hand"></div>
<div id="starter"></div> <div id="starter"></div>
</div> </div>
<div id="optionsContainer">
<input type="checkbox" id="highScoreCheckbox">
<label for="highScoreCheckbox">High scoring</label>
</div>
<button id="dealButton">Deal New Hand</button> <button id="dealButton">Deal New Hand</button>
<button id="revealButton" style="display: none;">Reveal Score</button> <button id="revealButton" style="display: none;">Reveal Score</button>
<div id="scoreContainer" style="display: none;"> <div id="scoreContainer" style="display: none;">
@@ -143,6 +165,7 @@
// --- DOM Elements --- // --- DOM Elements ---
const dealButton = document.getElementById('dealButton'); const dealButton = document.getElementById('dealButton');
const revealButton = document.getElementById('revealButton'); const revealButton = document.getElementById('revealButton');
const highScoreCheckbox = document.getElementById('highScoreCheckbox');
const handContainer = document.getElementById('hand'); const handContainer = document.getElementById('hand');
const starterContainer = document.getElementById('starter'); const starterContainer = document.getElementById('starter');
const scoreContainer = document.getElementById('scoreContainer'); const scoreContainer = document.getElementById('scoreContainer');
@@ -176,19 +199,52 @@
} }
} }
function dealNewHand() { async function dealNewHand() {
const deck = createDeck(); dealButton.disabled = true;
shuffleDeck(deck); revealButton.style.display = 'none';
scoreContainer.style.display = 'none';
currentHand = deck.slice(0, 4);
starterCard = deck[4]; if (highScoreCheckbox.checked) {
await findHighScoreHand();
} else {
const deck = createDeck();
shuffleDeck(deck);
currentHand = deck.slice(0, 4);
starterCard = deck[4];
}
displayCards(currentHand, starterCard); displayCards(currentHand, starterCard);
scoreContainer.style.display = 'none'; dealButton.disabled = false;
revealButton.style.display = 'inline-block'; revealButton.style.display = 'inline-block';
} }
async function findHighScoreHand() {
let bestHand = [];
let bestStarter = null;
let maxScore = -1;
const deck = createDeck();
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
for (let i = 0; i < 100; i++) {
shuffleDeck(deck);
const hand = deck.slice(0, 4);
const starter = deck[4];
displayCards(hand, starter);
await sleep(10);
const { score } = calculateScore(hand, starter);
if (score > maxScore) {
maxScore = score;
bestHand = hand;
bestStarter = starter;
}
}
currentHand = bestHand;
starterCard = bestStarter;
}
// --- UI Functions --- // --- UI Functions ---
function createCardElement(card) { function createCardElement(card) {
const cardEl = document.createElement('div'); const cardEl = document.createElement('div');