rose/tic-tac-toe-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added prediction, B&W theme

Browse Source
This commit is contained in:
AUnicornWithNoLife 2021-07-08 20:57:47 +01:00
parent 338f7060a6
commit 541da686d4
4 changed files with 143 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/code.js
View File

@ -46,9 +46,9 @@ function move(id)
info['go'].innerHTML = charater + "'s Go"; info['go'].innerHTML = charater + "'s Go";
var pre = calculate(); resetPredict();
resetPrediction(); var pre = calculate(ptm);
board[pre[0]][pre[1]][1].parentElement.classList.add('predict'); board[pre[0]][pre[1]][1].parentElement.classList.add('predict');
} }
@ -141,18 +141,20 @@ function reset()
board[x][y][1].innerHTML = " "; board[x][y][1].innerHTML = " ";
} }
} }
resetPredict();
tabloid.classList.remove('win'); tabloid.classList.remove('win');
tabloid.classList.remove('lol'); tabloid.classList.remove('lol');
resetPrediction();
load(); load();
} }
function calculate() function calculate(like)
{ {
var like = (ptm == 1) ? 2 : 1; const dislike = (like == 1) ? 2 : 1;
//LIKE
for (var x = 0; x <3; x++) for (var x = 0; x <3; x++)
{ {
@ -211,15 +213,124 @@ function calculate()
{ {
return [0, 2]; return [0, 2];
} }
//DISLIKE
for (var x = 0; x <3; x++)
{
if (board[0][x][0] == dislike && board[1][x][0] == dislike && board[2][x][0] == 0)
{
return [2, x];
}
if (board[0][x][0] == dislike && board[1][x][0] == 0 && board[2][x][0] == dislike)
{
return [1, x];
}
if (board[0][x][0] == 0 && board[1][x][0] == dislike && board[2][x][0] == dislike)
{
return [0, x];
}
}
for (var x = 0; x <3; x++)
{
if (board[x][0][0] == dislike && board[x][1][0] == dislike && board[x][2][0] == 0)
{
return [x, 2];
}
if (board[x][0][0] == dislike && board[x][1][0] == 0 && board[x][2][0] == dislike)
{
return [x, 1];
}
if (board[x][0][0] == 0 && board[x][1][0] == dislike && board[x][2][0] == dislike)
{
return [x, 0];
}
}
if (board[0][0][0] == dislike && board[1][1][0] == dislike && board[2][2][0] == 0)
{
return [2, 2];
}
if (board[0][0][0] == dislike && board[1][1][0] == 0 && board[2][2][0] == dislike)
{
return [1, 1];
}
if (board[0][0][0] == 0 && board[1][1][0] == dislike && board[2][2][0] == dislike)
{
return [0, 0];
}
if (board[0][2][0] == dislike && board[1][1][0] == dislike && board[2][0][0] == 0)
{
return [2, 0];
}
if (board[0][2][0] == dislike && board[1][1][0] == 0 && board[2][0][0] == dislike)
{
return [1, 1];
}
if (board[0][2][0] == 0 && board[1][1][0] == dislike && board[2][0][0] == dislike)
{
return [0, 2];
}
//CENTER
if (board[1][1][0] == 0)
{
return [1, 1];
}
//CORNERS
if (board[0][0][0] == 0)
{
return [0, 0];
}
if (board[0][2][0] == 0)
{
return [0, 2];
}
if (board[2][0][0] == 0)
{
return [2, 0];
}
if (board[2][2][0] == 0)
{
return [2, 2];
}
//EDGES
if (board[0][1][0] == 0)
{
return [0, 1];
}
if (board[2][1][0] == 0)
{
return [2, 1];
}
if (board[1][0][0] == 0)
{
return [1, 0];
}
if (board[1][2][0] == 0)
{
return [1, 2];
}
} }
function resetPrediction() function resetPredict()
{ {
for (var x in board) for (var x = 0; x <3; x++)
{ {
for (var y in board[x]) for (var y = 0; y <3; y++)
{ {
board[x][y][1].parentElement.classList.remove('predict'); try
} {
} board[x][y][1].parentElement.classList.remove("predict");
}
catch{}
}
}
} }

2
src/index.html
View File

@ -1,5 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

9
src/style.css
View File

@ -4,6 +4,9 @@
--theme-object: #000000; --theme-object: #000000;
--theme-highlight: #000000; --theme-highlight: #000000;
--theme-text: #000000; --theme-text: #000000;
--theme-out-win: #000000;
--theme-out-loose: #000000;
--theme-out-predict: #000000;
} }
#board tr #board tr
@ -69,19 +72,19 @@ button:hover
{ {
border-radius: 12px; border-radius: 12px;
background-color: #9DB17C; background-color: var(--theme-out-win);
} }
.lol .lol
{ {
border-radius: 12px; border-radius: 12px;
background-color: #b86868; background-color: var(--theme-out-loose);
} }
.predict .predict
{ {
border-radius: 12px; border-radius: 12px;
background-color: #9DB17C; background-color: var(--theme-out-predict);
} }

11
src/theme.js
View File

@ -1,17 +1,21 @@
class theme class theme
{ {
constructor(back, object, highlight, text) constructor(back, object, highlight, text, win, loose, pre)
{ {
this.back = back; this.back = back;
this.object = object; this.object = object;
this.highlight = highlight; this.highlight = highlight;
this.text = text; this.text = text;
this.win = win;
this.loose = loose;
this.predict = pre;
} }
} }
const themes = const themes =
{ {
'orange': new theme('#231F20', '#ec5020', '#fa6d42', '#ffffff') 'orange': new theme('#231F20', '#ec5020', '#fa6d42', '#ffffff', '#9DB17C', '#b86868', '#9DB17C'),
'greyscale': new theme('#000000', '#555555', '#AAAAAA', '#FFFFFF', '#CCCCCC', '#333333', '#CCCCCC')
} }
function setTheme(name) function setTheme(name)
@ -20,4 +24,7 @@ function setTheme(name)
root.style.setProperty('--theme-object', themes[name].object); root.style.setProperty('--theme-object', themes[name].object);
root.style.setProperty('--theme-highlight', themes[name].highlight); root.style.setProperty('--theme-highlight', themes[name].highlight);
root.style.setProperty('--theme-text', themes[name].text); root.style.setProperty('--theme-text', themes[name].text);
root.style.setProperty('--theme-out-win', themes[name].win);
root.style.setProperty('--theme-out-loose', themes[name].loose);
root.style.setProperty('--theme-out-predict', themes[name].predict);
} }