+++ /dev/null
-// 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);
- },
-
- },
-});
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
: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")
// 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"]
</template>
<script>
+++ /dev/null
-<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <p>
- For a guide and recipes on how to configure / customize this project,<br>
- check out the
- <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
- </p>
- <h3>Installed CLI Plugins</h3>
- <ul>
- <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
- </ul>
- <h3>Essential Links</h3>
- <ul>
- <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
- <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
- <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
- <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
- <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
- </ul>
- <h3>Ecosystem</h3>
- <ul>
- <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
- <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
- <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
- <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
- <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
- </ul>
- </div>
-</template>
-
-<script>
-export default {
- name: "HelloWorld",
- props: {
- msg: String
- },
-// created: function() {
-// alert("test");
-// },
- methods: {
-
- },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
- margin: 40px 0 0;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
--- /dev/null
+<template>
+ <div class="hello">
+
+
+
+
+//Index: rename into Home
+ .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"
+
+
+
+
+
+ <h1>{{ msg }}</h1>
+ <p>
+ For a guide and recipes on how to configure / customize this project,<br>
+ check out the
+ <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+ </p>
+ <h3>Installed CLI Plugins</h3>
+ <ul>
+ <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+ </ul>
+ <h3>Essential Links</h3>
+ <ul>
+ <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+ <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+ <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+ <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+ <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+ </ul>
+ <h3>Ecosystem</h3>
+ <ul>
+ <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+ <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+ <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+ <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+ <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "HelloWorld",
+ props: {
+ msg: String
+ },
+// created: function() {
+// alert("test");
+// },
+ methods: {
+
+ },
+};
+</script>
+
+
+
+
+
+
+
+
+// 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);
+ },
+
+ },
+});
+
+
+
+
+
+
+
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+ margin: 40px 0 0;
+}
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+li {
+ display: inline-block;
+ margin: 0 10px;
+}
+a {
+ color: #42b983;
+}
+</style>
projects / vchess.git / commitdiff