diff --git a/dist/bundle.js b/dist/bundle.js index c50e020..995e6ef 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1878,7 +1878,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/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! path */ \"./node_modules/path-browserify/index.js\");\n/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_3__);\n\n\n\n\n\n\n\n/**\n * Initialize DOM variables\n */\nlet name = document.getElementById('name')\nlet nameLabel = document.getElementById('nameLabel')\nlet playerH1 = document.getElementById('player')\nlet status = document.getElementById('status')\nlet gameTable = document.getElementById('gameTable')\nlet instructions = document.getElementById('instructions')\nlet shareLink = document.getElementById('shareLink')\nlet tooltip = document.getElementById(\"tooltip\")\nlet startGameForm = document.getElementById('startGameForm')\nlet joinGameForm = document.getElementById('joinGameForm')\nlet opponentTileColor = \"#992222\"\nlet tileColor = \"#229922\"\nlet gameOver = false\nlet firstgame = true\n\nlet conn\nlet player = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"]()\nconsole.debug(player)\nif (player.getName()) {\n name.value = player.getName()\n _hideConfig()\n _showGreeting()\n}\n\nlet game = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Game\"]()\nconsole.debug(game)\nif (game.getId()) {\n firstgame = false\n // we need to fetch the game data and resume the game\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player1.id, resp.player1.name)\n game.turn = resp.turn\n game.matrix = resp.matrix\n if (!resp.player2 || typeof resp.player2 === \"undefined\") {\n _updateGameOnServer({\n player2: player\n }).then(resp => {\n console.debug(\"_updateGame() success\", resp)\n console.debug(game)\n }).catch(err => {\n console.debug(\"_updateGame() err\", err)\n })\n } else {\n game.player2 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player2.id, resp.player2.name)\n }\n if (document.location.pathname != \"/join\") {\n _renderGame()\n _showGame()\n }\n console.debug(game)\n }).catch(err => {\n console.debug(\"_retrieveGameFromServer() error\", err)\n })\n}\n\n\nfunction Copy (context) {\n console.debug(context.innerText)\n context.select()\n document.execCommand(\"Copy\")\n tooltip.innerHTML = \"Copied!\"\n}\nfunction TooltipBlur () {\n tooltip.innerHTML = \"Copy\"\n}\n\n\nif (window.WebSocket) {\n conn = new WebSocket(\"ws://\" + document.location.host + \"/ws\")\n conn.onclose = function (evt) {\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.error(\"Error parsing\", data)\n }\n console.debug(\"Message\", data)\n if (data.sender.toUpperCase() === player.getId().toUpperCase()) {\n // console.debug(\"My own message received and ignored\")\n return\n }\n if (data.game_id.toUpperCase() !== game.getId().toUpperCase()) {\n // console.debug(\"Not my game\")\n return\n }\n switch(data.event) {\n case \"joining\":\n console.debug(\"Event: joining\")\n instructions.classList.add(\"hide\")\n _safeRetrieve()\n _showGame()\n break\n case \"new\":\n console.debug(\"Event: new\")\n let newGame = confirm(\"Would you like to play again?\")\n if (newGame) {\n history.replaceState(null, \"\", \"?id=\" + data.new_game_id)\n game.setId(data.new_game_id)\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player1.id, resp.player1.name)\n game.player2 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player2.id, resp.player2.name)\n game.matrix = resp.matrix\n game.turn = resp.turn\n console.debug(game)\n gameOver = false\n _renderGame()\n }).catch(err => {\n console.debug(\"_retrieveGameFromServer() error\", err)\n })\n }\n break\n case \"move\":\n console.debug(\"Event: move\")\n _safeRetrieve()\n break\n case \"winner\":\n console.debug(\"Event: winner\")\n game.winner = data.sender\n _safeRetrieve()\n break\n }\n }\n }\n} else {\n console.error(\"TicTacToe can only be played in a browser that supports a WebSocket connection.\")\n}\n\n/**\n * BEGIN Document Listeners\n */\nif (startGameForm) {\n startGameForm.addEventListener('submit', event => {\n event.preventDefault()\n if (!_validateForm()) {\n return false\n }\n if (firstgame) {\n _safeCreate()\n firstgame = false\n } else {\n _createGame().then(resp => {\n console.debug(\"_createGame() success\", resp)\n history.replaceState(null, \"\", \"?id=\" + resp.id)\n let old_game_id = game.getId()\n game.setId(resp.id)\n _updateGameOnServer({\n player2: game.player2,\n turn: game.player1.id == game.winner ? game.player2.id : game.player1.id,\n previous_game: old_game_id\n }).then(resp => {\n console.debug(\"_updateGameOnServer() success\", resp)\n gameOver = false\n game.turn = resp.turn\n game.matrix = resp.matrix\n conn.send(JSON.stringify({\n sender: player.getId(),\n game_id: old_game_id,\n event: \"new\",\n new_game_id: resp.id\n }))\n _renderGame()\n }).catch(err => {\n console.debug(\"_updateGameOnServer() err\", err)\n })\n }).catch(err => {\n console.debug(\"_createGame() err\", err)\n })\n }\n })\n}\nif (joinGameForm) {\n joinGameForm.addEventListener('submit', event => {\n event.preventDefault()\n if (!_validateForm()) {\n return false\n }\n conn.send(JSON.stringify({\n sender: player.getId(),\n game_id: game.getId(),\n event: \"joining\"\n }))\n joinGameForm.classList.add(\"hide\")\n _theirTurn()\n _showGame()\n })\n}\nfunction tileListener (event) {\n if (gameOver) {\n event.preventDefault()\n return false\n }\n let pos = event.target.id.split('_')[1]\n // validate its my turn\n if (game.turn !== player.getId()) {\n console.debug(\"Not my turn\")\n event.preventDefault()\n return\n }\n // validate position available\n if (game.matrix[pos]) {\n console.debug(\"Tile not free\")\n event.preventDefault()\n return\n }\n // set move\n game.matrix[pos] = player.getId()\n\n // calculate if 3 tiles in a row\n let [done, winner, positions] = _threeInARow()\n\n _updateGameOnServer({\n id: game.getId(),\n player1: game.player1,\n player2: game.player2,\n turn: game.player1.id == game.turn ? game.player2.id : game.player1.id,\n winner: winner,\n matrix: game.matrix\n }).then(resp => {\n console.debug(\"_updateGameOnServer() success\", resp)\n conn.send(JSON.stringify({\n sender: player.getId(),\n game_id: game.getId(),\n event: done ? \"winner\" : \"move\"\n }))\n game.turn = resp.turn\n _renderGame()\n }).catch(err => {\n console.debug(\"_updateGameOnServer() error\", err)\n })\n}\nif (gameTable) {\n document.querySelectorAll('.tile').forEach(element => {\n element.addEventListener('click', tileListener)\n })\n}\n/**\n * END Document Listeners\n */\nfunction _validateForm() {\n if (!name.value) {\n status.innerText = \"Name is required.\"\n status.style.color = \"#FF0000\"\n return false\n }\n status.style.color = \"#000000\"\n player.setName(name.value)\n _hideConfig()\n _showGreeting()\n return true\n}\n\nfunction _showInstructions() {\n shareLink.value = _getUrl() + \"/join?id=\" + game.getId()\n instructions.classList.remove(\"hide\")\n}\nfunction _hideInstructions () {\n instructions.classList.add(\"hide\")\n}\nfunction _showGreeting() {\n if (player.getName()) {\n playerH1.innerText = \"Hi \" + player.getName()\n playerH1.classList.remove(\"hide\")\n }\n}\nfunction _showGame () {\n gameTable.classList.remove(\"hide\")\n}\nfunction _resumeGame () {\n startGameForm.classList.add(\"hide\")\n _showGame()\n}\nfunction _hideConfig () {\n name.classList.add(\"hide\")\n nameLabel.classList.add(\"hide\")\n}\n\nfunction _renderGame() {\n console.debug(\"Render Game Board\")\n _dimBoard(true)\n for (let i = 0; i < game.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 _getUrl () {\n return document.location.protocol + '//' + document.location.host\n}\nfunction _safeCreate() {\n _createGame().then(resp => {\n console.debug(\"_createGame() success\", resp)\n game.setId(resp.id)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"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 _services_js__WEBPACK_IMPORTED_MODULE_1__[\"POST\"](`${url}/game`, JSON.stringify({ player1: player }))\n}\nfunction _updateGameOnServer(updatePayload) {\n let url = _getUrl() + \"/game/\" + game.getId()\n return _services_js__WEBPACK_IMPORTED_MODULE_1__[\"POST\"](url, JSON.stringify(updatePayload))\n}\nfunction _safeRetrieve() {\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player1.id, resp.player1.name)\n game.player2 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"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 _services_js__WEBPACK_IMPORTED_MODULE_1__[\"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 _possessivizer(name) {\n if (name.charAt(name.length - 1) === \"s\") {\n return name + \"'\"\n } else {\n return name + \"'s\"\n }\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 _draw() {\n for (let i = 0; i < game.matrix.length; i++) {\n if (!game.matrix[i]) {\n return false\n }\n }\n return true\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}\nfunction _highlightBoard (positions) {\n for (let pos of positions) {\n document.querySelector('#pos_' + pos).classList.add(\"highlight\")\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/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! path */ \"./node_modules/path-browserify/index.js\");\n/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_3__);\n\n\n\n\n\n\n\n/**\n * Initialize DOM variables\n */\nlet name = document.getElementById('name')\nlet nameLabel = document.getElementById('nameLabel')\nlet playerH1 = document.getElementById('player')\nlet status = document.getElementById('status')\nlet gameTable = document.getElementById('gameTable')\nlet instructions = document.getElementById('instructions')\nlet shareLink = document.getElementById('shareLink')\nlet tooltip = document.getElementById(\"tooltip\")\nlet startGameForm = document.getElementById('startGameForm')\nlet joinGameForm = document.getElementById('joinGameForm')\nlet opponentTileColor = \"#992222\"\nlet tileColor = \"#229922\"\nlet gameOver = false\nlet firstgame = true\n\nlet conn\nlet player = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"]()\nconsole.debug(player)\nif (player.getName()) {\n name.value = player.getName()\n _hideConfig()\n _showGreeting()\n}\n\nlet game = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Game\"]()\nconsole.debug(game)\nif (game.getId()) {\n firstgame = false\n // we need to fetch the game data and resume the game\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player1.id, resp.player1.name)\n game.turn = resp.turn\n game.matrix = resp.matrix\n if (!resp.player2 || typeof resp.player2 === \"undefined\") {\n _updateGameOnServer({\n player2: player\n }).then(resp => {\n console.debug(\"_updateGame() success\", resp)\n console.debug(game)\n }).catch(err => {\n console.debug(\"_updateGame() err\", err)\n })\n } else {\n game.player2 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player2.id, resp.player2.name)\n }\n if (document.location.pathname != \"/join\") {\n _renderGame()\n _showGame()\n }\n console.debug(game)\n }).catch(err => {\n console.debug(\"_retrieveGameFromServer() error\", err)\n })\n}\n\n\nfunction Copy (context) {\n console.debug(context.innerText)\n context.select()\n document.execCommand(\"Copy\")\n tooltip.innerHTML = \"Copied!\"\n}\nfunction TooltipBlur () {\n tooltip.innerHTML = \"Copy\"\n}\n\n\nif (window.WebSocket) {\n conn = new WebSocket(\"wss://\" + document.location.host + \"/ws\")\n conn.onclose = function (evt) {\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.error(\"Error parsing\", data)\n }\n console.debug(\"Message\", data)\n if (data.sender.toUpperCase() === player.getId().toUpperCase()) {\n // console.debug(\"My own message received and ignored\")\n return\n }\n if (data.game_id.toUpperCase() !== game.getId().toUpperCase()) {\n // console.debug(\"Not my game\")\n return\n }\n switch(data.event) {\n case \"joining\":\n console.debug(\"Event: joining\")\n instructions.classList.add(\"hide\")\n _safeRetrieve()\n _showGame()\n break\n case \"new\":\n console.debug(\"Event: new\")\n let newGame = confirm(\"Would you like to play again?\")\n if (newGame) {\n history.replaceState(null, \"\", \"?id=\" + data.new_game_id)\n game.setId(data.new_game_id)\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player1.id, resp.player1.name)\n game.player2 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player2.id, resp.player2.name)\n game.matrix = resp.matrix\n game.turn = resp.turn\n console.debug(game)\n gameOver = false\n _renderGame()\n }).catch(err => {\n console.debug(\"_retrieveGameFromServer() error\", err)\n })\n }\n break\n case \"move\":\n console.debug(\"Event: move\")\n _safeRetrieve()\n break\n case \"winner\":\n console.debug(\"Event: winner\")\n game.winner = data.sender\n _safeRetrieve()\n break\n }\n }\n }\n} else {\n console.error(\"TicTacToe can only be played in a browser that supports a WebSocket connection.\")\n}\n\n/**\n * BEGIN Document Listeners\n */\nif (startGameForm) {\n startGameForm.addEventListener('submit', event => {\n event.preventDefault()\n if (!_validateForm()) {\n return false\n }\n if (firstgame) {\n _safeCreate()\n firstgame = false\n } else {\n _createGame().then(resp => {\n console.debug(\"_createGame() success\", resp)\n history.replaceState(null, \"\", \"?id=\" + resp.id)\n let old_game_id = game.getId()\n game.setId(resp.id)\n _updateGameOnServer({\n player2: game.player2,\n turn: game.player1.id == game.winner ? game.player2.id : game.player1.id,\n previous_game: old_game_id\n }).then(resp => {\n console.debug(\"_updateGameOnServer() success\", resp)\n gameOver = false\n game.turn = resp.turn\n game.matrix = resp.matrix\n conn.send(JSON.stringify({\n sender: player.getId(),\n game_id: old_game_id,\n event: \"new\",\n new_game_id: resp.id\n }))\n _renderGame()\n }).catch(err => {\n console.debug(\"_updateGameOnServer() err\", err)\n })\n }).catch(err => {\n console.debug(\"_createGame() err\", err)\n })\n }\n })\n}\nif (joinGameForm) {\n joinGameForm.addEventListener('submit', event => {\n event.preventDefault()\n if (!_validateForm()) {\n return false\n }\n conn.send(JSON.stringify({\n sender: player.getId(),\n game_id: game.getId(),\n event: \"joining\"\n }))\n joinGameForm.classList.add(\"hide\")\n _theirTurn()\n _showGame()\n })\n}\nfunction tileListener (event) {\n if (gameOver) {\n event.preventDefault()\n return false\n }\n let pos = event.target.id.split('_')[1]\n // validate its my turn\n if (game.turn !== player.getId()) {\n console.debug(\"Not my turn\")\n event.preventDefault()\n return\n }\n // validate position available\n if (game.matrix[pos]) {\n console.debug(\"Tile not free\")\n event.preventDefault()\n return\n }\n // set move\n game.matrix[pos] = player.getId()\n\n // calculate if 3 tiles in a row\n let [done, winner, positions] = _threeInARow()\n\n _updateGameOnServer({\n id: game.getId(),\n player1: game.player1,\n player2: game.player2,\n turn: game.player1.id == game.turn ? game.player2.id : game.player1.id,\n winner: winner,\n matrix: game.matrix\n }).then(resp => {\n console.debug(\"_updateGameOnServer() success\", resp)\n conn.send(JSON.stringify({\n sender: player.getId(),\n game_id: game.getId(),\n event: done ? \"winner\" : \"move\"\n }))\n game.turn = resp.turn\n _renderGame()\n }).catch(err => {\n console.debug(\"_updateGameOnServer() error\", err)\n })\n}\nif (gameTable) {\n document.querySelectorAll('.tile').forEach(element => {\n element.addEventListener('click', tileListener)\n })\n}\n/**\n * END Document Listeners\n */\nfunction _validateForm() {\n if (!name.value) {\n status.innerText = \"Name is required.\"\n status.style.color = \"#FF0000\"\n return false\n }\n status.style.color = \"#000000\"\n player.setName(name.value)\n _hideConfig()\n _showGreeting()\n return true\n}\n\nfunction _showInstructions() {\n shareLink.value = _getUrl() + \"/join?id=\" + game.getId()\n instructions.classList.remove(\"hide\")\n}\nfunction _hideInstructions () {\n instructions.classList.add(\"hide\")\n}\nfunction _showGreeting() {\n if (player.getName()) {\n playerH1.innerText = \"Hi \" + player.getName()\n playerH1.classList.remove(\"hide\")\n }\n}\nfunction _showGame () {\n gameTable.classList.remove(\"hide\")\n}\nfunction _resumeGame () {\n startGameForm.classList.add(\"hide\")\n _showGame()\n}\nfunction _hideConfig () {\n name.classList.add(\"hide\")\n nameLabel.classList.add(\"hide\")\n}\n\nfunction _renderGame() {\n console.debug(\"Render Game Board\")\n _dimBoard(true)\n for (let i = 0; i < game.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 _getUrl () {\n return document.location.protocol + '//' + document.location.host\n}\nfunction _safeCreate() {\n _createGame().then(resp => {\n console.debug(\"_createGame() success\", resp)\n game.setId(resp.id)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"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 _services_js__WEBPACK_IMPORTED_MODULE_1__[\"POST\"](`${url}/game`, JSON.stringify({ player1: player }))\n}\nfunction _updateGameOnServer(updatePayload) {\n let url = _getUrl() + \"/game/\" + game.getId()\n return _services_js__WEBPACK_IMPORTED_MODULE_1__[\"POST\"](url, JSON.stringify(updatePayload))\n}\nfunction _safeRetrieve() {\n _retrieveGameFromServer().then(resp => {\n console.debug(\"_retrieveGameFromServer() success\", resp)\n game.player1 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"Player\"](resp.player1.id, resp.player1.name)\n game.player2 = new _classes_js__WEBPACK_IMPORTED_MODULE_0__[\"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 _services_js__WEBPACK_IMPORTED_MODULE_1__[\"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 _possessivizer(name) {\n if (name.charAt(name.length - 1) === \"s\") {\n return name + \"'\"\n } else {\n return name + \"'s\"\n }\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 _draw() {\n for (let i = 0; i < game.matrix.length; i++) {\n if (!game.matrix[i]) {\n return false\n }\n }\n return true\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}\nfunction _highlightBoard (positions) {\n for (let pos of positions) {\n document.querySelector('#pos_' + pos).classList.add(\"highlight\")\n }\n}\n\n//# sourceURL=webpack://ui/./src/index.js?"); /***/ }), diff --git a/src/index.js b/src/index.js index af213d0..59cfc5a 100644 --- a/src/index.js +++ b/src/index.js @@ -77,7 +77,7 @@ export function TooltipBlur () { if (window.WebSocket) { - conn = new WebSocket("ws://" + document.location.host + "/ws") + conn = new WebSocket("wss://" + document.location.host + "/ws") conn.onclose = function (evt) { console.debug("Websocket Closed") }