From: Benjamin Auder Date: Wed, 29 Jan 2020 16:26:46 +0000 (+0100) Subject: Styling, adjustments X-Git-Url: https://git.auder.net/?p=vchess.git;a=commitdiff_plain;h=72ccbd6730241771e6ba86b6a5b62597b4c7e2f4 Styling, adjustments --- diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 630c8388..5c82b0b1 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -6,11 +6,11 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys") label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} .row - .col-sm-12.col-md-9.col-lg-8 + #boardContainer.col-sm-12.col-md-9 Board(:vr="vr" :last-move="lastMove" :analyze="analyze" :user-color="game.mycolor" :orientation="orientation" :vname="game.vname" @play-move="play") - .button-group + #controls button(@click="gotoBegin") << button(@click="() => undo()") < button(@click="flip") ⇅ @@ -21,7 +21,7 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys") #pgnDiv a#download(href="#") button(@click="download") {{ st.tr["Download PGN"] }} - .col-sm-12.col-md-3.col-lg-4 + .col-sm-12.col-md-3 MoveList(v-if="showMoves" :moves="moves" :cursor="cursor" @goto-move="gotoMove") @@ -345,3 +345,29 @@ export default { }, }; + + diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 987329c8..a4e1ca41 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -91,4 +91,6 @@ export default { diff --git a/client/src/stylesheets/_users.sass b/client/src/stylesheets/_users.sass deleted file mode 100644 index 35ebdb59..00000000 --- a/client/src/stylesheets/_users.sass +++ /dev/null @@ -1,9 +0,0 @@ -button#submit - display: inline-flex - //i - line-height: 36px - span - margin-right: 7px - -#dialog - clear: both diff --git a/client/src/stylesheets/index.sass b/client/src/stylesheets/index.sass deleted file mode 100644 index dcf75b3c..00000000 --- a/client/src/stylesheets/index.sass +++ /dev/null @@ -1,54 +0,0 @@ -#header - width: 100% - background: linear-gradient(#e66465, #9198e5) - height: 77px - @media screen and (max-width: 767px) - height: 43px - -.info-container - display: inline-block - vertical-align: top - padding: 0 - box-sizing: border-box - p - display: flex - padding: 3px - border: 1px solid black; - margin: 25px 15px 5px 7px - @media screen and (max-width: 767px) - margin-top: 7px - -#mainTitle - font-style: italic - margin-left: 10px - @media screen and (max-width: 767px) - margin-left: 5px - float: left - img - display: inline-block - height: 30px - margin-top: 25px - @media screen and (max-width: 767px) - margin-top: 7px - p - font-weight: bold - padding: 0 - border: none - margin-top: 21px - font-size: 1.5em - @media screen and (max-width: 767px) - margin-top: 10px - font-size: 1em - -#flagMenu - float: right - margin-right: 10px - @media screen and (max-width: 767px) - margin-right: 5px - img - display: inline-block - height: 30px - padding-top: 27px - @media screen and (max-width: 767px) - padding-top: 8px - diff --git a/client/src/stylesheets/layout.sass b/client/src/stylesheets/layout.sass index 81427718..0e08e272 100644 --- a/client/src/stylesheets/layout.sass +++ b/client/src/stylesheets/layout.sass @@ -1,5 +1,3 @@ -@import users - html, * font-family: "Open Sans", Arial, sans-serif --back-color: #f2f2f2 diff --git a/client/src/stylesheets/variant.sass b/client/src/stylesheets/variant.sass deleted file mode 100644 index a1181597..00000000 --- a/client/src/stylesheets/variant.sass +++ /dev/null @@ -1,175 +0,0 @@ -// Menu: - -#menuBar - background: linear-gradient(#e66465, #9198e5) - height: 29px - margin-bottom: 10px - @media screen and (max-width: 767px) - height: 100% - margin-bottom: 0 - @media screen and (min-width: 768px) - width: 100% - overflow: hidden - -a#homeLink - margin-left: 10px - margin-top: 2px - color: black - display: inline-block - @media screen and (max-width: 767px) - display: block - margin: 5px 0 0 12px - -.info-container - display: inline-block - vertical-align: top - padding: 0 - box-sizing: border-box - a - text-decoration: none - color: black - a, p - display: inline-block - padding: 0 3px - border: 1px solid black; - margin: 1px 0 0 15px - @media screen and (max-width: 767px) - margin-top: 10px - display: block - -#userMenu, #settings - @media screen and (min-width: 768px) - float: right - .info-container - p - padding: 0 3px - margin: 1px 0 0 15px - -#flagMenu - @media screen and (min-width: 768px) - margin-top: 1px - float: right - margin: 0 15px - @media screen and (max-width: 767px) - margin: 25px 5px 0 15px - img - display: inline-block - margin: 0 - height: 25px - -label.drawer-toggle - padding: 0 - &::before - font-size: 2em; - max-height: 32px; - top: -7px; - left: 5px - -// Game section: - -td.highlight-lm - background-color: plum - -button.play - height: 24px - margin: 0 - padding: 0 10px 24px 10px - box-sizing: border-box - border: 1px solid brown -button.play.spaceleft - margin-left: 15px -button.play.spaceright - margin-right: 15px -button.play.big-spaceleft - margin-left: 25px -button.play.big-spaceright - margin-right: 25px - -.aboveboard-wrapper - width: 80vh - margin: 0 auto - @media screen and (max-width: 767px) - width: 100% - margin: 0 - -button.above-board - margin-left: 15px - margin-right: 15px - -i.material-icons - font-size: 24px - -.indic-left - border: 1px solid brown - float: left - margin: 0 0 var(--universal-margin) 10vh - @media screen and (max-width: 767px) - margin-left: 20px - -.indic-right - border: 1px solid brown - float: right - margin: 0 10vh var(--universal-margin) 0 - @media screen and (max-width: 767px) - margin-right: 20px - -.my-chatmsg - color: black - -.opp-chatmsg - color: blue - -// TODO: this fix is not good (button height 0 if chat overflow window height) -#sendChatBtn - min-height: 42px - -.connected - background-color: green - -.disconnected - background-color: red - -.white-turn - background-color: white - -.black-turn - background-color: black - -button.playing - background-color: #ffcc99 - &:hover - background-color: #ffcc99 - -button.seek - background-color: #cc99ff - &:hover - background-color: #cc99ff - -#fen-string - margin-top: 0 - margin-bottom: 10px - -#pgn-game - margin-top: 0 - margin-bottom: 0 - -#downloadBtn - display: block - margin-left: auto - margin-right: auto - -#pgn-div > a - display: none - -//#fen-div > p - margin-left: 0 - margin-right: 0 - -#modal-eog+div .card - overflow: hidden - -#actions - margin: 10px 0 - -// Rules section: -// TODO diff --git a/client/src/translations/about/en.pug b/client/src/translations/about/en.pug new file mode 100644 index 00000000..14bbc7eb --- /dev/null +++ b/client/src/translations/about/en.pug @@ -0,0 +1,57 @@ +p. + This website was born after Patrick Bernier told me about + a variant he invented, called 'l'Échiqueté', which involves mixed pieces, + half-black and half-white. Back then in 2012, I developed a small website + allowing to play by correspondance with this variant only. I already had + in mind other variants to be added to the website, 'Zen chess' being the + first on the list because it changed so much the thinking process that I + was very curious to play it. + +p. + After a long break, a prototype website allowing to play + live games was tested in the end of 2017, with only a few players. + One year later the first version of the final website was published: + it offered three modes, against a human, a computer engine or analyzing, + with about twenty variants available. The current website is a more modern + rewriting of this initial version: it now has the basic features expected + from a chess playing website :) + +p. + From the main Hall, you can see and talk to online players, + "send and accept challenges (live or correspondance), and also watch current + "games. If this is your first contact with chess variants, you probably should + "start with the 'Variants' page from the top menu: it explains all the rules + "and allows to observe sample games or play against basic bots. Finally, + "at any moment in a game you can click on the FEN string at the bottom to + "analyze the position. Try not to do that in live games ;) + +p + a(href="https://github.com/yagu0/vchess") The source code + | is freely available on Github: the main ingredients are Express, Node.js, + | Vue and Webpack. The chosen DBMS is SQLite for now because of its simplicity. + | It can be easily changed if needed later. All contributions are welcome: + ul + li Translations: see client/src/translations/ folder + li. + Styling: client/src/stylesheets/ and <style> part of .vue + files in client/src/{components,views} + li. + Back-end and front-end code: a lot can be improved! + Feel free to send pull requests :) + +p + | A considerable number of people helped for this website, + | testing, giving ideas, motivating me to achieve this project. Thanks in + | relatively random order to Patrick Bernier, Frédéric Fradet, Olive Martin, + | Bevis Martin, Laurent Nouhaud and Christian Poisson for early testing and + | advices from 2012; to Yovann Gatineau and Anatole Vlachos for their + | enthusiasm about the website; to Jérôme Auclair who told me about the + | Dynamo variant; to Nathalie Merlin and lichess players O42, oceansideview, + | okei and opperwezen who tested + a(href="https://lichess.org/forum/general-chess-discussion/vchessclub--play-chess-variants?page=10") the 2018/12 version + | ; and of course to the websites + a(href="https://schemingmind.com/") schemingmind.com + | and + a(href="https://www.chessvariants.com/") chessvariants.com + | which are two great resources about variants. + | If I forget someone in this list, sorry and please tell me! diff --git a/client/src/translations/en.js b/client/src/translations/en.js index 8e0f05dc..ce0bf5c6 100644 --- a/client/src/translations/en.js +++ b/client/src/translations/en.js @@ -65,50 +65,4 @@ export const translations = // Game page: - // About page: - "about_intro1": "This website was born after Patrick Bernier told me about " + - "a variant he invented, called 'l'Échiqueté', which involves mixed pieces, " + - "half-black and half-white. Back then in 2012, I developed a small website " + - "allowing to play by correspondance with this variant only. I already had " + - "in mind other variants to be added to the website, 'Zen chess' being the " + - "first on the list because it changed so much the thinking process that I " + - "was very curious to play it.", - "about_intro2": "After a long break, a prototype website allowing to play " + - "live games was tested in the end of 2017, with only a few players. " + - "One year later the first version of the final website was published: " + - "it offered three modes, against a human, a computer engine or analyzing, " + - "with about twenty variants available. The current website is a more modern " + - "rewriting of this initial version: it now has the basic features expected " + - "from a chess playing website :)", - "about_sitemap": "From the main Hall, you can see and talk to online players, " + - "send and accept challenges (live or correspondance), and also watch current " + - "games. If this is your first contact with chess variants, you probably should " + - "start with the 'Variants' page from the top menu: it explains all the rules " + - "and allows to observe sample games or play against basic bots. Finally, " + - "at any moment in a game you can click on the FEN string at the bottom to " + - "analyze the position. Try not to do that in live games ;)", - "about_contrib": "The source code " + - "is freely available on Github: the main ingredients are Express, Node.js, " + - "Vue and Webpack. The chosen DBMS is SQLite for now because of its simplicity. " + - "It can be easily changed if needed later. All contributions are welcome: " + - "", - "about_thanks": "A considerable number of people helped for this website, " + - "testing, giving ideas, motivating me to achieve this project. Thanks in " + - "relatively random order to Patrick Bernier, Frédéric Fradet, Olive Martin, " + - "Bevis Martin, Laurent Nouhaud and Christian Poisson for early testing and " + - "advices from 2012; to Yovann Gatineau and Anatole Vlachos for their " + - "enthusiasm about the website; to Jérôme Auclair who told me about the " + - "Dynamo variant; to Nathalie Merlin and lichess players O42, oceansideview, " + - "okei and opperwezen who tested " + - "the 2018/12 version; " + - "and of course to the websites " + - "schemingmind.com and " + - "chessvariants.com which are " + - "two great resources about variants. If I forget someone in this list, " + - "sorry and please tell me!", }; diff --git a/client/src/rules/Alice/en.pug b/client/src/translations/rules/Alice/en.pug similarity index 100% rename from client/src/rules/Alice/en.pug rename to client/src/translations/rules/Alice/en.pug diff --git a/client/src/rules/Alice/es.pug b/client/src/translations/rules/Alice/es.pug similarity index 100% rename from client/src/rules/Alice/es.pug rename to client/src/translations/rules/Alice/es.pug diff --git a/client/src/rules/Alice/fr.pug b/client/src/translations/rules/Alice/fr.pug similarity index 100% rename from client/src/rules/Alice/fr.pug rename to client/src/translations/rules/Alice/fr.pug diff --git a/client/src/rules/Antiking/en.pug b/client/src/translations/rules/Antiking/en.pug similarity index 100% rename from client/src/rules/Antiking/en.pug rename to client/src/translations/rules/Antiking/en.pug diff --git a/client/src/rules/Antiking/es.pug b/client/src/translations/rules/Antiking/es.pug similarity index 100% rename from client/src/rules/Antiking/es.pug rename to client/src/translations/rules/Antiking/es.pug diff --git a/client/src/rules/Antiking/fr.pug b/client/src/translations/rules/Antiking/fr.pug similarity index 100% rename from client/src/rules/Antiking/fr.pug rename to client/src/translations/rules/Antiking/fr.pug diff --git a/client/src/rules/Atomic/en.pug b/client/src/translations/rules/Atomic/en.pug similarity index 100% rename from client/src/rules/Atomic/en.pug rename to client/src/translations/rules/Atomic/en.pug diff --git a/client/src/rules/Atomic/es.pug b/client/src/translations/rules/Atomic/es.pug similarity index 100% rename from client/src/rules/Atomic/es.pug rename to client/src/translations/rules/Atomic/es.pug diff --git a/client/src/rules/Atomic/fr.pug b/client/src/translations/rules/Atomic/fr.pug similarity index 100% rename from client/src/rules/Atomic/fr.pug rename to client/src/translations/rules/Atomic/fr.pug diff --git a/client/src/rules/Baroque/en.pug b/client/src/translations/rules/Baroque/en.pug similarity index 100% rename from client/src/rules/Baroque/en.pug rename to client/src/translations/rules/Baroque/en.pug diff --git a/client/src/rules/Baroque/fr.pug b/client/src/translations/rules/Baroque/fr.pug similarity index 100% rename from client/src/rules/Baroque/fr.pug rename to client/src/translations/rules/Baroque/fr.pug diff --git a/client/src/rules/Berolina/en.pug b/client/src/translations/rules/Berolina/en.pug similarity index 100% rename from client/src/rules/Berolina/en.pug rename to client/src/translations/rules/Berolina/en.pug diff --git a/client/src/rules/Berolina/fr.pug b/client/src/translations/rules/Berolina/fr.pug similarity index 100% rename from client/src/rules/Berolina/fr.pug rename to client/src/translations/rules/Berolina/fr.pug diff --git a/client/src/rules/Checkered/en.pug b/client/src/translations/rules/Checkered/en.pug similarity index 100% rename from client/src/rules/Checkered/en.pug rename to client/src/translations/rules/Checkered/en.pug diff --git a/client/src/rules/Checkered/fr.pug b/client/src/translations/rules/Checkered/fr.pug similarity index 100% rename from client/src/rules/Checkered/fr.pug rename to client/src/translations/rules/Checkered/fr.pug diff --git a/client/src/rules/Chess960/en.pug b/client/src/translations/rules/Chess960/en.pug similarity index 100% rename from client/src/rules/Chess960/en.pug rename to client/src/translations/rules/Chess960/en.pug diff --git a/client/src/rules/Chess960/fr.pug b/client/src/translations/rules/Chess960/fr.pug similarity index 100% rename from client/src/rules/Chess960/fr.pug rename to client/src/translations/rules/Chess960/fr.pug diff --git a/client/src/rules/Crazyhouse/en.pug b/client/src/translations/rules/Crazyhouse/en.pug similarity index 100% rename from client/src/rules/Crazyhouse/en.pug rename to client/src/translations/rules/Crazyhouse/en.pug diff --git a/client/src/rules/Crazyhouse/fr.pug b/client/src/translations/rules/Crazyhouse/fr.pug similarity index 100% rename from client/src/rules/Crazyhouse/fr.pug rename to client/src/translations/rules/Crazyhouse/fr.pug diff --git a/client/src/rules/Dark/en.pug b/client/src/translations/rules/Dark/en.pug similarity index 100% rename from client/src/rules/Dark/en.pug rename to client/src/translations/rules/Dark/en.pug diff --git a/client/src/rules/Dark/fr.pug b/client/src/translations/rules/Dark/fr.pug similarity index 100% rename from client/src/rules/Dark/fr.pug rename to client/src/translations/rules/Dark/fr.pug diff --git a/client/src/rules/Extinction/en.pug b/client/src/translations/rules/Extinction/en.pug similarity index 100% rename from client/src/rules/Extinction/en.pug rename to client/src/translations/rules/Extinction/en.pug diff --git a/client/src/rules/Extinction/fr.pug b/client/src/translations/rules/Extinction/fr.pug similarity index 100% rename from client/src/rules/Extinction/fr.pug rename to client/src/translations/rules/Extinction/fr.pug diff --git a/client/src/rules/Grand/en.pug b/client/src/translations/rules/Grand/en.pug similarity index 100% rename from client/src/rules/Grand/en.pug rename to client/src/translations/rules/Grand/en.pug diff --git a/client/src/rules/Grand/fr.pug b/client/src/translations/rules/Grand/fr.pug similarity index 100% rename from client/src/rules/Grand/fr.pug rename to client/src/translations/rules/Grand/fr.pug diff --git a/client/src/rules/Losers/en.pug b/client/src/translations/rules/Losers/en.pug similarity index 100% rename from client/src/rules/Losers/en.pug rename to client/src/translations/rules/Losers/en.pug diff --git a/client/src/rules/Losers/fr.pug b/client/src/translations/rules/Losers/fr.pug similarity index 100% rename from client/src/rules/Losers/fr.pug rename to client/src/translations/rules/Losers/fr.pug diff --git a/client/src/rules/Magnetic/en.pug b/client/src/translations/rules/Magnetic/en.pug similarity index 100% rename from client/src/rules/Magnetic/en.pug rename to client/src/translations/rules/Magnetic/en.pug diff --git a/client/src/rules/Magnetic/fr.pug b/client/src/translations/rules/Magnetic/fr.pug similarity index 100% rename from client/src/rules/Magnetic/fr.pug rename to client/src/translations/rules/Magnetic/fr.pug diff --git a/client/src/rules/Marseille/en.pug b/client/src/translations/rules/Marseille/en.pug similarity index 100% rename from client/src/rules/Marseille/en.pug rename to client/src/translations/rules/Marseille/en.pug diff --git a/client/src/rules/Marseille/fr.pug b/client/src/translations/rules/Marseille/fr.pug similarity index 100% rename from client/src/rules/Marseille/fr.pug rename to client/src/translations/rules/Marseille/fr.pug diff --git a/client/src/rules/Switching/en.pug b/client/src/translations/rules/Switching/en.pug similarity index 100% rename from client/src/rules/Switching/en.pug rename to client/src/translations/rules/Switching/en.pug diff --git a/client/src/rules/Switching/fr.pug b/client/src/translations/rules/Switching/fr.pug similarity index 100% rename from client/src/rules/Switching/fr.pug rename to client/src/translations/rules/Switching/fr.pug diff --git a/client/src/rules/Upsidedown/en.pug b/client/src/translations/rules/Upsidedown/en.pug similarity index 100% rename from client/src/rules/Upsidedown/en.pug rename to client/src/translations/rules/Upsidedown/en.pug diff --git a/client/src/rules/Upsidedown/fr.pug b/client/src/translations/rules/Upsidedown/fr.pug similarity index 100% rename from client/src/rules/Upsidedown/fr.pug rename to client/src/translations/rules/Upsidedown/fr.pug diff --git a/client/src/rules/Wildebeest/en.pug b/client/src/translations/rules/Wildebeest/en.pug similarity index 100% rename from client/src/rules/Wildebeest/en.pug rename to client/src/translations/rules/Wildebeest/en.pug diff --git a/client/src/rules/Wildebeest/fr.pug b/client/src/translations/rules/Wildebeest/fr.pug similarity index 100% rename from client/src/rules/Wildebeest/fr.pug rename to client/src/translations/rules/Wildebeest/fr.pug diff --git a/client/src/rules/Zen/en.pug b/client/src/translations/rules/Zen/en.pug similarity index 100% rename from client/src/rules/Zen/en.pug rename to client/src/translations/rules/Zen/en.pug diff --git a/client/src/rules/Zen/fr.pug b/client/src/translations/rules/Zen/fr.pug similarity index 100% rename from client/src/rules/Zen/fr.pug rename to client/src/translations/rules/Zen/fr.pug diff --git a/client/src/views/About.vue b/client/src/views/About.vue index 002453d7..36c01ef3 100644 --- a/client/src/views/About.vue +++ b/client/src/views/About.vue @@ -2,11 +2,7 @@ main .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - p {{ st.tr["about_intro1"] }} - p {{ st.tr["about_intro2"] }} - p {{ st.tr["about_sitemap"] }} - p(v-html="st.tr['about_contrib']") - p(v-html="st.tr['about_thanks']") + div(v-html="content") diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 262823df..00414d91 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -48,6 +48,7 @@ export default { drawOffer: "", //TODO: use for button style people: [], //players + observers lastate: undefined, //used if opponent send lastate before game is ready + repeat: {}, //detect position repetition }; }, watch: { @@ -407,6 +408,7 @@ export default { oppid: (myIdx < 0 ? undefined : game.players[1-myIdx].uid), } ); + this.repeat = {}; //reset if (!!this.lastate) //lastate arrived before game was loaded: this.processLastate(); callback(); @@ -505,6 +507,16 @@ export default { //TODO: (Vue3) just this.game.clocks[colorIdx] += addTime; this.$set(this.game.clocks, colorIdx, this.game.clocks[colorIdx] + addTime); this.game.initime[nextIdx] = Date.now(); + // If repetition detected, consider that a draw offer was received: + const fenObj = V.ParseFen(move.fen); + let repIdx = fenObj.position + "_" + fenObj.turn; + if (!!fenObj.flags) + repIdx += "_" + fenObj.flags; + this.repeat[repIdx] = (!!this.repeat[repIdx] + ? this.repeat[repIdx]+1 + : 1); + if (this.repeat[repIdx] >= 3) + this.drawOffer = "received"; //TODO: will print "mutual agreement"... }, gameOver: function(score) { this.game.mode = "analyze"; @@ -521,5 +533,15 @@ export default { diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index d65de3d7..24ec364f 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -598,5 +598,9 @@ export default { diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue index e7d1acac..33ef6a57 100644 --- a/client/src/views/Rules.vue +++ b/client/src/views/Rules.vue @@ -11,8 +11,8 @@ main button(v-show="gameInProgress" @click="() => stopGame()") | Stop game .section-content(v-show="display=='rules'" v-html="content") - ComputerGame(v-show="display=='computer'" :game-info="gameInfo" - @game-over="stopGame" @game-stopped="gameStopped") + ComputerGame(v-show="display=='computer'" :game-info="gameInfo" + @game-over="stopGame" @game-stopped="gameStopped")