projects / vchess.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 7dec8d8)
Adjustments, handle keyStrokes on BaseGame
authorBenjamin Auder <benjamin.auder@somewhere>
Wed, 29 Jan 2020 11:28:42 +0000 (12:28 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Wed, 29 Jan 2020 11:28:42 +0000 (12:28 +0100)
client/public/index.html patch | blob | blame | history
client/src/App.vue patch | blob | blame | history
client/src/components/BaseGame.vue patch | blob | blame | history
client/src/components/Chat.vue patch | blob | blame | history
client/src/views/Hall.vue patch | blob | blame | history

diff --git a/client/public/index.html b/client/public/index.html
index 22901af..0ab70d5 100644 (file)
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -20,5 +20,8 @@
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <!-- TODO: add only the necessary icons to mini-css custom build
+    <script src="//unpkg.com/feather-icons"></script>
+    -->
   </body>
 </html>
diff --git a/client/src/App.vue b/client/src/App.vue
index f337394..c502794 100644 (file)
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -38,8 +38,6 @@
           router-link.menuitem(to="/about") {{ st.tr["About"] }}
           p.clickable(onClick="doClick('modalContact')")
             | {{ st.tr["Contact"] }}
-  // TODO: add only the necessary icons to mini-css custom build
-  //script(src="//unpkg.com/feather-icons")
 </template>
 
 <script>
@@ -66,6 +64,9 @@ export default {
       return `/images/flags/${this.st.lang}.svg`;
     },
   },
+//  mounted: function() {
+//    feather.replace();
+//  },
   methods: {
     hideDrawer: function(e) {
       if (e.target.innerText == "Forum")
diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index fad599b..e02462e 100644 (file)
--- 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,31 @@ export default {
       this.re_setVariables();
   },
   methods: {
+    focusBg: function() {
+      // TODO: small blue border appears...
+      document.getElementById("baseGame").focus();
+    },
+    handleKeys: function(e) {
+      switch (e.keyCode)
+      {
+        case 37:
+          this.undo();
+          break;
+        case 39:
+          this.play();
+          break;
+        case 28:
+          this.gotoBegin();
+          break;
+        case 40:
+          this.gotoEnd();
+          break;
+        case 32:
+          e.preventDefault();
+          this.flip();
+          break;
+      }
+    },
     re_setVariables: function() {
       this.endgameMessage = "";
       this.orientation = this.game.mycolor || "w"; //default orientation for observed games
diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue
index 0570752..980cd17 100644 (file)
--- a/client/src/components/Chat.vue
+++ b/client/src/components/Chat.vue
@@ -1,10 +1,9 @@
 <template lang="pug">
-#chat.card
-  h4 Chat
-  p(v-for="chat in chats" :class="classObject(chat)" v-html="chat.msg")
+.card
   input#inputChat(type="text" :placeholder="st.tr['Type here']"
     @keyup.enter="sendChat")
   button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }}
+  p(v-for="chat in chats" :class="classObject(chat)" v-html="chat.msg")
 </template>
 
 <script>
@@ -26,7 +25,7 @@ export default {
       const data = JSON.parse(msg.data);
       if (data.code == "newchat") //only event at this level
       {
-        this.chats.push({msg:data.msg,
+        this.chats.unshift({msg:data.msg,
           name:data.name || "@nonymous", sid:data.from});
       }
     };
@@ -52,7 +51,7 @@ export default {
       chatInput.value = "";
       const chat = {msg:chatTxt, name: this.st.user.name || "@nonymous",
         sid:this.st.user.sid};
-      this.chats.push(chat);
+      this.chats.unshift(chat);
       this.st.conn.send(JSON.stringify({
         code:"newchat", msg:chatTxt, name:chat.name}));
     },
diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index e090d9e..d65de3d 100644 (file)
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -26,12 +26,10 @@ main
         input#inputFen(type="text" v-model="newchallenge.fen")
       button(@click="newChallenge") {{ st.tr["Send challenge"] }}
   .row
-    .col-sm-12.col-md-9.col-md-offset-3
-      button(onClick="doClick('modalNewgame')") New game
+    .col-sm-12
+      button#newGame(onClick="doClick('modalNewgame')") New game
   .row
-    .col-sm-12.col-md-3
-      Chat(:players="[]")
-    .col-sm-12.col-md-9
+    .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       .collapse
         input#challengeSection(type="radio" checked aria-hidden="true" name="accordion")
         label(for="challengeSection" aria-hidden="true") Challenges
@@ -56,7 +54,7 @@ main
             )
               | {{ p.name + (!!p.count ? " ("+p.count+")" : "") }}
           #chat(v-show="pdisplay=='chat'")
-            h3 Chat (TODO)
+            Chat(:players="[]")
         input#gameSection(type="radio" aria-hidden="true" name="accordion")
         label(for="gameSection" aria-hidden="true") Games
         div
@@ -598,5 +596,7 @@ export default {
 </script>
 
 <style lang="sass">
-// TODO
+#newGame
+  display: block
+  margin: auto
 </style>
Website to play original chess variants