© opyright ryecatcher Intellectual Property 2021
javascript source code for Memory Match Pictorial Version (Iconic Duos)
/* STRUCTURAL OVERVIEW of functions: ======================================================
/ --- choose random numbers
main_func --------- < --- shuffle array
event listeners \ --- create buttons in container
|
|
attempt_func
/ | \
/ | \
/ | \
display_images match mismatch
/ \ |
/ \ |
display_pic_title reset_borders
*/
//INITIALIZE VARIABLES AND ARRAYS USED IN THIS PROGRAM ========================================
let version = ["4x6"]; //initialize variable for version of game with default value
let number_of_tiles = [24]; //initializes number of tiles used, contingent on game version
let number_of_pairs = [12]; //initalizes number of pairs used, contingent on game version
let size_image_selection = [50]; //initializes number of images files to randomly select from
let countdown = [5]; //this is not being used
let first_button = [true]; //boolean variable to indicate if first button already pressed
let first_value = []; //initializes temp variable to track first button/tile pressed
let second_value = []; //initializes temp variable to track second button/tile pressed
let first_id_storage_variable = []; //init. temp var to store object ref for first button/tile
let match_count = [0]; //initializes variable to keep track of pairs matched
let miss_count = [0]; //initializes variable to keep track of missed attempts
let attempts_count = [0]; //initializes variable to keep track of total attempts
let top_adjustment = [0]; //adjusts red mismatch indicator border for diff. versions
let left_adjustment = [0]; //adjusts red mismatch indicator border for diff. versions
let left_centering_adjustment = [0]; //var to hold adjusts left value after page centering calculation
let pause_variable = [4]; // var for pause countdown timer during mismatches
let pause_timer = [0]; // var used to access setInterval for pause button countdown timer
//let unshuffled_array = create_content_array();
//let shuffled_array_contents = shuffle_array(unshuffled_array);
//console.log("shuffled_array_contents: " + shuffled_array_contents);
//let unshuffled_array_contents = choose_random_numbers(); //func to pick numbers from selection
//let shuffled_array_contents = shuffle_array(unshuffled_array_contents); //further shuffles no.s
//create_buttons_in_container(); //call func to create tiles with assigned shuffled numbers
//these numbers correspond to numbered image files which can then be accessed/displayed
//when the tiles/buttons are clicked
//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.
document.querySelector("#version_select").style.display = "none"; //hide version page
document.querySelector("#main_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 = "orange"; //sets screen bg color
//initialize variables used to position grid container on screen -----------------
//these initial values are for 4 x 6 version
let tile_value = 24; //total number of tiles ie. 4 x 6
let pair_value = 12; //total number of pairs
let main_width_value = "625px"; //total including 6 cols and 5px gaps
let main_height_value = "445px"; //total including 4 rows and 5px gaps
let main_height_value_number = 445; //numeric to use for calculations play again butt
let main_top_value = "90px"; //setting distance of grid from top of screen
let main_top_value_number = 90; //numeric to use for calculations play again butt
let main_left_value = "80px"; //setting distance of grid from left edge of screen
let heading_width_value = "625px";
let width_value = "625px"; //width in pixels of grid container containing tiles
let width_value_number = 625; //container width in numeric terms for calculating
let height_value = "415px"; //height in pixels of grid container containing tiles
let rows_value = "100px 100px 100px 100px"; //number of rows and widths in pixels
let columns_value = "100px 100px 100px 100px 100px 100px"; //# of cols and heights in px
main_left_value = String((screen.width - width_value_number) / 2) + "px"; //for centering
left_centering_adjustment[0] = ((screen.width - width_value_number) / 2); //global variable...
//...used to help position red indicator border for mismatches
switch (version[0]) {
case "4x6":
break;
case "5x6":
tile_value = 30;
pair_value = 15;
//main_width_value = "625px";
main_height_value = "550px"; //ie. 445 + 100 + 5
main_height_value_number = 550;
main_top_value = "40px"; //ie. 90 - 50
main_top_value_number = 40;
//main_left_value = "80px";
top_adjustment[0] = -50;
left_adjustment[0] = 0;
//heading_width_value = "625px";
//width_value = "625px";
height_value = "520px"; //ie. 415 + 100 + 5
rows_value = "100px 100px 100px 100px 100px"; //add additional row
//columns_value = "100px 100px 100px 100px 100px 100px";
break;
case "6x6":
tile_value = 36;
pair_value = 18;
//main_width_value = "625px";
main_height_value = "655px"; //ie. 445 + 100 + 5 +100 + 5
main_height_value_number = 655;
main_top_value = "20px"; //ie. 90 - 50 - 20
main_top_value_number = 20;
//main_left_value = "80px";
top_adjustment[0] = -70;
left_adjustment[0] = 0;
//heading_width_value = "625px";
//width_value = "625px";
height_value = "625px"; //ie. 415 + 100 + 5 + 100 + 5
rows_value = "100px 100px 100px 100px 100px 100px"; //add additional 2 rows
//columns_value = "100px 100px 100px 100px 100px 100px";
break;
case "6x7":
tile_value = 42;
pair_value = 21;
main_width_value = "730px"; //ie. 625 + 100 + 5 add extra column & gap
main_height_value = "655px"; //ie. 445 + 100 + 5 +100 + 5
main_height_value_number = 655;
main_top_value = "20px"; //ie. 90 - 50 - 20
main_top_value_number = 20;
//main_left_value = "40px"; //ie. 80 - 40
//main_left_value = String((screen.width - width_value_number)/2) + "px";
top_adjustment[0] = -70;
left_adjustment[0] = -40;
heading_width_value = "730px"; //ie 625 + 100 + 5
width_value = "730px"; //ie 625 + 100 +5 add extra column & gap
width_value_number = 730;
height_value = "625px"; //ie. 415 + 100 + 5 + 100 + 5
main_left_value = String((screen.width - width_value_number) / 2) + "px";
rows_value = "100px 100px 100px 100px 100px 100px"; //add additional 2 rows
columns_value = "100px 100px 100px 100px 100px 100px 100px"; //add 1 column
left_centering_adjustment[0] = ((screen.width - width_value_number) / 2);
break;
case "6x8":
tile_value = 48;
pair_value = 24;
main_width_value = "835px"; //ie. 625 + 100+5 + 100+5 for 2 extra cols & 2 gaps
main_height_value = "655px"; //ie. 445 + 100+5 + 100+5 for 2 extra rows & 2 gaps
main_height_value_number = 655;
main_top_value = "20px"; //ie. 90 - 50 - 20
main_top_value_number = 20;
//main_left_value = "10px"; //ie. 80 - 40 - 30
//main_left_value = String((screen.width - width_value_number)/2) + "px";
top_adjustment[0] = -70;
left_adjustment[0] = -70;
heading_width_value = "835px"; //ie 625 + 100 + 5 + 100 + 5 for 2 extra columns & 2 gaps
width_value = "835px"; //ie 625 + 100+5 + 100+5 for 2 extra cols & 2 gaps
width_value_number = 835;
height_value = "625px"; //ie. 415 + 100 + 5 + 100 + 5
main_left_value = String((screen.width - width_value_number) / 2) + "px";
rows_value = "100px 100px 100px 100px 100px 100px"; //add additional 2 rows
columns_value = "100px 100px 100px 100px 100px 100px 100px 100px"; //add 2 cols
left_centering_adjustment[0] = ((screen.width - width_value_number) / 2);
console.log("screenwidth: " + screen.width + "leftcenteradj: " + left_centering_adjustment);
break;
}
console.log("tile value: " + tile_value);
//use variables set in the switch statement to position the game grid display:
number_of_tiles[0] = tile_value;
number_of_pairs[0] = pair_value;
document.querySelector("#main_container").style.width = main_width_value;
document.querySelector("#main_container").style.height = main_height_value;
document.querySelector("#main_container").style.top = main_top_value;
document.querySelector("#main_container").style.left = main_left_value;
document.querySelector("#heading_container").style.width = heading_width_value;
document.querySelector("#container").style.width = width_value;
document.querySelector("#container").style.height = height_value;
document.querySelector("#container").style.gridTemplateRows = rows_value;
//document.querySelector("#container").style.gridTemplateRows = "100px 100px 100px 100px 100px 100px"; //rows_value;
document.querySelector("#container").style.gridTemplateColumns = columns_value;
console.log("number of tiles: " + number_of_tiles);
console.log("version: " + version[0]);
//POSITION THE PLAY AGAIN BUTTON ----------------------------------------------------
let again_top = (main_height_value_number / 2) + main_top_value_number + 15;
if (version[0] === "5x6") { again_top = again_top + 50 };
console.log("again_top: " + again_top);
document.querySelector("#play_again").style.top = String(again_top) + "px";
let again_left = (width_value_number / 2) + left_centering_adjustment[0] - 40;
document.querySelector("#play_again").style.left = String(again_left) + "px";
} //end of main function
// ATTEMPT FUNCTION ========================================================================
//called by container tiles/buttons event listeners; this is their event handler function
function attempt_func(event) {
if (event.target != event.currentTarget) { // check for already displayed
let access = true; //boolean access variable
let attrib = event.target.getAttribute("class");
console.log("attrib array: " + attrib);
let split_attrib = attrib.split(" "); //split classlist to search for value
console.log("split attrib: " + split_attrib);
for (let i = 0; i < split_attrib.length; i = i + 1) { //go thru each value in classlist
if (split_attrib[i] === "displayed") { //check for class attr value
access = false
} //if value found then already clicked thrfr deny access
} // end of check for already displayed
console.log("access: " + access);
if (access) {
if (first_button[0]) { //if true process 1st button else skip to 2nd butt
console.log("first button");
// event.target.style.backgroundColor = "yellow";
event.target.setAttribute("class", "butt displayed"); //set attr to indicate button //...is displayed; ie. indicator is stored in class value "displayed"
// event.target.style.border = "5px solid black";
event.target.style.color = "white"; //can change to "black" to display face number
first_button[0] = false; //set boolean to alternate btwn first & second butt
first_value[0] = event.target.textContent; //set face value of first button
let display_value = event.target.textContent;
console.log("first_value[0]: " + first_value[0]);
let modification = first_value[0].split("-"); //split name string into array
first_value[0] = modification[0]; //pick first index value containing number
console.log("first_value[0]: " + first_value[0]);
first_id_storage_variable[0] = event.target.id; //var stores butt ref object
console.log("id: " + first_id_storage_variable);
/* used for numeric version only to display number on first button/tile:
document.getElementById(first_id_storage_variable[0]).textContent = String(first_value[0]);
document.getElementById(first_id_storage_variable[0]).style.fontWeight = 900;
document.getElementById(first_id_storage_variable[0]).style.fontSize = "large"; */
//used for pictorial version to call function to display image on first button/tile:
//passes parameters butt ref object and numeric face value of button
//display_image(document.getElementById(first_id_storage_variable[0]), first_value[0]);
display_image(document.getElementById(first_id_storage_variable[0]), display_value);
}
else //processes 2nd button if first button already processed
{
console.log("second button");
container.removeEventListener("click", attempt_func, false); //remove...
//...event listener to temporarily disable button being pressed again
// event.target.style.backgroundColor = "yellow";
event.target.setAttribute("class", "butt displayed"); //set attr to indicate...
//button is displayed; ie. indicator is stored in class value "displayed"
// event.target.style.border = "5px solid black";
event.target.style.color = "white"; //can change to "black" to display face number
let second_button_display = event.target.textContent;
let display_value2 = event.target.textContent;
let modification2 = second_button_display.split("-"); //split name string into array
second_value[0] = modification2[0]; //pick first index value containing number
console.log("second_value: " + second_value);
console.log("second_value[0]: " + second_value[0]);
/* used for numeric version only to display number on second button/tile:
event.target.textContent = String(second_value[0]);
event.target.style.fontWeight = 900;
event.target.style.fontSize = "large"; */
//used for pictorial version to call function to display image on second button/tile:
//passes parameters butt ref object and numeric face value of button
display_image(event.target, display_value2);
//compare value of first button/tile with second button/tile:
if (first_value[0] === second_value[0]) {
console.log("MATCH!!!!");
match_count[0] = match_count[0] + 1; //increment var tracking matches
document.querySelector("#matches").textContent = "Matches: " + match_count[0];
attempts_count[0] = attempts_count[0] + 1; //increment var tracking attempts
document.querySelector("#attempts").textContent = "Attempts: " + attempts_count[0]; //display new total value of attempts
first_button[0] = true; //set boolean to indicate first button pressed
if (match_count[0] === number_of_pairs[0]) {
document.querySelector("#play_again").style.display = "block";
document.querySelector("#play_again").addEventListener("click", function () { location.reload() });
}
window.setTimeout(match_reset, 100); //call to reset after match
}
else {
console.log("NO MATCH!!!!");
countdown[0] = 6;
miss_count[0] = miss_count[0] + 1; //increment variable tracking misses
document.querySelector("#misses").textContent = "Misses: " + miss_count[0];
attempts_count[0] = attempts_count[0] + 1; //increment var tracking attempts
document.querySelector("#attempts").textContent = "Attempts: " + attempts_count[0]; //display new total value of attempts
//mismatch red indicator border for first button:
let top_var = document.getElementById(first_id_storage_variable[0]).offsetTop;
let left_var = document.getElementById(first_id_storage_variable[0]).offsetLeft;
document.getElementById("border_button").style.display = "block";
document.getElementById("border_button").style.top = String(top_var + 92 + top_adjustment[0]);
document.getElementById("border_button").style.left = left_var + left_centering_adjustment[0] + 2;
//document.getElementById("border_button").style.left = left_var + 82 + left_adjustment[0] + ((screen.width - 625)/2);
//document.getElementById("border_button").style.left = left_var + ((screen.width - 625)/2);
//mismatch red indicator border for second button:
let top_var2 = event.target.offsetTop; //distance from the top of container
let left_var2 = event.target.offsetLeft; //distance from left side of container
document.getElementById("border_button2").style.display = "block";
document.getElementById("border_button2").style.top = top_var2 + 92 + top_adjustment[0];
document.getElementById("border_button2").style.left = left_var2 + left_centering_adjustment[0] + 2;
//document.getElementById("border_button2").style.left = left_var2 + 82 + left_adjustment[0] + ((screen.width - 625)/2);
//document.getElementById("border_button2").style.left = left_var2 + ((screen.width - 625)/2);
//let offset_pos = document.getElementById(first_id_storage_variable[0]).offset
//window.setTimeout(mismatch_reset, 4000); //call to reset after mismatch ******
document.getElementById("play_again").style.display = "block"; //displays pause countdowns timer
document.getElementById("play_again").textContent = String(pause_variable[0]) + " pause"; //displays text in countdown timer
document.getElementById("play_again").addEventListener("click", mismatch_reset); //ev. list. for countdown timer
pause_timer[0] = setInterval(pause_func, 1000); //interval used for countdown timer
} // end of else NO MATCH
} // end of access if statement
} // end of target vs current target bracket
} // end of func1 function
//PAUSE FUNC FUNCTION ==============================================================================================
//called by setInteval used by pause countdown timer
function pause_func() {
pause_variable[0] = pause_variable[0] - 1; //decrement countdown timer
document.getElementById("play_again").textContent = String(pause_variable[0]) + " pause"; //displays text in countdown timer
if (pause_variable[0] === 0) { //check if counted down completely
document.getElementById("play_again").style.display = "none"; //hides countdown timer
document.getElementById("play_again").textContent = "PLAY AGAIN?"; //changes text back to default
document.getElementById("play_again").removeEventListener("click", mismatch_reset); //removes ev. list. for cntdwn timer
clearInterval(pause_timer[0]); //clears interval used by countdown timer
pause_variable[0] = 4; //resets variable for countdown timer
mismatch_reset(); //goes to function to reset after mismatches
}
}
// MISMATCH RESET FUNCTION =======================================================================
//called by attempt func at end; restores settings & variables for next attempt
function mismatch_reset() {
document.getElementById("play_again").style.display = "none"; //hides countdown timer
document.getElementById("play_again").textContent = "PLAY AGAIN?"; //changes text back to default
document.getElementById("play_again").removeEventListener("click", mismatch_reset); //removes ev.list. for cntdwn timer
clearInterval(pause_timer[0]); //clears interval used by countdown timer
pause_variable[0] = 4; //resets variable for countdown timer
document.getElementById("border_button").style.display = "none";
document.getElementById("border_button2").style.display = "none";
first_button[0] = true; //reset boolean to indicate first button ready
first_value[0] = ""; //clear value of first button for next attempt
document.getElementById(first_id_storage_variable[0]).style.border = "2px solid black"; //restore thickness of button border for 1st button
document.getElementById(first_id_storage_variable[0]).style.backgroundColor = "white"; //restore button/tile to white blank
document.getElementById(first_id_storage_variable[0]).setAttribute("class", "butt"); //restore class value that allows button be pressed again
document.getElementById(first_id_storage_variable[0]).style.color = "transparent"; //this is only used in numeric version
document.getElementById(first_id_storage_variable[0]).lastChild.remove(); //this removes...
//the image file that was inserted/appended in the first button because was mismatch
first_id_storage_variable[0] = ""; //clear butt ref obj for next attempt
//window.confirm("click to continue");
event.target.style.border = "2px solid black"; //restore border for 2nd butt
event.target.style.backgroundColor = "white"; //restore tile to white blank
event.target.setAttribute("class", "butt"); //allow butt to be pressed again
event.target.style.color = "transparent"; //this only used in numeric version
event.target.lastChild.remove(); //this removes image file from 2nd butt because was mismatch
container.addEventListener("click", attempt_func, false); //restore event...
//...listener that was temporarily disabled so ready for next attempt
console.log("restore event listener");
reset_borders(); //call func to reset borders of all tiles/buttons
}
// MATCH RESET FUNCTION ===================================================================
//called by attempt func at end; restores settings & variables for next attempt
function match_reset() {
first_button[0] = true; //reset boolean to indicate first button ready
first_value[0] = ""; //clear value of first button for next attempt
document.getElementById(first_id_storage_variable[0]).style.border = "2px solid black"; //restore thickness of button border for 1st button
document.getElementById(first_id_storage_variable[0]).style.color = "black"; //keep face displayed if matched
//first_id_storage_variable[0] = "";
//window.confirm("click to continue");
// event.target.style.border = "2px solid black"; //restore border for 2nd butt
event.target.style.color = "black"; //keep face displayed if matched
container.addEventListener("click", attempt_func, false); //restore event...
//...listener that was temporarily disabled so ready for next attempt
console.log("restore event listener");
}
icon_names = display_pic_title(); //call func to get corresponding name string
if (first_value[0] === second_value[0]) {
document.getElementById(first_id_storage_variable[0]).setAttribute("title", icon_names);
event.target.setAttribute("title", icon_names);
} //attach tooltip with name string
reset_borders(); //call func to reset borders of all tiles/buttons
}
// CHOOSE RANDOM NUMBERS FUNCTION ========================================================
//called at beginning of program to randomly choose a specific number of pairs from a //selection of choices ie. number_of_pairs[0] and size_image_selection[0] respectively
//latter two variables initialized at beginning, contingent on version of game
function choose_random_numbers() {
const celeb_set = new Set(); //create set object to prevent duplications
while (celeb_set.size < number_of_pairs[0]) {
let rand_num = Math.floor(Math.random() * size_image_selection[0]) + 1; //pick rand #
celeb_set.add(rand_num); //add/append each random number pick to the set
}
let random_array = Array.from(celeb_set); //convert the set into an array
let AB_array = []; //initialize new array to contain two copies of each pick
for (let item of random_array) {
AB_array.push(String(item) + "-A")
}; //A values ie. "17-A" "6-A" etc
for (let item of random_array) {
AB_array.push(String(item) + "-B")
}; //B values ie. "17-B" "6-B" etc
console.log("content ABarray: " + AB_array);
console.log("size ABarray: " + AB_array.length);
return AB_array
}
// SHUFFLE ARRAY FUNCTION ===================================================================
//called at beginning of program
//randomly shuffles array to randomly display the numbers displayed on buttons
function shuffle_array(arra1) {
let ctr = arra1.length;
let temp;
let index;
// While there are elements in the array
while (ctr > 0) {
index = Math.floor(Math.random() * ctr); // Pick a random index
ctr--; // Decrease ctr by 1
temp = arra1[ctr]; // And swap the last element with it
arra1[ctr] = arra1[index];
arra1[index] = temp;
}
console.log("arra1: " + arra1);
return arra1;
}
//CREATE TILES/BUTTONS IN CONTAINER FUNCTION =============================================
//called at beginning of program to create the tiles/buttons that fill the container
function create_buttons_in_container(shuffled_array_contents) {
let container_element = document.getElementById("container");
console.log("number of tile in create function: " + number_of_tiles[0]);
for (let i = 0; i < number_of_tiles[0]; i = i + 1) {
let new_element = document.createElement("button"); //create new tile/button element
new_element.setAttribute("id", shuffled_array_contents[i]); //assign id value for access
new_element.setAttribute("class", "butt");
new_element.textContent = shuffled_array_contents[i]; //label tile with rand. numbr from array
new_element.style.color = "transparent"; //make number invisible
new_element.style.border = "2px solid black";
container_element.appendChild(new_element); //append the new tile/button in container
console.log("appending" + i);
}
}
//RESET BORDERS FUNCTION =====================================================
//called by match_reset & mismatch reset funcs, at the end of each
function reset_borders() {
let butts = document.getElementsByTagName("button");
for (let i = 0; i < number_of_tiles[0]; i++) {
butts[i].style.border = "2px solid black";
}
console.log("reset borders");
}
//DISPLAY IMAGES IN BUTTONS/TILES FUNCTION ==========================================
//called by attempt function at two points (for the 1st button & again for the 2nd button)
//first parameter is button object for 1st & 2nd buttons respectively in turn
//second parameter is the number assigned to the button which corresponds with...
//the name of the jpeg file in the image folder ie. used to retrieve proper image
function display_image(button_object, image_number) {
let new_pic = document.createElement("img"); //creates new image element
new_pic.style.margin = "-16px 0px 0px -6px"; //modifies margin to fit exactly
button_object.appendChild(new_pic); //appends image to specific button
let attribute_value = String(image_number) + ".jpg"; //sets image name value
new_pic.setAttribute("src", attribute_value); //to retrieve specific image
reset_borders();
}
// CREATE CONTENT ARRAY FUNCTION==============================================================
//called at beginning of program to create numbers to be displayed on buttons
//note: this function is NOT being used in this pictorial version of the program
function create_content_array() {
let content_array = [];
for (let i = 0; i < 2; i = i + 1) {
for (let j = 1; j < (number_of_pairs[0] + 1); j = j + 1) {
if (i === 0) { content_array.push(String(j) + "-A") }
else { content_array.push(String(j) + "-B") }
}
}
console.log("content array: " + content_array);
return content_array
}
//DISPLAY PIC TITLE FUNCTION ==============================================================
//called by match_reset function... this function contains a string listing names of all the
//subjects in the duo icon photos and returns the names corresponding to the photo
function display_pic_title() {
let icon_duos = `"null", "Batman & Robin", "Kirk & Spock", "Skipper & Gilligan", "Lucy & Desi”, “Bert & Ernie”, “Kermit & Miss Piggy”,
“Sonny & Cher”, “Archie & Edith Bunker”, “DV Dyke & MT Moore”, “Laurel & Hardy”, “Martin & Lewis”, “Homer & Marge Simpson”, “Laverne & Shirley”,
“Siskel & Ebert”, “Stern & Quivers”, “Frankenstein & Bride”, “King Kong & Fay Wray”, “Lennon & McCartney”, “Jagger & Richards”, “Simon & Garfunkel”,
“Agnetha & Frida (ABBA)”, “Beavis & Butthead”, “Danny & Sandy (Grease)”, “Ozzy & Sharon Osbourne”, “Olsen twins”, “Cheech & Chong”, “Sanford & Son”,
“Ross & Rachel (Friends)”, “Rocky & Adrian”, “Pam & Tommy”, “Mickey & Miney Mouse”, "Johnny Carson & Ed McMahon", "Tom Hanks & Rita Wilson”,
“Han Solo & Chewbacca”, “R2D2 & C3PO”, “Fred & Barney”, “Archie & Jughead”, “Antony & Cleopatra”, “Rick & Ilsa (Casablanca)”,
“Prince Charles & Princess Di”, “Bill & Hillary Clinton”, “Woody Allen & Diane Keaton”, “JFK & Jackie”, “Jerry & George”, “Mulder & Scully (X-Files)”,
“Page & Plant”, “Superman & Lois Lane”, “Xena & Gabrielle”, “Ruth & Gehrig”, “Abbott & Costello" `
console.log(icon_duos);
icon_duos = icon_duos.split(","); //splits the string into an array of name pair strings
let icon_names = icon_duos[Number(first_value[0])] //finds array index corresponding to...
//display number value on button chosen
console.log(icon_names);
return icon_names //return the appropriate name string
}