From: Benjamin Auder Date: Sat, 8 Dec 2018 17:12:26 +0000 (+0100) Subject: User-friendly vchess presentation on index + some code cleaning X-Git-Url: https://git.auder.net/css/vendor/img/common.css?a=commitdiff_plain;h=b019d603c837db3e3c2d294a383b6ca1cf4705d4;p=vchess.git User-friendly vchess presentation on index + some code cleaning --- diff --git a/public/images/Hexagonal_chess.svg b/public/images/Hexagonal_chess.svg new file mode 100644 index 00000000..fe8626c2 --- /dev/null +++ b/public/images/Hexagonal_chess.svg @@ -0,0 +1,2415 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 9ecba0cb..07202550 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -16,7 +16,7 @@ Vue.component('my-game', { fenStart: "", incheck: [], pgnTxt: "", - expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false, + expert: getCookie("expert") === "1" ? true : false, gameId: "", //used to limit computer moves' time }; }, @@ -484,10 +484,7 @@ Vue.component('my-game', { created: function() { const url = socketUrl; const continuation = (localStorage.getItem("variant") === variant); - this.myid = continuation - ? localStorage.getItem("myid") - // random enough (TODO: function) - : (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase(); + this.myid = continuation ? localStorage.getItem("myid") : getRandString(); if (!continuation) { // HACK: play a small silent sound to allow "new game" sound later if tab not focused @@ -683,7 +680,7 @@ Vue.component('my-game', { toggleExpertMode: function(e) { this.getRidOfTooltip(e.currentTarget); this.expert = !this.expert; - document.cookie = "expert=" + (this.expert ? "1" : "0"); + setCookie("expert", this.expert ? "1" : "0"); }, resign: function() { if (this.mode == "human" && this.oppConnected) @@ -724,8 +721,7 @@ Vue.component('my-game', { } return; } - // random enough (TODO: function) - this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase(); + this.gameId = getRandString(); this.vr = new VariantRules(fen, moves || []); this.score = "*"; this.pgnTxt = ""; //redundant with this.score = "*", but cleaner diff --git a/public/javascripts/index.js b/public/javascripts/index.js index 12bcf644..d95f96a5 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -24,8 +24,7 @@ new Vue({ }, created: function() { const url = socketUrl; - // random enough (TODO: function) - const sid = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase(); + const sid = getRandString(); this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); const socketMessageListener = msg => { const data = JSON.parse(msg.data); @@ -70,5 +69,9 @@ new Vue({ } // ...ignore everything else }; + // Show welcome dialog box if "first visit" + const visited = getCookie("visited"); + if (!visited || visited !== "1") + document.getElementById("modal-welcome").checked = true; }, }); diff --git a/public/javascripts/utils/misc.js b/public/javascripts/utils/misc.js new file mode 100644 index 00000000..89a545cf --- /dev/null +++ b/public/javascripts/utils/misc.js @@ -0,0 +1,30 @@ +// Source: https://www.quirksmode.org/js/cookies.html + +function setCookie(name,value) +{ + var date = new Date(); + date.setTime(date.getTime()+(183*24*60*60*1000)); //6 months + var expires = "; expires="+date.toGMTString(); + document.cookie = name+"="+value+expires+"; path=/"; +} + +function getCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for (var i=0;i < ca.length;i++) + { + var c = ca[i]; + while (c.charAt(0)==' ') + c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) + return c.substring(nameEQ.length,c.length); + } + return null; +} + +function getRandString() +{ + // Random enough (for socket and game IDs) + return (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)) + .toUpperCase(); +} diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass index 8658bfac..4176bf8e 100644 --- a/public/stylesheets/index.sass +++ b/public/stylesheets/index.sass @@ -15,3 +15,17 @@ .card > h3.section.red color: #cc3300 + +#welcome + max-height: 100vh + max-width: 90vw + +@media screen and (max-width: 400px) + #welcome + max-width: 100vw + +#welcome ul + list-style-type: none + +#welcome ul > li + font-family: monospace diff --git a/views/index.pug b/views/index.pug index 1caded72..99a5b561 100644 --- a/views/index.pug +++ b/views/index.pug @@ -7,12 +7,14 @@ block content .container#indexPage .row .col-sm-12 - h1.text-center Welcome to v[ariant] chess club ! - h2.help.text-center(onClick="document.getElementById('modal-control').checked=true") Help ? - input#modal-control.modal(type="checkbox") + h1.text-center(style="font-style:italic") Welcome to v[ariant] chess club ! + h2.text-center + span.help(onClick="document.getElementById('modal-help').checked=true") Help ? + a(href="/demo.webm") Demo ! + input#modal-help.modal(type="checkbox") div(role="dialog") .card - label.modal-close(for="modal-control") + label.modal-close(for="modal-help") h3.blue.section Modes p.section. Each variant page offers two modes: against a human or computer opponent, @@ -30,6 +32,44 @@ block content 3. send an email to #[a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report") contact@vchess.club] with relevant comments and the PGN attached. Thank you! + input#modal-welcome.modal(type="checkbox") + div(role="dialog") + #welcome.card.text-center + label.modal-close(for="modal-welcome") + h3.blue.section Welcome to vchess.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(style="font-style:italic;color:purple") However... + p Each variant has its own new rules, which can involve + ul + li * different pieces movements + li * different chessboard(s)    + li * new pieces                 + li * moves side effects         + li ...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(style="font-style:italic;color: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 :P + p. + For informations about hundreds (if not thousands!) of variants, you + can visit the excellent #[a(href="https://www.chessvariants.com/") chessvariants] website. + p(style="cursor:pointer;color:darkgrey" onClick="setCookie('visited','1');document.getElementById('modal-welcome').checked=false") Do not annoy me again! + p(style="font-size:0.8em") Image credit: #[a(href="https://en.wikipedia.org/wiki/List_of_chess_variants#/media/File:Hexagonal_chess.svg") Wikpedia] .row my-variant-summary( v-for="(v,idx) in sortedCounts", @@ -41,6 +81,7 @@ block javascripts script. const variantArray = !{JSON.stringify(variantArray)}; //JSON.parse("!{variantArray}".replace(/\"/g,'"')); + script(src="/javascripts/utils/misc.js") script(src="/javascripts/utils/socket_url.js") script(src="/javascripts/components/variantSummary.js") script(src="/javascripts/index.js") diff --git a/views/variant.pug b/views/variant.pug index 7f4d6ef2..8ca9db49 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -14,6 +14,7 @@ block content my-game block javascripts + script(src="/javascripts/utils/misc.js") script(src="/javascripts/utils/socket_url.js") script(src="/javascripts/utils/array.js") script(src="/javascripts/base_rules.js")