better diagrams in rules pages + some improvements to pieces images

[vchess.git] / client / src / views / Game.vue

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 878e771..1753df0 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -7,7 +7,7 @@ main
   )
     .card
       label.modal-close(for="modalRules")
-      h4#variantNameInGame(@click="gotoRules") {{ game.vname }}
+      a#variantNameInGame(:href="'/#/variants/'+game.vname") {{ game.vname }}
       div(v-html="rulesContent")
   input#modalScore.modal(type="checkbox")
   div#scoreDiv(
@@ -310,9 +310,6 @@ export default {
         )
       );
     },
-    gotoRules: function() {
-      this.$router.push("/variants/" + this.game.vname);
-    },
     participateInChat: function(p) {
       return Object.keys(p.tmpIds).some(x => p.tmpIds[x].focus) && !!p.name;
     },
@@ -429,10 +426,14 @@ export default {
     isConnected: function(index) {
       const player = this.game.players[index];
       // Is it me ? In this case no need to bother with focus
-      if (this.st.user.sid == player.sid || this.st.user.id == player.id)
+      if (
+        this.st.user.sid == player.sid ||
+        (!!player.name && this.st.user.id == player.id)
+      ) {
         // Still have to check for name (because of potential multi-accounts
         // on same browser, although this should be rare...)
         return (!this.st.user.name || this.st.user.name == player.name);
+      }
       // Try to find a match in people:
       return (
         (
@@ -446,7 +447,7 @@ export default {
         )
         ||
         (
-          !!player.id &&
+          player.id > 0 &&
           Object.values(this.people).some(p => {
             return (
               p.id == player.id &&
@@ -745,6 +746,9 @@ export default {
           if (!this.game || !this.game.moves) this.lastateAsked = true;
           else this.sendLastate(data.from);
           break;
+        // TODO: possible bad scenario: reload page while oppponent sends a
+        // move => get both lastate and newmove, process both, add move twice.
+        // Confirm scenario? Fix?
         case "lastate": {
           // Got opponent infos about last move
           this.gotLastate = true;
@@ -883,6 +887,7 @@ export default {
             this.addAndGotoLiveGame(gameInfo);
           } else if (
             gameType == "corr" &&
+            this.st.user.id > 0 &&
             gameInfo.players.some(p => p.id == this.st.user.id)
           ) {
             this.$router.push("/game/" + gameInfo.id);
@@ -1119,7 +1124,10 @@ export default {
       const gtype = game.type || this.getGameType(game);
       const tc = extractTime(game.cadence);
       const myIdx = game.players.findIndex(p => {
-        return p.sid == this.st.user.sid || p.id == this.st.user.id;
+        return (
+          p.sid == this.st.user.sid ||
+          (!!p.name && p.id == this.st.user.id)
+        );
       });
       // Sometimes the name isn't stored yet (TODO: why?)
       if (
@@ -1603,7 +1611,10 @@ export default {
       document.getElementById("modalScore").checked = true;
       this.$set(this.game, "scoreMsg", scoreMsg);
       const myIdx = this.game.players.findIndex(p => {
-        return p.sid == this.st.user.sid || p.id == this.st.user.id;
+        return (
+          p.sid == this.st.user.sid ||
+          (!!p.name && p.id == this.st.user.id)
+        );
       });
       if (myIdx >= 0) {
         // OK, I play in this game
@@ -1761,19 +1772,19 @@ span.yourturn
   background-color: lightyellow
 
 .draw-received, .draw-received:hover
-  background-color: lightgreen
+  background-color: #73C6B6
 
 .draw-threerep, .draw-threerep:hover
-  background-color: #e4d1fc
+  background-color: #D2B4DE
 
 .rematch-sent, .rematch-sent:hover
   background-color: lightyellow
 
 .rematch-received, .rematch-received:hover
-  background-color: lightgreen
+  background-color: #48C9B0
 
 .somethingnew
-  background-color: #c5fefe
+  background-color: #D2B4DE
 
 .diagram
   margin: 0 auto
@@ -1790,11 +1801,13 @@ button.acceptBtn
 button.refuseBtn
   background-color: red
 
-h4#variantNameInGame
-  cursor: pointer
+a#variantNameInGame
+  color: var(--card-fore-color)
   text-align: center
-  text-decoration: underline
   font-weight: bold
+  font-size: calc(1rem * var(--heading-ratio))
+  line-height: 1.2
+  margin: calc(1.5 * var(--universal-margin))
 </style>
 
 <style lang="sass">