diff --git a/dist/bundle.js b/dist/bundle.js index d849a3b..f2851ad 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -107,7 +107,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Copy\", function() { return Copy; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TooltipBlur\", function() { return TooltipBlur; });\n/* harmony import */ var _classes_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./classes.js */ \"./src/classes.js\");\n/* harmony import */ var _services_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./services.js */ \"./src/services.js\");\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ \"./src/style.scss\");\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_scss__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\n\n\n\n/**\n * Initialize DOM variables\n */\nlet opponent = document.getElementById('opponent')\nlet message = document.getElementById('message')\nlet status = document.getElementById('status')\nlet tally = document.getElementById('tally')\nlet gameTable = document.getElementById('gameTable')\n\nlet instructions = document.getElementById('instructions')\nlet shareLink = document.getElementById('shareLink')\nlet tooltip = document.getElementById(\"tooltip\")\n\nlet opponentTileColor = \"#992222\"\nlet tileColor = \"#229922\"\n\nlet opponentName\n\nlet conn\nlet payload\nlet player = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"]()\nlet series = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Series\"]()\n\nshareLink.value = _getURL() + \"/game?sid=\" + series.getId()\n\nif (window.WebSocket) {\n conn = new WebSocket(\"wss://\" + document.location.host + \"/ws\")\n conn.onclose = function () {\n console.debug(\"Websocket Closed\")\n }\n conn.onmessage = function (evt) {\n let messages = evt.data.split('\\n')\n for (var i = 0; i < messages.length; i++) {\n let data = messages[i]\n try {\n data = JSON.parse(data)\n } catch (e) {\n console.debug(\"WebSocket Payload Parse Error\", data)\n }\n if (data.Sender === player.getId() && data.SeriesID === series.getId()) {\n console.debug(\"WebSocket Payload Ignored\", data)\n return\n } else if (data.SeriesID === series.getId()) {\n console.debug(\"WebSocket Payload Received\", Object.keys(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"]).find(k => _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"][k] === data.Event), data)\n switch (data.Event) {\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].ANYBODYHOME:\n _showGame()\n opponentName = data.Message\n opponent.innerText = \"Your opponent is: \" + opponentName\n series.setTurn(null)\n status.innerText = _possessivizer(opponentName) + \" Turn\"\n if (player.getName()) {\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].IAMHERE)\n .setMessage(player.getName())\n .setMatrix(series.getGameMatrix())\n .setMatrixHistory(series.getGameMatrixHistory())\n .serialize()\n conn.send(payload)\n } else {\n let nick = prompt(\"Nickname?\", \"\")\n player.setName(nick)\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].IAMHERE)\n .setMessage(player.getName())\n .setMatrix(series.getGameMatrix())\n .serialize()\n conn.send(payload)\n }\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].IAMHERE:\n _showGame()\n opponentName = data.Message\n opponent.innerText = \"Your opponent is: \" + opponentName\n series.setTurn(player.getId())\n status.innerText = \"Your Turn\"\n series.setGameMatrix(data.Matrix)\n series.setGameMatrixHistory(data.MatrixHistory)\n _renderGame()\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].CHAT:\n message.innerText = \"Your opponent says: \" + data.Message\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].MOVE:\n series.setGameMatrix(data.Matrix)\n series.setTurn(player.getId())\n status.innerText = \"Your Turn\"\n _renderGame()\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].NEW:\n series.logGame()\n _appendGameHistory()\n series.emptyGameMatrix()\n series.setTurn(player.getId())\n status.innerText = \"Your Turn\"\n _renderGame()\n break;\n }\n }\n }\n }\n conn.onopen = function (evt) {\n if (player.getName()) {\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].ANYBODYHOME)\n .setMessage(player.getName())\n .serialize()\n conn.send(payload)\n } else {\n let nick = prompt(\"Nickname?\", \"\")\n player.setName(nick)\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].ANYBODYHOME)\n .setMessage(player.getName())\n .serialize()\n conn.send(payload)\n }\n }\n} else {\n console.error(\"TicTacToe can only be played in a browser that supports a WebSocket connection.\")\n}\n\n\n/**\n * BEGIN Document Listeners\n */\n\nfunction tileListener (event) {\n let pos = event.target.id.split('_')[1]\n // validate its my turn\n if (series.getTurn() !== player.getId()) {\n console.debug(\"Not my turn\")\n event.preventDefault()\n return\n }\n // validate position available\n if (series.getGameMatrix()[pos]) {\n console.debug(\"Tile not free\")\n event.preventDefault()\n return\n }\n // set move\n let matrix = series.getGameMatrix()\n matrix[pos] = player.getId()\n series.setGameMatrix(matrix)\n series.setTurn(null)\n status.innerText = _possessivizer(opponentName) + \" Turn\"\n\n _renderGame()\n\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].MOVE)\n .setMatrix(series.getGameMatrix())\n .serialize()\n conn.send(payload)\n}\nif (gameTable) {\n document.querySelectorAll('.tile').forEach(element => {\n element.addEventListener('click', tileListener)\n })\n}\n\nfunction _getURL () {\n return document.location.protocol + '//' + document.location.host\n}\nfunction _showGame() {\n gameTable.classList.remove(\"hide\")\n instructions.classList.add(\"hide\")\n}\nfunction _renderGame () {\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.remove(\"dim\"))\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.remove(\"highlight\"))\n let matrix = series.getGameMatrix()\n for (let i = 0; i < matrix.length; i++) {\n let playerAt = matrix\n if (playerAt[i] === player.getId()) {\n document.getElementById('pos_' + i).style.backgroundColor = tileColor\n } else if (playerAt[i]) {\n document.getElementById('pos_' + i).style.backgroundColor = opponentTileColor\n } else {\n document.getElementById('pos_' + i).style.backgroundColor = \"unset\"\n }\n }\n let [me, positions] = _analyzeBoard()\n if (positions) {\n _highlightBoard(positions)\n }\n if (me) {\n status.innerText = \"YOU WIN!!!\"\n setTimeout(() => {\n let playagain = confirm(\"Play another round?\")\n if (playagain) {\n series.logGame()\n _appendGameHistory()\n series.emptyGameMatrix()\n _renderGame()\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].NEW)\n .serialize()\n conn.send(payload)\n }\n }, 1000)\n } else if (positions) {\n status.innerText = \"LOSER\"\n }\n if (_draw()) {\n if (series.getTurn() == player.getId()) {\n setTimeout(() => {\n let playagain = confirm(\"Play another round?\")\n if (playagain) {\n series.logGame()\n _appendGameHistory()\n series.emptyGameMatrix()\n _renderGame()\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].NEW)\n .serialize()\n conn.send(payload)\n }\n }, 1000)\n }\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.add(\"dim\"))\n status.innerText = \"Its a draw!\"\n }\n}\nfunction _appendGameHistory() {\n let gameTableClone = gameTable.cloneNode(true)\n gameTableClone.id = _services_js__WEBPACK_IMPORTED_MODULE_1__[\"generateRandom\"](6)\n gameTableClone.querySelectorAll(\"td\").forEach(el => {\n el.id = \"\"\n })\n // if (tally.childNodes.length >= 7) {\n // tally.firstChild.remove()\n // }\n tally.appendChild(gameTableClone)\n}\nfunction _analyzeBoard() {\n let matrix = series.getGameMatrix()\n for (let i = 0; i <= 8; i) {\n if (matrix[i] && (matrix[i] === matrix[i + 1] && matrix[i] === matrix[i + 2])) {\n return [matrix[i] == player.getId(), [i, i + 1, i + 2]]\n }\n i = i + 3\n }\n for (let i = 0; i <= 2; i++) {\n if (matrix[i] && (matrix[i] === matrix[i + 3] && matrix[i] === matrix[i + 6])) {\n return [matrix[i] == player.getId(), [i, i + 3, i + 6]]\n }\n }\n if (matrix[0] && (matrix[0] === matrix[4] && matrix[0] === matrix[8])) {\n return [matrix[0] == player.getId(), [0, 4, 8]]\n }\n if (matrix[2] && (matrix[2] === matrix[4] && matrix[2] === matrix[6])) {\n return [matrix[2] == player.getId(), [2, 4, 6]]\n }\n return [false, null]\n}\nfunction _draw() {\n let matrix = series.getGameMatrix()\n for (let i = 0; i < matrix.length; i++) {\n if (!matrix[i]) {\n return false\n }\n }\n return true\n}\nfunction _highlightBoard(positions) {\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.add(\"dim\"))\n for (let pos of positions) {\n document.querySelector('#gameTable #pos_' + pos).classList.add(\"highlight\")\n }\n}\nfunction _possessivizer (name) {\n if (name.charAt(name.length - 1) === \"s\") {\n return name + \"'\"\n } else {\n return name + \"'s\"\n }\n}\n\nfunction Copy (context) {\n context.select()\n document.execCommand(\"Copy\")\n tooltip.innerHTML = \"Copied!\"\n}\nfunction TooltipBlur () {\n tooltip.innerHTML = \"Copy\"\n}\n/*\n\nfunction _renderGame() {\n console.debug(\"Render Game Board\")\n _dimBoard(true)\n for (let i = 0; i < matrix.length; i++) {\n let playerAt = game.matrix\n if (playerAt[i] === player.getId()) {\n document.getElementById('pos_' + i).style.backgroundColor = tileColor\n } else if (playerAt[i] === game.getOpponent().getId()) {\n document.getElementById('pos_' + i).style.backgroundColor = opponentTileColor\n } else { \n document.getElementById('pos_' + i).style.backgroundColor = \"unset\"\n }\n }\n if (game.turn == player.getId()) {\n _yourTurn()\n } else {\n _theirTurn()\n }\n let [done, winner, positions] = _threeInARow()\n if (done) {\n gameOver = true\n game.winner = winner\n _dimBoard()\n _highlightBoard(positions)\n if (winner == player.getId()) {\n status.innerText = \"You Win!!!\"\n } else {\n status.innerText = \"You lose... \" + game.getOpponent().getName() + \" Wins!\"\n }\n }\n if (_draw()) {\n gameOver = true\n _dimBoard()\n status.innerText = \"Its a draw!\"\n }\n}\n\nfunction _safeCreate() {\n _createGame().then(resp => {\n console.debug(\"_createGame() success\", resp)\n game.setId(resp.id)\n game.player1 = new Player(resp.player1.id, resp.player1.name)\n console.debug(game)\n _showInstructions()\n }).catch(err => {\n console.debug(\"_createGame() err\", err)\n })\n}\nfunction _createGame () {\n let url = _getUrl()\n return HTTP.POST(`${url}/game`, JSON.stringify({ player1: player }))\n}\nfunction _updateGameOnServer(updatePayload) {\n let url = _getUrl() + \"/game/\" + game.getId()\n return HTTP.POST(url, JSON.stringify(updatePayload))\n}\nfunction _safeRetrieve() {\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new Player(resp.player1.id, resp.player1.name)\n game.player2 = new Player(resp.player2.id, resp.player2.name)\n game.matrix = resp.matrix || [null, null, null, null, null, null, null, null, null]\n game.turn = resp.turn\n _renderGame()\n console.debug(game)\n }).catch(err => {\n console.debug(\"_retrieveGameFromServer() error\", err)\n })\n}\nfunction _retrieveGameFromServer() {\n let url = _getUrl() + \"/game/\" + game.getId()\n return HTTP.GET(url)\n}\nfunction _yourTurn () {\n status.innerText = \"Your Turn\"\n game.turn = player.getId()\n}\nfunction _theirTurn () {\n status.innerText = _possessivizer(game.getOpponent().getName()) + \" Turn\"\n}\nfunction _threeInARow() {\n for (let i = 0; i <= 8; i) {\n if (game.matrix[i] && (game.matrix[i] === game.matrix[i + 1] && game.matrix[i] === game.matrix[i + 2]) ) {\n return [true, game.matrix[i], [i, i + 1, i + 2]]\n }\n i = i + 3\n }\n for (let i = 0; i <= 2; i++) {\n if (game.matrix[i] && (game.matrix[i] === game.matrix[i + 3] && game.matrix[i] === game.matrix[i + 6]) ) {\n return [true, game.matrix[i], [i, i + 3, i + 6]]\n }\n }\n if (game.matrix[0] && (game.matrix[0] === game.matrix[4] && game.matrix[0] === game.matrix[8])) {\n return [true, game.matrix[0], [0, 4, 8]]\n }\n if (game.matrix[2] && (game.matrix[2] === game.matrix[4] && game.matrix[2] === game.matrix[6])) {\n return [true, game.matrix[2], [2, 4, 6]]\n }\n return [false, null, null]\n}\nfunction _dimBoard(reverse) {\n if (reverse) {\n document.querySelectorAll('td').forEach(el => el.classList.remove(\"dim\"))\n document.querySelectorAll('td').forEach(el => el.classList.remove(\"highlight\"))\n } else {\n document.querySelectorAll('td').forEach(el => el.classList.add(\"dim\"))\n }\n}\n*/\n\n//# sourceURL=webpack://ui/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Copy\", function() { return Copy; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TooltipBlur\", function() { return TooltipBlur; });\n/* harmony import */ var _classes_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./classes.js */ \"./src/classes.js\");\n/* harmony import */ var _services_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./services.js */ \"./src/services.js\");\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ \"./src/style.scss\");\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_scss__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\n\n\n\n/**\n * Initialize DOM variables\n */\nlet opponent = document.getElementById('opponent')\nlet message = document.getElementById('message')\nlet status = document.getElementById('status')\nlet tally = document.getElementById('tally')\nlet gameTable = document.getElementById('gameTable')\n\nlet instructions = document.getElementById('instructions')\nlet shareLink = document.getElementById('shareLink')\nlet tooltip = document.getElementById(\"tooltip\")\n\nlet opponentTileColor = \"#992222\"\nlet tileColor = \"#229922\"\n\nlet opponentName\n\nlet conn\nlet payload\nlet player = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"]()\nlet series = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Series\"]()\n\nshareLink.value = _getURL() + \"/game?sid=\" + series.getId()\n\nif (window.WebSocket) {\n conn = new WebSocket(\"wss://\" + document.location.host + \"/ws\")\n conn.onclose = function () {\n console.debug(\"Websocket Closed\")\n }\n conn.onmessage = function (evt) {\n let messages = evt.data.split('\\n')\n for (var i = 0; i < messages.length; i++) {\n let data = messages[i]\n try {\n data = JSON.parse(data)\n } catch (e) {\n console.debug(\"WebSocket Payload Parse Error\", data)\n }\n if (data.Sender === player.getId() && data.SeriesID === series.getId()) {\n console.debug(\"WebSocket Payload Ignored\", data)\n return\n } else if (data.SeriesID === series.getId()) {\n console.debug(\"WebSocket Payload Received\", Object.keys(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"]).find(k => _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"][k] === data.Event), data)\n switch (data.Event) {\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].ANYBODYHOME:\n _showGame()\n opponentName = data.Message\n opponent.innerText = \"Your opponent is: \" + opponentName\n series.setTurn(null)\n status.innerText = _possessivizer(opponentName) + \" Turn\"\n if (player.getName()) {\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].IAMHERE)\n .setMessage(player.getName())\n .setMatrix(series.getGameMatrix())\n .setMatrixHistory(series.getGameMatrixHistory())\n .serialize()\n conn.send(payload)\n } else {\n let nick = prompt(\"Nickname?\", \"\")\n player.setName(nick)\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].IAMHERE)\n .setMessage(player.getName())\n .setMatrix(series.getGameMatrix())\n .serialize()\n conn.send(payload)\n }\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].IAMHERE:\n _showGame()\n opponentName = data.Message\n opponent.innerText = \"Your opponent is: \" + opponentName\n series.setTurn(player.getId())\n status.innerText = \"Your Turn\"\n series.setGameMatrix(data.Matrix)\n if (data.MatrixHistory) {\n series.setGameMatrixHistory(data.MatrixHistory)\n }\n _renderGame()\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].CHAT:\n message.innerText = \"Your opponent says: \" + data.Message\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].MOVE:\n series.setGameMatrix(data.Matrix)\n series.setTurn(player.getId())\n status.innerText = \"Your Turn\"\n _renderGame()\n break;\n case _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].NEW:\n series.logGame()\n _appendGameHistory()\n series.emptyGameMatrix()\n series.setTurn(player.getId())\n status.innerText = \"Your Turn\"\n _renderGame()\n break;\n }\n }\n }\n }\n conn.onopen = function (evt) {\n if (player.getName()) {\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].ANYBODYHOME)\n .setMessage(player.getName())\n .serialize()\n conn.send(payload)\n } else {\n let nick = prompt(\"Nickname?\", \"\")\n player.setName(nick)\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].ANYBODYHOME)\n .setMessage(player.getName())\n .serialize()\n conn.send(payload)\n }\n }\n} else {\n console.error(\"TicTacToe can only be played in a browser that supports a WebSocket connection.\")\n}\n\n\n/**\n * BEGIN Document Listeners\n */\n\nfunction tileListener (event) {\n let pos = event.target.id.split('_')[1]\n // validate its my turn\n if (series.getTurn() !== player.getId()) {\n console.debug(\"Not my turn\")\n event.preventDefault()\n return\n }\n // validate position available\n if (series.getGameMatrix()[pos]) {\n console.debug(\"Tile not free\")\n event.preventDefault()\n return\n }\n // set move\n let matrix = series.getGameMatrix()\n matrix[pos] = player.getId()\n series.setGameMatrix(matrix)\n series.setTurn(null)\n status.innerText = _possessivizer(opponentName) + \" Turn\"\n\n _renderGame()\n\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].MOVE)\n .setMatrix(series.getGameMatrix())\n .serialize()\n conn.send(payload)\n}\nif (gameTable) {\n document.querySelectorAll('.tile').forEach(element => {\n element.addEventListener('click', tileListener)\n })\n}\n\nfunction _getURL () {\n return document.location.protocol + '//' + document.location.host\n}\nfunction _showGame() {\n gameTable.classList.remove(\"hide\")\n instructions.classList.add(\"hide\")\n}\nfunction _renderGame () {\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.remove(\"dim\"))\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.remove(\"highlight\"))\n let matrix = series.getGameMatrix()\n for (let i = 0; i < matrix.length; i++) {\n let playerAt = matrix\n if (playerAt[i] === player.getId()) {\n document.getElementById('pos_' + i).style.backgroundColor = tileColor\n } else if (playerAt[i]) {\n document.getElementById('pos_' + i).style.backgroundColor = opponentTileColor\n } else {\n document.getElementById('pos_' + i).style.backgroundColor = \"unset\"\n }\n }\n let [me, positions] = _analyzeBoard()\n if (positions) {\n _highlightBoard(positions)\n }\n if (me) {\n status.innerText = \"YOU WIN!!!\"\n setTimeout(() => {\n let playagain = confirm(\"Play another round?\")\n if (playagain) {\n series.logGame()\n _appendGameHistory()\n series.emptyGameMatrix()\n _renderGame()\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].NEW)\n .serialize()\n conn.send(payload)\n }\n }, 1000)\n } else if (positions) {\n status.innerText = \"LOSER\"\n }\n if (_draw()) {\n if (series.getTurn() == player.getId()) {\n setTimeout(() => {\n let playagain = confirm(\"Play another round?\")\n if (playagain) {\n series.logGame()\n _appendGameHistory()\n series.emptyGameMatrix()\n _renderGame()\n payload = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Payload\"](series.getId(), player.getId())\n .setEventType(_classes_js__WEBPACK_IMPORTED_MODULE_0__[\"EventEnum\"].NEW)\n .serialize()\n conn.send(payload)\n }\n }, 1000)\n }\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.add(\"dim\"))\n status.innerText = \"Its a draw!\"\n }\n}\nfunction _appendGameHistory() {\n let gameTableClone = gameTable.cloneNode(true)\n gameTableClone.id = _services_js__WEBPACK_IMPORTED_MODULE_1__[\"generateRandom\"](6)\n gameTableClone.querySelectorAll(\"td\").forEach(el => {\n el.id = \"\"\n })\n // if (tally.childNodes.length >= 7) {\n // tally.firstChild.remove()\n // }\n tally.appendChild(gameTableClone)\n}\nfunction _analyzeBoard() {\n let matrix = series.getGameMatrix()\n for (let i = 0; i <= 8; i) {\n if (matrix[i] && (matrix[i] === matrix[i + 1] && matrix[i] === matrix[i + 2])) {\n return [matrix[i] == player.getId(), [i, i + 1, i + 2]]\n }\n i = i + 3\n }\n for (let i = 0; i <= 2; i++) {\n if (matrix[i] && (matrix[i] === matrix[i + 3] && matrix[i] === matrix[i + 6])) {\n return [matrix[i] == player.getId(), [i, i + 3, i + 6]]\n }\n }\n if (matrix[0] && (matrix[0] === matrix[4] && matrix[0] === matrix[8])) {\n return [matrix[0] == player.getId(), [0, 4, 8]]\n }\n if (matrix[2] && (matrix[2] === matrix[4] && matrix[2] === matrix[6])) {\n return [matrix[2] == player.getId(), [2, 4, 6]]\n }\n return [false, null]\n}\nfunction _draw() {\n let matrix = series.getGameMatrix()\n for (let i = 0; i < matrix.length; i++) {\n if (!matrix[i]) {\n return false\n }\n }\n return true\n}\nfunction _highlightBoard(positions) {\n document.querySelectorAll('#gameTable td').forEach(el => el.classList.add(\"dim\"))\n for (let pos of positions) {\n document.querySelector('#gameTable #pos_' + pos).classList.add(\"highlight\")\n }\n}\nfunction _possessivizer (name) {\n if (name.charAt(name.length - 1) === \"s\") {\n return name + \"'\"\n } else {\n return name + \"'s\"\n }\n}\n\nfunction Copy (context) {\n context.select()\n document.execCommand(\"Copy\")\n tooltip.innerHTML = \"Copied!\"\n}\nfunction TooltipBlur () {\n tooltip.innerHTML = \"Copy\"\n}\n/*\n\nfunction _renderGame() {\n console.debug(\"Render Game Board\")\n _dimBoard(true)\n for (let i = 0; i < matrix.length; i++) {\n let playerAt = game.matrix\n if (playerAt[i] === player.getId()) {\n document.getElementById('pos_' + i).style.backgroundColor = tileColor\n } else if (playerAt[i] === game.getOpponent().getId()) {\n document.getElementById('pos_' + i).style.backgroundColor = opponentTileColor\n } else { \n document.getElementById('pos_' + i).style.backgroundColor = \"unset\"\n }\n }\n if (game.turn == player.getId()) {\n _yourTurn()\n } else {\n _theirTurn()\n }\n let [done, winner, positions] = _threeInARow()\n if (done) {\n gameOver = true\n game.winner = winner\n _dimBoard()\n _highlightBoard(positions)\n if (winner == player.getId()) {\n status.innerText = \"You Win!!!\"\n } else {\n status.innerText = \"You lose... \" + game.getOpponent().getName() + \" Wins!\"\n }\n }\n if (_draw()) {\n gameOver = true\n _dimBoard()\n status.innerText = \"Its a draw!\"\n }\n}\n\nfunction _safeCreate() {\n _createGame().then(resp => {\n console.debug(\"_createGame() success\", resp)\n game.setId(resp.id)\n game.player1 = new Player(resp.player1.id, resp.player1.name)\n console.debug(game)\n _showInstructions()\n }).catch(err => {\n console.debug(\"_createGame() err\", err)\n })\n}\nfunction _createGame () {\n let url = _getUrl()\n return HTTP.POST(`${url}/game`, JSON.stringify({ player1: player }))\n}\nfunction _updateGameOnServer(updatePayload) {\n let url = _getUrl() + \"/game/\" + game.getId()\n return HTTP.POST(url, JSON.stringify(updatePayload))\n}\nfunction _safeRetrieve() {\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new Player(resp.player1.id, resp.player1.name)\n game.player2 = new Player(resp.player2.id, resp.player2.name)\n game.matrix = resp.matrix || [null, null, null, null, null, null, null, null, null]\n game.turn = resp.turn\n _renderGame()\n console.debug(game)\n }).catch(err => {\n console.debug(\"_retrieveGameFromServer() error\", err)\n })\n}\nfunction _retrieveGameFromServer() {\n let url = _getUrl() + \"/game/\" + game.getId()\n return HTTP.GET(url)\n}\nfunction _yourTurn () {\n status.innerText = \"Your Turn\"\n game.turn = player.getId()\n}\nfunction _theirTurn () {\n status.innerText = _possessivizer(game.getOpponent().getName()) + \" Turn\"\n}\nfunction _threeInARow() {\n for (let i = 0; i <= 8; i) {\n if (game.matrix[i] && (game.matrix[i] === game.matrix[i + 1] && game.matrix[i] === game.matrix[i + 2]) ) {\n return [true, game.matrix[i], [i, i + 1, i + 2]]\n }\n i = i + 3\n }\n for (let i = 0; i <= 2; i++) {\n if (game.matrix[i] && (game.matrix[i] === game.matrix[i + 3] && game.matrix[i] === game.matrix[i + 6]) ) {\n return [true, game.matrix[i], [i, i + 3, i + 6]]\n }\n }\n if (game.matrix[0] && (game.matrix[0] === game.matrix[4] && game.matrix[0] === game.matrix[8])) {\n return [true, game.matrix[0], [0, 4, 8]]\n }\n if (game.matrix[2] && (game.matrix[2] === game.matrix[4] && game.matrix[2] === game.matrix[6])) {\n return [true, game.matrix[2], [2, 4, 6]]\n }\n return [false, null, null]\n}\nfunction _dimBoard(reverse) {\n if (reverse) {\n document.querySelectorAll('td').forEach(el => el.classList.remove(\"dim\"))\n document.querySelectorAll('td').forEach(el => el.classList.remove(\"highlight\"))\n } else {\n document.querySelectorAll('td').forEach(el => el.classList.add(\"dim\"))\n }\n}\n*/\n\n//# sourceURL=webpack://ui/./src/index.js?"); /***/ }), diff --git a/src/index.js b/src/index.js index 219525c..a7507a6 100644 --- a/src/index.js +++ b/src/index.js @@ -81,7 +81,9 @@ if (window.WebSocket) { series.setTurn(player.getId()) status.innerText = "Your Turn" series.setGameMatrix(data.Matrix) - series.setGameMatrixHistory(data.MatrixHistory) + if (data.MatrixHistory) { + series.setGameMatrixHistory(data.MatrixHistory) + } _renderGame() break; case EventEnum.CHAT: