client/src/App.vue

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