From 4b0b4495e4657f030eae6e64b545c4fde9c09f60 Mon Sep 17 00:00:00 2001 From: Nathan Date: Fri, 18 Oct 2024 17:43:36 +0100 Subject: [PATCH] WIP! Attempt to add async wait on board/front-end Want to wait for the cards to be loaded in before the game loads any graphics, etc. so the new DB deckLists can be used instead of files --- public/board.js | 41 +++++++++++++++++++++++++---------------- public/main.js | 22 +++++++++++++++++++--- server.js | 4 +++- 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/public/board.js b/public/board.js index b397e43..0aa57d8 100644 --- a/public/board.js +++ b/public/board.js @@ -802,24 +802,33 @@ class Board{ // Run board commands here for testing let board = new Board; -// Await DB promise for decks before loading the game -requestGetCards(); // TODO: Make actually wait for the DB response before continuing... - -// Fill each players deck with their cards -createDecks(); +// Board is now async (initialisation) +// Everything beyond initialisation shouldn't be required so no need to wait +// At least I think, for now. May need more stuff in future +async function loadBoard() { + // TODO: Figure out how to wait for requestDeck to responnd + // Have tried wrapping the function in a newPromise doodad, but that didn't + // change anything TODO TODO !IMPORTANT + console.log(await requestDeck()); + //console.log(await requestGetCards(1, 2)); // Deck 1 for Player 2 + //const dbLoaded = await loadDBElements(); + + // Fill each players deck with their cards + createDecks(); + + // Play shield from top of each players deck to the maximum allowed (4 typically) + for(let currentPlayer = 0; currentPlayer <= players-1; currentPlayer++){ + board.playShield(1, 'deck', currentPlayer, maxShield); + } -// Play shield from top of each players deck to the maximum allowed (4 typically) -for(let currentPlayer = 0; currentPlayer <= players-1; currentPlayer++){ - board.playShield(1, 'deck', currentPlayer, maxShield); + // Draw the graphics of the board/game + // Wait for the cardArt to load on first load + // Otherwise it'll be boxes, and art will flash in on first click event triggered + cardArt.onload = function(){ + board.drawBoard(true); + }; } - -// Draw the graphics of the board/game -// Wait for the cardArt to load on first load -// Otherwise it'll be boxes, and art will flash in on first click event triggered -cardArt.onload = function(){ - board.drawBoard(true); -}; - +loadBoard(); // Right Click, Rightclick, rightclick, right click canvas.addEventListener('contextmenu', function(event) { diff --git a/public/main.js b/public/main.js index 54873d9..0e54888 100644 --- a/public/main.js +++ b/public/main.js @@ -148,10 +148,10 @@ socket.on('responseJoinRoom', function (name) { } }); -// getCards -function requestGetCards(){ +// getCards (TODO: remove if test below is a-okay) +function requestGetCards(deckId, playerId){ console.log('+ requestGetCards'); - socket.emit('requestGetCards', playerName); + socket.emit('requestGetCards', deckId, playerId); } function responseGetCards(data){ console.log(data); @@ -164,3 +164,19 @@ socket.on('responseGetCards', function (data) { responseGetCards(data); }); +// Testing getting cards from server/DB +function requestDeck(){ + console.log('+ requestDeck'); + socket.emit('requestDeck'); +} +function responseGetDeck(data){ + console.log(data); + if(!data.success){ + alert(data.message); + } +} +socket.on('responseGetDeck', function (data) { + console.log('<< responseGetDeck'); + responseGetDeck(data); +}); + diff --git a/server.js b/server.js index 3f3d8af..19524b7 100644 --- a/server.js +++ b/server.js @@ -205,7 +205,7 @@ function getCardColourRequirement(){ // https://www.geeksforgeeks.org/how-to-wait-for-multiple-promises-in-javascript/ // using last example -async function requestDeck(playerId, deckId){ +async function requestDeck(socket, playerId, deckId){ // Get the deck(s) requested. // Not 100% on how to do two differening atm @@ -308,9 +308,11 @@ async function requestDeck(playerId, deckId){ //console.log(cardData); + let response = {'success':true, 'message':'Nothing happened'}; response.message = cardData; // Add the cardData generated to the response io.to(socket.id).emit('responseGetDeck', response); + // TODO: In future the item inc. all the decks, cards, locations, and other attributes // will come from here