Salve a tutti ho una pagina del gioco Ultimate Tic-Tac-Toe e quello che sto cercando di fare è se tramite JavaScript(jQuery) "X" o "O" vincono vengano sostituiti con una "X" o "O" grande e in caso di pareggio venga sostituito con il segno "-"(meno) grande invece di sovrapporli sulla griglia piccola ma non saprei come fare. Allego il codice della pagina e un'immagine per far capire quello che sto cercando di modificare/aggiungere ma non saprei come procedere perchè non sono esperto di programmazione web. Grazie per la cordialità.
codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, shrink-to-fit=no, initial-scale=0.23, minimum-scale=0.23, maximum-scale=0.23">
<title>Ultimate Tic-Tac-Toe</title>
<script src="https://code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">
* {font-family: Auto Digital; text-align: center; margin: 0;}
body {text-align: center;}
.reload {width: 120px; height: 40px; font-family: Auto Digital; font-size: 30px; color: #ffffff; background: #000000;}
.btn-reset {width: 120px; height: 40px; font-family: Auto Digital; font-size: 30px; color: #ffffff; background: #ff0000;}
.tic-tac-toe .scoreboard {margin: auto; text-align: center; font-size: 30px;}
.tic-tac-toe .scoreboard .score {text-align: center; font-size: 80px;}
.tic-tac-toe .scoreboard .score.X {color: #bb5700; background: #fdfc0c; border: 10px solid #bb5700;}
.tic-tac-toe .scoreboard .score.O {color: #ffd400; background: #c30000; border: 10px solid #ffd400;}
div {display: inline-block; *display: inline; *zoom: 1;}
.grid {padding: 4px; border: 2px solid #000;}
.current-grid {background: #1d1d1d;}
.button {background: #00c1f6; border: 2px solid #000000; width: 80px; height: 80px; margin: 2px; text-align: center; vertical-align: middle;}
.X-won {background: #fdfc0c;}
.O-won {background: #c30000;}
.no-win {background: #ccc;}
.X-selected {background: #fdfc0c; border: 2px solid #bb5700;color: #bb5700; font-size: 82px; line-height: 82px;}
.O-selected {background: #c30000; border: 2px solid #ffd400; color: #ffd400; font-size: 82px; line-height: 82px;}
#game {left: 0px; right: 0px; width: 880px; min-width: 100%; display: inline-block; *display: inline; *zoom: 1;}
</style>
</head>
<body>
<h1>Ultimate Tic-Tac-Toe!</h1>
<p> </p>
<p><div class="tic-tac-toe">
<table class="scoreboard">
<tbody><tr>
<td>Giocatore 1</td>
<td width="30px"> </td>
<td>Giocatore 2</td>
</tr>
<tr>
<td class="score X">0</td>
<td> </td>
<td class="score O">0</td>
</tr>
</tbody></table>
</div></p>
<p> </p>
<p><button class="btn-reset">Reset</button> <button class="reload" onclick="location.reload(true);">Reload</button></p>
<p> </p>
<script>
var isXTurn = true;
var currentGrid = -1;
var scores = {
X: 0,
O: 0
},
data = {};
$('.btn-reset').click(function(){
reset_btn = init();
});
$(function() {
$('body');
for (var i = 0; i < 9; i++) {
$('#game');
if (i % 3 == 2) {
$('#game');
}
for (var j = 0; j < 9; j++) {
$('#grid' + i);
if (j % 3 == 2) {
$('#grid' + i);
}
}
}
$('.button').click(function() {
var parent = $(this).parent();
var me = isXTurn ? 'X' : 'O';
if ($(this).is('.X-selected, .O-selected') || parent.is('.X-won, .O-won') ||
(currentGrid >= 0 && parent.attr('id') != 'grid' + currentGrid)) {
return;
}
$(this).addClass(me + '-selected').html(me);
if (checkForWin($(this), ('.' + me + '-selected'))) {
parent.addClass(me + '-won');
if (checkForWin(parent, ('.' + me + '-won'))) {
alert(me + ' vince la partita!');
scores[me]++;
updateScoreboard();
resetGame();
return;
}
else if ($('.grid.X-won, .grid.O-won, .grid.no-win').length == 9) {
alert('Pareggio!');
empty();
return;
}
}
else if (parent.children('.X-selected, .O-selected').length == 9) {
parent.addClass('no-win');
}
currentGrid = +($(this).attr('id').slice(-1));
$('.grid').removeClass('current-grid');
if ($('#grid' + currentGrid).is('.X-won, .O-won, .no-win')) {
currentGrid = -1;
}
else {
$('#grid' + currentGrid).addClass('current-grid');
}
isXTurn = !isXTurn;
});
function checkForWin(elem, match) {
var index = +(elem.attr('id').slice(-1));
var prefix = '#' + (elem.hasClass('button') ? elem.attr('id').slice(0, 8) : 'grid');
if (elem.nextUntil('br').add(elem.prevUntil('br')).filter(match).length == 2) {
return true;
}
if ($(prefix + (index % 3)).add($(prefix + (index % 3 + 3))).add($(prefix + (index % 3 + 6))).filter(match).length == 3) {
return true;
}
if ($(prefix + 0).add($(prefix + 4)).add($(prefix + 8)).filter(match).length == 3) {
return true;
}
if ($(prefix + 2).add($(prefix + 4)).add($(prefix + 6)).filter(match).length == 3) {
return true;
}
return false;
}
});
function empty() {
isXTurn = true;
currentGrid = -1;
$('div').removeClass('X-won O-won no-win current-grid X-selected O-selected');
$('.button').empty();
$('.turn').empty();
data = {};
}
function resetGame() {
isXTurn = true;
currentGrid = -1;
$('div').removeClass('X-won O-won no-win current-grid X-selected O-selected');
$('.button').empty();
$('.turn').empty();
}
function init() {
empty();
scores = {
X: 0,
O: 0
};
updateScoreboard();
}
function updateScoreboard() {
$('.score.X').html(scores.X);
$('.score.O').html(scores.O);
}
</script>
<div id="game"><div class="grid" id="grid0"><div class="button" id="button0-0"></div><div class="button" id="button0-1"></div><div class="button" id="button0-2"></div><br><div class="button" id="button0-3"></div><div class="button" id="button0-4"></div><div class="button" id="button0-5"></div><br><div class="button" id="button0-6"></div><div class="button" id="button0-7"></div><div class="button" id="button0-8"></div><br></div><div class="grid" id="grid1"><div class="button" id="button1-0"></div><div class="button" id="button1-1"></div><div class="button" id="button1-2"></div><br><div class="button" id="button1-3"></div><div class="button" id="button1-4"></div><div class="button" id="button1-5"></div><br><div class="button" id="button1-6"></div><div class="button" id="button1-7"></div><div class="button" id="button1-8"></div><br></div><div class="grid" id="grid2"><div class="button" id="button2-0"></div><div class="button" id="button2-1"></div><div class="button" id="button2-2"></div><br><div class="button" id="button2-3"></div><div class="button" id="button2-4"></div><div class="button" id="button2-5"></div><br><div class="button" id="button2-6"></div><div class="button" id="button2-7"></div><div class="button" id="button2-8"></div><br></div><br><div class="grid" id="grid3"><div class="button" id="button3-0"></div><div class="button" id="button3-1"></div><div class="button" id="button3-2"></div><br><div class="button" id="button3-3"></div><div class="button" id="button3-4"></div><div class="button" id="button3-5"></div><br><div class="button" id="button3-6"></div><div class="button" id="button3-7"></div><div class="button" id="button3-8"></div><br></div><div class="grid" id="grid4"><div class="button" id="button4-0"></div><div class="button" id="button4-1"></div><div class="button" id="button4-2"></div><br><div class="button" id="button4-3"></div><div class="button" id="button4-4"></div><div class="button" id="button4-5"></div><br><div class="button" id="button4-6"></div><div class="button" id="button4-7"></div><div class="button" id="button4-8"></div><br></div><div class="grid" id="grid5"><div class="button" id="button5-0"></div><div class="button" id="button5-1"></div><div class="button" id="button5-2"></div><br><div class="button" id="button5-3"></div><div class="button" id="button5-4"></div><div class="button" id="button5-5"></div><br><div class="button" id="button5-6"></div><div class="button" id="button5-7"></div><div class="button" id="button5-8"></div><br></div><br><div class="grid" id="grid6"><div class="button" id="button6-0"></div><div class="button" id="button6-1"></div><div class="button" id="button6-2"></div><br><div class="button" id="button6-3"></div><div class="button" id="button6-4"></div><div class="button" id="button6-5"></div><br><div class="button" id="button6-6"></div><div class="button" id="button6-7"></div><div class="button" id="button6-8"></div><br></div><div class="grid" id="grid7"><div class="button" id="button7-0"></div><div class="button" id="button7-1"></div><div class="button" id="button7-2"></div><br><div class="button" id="button7-3"></div><div class="button" id="button7-4"></div><div class="button" id="button7-5"></div><br><div class="button" id="button7-6"></div><div class="button" id="button7-7"></div><div class="button" id="button7-8"></div><br></div><div class="grid" id="grid8"><div class="button" id="button8-0"></div><div class="button" id="button8-1"></div><div class="button" id="button8-2"></div><br><div class="button" id="button8-3"></div><div class="button" id="button8-4"></div><div class="button" id="button8-5"></div><br><div class="button" id="button8-6"></div><div class="button" id="button8-7"></div><div class="button" id="button8-8"></div><br></div><br></div>
</body>
</html>