From 9a3c9f790aa28fd4708faefe41b4624173922c8e Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Fri, 21 Dec 2018 18:18:53 +0100 Subject: [PATCH] Progression in styles + initiate translation process --- public/images/favicon/{README => SOURCE} | 0 public/images/flags/SOURCE | 1 + public/images/flags/de.svg | 5 + public/images/flags/en.svg | 15 + public/images/flags/es.svg | 544 ++++++++++++++++++ public/images/flags/fr.svg | 7 + public/images/flags/it.svg | 7 + public/images/pieces/{README => SOURCE} | 0 public/javascripts/index.js | 4 + public/javascripts/variant.js | 13 +- public/stylesheets/index.sass | 101 +++- public/stylesheets/layout.sass | 17 +- public/stylesheets/variant.sass | 22 +- routes/all.js | 34 +- views/index.pug | 151 +++-- views/layout.pug | 2 +- views/rules/{Alice.pug => Alice/en.pug} | 0 views/rules/Alice/fr.pug | 61 ++ views/rules/{Antiking.pug => Antiking/en.pug} | 0 views/rules/{Atomic.pug => Atomic/en.pug} | 0 .../rules/{Checkered.pug => Checkered/en.pug} | 0 views/rules/{Chess960.pug => Chess960/en.pug} | 3 +- .../{Crazyhouse.pug => Crazyhouse/en.pug} | 0 .../{Extinction.pug => Extinction/en.pug} | 0 views/rules/{Grand.pug => Grand/en.pug} | 0 views/rules/{Loser.pug => Loser/en.pug} | 0 views/rules/{Magnetic.pug => Magnetic/en.pug} | 0 .../rules/{Switching.pug => Switching/en.pug} | 0 views/rules/{Ultima.pug => Ultima/en.pug} | 0 .../{Wildebeest.pug => Wildebeest/en.pug} | 0 views/rules/{Zen.pug => Zen/en.pug} | 0 views/variant.pug | 11 + views/welcome/en.pug | 51 ++ views/welcome/fr.pug | 51 ++ 34 files changed, 970 insertions(+), 130 deletions(-) rename public/images/favicon/{README => SOURCE} (100%) create mode 100644 public/images/flags/SOURCE create mode 100644 public/images/flags/de.svg create mode 100644 public/images/flags/en.svg create mode 100644 public/images/flags/es.svg create mode 100644 public/images/flags/fr.svg create mode 100644 public/images/flags/it.svg rename public/images/pieces/{README => SOURCE} (100%) rename views/rules/{Alice.pug => Alice/en.pug} (100%) create mode 100644 views/rules/Alice/fr.pug rename views/rules/{Antiking.pug => Antiking/en.pug} (100%) rename views/rules/{Atomic.pug => Atomic/en.pug} (100%) rename views/rules/{Checkered.pug => Checkered/en.pug} (100%) rename views/rules/{Chess960.pug => Chess960/en.pug} (99%) rename views/rules/{Crazyhouse.pug => Crazyhouse/en.pug} (100%) rename views/rules/{Extinction.pug => Extinction/en.pug} (100%) rename views/rules/{Grand.pug => Grand/en.pug} (100%) rename views/rules/{Loser.pug => Loser/en.pug} (100%) rename views/rules/{Magnetic.pug => Magnetic/en.pug} (100%) rename views/rules/{Switching.pug => Switching/en.pug} (100%) rename views/rules/{Ultima.pug => Ultima/en.pug} (100%) rename views/rules/{Wildebeest.pug => Wildebeest/en.pug} (100%) rename views/rules/{Zen.pug => Zen/en.pug} (100%) create mode 100644 views/welcome/en.pug create mode 100644 views/welcome/fr.pug diff --git a/public/images/favicon/README b/public/images/favicon/SOURCE similarity index 100% rename from public/images/favicon/README rename to public/images/favicon/SOURCE diff --git a/public/images/flags/SOURCE b/public/images/flags/SOURCE new file mode 100644 index 00000000..98d1c141 --- /dev/null +++ b/public/images/flags/SOURCE @@ -0,0 +1 @@ +http://flag-icon-css.lip.is/ diff --git a/public/images/flags/de.svg b/public/images/flags/de.svg new file mode 100644 index 00000000..1acf302d --- /dev/null +++ b/public/images/flags/de.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/flags/en.svg b/public/images/flags/en.svg new file mode 100644 index 00000000..d98b6cce --- /dev/null +++ b/public/images/flags/en.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/images/flags/es.svg b/public/images/flags/es.svg new file mode 100644 index 00000000..8791e51a --- /dev/null +++ b/public/images/flags/es.svg @@ -0,0 +1,544 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flags/fr.svg b/public/images/flags/fr.svg new file mode 100644 index 00000000..712c8a5d --- /dev/null +++ b/public/images/flags/fr.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/flags/it.svg b/public/images/flags/it.svg new file mode 100644 index 00000000..5cb92aaa --- /dev/null +++ b/public/images/flags/it.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/pieces/README b/public/images/pieces/SOURCE similarity index 100% rename from public/images/pieces/README rename to public/images/pieces/SOURCE diff --git a/public/javascripts/index.js b/public/javascripts/index.js index e460f868..13004f0e 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -88,5 +88,9 @@ new Vue({ setCookie('visited', '1'); document.getElementById('modalWelcome').checked = false; }, + setLanguage: function(e) { + setCookie("lang", e.target.value); + location.reload(); //to include the right .pug file + }, }, }); diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js index e9e956ca..03dbbdd3 100644 --- a/public/javascripts/variant.js +++ b/public/javascripts/variant.js @@ -1,21 +1,12 @@ new Vue({ el: "#variantPage", data: { - display: getCookie("display-"+variant,""), //default: do not show anything... + display: "game", //default: play! problem: undefined, //current problem in view }, methods: { toggleDisplay: function(elt) { - if (this.display == elt) - { - this.display = ""; //hide - setCookie("display-"+variant, ""); - } - else - { - this.display = elt; //show - setCookie("display-"+variant, elt); - } + this.display = elt; //show }, showProblem: function(problemTxt) { this.problem = JSON.parse(problemTxt); diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass index 331e8f68..18db3c95 100644 --- a/public/stylesheets/index.sass +++ b/public/stylesheets/index.sass @@ -1,41 +1,108 @@ -#main-title - font-style: italic +.container + padding: 0 + +.row + div + padding: 0 + +#header + width: 100% background: linear-gradient(#e66465, #9198e5) - margin-top: 0 - margin-left: 0 - margin-right: 0 + 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: inline-block + padding: 3px + border: 1px solid black; + margin: 27px 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 - span - padding-left: 10px - padding-right: 15px + padding-top: 25px + @media screen and (max-width: 767px) + padding-top: 7px + p + font-weight: bold + padding: 0 + border: none + margin-top: 22px + font-size: 1.5em + @media screen and (max-width: 767px) + margin-top: 10px + font-size: 1em + +#helpMenu + float: right + cursor: pointer + @media screen and (max-width: 767px) + .info-container + p + margin-right: 5px -// TODO: box-shadow or box-sizeing ? -//https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge +#flagMenu + float: right + cursor: pointer + 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 + +// TODO: box-shadow or box-sizing ? https://stackoverflow.com/a/13517809 .variant box-sizing: border-box border: 1px solid brown background-color: lightyellow + &:hover + background-color: yellow a color: #663300 + text-decoration: none .boxtitle font-weight: bold + margin-bottom: 0 + .description + @media screen and (max-width: 767px) + margin-top: 0 -#needHelp - cursor: pointer +#b4welcome + max-width: 320px #readThis - color: blue + margin-top: 0 + color: var(--a-link-color) text-decoration: underline cursor: pointer -#b4welcome - max-width: 320px - #welcome - max-width: 90vw + max-width: 767px @media screen and (max-width: 767px) max-width: 100vw + img + width: 75% + @media screen and (max-width: 767px) + width: 100% + max-width: 552px ul list-style-type: none // TODO: bad practice, use table to align things... diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass index cdcd81e0..52805f29 100644 --- a/public/stylesheets/layout.sass +++ b/public/stylesheets/layout.sass @@ -1,12 +1,16 @@ html, * font-family: "Open Sans", Arial, sans-serif --back-color: #f2f2f2 - --a-link-color: #0039e6 + --a-link-color: blue + --a-visited-color: blue body padding: 0 min-width: 320px +a + text-decoration: underline + .text-center text-align: center @@ -25,14 +29,9 @@ body .smallfont font-size: 0.8em +.bigfont + font-size: 1.2em + [type="checkbox"].modal+div .card max-width: 767px max-height: 100vh - -// TODO: unused -// Jump lines only if screen is large enough -.conditional-jump - display: block -@media screen and (max-width: 767px) - .conditional-jump - display: inline diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index 505e26fa..3631a6ed 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -11,6 +11,22 @@ margin-right: 0 padding: 0 3px +#menuBar + font-style: italic + background: linear-gradient(#e66465, #9198e5) + margin: 0 0 10px 0 + @media screen and (min-width: 768px) + width: 100% + img + height: 30px + padding-top: 10px + span + padding-left: 10px + padding-right: 15px + +#menuContainer + height: 48px + //TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...) .warn @@ -21,12 +37,12 @@ button.playing background-color: #ffcc99 - :hover + &:hover background-color: #ffcc99 button.seek background-color: #cc99ff - :hover + &:hover background-color: #cc99ff figure.diagram-container @@ -133,7 +149,7 @@ div.board11 img cursor: pointer background-color: #e6ee9c - :hover + &:hover background-color: skyblue .choice-piece width: 90% diff --git a/routes/all.js b/routes/all.js index d5b4e569..b2318135 100644 --- a/routes/all.js +++ b/routes/all.js @@ -5,6 +5,33 @@ const sqlite3 = require('sqlite3');//.verbose(); const db = new sqlite3.Database('db/vchess.sqlite'); const sanitizeHtml = require('sanitize-html'); +const supportedLang = ["fr","en"]; +function selectLanguage(req, res) +{ + // If preferred language already set: + if (!!req.cookies["lang"]) + return req.cookies["lang"]; + + // Else: search and set it + const langString = req.headers["accept-language"]; + let langArray = langString + .replace(/;q=[0-9.]+/g, "") //priority + .replace(/-[A-Z]+/g, "") //region (skipped for now...) + .split(",") //may have some duplicates, but removal is too costly + let bestLang = "en"; //default: English + for (let lang of langArray) + { + if (supportedLang.includes(lang)) + { + bestLang = lang; + break; + } + } + // Cookie expires in 183 days (expressed in milliseconds) + res.cookie('lang', bestLang, { maxAge: 183*24*3600*1000 }); + return bestLang; +} + // Home router.get('/', function(req, res, next) { db.serialize(function() { @@ -13,7 +40,9 @@ router.get('/', function(req, res, next) { return next(err); res.render('index', { title: 'club', - variantArray: variants, //JSON.stringify(variants) + variantArray: variants, + lang: selectLanguage(req, res), + languages: supportedLang, }); }); }); @@ -48,7 +77,8 @@ router.get("/:vname([a-zA-Z0-9]+)", (req,res,next) => { router.get("/rules/:variant([a-zA-Z0-9]+)", (req,res) => { if (!req.xhr) return res.json({errmsg: "Unauthorized access"}); - res.render("rules/" + req.params["variant"]); + const lang = selectLanguage(req, res); + res.render("rules/" + req.params["variant"] + "/" + lang); }); // Fetch 10 previous or next problems (AJAX) diff --git a/views/index.pug b/views/index.pug index 011e4e96..5059f515 100644 --- a/views/index.pug +++ b/views/index.pug @@ -6,96 +6,77 @@ block css block content .container#indexPage .row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - h1#main-title.text-center + #header.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + #mainTitle img(src="/images/index/unicorn.svg") - span vchess.club + .info-container + p vchess.club img(src="/images/index/wildebeest.svg") - h2#needHelp.text-center( - onClick="document.getElementById('modalHelp').checked=true") - | Need help ? - input#modalHelp.modal(type="checkbox") - div(role="dialog") - #help.card - label.modal-close(for="modalHelp") - .section - p.emphasis First: watch #[a(href="/demo.webm") demo video] ! - p Then click on a variant... Reminder: - ul - li All games start with a random assymetric position. - li Games are untimed, and played anonymously. - li No chat while playing, to focus on the moves. - .section - h3.red Bug report - p - | If you find a bug in a game, please follow this procedure: #[br] - | 1. stop playing: click on the resign button; #[br] - | 2. download the game as PGN; #[br] - | 3. send an email to - a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report") - | contact@vchess.club - | with comments + PGN attached. - input#modalB4welcome.modal(type="checkbox") - div(role="dialog") - #b4welcome.card.text-center - label.modal-close(for="modalB4welcome") - h3.blue First visit? - p Please - span#readThis(@click="showWelcomeMsg") read this - span  before playing! - input#modalWelcome.modal(type="checkbox") - div(role="dialog") - #welcome.card.text-center - label.modal-close(for="modalWelcome") - h3.blue.section Welcome to v[ariant]chess.club! - .section - p A fun place to play chess variants in real time. - p But wait... what is a chess variant? - img(src="/images/Hexagonal_chess.svg") - p. - As suggested by the picture, a variant setup generally - looks more or less like a chessboard with regular pieces - (otherwise it's no longer a variant but a whole new game). - p.emphasis.purple However... - p Each variant has its own new rules, which can involve - table.list-table - tbody - tr - td * different pieces movements - tr - td * different chessboard(s) - tr - td * new pieces - tr - td * moves side effects - tr - td ...and so on - .section - p. - Example: imagine that a capture is an atomic explosion, wiping all - adjacent squares – except the pawns, which as cockroaches can - resist this kind of event. - p Also state a goal: make the opponent's king explode. - p → Congrats, you defined Atomic chess! (Playable here) - .section - p.emphasis.purple OK, this all sounds interesting, but why would that be fun? - p. - Because all games here start with a random setup: no more boring - openings memorization, you have to rely on your chess skills only. - p Moreover, I claim that the chosen variants here are fun to play :) - - - var wikipediaUrl = "https://en.wikipedia.org/wiki/" + - "List_of_chess_variants#/media/File:Hexagonal_chess.svg"; - p. - For informations about hundreds (if not thousands) of variants, you - can visit the excellent - #[a(href="https://www.chessvariants.com/") chessvariants] website. - p#disableMsg(@click="markAsVisited") - | Click here to not show this message next time - p.smallfont Image credit: #[a(href=wikipediaUrl) Wikipedia] + // TODO: flags, translations + #flagMenu(onClick="document.getElementById('modalLang').checked=true") + img(src="/images/flags/" + lang + ".svg") + #helpMenu(onClick="document.getElementById('modalHelp').checked=true") + .info-container + p Help .row my-variant-summary(v-for="(v,idx) in sortedCounts" v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name") + // Modals: + input#modalHelp.modal(type="checkbox") + div(role="dialog") + #help.card + label.modal-close(for="modalHelp") + .section + p.emphasis.bigfont First: watch #[a(href="/demo.webm") demo video] ! + p Then click on a variant... Reminder: + ul + li All games start with a random assymetric position. + li Games are untimed, and played anonymously. + li No chat while playing, to focus on the moves. + .section + h3.red Bug report + p + | Please send an email to + a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report") + | contact@vchess.club + | . + input#modalLang.modal(type="checkbox") + div(role="dialog") + #language.card + label.modal-close(for="modalLang") + .section + fieldset + - + var langName = { + "fr": "French", + "en": "English", + } + label(for="langSelect") Preferred language? + select#langSelect(@change="setLanguage") + each langCode in languages + option(value=langCode selected=(lang==langCode)) + =langName[langCode] + .section + h3.blue Contribute + p + | Browse the + a(href="https://github.com/yagu0/vchess/tree/master/views") + | github repository + | : welcome/en.pug and all files rules/*/en.pug + | should be translated. When it's done, send me the files: + a(href="mailto:contact@vchess.club?subject=[vchess.club] translation") + | contact@vchess.club + | . Thanks! + input#modalB4welcome.modal(type="checkbox") + div(role="dialog") + #b4welcome.card.text-center + h3.blue First visit? + p#readThis(@click="showWelcomeMsg") >>> Please read this <<< + case lang + when "en" + include welcome/en.pug + when "fr" + include welcome/fr.pug block javascripts script. diff --git a/views/layout.pug b/views/layout.pug index 0416766d..f49657ef 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -1,5 +1,5 @@ doctype html -html(lang="fr") +html head meta(charset="UTF-8") diff --git a/views/rules/Alice.pug b/views/rules/Alice/en.pug similarity index 100% rename from views/rules/Alice.pug rename to views/rules/Alice/en.pug diff --git a/views/rules/Alice/fr.pug b/views/rules/Alice/fr.pug new file mode 100644 index 00000000..ace5bd79 --- /dev/null +++ b/views/rules/Alice/fr.pug @@ -0,0 +1,61 @@ +p.boxed + | Chaque move played ends up on another board (the "other side of the mirror"). + | So there are two boards. All pieces start on board 1. + +h3 Specifications + +ul + li Chessboard: standard. + li Material: standard + Alice pieces. + li Non-capturing moves: standard. + li Special moves: standard. + li Captures: standard (if on same board). + li End of game: standard. + +h3 Basics + +p + | Two boards are used in this variant. Pieces from board 2 are represented on + | the main board, upside down. + | Any move played must be valid on the board it is played on. + | In addition, the final square should not be occupied by a piece from the other board + | (thus allowing to represent all on one board). + +p Notation for Alice pieces was chosen as follow: +ul + li Pawn : S + li Rook : U + li Knight : O + li Bishop : C + li Queen : T + li King : L + +figure.diagram-container + .diagram + | fen:rnbqkbnr/ppp1pppp/8/8/2p5/5O2/PP1PPPPP/RNBQKB1R: + figcaption After the moves 1.Nf3 Pd5 2.Pc4 Sxc4 + +h3 End of the game + +p + | As in the orthodox game, win by checkmating the king. It shouldn't be able to + | escape the check, not even by moving to the other board. + +p. + Note: en-passant and castle occur as they do in the standard game. + More specifically, en-passant is possible regardless of the worlds pawns are in. + This is justified because pawns "go through the mirror" while moving, and can + thus be captured either right after or just before they pass the mirror. + Castling should be legal according to orthodox rules on the board 1 (it cannot + occur on board 2, because it would mean king and rook moved). Moreover, the + king cannot be in check on board 2 after castling. + +h3 Credits + +p + | Alice chess pages on + a(href="https://www.chessvariants.com/other.dir/alice.html") chessvariants.com + | and on + a(href="https://www.schemingmind.com/journalarticle.aspx?article_id=9") + | schemingmind.com + | . diff --git a/views/rules/Antiking.pug b/views/rules/Antiking/en.pug similarity index 100% rename from views/rules/Antiking.pug rename to views/rules/Antiking/en.pug diff --git a/views/rules/Atomic.pug b/views/rules/Atomic/en.pug similarity index 100% rename from views/rules/Atomic.pug rename to views/rules/Atomic/en.pug diff --git a/views/rules/Checkered.pug b/views/rules/Checkered/en.pug similarity index 100% rename from views/rules/Checkered.pug rename to views/rules/Checkered/en.pug diff --git a/views/rules/Chess960.pug b/views/rules/Chess960/en.pug similarity index 99% rename from views/rules/Chess960.pug rename to views/rules/Chess960/en.pug index 0c575289..4616ab00 100644 --- a/views/rules/Chess960.pug +++ b/views/rules/Chess960/en.pug @@ -173,5 +173,4 @@ p. Note: this last way to end a game is not implemented, because it quite seldom occurs, does not generalize so well to variants (it depends), and more important because games played on this website are not official tournament games. If you feel like - manoeuvring for 200 moves and your opponent isn't bored, then why would I stop you? - ☺ + manoeuvring for 200 moves and your opponent isn't bored, then why would I stop you? :) diff --git a/views/rules/Crazyhouse.pug b/views/rules/Crazyhouse/en.pug similarity index 100% rename from views/rules/Crazyhouse.pug rename to views/rules/Crazyhouse/en.pug diff --git a/views/rules/Extinction.pug b/views/rules/Extinction/en.pug similarity index 100% rename from views/rules/Extinction.pug rename to views/rules/Extinction/en.pug diff --git a/views/rules/Grand.pug b/views/rules/Grand/en.pug similarity index 100% rename from views/rules/Grand.pug rename to views/rules/Grand/en.pug diff --git a/views/rules/Loser.pug b/views/rules/Loser/en.pug similarity index 100% rename from views/rules/Loser.pug rename to views/rules/Loser/en.pug diff --git a/views/rules/Magnetic.pug b/views/rules/Magnetic/en.pug similarity index 100% rename from views/rules/Magnetic.pug rename to views/rules/Magnetic/en.pug diff --git a/views/rules/Switching.pug b/views/rules/Switching/en.pug similarity index 100% rename from views/rules/Switching.pug rename to views/rules/Switching/en.pug diff --git a/views/rules/Ultima.pug b/views/rules/Ultima/en.pug similarity index 100% rename from views/rules/Ultima.pug rename to views/rules/Ultima/en.pug diff --git a/views/rules/Wildebeest.pug b/views/rules/Wildebeest/en.pug similarity index 100% rename from views/rules/Wildebeest.pug rename to views/rules/Wildebeest/en.pug diff --git a/views/rules/Zen.pug b/views/rules/Zen/en.pug similarity index 100% rename from views/rules/Zen.pug rename to views/rules/Zen/en.pug diff --git a/views/variant.pug b/views/variant.pug index 803c7de4..6c2e04b5 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -6,6 +6,17 @@ block css block content .container#variantPage + .row //TODO: this thing + game/problems/rules iin variant page. Here just h1 + #menuContainer.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + label.drawer-toggle(for="drawer-control") + input#drawer-control.drawer(type="checkbox") + #menuBar + label.drawer-close(for="drawer-control") + a(href="/") + img(src="/images/index/unicorn.svg") + span vchess.club + img(src="/images/index/wildebeest.svg") + a(href="#") Home222 .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 label.drawer-toggle(for="drawer-control") diff --git a/views/welcome/en.pug b/views/welcome/en.pug new file mode 100644 index 00000000..28fb943e --- /dev/null +++ b/views/welcome/en.pug @@ -0,0 +1,51 @@ +input#modalWelcome.modal(type="checkbox") +div(role="dialog") + #welcome.card.text-center + label.modal-close(for="modalWelcome") + h3.blue.section Welcome to v[ariant]chess.club! + .section + p A fun place to play chess variants in real time. + p But wait... what is a chess variant? + img(src="/images/Hexagonal_chess.svg") + p. + As suggested by the picture, a variant setup generally looks + more or less like a chessboard with regular pieces + (otherwise it's no longer a variant but a whole new game). + p.emphasis.purple However... + p Each variant has its own new rules, which can involve + table.list-table + tbody + tr + td * different pieces movements + tr + td * different chessboard(s) + tr + td * new pieces + tr + td * moves side effects + tr + td ...and so on + .section + p. + Example: imagine that a capture is an atomic explosion, wiping all + adjacent squares – except the pawns, which as cockroaches can + resist this kind of event. + p Also state a goal: make the opponent's king explode. + p → Congrats, you defined Atomic chess! (Playable here) + .section + p.emphasis.purple + | OK, this all sounds interesting, but why would that be fun? + p. + Because all games here start with a random setup: no more boring + openings memorization, you have to rely on your chess skills only. + No game is like another one. + - + var wikipediaUrl = "https://en.wikipedia.org/wiki/" + + "List_of_chess_variants#/media/File:Hexagonal_chess.svg"; + p. + For informations about hundreds (if not thousands) of variants, you + can visit the excellent + #[a(href="https://www.chessvariants.com/") chessvariants] website. + p#disableMsg(@click="markAsVisited") + | Click here to not show this message next time + p.smallfont Image credit: #[a(href=wikipediaUrl) Wikipedia] diff --git a/views/welcome/fr.pug b/views/welcome/fr.pug new file mode 100644 index 00000000..d1bff4bf --- /dev/null +++ b/views/welcome/fr.pug @@ -0,0 +1,51 @@ +input#modalWelcome.modal(type="checkbox") +div(role="dialog") + #welcome.card.text-center + label.modal-close(for="modalWelcome") + h3.blue.section Bienvenue sur v[ariant]chess.club! + .section + p Un site où jouer à des variantes du jeu d'échecs en direct. + p Mais attendez... c'est quoi une "variante" ? + img(src="/images/Hexagonal_chess.svg") + p. + Comme suggéré par l'image, le point de départ d'une variante + ressemble en général à un échiquier avec les pièces habituelles + (sinon ce n'est plus une variante, mais un nouveau jeu). + p.emphasis.purple Cependant... + p Chaque variante a ses propres règles, qui peuvent définir + table.list-table + tbody + tr + td * différents déplacements de pièces + tr + td * différent(s) échiquier(s) + tr + td * de nouvelles pièces + tr + td * des effets de bord sur les coups + tr + td ...etc + .section + p. + Exemple: imaginez qu'une capture soit une explosion atomique, + détruisant tout ce qui se trouve sur les 8 cases à proximité – + sauf les pions, qui tels les cafards résistent à ce genre de truc. + p Définissez également un but : faire exploser le roi adverse. + p → Bravo, vous venez de décrire les échecs atomiques ! (Jouable ici) + .section + p.emphasis.purple + | OK ça a l'air intéressant, mais pourquoi ce serait amusant ?! + p. + Car toutes les parties démarrent avec une position aléatoire : terminées + les laborieuses mémorisations d'ouverture, vous pouvez exprimer vos talents + échiquéens dès le premier coup ! Aucune partie ne ressemble à une autre. + - + var wikipediaUrl = "https://en.wikipedia.org/wiki/" + + "List_of_chess_variants#/media/File:Hexagonal_chess.svg"; + p. + Pour s'informer sur des centaines de variantes (au moins), je vous invite à + visiter l'excellent site + #[a(href="https://www.chessvariants.com/") chessvariants]. + p#disableMsg(@click="markAsVisited") + | Cliquer ici pour ne pas montrer ce message la prochaine fois + p.smallfont Crédit image: #[a(href=wikipediaUrl) Wikipedia] -- 2.44.0