X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=630c83884880a6bdab273fb896e3f92302bd6262;hb=5701c228a422bed7570452b2d24b3193f7653a19;hp=fad599b37c2727c5067bdb81afd85fbc197cfbd4;hpb=06e79b0783d6e9962ca6b2a25f62d46f46fa5c8b;p=vchess.git

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index fad599b3..630c8388 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -1,5 +1,5 @@
 <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
@@ -11,11 +11,11 @@ div
         :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
+        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
@@ -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);