Styling, adjustments

[vchess.git] / client / src / components / BaseGame.vue

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index fad599b..5c82b0b 100644 (file)
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -1,27 +1,27 @@
 <template lang="pug">
-div
+div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys")
   input#modalEog.modal(type="checkbox")
   div(role="dialog" aria-labelledby="eogMessage")
     .card.smallpad.small-modal.text-center
       label.modal-close(for="modalEog")
       h3#eogMessage.section {{ endgameMessage }}
   .row
-    .col-sm-12.col-md-9.col-lg-8
+    #boardContainer.col-sm-12.col-md-9
       Board(:vr="vr" :last-move="lastMove" :analyze="analyze"
         :user-color="game.mycolor" :orientation="orientation"
         :vname="game.vname" @play-move="play")
-      .button-group
-        button(@click="() => play()") Play
-        button(@click="() => undo()") Undo
-        button(@click="flip") Flip
-        button(@click="gotoBegin") GotoBegin
-        button(@click="gotoEnd") GotoEnd
+      #controls
+        button(@click="gotoBegin") <<
+        button(@click="() => undo()") <
+        button(@click="flip") &#8645;
+        button(@click="() => play()") >
+        button(@click="gotoEnd") >>
       #fenDiv(v-if="showFen && !!vr")
         p(@click="gotoFenContent") {{ vr.getFen() }}
       #pgnDiv
         a#download(href="#")
         button(@click="download") {{ st.tr["Download PGN"] }}
-    .col-sm-12.col-md-3.col-lg-4
+    .col-sm-12.col-md-3
       MoveList(v-if="showMoves"
         :moves="moves" :cursor="cursor" @goto-move="gotoMove")
 </template>
@@ -88,6 +88,32 @@ export default {
       this.re_setVariables();
   },
   methods: {
+    focusBg: function() {
+      // TODO: small blue border appears...
+      document.getElementById("baseGame").focus();
+    },
+    handleKeys: function(e) {
+      if ([32,37,38,39,40].includes(e.keyCode))
+        e.preventDefault();
+      switch (e.keyCode)
+      {
+        case 37:
+          this.undo();
+          break;
+        case 39:
+          this.play();
+          break;
+        case 38:
+          this.gotoBegin();
+          break;
+        case 40:
+          this.gotoEnd();
+          break;
+        case 32:
+          this.flip();
+          break;
+      }
+    },
     re_setVariables: function() {
       this.endgameMessage = "";
       this.orientation = this.game.mycolor || "w"; //default orientation for observed games
@@ -299,8 +325,16 @@ export default {
     },
     gotoBegin: function() {
       this.vr.re_init(this.game.fenStart);
-      this.cursor = -1;
-      this.lastMove = null;
+      if (this.moves.length > 0 && this.moves[0].notation == "...")
+      {
+        this.cursor = 0;
+        this.lastMove = this.moves[0];
+      }
+      else
+      {
+        this.cursor = -1;
+        this.lastMove = null;
+      }
     },
     gotoEnd: function() {
       this.gotoMove(this.moves.length-1);
@@ -311,3 +345,29 @@ export default {
   },
 };
 </script>
+
+<style lang="sass">
+#modal-eog+div .card
+  overflow: hidden
+#pgnDiv, #fenDiv
+  text-align: center
+  margin-left: auto
+  margin-right: auto
+@media screen and (min-width: 768px)
+  #controls
+    width: 400px
+@media screen and (max-width: 767px)
+  .game
+    width: 100%
+#controls
+  margin-top: 10px
+  button
+    display: inline-block
+    width: 20%
+    margin: 0
+#boardContainer
+  margin-top: 5px
+  >div
+    margin-left: auto
+    margin-right: auto
+</style>