Created
January 16, 2020 13:58
-
-
Save roza/1b115af4daf8dd7da9b2ded58324b5d3 to your computer and use it in GitHub Desktop.
TicTacToeStates
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Tic Tac Toe</title> | |
| <link href="style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict;" | |
| // Returns the tile ('x', 'o') given an index | |
| // 0 - 'x' | |
| // 1 - 'o' | |
| function tile(id) { | |
| if (id !== 0 && id !== 1) { | |
| throw `Parameter ${id} not found`; | |
| } | |
| let text = id === 0 ? 'X' : 'O'; | |
| let element = document.createElement("div"); | |
| element.classList.add("tile", text); | |
| element.innerText = text; | |
| return element; | |
| } | |
| function grid() { | |
| let node = document.createElement("div"); | |
| node.classList.add("grid"); | |
| return node | |
| } | |
| function recurse(parent, tileID, seen, depth) { | |
| if (depth < 0) { return; } | |
| let prevState = parent.cloneNode(true); | |
| for (let i = 0; i < 9; i++) { | |
| if (seen.has(i)) { continue; } | |
| seen.add(i); | |
| let item = positionedItem(gridWithTile(prevState, tileID, i), i); | |
| parent.appendChild(item); | |
| recurse(item, 1 - tileID, seen, depth-1); | |
| seen.delete(i); | |
| } | |
| return parent; | |
| } | |
| function gridWithTile(grid, tileID, i) { | |
| let node = grid.cloneNode(true); | |
| node.appendChild(positionedItem(tile(tileID), i)); | |
| return node; | |
| } | |
| function generate(container) { | |
| recurse(container, 0, new Set(),2); | |
| } | |
| function positionedItem(node, idx) { | |
| let { row, col } = rowcol(idx); | |
| node.style.gridRowStart = `${row + 1}`; | |
| node.style.gridRowEnd = `${row + 2}`; | |
| node.style.gridColumnStart = `${col + 1}`; | |
| node.style.gridColumnEnd = `${col + 2}`; | |
| return node; | |
| } | |
| function uid(row, col) { | |
| return row * 3 + col; | |
| } | |
| function rowcol(uid) { | |
| return { | |
| 'row': Math.floor(uid / 3), | |
| 'col': uid % 3 | |
| }; | |
| } | |
| let firstGrid = grid(); | |
| document.getElementById("container").appendChild(firstGrid); | |
| generate(firstGrid); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| grid-template-rows: repeat(3, 1fr); | |
| grid-gap: 0.5%; | |
| background-color: black; | |
| } | |
| .tile { | |
| background-color: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment