From 9ca1e26b79ec1873aa6ac914013160f8593d52cf Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Wed, 29 Jan 2020 12:28:42 +0100 Subject: [PATCH] Adjustments, handle keyStrokes on BaseGame --- client/public/index.html | 3 +++ client/src/App.vue | 5 ++-- client/src/components/BaseGame.vue | 37 +++++++++++++++++++++++++----- client/src/components/Chat.vue | 9 ++++---- client/src/views/Hall.vue | 14 +++++------ 5 files changed, 48 insertions(+), 20 deletions(-) diff --git a/client/public/index.html b/client/public/index.html index 22901afa..0ab70d5d 100644 --- 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 f337394e..c5027945 100644 --- 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 fad599b3..e02462e5 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") ⇅ + 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 0570752a..980cd177 100644 --- 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 e090d9e6..d65de3d7 100644 --- 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> -- 2.44.0