In the process of creating a game lobby where one player initiates a game and waits for another player to join.
Once the second player joins, the Firestore document containing information about the game is updated with the player's name stored in the 'playerJoined' property. After successfully receiving this data:
waitForOtherPlayer(gameId){
this.unsubscribe = fb.firestore().collection("active-games").doc(gameId+'').onSnapshot(function(doc) {
if(doc.data()!== undefined) {
if(doc.data().playerJoined !== null && doc.data().playerJoined !== undefined) {
this.playerJoined = doc.data().playerJoined // Storing in a global var called playerJoined
console.log('1st this.playerJoined: '+this.playerJoined)
this.isPlayerJoined = true
console.log(this)
console.log(typeof this)
}
} else {
console.log("Current data: ", doc.data());
}
return
});
},
Verification via console.log() confirms successful retrieval of the player's name. However, the challenge lies in forwarding this data to the global 'this' Object.
Illustrated below is the Vue Object structure: https://i.sstatic.net/dwQKL.png
And here is what "this" in the callback is actually referencing: https://i.sstatic.net/aHRyG.png
I am currently struggling with transferring the data into the Vue object in order to utilize it in other methods and the DOM. After spending the entire day experimenting and revisiting Firestore documentation, I seem to be missing a crucial step. Your assistance in identifying this missing link is greatly appreciated.