views/app.pug

   1 doctype html
   2 html
   3
   4     head
   5         meta(charset="UTF-8")
   6         title vchess - club
   7         meta(name="viewport" content="width=device-width, initial-scale=1")
   8         meta(name="msapplication-config"
   9             content="/images/favicon/browserconfig.xml")
  10         meta(name="theme-color" content="#ffffff")
  11         link(rel="stylesheet"
  12             href="//cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0/mini-default.min.css")
  13         link(rel="stylesheet"
  14             href="//fonts.googleapis.com/css?family=Open+Sans:400,700")
  15         link(rel="apple-touch-icon" sizes="180x180"
  16             href="/images/favicon/apple-touch-icon.png")
  17         link(rel="icon" type="image/png" sizes="32x32"
  18             href="/images/favicon/favicon-32x32.png")
  19         link(rel="icon" type="image/png" sizes="16x16"
  20             href="/images/favicon/favicon-16x16.png")
  21         link(rel="manifest" href="/images/favicon/manifest.json")
  22         link(rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg"
  23             color="#5bbad5")
  24         link(rel="shortcut icon" href="/images/favicon/favicon.ico")
  25         link(rel="stylesheet" href="/stylesheets/app.css")
  26
  27     // TODO: on-demand components, do not load all at startup
  28     body
  29         -
  30             var langName = {
  31                 "en": "English",
  32                 "es": "Español",
  33                 "fr": "Français",
  34             };
  35         case lang
  36             when "en"
  37                 include translations/en
  38                 include welcome/en
  39             when "es"
  40                 include translations/es
  41                 include welcome/es
  42             when "fr"
  43                 include translations/fr
  44                 include welcome/fr
  45         include modals
  46         main#VueElement
  47             my-upsert-user
  48             .container
  49                 // Header (on index only)
  50                 .row(v-show="display=='index'")
  51                     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  52                         header
  53                             img(src="/images/index/unicorn.svg")
  54                             .info-container
  55                                 p vchess.club
  56                             img(src="/images/index/wildebeest.svg")
  57                 // Menu (top of page)
  58                 .row
  59                     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  60                         label.drawer-toggle(for="drawerControl")
  61                         input#drawerControl.drawer(type="checkbox")
  62                         #menuBar
  63                             label.drawer-close(for="drawerControl")
  64                             a.icon-link(href="/")
  65                                 i(data-feather="home")
  66                             a(href="#room")
  67                                 =translations["Hall"]
  68                             a(href="#tabGames")
  69                                 =translations["My games"]
  70                             a(href="#rules")
  71                                 =translations["Rules"]
  72                             a(href="#problems")
  73                                 =translations["Problems"]
  74                             #userMenu.clickable.right-menu(onClick="doClick('modalUser')")
  75                                 .info-container
  76                                     if !user.email
  77                                         p
  78                                             span Login
  79                                             span.icon-user
  80                                     else
  81                                         p
  82                                             span Update
  83                                             span.icon-user
  84                             #flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
  85                             img(src="/images/flags/" + lang + ".svg")
  86                         #settings.clickable(v-show="display!='index'" onClick="doClick('modalSettings')")
  87                             i(data-feather="settings")
  88                         #mainTitle.clickable(onClick="doClick('modalWelcome')")
  89                             .info-container
  90                                 p Introduction
  91                 .row
  92                     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  93                 .row(v-show="display=='variants'")
  94                     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  95                         label(for="prefixFilter") Type first letters...
  96                         input#prefixFilter(v-model="curPrefix")
  97                     my-variant-summary(v-for="(v,idx) in sortedCounts"
  98                         v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name")
  99                 .row(v-show="display=='correspondance'")
 100                     my-correspondance
 101                 .row
 102                     my-room(v-show="display=='room'" :conn="conn" :settings="settings")
 103                     my-tab-games(v-show="display=='tabGames'")
 104                     my-rules(v-show="display=='rules'" :settings="settings")
 105                     my-problems(v-show="display=='problems'" :prob-id="probId" :settings="settings")
 106                     my-game(v-show="display=='game'" :game-ref="gameRef" :conn="conn"
 107                         :allow-chat="allowChat" :allow-movelist="allowMovelist"
 108                         :mode="mode" :settings="settings" @game-over="archiveGame")
 109
 110         footer.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
 111             div
 112                 a(href="https://github.com/yagu0/vchess") Source code
 113                 p.clickable(onClick="document.getElementById('modalContact').checked=true")
 114                     =translations["Contact form"]
 115
 116         script.
 117             const translations = !{JSON.stringify(translations)};
 118             const user = !{JSON.stringify(user)};
 119             const variantArray = !{JSON.stringify(variantArray)};
 120         // TODO: get rid of underscore
 121         // (used essentially for _.random(), _.sample() and _.range())
 122         script(src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js")
 123         // TODO: add only the necessary icons to mini-css custom build
 124         script(src="//unpkg.com/feather-icons")
 125         if development
 126             script(src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js")
 127         else
 128             script(src="https://cdn.jsdelivr.net/npm/vue")
 129         script(src="/javascripts/utils/printDiagram.js")
 130         script(src="/javascripts/utils/datetime.js")
 131         script(src="/javascripts/utils/squareId.js")
 132         script(src="/javascripts/utils/misc.js")
 133         script(src="/javascripts/utils/ajax.js")
 134         script(src="/javascripts/utils/array.js")
 135         script(src="/javascripts/shared/nbPlayers.js")
 136         script(src="/javascripts/shared/challengeCheck.js")
 137         script(src="/javascripts/shared/userCheck.js")
 138         script(src="/javascripts/components/upsertUser.js")
 139         script(src="/javascripts/components/variantSummary.js")
 140         script(src="/javascripts/components/correspondance.js")
 141         script(src="/javascripts/components/board.js")
 142         script(src="/javascripts/components/chat.js")
 143         script(src="/javascripts/components/gameList.js")
 144         script(src="/javascripts/components/challengeList.js")
 145         script(src="/javascripts/components/moveList.js")
 146         script(src="/javascripts/components/game.js")
 147         script(src="/javascripts/components/rules.js")
 148         script(src="/javascripts/components/room.js")
 149         script(src="/javascripts/components/tabGames.js")
 150         script(src="/javascripts/components/problemSummary.js")
 151         script(src="/javascripts/components/problems.js")
 152         script(src="/javascripts/base_rules.js")
 153         script(src="/javascripts/contactForm.js")
 154         script(src="/javascripts/socket_url.js")
 155         script(src="/javascripts/index.js")
 156         script(src="/javascripts/variant.js")
 157         script(src="/javascripts/app.js")