From b1eb481ea99d4634b4cca54e9ac97421f4455b29 Mon Sep 17 00:00:00 2001 From: kfac Date: Fri, 29 Sep 2023 18:57:04 -0500 Subject: [PATCH 01/15] created directory --- css/main.css | 0 index.html | 0 js/main.js | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 css/main.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..e69de29 From 02ba0436de5e31dcf93f78afc52ccb1bf74affa1 Mon Sep 17 00:00:00 2001 From: kfac Date: Mon, 2 Oct 2023 12:41:54 -0500 Subject: [PATCH 02/15] added some foundation --- css/main.css | 24 ++++++++++++++++++++++++ index.html | 29 +++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) diff --git a/css/main.css b/css/main.css index e69de29..f91c53f 100644 --- a/css/main.css +++ b/css/main.css @@ -0,0 +1,24 @@ +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#field { + display: grid; + grid-template-columns: repeat(3, 10vmin); + grid-template-rows: repeat(3, 10vmin); + gap: 1.5vmin; + margin: 4vmin; +} + +#field > div{ + border: 0.1vmin solid black; +} \ No newline at end of file diff --git a/index.html b/index.html index e69de29..9f7aa77 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + TTT + + +
TTT
+

Who is going first?

+
X or O
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + + \ No newline at end of file From 1e303e19f56acaa545db6993568db74ac44c125e Mon Sep 17 00:00:00 2001 From: kfac Date: Mon, 2 Oct 2023 13:37:29 -0500 Subject: [PATCH 03/15] added skelly for render --- css/main.css | 3 +++ index.html | 25 ++++++++++++++----------- js/main.js | 26 ++++++++++++++++++++++++++ 3 files changed, 43 insertions(+), 11 deletions(-) diff --git a/css/main.css b/css/main.css index f91c53f..5127ed1 100644 --- a/css/main.css +++ b/css/main.css @@ -21,4 +21,7 @@ body { #field > div{ border: 0.1vmin solid black; + text-align: center; + font-size: 8vmin; + line-height: 10vmin; } \ No newline at end of file diff --git a/index.html b/index.html index 9f7aa77..0402607 100644 --- a/index.html +++ b/index.html @@ -10,20 +10,23 @@
TTT

Who is going first?

-
X or O
+
+ or +
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
- + \ No newline at end of file diff --git a/js/main.js b/js/main.js index e69de29..8b5e52c 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,26 @@ +/*----- constants -----*/ +let playerOne; +let playerTwo; + +/*----- state variables -----*/ + + +/*----- cached elements -----*/ + + +/*----- event listeners -----*/ + + +/*----- functions -----*/ +function render(){ + clearBoard(); + pickPlayer(); +} + +function pickPlayer(){ + +} + +function clearBoard(){ + +} \ No newline at end of file From 6792c7d395959a95f0d70d601237e5572e444a67 Mon Sep 17 00:00:00 2001 From: kfac Date: Wed, 4 Oct 2023 22:29:43 -0500 Subject: [PATCH 04/15] made the css look better --- css/main.css | 27 +++++++++++++++++++++++++++ index.html | 8 ++++---- js/main.js | 2 +- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index 5127ed1..24df7fa 100644 --- a/css/main.css +++ b/css/main.css @@ -1,5 +1,6 @@ * { box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; } body { @@ -11,6 +12,18 @@ body { align-items: center; } +button{ + border-radius: 4vmin; + font-size: 2vmin; + border: 2px solid purple; + background-color: orange; +} + +button:hover{ + transform: scale(1.2); + transition: trasnform 150ms ease-in-out; +} + #field { display: grid; grid-template-columns: repeat(3, 10vmin); @@ -24,4 +37,18 @@ body { text-align: center; font-size: 8vmin; line-height: 10vmin; +} + +#field > div:hover{ + transform: scale(.90); + transition: trasnform 150ms ease-in-out; + border-color: purple; +} + +.p1{ + color: blue; +} + +.p2{ + color: red; } \ No newline at end of file diff --git a/index.html b/index.html index 0402607..d7aa519 100644 --- a/index.html +++ b/index.html @@ -8,20 +8,20 @@ TTT -
TTT
-

Who is going first?

+

TIC TAC TOE

+

Who is going first?

or
-
+
-
+
diff --git a/js/main.js b/js/main.js index 8b5e52c..33197a4 100644 --- a/js/main.js +++ b/js/main.js @@ -22,5 +22,5 @@ function pickPlayer(){ } function clearBoard(){ - + } \ No newline at end of file From 46109e8deae917146845d159e2cd8ad67bf6f7bf Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 00:08:43 -0500 Subject: [PATCH 05/15] added cached, and funtions --- css/main.css | 13 +++++++++- index.html | 4 +-- js/main.js | 71 ++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 78 insertions(+), 10 deletions(-) diff --git a/css/main.css b/css/main.css index 24df7fa..495e0e4 100644 --- a/css/main.css +++ b/css/main.css @@ -16,7 +16,18 @@ button{ border-radius: 4vmin; font-size: 2vmin; border: 2px solid purple; - background-color: orange; + background-color: white; + color: purple; +} +.x{ + border: 2px solid tomato; + color: tomato; + background-color: white; +} +.o{ + border: 2px solid royalblue; + color: royalblue; + background-color: white; } button:hover{ diff --git a/index.html b/index.html index d7aa519..9bc0280 100644 --- a/index.html +++ b/index.html @@ -16,12 +16,12 @@

Who is going first?

-
+
-
+
diff --git a/js/main.js b/js/main.js index 33197a4..7f51fe0 100644 --- a/js/main.js +++ b/js/main.js @@ -1,26 +1,83 @@ /*----- constants -----*/ -let playerOne; -let playerTwo; +const COLORS = { + "0": "white", + "1": "Blue", + "2": "Red" +} /*----- state variables -----*/ - +let borad; +let turn; //1 blue or 2 red +let winner; // null = no winner; 1 o 2 = winner; tie = T +let playerOne; +let playerTwo; /*----- cached elements -----*/ - - +const intructionsEl = document.getElementById("intructions"); +const resetBtnEl = document.getElementById("reset"); /*----- event listeners -----*/ - +document.getElementById("field").addEventListener("click", pickSpot); /*----- functions -----*/ +function init(){ + borad = +[ +[0,0,0], +[0,0,0], +[0,0,0], +]; +//set players turn +winner = null; +render(); +} + function render(){ clearBoard(); + renderMessage(); + renderControls() pickPlayer(); } +function renderMessage(){ + if(winner==="T"){ + intructionsEl.innerText = "It's a Tie"; + } + else if(winner === 1) { + intructionsEl.innerHTML = `${COLORS[winner].toUpperCase()}'s} Wins` + } + else { + intructionsEl.innerHTML = `${COLORS[turn].toUpperCase()}'s Turn` + } +} + function pickPlayer(){ } +function renderControls(){ + resetBtnEl.style.visibility = winner ? "visible": "hidden"; +} function clearBoard(){ - + borad.forEach(function(colArr, colInx) { + colArr.forEach(function(cellVal,rowIdx) { + const cellId = `r${rowIdx}c${colInx}`; + const cellEl = document.getElementById(cellId); + cellEl.style.backgroundColor = COLORS[cellVal]; + }); + }); +} + +function pickSpot(evt){ + //console.log(parseInt(evt.target.id.charAt(3),10)); + borad[parseInt(evt.target.id.charAt(1),10)][parseInt(evt.target.id.charAt(3),10)] = turn; + let marker = document.createElement('p'); + if(turn===1){ + marker.innerHTML = "O" + marker.setAttribute("class",`p${turn}`) + } + else{ + marker.innerHTML = "X" + } + + render(); } \ No newline at end of file From cee1774930bd5c77dc34be85070af5badd3e5dfe Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 00:32:43 -0500 Subject: [PATCH 06/15] pick spot function still not working --- css/main.css | 6 ++++-- index.html | 2 +- js/main.js | 22 ++++++++++++++-------- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/css/main.css b/css/main.css index 495e0e4..49e9425 100644 --- a/css/main.css +++ b/css/main.css @@ -57,9 +57,11 @@ button:hover{ } .p1{ - color: blue; + background-color: royalblue; + color: black; } .p2{ - color: red; + background-color: tomato; + color: black; } \ No newline at end of file diff --git a/index.html b/index.html index 9bc0280..0e0c36e 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@

Who is going first?

-
+
diff --git a/js/main.js b/js/main.js index 7f51fe0..296d8a4 100644 --- a/js/main.js +++ b/js/main.js @@ -7,7 +7,7 @@ const COLORS = { /*----- state variables -----*/ let borad; -let turn; //1 blue or 2 red +let turn = 1; //1 blue or 2 red let winner; // null = no winner; 1 o 2 = winner; tie = T let playerOne; let playerTwo; @@ -68,16 +68,22 @@ function clearBoard(){ } function pickSpot(evt){ - //console.log(parseInt(evt.target.id.charAt(3),10)); - borad[parseInt(evt.target.id.charAt(1),10)][parseInt(evt.target.id.charAt(3),10)] = turn; + console.dir(evt.target.id); + + if(evt.target.id==="field" || winner) return; + let row =[parseInt(evt.target.id.charAt(1),10)] + let col =[parseInt(evt.target.id.charAt(3),10)] + borad[row][col] = turn; + let marker = document.createElement('p'); if(turn===1){ - marker.innerHTML = "O" - marker.setAttribute("class",`p${turn}`) + marker.innerHTML = "O" + marker.setAttribute("class",`p${turn}`) } - else{ - marker.innerHTML = "X" + else if(turn === 2){ + marker.innerHTML = "X" + marker.setAttribute("class",`p${turn}`) } - + turn = render(); } \ No newline at end of file From d6a9c2a6130548c276028193546a68660e01b1c9 Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 11:02:52 -0500 Subject: [PATCH 07/15] stoping point --- js/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/main.js b/js/main.js index 296d8a4..1431ac3 100644 --- a/js/main.js +++ b/js/main.js @@ -79,10 +79,12 @@ function pickSpot(evt){ if(turn===1){ marker.innerHTML = "O" marker.setAttribute("class",`p${turn}`) + //append too } else if(turn === 2){ marker.innerHTML = "X" marker.setAttribute("class",`p${turn}`) + //append to } turn = render(); From 4dca21b1e6ce8d352c0e6504c4db8ed54b9c7804 Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 13:47:20 -0500 Subject: [PATCH 08/15] pickSpot works but renderBorad needs ajustment --- css/main.css | 8 +++++++- js/main.js | 46 +++++++++++++++++++++++++++++----------------- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/css/main.css b/css/main.css index 49e9425..0073e75 100644 --- a/css/main.css +++ b/css/main.css @@ -56,12 +56,18 @@ button:hover{ border-color: purple; } +.p0{ + background-color: white; + margin: 0; +} .p1{ background-color: royalblue; color: black; + margin: 0; } -.p2{ +.p-1{ background-color: tomato; color: black; + margin: 0; } \ No newline at end of file diff --git a/js/main.js b/js/main.js index 1431ac3..9a7cd7d 100644 --- a/js/main.js +++ b/js/main.js @@ -1,14 +1,14 @@ /*----- constants -----*/ const COLORS = { "0": "white", - "1": "Blue", - "2": "Red" + "1": "royalblue", + "-1": "tomato" } /*----- state variables -----*/ let borad; -let turn = 1; //1 blue or 2 red -let winner; // null = no winner; 1 o 2 = winner; tie = T +let turn = 1; //1 blue or -1 red +let winner; // null = no winner; 1 o -1 = winner; tie = T let playerOne; let playerTwo; @@ -17,22 +17,23 @@ const intructionsEl = document.getElementById("intructions"); const resetBtnEl = document.getElementById("reset"); /*----- event listeners -----*/ document.getElementById("field").addEventListener("click", pickSpot); +resetBtnEl.addEventListener("click",init); /*----- functions -----*/ function init(){ borad = -[ -[0,0,0], -[0,0,0], -[0,0,0], -]; + [ + [0,0,0], + [0,0,0], + [0,0,0], + ]; //set players turn winner = null; render(); } function render(){ - clearBoard(); + renderBoard(); renderMessage(); renderControls() pickPlayer(); @@ -43,7 +44,7 @@ function renderMessage(){ intructionsEl.innerText = "It's a Tie"; } else if(winner === 1) { - intructionsEl.innerHTML = `${COLORS[winner].toUpperCase()}'s} Wins` + intructionsEl.innerHTML = `${COLORS[winner].toUpperCase()}'s WINS!` } else { intructionsEl.innerHTML = `${COLORS[turn].toUpperCase()}'s Turn` @@ -57,7 +58,7 @@ function renderControls(){ resetBtnEl.style.visibility = winner ? "visible": "hidden"; } -function clearBoard(){ +function renderBoard(){ borad.forEach(function(colArr, colInx) { colArr.forEach(function(cellVal,rowIdx) { const cellId = `r${rowIdx}c${colInx}`; @@ -71,21 +72,32 @@ function pickSpot(evt){ console.dir(evt.target.id); if(evt.target.id==="field" || winner) return; - let row =[parseInt(evt.target.id.charAt(1),10)] - let col =[parseInt(evt.target.id.charAt(3),10)] + let col =[parseInt(evt.target.id.charAt(1),10)] + let row =[parseInt(evt.target.id.charAt(3),10)] borad[row][col] = turn; let marker = document.createElement('p'); if(turn===1){ marker.innerHTML = "O" marker.setAttribute("class",`p${turn}`) + evt.target.append(marker); //append too } - else if(turn === 2){ + else if(turn === -1){ marker.innerHTML = "X" marker.setAttribute("class",`p${turn}`) + evt.target.append(marker); //append to } - turn = + turn *= -1; + + winner = getWinner(); + render(); -} \ No newline at end of file +} + +function getWinner(){ + +} + +init(); \ No newline at end of file From 447f121f02e5711124b0ed9f10521567ba30c7ef Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 14:13:25 -0500 Subject: [PATCH 09/15] removed the p tag, add p0 class --- js/main.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/js/main.js b/js/main.js index 9a7cd7d..3a88353 100644 --- a/js/main.js +++ b/js/main.js @@ -64,6 +64,10 @@ function renderBoard(){ const cellId = `r${rowIdx}c${colInx}`; const cellEl = document.getElementById(cellId); cellEl.style.backgroundColor = COLORS[cellVal]; + if(cellEl.firstChild){ + cellEl.removeAttribute(backgroundColor); + //cellEl.removeChild(cellEl.firstChild) + } }); }); } @@ -78,15 +82,15 @@ function pickSpot(evt){ let marker = document.createElement('p'); if(turn===1){ - marker.innerHTML = "O" + //marker.innerHTML = "O" marker.setAttribute("class",`p${turn}`) - evt.target.append(marker); + //evt.target.append(marker); //append too } else if(turn === -1){ - marker.innerHTML = "X" + //marker.innerHTML = "X" marker.setAttribute("class",`p${turn}`) - evt.target.append(marker); + //evt.target.append(marker); //append to } turn *= -1; From 813b17411fead569555bb1f115112d5a7871b58f Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 14:29:15 -0500 Subject: [PATCH 10/15] lunch time --- js/main.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/js/main.js b/js/main.js index 3a88353..469d257 100644 --- a/js/main.js +++ b/js/main.js @@ -59,9 +59,9 @@ function renderControls(){ } function renderBoard(){ - borad.forEach(function(colArr, colInx) { + borad.forEach(function(colArr, colIdx) { colArr.forEach(function(cellVal,rowIdx) { - const cellId = `r${rowIdx}c${colInx}`; + const cellId = `r${rowIdx}c${colIdx}`; const cellEl = document.getElementById(cellId); cellEl.style.backgroundColor = COLORS[cellVal]; if(cellEl.firstChild){ @@ -84,24 +84,33 @@ function pickSpot(evt){ if(turn===1){ //marker.innerHTML = "O" marker.setAttribute("class",`p${turn}`) + //append to //evt.target.append(marker); - //append too } else if(turn === -1){ //marker.innerHTML = "X" marker.setAttribute("class",`p${turn}`) - //evt.target.append(marker); //append to + //evt.target.append(marker); } turn *= -1; - winner = getWinner(); + winner = getWinner(rowIdx,colIdx); render(); } function getWinner(){ + return checkVerticalWin(rowIdx,colIdx); +} + +function checkVerticalWin(rowIdx,colIdx){ + return countAdjacent(rowIdx,colIdx, 0, -1) === 2 ? borad[rowIdx,colIdx] : null; +} +function countAdjacent(rowIdx,colIdx, rowOffset, colOffset){ + const players = borad[rowIdx][colIdx]; + console.log(players) } init(); \ No newline at end of file From 200cae11239c0c52a6aac41ff4ffb1566fd90a25 Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 17:05:42 -0500 Subject: [PATCH 11/15] isWinning not working --- js/main.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 73 insertions(+), 7 deletions(-) diff --git a/js/main.js b/js/main.js index 469d257..8f418d2 100644 --- a/js/main.js +++ b/js/main.js @@ -95,22 +95,88 @@ function pickSpot(evt){ } turn *= -1; - winner = getWinner(rowIdx,colIdx); - + //winner = getWinner(rowIdx,colIdx); + isWinner(); render(); } function getWinner(){ return checkVerticalWin(rowIdx,colIdx); } +function isWinner(){ + if((vertWin() === false)){ + if((horzWin() === false)){ + diagWin(); + } + } +} +function vertWin(){ + for(let i=0; i<3;i++){ + for(let j=0;j<3;j++){ + if((borad[i][j]&&borad[i][j]&&borad[i][j] === 1)){ + winner = 1; + return true; + } + else if((borad[i][j]&&borad[i][j]&&borad[i][j] === -1)){ + winner = -1; + return ture; + } + else{ + return false; + } + } + } +} -function checkVerticalWin(rowIdx,colIdx){ - return countAdjacent(rowIdx,colIdx, 0, -1) === 2 ? borad[rowIdx,colIdx] : null; +function horzWin(){ + for(let i=0; i<3;i++){ + for(let j=0;j<3;j++){ + if((borad[j][i]&&borad[j][i]&&borad[j][i] === 1)){ + winner = 1; + return true; + } + else if((borad[j][i]&&borad[j][i]&&borad[j][i] === -1)){ + winner = -1; + return true; + } + } + } } -function countAdjacent(rowIdx,colIdx, rowOffset, colOffset){ - const players = borad[rowIdx][colIdx]; - console.log(players) +function diagWin(){ + if((borad[0][0]&&borad[1][1]&&borad[2][2] === 1)){ + winner = 1; + return true; + } + else if((borad[0][0]&&borad[1][1]&&borad[2][2] === -1)){ + winner = -1; + return ture; + } + else if((borad[0][2]&&borad[1][1]&&borad[2][0] === 1)){ + winner = 1; + return true; + } + else if((borad[0][2]&&borad[1][1]&&borad[2][0] === -1)){ + winner = -1; + return ture; + } + // else{ + // return false; + // } } +// function checkVerticalWin(rowIdx,colIdx){ +// return countAdjacent(rowIdx,colIdx, 0, -1) === 2 ? borad[rowIdx,colIdx] : null; +// } + +// function countAdjacent(rowIdx,colIdx, rowOffset, colOffset){ +// const players = borad[rowIdx][colIdx]; +// let count = 0; + +// while(){ + +// } +// console.log(players) +// } + init(); \ No newline at end of file From 4bda1cf1d330837afa1d27973b2448722422036c Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 17:23:29 -0500 Subject: [PATCH 12/15] need code to wait till button is clicked --- js/main.js | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/js/main.js b/js/main.js index 8f418d2..b848d9e 100644 --- a/js/main.js +++ b/js/main.js @@ -7,7 +7,7 @@ const COLORS = { /*----- state variables -----*/ let borad; -let turn = 1; //1 blue or -1 red +let turn; //1 blue or -1 red let winner; // null = no winner; 1 o -1 = winner; tie = T let playerOne; let playerTwo; @@ -18,6 +18,7 @@ const resetBtnEl = document.getElementById("reset"); /*----- event listeners -----*/ document.getElementById("field").addEventListener("click", pickSpot); resetBtnEl.addEventListener("click",init); +document.getElementById("pickPlayer").addEventListener("click",charSelect); /*----- functions -----*/ function init(){ @@ -29,6 +30,8 @@ function init(){ ]; //set players turn winner = null; +//need code to wait till button is clicked +charSelect(); render(); } @@ -36,7 +39,6 @@ function render(){ renderBoard(); renderMessage(); renderControls() - pickPlayer(); } function renderMessage(){ @@ -51,9 +53,7 @@ function renderMessage(){ } } -function pickPlayer(){ -} function renderControls(){ resetBtnEl.style.visibility = winner ? "visible": "hidden"; } @@ -73,7 +73,7 @@ function renderBoard(){ } function pickSpot(evt){ - console.dir(evt.target.id); + //console.dir(evt.target.id); if(evt.target.id==="field" || winner) return; let col =[parseInt(evt.target.id.charAt(1),10)] @@ -96,7 +96,7 @@ function pickSpot(evt){ turn *= -1; //winner = getWinner(rowIdx,colIdx); - isWinner(); + //isWinner(); render(); } @@ -165,6 +165,21 @@ function diagWin(){ // } } +function charSelect(evt){ + if(evt.target.id==="field"){ + return; + } + else if(evt.target.id==="x"){ + turn = -1; + document.getElementById("pickPlayer").style.visibility = winner ? "visible": "hidden"; + } + else if(evt.target.id==="o"){ + turn = 1; + document.getElementById("pickPlayer").style.visibility = winner ? "visible": "hidden"; + } +} + + // function checkVerticalWin(rowIdx,colIdx){ // return countAdjacent(rowIdx,colIdx, 0, -1) === 2 ? borad[rowIdx,colIdx] : null; // } From a6de531676d77a475ecdfd11efcc47261629e66b Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 17:42:56 -0500 Subject: [PATCH 13/15] furthest so far --- js/main.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/js/main.js b/js/main.js index b848d9e..2298cd5 100644 --- a/js/main.js +++ b/js/main.js @@ -7,7 +7,7 @@ const COLORS = { /*----- state variables -----*/ let borad; -let turn; //1 blue or -1 red +let turn = 1; //1 blue or -1 red let winner; // null = no winner; 1 o -1 = winner; tie = T let playerOne; let playerTwo; @@ -18,7 +18,7 @@ const resetBtnEl = document.getElementById("reset"); /*----- event listeners -----*/ document.getElementById("field").addEventListener("click", pickSpot); resetBtnEl.addEventListener("click",init); -document.getElementById("pickPlayer").addEventListener("click",charSelect); +//document.getElementById("pickPlayer").addEventListener("click",charSelect); /*----- functions -----*/ function init(){ @@ -31,7 +31,7 @@ function init(){ //set players turn winner = null; //need code to wait till button is clicked -charSelect(); +//charSelect(); render(); } @@ -45,7 +45,7 @@ function renderMessage(){ if(winner==="T"){ intructionsEl.innerText = "It's a Tie"; } - else if(winner === 1) { + else if(winner === 1||winner === -1) { intructionsEl.innerHTML = `${COLORS[winner].toUpperCase()}'s WINS!` } else { @@ -119,7 +119,7 @@ function vertWin(){ } else if((borad[i][j]&&borad[i][j]&&borad[i][j] === -1)){ winner = -1; - return ture; + return true; } else{ return false; @@ -150,7 +150,7 @@ function diagWin(){ } else if((borad[0][0]&&borad[1][1]&&borad[2][2] === -1)){ winner = -1; - return ture; + return true; } else if((borad[0][2]&&borad[1][1]&&borad[2][0] === 1)){ winner = 1; @@ -158,7 +158,7 @@ function diagWin(){ } else if((borad[0][2]&&borad[1][1]&&borad[2][0] === -1)){ winner = -1; - return ture; + return true; } // else{ // return false; From 21dae7071cd1c21df13d5b2e1b416c970206c51e Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 17:57:34 -0500 Subject: [PATCH 14/15] IT WORKS --- js/main.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/js/main.js b/js/main.js index 2298cd5..03f65f9 100644 --- a/js/main.js +++ b/js/main.js @@ -96,7 +96,7 @@ function pickSpot(evt){ turn *= -1; //winner = getWinner(rowIdx,colIdx); - //isWinner(); + isWinner(); render(); } @@ -110,35 +110,34 @@ function isWinner(){ } } } -function vertWin(){ +function horzWin(){ for(let i=0; i<3;i++){ - for(let j=0;j<3;j++){ - if((borad[i][j]&&borad[i][j]&&borad[i][j] === 1)){ + if((borad[i][0]=== 1&&borad[i][1]=== 1&&borad[i][2] === 1)){ winner = 1; return true; } - else if((borad[i][j]&&borad[i][j]&&borad[i][j] === -1)){ + else if((borad[i][0]=== -1&&borad[i][1]=== -1&&borad[i][2] === -1)){ winner = -1; return true; } else{ return false; } - } } } -function horzWin(){ +function vertWin(){ for(let i=0; i<3;i++){ - for(let j=0;j<3;j++){ - if((borad[j][i]&&borad[j][i]&&borad[j][i] === 1)){ - winner = 1; - return true; - } - else if((borad[j][i]&&borad[j][i]&&borad[j][i] === -1)){ - winner = -1; - return true; - } + if((borad[0][i]=== 1&&borad[1][i]=== 1&&borad[2][i] === 1)){ + winner = 1; + return true; + } + else if((borad[0][i]=== -1&&borad[1][i]=== -1&&borad[2][i] === -1)){ + winner = -1; + return true; + } + else{ + return false; } } } From 06fd9cce60d004427f74ad3cc1ae9afa1fca0b2b Mon Sep 17 00:00:00 2001 From: kfac Date: Thu, 5 Oct 2023 20:46:29 -0500 Subject: [PATCH 15/15] finsihed and Tested --- js/main.js | 60 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/js/main.js b/js/main.js index 03f65f9..02bcb2e 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,10 @@ const COLORS = { "0": "white", "1": "royalblue", - "-1": "tomato" + "-1": "tomato", + "3": "purple", + "x": "red", + "o": "blue" } /*----- state variables -----*/ @@ -59,8 +62,8 @@ function renderControls(){ } function renderBoard(){ - borad.forEach(function(colArr, colIdx) { - colArr.forEach(function(cellVal,rowIdx) { + borad.forEach(function(colArr, rowIdx) { + colArr.forEach(function(cellVal,colIdx) { const cellId = `r${rowIdx}c${colIdx}`; const cellEl = document.getElementById(cellId); cellEl.style.backgroundColor = COLORS[cellVal]; @@ -75,10 +78,11 @@ function renderBoard(){ function pickSpot(evt){ //console.dir(evt.target.id); - if(evt.target.id==="field" || winner) return; - let col =[parseInt(evt.target.id.charAt(1),10)] - let row =[parseInt(evt.target.id.charAt(3),10)] + if(evt.target.id==="field" || winner || evt.target.style.backgroundColor!=="white") return; + let row =[parseInt(evt.target.id.charAt(1),10)] + let col =[parseInt(evt.target.id.charAt(3),10)] borad[row][col] = turn; + //console.log(`this ths the borard arry${borad}\nthis is the row int: ${row}\nhere is the column int: ${col}\nthis is the new value:${borad[row][col]}`); let marker = document.createElement('p'); if(turn===1){ @@ -106,62 +110,70 @@ function getWinner(){ function isWinner(){ if((vertWin() === false)){ if((horzWin() === false)){ - diagWin(); + if(diagWin()===false){ + if(!isTie(borad, 0)){ + winner = "T"; + return; + } + } } } } +function isTie(arr, search) { + return arr.some(row => row.includes(search)); +} function horzWin(){ for(let i=0; i<3;i++){ - if((borad[i][0]=== 1&&borad[i][1]=== 1&&borad[i][2] === 1)){ + if(borad[i][0]=== 1&&borad[i][1]=== 1&&borad[i][2]=== 1){ winner = 1; + //console.log("blue hor win"); return true; } - else if((borad[i][0]=== -1&&borad[i][1]=== -1&&borad[i][2] === -1)){ + else if(borad[i][0]=== -1&&borad[i][1]=== -1&&borad[i][2]=== -1){ winner = -1; + //console.log("red hor win"); return true; } - else{ - return false; - } } + return false; } function vertWin(){ for(let i=0; i<3;i++){ - if((borad[0][i]=== 1&&borad[1][i]=== 1&&borad[2][i] === 1)){ + if(borad[0][i]=== 1&&borad[1][i]=== 1&&borad[2][i] === 1){ winner = 1; + //console.log("blue vertical win"); return true; } - else if((borad[0][i]=== -1&&borad[1][i]=== -1&&borad[2][i] === -1)){ + else if(borad[0][i]=== -1&&borad[1][i]=== -1&&borad[2][i] === -1){ winner = -1; + //console.log("blue vertical win"); return true; } - else{ - return false; - } } + return false; } function diagWin(){ - if((borad[0][0]&&borad[1][1]&&borad[2][2] === 1)){ + if((borad[0][0]=== 1&&borad[1][1]=== 1&&borad[2][2] === 1)){ winner = 1; return true; } - else if((borad[0][0]&&borad[1][1]&&borad[2][2] === -1)){ + else if((borad[0][0]=== -1&&borad[1][1]=== -1&&borad[2][2] === -1)){ winner = -1; return true; } - else if((borad[0][2]&&borad[1][1]&&borad[2][0] === 1)){ + else if((borad[0][2]=== 1&&borad[1][1]=== 1&&borad[2][0] === 1)){ winner = 1; return true; } - else if((borad[0][2]&&borad[1][1]&&borad[2][0] === -1)){ + else if((borad[0][2]=== -1&&borad[1][1]=== -1&&borad[2][0] === -1)){ winner = -1; return true; } - // else{ - // return false; - // } + else { + return false; + } } function charSelect(evt){