diff --git a/app/assets/javascripts/tictactoe.js b/app/assets/javascripts/tictactoe.js index d4da8daca..9442cf551 100644 --- a/app/assets/javascripts/tictactoe.js +++ b/app/assets/javascripts/tictactoe.js @@ -1 +1,180 @@ // Code your JavaScript / jQuery solution here + +var WINNING_COMBOS = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], + [1,4,7], [2,5,8], [0,4,8], [2,4,6]]; + +var turn = 0; +var currentGameId = null; + +$(document).ready(function() + { + attachListeners(); + } +); + +function player() +{ + if (turn % 2) + { + return 'O'; + } + else + { + return 'X'; + } +} + +function updateState(square) +{ + $(square).text (player()); +} + +function setMessage(message) +{ + $('#message').text(message); +} + +function checkWinner() +{ + var board = []; + var winnerFlag = false; + + $('td').text(function(index, square) {board.push(square)}); + //e.g ["X", "", "", "", "O", "", "", "X", ""] + + for ( var i = 0; i resetGame()); + $('#save').on('click', () => saveGame()); + $('#previous').on('click', () => listSavedGames()); +} +function updateState(square) +{ + $(square).text(player()); +} +function resetGame() +{ + turn = 0; + $('td').empty(); + currentGameId = null; + +} +function saveGame() +{ + var board = []; + + $('td').text(function(index, square) {board.push(square)}); + // console.log(currentGameId); + if(currentGameId) //update a game + { + // console.log("patch"); + $.ajax({ + type: 'PATCH', + url: `/games/${currentGameId}`, + data: {state: board} + }); + + } + else // save a new game and add reload the list of games so it includes the new one + { + // console.log("posting") + $.post('/games', {state: board}, function(game) + { + // console.log(game.data); + listSavedGames(); + currentGameId = game.data.id; + }); + + } + +} +function listSavedGames() +{ + $('#games').empty(); + $.get('/games', + (savedGames) => { + savedGames.data.forEach(gameData => + { + $('#games').append(`
`); + $(`#${gameData.id}`).on('click', () => loadGame(gameData.id)); + }); + } + ); +} +function loadGame(gameId) +{ + // console.log(`game ${gameId}`); + currentGameId = gameId; + + document.getElementById('message').innerHTML = ''; + + const req = new XMLHttpRequest; + req.open('GET', `/games/${gameId}`, true); + req.addEventListener('load', populateBoard); + req.send(); +} +function populateBoard() +{ + // console.log(this.responseText); + const data = JSON.parse(this.responseText).data; + + currentGameId = data.id; + const state = data.attributes.state; + turn = state.filter(Boolean).length; + + var index = 0; + for (var y = 0; y < 3; y++) + { + for (var x = 0; x < 3; x++) + { + document.querySelector(`[data-x="${x}"][data-y="${y}"]`).innerHTML = state[index]; + index++; + } + } + + if (!checkWinner() && turn === 9) + { + setMessage('Tie game.'); + } + +} \ No newline at end of file diff --git a/db/schema.rb b/db/schema.rb index 349d9bd29..c9a8a85b7 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -1,4 +1,3 @@ -# encoding: UTF-8 # This file is auto-generated from the current state of the database. Instead # of editing this file, please use the migrations feature of Active Record to # incrementally modify your database, and then regenerate this schema definition. diff --git a/package-lock.json b/package-lock.json index 14c13e22a..935439789 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=", "dev": true, "requires": { - "acorn": "4.0.13" + "acorn": "^4.0.4" } }, "ajv": { @@ -37,8 +37,8 @@ "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", "dev": true, "requires": { - "co": "4.6.0", - "json-stable-stringify": "1.0.1" + "co": "^4.6.0", + "json-stable-stringify": "^1.0.1" } }, "amdefine": { @@ -103,7 +103,7 @@ "dev": true, "optional": true, "requires": { - "tweetnacl": "0.14.5" + "tweetnacl": "^0.14.3" } }, "boom": { @@ -112,7 +112,7 @@ "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, "requires": { - "hoek": "2.16.3" + "hoek": "2.x.x" } }, "brace-expansion": { @@ -121,7 +121,7 @@ "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -143,12 +143,12 @@ "integrity": "sha1-MxoDkbVcOvh0CunDt0WLwcOAXm0=", "dev": true, "requires": { - "assertion-error": "1.0.2", - "check-error": "1.0.2", - "deep-eql": "2.0.2", - "get-func-name": "2.0.0", - "pathval": "1.1.0", - "type-detect": "4.0.3" + "assertion-error": "^1.0.1", + "check-error": "^1.0.1", + "deep-eql": "^2.0.1", + "get-func-name": "^2.0.0", + "pathval": "^1.0.0", + "type-detect": "^4.0.0" } }, "check-error": { @@ -169,7 +169,7 @@ "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", "dev": true, "requires": { - "delayed-stream": "1.0.0" + "delayed-stream": "~1.0.0" } }, "commander": { @@ -178,7 +178,7 @@ "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=", "dev": true, "requires": { - "graceful-readlink": "1.0.1" + "graceful-readlink": ">= 1.0.0" } }, "concat-map": { @@ -199,7 +199,7 @@ "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", "dev": true, "requires": { - "boom": "2.10.1" + "boom": "2.x.x" } }, "cssom": { @@ -214,7 +214,7 @@ "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=", "dev": true, "requires": { - "cssom": "0.3.2" + "cssom": "0.3.x" } }, "dashdash": { @@ -223,7 +223,7 @@ "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", "dev": true, "requires": { - "assert-plus": "1.0.0" + "assert-plus": "^1.0.0" }, "dependencies": { "assert-plus": { @@ -249,7 +249,7 @@ "integrity": "sha1-sbrAblbwp2d3aG1Qyf63XC7XZ5o=", "dev": true, "requires": { - "type-detect": "3.0.0" + "type-detect": "^3.0.0" }, "dependencies": { "type-detect": { @@ -285,7 +285,7 @@ "dev": true, "optional": true, "requires": { - "jsbn": "0.1.1" + "jsbn": "~0.1.0" } }, "escape-string-regexp": { @@ -300,11 +300,11 @@ "integrity": "sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=", "dev": true, "requires": { - "esprima": "2.7.3", - "estraverse": "1.9.3", - "esutils": "2.0.2", - "optionator": "0.8.2", - "source-map": "0.2.0" + "esprima": "^2.7.1", + "estraverse": "^1.9.1", + "esutils": "^2.0.2", + "optionator": "^0.8.1", + "source-map": "~0.2.0" } }, "esprima": { @@ -355,9 +355,9 @@ "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", "dev": true, "requires": { - "asynckit": "0.4.0", - "combined-stream": "1.0.5", - "mime-types": "2.1.15" + "asynckit": "^0.4.0", + "combined-stream": "^1.0.5", + "mime-types": "^2.1.12" } }, "formatio": { @@ -366,7 +366,7 @@ "integrity": "sha1-87IWfZBoxGmKjVH092CjmlTYGOs=", "dev": true, "requires": { - "samsam": "1.2.1" + "samsam": "1.x" } }, "fs.realpath": { @@ -387,7 +387,7 @@ "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", "dev": true, "requires": { - "assert-plus": "1.0.0" + "assert-plus": "^1.0.0" }, "dependencies": { "assert-plus": { @@ -404,12 +404,12 @@ "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.2", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "graceful-readlink": { @@ -436,8 +436,8 @@ "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", "dev": true, "requires": { - "ajv": "4.11.8", - "har-schema": "1.0.5" + "ajv": "^4.9.1", + "har-schema": "^1.0.5" } }, "has-flag": { @@ -452,10 +452,10 @@ "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", "dev": true, "requires": { - "boom": "2.10.1", - "cryptiles": "2.0.5", - "hoek": "2.16.3", - "sntp": "1.0.9" + "boom": "2.x.x", + "cryptiles": "2.x.x", + "hoek": "2.x.x", + "sntp": "1.x.x" } }, "hoek": { @@ -470,7 +470,7 @@ "integrity": "sha1-eb96eF6klf5mFl5zQVPzY/9UN9o=", "dev": true, "requires": { - "whatwg-encoding": "1.0.1" + "whatwg-encoding": "^1.0.1" } }, "http-signature": { @@ -479,9 +479,9 @@ "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", "dev": true, "requires": { - "assert-plus": "0.2.0", - "jsprim": "1.4.0", - "sshpk": "1.13.1" + "assert-plus": "^0.2.0", + "jsprim": "^1.2.2", + "sshpk": "^1.7.0" } }, "iconv-lite": { @@ -496,8 +496,8 @@ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -543,27 +543,27 @@ "integrity": "sha512-vKKDU+Xh9O6VgzdOYf5Rmqbgp+Yz4YTBC19gaLtctXch33EmNucA395KJGGboldafPW1vv9XLuiprO4+wXfl0g==", "dev": true, "requires": { - "abab": "1.0.3", - "acorn": "4.0.13", - "acorn-globals": "3.1.0", - "array-equal": "1.0.0", - "content-type-parser": "1.0.1", - "cssom": "0.3.2", - "cssstyle": "0.2.37", - "escodegen": "1.8.1", - "html-encoding-sniffer": "1.0.1", - "nwmatcher": "1.4.1", - "parse5": "3.0.2", - "pn": "1.0.0", - "request": "2.81.0", - "request-promise-native": "1.0.4", - "sax": "1.2.4", - "symbol-tree": "3.2.2", - "tough-cookie": "2.3.2", - "webidl-conversions": "4.0.1", - "whatwg-encoding": "1.0.1", - "whatwg-url": "6.1.0", - "xml-name-validator": "2.0.1" + "abab": "^1.0.3", + "acorn": "^4.0.4", + "acorn-globals": "^3.1.0", + "array-equal": "^1.0.0", + "content-type-parser": "^1.0.1", + "cssom": ">= 0.3.2 < 0.4.0", + "cssstyle": ">= 0.2.37 < 0.3.0", + "escodegen": "^1.6.1", + "html-encoding-sniffer": "^1.0.1", + "nwmatcher": "^1.4.1", + "parse5": "^3.0.2", + "pn": "^1.0.0", + "request": "^2.79.0", + "request-promise-native": "^1.0.3", + "sax": "^1.2.1", + "symbol-tree": "^3.2.1", + "tough-cookie": "^2.3.2", + "webidl-conversions": "^4.0.0", + "whatwg-encoding": "^1.0.1", + "whatwg-url": "^6.1.0", + "xml-name-validator": "^2.0.1" } }, "json-schema": { @@ -578,7 +578,7 @@ "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", "dev": true, "requires": { - "jsonify": "0.0.0" + "jsonify": "~0.0.0" } }, "json-stringify-safe": { @@ -625,8 +625,8 @@ "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", "dev": true, "requires": { - "prelude-ls": "1.1.2", - "type-check": "0.3.2" + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" } }, "lodash": { @@ -641,8 +641,8 @@ "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=", "dev": true, "requires": { - "lodash._basecopy": "3.0.1", - "lodash.keys": "3.1.2" + "lodash._basecopy": "^3.0.0", + "lodash.keys": "^3.0.0" } }, "lodash._basecopy": { @@ -675,9 +675,9 @@ "integrity": "sha1-1/KEnw29p+BGgruM1yqwIkYd6+c=", "dev": true, "requires": { - "lodash._baseassign": "3.2.0", - "lodash._basecreate": "3.0.3", - "lodash._isiterateecall": "3.0.9" + "lodash._baseassign": "^3.0.0", + "lodash._basecreate": "^3.0.0", + "lodash._isiterateecall": "^3.0.0" } }, "lodash.isarguments": { @@ -698,9 +698,9 @@ "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", "dev": true, "requires": { - "lodash._getnative": "3.9.1", - "lodash.isarguments": "3.1.0", - "lodash.isarray": "3.0.4" + "lodash._getnative": "^3.0.0", + "lodash.isarguments": "^3.0.0", + "lodash.isarray": "^3.0.0" } }, "lodash.sortby": { @@ -727,7 +727,7 @@ "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=", "dev": true, "requires": { - "mime-db": "1.27.0" + "mime-db": "~1.27.0" } }, "minimatch": { @@ -736,7 +736,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -779,10 +779,10 @@ "integrity": "sha1-XNSOBNvnZX1+mXiAxMzQIar1GqU=", "dev": true, "requires": { - "debug": "0.7.4", - "is-string": "1.0.4", - "mkdirp": "0.5.1", - "object-assign": "4.1.1" + "debug": "~0.7.4", + "is-string": "^1.0.4", + "mkdirp": "^0.5.1", + "object-assign": "^4.1.1" }, "dependencies": { "debug": { @@ -829,7 +829,7 @@ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "optionator": { @@ -838,12 +838,12 @@ "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=", "dev": true, "requires": { - "deep-is": "0.1.3", - "fast-levenshtein": "2.0.6", - "levn": "0.3.0", - "prelude-ls": "1.1.2", - "type-check": "0.3.2", - "wordwrap": "1.0.0" + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.4", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "wordwrap": "~1.0.0" } }, "parse5": { @@ -852,7 +852,7 @@ "integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=", "dev": true, "requires": { - "@types/node": "6.0.83" + "@types/node": "^6.0.46" } }, "path-is-absolute": { @@ -912,28 +912,28 @@ "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=", "dev": true, "requires": { - "aws-sign2": "0.6.0", - "aws4": "1.6.0", - "caseless": "0.12.0", - "combined-stream": "1.0.5", - "extend": "3.0.1", - "forever-agent": "0.6.1", - "form-data": "2.1.4", - "har-validator": "4.2.1", - "hawk": "3.1.3", - "http-signature": "1.1.1", - "is-typedarray": "1.0.0", - "isstream": "0.1.2", - "json-stringify-safe": "5.0.1", - "mime-types": "2.1.15", - "oauth-sign": "0.8.2", - "performance-now": "0.2.0", - "qs": "6.4.0", - "safe-buffer": "5.1.1", - "stringstream": "0.0.5", - "tough-cookie": "2.3.2", - "tunnel-agent": "0.6.0", - "uuid": "3.1.0" + "aws-sign2": "~0.6.0", + "aws4": "^1.2.1", + "caseless": "~0.12.0", + "combined-stream": "~1.0.5", + "extend": "~3.0.0", + "forever-agent": "~0.6.1", + "form-data": "~2.1.1", + "har-validator": "~4.2.1", + "hawk": "~3.1.3", + "http-signature": "~1.1.0", + "is-typedarray": "~1.0.0", + "isstream": "~0.1.2", + "json-stringify-safe": "~5.0.1", + "mime-types": "~2.1.7", + "oauth-sign": "~0.8.1", + "performance-now": "^0.2.0", + "qs": "~6.4.0", + "safe-buffer": "^5.0.1", + "stringstream": "~0.0.4", + "tough-cookie": "~2.3.0", + "tunnel-agent": "^0.6.0", + "uuid": "^3.0.0" } }, "request-promise-core": { @@ -942,7 +942,7 @@ "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=", "dev": true, "requires": { - "lodash": "4.17.4" + "lodash": "^4.13.1" } }, "request-promise-native": { @@ -952,8 +952,8 @@ "dev": true, "requires": { "request-promise-core": "1.1.1", - "stealthy-require": "1.1.1", - "tough-cookie": "2.3.2" + "stealthy-require": "^1.1.0", + "tough-cookie": ">=2.3.0" } }, "safe-buffer": { @@ -980,14 +980,14 @@ "integrity": "sha1-Md4G/tj7o6Zx5XbdltClhjeW8lw=", "dev": true, "requires": { - "diff": "3.2.0", + "diff": "^3.1.0", "formatio": "1.2.0", - "lolex": "1.6.0", - "native-promise-only": "0.8.1", - "path-to-regexp": "1.7.0", - "samsam": "1.2.1", + "lolex": "^1.6.0", + "native-promise-only": "^0.8.1", + "path-to-regexp": "^1.7.0", + "samsam": "^1.1.3", "text-encoding": "0.6.4", - "type-detect": "4.0.3" + "type-detect": "^4.0.0" } }, "sntp": { @@ -996,7 +996,7 @@ "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", "dev": true, "requires": { - "hoek": "2.16.3" + "hoek": "2.x.x" } }, "source-map": { @@ -1006,7 +1006,7 @@ "dev": true, "optional": true, "requires": { - "amdefine": "1.0.1" + "amdefine": ">=0.0.4" } }, "sshpk": { @@ -1015,14 +1015,14 @@ "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=", "dev": true, "requires": { - "asn1": "0.2.3", - "assert-plus": "1.0.0", - "bcrypt-pbkdf": "1.0.1", - "dashdash": "1.14.1", - "ecc-jsbn": "0.1.1", - "getpass": "0.1.7", - "jsbn": "0.1.1", - "tweetnacl": "0.14.5" + "asn1": "~0.2.3", + "assert-plus": "^1.0.0", + "bcrypt-pbkdf": "^1.0.0", + "dashdash": "^1.12.0", + "ecc-jsbn": "~0.1.1", + "getpass": "^0.1.1", + "jsbn": "~0.1.0", + "tweetnacl": "~0.14.0" }, "dependencies": { "assert-plus": { @@ -1051,7 +1051,7 @@ "integrity": "sha1-cqJiiU2dQIuVbKBf83su2KbiotU=", "dev": true, "requires": { - "has-flag": "1.0.0" + "has-flag": "^1.0.0" } }, "symbol-tree": { @@ -1072,7 +1072,7 @@ "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=", "dev": true, "requires": { - "punycode": "1.4.1" + "punycode": "^1.4.1" } }, "tr46": { @@ -1087,7 +1087,7 @@ "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", "dev": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "^5.0.1" } }, "tweetnacl": { @@ -1103,7 +1103,7 @@ "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", "dev": true, "requires": { - "prelude-ls": "1.1.2" + "prelude-ls": "~1.1.2" } }, "type-detect": { @@ -1148,9 +1148,9 @@ "integrity": "sha1-X8gnm5PXVIO5ztiyYjmFSEehhXg=", "dev": true, "requires": { - "lodash.sortby": "4.7.0", - "tr46": "0.0.3", - "webidl-conversions": "4.0.1" + "lodash.sortby": "^4.7.0", + "tr46": "~0.0.3", + "webidl-conversions": "^4.0.1" } }, "wordwrap": { diff --git a/test/tictactoeTest.js b/test/tictactoeTest.js index 9c5f90b61..1f50c5a0d 100644 --- a/test/tictactoeTest.js +++ b/test/tictactoeTest.js @@ -506,8 +506,8 @@ describe('AJAX interactions with the Rails API', () => { expect(requests[0].method).to.equal('POST'); expect(requests[0].url).to.equal('/games'); - expect(requests[1].method).to.equal('PATCH'); - expect(requests[1].url).to.equal('/games/1'); + expect(requests[2].method).to.equal('PATCH'); + expect(requests[2].url).to.equal('/games/1'); }); }); }); @@ -558,8 +558,8 @@ describe('AJAX interactions with the Rails API', () => { saveButton.click(); - expect(requests[1].method).to.equal('POST'); - expect(requests[1].url).to.equal('/games'); + expect(requests[2].method).to.equal('POST'); + expect(requests[2].url).to.equal('/games'); }); }); });