From: Benjamin Auder <benjamin.auder@somewhere> Date: Wed, 12 Feb 2020 17:16:25 +0000 (+0100) Subject: Will remove Welcome div, finally X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/images/img/current/pieces/mini-custom.min.css?a=commitdiff_plain;h=9a3049f3a48fa4b3627ef26ccdf213a8e550d478;p=vchess.git Will remove Welcome div, finally --- diff --git a/client/src/App.vue b/client/src/App.vue index f4f0cf7c..e97fc410 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -14,7 +14,7 @@ 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="/") @@ -109,9 +109,6 @@ body .row > div padding: 0 -.nopadding - padding: 0 - header width: 100% display: flex @@ -128,24 +125,9 @@ header .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 @@ -243,16 +225,4 @@ footer @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> diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 45364053..a1539bab 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -1,18 +1,18 @@ <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" @@ -411,6 +411,11 @@ export default { </script> <style lang="sass" scoped> +[type="checkbox"]#modalEog+div .card + min-height: 45px +[type="checkbox"]#modalAdjust+div .card + padding: 5px + #baseGame width: 100% &:focus @@ -423,8 +428,6 @@ export default { #downloadDiv display: inline-block -#modal-eog+div .card - overflow: hidden #controls margin-top: 10px margin-left: auto diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue index c5fde454..8c1e059a 100644 --- a/client/src/components/Chat.vue +++ b/client/src/components/Chat.vue @@ -1,12 +1,11 @@ <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> @@ -50,8 +49,10 @@ export default { </script> <style lang="sass" scoped> +.name + color: #abb2b9 .my-chatmsg - color: grey + color: #7d3c98 .opp-chatmsg - color: black + color: #2471a3 </style> diff --git a/client/src/components/ContactForm.vue b/client/src/components/ContactForm.vue index 9ac57107..392d3196 100644 --- a/client/src/components/ContactForm.vue +++ b/client/src/components/ContactForm.vue @@ -1,24 +1,23 @@ <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> @@ -29,12 +28,24 @@ export default { 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"); @@ -56,11 +67,9 @@ export default { 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); } ); }, @@ -69,7 +78,13 @@ export default { </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> diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue index 5a4c8f7c..1e31e737 100644 --- a/client/src/components/GameList.vue +++ b/client/src/components/GameList.vue @@ -15,8 +15,7 @@ div 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> @@ -58,9 +57,13 @@ export default { }, }, 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(); + } }, }, }; @@ -71,5 +74,5 @@ export default { tr.my-turn > td background-color: #fcd785 tr td.finished - background-color: red + background-color: #f5b7b1 </style> diff --git a/client/src/components/Language.vue b/client/src/components/Language.vue index d35d8e21..e7243555 100644 --- a/client/src/components/Language.vue +++ b/client/src/components/Language.vue @@ -8,9 +8,9 @@ div }; 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 diff --git a/client/src/components/Settings.vue b/client/src/components/Settings.vue index b9a2b637..df60e04c 100644 --- a/client/src/components/Settings.vue +++ b/client/src/components/Settings.vue @@ -1,29 +1,30 @@ <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> @@ -49,3 +50,9 @@ export default { }, }; </script> + +<style lang="sass" scoped> +[type="checkbox"].modal+div .card + max-width: 767px + max-height: 100% +</style> diff --git a/client/src/components/UpsertUser.vue b/client/src/components/UpsertUser.vue index 60970b08..3a0bb490 100644 --- a/client/src/components/UpsertUser.vue +++ b/client/src/components/UpsertUser.vue @@ -1,11 +1,11 @@ <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"] }} @@ -21,13 +21,13 @@ div 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> @@ -71,9 +71,6 @@ export default { return "Apply"; } }, - displayInfo: function() { - return (this.infoMsg.length > 0 ? "block" : "none"); - }, stage: function() { return this.st.user.id > 0 ? "Update" : this.logStage; }, @@ -81,7 +78,10 @@ export default { 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) @@ -124,7 +124,7 @@ export default { // 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') { @@ -142,10 +142,6 @@ export default { this.infoMsg = this.infoMessage(); if (this.stage != "Update") this.nameOrEmail = ""; - setTimeout(() => { - this.infoMsg = ""; - document.getElementById("modalUser").checked = false; - }, 2000); }, err => { this.infoMsg = ""; @@ -160,3 +156,12 @@ export default { }, }; </script> + +<style lang="sass" scoped> +[type="checkbox"].modal+div .card + max-width: 370px + max-height: 100% +#dialog + padding: 5px + color: blue +</style> diff --git a/client/src/components/Welcome.vue b/client/src/components/Welcome.vue index 5f336e85..8c8ec4ca 100644 --- a/client/src/components/Welcome.vue +++ b/client/src/components/Welcome.vue @@ -36,6 +36,16 @@ export default { </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 diff --git a/client/src/translations/en.js b/client/src/translations/en.js index 39d7f4b2..7ff050e1 100644 --- a/client/src/translations/en.js +++ b/client/src/translations/en.js @@ -72,6 +72,7 @@ export const translations = "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", diff --git a/client/src/translations/es.js b/client/src/translations/es.js index 2a01b1d4..87d2ba1c 100644 --- a/client/src/translations/es.js +++ b/client/src/translations/es.js @@ -72,6 +72,7 @@ export const translations = "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", diff --git a/client/src/translations/fr.js b/client/src/translations/fr.js index fbaffc68..4e27d2ec 100644 --- a/client/src/translations/fr.js +++ b/client/src/translations/fr.js @@ -72,6 +72,7 @@ export const translations = "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", diff --git a/client/src/views/Analyse.vue b/client/src/views/Analyse.vue index 2f68cdea..c667290f 100644 --- a/client/src/views/Analyse.vue +++ b/client/src/views/Analyse.vue @@ -2,8 +2,8 @@ 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> @@ -83,8 +83,3 @@ export default { }, }; </script> - -<style lang="sass" scoped> -#fenDiv - text-align: center -</style> diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index dc6b817e..a5db1464 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -62,6 +62,7 @@ export default { }, game: { //passed to BaseGame players:[{name:""},{name:""}], + chats: [], rendered: false, }, virtualClocks: [0, 0], //initialized with true game.clocks @@ -419,6 +420,8 @@ export default { 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") diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 42fd4767..bcc6cbab 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -9,7 +9,7 @@ main 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"] }} * @@ -44,9 +44,9 @@ main 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 @@ -60,7 +60,7 @@ main | {{ getActionLabel(sid) }} p.anonymous @nonymous ({{ anonymousCount }}) #chat - Chat(:newChat="newChat" @mychat="processChat") + Chat(:newChat="newChat" @mychat="processChat" :pastChats="[]") .clearer div .button-group diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue index dbc6798d..5f9d6dd7 100644 --- a/client/src/views/Rules.vue +++ b/client/src/views/Rules.vue @@ -13,7 +13,7 @@ main 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> @@ -116,17 +116,6 @@ export default { <!-- 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 @@ -167,6 +156,12 @@ p.boxed background-color: #FFCC66 padding: 5px +.bigfont + font-size: 1.2em + +.bold + font-weight: bold + .stageDelimiter color: purple diff --git a/client/src/views/Variants.vue b/client/src/views/Variants.vue index 0f320eff..d166b684 100644 --- a/client/src/views/Variants.vue +++ b/client/src/views/Variants.vue @@ -1,7 +1,7 @@ <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"