Update message - whose turn it is

This commit is contained in:
jim-clark 2019-07-26 15:11:22 -07:00
parent f7ef285292
commit db44e80cb7

View file

@ -9,7 +9,7 @@ const COLORS = {
let board, turn, winner; let board, turn, winner;
/*----- cached element references -----*/ /*----- cached element references -----*/
const msgEl = document.getElementById('msg');
/*----- event listeners -----*/ /*----- event listeners -----*/
document.querySelector('section.markers') document.querySelector('section.markers')
@ -39,6 +39,7 @@ function render() {
// hide/show the column's marker depending if there are 0's or not // hide/show the column's marker depending if there are 0's or not
let marker = document.getElementById(`col${colIdx}`); let marker = document.getElementById(`col${colIdx}`);
// <conditional exp> ? <truthy thing to return> : <falsey thing to return>; // <conditional exp> ? <truthy thing to return> : <falsey thing to return>;
// This is a ternary expression that replaces the if/else below it.
marker.style.visibility = colArr.indexOf(0) === -1 ? 'hidden' : 'visible'; marker.style.visibility = colArr.indexOf(0) === -1 ? 'hidden' : 'visible';
// if (colArr.indexOf(0) === -1) { // if (colArr.indexOf(0) === -1) {
// marker.style.visibility = 'hidden'; // marker.style.visibility = 'hidden';
@ -50,6 +51,12 @@ function render() {
div.style.backgroundColor = COLORS[cell]; div.style.backgroundColor = COLORS[cell];
}); });
}); });
// Render the message
if (winner) {
} else {
msgEl.textContent = `${COLORS[turn].toUpperCase()}'s Turn`;
}
} }
function handleClick(evt) { function handleClick(evt) {
@ -70,5 +77,11 @@ function handleClick(evt) {
colArr[rowIdx] = turn; colArr[rowIdx] = turn;
// flip turns from 1 to -1; -1 to 1 // flip turns from 1 to -1; -1 to 1
turn *= -1; turn *= -1;
// update the winner
winner = getWinner();
render(); render();
}
function getWinner() {
// return the winner, 'T' or null
} }