101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
|
|
let main = document.querySelector('main'); if (!main) throw '';
|
|
|
|
const tableSize = 19;
|
|
const directions = [[1, 0], [1, 1], [0, 1], [-1, 1]];
|
|
// let turn = true;
|
|
|
|
/** @typedef {'white' | 'black' | undefined} Square */
|
|
/** @typedef {{squares: Square[], whiteTurn: boolean}} State */
|
|
|
|
/** @type {State} */
|
|
let state = {squares: Array(tableSize*tableSize), whiteTurn: true};
|
|
|
|
/** @type {State[]} */
|
|
let hist = [];
|
|
|
|
/** @type {HTMLDivElement[]} */
|
|
let squares = [];
|
|
|
|
/**
|
|
* @param x {number}
|
|
* @param y {number}
|
|
* @returns HTMLDivElement
|
|
*/
|
|
function get(x, y) {
|
|
return squares[y * 19 + x];
|
|
}
|
|
|
|
function testWin() {
|
|
for (let by = 0; by < tableSize; by++) {
|
|
for (let bx = 0; bx < tableSize; bx++) {
|
|
let a = get(bx, by);
|
|
if (a.classList.length < 2) {
|
|
continue;
|
|
}
|
|
for (const [dx, dy] of directions) {
|
|
let aColor = a.classList[1];
|
|
let sequence = 1;
|
|
for (let [x, y] = [bx+dx, by+dy]; x >= 0 && x < tableSize && y >= 0 && y < tableSize; [x, y] = [x + dx, y + dy]) {
|
|
let b = get(x, y);
|
|
if (b.classList.length < 2) {
|
|
aColor = 'skip'; // gambiarra;
|
|
break;
|
|
}
|
|
let bColor = b.classList[1];
|
|
if (aColor != bColor) {
|
|
aColor = 'skip'; // gambiarra;
|
|
break;
|
|
}
|
|
sequence += 1;
|
|
}
|
|
if (sequence > 4) {
|
|
alert('vitória!');
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** @returns State */
|
|
function cloneState() {
|
|
/** @type {State} */
|
|
let ret = {squares: Array(tableSize*tableSize), whiteTurn: state.whiteTurn};
|
|
for (let i = 0; i < tableSize*tableSize; i++) {
|
|
let square = squares[i];
|
|
let a = square.classList.values().find((x) => x === 'white')
|
|
|| square.classList.values().find((x) => x === 'black')
|
|
ret.squares[i] = a;
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
for (let i = 0; i < 19 * 19; i++) {
|
|
let d = document.createElement('div');
|
|
d.classList.add('square');
|
|
d.onclick = () => {
|
|
if (d.classList.contains('white') || d.classList.contains('black') ) {
|
|
return;
|
|
}
|
|
d.classList.add(state.whiteTurn ? 'white' : 'black');
|
|
d.classList.remove('hover-white', 'hover-black')
|
|
state.whiteTurn = !state.whiteTurn;
|
|
testWin();
|
|
hist.push(cloneState());
|
|
};
|
|
d.onmouseenter = () => {
|
|
if (d.classList.contains('white') || d.classList.contains('black') ) {
|
|
return;
|
|
}
|
|
d.classList.add(state.whiteTurn ? 'hover-white' : 'hover-black');
|
|
}
|
|
d.onmouseleave = () => {
|
|
if (d.classList.contains('white') || d.classList.contains('black') ) {
|
|
return;
|
|
}
|
|
d.classList.remove('hover-white', 'hover-black')
|
|
}
|
|
main.append(d);
|
|
squares.push(d);
|
|
}
|