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") ⇅
#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")
</template>
},
};
</script>
+
+<style lang="sass">
+#modal-eog+div .card
+ overflow: hidden
+#pgnDiv, #fenDiv
+ text-align: center
+ margin-left: auto
+ margin-right: auto
+@media screen and (min-width: 768px)
+ #controls
+ width: 400px
+@media screen and (max-width: 767px)
+ .game
+ width: 100%
+#controls
+ margin-top: 10px
+ button
+ display: inline-block
+ width: 20%
+ margin: 0
+#boardContainer
+ margin-top: 5px
+ >div
+ margin-left: auto
+ margin-right: auto
+</style>
<style lang="sass" scoped>
.moves-list
min-width: 250px
+td.highlight-lm
+ background-color: plum
</style>
+++ /dev/null
-button#submit
- display: inline-flex
- //i
- line-height: 36px
- span
- margin-right: 7px
-
-#dialog
- clear: both
+++ /dev/null
-#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
-
-@import users
-
html, *
font-family: "Open Sans", Arial, sans-serif
--back-color: #f2f2f2
+++ /dev/null
-// 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
--- /dev/null
+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!
// 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": "<a href='https://github.com/yagu0/vchess'>The source code</a> " +
- "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> " +
- "<li>Styling: client/src/stylesheets/ and <style> part of .vue " +
- "files in client/src/{components,views}</li> " +
- "<li>Back-end and front-end code: a lot can be improved! Feel free to send " +
- "pull requests :)</li></ul>",
- "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 " +
- "<a href='https://lichess.org/forum/general-chess-discussion/" +
- "vchessclub--play-chess-variants?page=10'>the 2018/12 version</a>; " +
- "and of course to the websites " +
- "<a href='https://schemingmind.com/'>schemingmind.com</a> and " +
- "<a href='https://www.chessvariants.com/'>chessvariants.com</a> which are " +
- "two great resources about variants. If I forget someone in this list, " +
- "sorry and please tell me!",
};
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")
</template>
<script>
data: function() {
return {
st: store.state,
+ content: "",
};
},
+ mounted: function() {
+ this.content =
+ require("raw-loader!@/translations/about/" + this.st.lang + ".pug")
+ // Next two lines fix a weird issue after last update (2019-11)
+ .replace(/\\[n"]/g, " ")
+ .replace('module.exports = "', '').replace(/"$/, "");
+ },
};
</script>
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: {
oppid: (myIdx < 0 ? undefined : game.players[1-myIdx].uid),
}
);
+ this.repeat = {}; //reset
if (!!this.lastate) //lastate arrived before game was loaded:
this.processLastate();
callback();
//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";
</script>
<style lang="sass">
-// TODO
+.connected
+ background-color: green
+
+.disconnected
+ background-color: red
+
+.white-turn
+ background-color: white
+
+.black-turn
+ background-color: black
</style>
<style lang="sass">
#newGame
display: block
- margin: auto
+ margin: 10px auto 5px auto
+#chat > .card
+ max-width: 100%
+ margin: 0;
+ border: none;
</style>
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")
</template>
<script>
};
// (AJAX) Request to get rules content (plain text, HTML)
this.content =
- require("raw-loader!@/rules/" + vname + "/" + this.st.lang + ".pug")
+ require("raw-loader!@/translations/rules/" + vname + "/" + this.st.lang + ".pug")
// Next two lines fix a weird issue after last update (2019-11)
.replace(/\\[n"]/g, " ")
.replace('module.exports = "', '').replace(/"$/, "")
projects / vchess.git / commitdiff