nav
label.drawer-toggle(for="drawerControl")
input#drawerControl.drawer(type="checkbox")
- #menuBar(@click="hideDrawer()")
+ #menuBar(@click="hideDrawer($event)")
label.drawer-close(for="drawerControl")
#leftMenu
router-link(to="/")
.row > div
padding: 0
-.nopadding
- padding: 0
-
header
width: 100%
display: flex
.text-center
text-align: center
-.smallpad
- padding: 5px
-
-.emphasis
- font-style: italic
-
.clearer
clear: both
-.smallfont
- font-size: 0.8em
-
-.bigfont
- font-size: 1.2em
-
-.bold
- font-weight: bold
-
nav
width: 100%
margin: 0
@media screen and (max-width: 767px)
footer
border: none
-
-//#settings, #contactForm
-// max-width: 767px
-// @media screen and (max-width: 767px)
-// max-width: 100vw
-//[type="checkbox"].modal+div .card
-// max-width: 767px
-// max-height: 100vh
-//[type="checkbox"].modal+div .card.small-modal
-// max-width: 320px
-//[type="checkbox"].modal+div .card.big-modal
-// max-width: 90vw
</style>
<template lang="pug">
div#baseGame(tabindex=-1 @click="focusBg()"
- @keydown="handleKeys" @wheel="handleScroll")
+ @keydown="handleKeys($event)" @wheel="handleScroll($event)")
input#modalEog.modal(type="checkbox")
- div#eogDiv(role="dialog" data-checkbox="modalEog" aria-labelledby="eogMessage")
- .card.smallpad.small-modal.text-center
+ div#eogDiv(role="dialog" data-checkbox="modalEog")
+ .card.text-center
label.modal-close(for="modalEog")
- h3#eogMessage.section {{ endgameMessage }}
+ h3.section {{ endgameMessage }}
input#modalAdjust.modal(type="checkbox")
- div#adjuster(role="dialog" data-checkbox="modalAdjust" aria-labelledby="labelAdjust")
- .card.smallpad.small-modal.text-center
+ div#adjuster(role="dialog" data-checkbox="modalAdjust")
+ .card.text-center
label.modal-close(for="modalAdjust")
- label#labelAdjust(for="boardSize") {{ st.tr["Board size"] }}
+ label(for="boardSize") {{ st.tr["Board size"] }}
input#boardSize.slider(type="range" min="0" max="100" value="50"
- @input="adjustBoard")
+ @input="adjustBoard()")
#gameContainer
#boardContainer
Board(:vr="vr" :last-move="lastMove" :analyze="analyze"
</script>
<style lang="sass" scoped>
+[type="checkbox"]#modalEog+div .card
+ min-height: 45px
+[type="checkbox"]#modalAdjust+div .card
+ padding: 5px
+
#baseGame
width: 100%
&:focus
#downloadDiv
display: inline-block
-#modal-eog+div .card
- overflow: hidden
#controls
margin-top: 10px
margin-left: auto
<template lang="pug">
div
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.name + ': ' + chat.msg")
- p(v-for="chat in pastChats" :class="classObject(chat)"
- v-html="chat.name + ': ' + chat.msg")
+ @keyup.enter="sendChat()")
+ button(@click="sendChat()") {{ st.tr["Send"] }}
+ p(v-for="chat in chats.concat(pastChats)")
+ span.name {{ chat.name }} :
+ span(:class="classObject(chat)" v-html="chat.msg")
</template>
<script>
</script>
<style lang="sass" scoped>
+.name
+ color: #abb2b9
.my-chatmsg
- color: grey
+ color: #7d3c98
.opp-chatmsg
- color: black
+ color: #2471a3
</style>
<template lang="pug">
div
- input#modalContact.modal(type="checkbox")
- div(role="dialog" data-checkbox="modalContact"
- aria-labelledby="contactTitle")
- form.card.smallpad
+ input#modalContact.modal(type="checkbox" @change="trySetEnterTime($event)")
+ div(role="dialog" data-checkbox="modalContact")
+ .card
label.modal-close(for="modalContact")
- h3#contactTitle.section {{ st.tr["Contact form"] }}
- fieldset
- label(for="userEmail") {{ st.tr["Email"] }}
- input#userEmail(type="email")
- fieldset
- label(for="mailSubject") {{ st.tr["Subject"] }}
- input#mailSubject(type="text")
- fieldset
- label(for="mailContent") {{ st.tr["Content"] }} *
- br
- textarea#mailContent
- fieldset
- button(type="button" @click="trySendMessage()") {{ st.tr["Send"] }}
- p#emailSent {{ st.tr["Email sent!"] }}
+ h3.section {{ st.tr["Contact form"] }}
+ form(@submit.prevent="trySendMessage()" @keyup.enter="trySendMessage()")
+ fieldset
+ label(for="userEmail") {{ st.tr["Email"] }}
+ input#userEmail(type="email")
+ fieldset
+ label(for="mailSubject") {{ st.tr["Subject"] }}
+ input#mailSubject(type="text")
+ fieldset
+ label(for="mailContent") {{ st.tr["Content"] }} *
+ br
+ textarea#mailContent
+ button(@click="trySendMessage()") {{ st.tr["Send"] }}
+ #dialog.text-center {{ st.tr[infoMsg] }}
</template>
<script>
name: "my-contact-form",
data: function() {
return {
+ enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
st: store.state,
+ infoMsg: "",
};
},
methods: {
- // Note: not using Vue here, but would be possible
+ trySetEnterTime: function(event) {
+ if (!!event.target.checked)
+ {
+ this.enterTime = Date.now();
+ this.infoMsg = "";
+ }
+ },
trySendMessage: function() {
+ // Basic anti-bot strategy:
+ const exitTime = Date.now();
+ if (exitTime - this.enterTime < 5000)
+ return;
let email = document.getElementById("userEmail");
let subject = document.getElementById("mailSubject");
let content = document.getElementById("mailContent");
content: content.value,
},
() => {
+ this.infoMsg = "Email sent!";
subject.value = "";
content.value = "";
- let emailSent = document.getElementById("emailSent");
- emailSent.style.display = "inline-block";
- setTimeout(() => { emailSent.style.display = "none"; }, 2000);
}
);
},
</script>
<style lang="sass" scoped>
-#emailSent
+[type="checkbox"].modal+div .card
+ max-width: 767px
+ max-height: 100%
+textarea#mailContent
+ width: 100%
+ min-height: 100px
+#dialog
+ padding: 5px
color: blue
- display: none
</style>
td(data-label="White") {{ g.players[0].name || "@nonymous" }}
td(data-label="Black") {{ g.players[1].name || "@nonymous" }}
td(data-label="Time control") {{ g.cadence }}
- td(data-label="Result" :class="{finished: g.score!='*'}"
- @click.stop="deleteGame(g)")
+ td(data-label="Result" :class="{finished: g.score!='*'}" @click="deleteGame(g,$event)")
| {{ g.score }}
</template>
},
},
methods: {
- deleteGame: function(game) {
- if (confirm(this.st.tr["Remove game ?"]))
- GameStorage.remove(game.id);
+ deleteGame: function(game, e) {
+ if (game.score != "*")
+ {
+ if (confirm(this.st.tr["Remove game?"]))
+ GameStorage.remove(game.id);
+ e.stopPropagation();
+ }
},
},
};
tr.my-turn > td
background-color: #fcd785
tr td.finished
- background-color: red
+ background-color: #f5b7b1
</style>
};
input#modalLang.modal(type="checkbox")
div(role="dialog" data-checkbox="modalLang")
- #language.card
+ .card
label.modal-close(for="modalLang")
- form(@change="setLanguage")
+ form(@change="setLanguage($event)")
fieldset
label(for="langSelect") {{ st.tr["Language"] }}
select#langSelect
<template lang="pug">
div
input#modalSettings.modal(type="checkbox")
- div(role="dialog" data-checkbox="modalSettings"
- aria-labelledby="settingsTitle")
- .card.smallpad(@change="updateSettings")
+ div(role="dialog" data-checkbox="modalSettings")
+ .card(@change="updateSettings($event)")
label.modal-close(for="modalSettings")
- fieldset
- label(for="setHints") {{ st.tr["Show possible moves?"] }}
- input#setHints(type="checkbox" v-model="st.settings.hints")
- fieldset
- label(for="setHighlight")
- | {{ st.tr["Highlight last move and checks?"] }}
- input#setHighlight(type="checkbox" v-model="st.settings.highlight")
- fieldset
- label(for="setBcolor") {{ st.tr["Board colors"] }}
- select#setBcolor(v-model="st.settings.bcolor")
- option(value="lichess") {{ st.tr["brown"] }}
- option(value="chesscom") {{ st.tr["green"] }}
- option(value="chesstempo") {{ st.tr["blue"] }}
- fieldset
- label(for="setSound") {{ st.tr["Play sounds?"] }}
- select#setSound(v-model="st.settings.sound")
- option(value="0") {{ st.tr["None"] }}
- option(value="1") {{ st.tr["New game"] }}
- option(value="2") {{ st.tr["All"] }}
+ h3.section {{ st.tr["Settings"] }}
+ form
+ fieldset
+ label(for="setHints") {{ st.tr["Show possible moves?"] }}
+ input#setHints(type="checkbox" v-model="st.settings.hints")
+ fieldset
+ label(for="setHighlight")
+ | {{ st.tr["Highlight last move and checks?"] }}
+ input#setHighlight(type="checkbox" v-model="st.settings.highlight")
+ fieldset
+ label(for="setBcolor") {{ st.tr["Board colors"] }}
+ select#setBcolor(v-model="st.settings.bcolor")
+ option(value="lichess") {{ st.tr["brown"] }}
+ option(value="chesscom") {{ st.tr["green"] }}
+ option(value="chesstempo") {{ st.tr["blue"] }}
+ fieldset
+ label(for="setSound") {{ st.tr["Play sounds?"] }}
+ select#setSound(v-model="st.settings.sound")
+ option(value="0") {{ st.tr["None"] }}
+ option(value="1") {{ st.tr["New game"] }}
+ option(value="2") {{ st.tr["All"] }}
</template>
<script>
},
};
</script>
+
+<style lang="sass" scoped>
+[type="checkbox"].modal+div .card
+ max-width: 767px
+ max-height: 100%
+</style>
<template lang="pug">
div
- input#modalUser.modal(type="checkbox" @change="trySetEnterTime")
+ input#modalUser.modal(type="checkbox" @change="trySetEnterTime($event)")
div(role="dialog" data-checkbox="modalUser")
.card
label.modal-close(for="modalUser")
- h3 {{ st.tr[stage] }}
- form#userForm(@submit.prevent="onSubmit()" @keyup.enter="onSubmit")
+ h3.section {{ st.tr[stage] }}
+ form(@submit.prevent="onSubmit()" @keyup.enter="onSubmit()")
div(v-show="stage!='Login'")
fieldset
label(for="username") {{ st.tr["Name"] }}
label(for="nameOrEmail") {{ st.tr["Name or Email"] }}
input#nameOrEmail(type="text" v-model="nameOrEmail")
.button-group
- button#submit(type="button" @click="onSubmit()")
+ button(@click="onSubmit()")
span {{ st.tr[submitMessage] }}
- button(v-if="stage!='Update'" @click="toggleStage()")
+ button(v-if="stage!='Update'" type="button" @click="toggleStage()")
span {{ st.tr[stage=="Login" ? "Register" : "Login"] }}
- button#logoutBtn(v-else @click="doLogout()")
+ button(v-else type="button" @click="doLogout()")
span {{ st.tr["Logout"] }}
- #dialog(:style="{display: displayInfo}") {{ st.tr[infoMsg] }}
+ #dialog.text-center {{ st.tr[infoMsg] }}
</template>
<script>
return "Apply";
}
},
- displayInfo: function() {
- return (this.infoMsg.length > 0 ? "block" : "none");
- },
stage: function() {
return this.st.user.id > 0 ? "Update" : this.logStage;
},
methods: {
trySetEnterTime: function(event) {
if (!!event.target.checked)
+ {
+ this.infoMsg = "";
this.enterTime = Date.now();
+ }
},
toggleStage: function() {
// Loop login <--> register (update is for logged-in users)
// Basic anti-bot strategy:
const exitTime = Date.now();
if (this.stage == "Register" && exitTime - this.enterTime < 5000)
- return; //silently return, in (curious) case of it was legitimate
+ return;
let error = undefined;
if (this.stage == 'Login')
{
this.infoMsg = this.infoMessage();
if (this.stage != "Update")
this.nameOrEmail = "";
- setTimeout(() => {
- this.infoMsg = "";
- document.getElementById("modalUser").checked = false;
- }, 2000);
},
err => {
this.infoMsg = "";
},
};
</script>
+
+<style lang="sass" scoped>
+[type="checkbox"].modal+div .card
+ max-width: 370px
+ max-height: 100%
+#dialog
+ padding: 5px
+ color: blue
+</style>
</script>
<style lang="sass">
+[type="checkbox"].modal+div .card
+ max-width: 767px
+ max-height: 100%
+img
+ display: block
+ margin: 0 auto
+ width: 300px
+@media screen and (max-width: 767px)
+ img
+ width: 75%
p#credits
font-size: 0.8rem
margin-top: -10px
"participant(s):": "participant(s):",
"Register": "Register",
"Registration complete! Please check your emails": "Registration complete! Please check your emails",
+ "Remove game?": "Remove game?",
"Resign": "Resign",
"Resign the game?": "Resign the game?",
"Result": "Result",
"participant(s):": "participante(s) :",
"Register": "Registrarse",
"Registration complete! Please check your emails": "¡ Registro completo ! Por favor revise sus correos electrónicos",
+ "Remove game?": "¿ Eliminar la partida ?",
"Resign": "Abandonar",
"Resign the game?": "¿ Abandonar la partida ?",
"Result": "Resultado",
"participant(s):": "participant(s) :",
"Register": "S'enregistrer",
"Registration complete! Please check your emails": "Enregistrement terminé ! Allez voir vos emails",
+ "Remove game?": "Supprimer la partie ?",
"Resign": "Abandonner",
"Resign the game?": "Abandonner la partie ?",
"Result": "Résultat",
main
.row
.col-sm-12
- #fenDiv
- input#fen(v-model="curFen" @input="adjustFenSize")
+ .text-center
+ input#fen(v-model="curFen" @input="adjustFenSize()")
button(@click="gotoFen()") {{ st.tr["Go"] }}
BaseGame(:game="game" :vr="vr" ref="basegame")
</template>
},
};
</script>
-
-<style lang="sass" scoped>
-#fenDiv
- text-align: center
-</style>
},
game: { //passed to BaseGame
players:[{name:""},{name:""}],
+ chats: [],
rendered: false,
},
virtualClocks: [0, 0], //initialized with true game.clocks
this.vr = new V(game.fen);
const gtype = (game.cadence.indexOf('d') >= 0 ? "corr" : "live");
const tc = extractTime(game.cadence);
+ if (!game.chats)
+ game.chats = []; //live games don't have chat history
if (gtype == "corr")
{
if (game.players[0].color == "b")
input#modalNewgame.modal(type="checkbox")
div#newgameDiv(role="dialog" data-checkbox="modalNewgame"
aria-labelledby="titleFenedit")
- .card.smallpad(@keyup.enter="newChallenge")
+ .card.smallpad(@keyup.enter="newChallenge()")
label#closeNewgame.modal-close(for="modalNewgame")
fieldset
label(for="selectVariant") {{ st.tr["Variant"] }} *
button(@click="setDisplay('c','corr',$event)")
| {{ st.tr["Correspondance challenges"] }}
ChallengeList(v-show="cdisplay=='live'"
- :challenges="filterChallenges('live')" @click-challenge="clickChallenge()")
+ :challenges="filterChallenges('live')" @click-challenge="clickChallenge")
ChallengeList(v-show="cdisplay=='corr'"
- :challenges="filterChallenges('corr')" @click-challenge="clickChallenge()")
+ :challenges="filterChallenges('corr')" @click-challenge="clickChallenge")
#people
h3.text-center {{ st.tr["Who's there?"] }}
#players
| {{ getActionLabel(sid) }}
p.anonymous @nonymous ({{ anonymousCount }})
#chat
- Chat(:newChat="newChat" @mychat="processChat")
+ Chat(:newChat="newChat" @mychat="processChat" :pastChats="[]")
.clearer
div
.button-group
button(v-if="display=='rules' && gameInfo.vname!='Dark'"
@click="gotoAnalyze()")
| {{ st.tr["Analyse"] }}
- .section-content(v-show="display=='rules'" v-html="content")
+ div(v-show="display=='rules'" v-html="content")
ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
@game-over="stopGame" @game-stopped="gameStopped")
</template>
<!-- NOTE: not scoped here, because HTML is injected (TODO) -->
<style lang="sass">
-//.section-content
-// *
-// margin-left: auto
-// margin-right: auto
-// max-width: 767px
-// figure.diagram-container
-// max-width: 1000px
-// @media screen and (max-width: 767px)
-// max-width: 100%
-// padding: 0 5px
-
.warn
padding: 3px
color: red
background-color: #FFCC66
padding: 5px
+.bigfont
+ font-size: 1.2em
+
+.bold
+ font-weight: bold
+
.stageDelimiter
color: purple
<template lang="pug">
main
.row
- .nopadding.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+ .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
input#prefixFilter(v-model="curPrefix" :placeholder="st.tr['Type first letters...']")
.variant.col-sm-12.col-md-5.col-lg-4(
v-for="(v,idx) in filteredVariants"
projects / vchess.git / commitdiff