'update'
[vchess.git] / client / src / views / Game.vue
index 30fbc39..edaca5c 100644 (file)
@@ -10,16 +10,18 @@ main
   .row
     #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
       button#chatBtn(onClick="doClick('modalChat')") Chat
-      #actions(v-if="game.mode!='analyze' && game.score=='*'")
+      #actions(v-if="game.score=='*'")
         button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}") Draw
         button(@click="abortGame") Abort
         button(@click="resign") Resign
       #playersInfo
         p
-          span.name(:class="{connected: isConnected(0)}") {{ game.players[0].name }}
+          span.name(:class="{connected: isConnected(0)}")
+            | {{ game.players[0].name || "@nonymous" }}
           span.time(v-if="game.score=='*'") {{ virtualClocks[0] }}
           span.split-names -
-          span.name(:class="{connected: isConnected(1)}") {{ game.players[1].name }}
+          span.name(:class="{connected: isConnected(1)}")
+            | {{ game.players[1].name || "@nonymous" }}
           span.time(v-if="game.score=='*'") {{ virtualClocks[1] }}
   BaseGame(:game="game" :vr="vr" ref="basegame"
     @newmove="processMove" @gameover="gameOver")
@@ -135,6 +137,9 @@ export default {
   methods: {
     // O.1] Ask server for room composition:
     roomInit: function() {
+      // Notify the room only now that I connected, because
+      // messages might be lost otherwise (if game loading is slow)
+      this.st.conn.send(JSON.stringify({code:"connect"}));
       this.st.conn.send(JSON.stringify({code:"pollclients"}));
     },
     isConnected: function(index) {
@@ -182,13 +187,12 @@ export default {
         }
         case "identity":
         {
-          let player = this.people[data.user.sid];
           // NOTE: sometimes player.id fails because player is undefined...
           // Probably because the event was meant for Hall?
-          if (!player)
+          if (!this.people[data.user.sid])
             return;
-          player.id = data.user.id;
-          player.name = data.user.name;
+          this.$set(this.people, data.user.sid,
+            {id: data.user.id, name: data.user.name});
           // Sending last state only for live games: corr games are complete
           if (this.game.type == "live" && this.game.oppsid == data.user.sid)
           {
@@ -212,7 +216,9 @@ export default {
           break;
         }
         case "askgame":
-          // Send current (live) game
+          // Send current (live) game if not asked by opponent (!)
+          if (this.game.players.some(p => p.sid == data.from))
+            return;
           const myGame =
           {
             // Minimal game informations:
@@ -225,7 +231,7 @@ export default {
             game:myGame, target:data.from}));
           break;
         case "newmove":
-          this.$set(this.game, "moveToPlay", data.move); //TODO: Vue3...
+          this.$set(this.game, "moveToPlay", data.move);
           break;
         case "lastate": //got opponent infos about last move
         {
@@ -245,10 +251,12 @@ export default {
           this.gameOver("1/2", data.message);
           break;
         case "drawoffer":
-          this.drawOffer = "received"; //TODO: observers don't know who offered draw
+          // NOTE: observers don't know who offered draw
+          this.drawOffer = "received";
           break;
         case "askfullgame":
-          this.st.conn.send(JSON.stringify({code:"fullgame", game:this.game, target:data.from}));
+          this.st.conn.send(JSON.stringify({code:"fullgame",
+            game:this.game, target:data.from}));
           break;
         case "fullgame":
           // Callback "roomInit" to poll clients only after game is loaded
@@ -306,13 +314,7 @@ export default {
         });
         this.gameOver("1/2", message);
       }
-      else if (this.drawOffer == "sent")
-      {
-        this.drawOffer = "";
-        if (this.game.type == "corr")
-          GameStorage.update(this.gameRef.id, {drawOffer: false});
-      }
-      else
+      else if (this.drawOffer == "") //no effect if drawOffer == "sent"
       {
         if (!confirm("Offer draw?"))
           return;
@@ -321,8 +323,7 @@ export default {
           if (sid != this.st.user.sid)
             this.st.conn.send(JSON.stringify({code:"drawoffer", target:sid}));
         });
-        if (this.game.type == "corr")
-          GameStorage.update(this.gameRef.id, {drawOffer: true});
+        GameStorage.update(this.gameRef.id, {drawOffer: true});
       }
     },
     abortGame: function() {
@@ -554,7 +555,8 @@ export default {
       document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2";
     },
     finishSendChat: function(chat) {
-      if (this.game.type == "corr")
+      // NOTE: anonymous chats in corr games are not stored on server (TODO?)
+      if (this.game.type == "corr" && this.st.user.id > 0)
         GameStorage.update(this.gameRef.id, {chat: chat});
     },
     processChat: function() {
@@ -562,7 +564,6 @@ export default {
         document.getElementById("chatBtn").style.backgroundColor = "#c5fefe";
     },
     gameOver: function(score, scoreMsg) {
-      this.game.mode = "analyze";
       this.game.score = score;
       this.game.scoreMsg = scoreMsg;
       const myIdx = this.game.players.findIndex(p => {
@@ -578,7 +579,7 @@ export default {
 };
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 .connected
   background-color: lightgreen