voidf1sh/ultimate-tictactoe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: voidf1sh:06f460f6e86af0c2be8dc48c84eade381ef82e05
Branches Tags
voidf1sh:main
..
compare: voidf1sh:b70093cc1c49ff06c5e5d94f1b3a9c3499327ebf
Branches Tags
voidf1sh:main

2 Commits
06f460f6e8 ... b70093cc1c

Author SHA1 Message Date
Skylar Grant
b70093cc1c init 2024-08-27 22:16:24 -04:00
Skylar Grant
73d585902b idk 2024-08-27 22:16:09 -04:00
4 changed files with 117 additions and 2 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.DS_Store

3
README.md
View File

@ -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
View 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
View 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>