I'm trying to build a tic-tac-toe board that changes colors based on a player's selection. That part works, but when trying to add a hover preview function for the player's potential choice, I'm having trouble getting the correct outcome.
In essence, player 1 will have yellow tiles, and player 2's will be blue. Right now, the hover feature is causing all tiles clicked to be blue, and while it hovers over blank tiles correctly, already it inverts the color for tiles already selected.
Any idea what's going on?
relevant jQuery:
count = 0
// hover classes for clear selection
$( "td" ).hover(function() {
if (count % 2 === 0) {
$(this).toggleClass('yellowHover');
return;
} else {
$(this).toggleClass('blueHover');
return;
};
});
// upon click change turns, countt++, change box value, check if winner
$('td').click(function() {
var row = $(this).parent().index();
var col = $(this).index();
if(player1Name=="" || player2Name==""){
alert("Please set player all the names.");
return;
}
// doesn't allow spot to be clicked on twice
if(board[row][col]!==0){
alert("This position is taken. Please try again.");
return;
};
// if count is even, player 1 is yellow
// if count is odd, player 2 is blue
if (count % 2 === 0) {
board[row][col] = 1;
$(this).addClass('yellow');
count++;
winnerCheck(1, player1Name);
draw();
messageBoard(player2Name + "'s turn. Click a circle to mark it blue.");
} else {
board[row][col] = 2;
$(this).addClass('blue');
count++;
winnerCheck(2, player2Name);
draw();
messageBoard(player1Name + "'s turn. Click a circle to mark it yellow.");
};
});
relevant css:
.yellow {
background-color: #ffc300;
}
.blue {
background-color: #73d2c9;
}
.yellowHover {
background-color: #ffc300;
opacity: 0.5;
}
.blueHover {
background-color: #73d2c9;
opacity: 0.5;
}
relevant html:
<table>
<tbody>
<tr class="box_row" >
<td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td>
<td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td>
<td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td>
</tr>
<tr class="box_row">
<td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td>
<td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td>
<td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td>
</tr>
<tr class="box_row">
<td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td>
<td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td>
<td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td>
</tr>
</tbody>
</table>
To fix this, you just make the blue and yellow classes a little more specific.
Instead of:
.yellow {
background-color: #ffc300;
}
.blue {
background-color: #73d2c9;
}
...try something like this:
td.box_cell.yellow {
background-color: #ffc300;
}
td.box_cell.blue {
background-color: #73d2c9;
}
Here's a simplified version of your code to demonstrate (hopefully) the result you're looking for:
count = 0;
$("td").hover(function(){
if (count % 2 === 0) {
$(this).toggleClass('yellowHover');
return;
} else {
$(this).toggleClass('blueHover');
return;
}
});
$('td').click(function(e) {
// if count is even, player 1 is yellow
// if count is odd, player 2 is blue
if (count % 2 === 0) {
$(this).addClass('yellow');
count++;
console.log(count);
} else {
$(this).addClass('blue');
count++;
console.log(count);
}
});/* Added this for demo purposes only */
td {border:1px solid pink;width:50px;height:50px}
/* -- */
td.box_cell.yellow {
background-color: #ffc300;
}
td.box_cell.blue {
background-color: #73d2c9;
}
.yellowHover {
background-color: #ffc300;
opacity: 0.5;
}
.blueHover {
background-color: #73d2c9;
opacity: 0.5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="box_row" >
<td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td>
<td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td>
<td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td>
</tr>
<tr class="box_row">
<td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td>
<td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td>
<td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td>
</tr>
<tr class="box_row">
<td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td>
<td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td>
<td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td>
</tr>
</tbody>
</table>Also - just a suggestion - you may want to clean up your code. I noticed some unnecessary semicolons after a few if statements in there.