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

@@ -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) {

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);
+});
+

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