Fix styling in Game.vue

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

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index ae90255..cab813e 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -84,39 +84,42 @@ main
         @click="showNextGame()"
       )
         | {{ st.tr["Next_g"] }}
-      button#chatBtn.tooltip(
+      button#chatBtn(
+        :class="btnTooltipClass()"
         onClick="window.doClick('modalChat')"
         aria-label="Chat"
       )
         img(src="/images/icons/chat.svg")
       #actions(v-if="game.score=='*'")
-        button.tooltip(
+        button(
           @click="clickDraw()"
-          :class="{['draw-' + drawOffer]: true}"
+          :class="btnTooltipClass('draw')"
           :aria-label="st.tr['Draw']"
         )
           img(src="/images/icons/draw.svg")
-        button.tooltip(
+        button(
           v-if="!!game.mycolor"
+          :class="btnTooltipClass()"
           @click="abortGame()"
           :aria-label="st.tr['Abort']"
         )
           img(src="/images/icons/abort.svg")
-        button.tooltip(
+        button(
           v-if="!!game.mycolor"
+          :class="btnTooltipClass()"
           @click="resign()"
           :aria-label="st.tr['Resign']"
         )
           img(src="/images/icons/resign.svg")
-      button.tooltip(
+      button(
         v-else
+        :class="btnTooltipClass('rematch')"
         @click="clickRematch()"
-        :class="{['rematch-' + rematchOffer]: true}"
         :aria-label="st.tr['Rematch']"
       )
         img(src="/images/icons/rematch.svg")
       #playersInfo
-        p(v-if="isLargeScreen()")
+        div(v-if="isLargeScreen()")
           span.name(:class="{connected: isConnected(0)}")
             | {{ game.players[0].name || "@nonymous" }}
           span.time(
@@ -138,30 +141,24 @@ main
             span.time-separator(v-if="!!virtualClocks[1][1]") :
             span.time-right(v-if="!!virtualClocks[1][1]")
               | {{ virtualClocks[1][1] }}
-        p(v-else)
+        div(v-else)
           span.name(:class="{connected: isConnected(0)}")
             | {{ game.players[0].name || "@nonymous" }}
           span.split-names -
           span.name(:class="{connected: isConnected(1)}")
             | {{ game.players[1].name || "@nonymous" }}
-          br
-          span.time(
-            v-if="game.score=='*'"
-            :class="{yourturn: !!vr && vr.turn == 'w'}"
-          )
-            span.time-left {{ virtualClocks[0][0] }}
-            span.time-separator(v-if="!!virtualClocks[0][1]") :
-            span.time-right(v-if="!!virtualClocks[0][1]")
-              | {{ virtualClocks[0][1] }}
-          span.separator
-          span.time(
-            v-if="game.score=='*'"
-            :class="{yourturn: !!vr && vr.turn == 'b'}"
-          )
-            span.time-left {{ virtualClocks[1][0] }}
-            span.time-separator(v-if="!!virtualClocks[1][1]") :
-            span.time-right(v-if="!!virtualClocks[1][1]")
-              | {{ virtualClocks[1][1] }}
+          div(v-if="game.score=='*'")
+            span.time(:class="{yourturn: !!vr && vr.turn == 'w'}")
+              span.time-left {{ virtualClocks[0][0] }}
+              span.time-separator(v-if="!!virtualClocks[0][1]") :
+              span.time-right(v-if="!!virtualClocks[0][1]")
+                | {{ virtualClocks[0][1] }}
+            span.separator
+            span.time(:class="{yourturn: !!vr && vr.turn == 'b'}")
+              span.time-left {{ virtualClocks[1][0] }}
+              span.time-separator(v-if="!!virtualClocks[1][1]") :
+              span.time-right(v-if="!!virtualClocks[1][1]")
+                | {{ virtualClocks[1][1] }}
   BaseGame(
     ref="basegame"
     :game="game"
@@ -270,12 +267,6 @@ export default {
           .addEventListener("click", processModalClick);
       }
     );
-    if ("ontouchstart" in window) {
-      // Disable tooltips on smartphones:
-      document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => {
-        elt.classList.remove("tooltip");
-      });
-    }
   },
   beforeDestroy: function() {
     this.cleanBeforeDestroy();
@@ -316,7 +307,17 @@ export default {
       this.send("losefocus");
     },
     isLargeScreen: function() {
-      return window.innerWidth >= 500;
+      return window.innerWidth >= 768;
+    },
+    btnTooltipClass: function(thing) {
+      let append = {};
+      if (!!thing) append = { [thing + "-" + this[thing + "Offer"]]: true };
+      return (
+        Object.assign(
+          { tooltip: !("ontouchstart" in window) },
+          append
+        )
+      );
     },
     gotoRules: function() {
       this.$router.push("/variants/" + this.game.vname);
@@ -815,8 +816,7 @@ export default {
                   GameStorage.update(this.gameRef, { drawOffer: "" });
                 }
               }
-              this.$refs["basegame"].play(
-                movePlus.move, "received", null, true);
+              this.$refs["basegame"].play(movePlus.move, "received");
               this.game.clocks[moveColIdx] = movePlus.clock;
               this.processMove(
                 movePlus.move,
@@ -883,6 +883,8 @@ export default {
             this.$router.push("/game/" + gameInfo.id);
           } else {
             this.rematchId = gameInfo.id;
+            document.getElementById("modalRules").checked = false;
+            document.getElementById("modalScore").checked = false;
             document.getElementById("modalRematch").checked = true;
           }
           break;
@@ -945,7 +947,7 @@ export default {
       this.game.clocks[oppIdx] = data.clock;
       if (data.movesCount > L) {
         // Just got last move from him
-        this.$refs["basegame"].play(data.lastMove, "received", null, true);
+        this.$refs["basegame"].play(data.lastMove, "received");
         this.processMove(data.lastMove);
       } else {
         if (!!this.clockUpdate) clearInterval(this.clockUpdate);
@@ -1566,6 +1568,7 @@ export default {
       this.game.score = score;
       if (!scoreMsg) scoreMsg = getScoreMessage(score);
       this.game.scoreMsg = scoreMsg;
+      document.getElementById("modalRules").checked = false;
       // Display result in a un-missable way:
       document.getElementById("modalScore").checked = true;
       this.$set(this.game, "scoreMsg", scoreMsg);
@@ -1610,7 +1613,7 @@ export default {
 
 <style lang="sass" scoped>
 #scoreDiv > .card, #rematchDiv > .card
-  padding: 15px 0
+  padding: 10px 0
   max-width: 430px
 
 #rulesDiv > .card
@@ -1625,6 +1628,7 @@ export default {
     max-width: 100%
 
 p.score-section
+  margin: 0
   font-size: 1.3em
   span.score
     font-weight: bold
@@ -1684,10 +1688,14 @@ span.separator
 
 span.name
   font-size: 1.5rem
+  @media screen and (max-width: 767px)
+    font-size: 1.2rem
   padding: 0 3px
 
 span.time
   font-size: 2rem
+  @media screen and (max-width: 767px)
+    font-size: 1.5rem
   display: inline-block
   .time-left
     margin-left: 10px