Styling, adjustments

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

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index e02462e..5c82b0b 100644 (file)
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -6,11 +6,11 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys")
       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
+      #controls
         button(@click="gotoBegin") <<
         button(@click="() => undo()") <
         button(@click="flip") &#8645;
@@ -21,7 +21,7 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys")
       #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>
@@ -93,6 +93,8 @@ export default {
       document.getElementById("baseGame").focus();
     },
     handleKeys: function(e) {
+      if ([32,37,38,39,40].includes(e.keyCode))
+        e.preventDefault();
       switch (e.keyCode)
       {
         case 37:
@@ -101,14 +103,13 @@ export default {
         case 39:
           this.play();
           break;
-        case 28:
+        case 38:
           this.gotoBegin();
           break;
         case 40:
           this.gotoEnd();
           break;
         case 32:
-          e.preventDefault();
           this.flip();
           break;
       }
@@ -324,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);
@@ -336,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>