TicTacToe

commit 14de4967c09e5abe66aef2459dc7ccbea9a617e5 Author: Hector Alfaro Date: Tue Sep 24 05:52:20 2019 -0400 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7bea5b8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +package-lock.json +public/*.js diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8ebd863 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 The GitHub Training Team + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7b05fed --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# Tic Tac Toe Game + +Learn GitHub Actions through a fun little game. diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..c76a0d0 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,12 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current' + } + } + ] + ] +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..1f65314 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + TicTacToe + + + + + +

It's 's turn!

+ + + + + + + + + + + + + + + + +

+ + diff --git a/package.json b/package.json new file mode 100644 index 0000000..96e99be --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "actions-template", + "version": "1.0.0", + "description": "Learn how to use GitHub Actions!", + "main": "index.js", + "directories": { + "test": "__test__", + "src": "src" + }, + "scripts": { + "build": "npx webpack --config ./src/webpack.config.js --mode production", + "dev": "npx webpack --config ./src/webpack.config.js --mode development --watch", + "test": "npx standard && npx jest" + }, + "author": "githubtraining", + "license": "MIT", + "standard": { + "env": [ + "jest", + "browser" + ] + }, + "devDependencies": { + "@babel/core": "^7.2.2", + "@babel/preset-env": "^7.2.3", + "@babel/register": "^7.0.0", + "babel-jest": "^24.9.0", + "babel-loader": "^8.0.5", + "html-webpack-plugin": "^3.2.0", + "script-ext-html-webpack-plugin": "^2.1.3", + "standard": "^14.3.1", + "webpack": "^4.28.4", + "webpack-cli": "^3.2.1", + "webpack-dev-server": "^3.1.14" + }, + "dependencies": {} +} diff --git a/public/index.css b/public/index.css new file mode 100644 index 0000000..a91582e --- /dev/null +++ b/public/index.css @@ -0,0 +1,28 @@ +table { + border-collapse: collapse; +} + +table td { + min-height: 100px; + min-width: 100px; + height: 100px; + width: 100px; + text-align: center; + + font-size: 4em; + border: thin solid black; +} + +table td:hover { + background: #CCCCCC; +} + +table tr { + width: 300px; + height: 100px; +} + +#app { + margin: auto; + width: 60%; +} diff --git a/src/game.js b/src/game.js new file mode 100644 index 0000000..a30a0fa --- /dev/null +++ b/src/game.js @@ -0,0 +1,51 @@ +export default class Game { + constructor (p1, p2) { + this.p1 = p1 + this.p2 = p2 + this.board = [[null, null, null], [null, null, null], [null, null, null]] + this.player = Math.random() < 0.5 ? this.p1 : this.p2 + this.sym = 'X' + } + + turn (row, col) { + col = col || row + this.board[row][col] = this.sym + } + + nextPlayer () { + this.player = this.player === this.p1 ? this.p2 : this.p1 + this.sym = this.sym === 'X' ? 'O' : 'X' + } + + hasWinner () { + return this.rowWin() || this.colWin() || this.diagWin() + } + + rowWin () { + let win = false + for (let r = 0; r < 3; r++) { + const row = this.board[r] + if (row[0] === null) { continue } + win = win || (row[0] === row[1] && row[0] === row[2]) + } + + return win + } + + colWin () { + let win = false + for (let c = 0; c < 3; c++) { + const col = this.board + if (col[0][c] === null) { continue } + win = win || (col[0][c] === col[1][c] && col[0][c] === col[2][c]) + } + + return win + } + + diagWin () { + const b = this.board + return ((b[0][0] !== null && b[0][0] === b[1][1] && b[0][0] === b[2][2]) || + (b[0][2] !== null && b[0][2] === b[1][1] && b[0][2] === b[2][0])) + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..43e36a3 --- /dev/null +++ b/src/index.js @@ -0,0 +1,40 @@ +import Game from './game.js' + +let p1, p2 +while (!p1) { + p1 = window.prompt('Enter player 1 name:') +} + +while (!p2 && p1 !== p2) { + p2 = window.prompt(p1 === p2 + ? `Please enter a different name than ${p1}.` + : 'Enter player 2 name:') +} + +window.onload = () => { + const game = new Game(p1, p2) + const turn = document.getElementById('turn') + const player = document.getElementById('player') + player.innerText = game.player + + document.querySelectorAll('td').forEach((el) => { + el.onclick = (evt) => { + el.onclick = undefined + evt.target.innerText = game.sym + evt.target.onclick = undefined + + const [row, col] = evt.target.classList + game.turn(row, col) + + if (game.hasWinner()) { + turn.innerText = `${game.player} wins!` + document.querySelectorAll('td').forEach(el => { + el.onclick = undefined + }) + } else { + game.nextPlayer() + player.innerText = game.player + } + } + }) +} diff --git a/src/webpack.config.js b/src/webpack.config.js new file mode 100644 index 0000000..5300031 --- /dev/null +++ b/src/webpack.config.js @@ -0,0 +1,14 @@ +const path = require('path') + +module.exports = { + entry: { + 'main.js': [ + path.resolve(__dirname, 'index.js'), + path.resolve(__dirname, 'game.js') + ] + }, + output: { + filename: 'main.js', + path: path.resolve(__dirname, '../public') + } +}