views/index.pug

   1 extends layout
   2
   3 block css
   4     link(rel="stylesheet", href="/stylesheets/index.css")
   5
   6 block content
   7     .container#indexPage
   8         .row
   9             .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  10                 h1#main-title.text-center
  11                     img(src="/images/index/unicorn.svg")
  12                     span vchess.club
  13                     img(src="/images/index/wildebeest.svg")
  14                 h2#needHelp.text-center(
  15                         onClick="document.getElementById('modalHelp').checked=true")
  16                     | Need help ?
  17                 input#modalHelp.modal(type="checkbox")
  18                 div(role="dialog")
  19                     #help.card
  20                         label.modal-close(for="modalHelp")
  21                         .section
  22                             p.emphasis First: watch #[a(href="/demo.webm") demo video] !
  23                             p Then click on a variant... Reminder:
  24                             ul
  25                                 li All games start with a random assymetric position.
  26                                 li Games are untimed, and played anonymously.
  27                                 li No chat while playing, to focus on the moves.
  28                         .section
  29                             h3.red Bug report
  30                             p
  31                                 | If you find a bug in a game, please follow this procedure: #[br]
  32                                 | 1. stop playing: click on the resign button; #[br]
  33                                 | 2. download the game as PGN; #[br]
  34                                 | 3. send an email to
  35                                 a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report")
  36                                     | contact@vchess.club
  37                                 | with comments + PGN attached.
  38                 input#modalB4welcome.modal(type="checkbox")
  39                 div(role="dialog")
  40                     #b4welcome.card.text-center
  41                         label.modal-close(for="modalB4welcome")
  42                         h3.blue First visit?
  43                         p Please
  44                             span#readThis(@click="showWelcomeMsg") read this
  45                             span &nbsp;before playing!
  46                 input#modalWelcome.modal(type="checkbox")
  47                 div(role="dialog")
  48                     #welcome.card.text-center
  49                         label.modal-close(for="modalWelcome")
  50                         h3.blue.section Welcome to v[ariant]chess.club!
  51                         .section
  52                             p A fun place to play chess variants in real time.
  53                             p But wait... what is a chess variant?
  54                             img(src="/images/Hexagonal_chess.svg")
  55                             p.
  56                                 As suggested by the picture, a variant setup generally
  57                                 looks more or less like a chessboard with regular pieces
  58                                 (otherwise it's no longer a variant but a whole new game).
  59                             p.emphasis.purple However...
  60                             p Each variant has its own new rules, which can involve
  61                             table.list-table
  62                                 tbody
  63                                     tr
  64                                         td * different pieces movements
  65                                     tr
  66                                         td * different chessboard(s)
  67                                     tr
  68                                         td * new pieces
  69                                     tr
  70                                         td * moves side effects
  71                                     tr
  72                                         td ...and so on
  73                         .section
  74                             p.
  75                                 Example: imagine that a capture is an atomic explosion, wiping all
  76                                 adjacent squares &ndash; except the pawns, which as cockroaches can
  77                                 resist this kind of event.
  78                             p Also state a goal: make the opponent's king explode.
  79                             p &rarr; Congrats, you defined Atomic chess! (Playable here)
  80                         .section
  81                             p.emphasis.purple OK, this all sounds interesting, but why would that be fun?
  82                             p.
  83                                 Because all games here start with a random setup: no more boring
  84                                 openings memorization, you have to rely on your chess skills only.
  85                             p Moreover, I claim that the chosen variants here are fun to play :)
  86                             -
  87                                 var wikipediaUrl = "https://en.wikipedia.org/wiki/" +
  88                                     "List_of_chess_variants#/media/File:Hexagonal_chess.svg";
  89                             p.
  90                                 For informations about hundreds (if not thousands) of variants, you
  91                                 can visit the excellent
  92                                 #[a(href="https://www.chessvariants.com/") chessvariants] website.
  93                         p#disableMsg(@click="markAsVisited")
  94                             | Click here to not show this message next time
  95                         p.smallfont Image credit: #[a(href=wikipediaUrl) Wikipedia]
  96         .row
  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
 100 block javascripts
 101     script.
 102         const variantArray = !{JSON.stringify(variantArray)};
 103     script(src="/javascripts/utils/misc.js")
 104     script(src="/javascripts/utils/socket_url.js")
 105     script(src="/javascripts/components/variantSummary.js")
 106     script(src="/javascripts/index.js")