<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>
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>
return `/images/flags/${this.st.lang}.svg`;
},
},
+// mounted: function() {
+// feather.replace();
+// },
methods: {
hideDrawer: function(e) {
if (e.target.innerText == "Forum")
<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
: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
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
<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>
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});
}
};
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}));
},
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
)
| {{ 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
</script>
<style lang="sass">
-// TODO
+#newGame
+ display: block
+ margin: auto
</style>