diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | app.js | 38 | ||||
| -rw-r--r-- | index.html | 24 | ||||
| -rw-r--r-- | readme.md | 3 | ||||
| -rw-r--r-- | style.css | 65 |
5 files changed, 131 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c434074 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +_*
\ No newline at end of file @@ -0,0 +1,38 @@ +console.log('Hello from app.js'); + +const turns = {true: 'X', false: 'O'}; + +const boardTurn = function() { + console.log('clicked', this.id, this.bitBoard); +}; + +const squareClick = function() { + console.log('clicked', this.id, this.innerText, this.position); + if (this.innerText == '') { + //Mark board + this.innerText = this.board.turn; + //Update bitBoard + let pos = 9 * (this.board.turn==turns[false]); + pos += this.position - 1 + this.board.bitBoard[pos] = 1; + //Switch player turn + this.board.turn = turns[this.board.turn==turns[false]] + }; +}; + +const initBoard = function(board) { + board.squares = board.getElementsByClassName('square'); + board.squares = Array.from(board.squares); + board.squares.forEach(square => { + square.addEventListener('click', squareClick); + square.board = board; + square.position = parseInt(square.id.match(/\d+/)[0], 10); + }); + board.addEventListener('click', boardTurn); + board.turn = turns[true]; + board.bitBoard = Array(18).fill(0); +}; + +const board = document.getElementById('board'); + +initBoard(board);
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c11b476 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Tit Tac Toe</title> + <link rel="stylesheet" href="style.css"> + <script defer src="app.js"></script> +</head> +<body> + <h1>TIC TAC TOE</h1> + <div class="board", id="board"> + <div class="square" id="square-1"></div> + <div class="square" id="square-2"></div> + <div class="square" id="square-3"></div> + <div class="square" id="square-4"></div> + <div class="square" id="square-5"></div> + <div class="square" id="square-6"></div> + <div class="square" id="square-7"></div> + <div class="square" id="square-8"></div> + <div class="square" id="square-9"></div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..63cd580 --- /dev/null +++ b/readme.md @@ -0,0 +1,3 @@ +# Tic Tac Toe web page + +under development for experience and reference diff --git a/style.css b/style.css new file mode 100644 index 0000000..97ed162 --- /dev/null +++ b/style.css @@ -0,0 +1,65 @@ +:root{ + --foreground-color: hsl(180, 50%, 50%); + --background-color: hsl(0, 0%, 0%); +} + +@media (max-width: 600px) { + html { + font-size: 1.5rem; + } +} + +@media (min-width: 601px) { + html { + font-size: 1rem; + } +} + +body { + color: var(--foreground-color); + background-color: var(--background-color); +} + +hr { + border-color: var(--foreground-color); +} + +nav { + color: var(--foreground-color); + text-align: center; + clear: both; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + max-width: 12rem; + max-height: 12rem; +} + +.square { + border: 0.01rem solid var(--foreground-color); + height: 4rem; + width: 4rem; + font-size: 3rem; + display: flex; + align-items: center; + justify-content: center; +} + +.square:nth-child(3n+1) { + border-left: 0; +} + +.square:nth-child(3n+3) { + border-right: 0; +} + +.square:nth-child(-n+3) { + border-top: 0; +} + +.square:nth-child(n+6) { + border-bottom: 0; +}
\ No newline at end of file |