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

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
2025-12-25 14:23:39 -07:00
parent 7e52d5b7cd
commit 0c7c49b714
1 changed files with 64 additions and 8 deletions
@@ -114,6 +114,24 @@
            margin-bottom: 5px;
            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>
 </head>
 <body>
@@ -123,6 +141,10 @@
            <div id="hand"></div>
            <div id="starter"></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="revealButton" style="display: none;">Reveal Score</button>
        <div id="scoreContainer" style="display: none;">
@@ -143,6 +165,7 @@
        // --- DOM Elements ---
        const dealButton = document.getElementById('dealButton');
        const revealButton = document.getElementById('revealButton');
+        const highScoreCheckbox = document.getElementById('highScoreCheckbox');
        const handContainer = document.getElementById('hand');
        const starterContainer = document.getElementById('starter');
        const scoreContainer = document.getElementById('scoreContainer');
@@ -176,19 +199,52 @@
            }
        }

-        function dealNewHand() {
-            const deck = createDeck();
-            shuffleDeck(deck);
+        async function dealNewHand() {
+            dealButton.disabled = true;
+            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);

-            scoreContainer.style.display = 'none';
+            dealButton.disabled = false;
            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 ---
        function createCardElement(card) {
            const cardEl = document.createElement('div');