Workaround for Yahtzee bug , CSS edits

Added a workaround for bugs related to scoring a Yahtzee: I've stepped through this in the dev console and the values match but the switch statement does not "see" it. Dirty workaround: score Yahtzee using the default case. Added CSS hover color to the scoring table. TODO: disable used scores using a running list (array) of used rows, add new game function, make a proper Yahtzee score check, clean up variable names and redundant CSS
ATeaDaze · May 18, 2024 · 46892ef · 46892ef
1 parent 5d8bfa8
commit 46892ef
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 46 deletions.
diff --git a/yahtzee/index.html b/yahtzee/index.html
@@ -1,3 +1,16 @@
+<!-- TODO: go through and improve the naming scheme of repeated variables
+  - Fix the bugs related to Yahtzee: switch does not detect userScoreYahtzee
+  - Implement a newGame() function which resets the entire game state
+  - Implement row interaction with 1 function: setRowInteraction(rowList[], 'none|auto');
+  - Make disabledScoreRow[] a dynamic list
+    - List contains every row on page load for no interaction
+    - Start new game, clear list, and add new rows to array during gameplay
+    NOTE: row interaction is often required at the same times
+  - Add hold/unhold all dice button or keybind
+  - Optimize checks for full house and straights
+  BUGS: button roll keybind conflicts with event handler for row selection ("click keydown"),
+  using the keybind for rollButton() skips a call to re-enable score table rows, 
+  x-of-a kind preview sometimes off (?) -->
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
@@ -10,10 +23,6 @@
 <body>
 <center>
 
-<!--
-<span class="mainHeader"><img src="images/yahtzee-icon-3d.png" class="headerLogo"> Y a h t z e e</span>
--->
-
 <img src="images/yahtzee-banner.png" class="mainHeader">
 
 <table class="mainContainer">

diff --git a/yahtzee/scripts/main.js b/yahtzee/scripts/main.js
@@ -1,15 +1,3 @@
-/* TODO: go through and improve the naming scheme of repeated variables
-  - Implement a newGame() function which resets the entire game state
-  - Implement row interaction with 1 function: setRowInteraction(rowList[], 'none|auto');
-  - Make disabledScoreRow[] a dynamic list
-    - List contains every row on page load for no interaction
-    - Start new game, clear list, and add new rows to array during gameplay
-    NOTE: row interaction is often required at the same times
-  - Add hold/unhold all dice button or keybind
-  - Optimize checks for full house and straights
-  BUGS: button roll keybind conflicts with event handler for row selection ("click keydown"),
-  using the keybind for rollButton() skips a call to re-enable score table rows, 
-  x-of-a kind preview sometimes off (?) */
 let currentDice =  [5,     5,     5,     5,     5     ];
 let selectedDice = [false, false, false, false, false ];
 
@@ -73,14 +61,11 @@ const audioBonus = new Audio("audio/bonus_upper.ogg");
 $(document).ready(function() {
   updateTurns();
   getKeyboardInput();
-  // Disable all scoring rows until game starts
   disableScoreSetRows();
   $("#txtStatusHeader").html(defaultStatusMsg);
 
   $("#btnRoll").click(function() {
     enableScoreSetRows();
-    // Clear list of disabled score rows (will need to modify order and list)
-//    disabledScoreRows = [];
     rollDice();
     bonusDifference = 63 - userScoreUpperSubtotal;
     if(bonusDifference > 0) {
@@ -119,7 +104,7 @@ $(document).ready(function() {
   $("[id^=row]").on("click", function() {
     // Enable total rows to allow calculations
     enableCalculationRows();
-    // TODO: there is definitely a better to do this
+    // TODO: there is definitely a better to do this (BUG: Yahtzee case is fucked)
     let activeRow = $(this).closest('tr');
     let activeCell = $(this).closest('tr').children('td:last');
     let activeRowID = this.id;
@@ -180,7 +165,9 @@ $(document).ready(function() {
         bNewScoreAdded = true;
         break;
       default:
-        // how did I end up here?
+        // Yahtzee case does not work (not sure why / dev conslole shows correct values under the hood)
+        userScoreYahtzee = previewRowTxt;
+        bNewScoreAdded = true;
         break;
     }
     if(bNewScoreAdded) {
@@ -220,7 +207,7 @@ function rollDice() {
       $("#currentDiceImg-" + j).attr("src","images/dice-" + currentDice[i] + ".png");
     }
   }
-
+  // Set lower score values to 0 for consistency with upper scores
   if(userScoreThreeOfAKind == null) $("#txtScoreThreeOfAKind").html(0);
   if(userScoreFourOfAKind == null) $("#txtScoreFourOfAKind").html(0);
   if(userScoreFullHouse == null) $("#txtScoreFullHouse").html(0);
@@ -303,10 +290,11 @@ function updateScorePreviews() {
   findLargeStraight(diceSorted, userScoreLargeStraight);
   // Yahtzee
   // BUG: getting yahtzee on the 1st turn does not seem to allow score submission (weird)
-  const allDiceAreEqual = arr => arr.every( v => v === arr[0] );
-  if( (allDiceAreEqual(currentDice)) && (userScoreYahtzee == null)) {
+  const findYahtzee = arr => arr.every( v => v === arr[0] );
+  if( (findYahtzee(currentDice)) && (userScoreYahtzee == null)) {
     audioYahtzee.play();
     $("#txtScoreYahtzee").html(50);
+//    previewScoreYahtzee = 50;
     nYahtzeeBonuses++;
   }
     previewLowerScores(previewScoreChance, userScoreChance, txtScoreChance);

diff --git a/yahtzee/styles/yahtzee.css b/yahtzee/styles/yahtzee.css
@@ -15,7 +15,6 @@ body {
 }
 
 table {
-/*  margin: auto; */
   border: none;
 }
 
@@ -28,7 +27,7 @@ tr[id^="row"] {
   cursor: pointer;
 }
 tr[id^="row"]:hover {
-  color: #ffffff;
+  color: turquoise;
   background-color: #111111;
 }
 tr[id^="row"]:active {
@@ -41,6 +40,10 @@ tr[id^="row"]:active {
   color: chartreuse;
   pointer-events: none;
 }
+tr.usedRow:hover {
+  color: indianred;
+/*  cursor: not-allowed; */
+}
 
 td[id^="txtScore"] {
   font-family: monospace;
@@ -103,26 +106,6 @@ tr.scoredRow:hover {
   height: 45px;
 }
 
-/*
-.mainHeader {
-  font-family: sans-serif;
-  font-size: 32pt;
-  font-weight: bold;
-  color: #c0c0c0;
-  height: 1.2em;
-  display: inline-block;
-  align-content: center;
-}
-
-td.mainHeader {
-  vertical-align: middle;
-}
-
-.headerLogo {
-  height: 1.0em;
-}
-*/
-
 .mainContainer {
   width: 30svw;
 }