RYECATCHER.CA


© opyright ryecatcher Intellectual Property 2021

javascript source code for CodeBreaker (may not be complete)



                

                    /* STRUCTURAL OVERVIEW of functions:  ======================================================


                                     main func
                                   event listeners    ----  help func
                                          |
                                          |
                                     button_func
                               /    /     |   \     \
                           /      /       |     \      \
                        /       /         |        \      \
                    left     right     submit    numbers    erase
                                        / \
                                      /     \
                           code broken       scoring func

                    */

                    // INITIALIZE VARIABLES & ARRAYS USED IN THIS PROGRAM: =======================================
                    let code_digits = [4];  //initializes variable for length of code; can only be 4 or 5 digits
                    let game_over = [false];    //boolean variable to indicate if game is over or not
                    let direction = [1];    //variable used to increment move between columns in guess row
                    let guess_row_button = ["#r1c1"];  //initializes variable to navigate columns in guess row
                    let black = [0];      // initializes black marking counter variable to zero
                    let counter = [1];    // initializes counter variale tracking number of codebreaking attempts
                    let oneVal = [];      // this variable is not being used
                    let current_row = []   // array to store temp variable to keep track of current row
                    let number_pad_container_top_value = [160];    //this variable is not being used
                    let expand = [100];
                    let temp_pause = [5];  //this variable is not being used
                    let help_display = ["invisible"];  //variable used to toggle between display & hide help info

                    let guess_array = [];     //initialize array used to store values inputted from guess submit row
                    let code_array = [];      //initialize array used to store computer selected random code

                    let color_array = [null, "blue", "yellow", "red", "green", "orange", "brown"];  //color selection

                    let version = ["numeric"];   //variable used to indicate which game version was chosen
                    //let version = ["advanced_numeric"];
                    //let version = ["chromatic"];
                    //let version = ["advanced_chromatic"];


                    //EVENT LISTENER FOR BUTTON THAT SUBMITS GAME VERSION CHOICE AT BEGINNING  --------------------
                    document.querySelector("#version_button").addEventListener("click", main_func);
                    //-------------------------------------------------------------------------------------------


                    //MAIN FUNCTION ============================================================================
                    //called by event listener on version choice page; used to submit version & start game
                    function main_func() {

                    console.log("VERSION: " + version[0]);

                    let choices = document.getElementsByName("version");      //gets radio object

                    for (i = 0; i < choices.length; i++) {
                    if (choices[i].checked) {
                    let decision = choices[i].value;
                    version[0] = String(choices[i].value);
                    }
                    }
                    //returns value of element in radio object that was checked ie. chosen
                    // this represents the version of game that was chosen ie. "advanced numeric" etc.

                    temp_pause[0] = 20;  //this is not being used

                    document.querySelector("#version_select").style.display = "none";  //hide version page
                    document.querySelector("#codebreaker_container").style.display = "grid"; //display game
                    document.querySelector("#version_button").removeEventListener("click", main_func);
                    parent_element = document.querySelector("#version_select");
                    undesirable_element = document.querySelector("#version_button");
                    parent_element.removeChild(undesirable_element);    //remove unecessary version button

                    document.querySelector("body").style.backgroundColor = "plum";  //sets screen bg color


                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) { guess_array = [null, null, null, null, null] }   //if advanced chosen then initialize guess array to 5 digits
                    else { guess_array = [null, null, null, null]; }   //if not advanced then initialize to 4 digits

                    // document.querySelector("#r1c6").textContent = "<====";
                    document.querySelector("#r1c6").textContent = "<<< 1";   //guess row attempt indicator display
                    document.querySelector("#r1c6").style.color = "black";  //sets color for attempt indicator display
                    document.querySelector("#r1c6").style.border = "2px solid lightgray";  //hides default border
                    document.querySelector("#r1c6").style.backgroundColor = "lightgray";  //hides default bg color
                    document.querySelector("#right").style.border = "4px solid black";  //thicken indicator border
                    document.querySelector("#r1c1").style.border = "4px solid black";   //thicken indicator border

                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#codebreaker_title").style.margin = "0px 0px 0px 0px";
                    }
                    else { document.querySelector("#codebreaker_title").style.margin = "0px 20px 0px 20px"; }
                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#container").style.margin = "0px 0px 0px 0px";
                    }
                    else { document.querySelector("#container").style.margin = "0px 20px 0px 20px"; }

                    //if chromatic version was chosen sets the colors for the number pad buttons:
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#one").style.backgroundColor = color_array[1];  //sets bg color
                    document.querySelector("#one").style.color = color_array[1];  //hides displayed numbers
                    document.querySelector("#two").style.backgroundColor = color_array[2];
                    document.querySelector("#two").style.color = color_array[2];
                    document.querySelector("#three").style.backgroundColor = color_array[3];
                    document.querySelector("#three").style.color = color_array[3];
                    document.querySelector("#four").style.backgroundColor = color_array[4];
                    document.querySelector("#four").style.color = color_array[4];
                    document.querySelector("#five").style.backgroundColor = color_array[5];
                    document.querySelector("#five").style.color = color_array[5];
                    document.querySelector("#six").style.backgroundColor = color_array[6];
                    document.querySelector("#six").style.color = color_array[6];
                    }

                    //if advanced version was chosen this adjusts/adds extra 5th column and widens display
                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    console.log("ADVANCED NUMERIC!!!!");
                    document.querySelector("#container").style.width = "280px";   //widens the display vessel
                    document.querySelector("#container").style.gridTemplateColumns = "40px 40px 40px 40px 40px 70px";    //notice additional 40px added for a fifth number column
                    let new_button = document.createElement("button");   //creates fifth button on code row
                    let parent_element = document.querySelector("#container");
                    let code_row_button = document.querySelector("#r0c6");
                    parent_element.insertBefore(new_button, code_row_button);   //inserts button in position
                    document.querySelectorAll("button")[4].setAttribute("id", "r0c5");  //create reference attrib.
                    document.querySelectorAll("button")[4].setAttribute("class", "button answer");
                    document.querySelectorAll("button")[4].textContent = "?";

                    let new_butt = document.createElement("button");   //create fifth button on guess row
                    let guess_row_button = document.querySelector("#r1c6");
                    parent_element.insertBefore(new_butt, guess_row_button);   //inserts button in position
                    document.querySelectorAll("button")[10].setAttribute("id", "r1c5"); //create reference attrib.
                    document.querySelectorAll("button")[10].setAttribute("class", "select");

                    document.querySelector("#codebreaker_title").style.width = "260px"; //change title
                    document.querySelector("#codebreaker_title").textContent = "ADVANCED CODEBREAKER";  //title
                    document.querySelector("#codebreaker_title").style.fontWeight = "800";
                    document.querySelector("#codebreaker_title").style.padding = "8px 0px 0px 40px";
                    }

                    //let code_array = [2, 2, 6, 3];     //temp code array values for test purposes

                    //if advanced version was chosen then code length is set to 5 digits else its 4 digits:
                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    code_digits[0] = 5
                    }
                    else { code_digits[0] = 4; }

                    //computer picks random code for either 4 or 5 digit length:
                    for (let i = 0; i < code_digits[0]; i = i + 1) {
                    code_array[i] = Math.floor(Math.random() * 6) + 1;
                    } //puts random # in appropriate array elem.
                    console.log("RANDOM CODE ARRAY: " + code_array);

                    let code_reveal = "";   //this is to facilitate the cheat reveal when cursor over the CODE button
                    for (let i = 0; i < code_array.length; i++) {
                    code_reveal = code_reveal + String(code_array[i]) + " ";
                    }
                    document.querySelector("#r0c6").setAttribute("title", code_reveal);

                    // HELP BUTTON EVENT LISTENER ----------------------------------------------------
                    console.log("help button display");
                    document.querySelector("#help_button").style.display = "block";   //to display help button
                    document.querySelector("#help_button").addEventListener("click", help_func);  //to display help
                    //  ----------------------------------------------------------------------------------

                    //  SELECTION PAD BUTTONS EVENT LISTENERS:  --------------------------------------------
                    let numberPad = document.querySelector("#number_pad");
                    numberPad.addEventListener("click", button_func, false);
                    //  -----------------------------------------------------------------------------------

                    }  // end of main_func()


                    // HELP FUNCTION  =======================================================================
                    //called by HELP button & related event listener at end of main func
                    function help_func() {
                    if (game_over[0]) { location.reload(); }    //restarts game if player clicked PLAY button

                    if (help_display[0] === "invisible") {
                    document.querySelector("#help_container").style.display = "block";  //to display help info
                    document.querySelector("#help_button").textContent = "CLOSE";  //to change HELP to CLOSE
                    help_display[0] = "visible";
                    }    //boolean variable to indicate help display is visible
                    else {
                    document.querySelector("#help_container").style.display = "none";  //hide help info
                    document.querySelector("#help_button").textContent = "HELP";  //to change CLOSE back to HELP
                    help_display[0] = "invisible";
                    }   //boolean variable to indicate help display is hidden
                    }

                    // BUTTONS FUNCTION  ========================================================================
                    //called by button pad event listeners at end of main_func
                    function button_func(event) {
                    if (game_over[0]) {
                    reset_buttons_borders();
                    console.log("GAME OVER!!!!");
                    return
                    }   //returns to prevent buttons from activating if game is over

                    if (event.target != event.currentTarget) {

                    if (event.target.id === "left") {
                    console.log("CONTROLS: left");
                    direction_left();
                    }  //calls left func to move left etc
                    if (event.target.id === "right") {
                    console.log("CONTROLS: right");
                    direction_right();
                    }
                    if (event.target.id === "one") {
                    console.log("CONTROLS: one");
                    numbers("1", "#one");
                    }   //call #func to register & display
                    if (event.target.id === "two") {
                    console.log("CONTROLS: two");
                    numbers("2", "#two");
                    }
                    if (event.target.id === "three") {
                    console.log("CONTROLS: three");
                    numbers("3", "#three");
                    }
                    if (event.target.id === "four") {
                    console.log("CONTROLS: four");
                    numbers("4", "#four");
                    }
                    if (event.target.id === "five") {
                    console.log("CONTROLS: five");
                    numbers("5", "#five");
                    }
                    if (event.target.id === "six") {
                    console.log("CONTROLS: six");
                    numbers("6", "#six");
                    }
                    if (event.target.id === "erase") {
                    console.log("CONTROLS: erase");
                    erase();
                    }
                    if (event.target.id === "submit") {
                    console.log("CONTROLS: submit");
                    submit_func();
                    }  //calls submit func to begin evaluation
                    }

                    return
                    }

                    // DIRECTION LEFT FUNCTION  =================================================================
                    // called by buttons func
                    function direction_left() {
                    if (direction[0] <= 1) { direction[0] = 1; return }  //return if already at left end
                    else {
                    direction[0] = direction[0] - 1;       //move one position to the left
                    reset_buttons_borders();
                    document.querySelector("#left").style.border = "4px solid black";  //thicken indicator
                    guess_row_button[0] = "#r1c" + String(direction[0]);      //to determine column position
                    console.log("guess row button: " + guess_row_button[0]);
                    document.querySelector(guess_row_button[0]).style.border = "4px solid black";  //indicator
                    }
                    }

                    // DIRECTION RIGHT FUNCTION  =================================================================
                    // called by buttons func
                    function direction_right() {
                    if (direction[0] > (code_digits[0] - 1)) { direction[0] = code_digits[0]; return } //rtn at end
                    else {
                    direction[0] = direction[0] + 1;    //move one position to the right
                    reset_buttons_borders();
                    document.querySelector("#right").style.border = "4px solid black";  //thicken indicator
                    guess_row_button[0] = "#r1c" + String(direction[0]);    //to determine column position
                    console.log("guess row button: " + guess_row_button[0]);
                    document.querySelector(guess_row_button[0]).style.border = "4px solid black";  //indicator
                    }
                    }

                    // RESET BUTTONS FUNCTION  ==================================================================
                    //called by ALL functions except for scoring func
                    function reset_buttons_borders() {
                    let button_array = document.querySelectorAll("button");
                    for (let i = 0; i < button_array.length; i++) {
                    button_array[i].style.border = "2px solid black";  //resets all borders to remove thickness
                    }
                    document.querySelector("#right").style.border = "2px solid black";  //resets border right button
                    document.querySelector("#r1c1").style.border = "2px solid black";   //resets guess row first butt
                    document.querySelector("#r1c6").style.border = "2px solid lightgray";  //hides border last button
                    if (game_over[0]) {
                    document.querySelector("#r1c6").style.border = "2px solid black";  //restores border last
                    document.querySelector("#right").style.border = "2px solid black";  //removes thickness
                    document.querySelector("#r1c1").style.border = "2px solid black";
                    }  //removes thickness
                    }     //for display purposes resets thick indicator border on 1st column and RIGHT buttons

                    // NUMBERS FUNCTION  =========================================================================
                    //called by button_func; first parameter is a string of number displayed on button ex. "3"
                    // second parameter is the id selector for the button ex. "#three"
                    function numbers(selected_number, number_button_object) {
                    reset_buttons_borders();
                    document.querySelector(number_button_object).style.border = "4px solid black";  //thick...
                    document.querySelector(guess_row_button[0]).style.border = "4px solid black";  //..indicator
                    document.querySelector(guess_row_button[0]).textContent = selected_number;  //displays number
                    guess_array[direction[0] - 1] = Number(selected_number);  //puts selected number into proper...
                    // ... position in guess array for evaluation purposes; direction[x] is determined in ...
                    // ... direction right or left functions; selected number is passed in via parameter

                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    let color_choice = color_array[Number(selected_number)];  //assigns appropriate color
                    document.querySelector(guess_row_button[0]).style.backgroundColor = color_choice;
                    document.querySelector(guess_row_button[0]).style.color = color_choice;
                    console.log("numbers array guess_array: " + guess_array);
                    }
                    return
                    }

                    // ERASE FUNCTION  ============================================================================
                    //called by button func
                    function erase() {
                    reset_buttons_borders();
                    document.querySelector("#erase").style.border = "4px solid black";   //thick indicator
                    document.querySelector(guess_row_button[0]).style.border = "4px solid black";
                    document.querySelector(guess_row_button[0]).textContent = "";
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    document.querySelector(guess_row_button[0]).style.backgroundColor = "lightyellow";
                    } //...
                    //...changes pre-existing color to white to effectively erase for display
                    guess_array[direction[0] - 1] = null;   //replaces pre-existing value with null
                    console.log("numbers array guess_array: " + guess_array);
                    }



                    //SUBMIT FUNCTION  ===========================================================================
                    //called by button func
                    function submit_func_z() {

                    reset_buttons_borders();
                    document.querySelector("#submit").style.border = "4px solid black";  //thicken border
                    //setTimeout(function() {reset_buttons_borders(); }, 1000);
                    //document.querySelector("#right").style.border = "4px solid black";
                    //document.querySelector("#r1c1").style.border = "4px solid black";


                    if (game_over[0]) {
                    reset_buttons_borders();
                    document.querySelector("#r1c6").style.border = "2px solid black";
                    console.log("GAME OVER!!!!");
                    return
                    }  //if game over will automatically return so as to neutralize submit button


                    counter[0] = counter[0] + 1;    //increments counter to track number of codebreak turn attempts
                    let scoring_string = scoring_func(code_array, guess_array); //gets scoring result "X0--" etc

                    if (black[0] === code_digits[0]) { code_broken(scoring_string) }
                    //checks whether value of black counter is equal to length of code array
                    //...if so then means all values matched and game is over...
                    //... calls code_broken func to wrap up game
                    //... if not equal then resume game...

                    else {
                    console.log("submit function: guess_array: " + guess_array);

                    let gridel = document.getElementById("container");   //gets object for container element
                    let beforel = document.getElementById("r1c1");  //gets object for first button of guess submit row

                    let aa = document.createElement("button");   // creates new button for new guess display row
                    aa.textContent = guess_array[0];          // displays value from guess submit row into new button
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    aa.style.backgroundColor = color_array[Number(guess_array[0])];  //displays bg color if chrom.
                    aa.style.color = color_array[Number(guess_array[0])];       //hides number if chromatic
                    document.getElementById("r1c1").style.backgroundColor = "lightyellow";
                    } //resets guess butt to white
                    document.getElementById("r1c1").textContent = "";  //clears guess submit row button for next entry
                    gridel.insertBefore(aa, beforel);            // inserts new row button just above guess submit row

                    let bb = document.createElement("button");
                    bb.textContent = guess_array[1];
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    bb.style.backgroundColor = color_array[Number(guess_array[1])];
                    bb.style.color = color_array[Number(guess_array[1])];
                    document.getElementById("r1c2").style.backgroundColor = "lightyellow";
                    }
                    document.getElementById("r1c2").textContent = "";
                    gridel.insertBefore(bb, beforel);

                    let cc = document.createElement("button");
                    cc.textContent = guess_array[2];
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    cc.style.backgroundColor = color_array[Number(guess_array[2])];
                    cc.style.color = color_array[Number(guess_array[2])];
                    document.getElementById("r1c3").style.backgroundColor = "lightyellow";
                    }
                    document.getElementById("r1c3").textContent = "";
                    gridel.insertBefore(cc, beforel);

                    let dd = document.createElement("button");
                    dd.textContent = guess_array[3];
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    dd.style.backgroundColor = color_array[Number(guess_array[3])];
                    dd.style.color = color_array[Number(guess_array[3])];
                    document.getElementById("r1c4").style.backgroundColor = "lightyellow";
                    }
                    document.getElementById("r1c4").textContent = "";
                    gridel.insertBefore(dd, beforel);

                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    let ee = document.createElement("button");   //creates 5th button on row if advanced version
                    ee.textContent = guess_array[4];       //assigns display value from guess array to this new button
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    ee.style.backgroundColor = color_array[Number(guess_array[4])];  //displays color if chromatic
                    ee.style.color = color_array[Number(guess_array[4])];       //hides number if chromatic
                    document.getElementById("r1c5").style.backgroundColor = "lightyellow";
                    } //resets guess butt to white
                    document.getElementById("r1c5").textContent = "";   //clears guess row display value for next turn
                    gridel.insertBefore(ee, beforel);
                    }

                    let ff = document.createElement("button");  //creates new submit button for new guess display row
                    //ee.textContent = scoring_func(code_array, guess_array);            // displays scoring result from guess attempt
                    ff.textContent = scoring_string;
                    // ee.style.fontweight = 900;    // applies bold font for display consistency
                    ff.setAttribute("class", "submit");   //adds attribute to adjust for wider button
                    gridel.insertBefore(ff, beforel);    // inserts new row button just above guess submit row


                    // guess_array = [null, null, null, null];   //this resets array to facilitate next guess attempt
                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    guess_array = [null, null, null, null, null]
                    }
                    else { guess_array = [null, null, null, null]; }

                    /*
                    for (let i=0; i < 10; i = i + 1) {
                    document.getElementById("container").removeChild(document.getElementById("container").lastChild);
                    }  //this loop removes the elements that comprise the last row of the grid to offset added top row
                    */

                    /*number_pad_container_top_value[0] = number_pad_container_top_value[0] + 40;
                    let top_value = String(number_pad_container_top_value[0]) + "px";
                    console.log("number pad container top value: " + top_value);
                    document.querySelector("#number_pad_container").style.top = top_value; */

                    expand[0] = expand[0] + 40;   //increments height of vessel to facilitate added guess row
                    expand_string = "30px " + String(expand[0]) + "px 30px 30px 80px";   //string representation
                    console.log("expand_string: " + expand_string);
                    //reset property value for height of rows to implement new display:
                    document.querySelector("#codebreaker_container").style.gridTemplateRows = expand_string;
                    document.querySelector("#container").style.marginTop = "0px";
                    document.querySelector("#codebreaker_title").style.marginBottom = "0px";


                    let attempt_display = "<<< " + String(counter[0]);  //to display current attempt number...
                    document.querySelector("#r1c6").textContent = attempt_display;  //...adjacent to guess buttons

                    }  //end of if black less than four array


                    console.log("remove");


                    setTimeout(reset_buttons_borders(), 5000);
                    document.querySelector("#right").style.border = "4px solid black";  //thicken indicator
                    document.querySelector("#r1c1").style.border = "4px solid black";   //thicken indicator
                    direction[0] = 1;    //reset position on first guess row button for next guess attempt
                    guess_row_button[0] = "#r1c1";    //ditto


                    if (game_over[0]) {
                    document.querySelector("#r1c6").style.border = "2px solid black";
                    document.querySelector("#right").style.border = "2px solid black";
                    document.querySelector("#r1c1").style.border = "2px solid black";
                    }

                    let offset_position = document.querySelector("#erase").offsetTop;  //position of ERASE button
                    let help_button_position = String(offset_position + 80) + "px";  //repos. HELP just below ERASE
                    document.querySelector("#help_button").style.top = help_button_position; //reposition HELP butt
                    let help_container_position = String(offset_position + 90) + "px";  //reposition HELP info
                    document.querySelector("#help_container").style.top = help_container_position;
                    console.log("OFFSET TOP: " + offset_position);

                    }    // end of submit_func



                    // CODE BROKEN FUNCTION  ===============================================================
                    //called by submit function (near beginning); parameter is string ex:"XXO__"
                    function code_broken(scoring_string) {
                    reset_buttons_borders();
                    console.log("LAST POINT BEFORE FAILS!!!!");
                    console.log("code_array: " + code_array);
                    console.log("code_array[0]: " + code_array[0]);

                    game_over[0] = true;   //sets game over status boolean variable to true to end game loop

                    document.querySelector("#r0c1").textContent = code_array[0]; //reveal code on code row
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#r0c1").style.backgroundColor = color_array[(code_array[0])];
                    document.querySelector("#r0c1").style.color = color_array[(code_array[0])];
                    console.log("reveal button colr: " + color_array[(code_array[0])]);
                    }

                    document.querySelector("#r0c2").textContent = code_array[1];
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#r0c2").style.backgroundColor = color_array[(code_array[1])];
                    document.querySelector("#r0c2").style.color = color_array[(code_array[1])];
                    }

                    document.querySelector("#r0c3").textContent = code_array[2];
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#r0c3").style.backgroundColor = color_array[(code_array[2])];
                    document.querySelector("#r0c3").style.color = color_array[(code_array[2])];
                    }

                    document.querySelector("#r0c4").textContent = code_array[3];
                    if ((version[0] === "chromatic") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#r0c4").style.backgroundColor = color_array[(code_array[3])];
                    document.querySelector("#r0c4").style.color = color_array[(code_array[3])];
                    }

                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#r0c5").textContent = code_array[4];
                    }
                    if (version[0] === "advanced_chromatic") {
                    document.querySelector("#r0c5").style.backgroundColor = color_array[(code_array[4])];
                    document.querySelector("#r0c5").style.color = color_array[(code_array[4])];
                    }

                    reset_buttons_borders();

                    document.querySelector("#r1c6").textContent = "XXXX";  //display all X's on guess row
                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    document.querySelector("#r1c6").textContent = "XXXXX";
                    }
                    document.querySelector("#r1c6").style.border = "2px solid black";
                    document.querySelector("#r1c6").style.backgroundColor = "white";

                    document.querySelector("#game_over_container").style.display = "block"; //displays...
                    let total_attempts = " " + String(counter[0] - 1) + " ";    //..."game over" message
                    document.querySelector("#span_info").textContent = total_attempts;
                    document.querySelector("#help_button").textContent = "PLAY";  //changes HELP butt to PLAY

                    }


                    // SCORING FUNCTION  ====================================================================
                    //called by submit_func (near top) to return evaluation string ie. "XXO__"
                    //first parameter is the secret code_array, second parameter is the guess_array
                    function scoring_func(code, guess_x) {
                    //let code = [2, 2, 6, 3];    sample array used for test purposes during development
                    //let guess = [6, 2, 1, 6];   ditto


                    let guess = [];    //create temp array copy so wont risk altering values in original
                    if ((version[0] === "advanced_numeric") || (version[0] === "advanced_chromatic")) {
                    guess = [null, null, null, null, null];   //initialize temp array to null for advanced
                    console.log("guess: ", guess); console.log("NULL x 5")
                    }
                    else { guess = [null, null, null, null]; }     //initialize temp array to null for regular
                    console.log("version[0]: " + version[0]);
                    console.log("GUESS null: " + guess);
                    for (let x = 0; x < code_digits[0]; x = x + 1) {
                    guess[x] = guess_x[x]; console.log("code_digits[0]: " + code_digits[0])
                    }    //copy values from guess_array to temp array


                    console.log("GUESS top: " + guess);
                    let k = 0;
                    for (let i of guess) {
                    console.log("null values: " + i);
                    if (i === null) {
                    guess[k] = 0;
                    }    //substitute null values for zero in temp array
                    k = k + 1;
                    }
                    console.log("GUESS: " + guess);


                    let guess_copy = [];          //create temp array for guess array so wont alter original
                    for (let i of guess) {
                    guess_copy.push(i.toString());
                    }   //append string copies of values to this temp array

                    console.log("guess_copy: " + guess_copy);

                    let code_copy = [];          //create temp array copy for code array so wont alter original
                    for (let i of code) {
                    code_copy.push(i.toString());
                    }   //append string copies of values to this temp array

                    console.log("code_copy: " + code_copy);

                    // let selection = ["0", "1", "2", "3", "4", "5"];
                    let selection = ["0", "1", "2", "3", "4", "5", "6"];   //array to contain possible avail. numbers

                    let code_freq = {};   //object to store frequency of possible avail. numbers for code array copy
                    let guess_freq = {};  ///object to store frequency of possible avail. numbers for guess array copy


                    //guess_freq object properties created & values initialized to zero
                    //example:  guess_freq = {"1":0, "2":0, "3":0, "4":0, "5":0, "6":0}
                    for (let sel of selection) {
                    guess_freq[sel] = 0;
                    }
                    console.log("initialiize guess_freq: " + guess_freq);

                    //guess_freq object values incremented if were inputted into guess_copy array
                    //example:  guess_freq = {"1":0, "2":2, "3":3, "4":0, "5":0, "6":0}
                    for (let sel of selection) {
                    if (guess_copy.includes(sel)) {
                    for (let i of guess_copy) {
                    if (i === sel) {
                    guess_freq[sel] = guess_freq[sel] + 1;
                    }
                    }
                    }
                    }

                    console.log("guess_freq:" + guess_freq);


                    //code_freq object properties created & values initialized to zero
                    //example:  code_freq = {"1":0, "2":0, "3":0, "4":0, "5":0, "6":0}
                    for (let sel of selection) {
                    code_freq[sel] = 0;
                    }
                    console.log("initialize code_freq:" + code_freq);

                    //code_freq object values incremented if were inputted into guess_copy array
                    //example:  code_freq = {"1":0, "2":2, "3":3, "4":0, "5":0, "6":0}
                    for (let sel of selection) {
                    if (code_copy.includes(sel)) {
                    for (let i of code_copy) {
                    if (i === sel) {
                    code_freq[sel] = code_freq[sel] + 1;
                    }
                    }
                    }
                    }

                    console.log("code_freq: " + code_freq);

                    // check for how many values in guess and code array match per same index
                    // ie. black represents marker for right color in right location:
                    black[0] = 0;
                    for (let i = 0; i < code_copy.length; i++) {
                    if (guess_copy[i] === code_copy[i]) {
                    black[0] = black[0] + 1;           //every time there is a match black is incremented
                    }
                    }
                    console.log("black: " + black[0]);


                    //check white ie. respresents marker for right color but not in right location
                    //checks for every property of guess and code objects with a value that is greater than zero
                    let white = 0;
                    for (let sel of selection) {
                    if (guess_freq[sel] > 0 && code_freq[sel] > 0) {
                    if (code_freq[sel] >= guess_freq[sel]) {
                    white = white + guess_freq[sel];
                    }
                    else if (code_freq[sel] < guess_freq[sel]) {
                    white = white + code_freq[sel];
                    }
                    }    //outer if statement
                    } //outer for loop


                    //must remove duplicate whites
                    white = white - black[0];
                    console.log("white: " + white);

                    let score_string = "";    // initialize empty string display for new guess attempt
                    if (black[0] > 0) {
                    for (let i = 0; i < black[0]; i = i + 1) {
                    score_string = score_string + "X";
                    }    // to concatenate add X markers to indicate right number in right location  ex: X
                    }
                    if (white > 0) {
                    for (let i = 0; i < white; i = i + 1) {
                    score_string = score_string + "O";
                    }    // to concatenate add O markers to indicate right number in wrong location  ex: XOO
                    }

                    console.log("SCORE STRING PRE-SPACES: " + score_string);

                    while (score_string.length < code_digits[0]) {
                    score_string = score_string + "_";
                    }     // to concatenade add _ space maintainer spaces to marking string to length of 4 or 5 (depending on game version) for display purposes  ex: XOO_

                    console.log("SCORE STRING: " + score_string);
                    console.log("GUESS: " + guess);
                    console.log("CODE: " + code);
                    console.log("GUESS ARRAY: " + guess_array);
                    console.log("GUESS ARRAY[0]: " + guess_array[0]);

                    return score_string;     // return the string that will be used to display the marking results

                    }  // end of scoring_func ()



                
Back To Top