From e73745c23f746a84ed46ccdfc0e7d92fef8b4e38 Mon Sep 17 00:00:00 2001 From: Andrio Celos Date: Thu, 6 Oct 2022 14:42:02 +1100 Subject: [PATCH] Move WebSocket code to app.ts --- .../src/Pages/PreGamePage.ts | 126 +---------------- TableturfBattleClient/src/app.ts | 131 ++++++++++++++++++ 2 files changed, 132 insertions(+), 125 deletions(-) diff --git a/TableturfBattleClient/src/Pages/PreGamePage.ts b/TableturfBattleClient/src/Pages/PreGamePage.ts index d7261c6..7d6c5e9 100644 --- a/TableturfBattleClient/src/Pages/PreGamePage.ts +++ b/TableturfBattleClient/src/Pages/PreGamePage.ts @@ -78,131 +78,7 @@ function getGameInfo(gameID: string, myPlayerIndex: number | null) { window.location.hash = `#${gameID}`; initLobbyPage(window.location.toString()); - const webSocket = new WebSocket(`${config.apiBaseUrl.replace(/(http)(s)?\:\/\//, 'ws$2://')}/websocket?gameID=${gameID}&clientToken=${clientToken}`); - webSocket.addEventListener('open', e => { - const request2 = new XMLHttpRequest(); - request2.open('GET', `${config.apiBaseUrl}/games/${gameID}/playerData/${clientToken}`); - request2.addEventListener('load', e => { - if (request2.status == 200) { - const response = JSON.parse(request2.responseText); - const playerData = response.playerData as PlayerData | null; - - currentGame = { - id: gameID, - me: playerData != null ? { playerIndex: playerData.playerIndex, hand: playerData.hand?.map(Card.fromJson) || null, deck: playerData.deck?.map(Card.fromJson) || null, cardsUsed: playerData.cardsUsed, move: playerData.move } : null, - players: response.game.players, - webSocket: webSocket - }; - - for (const li of playerListItems) - playerList.removeChild(li); - playerListItems.splice(0); - for (let i = 0; i < 2; i++) { - var el = document.createElement('li'); - el.innerText = i < currentGame.players.length ? currentGame.players[i].name : 'Waiting...'; - playerListItems.push(el); - playerList.appendChild(el); - } - - onGameStateChange(response.game, playerData); - - for (let i = 0; i < response.game.players.length; i++) { - if (response.game.players[i].isReady) - showReady(i); - } - - if (playerData) { - myPlayerIndex = playerData.playerIndex; - if (playerData.move) { - canPlay = false; - board.autoHighlight = false; - if (!playerData.move.isPass) { - const move = playerData.move as PlayMove; - board.cardPlaying = Card.fromJson(move.card); - board.highlightX = move.x; - board.highlightY = move.y; - board.cardRotation = move.rotation; - board.specialAttack = move.isSpecialAttack; - board.refreshHighlight(); - } - } - } - } - }); - request2.send(); - }); - webSocket.addEventListener('message', e => { - if (currentGame == null) return; - let s = e.data as string; - console.log(`>> ${s}`); - if (s) { - let payload = JSON.parse(s); - if (payload.event == 'join') { - if (payload.data.playerIndex == currentGame.players.length) { - currentGame.players.push(payload.data.player); - playerListItems[payload.data.playerIndex].innerText = payload.data.player.name; - updatePlayerListItem(payload.data.playerIndex); - } else - communicationError(); - } else if (payload.event == 'playerReady') { - currentGame.players[payload.data.playerIndex].isReady = true; - updatePlayerListItem(payload.data.playerIndex); - - if (playContainers[payload.data.playerIndex].getElementsByTagName('div').length == 0) { - showReady(payload.data.playerIndex); - } - } else if (payload.event == 'stateChange') { - clearReady(); - onGameStateChange(payload.data, payload.playerData); - } else if (payload.event == 'turn' || payload.event == 'gameEnd') { - clearReady(); - board.autoHighlight = false; - showSection('game'); - - (async () => { - let anySpecialAttacks = false; - // Show the cards that were played. - clearPlayContainers(); - for (let i = 0; i < currentGame.players.length; i++) { - const player = currentGame.players[i]; - player.specialPoints = payload.data.game.players[i].specialPoints; - player.totalSpecialPoints = payload.data.game.players[i].totalSpecialPoints; - player.passes = payload.data.game.players[i].passes; - - const move = payload.data.moves[i]; - const button = new CardButton('checkbox', move.card); - if (move.isSpecialAttack) { - anySpecialAttacks = true; - button.element.classList.add('specialAttack'); - } else if (move.isPass) { - const el = document.createElement('div'); - el.className = 'passLabel'; - el.innerText = 'Pass'; - button.element.appendChild(el); - } - button.inputElement.hidden = true; - playContainers[i].append(button.element); - } - - await playInkAnimations(payload.data, anySpecialAttacks); - updateHand(payload.playerData.hand); - turnNumberLabel.setTurnNumber(payload.data.game.turnNumber); - clearPlayContainers(); - if (payload.event == 'gameEnd') { - document.getElementById('gameSection')!.classList.add('gameEnded'); - showResult(); - } else { - canPlay = myPlayerIndex != null; - board.autoHighlight = canPlay; - setupControlsForPlay(); - } - })(); - } - } - }); - webSocket.addEventListener('close', e => { - document.getElementById('errorModal')!.hidden = false; - }); + myPlayerIndex = setupWebSocket(gameID, myPlayerIndex); } function backPreGameForm() { diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts index cdf76f0..a4ae41e 100644 --- a/TableturfBattleClient/src/app.ts +++ b/TableturfBattleClient/src/app.ts @@ -73,6 +73,137 @@ function communicationError() { document.getElementById('errorModal')!.hidden = false; } +function setupWebSocket(gameID: string, myPlayerIndex: number | null) { + const webSocket = new WebSocket(`${config.apiBaseUrl.replace(/(http)(s)?\:\/\//, 'ws$2://')}/websocket?gameID=${gameID}&clientToken=${clientToken}`); + webSocket.addEventListener('open', e => { + const request2 = new XMLHttpRequest(); + request2.open('GET', `${config.apiBaseUrl}/games/${gameID}/playerData/${clientToken}`); + request2.addEventListener('load', e => { + if (request2.status == 200) { + const response = JSON.parse(request2.responseText); + const playerData = response.playerData as PlayerData | null; + + currentGame = { + id: gameID, + me: playerData != null ? { playerIndex: playerData.playerIndex, hand: playerData.hand?.map(Card.fromJson) || null, deck: playerData.deck?.map(Card.fromJson) || null, cardsUsed: playerData.cardsUsed, move: playerData.move } : null, + players: response.game.players, + webSocket: webSocket + }; + + for (const li of playerListItems) + playerList.removeChild(li); + playerListItems.splice(0); + for (let i = 0; i < 2; i++) { + var el = document.createElement('li'); + el.innerText = i < currentGame.players.length ? currentGame.players[i].name : 'Waiting...'; + playerListItems.push(el); + playerList.appendChild(el); + } + + onGameStateChange(response.game, playerData); + + for (let i = 0; i < response.game.players.length; i++) { + if (response.game.players[i].isReady) + showReady(i); + } + + if (playerData) { + myPlayerIndex = playerData.playerIndex; + if (playerData.move) { + canPlay = false; + board.autoHighlight = false; + if (!playerData.move.isPass) { + const move = playerData.move as PlayMove; + board.cardPlaying = Card.fromJson(move.card); + board.highlightX = move.x; + board.highlightY = move.y; + board.cardRotation = move.rotation; + board.specialAttack = move.isSpecialAttack; + board.refreshHighlight(); + } + } + } + } + }); + request2.send(); + }); + webSocket.addEventListener('message', e => { + if (currentGame == null) + return; + let s = e.data as string; + console.log(`>> ${s}`); + if (s) { + let payload = JSON.parse(s); + if (payload.event == 'join') { + if (payload.data.playerIndex == currentGame.players.length) { + currentGame.players.push(payload.data.player); + playerListItems[payload.data.playerIndex].innerText = payload.data.player.name; + updatePlayerListItem(payload.data.playerIndex); + } + else + communicationError(); + } else if (payload.event == 'playerReady') { + currentGame.players[payload.data.playerIndex].isReady = true; + updatePlayerListItem(payload.data.playerIndex); + + if (playContainers[payload.data.playerIndex].getElementsByTagName('div').length == 0) { + showReady(payload.data.playerIndex); + } + } else if (payload.event == 'stateChange') { + clearReady(); + onGameStateChange(payload.data, payload.playerData); + } else if (payload.event == 'turn' || payload.event == 'gameEnd') { + clearReady(); + board.autoHighlight = false; + showSection('game'); + + (async () => { + let anySpecialAttacks = false; + // Show the cards that were played. + clearPlayContainers(); + for (let i = 0; i < currentGame.players.length; i++) { + const player = currentGame.players[i]; + player.specialPoints = payload.data.game.players[i].specialPoints; + player.totalSpecialPoints = payload.data.game.players[i].totalSpecialPoints; + player.passes = payload.data.game.players[i].passes; + + const move = payload.data.moves[i]; + const button = new CardButton('checkbox', move.card); + if (move.isSpecialAttack) { + anySpecialAttacks = true; + button.element.classList.add('specialAttack'); + } else if (move.isPass) { + const el = document.createElement('div'); + el.className = 'passLabel'; + el.innerText = 'Pass'; + button.element.appendChild(el); + } + button.inputElement.hidden = true; + playContainers[i].append(button.element); + } + + await playInkAnimations(payload.data, anySpecialAttacks); + updateHand(payload.playerData.hand); + turnNumberLabel.setTurnNumber(payload.data.game.turnNumber); + clearPlayContainers(); + if (payload.event == 'gameEnd') { + document.getElementById('gameSection')!.classList.add('gameEnded'); + showResult(); + } else { + canPlay = myPlayerIndex != null; + board.autoHighlight = canPlay; + setupControlsForPlay(); + } + })(); + } + } + }); + webSocket.addEventListener('close', e => { + communicationError(); + }); + return myPlayerIndex; +} + showSection('preGame'); function isInternetExplorer() {