Pure JavaScript poker hand analyzer UPDATE: fixing Ace Straight and commeting the code

Talking about Poker game, Game development and Javascript.

Did you enjoy the pure JavaScript poker hand analyzer to be used (also) in puzzle games I posted earlier this week? Unfortunately there was a glitch causing the function to detect Ace Straight not to work properly. I fixed it, and to give you some extra value I commented the source code so you can learn how it’s done. This is the fixed result of the script:
And this is the commented source code:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id = "table"></div>
<div id = "result" style = "font:normal 32px arial;margin:10px;"></div>

<script>

// this is the array with your actual hand. It will contain five numbers - the five cards - ranging from zero (the first Ace) to 51 (the last King)
var hand = [];

// this is a temporary array which will contain the modulo operation of each "hand" array element by 13. This will cause this array to be only filled by
// numbers from 0 (Ace) to 12 (King) no matter the suit
var valuesArray = [];

// this is a temporary array which will contain the suits of your original hand
var suitsArray = [];

// convertHand function will populate valuesArray and suitsArray starting from hand array
function convertHand(){
     for(var i = 0; i < 5; i ++){
          valuesArray[i] = hand[i] % 13;
          suitsArray[i] = Math.floor(hand[i] / 13);     
     }
}

// given a value "n", returns the number of occurrences of "n" in "hand" array. Useful to know how many "two"s or "three"s and so on we have on a hand
function occurrencesOf(n){
     var count = 0;
     var index = 0;   
     do{          
          index = valuesArray.indexOf(n, index) + 1;  
          if(index == 0){
               break;
          }
          else{
               count ++;
          }
     } while(index < valuesArray.length);
     return count;
}

// thanks to occurrencesOf, this function returns a string with the combination of duplicate cards.
// If you have "Four of a Kind" it will return "4", if you have "Three of a kind" il will return "3",
// if you have "Full House" it will return "32" or "23" and so on.
function duplicateCards(){
     var occurrencesFound = []; 
     var result = "";
     for(var i = 0; i < valuesArray.length; i++){
          var occurrences = occurrencesOf(valuesArray[i]);
          if(occurrences > 1 && occurrencesFound.indexOf(valuesArray[i]) == -1){
               result += occurrences; 
               occurrencesFound.push(valuesArray[i]);    
          }
     }
     return result;
}

// this function will return the lowest number in a hand. Useful to check for straights
function getLowest(){
     var min = 12;
     for(var i = 0; i < valuesArray.length; i++){
          min = Math.min(min, valuesArray[i]);     
     }
     return min;     
}

// we have a straight when starting from the lowest card we can find an occurrence of lowest card +1, +2, +3 and +4
function isStraight(){
     var lowest = getLowest();
     for(var i = 1; i < 5; i++){ 
          if(occurrencesOf(lowest + i) != 1){
               return false
          }     
     }
     return true;
}

// we have an ace straight when you have 10 (9), J (10), Q (11), K (12) and A (0)
function isAceStraight(){
     var lowest = 8;
     for(var i = 1; i < 5; i++){
          if(occurrencesOf(lowest + i) != 1){
               return false;
          }     
     }
     return occurrencesOf(0) == 1;
}

// we have a flush when all items in suitsArray have the same value
function isFlush(){
     for(var i = 0; i < 4; i ++){
          if(suitsArray[i] != suitsArray[i+1]){
               return false;
          }
     }
     return true;
}  

// main function to check the hand
function checkHand(){
     // just a string to output the result
     var resultString = "";
     // populating hand array with the values of the five <select> elements
     for(var i = 0; i < 5; i++){
          hand[i] = document.getElementById("card_" + i).value;
     }
     // calling convertHand to create valuesArray and suitsArray
     convertHand();
     switch(duplicateCards()){
          case "2":
               resultString = "1 Pair";
               break;
           case "22":
               resultString = "2 Pairs";
               break;
          case "3":
               resultString = "3 of a Kind";
               break;
          case "23":
          case "32":
               resultString = "Full House";
               break;
          case "4":
               resultString = "4 of a Kind";
               break;
          case "5":
               resultString = "5 of a Kind";
               break;
          default:
               if(isStraight()){
                    resultString = "Straight";     
               }
               if(isAceStraight()){
                    resultString = "Ace Straight";
               }
               break;
     }
     if(isFlush()){
          if(resultString){
               resultString += " and Flush";     
          }
          else{
               resultString = "Flush";
          }
     }
     if(!resultString){
          resultString = "nothing...";
     }
     document.getElementById("result").innerHTML = resultString;
}  

// THE REMAINING CODE IS USED JUST TO DRAW THE "CARDS" ON THE SCREEN AND TRIGGER WHEN THE PLAYER CHANGES A "CARD"

var cardSymbols = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var suitSymbols = ["?", "?", "?", "?"];
var tableHTML = '';
for(var j = 0; j < 5; j ++){
     tableHTML += '<select style = "padding:3px;font:normal 32px arial;margin:10px" id = "card_' + j + '" onchange = "checkHand();">';
     for(var i = 0; i < 52; i ++){
          tableHTML += '<option value = "' + i + '">' + cardSymbols[i % 13] + " " + suitSymbols[Math.floor(i / 13)] + '</option>';  
     }
     tableHTML += '</select>';   
}
document.getElementById("table").innerHTML = tableHTML;
checkHand();
     
</script>

</body>
</html>
You can download the source code, and next week I’ll show you an example of this engine in action.