Apply store pattern to track global app state
[vchess.git] / client / src / App.vue
CommitLineData
625022fd 1<template lang="pug">
98db2082
BA
2#app
3 // modal "welcome" will be filled in the selected language
4 #modalWelcome
5 Language
c66a829b 6 Settings
98db2082 7 ContactForm
c66a829b 8 UpsertUser
98db2082
BA
9 .container
10 .row(v-show="$route.path == '/'")
c66a829b 11 // Header (on index only ?!)
98db2082
BA
12 header
13 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
ccd4a2b7
BA
14 img(src="./assets/images/index/unicorn.svg")
15 .info-container
16 p vchess.club
17 img(src="./assets/images/index/wildebeest.svg")
98db2082 18 .row
ee37e2af
BA
19 // Menu (top of page):
20 // shared: Home + flags, userMenu
ccd4a2b7
BA
21 // variant: hall, problems, rules, my games + settings
22 nav
23 label.drawer-toggle(for="drawerControl")
24 input#drawerControl.drawer(type="checkbox")
25 #menuBar
26 label.drawer-close(for="drawerControl")
27 router-link(to="/")
28 // select options all variants + filter possible (as in problems)
29 | Home
30 router-link(to="/myGames")
c66a829b 31 | {{ st.tr["My games"] }}
ccd4a2b7
BA
32 router-link(to="/rules")
33 // Boxes OK for rules/Atomic/ ...etc
c66a829b 34 | {{ st.tr["Rules"] }}
ccd4a2b7 35 router-link(to="/problems")
c66a829b 36 | {{ st.tr["Problems"] }}
ccd4a2b7
BA
37 #userMenu.clickable.right-menu(onClick="doClick('modalUser')")
38 .info-container
39 p
c66a829b 40 span {{ !st.user.id ? "Login" : "Update" }}
ccd4a2b7
BA
41 span.icon-user
42 #flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
43 img(src="/images/flags/" + lang + ".svg")
44 #settings.clickable(onClick="doClick('modalSettings')")
c66a829b 45 | Settings
ccd4a2b7 46 i(data-feather="settings")
760865ac 47 .row
ccd4a2b7
BA
48 router-view
49 .row
50 footer
51 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
52 a(href="https://github.com/yagu0/vchess") Source code
53 p.clickable(onClick="doClick('modalContact')")
c66a829b 54 | {{ st.tr["Contact form"] }}
8d61fc4a
BA
55 //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
56 //// TODO: add only the necessary icons to mini-css custom build
57 //script(src="//unpkg.com/feather-icons")
625022fd
BA
58</template>
59
98db2082
BA
60<script>
61// See https://stackoverflow.com/a/35417159
62import ContactForm from "@/components/ContactForm.vue";
63import Language from "@/components/Language.vue";
64import Settings from "@/components/Settings.vue";
c66a829b
BA
65import UpsertUser from "@/components/UpsertUser.vue";
66import { store } from "./store.js";
98db2082 67export default {
98db2082
BA
68 components: {
69 ContactForm,
70 Language,
71 Settings,
c66a829b
BA
72 UpsertUser,
73 },
74 data: function() {
75 return {
76 st: store.state,
77 };
98db2082
BA
78 },
79};
80</script>
81
625022fd
BA
82<style lang="sass">
83#app
84 font-family: "Avenir", Helvetica, Arial, sans-serif
85 -webkit-font-smoothing: antialiased
86 -moz-osx-font-smoothing: grayscale
87 text-align: center
88 color: #2c3e50
89
90#nav
91 padding: 30px
92 a
93 font-weight: bold
94 color: #2c3e50
95 &.router-link-exact-active
96 color: #42b983
97</style>