725 lines
No EOL
28 KiB
JavaScript
Executable file
725 lines
No EOL
28 KiB
JavaScript
Executable file
const style = (() => {
|
|
// for setting multiple CSS attributes on an element
|
|
Element.prototype.setAttributes = function (attributes) {
|
|
Object.keys(attributes).forEach(key => this.setAttribute(key, attributes[key]));
|
|
}
|
|
|
|
// highlights nav button based on mouse hover
|
|
const navButtons = document.querySelectorAll(".nav-link");
|
|
function makeActive() {
|
|
this.setAttribute('class', this.getAttribute("class") + ' active');
|
|
}
|
|
function deactivateButton() {
|
|
this.setAttribute('class', "nav-link fw-bold");
|
|
}
|
|
|
|
// assigns listeners to nav buttons
|
|
navButtons.forEach((button) => {
|
|
button.onmouseenter = makeActive;
|
|
button.onmouseleave = deactivateButton;
|
|
});
|
|
|
|
// resizes background if user adjusts zoom level
|
|
function resizeBody () {
|
|
const childHeight = document.querySelector(".cover-container").offsetHeight;
|
|
if (window.innerHeight < childHeight) {
|
|
document.querySelector("body").setAttribute("style", "height: " + childHeight +"px;");
|
|
}
|
|
else {
|
|
document.querySelector("body").setAttribute("style", "height: " + window.innerHeight +"px;");
|
|
}
|
|
}
|
|
|
|
// calls on page load
|
|
resizeBody();
|
|
|
|
// calls when user changes window size
|
|
window.onresize = resizeBody;
|
|
|
|
// changes greeting based on passed in name
|
|
function changeGreeting(name) {
|
|
document.querySelector("#name").textContent = "Welcome " + name + "!";
|
|
}
|
|
|
|
// creates a modal window to change player name and sign
|
|
function namePopup(callback1, callback2) {
|
|
// makes divs
|
|
const darkenScreen = document.createElement('div');
|
|
const popupCard = document.createElement('div');
|
|
const cardBody = document.createElement('div');
|
|
const closeButton = document.createElement('div');
|
|
const closeButtonContainer = document.createElementNS("http://www.w3.org/2000/svg","svg");
|
|
const closeButtonSVGPath = document.createElementNS("http://www.w3.org/2000/svg","path");
|
|
const cardTitle = document.createElement('h5');
|
|
const nameInput = document.createElement('input');
|
|
const signInput = document.createElement('select');
|
|
const xs = document.createElement('option');
|
|
const os = document.createElement('option');
|
|
const okayButton = document.createElement('div');
|
|
const wrapperul = document.createElement('ul');
|
|
const wrapperli = document.createElement('li');
|
|
|
|
// sets attributes
|
|
(() => {
|
|
darkenScreen.setAttributes({id: 'darkenScreen', style: "height: " + document.querySelector('body').offsetHeight + "px"});
|
|
popupCard.setAttributes({class: "card", style: "width: 18rem"});
|
|
cardBody.setAttribute('class', "card-body");
|
|
closeButton.setAttribute('id', "closebutton");
|
|
closeButtonContainer.setAttributes({style: "width:24px;height:24px", "viewBox": "0 0 24 24"});
|
|
closeButtonSVGPath.setAttributes({fill: "#6c757d", d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"});
|
|
cardTitle.setAttribute('class', "card-text");
|
|
cardTitle.textContent = "Your name:";
|
|
nameInput.setAttributes({type: 'text', class: "mb-3"});
|
|
signInput.setAttribute('class', "mb-3");
|
|
xs.setAttribute('value', 'x');
|
|
os.setAttribute('value', 'o');
|
|
xs.textContent = "X's";
|
|
os.textContent = "O's";
|
|
okayButton.setAttribute('class', "nav-link fw-bold active");
|
|
okayButton.textContent = "Ok";
|
|
wrapperul.setAttribute('class', "nav nav-pills");
|
|
wrapperli.setAttribute('class', "nav-item");
|
|
})();
|
|
|
|
// appends divs to DOM
|
|
(() => {
|
|
document.querySelector('body').appendChild(darkenScreen);
|
|
darkenScreen.appendChild(popupCard);
|
|
popupCard.appendChild(cardBody);
|
|
cardBody.appendChild(closeButton);
|
|
closeButton.appendChild(closeButtonContainer);
|
|
closeButtonContainer.appendChild(closeButtonSVGPath);
|
|
cardBody.appendChild(cardTitle);
|
|
cardBody.appendChild(nameInput);
|
|
cardBody.appendChild(document.createElement("br"));
|
|
cardBody.appendChild(signInput);
|
|
signInput.appendChild(xs);
|
|
signInput.appendChild(os);
|
|
cardBody.appendChild(wrapperul);
|
|
wrapperul.appendChild(wrapperli);
|
|
wrapperli.appendChild(okayButton);
|
|
})();
|
|
|
|
|
|
// focuses name field
|
|
nameInput.focus();
|
|
|
|
// closes window when called
|
|
function closeWindow() {
|
|
document.querySelector('body').removeChild(darkenScreen);
|
|
}
|
|
|
|
// close window if close button pushed - without updating name
|
|
closeButtonContainer.onclick = closeWindow;
|
|
|
|
// changes the name variable to a filtered string of the input value
|
|
function inputComplete() {
|
|
// regex
|
|
filteredInput = nameInput.value.replace(/[^a-zA-Z]+/g, '');
|
|
// checks for non-empty string (actual value) before proceeding
|
|
if (filteredInput != "") {
|
|
// changes name and sign
|
|
callback1(filteredInput, signInput.value);
|
|
// updates AI sign
|
|
if (signInput.value === 'x') {
|
|
callback2('AI', 'o');
|
|
}
|
|
else {
|
|
callback2('AI', 'x');
|
|
}
|
|
// closes window
|
|
closeWindow();
|
|
}
|
|
else {
|
|
alert("Not a valid name!");
|
|
}
|
|
}
|
|
// creates event listeners on modal window
|
|
(() => {
|
|
// updates name when OK button clicked
|
|
wrapperli.onclick = inputComplete;
|
|
|
|
// updates name when Enter keystroke detected
|
|
document.addEventListener("keydown", function(event) {
|
|
if (event.code === 'Enter') {
|
|
event.preventDefault();
|
|
inputComplete();
|
|
}
|
|
});
|
|
})();
|
|
}
|
|
|
|
const winnerPopup = (name, tie = false) => {
|
|
// makes divs
|
|
const darkenScreen = document.createElement('div');
|
|
const popupCard = document.createElement('div');
|
|
const cardBody = document.createElement('div');
|
|
const cardTitle = document.createElement('h5');
|
|
const newButton = document.createElement('div');
|
|
const wrapperul = document.createElement('ul');
|
|
const wrapperli = document.createElement('li');
|
|
|
|
// sets attributes
|
|
(() => {
|
|
darkenScreen.setAttributes({id: 'darkenScreen', style: "height: " + document.querySelector('body').offsetHeight + "px"});
|
|
popupCard.setAttributes({class: "card", style: "width: 18rem"});
|
|
cardBody.setAttribute('class', "card-body");
|
|
cardTitle.setAttribute('class', "card-text");
|
|
if (tie) {
|
|
cardTitle.innerHTML = "It's a tie!";
|
|
}
|
|
else {
|
|
if (name === "AI") {
|
|
cardTitle.innerHTML = "Sorry " + user.getName() + "! <br />You lost!";
|
|
}
|
|
else {
|
|
cardTitle.innerHTML = "Congratulations " + name + "! <br />You won!";
|
|
}
|
|
}
|
|
newButton.setAttribute('class', "nav-link fw-bold active");
|
|
newButton.textContent = "New";
|
|
wrapperul.setAttribute('class', "nav nav-pills");
|
|
wrapperli.setAttribute('class', "nav-item");
|
|
})();
|
|
|
|
// appends divs to DOM
|
|
(() => {
|
|
document.querySelector('body').appendChild(darkenScreen);
|
|
darkenScreen.appendChild(popupCard);
|
|
popupCard.appendChild(cardBody);
|
|
cardBody.appendChild(cardTitle);
|
|
cardBody.appendChild(wrapperul);
|
|
wrapperul.appendChild(wrapperli);
|
|
wrapperli.appendChild(newButton)
|
|
})();
|
|
newButton.onclick = () => {
|
|
location.reload();
|
|
};
|
|
}
|
|
|
|
return {
|
|
changeGreeting,
|
|
namePopup,
|
|
winnerPopup
|
|
}
|
|
})();
|
|
|
|
const gameBoard = (() => {
|
|
// creates gameArray[][] containing each position
|
|
let gameArray = new Array(3);
|
|
for(let arrayPosition = 0; arrayPosition < gameArray.length; arrayPosition++) {
|
|
gameArray[arrayPosition] = new Array(3);
|
|
}
|
|
|
|
// checks for wins
|
|
const check = (player) => {
|
|
// purely background var to allow the program to not freeze
|
|
let gameConcluded = false;
|
|
// get player's sign
|
|
const sign = player.getSign();
|
|
|
|
//get player's name
|
|
const name = player.getName();
|
|
|
|
// checks for wins horizontally
|
|
for (yloc = 0; yloc < 3; yloc++) {
|
|
let finder = 0;
|
|
for (xloc = 0; xloc < 3; xloc ++) {
|
|
if (gameArray[yloc][xloc] === sign) {
|
|
finder++;
|
|
}
|
|
}
|
|
if (finder === 3) {
|
|
gameConcluded = true;
|
|
style.winnerPopup(name);
|
|
}
|
|
}
|
|
|
|
// checks for wins vertically
|
|
for (xloc = 0; xloc < 3; xloc++) {
|
|
let finder = 0;
|
|
for (yloc = 0; yloc < 3; yloc ++) {
|
|
if (gameArray[yloc][xloc] === sign) {
|
|
finder++;
|
|
}
|
|
}
|
|
if (finder === 3) {
|
|
gameConcluded = true;
|
|
style.winnerPopup(name);
|
|
}
|
|
}
|
|
|
|
// checks for wins from top left to bottom right
|
|
(() => {
|
|
let finder = 0;
|
|
for (posDiag = 0; posDiag < 3; posDiag++) {
|
|
if (gameArray[posDiag][posDiag] === sign) {
|
|
finder++;
|
|
}
|
|
}
|
|
if (finder === 3) {
|
|
gameConcluded = true;
|
|
style.winnerPopup(name);
|
|
}
|
|
})();
|
|
|
|
// checks for wins from top right to bottom left
|
|
(() => {
|
|
let finder = 0;
|
|
for (yloc = 0; yloc < 3; yloc++) {
|
|
xloc = Math.abs(yloc - 2);
|
|
if (gameArray[yloc][xloc] === sign) {
|
|
finder++;
|
|
}
|
|
}
|
|
if (finder === 3) {
|
|
gameConcluded = true;
|
|
style.winnerPopup(name);
|
|
}
|
|
})();
|
|
|
|
// checks for ties
|
|
(() => {
|
|
let counter = 0;
|
|
for (yloc = 0; yloc < 3; yloc++) {
|
|
for (xloc = 0; xloc < 3; xloc++) {
|
|
if (gameArray[yloc][xloc] != undefined) {
|
|
counter++;
|
|
}
|
|
}
|
|
}
|
|
if (counter === 9) {
|
|
gameConcluded = true;
|
|
style.winnerPopup(player, true);
|
|
}
|
|
})();
|
|
|
|
// return the var to move to prevent AI move after game completion
|
|
return gameConcluded;
|
|
}
|
|
|
|
// sets validity boolean to check if AI move has already been made
|
|
let AIMoveCompleted = false;
|
|
|
|
// when a move is made
|
|
const move = (player, square = undefined) => {
|
|
// if called with a square passed - that is, for player move or AI final move
|
|
if (square != undefined) {
|
|
// get player's sign
|
|
const sign = player.getSign();
|
|
// determine grid position based on square id
|
|
const yloc = Number(square.getAttribute('id').charAt(0));
|
|
const xloc = Number(square.getAttribute('id').charAt(1));
|
|
// if the position is empty, append to array and DOM
|
|
if (gameArray[yloc][xloc] === undefined) {
|
|
// assign sign to array position
|
|
gameArray[yloc][xloc] = player.getSign();;
|
|
// make SVG elements
|
|
const SVGBox = document.createElementNS("http://www.w3.org/2000/svg","svg");
|
|
SVGBox.setAttributes({style: "width:168px; height:168px", "viewBox": "0 0 24 24"});
|
|
const SVGPath = document.createElementNS("http://www.w3.org/2000/svg","path");
|
|
// assign correct SVG path based on player's sign
|
|
if (sign == "x") {
|
|
SVGPath.setAttributes({fill: "black", d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"});
|
|
}
|
|
else {
|
|
SVGPath.setAttributes({fill: "black", d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"});
|
|
}
|
|
// append to DOM
|
|
square.appendChild(SVGBox);
|
|
SVGBox.appendChild(SVGPath);
|
|
|
|
// check player win conditions
|
|
let finished = check(player);
|
|
|
|
// only do AI move if check determines game is NOT done
|
|
// have to do this or it lags the program
|
|
if (finished === false) {
|
|
// call if AI move has NOT been done - otherwise infinite recursion
|
|
if (AIMoveCompleted === false) {
|
|
// call ai player move with undefined square
|
|
move(aiplayer);
|
|
// check ai player win conditions
|
|
check(aiplayer);
|
|
// set AIMoveCompleted boolean to false
|
|
AIMoveCompleted = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// when square is undefined (called for AI logic)
|
|
else {
|
|
(() => {
|
|
// get human and AI players' signs
|
|
let userSign = "x";
|
|
let AISign = player.getSign();
|
|
if (AISign === "x") {
|
|
userSign = "o";
|
|
}
|
|
|
|
// make the actual move in the game after calculations
|
|
function setSquare (y,x) {
|
|
const square = document.getElementById("" + y + x);
|
|
AIMoveCompleted = true;
|
|
move(player, square);
|
|
}
|
|
|
|
// at the twos stage
|
|
// check for two of the same sign in a row on a grid
|
|
function dubsChecker (sign) {
|
|
// selects proper square and makes move, then sets validity boolean to false
|
|
|
|
// HORIZONTAL
|
|
(() => {
|
|
let row = 3;
|
|
let column = 3;
|
|
horizontalSearcher:
|
|
for (yloc = 0; yloc < 3; yloc++) {
|
|
let finder = 0;
|
|
for (xloc = 0; xloc < 3; xloc ++) {
|
|
if (gameArray[yloc][xloc] === sign) {
|
|
finder++;
|
|
}
|
|
else {
|
|
column = xloc;
|
|
}
|
|
}
|
|
// returns the offending row and breaks loop
|
|
if (finder === 2) {
|
|
row = yloc;
|
|
break horizontalSearcher;
|
|
}
|
|
}
|
|
// checks for non-dummy row value then moves on blank square
|
|
if (row != 3) {
|
|
if (gameArray[row][column] === undefined) {
|
|
setSquare(row,column);
|
|
}
|
|
}
|
|
})();
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// VERTICAL
|
|
(() => {
|
|
let column = 3;
|
|
let row = 3;
|
|
verticalSearcher:
|
|
for (xloc = 0; xloc < 3; xloc++) {
|
|
let finder = 0;
|
|
for (yloc = 0; yloc < 3; yloc ++) {
|
|
if (gameArray[yloc][xloc] === sign) {
|
|
finder++;
|
|
}
|
|
else {
|
|
row = yloc;
|
|
}
|
|
}
|
|
// returns the offending column and breaks loop
|
|
if (finder === 2) {
|
|
column = xloc;
|
|
break verticalSearcher;
|
|
}
|
|
}
|
|
// checks for non-dummy column value then moves on blank square
|
|
if (column != 3) {
|
|
if (gameArray[row][column] === undefined) {
|
|
setSquare(row,column);
|
|
}
|
|
}
|
|
})();
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// L-R DIAGONAL
|
|
(() => {
|
|
let finder = 0;
|
|
let diag = 3;
|
|
for (posDiag = 0; posDiag < 3; posDiag++) {
|
|
if (gameArray[posDiag][posDiag] === sign) {
|
|
finder++;
|
|
}
|
|
else {
|
|
diag = posDiag;
|
|
}
|
|
}
|
|
if (finder === 2) {
|
|
if (gameArray[diag][diag] === undefined) {
|
|
setSquare(diag,diag);
|
|
}
|
|
}
|
|
})();
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// R-L DIAGONAL
|
|
(() => {
|
|
let finder = 0;
|
|
let row = 3;
|
|
let column = 3;
|
|
for (yloc = 0; yloc < 3; yloc++) {
|
|
xloc = Math.abs(yloc - 2);
|
|
if (gameArray[yloc][xloc] === sign) {
|
|
finder++;
|
|
}
|
|
else {
|
|
row = yloc;
|
|
column = xloc;
|
|
}
|
|
}
|
|
if (finder === 2) {
|
|
if (gameArray[row][column] === undefined) {
|
|
setSquare(row,column);
|
|
}
|
|
}
|
|
})();
|
|
}
|
|
|
|
// first check opponent's (user's) and block to prevent a 3
|
|
dubsChecker(userSign);
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// then check own (ai's) and go for gold
|
|
dubsChecker(AISign);
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// at the ones stage
|
|
function singlesChecker () {
|
|
let row = 3;
|
|
let column = 3;
|
|
|
|
// find a single one that looks like the ai's sign
|
|
(() => {
|
|
for (yloc = 0; yloc < 3; yloc++) {
|
|
for (xloc = 0; xloc < 3; xloc++) {
|
|
if (gameArray[yloc][xloc] === AISign) {
|
|
row = yloc;
|
|
column = xloc;
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
})();
|
|
|
|
// create an array of possible move options
|
|
let coordArray = [];
|
|
|
|
// find all empty squares and add them to the array
|
|
// gross way - if statements
|
|
|
|
// checks for non-dummy value if one exists
|
|
// NOTE: one if statement (checking for row alone) faster than two (checking for row and column)
|
|
if (row > 3) {
|
|
// creates a -1/0/+1 int for neighbor calculations
|
|
for (i = -1; i <= 1; i++) {
|
|
// checks +1/0/-1 place of column value
|
|
if (0 <= column + i <= 2) {
|
|
// checks for open square
|
|
if (gameArray[row][column + i] === undefined) {
|
|
tempVar = column + i;
|
|
// pushes to array
|
|
coordArray.push({
|
|
row: row,
|
|
column: tempVar
|
|
});
|
|
}
|
|
}
|
|
// do the same thing for the rows at the column value
|
|
if (0 <= row + i <= 2) {
|
|
if (gameArray[row + i][column] === undefined) {
|
|
tempVar = row + i;
|
|
coordArray.push({
|
|
row: tempVar,
|
|
column: column
|
|
});
|
|
}
|
|
}
|
|
// do that but horizontally
|
|
if (0 <= row + i <= 2 && 0 <= column + i <= 2) {
|
|
if (gameArray[row + i][column + i] === undefined) {
|
|
yloc = row + i;
|
|
xloc = column + i;
|
|
coordArray.push({
|
|
row: yloc,
|
|
column: xloc
|
|
});
|
|
}
|
|
if (gameArray[row - i][column + i] === undefined) {
|
|
yloc = row - i;
|
|
xloc = column + i;
|
|
coordArray.push({
|
|
row: yloc,
|
|
column: xloc
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// if the array actually has some coordinates after the last check
|
|
if (coordArray.length < 0) {
|
|
// get random choice
|
|
// floor removes decimals
|
|
// random gets number between 0 and 1
|
|
// multiplied by the array length
|
|
let rand = Math.floor(Math.random() * coordArray.length);
|
|
|
|
// make move at random based on values in coordinate array
|
|
setSquare(coordArray[rand].row, coordArray[rand].column);
|
|
}
|
|
}
|
|
|
|
// check if ai already has a square down, make adjacent move
|
|
singlesChecker();
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// at this point, the ai has no squares on the board
|
|
function middleChecker() {
|
|
if (gameArray[1][1] === undefined) {
|
|
setSquare(1,1);
|
|
}
|
|
}
|
|
|
|
// pick the middle square if available
|
|
middleChecker();
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// if middle is not available, pick square at random
|
|
function randomSquare() {
|
|
// random value from 0 - 3 for x value
|
|
const x = Math.floor(Math.random() * 3);
|
|
// different random value from 0 - 3 for y value
|
|
const y = Math.floor(Math.random() * 3);
|
|
// check if square at values is available, move if so
|
|
if (gameArray[y] === undefined) {
|
|
console.log(y);
|
|
setSquare(y, x);
|
|
}
|
|
else if (gameArray[y][x] === undefined) {
|
|
setSquare(y, x);
|
|
}
|
|
}
|
|
|
|
if (AIMoveCompleted) {
|
|
return;
|
|
}
|
|
|
|
// keep doing it until an open square is found
|
|
while (AIMoveCompleted === false) {
|
|
randomSquare();
|
|
}
|
|
})();
|
|
}
|
|
}
|
|
|
|
// refreshes the page
|
|
const newGrid = () => {
|
|
location.reload();
|
|
}
|
|
|
|
// initializes grid
|
|
const initGrid = () => {
|
|
// makes square based on location coordinates and puts those location coordinates into the id of the square
|
|
function makeSquare (yloc, xloc) {
|
|
let gridElement = document.createElement('div');
|
|
gridElement.setAttribute('class', 'griditem');
|
|
gridElement.onclick = function() {
|
|
move(user, this);
|
|
};
|
|
document.querySelector("#gridspace").appendChild(gridElement);
|
|
gridElement.setAttribute('id', "" + yloc + "" + xloc + "");
|
|
}
|
|
|
|
// create array of y positions
|
|
let varArray = [];
|
|
|
|
// for each y location
|
|
for (yloc = 0; yloc < 3; yloc++) {
|
|
// make each array entry a function that loops thrice and calls makeSquare[][] each time
|
|
varArray[yloc] = () => {
|
|
for (xloc=0;xloc<3;xloc++) {
|
|
makeSquare(yloc,xloc);
|
|
}
|
|
}
|
|
// calls above function
|
|
varArray[yloc]();
|
|
}
|
|
}
|
|
|
|
return {
|
|
newGrid,
|
|
initGrid
|
|
}
|
|
})();
|
|
|
|
const player = (name, sign) => {
|
|
// assigns player name to passed in name
|
|
let playerName = name;
|
|
|
|
// assigns player sign to passed in sign
|
|
let playerSign = sign;
|
|
|
|
// makes greeting with player name
|
|
style.changeGreeting(playerName);
|
|
|
|
function updateInfo (newName, newSign) {
|
|
playerName = newName;
|
|
playerSign = newSign;
|
|
style.changeGreeting(playerName);
|
|
}
|
|
|
|
// returns player name
|
|
function getName() {
|
|
return playerName;
|
|
}
|
|
|
|
// returns player sign
|
|
function getSign() {
|
|
return playerSign;
|
|
}
|
|
|
|
return {
|
|
updateInfo,
|
|
getName,
|
|
getSign
|
|
}
|
|
};
|
|
|
|
// creates a user player with default values
|
|
const user = player("John Doe", 'x');
|
|
|
|
// creates an AI player with default values
|
|
const aiplayer = player("AI", 'o');
|
|
|
|
// initializes grid spaces
|
|
gameBoard.initGrid();
|
|
|
|
// reloads page when new button pressed
|
|
document.querySelector("#newButton").onclick = gameBoard.newGrid;
|
|
|
|
// changes player info when name button pressed
|
|
document.querySelector("#nameButton").onclick = () => {
|
|
style.namePopup(user.updateInfo, aiplayer.updateInfo);
|
|
}
|
|
|
|
// immediately queries the user for their information to replace default values
|
|
style.namePopup(user.updateInfo, aiplayer.updateInfo); |