idk
This commit is contained in:
parent
06f460f6e8
commit
73d585902b
@ -1,4 +1,3 @@
|
|||||||
# ultimate-tictactoe
|
# ultimate-tictactoe
|
||||||
|
|
||||||
My take on web-based multiplayer Ultimate Tic-Tac-Toe.
|
My take on web-based multiplayer [Ultimate Tic-Tac-Toe](https://en.wikipedia.org/wiki/Ultimate_tic-tac-toe).
|
||||||
|
|
||||||
14
src/assets/UltimateTTT.js
Normal file
14
src/assets/UltimateTTT.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export class TTTBoard {
|
||||||
|
constructor() {
|
||||||
|
this.stateArray = [
|
||||||
|
[null, null, null],
|
||||||
|
[null, null, null],
|
||||||
|
[null, null, null]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is a fun exploit of JavaScript's loose Typing, player can be a nested TTTBoard!
|
||||||
|
play(row, col, player) {
|
||||||
|
this.stateArray[row][col] = player;
|
||||||
|
}
|
||||||
|
}
|
||||||
101
src/index.html
Normal file
101
src/index.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Ultimate Tic-Tac-Toe</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; width: 270px; height: 270px;">
|
||||||
|
<div id="G1-R1-C1" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G1-R1-C1')"></div>
|
||||||
|
<div id="G1-R1-C2" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G1-R1-C2')"></div>
|
||||||
|
<div id="G1-R1-C3" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G1-R1-C3')"></div>
|
||||||
|
<div id="G2-R1-C4" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G2-R1-C4')"></div>
|
||||||
|
<div id="G2-R1-C5" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G2-R1-C5')"></div>
|
||||||
|
<div id="G2-R1-C6" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G2-R1-C6')"></div>
|
||||||
|
<div id="G3-R1-C7" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G3-R1-C7')"></div>
|
||||||
|
<div id="G3-R1-C8" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G3-R1-C8')"></div>
|
||||||
|
<div id="G3-R1-C9" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G3-R1-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G1-R2-C1" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G1-R2-C1')"></div>
|
||||||
|
<div id="G1-R2-C2" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G1-R2-C2')"></div>
|
||||||
|
<div id="G1-R2-C3" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G1-R2-C3')"></div>
|
||||||
|
<div id="G2-R2-C4" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G2-R2-C4')"></div>
|
||||||
|
<div id="G2-R2-C5" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G2-R2-C5')"></div>
|
||||||
|
<div id="G2-R2-C6" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G2-R2-C6')"></div>
|
||||||
|
<div id="G3-R2-C7" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G3-R2-C7')"></div>
|
||||||
|
<div id="G3-R2-C8" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G3-R2-C8')"></div>
|
||||||
|
<div id="G3-R2-C9" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G3-R2-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G1-R3-C1" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G1-R3-C1')"></div>
|
||||||
|
<div id="G1-R3-C2" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G1-R3-C2')"></div>
|
||||||
|
<div id="G1-R3-C3" style="border: 1px solid black;" onclick="alert('You clicked G1-R3-C3')"></div>
|
||||||
|
<div id="G2-R3-C4" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G2-R3-C4')"></div>
|
||||||
|
<div id="G2-R3-C5" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G2-R3-C5')"></div>
|
||||||
|
<div id="G2-R3-C6" style="border: 1px solid black;" onclick="alert('You clicked G2-R3-C6')"></div>
|
||||||
|
<div id="G3-R3-C7" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G3-R3-C7')"></div>
|
||||||
|
<div id="G3-R3-C8" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G3-R3-C8')"></div>
|
||||||
|
<div id="G3-R3-C9" style="border: 1px solid black;" onclick="alert('You clicked G3-R3-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G4-R4-C1" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G4-R4-C1')"></div>
|
||||||
|
<div id="G4-R4-C2" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G4-R4-C2')"></div>
|
||||||
|
<div id="G4-R4-C3" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G4-R4-C3')"></div>
|
||||||
|
<div id="G5-R4-C4" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G5-R4-C4')"></div>
|
||||||
|
<div id="G5-R4-C5" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G5-R4-C5')"></div>
|
||||||
|
<div id="G5-R4-C6" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G5-R4-C6')"></div>
|
||||||
|
<div id="G6-R4-C7" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G6-R4-C7')"></div>
|
||||||
|
<div id="G6-R4-C8" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G6-R4-C8')"></div>
|
||||||
|
<div id="G6-R4-C9" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G6-R4-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G4-R5-C1" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G4-R5-C1')"></div>
|
||||||
|
<div id="G4-R5-C2" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G4-R5-C2')"></div>
|
||||||
|
<div id="G4-R5-C3" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G4-R5-C3')"></div>
|
||||||
|
<div id="G5-R5-C4" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G5-R5-C4')"></div>
|
||||||
|
<div id="G5-R5-C5" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G5-R5-C5')"></div>
|
||||||
|
<div id="G5-R5-C6" style="border: 1px solid black; margin-bottom: -3px;"
|
||||||
|
|
||||||
|
onclick="alert('You clicked G5-R5-C6')"></div>
|
||||||
|
<div id="G6-R5-C7" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G6-R5-C7')"></div>
|
||||||
|
<div id="G6-R5-C8" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G6-R5-C8')"></div>
|
||||||
|
<div id="G6-R5-C9" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G6-R5-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G4-R6-C1" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G4-R6-C1')"></div>
|
||||||
|
<div id="G4-R6-C2" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G4-R6-C2')"></div>
|
||||||
|
<div id="G4-R6-C3" style="border: 1px solid black;" onclick="alert('You clicked G4-R6-C3')"></div>
|
||||||
|
<div id="G5-R6-C4" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G5-R6-C4')"></div>
|
||||||
|
<div id="G5-R6-C5" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G5-R6-C5')"></div>
|
||||||
|
<div id="G5-R6-C6" style="border: 1px solid black;" onclick="alert('You clicked G5-R6-C6')"></div>
|
||||||
|
<div id="G6-R6-C7" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G6-R6-C7')"></div>
|
||||||
|
<div id="G6-R6-C8" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G6-R6-C8')"></div>
|
||||||
|
<div id="G6-R6-C9" style="border: 1px solid black;" onclick="alert('You clicked G6-R6-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G7-R7-C1" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G7-R7-C1')"></div>
|
||||||
|
<div id="G7-R7-C2" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G7-R7-C2')"></div>
|
||||||
|
<div id="G7-R7-C3" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G7-R7-C3')"></div>
|
||||||
|
<div id="G8-R7-C4" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G8-R7-C4')"></div>
|
||||||
|
<div id="G8-R7-C5" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G8-R7-C5')"></div>
|
||||||
|
<div id="G8-R7-C6" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G8-R7-C6')"></div>
|
||||||
|
<div id="G9-R7-C7" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G9-R7-C7')"></div>
|
||||||
|
<div id="G9-R7-C8" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G9-R7-C8')"></div>
|
||||||
|
<div id="G9-R7-C9" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G9-R7-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G7-R8-C1" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G7-R8-C1')"></div>
|
||||||
|
<div id="G7-R8-C2" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G7-R8-C2')"></div>
|
||||||
|
<div id="G7-R8-C3" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G7-R8-C3')"></div>
|
||||||
|
<div id="G8-R8-C4" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G8-R8-C4')"></div>
|
||||||
|
<div id="G8-R8-C5" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G8-R8-C5')"></div>
|
||||||
|
<div id="G8-R8-C6" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G8-R8-C6')"></div>
|
||||||
|
<div id="G9-R8-C7" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G9-R8-C7')"></div>
|
||||||
|
<div id="G9-R8-C8" style="border: 1px solid black; margin-bottom: -3px; margin-right: -3px;" onclick="alert('You clicked G9-R8-C8')"></div>
|
||||||
|
<div id="G9-R8-C9" style="border: 1px solid black; margin-bottom: -3px;" onclick="alert('You clicked G9-R8-C9')"></div>
|
||||||
|
|
||||||
|
<div id="G7-R9-C1" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G7-R9-C1')"></div>
|
||||||
|
<div id="G7-R9-C2" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G7-R9-C2')"></div>
|
||||||
|
<div id="G7-R9-C3" style="border: 1px solid black;" onclick="alert('You clicked G7-R9-C3')"></div>
|
||||||
|
<div id="G8-R9-C4" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G8-R9-C4')"></div>
|
||||||
|
<div id="G8-R9-C5" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G8-R9-C5')"></div>
|
||||||
|
<div id="G8-R9-C6" style="border: 1px solid black;" onclick="alert('You clicked G8-R9-C6')"></div>
|
||||||
|
<div id="G9-R9-C7" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G9-R9-C7')"></div>
|
||||||
|
<div id="G9-R9-C8" style="border: 1px solid black; margin-right: -3px;" onclick="alert('You clicked G9-R9-C8')"></div>
|
||||||
|
<div id="G9-R9-C9" style="border: 1px solid black;" onclick="alert('You clicked G9-R9-C9')"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user