From ee37e2af8fc3ce2273eddfbe66822ce8b6b011d6 Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Fri, 25 Jan 2019 22:00:34 +0100 Subject: [PATCH] Saving state (broken as usual) --- client/client_OLD/javascripts/index.js | 70 ----------- client/client_OLD/views/app.pug | 55 --------- client/src/App.vue | 55 +++++++-- client/src/components/HelloWorld.vue | 63 ---------- client/src/components/Home.vue | 163 +++++++++++++++++++++++++ 5 files changed, 206 insertions(+), 200 deletions(-) delete mode 100644 client/client_OLD/javascripts/index.js delete mode 100644 client/src/components/HelloWorld.vue create mode 100644 client/src/components/Home.vue diff --git a/client/client_OLD/javascripts/index.js b/client/client_OLD/javascripts/index.js deleted file mode 100644 index 0e2a2631..00000000 --- a/client/client_OLD/javascripts/index.js +++ /dev/null @@ -1,70 +0,0 @@ -// Javascript for index page: mostly counters updating -new Vue({ - el: "#VueElement", - data: { - counts: {}, - curPrefix: "", - conn: null, - display: "variants", - }, - computed: { - sortedCounts: function () { - const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase()); - const variantsCounts = variantArray - .filter( v => { - return v.name.startsWith(capitalizedPrefix); - }) - .map( v => { - return { - name: v.name, - desc: v.description, - count: this.counts[v.name] || 0, - }; - }); - return variantsCounts.sort((a,b) => { - if (a.count != b.count) - return b.count - a.count; - // Else, alphabetic ordering - return a.name.localeCompare(b.name); - }); - }, - }, - created: function() { - this.setDisplay(); - window.onhashchange = this.setDisplay; - - const url = socketUrl; - const sid = getRandString(); - this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); - const socketMessageListener = msg => { - const data = JSON.parse(msg.data); - if (data.code == "counts") - this.counts = data.counts; - else if (data.code == "increase") - this.counts[data.vid]++; - else if (data.code == "decrease") - this.counts[data.vid]--; - }; - const socketCloseListener = () => { - this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); - this.conn.addEventListener('message', socketMessageListener); - this.conn.addEventListener('close', socketCloseListener); - }; - this.conn.onmessage = socketMessageListener; - this.conn.onclose = socketCloseListener; - - // TODO: AJAX call get corr games (all variants) - // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange - // ==> background orange si à moi de jouer par corr (sur main index) - // (helper: static fonction "GetNextCol()" dans base_rules.js) - - }, - methods: { - setDisplay: function() { - if (!location.hash) - location.hash = "#variants"; //default - this.display = location.hash.substr(1); - }, - - }, -}); diff --git a/client/client_OLD/views/app.pug b/client/client_OLD/views/app.pug index c2469602..7137b191 100644 --- a/client/client_OLD/views/app.pug +++ b/client/client_OLD/views/app.pug @@ -3,47 +3,6 @@ html main#VueElement my-upsert-user .container - .row(v-show="display=='index'") - .row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - label.drawer-toggle(for="drawerControl") - input#drawerControl.drawer(type="checkbox") - #menuBar - label.drawer-close(for="drawerControl") - a.icon-link(href="/") - i(data-feather="home") - a(href="#room") - =translations["Hall"] - a(href="#tabGames") - =translations["My games"] - a(href="#rules") - =translations["Rules"] - a(href="#problems") - =translations["Problems"] - #userMenu.clickable.right-menu(onClick="doClick('modalUser')") - .info-container - if !user.email - p - span Login - span.icon-user - else - p - span Update - span.icon-user - #flagMenu.clickable.right-menu(onClick="doClick('modalLang')") - img(src="/images/flags/" + lang + ".svg") - #settings.clickable(v-show="display!='index'" onClick="doClick('modalSettings')") - i(data-feather="settings") - #mainTitle.clickable(onClick="doClick('modalWelcome')") - .info-container - p Introduction - .row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - .row(v-show="display=='variants'") - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - label(for="prefixFilter") Type first letters... - input#prefixFilter(v-model="curPrefix") - my-variant-summary(v-for="(v,idx) in sortedCounts" v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name") .row(v-show="display=='correspondance'") my-correspondance @@ -56,25 +15,11 @@ html :allow-chat="allowChat" :allow-movelist="allowMovelist" :mode="mode" :settings="settings" @game-over="archiveGame") - footer.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center - div - a(href="https://github.com/yagu0/vchess") Source code - p.clickable(onClick="document.getElementById('modalContact').checked=true") - =translations["Contact form"] - - script. - const translations = !{JSON.stringify(translations)}; - const user = !{JSON.stringify(user)}; - const variantArray = !{JSON.stringify(variantArray)}; // TODO: get rid of underscore // (used essentially for _.random(), _.sample() and _.range()) script(src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js") // TODO: add only the necessary icons to mini-css custom build script(src="//unpkg.com/feather-icons") - if development - script(src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js") - else - script(src="https://cdn.jsdelivr.net/npm/vue") script(src="/javascripts/utils/printDiagram.js") script(src="/javascripts/utils/datetime.js") script(src="/javascripts/utils/squareId.js") diff --git a/client/src/App.vue b/client/src/App.vue index f68877e1..89b645b3 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -10,20 +10,51 @@ // Header (on index only) header .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - header - img(src="./assets/images/index/unicorn.svg") - .info-container - p vchess.club {{ $lang }} - img(src="./assets/images/index/wildebeest.svg") + img(src="./assets/images/index/unicorn.svg") + .info-container + p vchess.club {{ $lang }} + img(src="./assets/images/index/wildebeest.svg") .row - // Menu (top of page): TODO how to organize it ? - nav - router-link(to="/") Home - |  |  - router-link(to="/about") About - |  |  - router-link(to="/test") Test + // Menu (top of page): + // shared: Home + flags, userMenu + // variant: hall, problems, rules, my games + settings + nav + label.drawer-toggle(for="drawerControl") + input#drawerControl.drawer(type="checkbox") + #menuBar + label.drawer-close(for="drawerControl") + router-link(v-if="$route.path != '/'" to="/") + | Home + router-link(:href="getLink('/hall')") + | getLink function : suffix ==> /variant + suffix + =translations["Hall"] + router-link(href="#tabGames") + =translations["My games"] + router-link(href="#rules") + =translations["Rules"] + router-link(href="#problems") + =translations["Problems"] + #userMenu.clickable.right-menu(onClick="doClick('modalUser')") + .info-container + if !user.email + p + span Login + span.icon-user + else + p + span Update + span.icon-user + #flagMenu.clickable.right-menu(onClick="doClick('modalLang')") + img(src="/images/flags/" + lang + ".svg") + #settings.clickable(v-show="display!='index'" onClick="doClick('modalSettings')") + i(data-feather="settings") router-view + .row + footer + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center + a(href="https://github.com/yagu0/vchess") Source code + p.clickable(onClick="doClick('modalContact')") + = translations["Contact form"] - - - diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue new file mode 100644 index 00000000..8213a86a --- /dev/null +++ b/client/src/components/Home.vue @@ -0,0 +1,163 @@ + + + + + + + + + + + +// Javascript for index page: mostly counters updating +new Vue({ + el: "#VueElement", + data: { + counts: {}, + curPrefix: "", + conn: null, + display: "variants", + }, + computed: { + sortedCounts: function () { + const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase()); + const variantsCounts = variantArray + .filter( v => { + return v.name.startsWith(capitalizedPrefix); + }) + .map( v => { + return { + name: v.name, + desc: v.description, + count: this.counts[v.name] || 0, + }; + }); + return variantsCounts.sort((a,b) => { + if (a.count != b.count) + return b.count - a.count; + // Else, alphabetic ordering + return a.name.localeCompare(b.name); + }); + }, + }, + created: function() { + this.setDisplay(); + window.onhashchange = this.setDisplay; + + const url = socketUrl; + const sid = getRandString(); + this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); + const socketMessageListener = msg => { + const data = JSON.parse(msg.data); + if (data.code == "counts") + this.counts = data.counts; + else if (data.code == "increase") + this.counts[data.vid]++; + else if (data.code == "decrease") + this.counts[data.vid]--; + }; + const socketCloseListener = () => { + this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); + this.conn.addEventListener('message', socketMessageListener); + this.conn.addEventListener('close', socketCloseListener); + }; + this.conn.onmessage = socketMessageListener; + this.conn.onclose = socketCloseListener; + + // TODO: AJAX call get corr games (all variants) + // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange + // ==> background orange si à moi de jouer par corr (sur main index) + // (helper: static fonction "GetNextCol()" dans base_rules.js) + + }, + methods: { + setDisplay: function() { + if (!location.hash) + location.hash = "#variants"; //default + this.display = location.hash.substr(1); + }, + + }, +}); + + + + + + + + + + -- 2.44.0