├── public ├── loginPage │ ├── style.css │ └── index.html └── game │ ├── style.css │ ├── index.html │ └── main.js ├── .gitignore ├── README.md ├── server ├── userdb │ ├── userModel.js │ └── userController.js ├── mongoose.js └── server.js ├── package.json └── LICENSE /public/loginPage/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jquerytictactoe 2 | 3 | Application for playing tictactoe. 4 | 5 | Implements the use of login to keep track of the turns it took for X or O to be victorious! 6 | -------------------------------------------------------------------------------- /server/userdb/userModel.js: -------------------------------------------------------------------------------- 1 | //require in parts for accessing mongoose and making Schema 2 | const mongoose = require('mongoose'); 3 | const Schema = mongoose.Schema; 4 | 5 | const userSchema = new Schema ({ 6 | username: {type: String}, 7 | password: {type: String}, 8 | turnToVictory: {type: Number} 9 | }) 10 | 11 | module.exports = mongoose.model('User', userSchema); -------------------------------------------------------------------------------- /server/mongoose.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | //new mLab link by Alex 4 | const mongoUrl = 'mongodb://tictactoe:tictactoe@ds155820.mlab.com:55820/jquery-tic-tac-toe-db'; 5 | 6 | mongoose.connect(mongoUrl, function () { 7 | // WARNING: every connection will drop database, comment this out when ready to deploy 8 | //mongoose.connection.db.dropDatabase(); 9 | }); 10 | mongoose.connection.once('open', () => { 11 | console.log('Connected to Database'); 12 | }); -------------------------------------------------------------------------------- /public/game/style.css: -------------------------------------------------------------------------------- 1 | table { 2 | /*vertical-align: center;*/ 3 | border: 2px black solid; 4 | } 5 | 6 | .row td { 7 | border: 1px black solid; 8 | text-align: center; 9 | } 10 | 11 | .flex-container { 12 | display: flex; 13 | justify-content: space-around; 14 | } 15 | 16 | .flex-item { 17 | flex-grow: 1; 18 | } 19 | 20 | .flex-container1 { 21 | /*display: flex; 22 | justify-content: space-around;*/ 23 | } 24 | 25 | .square { 26 | height: 100px; 27 | width: 100px; 28 | font-size: 25px; 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jqueryTicTacToe", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "nodemon ./server/server.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "nodemon": "^1.11.0" 15 | }, 16 | "dependencies": { 17 | "body-parser": "^1.17.1", 18 | "express": "^4.15.2", 19 | "mongodb": "^2.2.25", 20 | "mongoose": "^4.9.3", 21 | "path": "^0.12.7" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | const path = require('path'); 4 | const bodyParser = require('body-parser'); 5 | const port = 8888; 6 | 7 | //connect mongoose with server 8 | require('./mongoose.js'); 9 | const userController = require('./userdb/userController'); 10 | 11 | app.use(bodyParser.urlencoded({ extended: false })) 12 | app.use(bodyParser.json()); 13 | 14 | //serve html, js, and css files 15 | app.use('/', express.static(__dirname + './../public/loginPage')); 16 | app.use('/game', express.static(__dirname + './../public/game')); 17 | 18 | //only here to make redirect work 19 | app.get('/', (req, res) => { return }); 20 | app.get('/game', (req, res) => { return }); 21 | 22 | //testing route to see if i can access users. 23 | app.get("/users", userController.getAllUser); 24 | 25 | //put into DB a new user 26 | app.post('/register', userController.createUser); 27 | 28 | //verify a existing user with DB 29 | app.post('/verify', userController.verifyUser); 30 | 31 | 32 | app.listen(port, () => { 33 | console.log(__dirname); 34 | console.log(`listening on port ${port}`); 35 | }) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Kangseon Cho 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /public/loginPage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | title 6 | 7 | 8 | 9 | 10 |
Welcome to LittleToy's JQuery Tic-Tac-Toe!
11 |
12 |
Please log-in
13 | 14 |
15 | Username:
16 | Password:
17 | 18 |
19 |


20 | New User? Sign Up! 21 |
22 |
23 | Username:
24 | Password:
25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /server/userdb/userController.js: -------------------------------------------------------------------------------- 1 | //bring in the model to use on this file 2 | const User = require('./userModel'); 3 | const path = require('path'); 4 | 5 | const userController = { 6 | //for finding all users in DB 7 | getAllUser(req, res) { 8 | User.find({}, (err, result) => { 9 | if (err) return res.send('did not find any users'); 10 | return res.status(200).json(result); 11 | }) 12 | }, 13 | 14 | //for posting a new user into the DB 15 | createUser(req, res, next) { 16 | console.log("i am req.body: ", req.body) 17 | User.create(req.body, (err, result) => { 18 | if (err) { 19 | return res.redirect('/'); 20 | } else { 21 | return res.redirect('/game'); 22 | } 23 | }) 24 | }, 25 | 26 | //get one user from DB then verify to see if that person is in the DB 27 | verifyUser(req, res) { 28 | User.findOne({username: req.body.username}, (err, result) => { 29 | if (req.body.password !== result.password) { 30 | return res.redirect('/'); 31 | } else { 32 | //should be redirecting to home page '/' 33 | return res.redirect('/game'); 34 | } 35 | }) 36 | } 37 | }; 38 | 39 | //export userController object for use 40 | module.exports = userController; -------------------------------------------------------------------------------- /public/game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | title 6 | 7 | 8 | 9 | 10 |
Let Us Play
11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |

32 |
The Winner is:
33 | 34 | 35 | -------------------------------------------------------------------------------- /public/game/main.js: -------------------------------------------------------------------------------- 1 | function initialize() { 2 | //will act as DB for the tic-tac-toe board... can check winner. 3 | let board = new Array(9); 4 | //keeps track of X and O 5 | let xo = 0; 6 | 7 | $('.square').on('click', () => { 8 | //should keep track of interchanging X and O 9 | if (xo % 2 === 0) { 10 | board[$(event.target).val()] = "X"; 11 | $(event.target).text("X"); 12 | $(event.target).css("background-color", randomColors()); 13 | //checks winner onClick 14 | winningCombo(); 15 | xo += 1; 16 | } else if (xo % 2 !== 0) { 17 | board[$(event.target).val()] = "O"; 18 | $(event.target).text("O"); 19 | $(event.target).css("background-color", randomColors()); 20 | //checks winner onClick 21 | winningCombo(); 22 | xo += 1; 23 | } 24 | // console.log(board) 25 | }) 26 | 27 | function winningCombo() { 28 | if (board[0] === 'X' && board[0] === board[1] && board[1] === board[2]) { $('#winner').text('X won!'); alert('X won!'); } 29 | else if (board[0] === 'O' && board[0] === board[1] && board[1] === board[2]) { $('#winner').text('O won!'); alert('O won!'); } 30 | 31 | else if (board[3] === 'X' && board[3] === board[4] && board[4] === board[5]) { $('#winner').text('X won!'); alert('X won!'); } 32 | else if (board[3] === 'O' && board[3] === board[4] && board[4] === board[5]) { $('#winner').text('O won!'); alert('O won!'); } 33 | 34 | else if (board[6] === 'X' && board[6] === board[7] && board[7] === board[8]) { $('#winner').text('X won!'); alert('X won!'); } 35 | else if (board[6] === 'O' && board[6] === board[7] && board[7] === board[8]) { $('#winner').text('O won!'); alert('O won!'); } 36 | 37 | else if (board[0] === 'X' && board[0] === board[3] && board[3] === board[6]) { $('#winner').text('X won!'); alert('X won!'); } 38 | else if (board[0] === 'O' && board[0] === board[3] && board[3] === board[6]) { $('#winner').text('O won!'); alert('O won!'); } 39 | 40 | else if (board[1] === 'X' && board[1] === board[4] && board[4] === board[7]) { $('#winner').text('X won!'); alert('X won!'); } 41 | else if (board[1] === 'O' && board[1] === board[4] && board[4] === board[7]) { $('#winner').text('O won!'); alert('O won!'); } 42 | 43 | else if (board[2] === 'X' && board[2] === board[5] && board[5] === board[8]) { $('#winner').text('X won!'); alert('X won!'); } 44 | else if (board[2] === 'O' && board[2] === board[5] && board[5] === board[8]) { $('#winner').text('O won!'); alert('O won!'); } 45 | 46 | else if (board[0] === 'X' && board[0] === board[4] && board[4] === board[8]) { $('#winner').text('X won!'); alert('X won!'); } 47 | else if (board[0] === 'O' && board[0] === board[4] && board[4] === board[8]) { $('#winner').text('O won!'); alert('O won!'); } 48 | 49 | else if (board[2] === 'X' && board[2] === board[4] && board[4] === board[6]) { $('#winner').text('X won!'); alert('X won!'); } 50 | else if (board[2] === 'O' && board[2] === board[4] && board[4] === board[6]) { $('#winner').text('O won!'); alert('O won!'); } 51 | 52 | else { console.log('keep playing...') } 53 | } 54 | 55 | //random color array for random color generation 56 | function randomColors() { 57 | let colorDex = ['a', 'b', 'c', 'd', 'e', 'f', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 58 | let result = "#"; 59 | for (let i = 0; i < 6; i += 1) { 60 | result += colorDex[Math.floor((Math.random() * colorDex.length))]; 61 | } 62 | return result; 63 | } 64 | 65 | } 66 | 67 | $(document).ready(initialize) --------------------------------------------------------------------------------