chess-io/views/play.pug

extends layout

block head
  //- JSON.stringify, not #{}, so these are emitted as JS literals rather than
  //- pasted into JS source. The server already rejects anything that isn't a
  //- real token / integer (see the /play route); this is the second layer --
  //- Pug's HTML escaping is no defense in a script block, where a numeric
  //- payload like `1;alert(1)` needs no HTML characters to run.
  script.
    var $token = !{JSON.stringify(token)};
    var $time = !{JSON.stringify(time)};
    var $increment = !{JSON.stringify(increment)};

block content
  header.clearfix
    ul#clock
      li.white
      li.black
    span#game-type
    a.button(href=`${basePath}/`) New game
    a.button.button--red.resign Resign
    a.button.button--red.rematch Rematch
    a.chat
      img#bubble(src=`${basePath}/images/chat.svg`, width='50', height='50')
      | Chat
  audio(id='moveSnd', preload='auto')
    source(src=`${basePath}/sounds/move.mp3`)
    source(src=`${basePath}/sounds/move.ogg`)
  audio(id='messageSnd', preload='auto')
    source(src=`${basePath}/sounds/message.mp3`)

  #chat-wrapper
    h4 Chat
    a.close x
    ul#chat
    
    form#sendMessage
      input

  #board_moves_wrapper.clearfix
    label(id='sounds_label')
      input(type='checkbox', id='sounds')
      |  Enable sounds
    #board_wrapper
      #captured-pieces
        ul.w
        ul.b
      table.chess_board.white
        tr
          td.A8(data-id='A8', draggable='true')
            a.black.rook(draggable='true') ♜
          td.B8(data-id='B8', draggable='true')
            a.black.knight(draggable='true') ♞
          td.C8(data-id='C8', draggable='true')
            a.black.bishop(draggable='true') ♝
          td.D8(data-id='D8', draggable='true')
            a.black.king(draggable='true') ♛
          td.E8(data-id='E8', draggable='true')
            a.black.queen(draggable='true') ♚
          td.F8(data-id='F8', draggable='true')
            a.black.bishop(draggable='true') ♝
          td.G8(data-id='G8', draggable='true')
            a.black.knight(draggable='true') ♞
          td.H8(data-id='H8', draggable='true')
            a.black.rook(draggable='true') ♜
        tr
          td.A7(data-id='A7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.B7(data-id='B7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.C7(data-id='C7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.D7(data-id='D7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.E7(data-id='E7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.F7(data-id='F7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.G7(data-id='G7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.H7(data-id='H7', draggable='true')
            a.black.pawn(draggable='true') ♟
        tr
          td.A6(data-id='A6')
          td.B6(data-id='B6')
          td.C6(data-id='C6')
          td.D6(data-id='D6')
          td.E6(data-id='E6')
          td.F6(data-id='F6')
          td.G6(data-id='G6')
          td.H6(data-id='H6')
        tr
          td.A5(data-id='A5')
          td.B5(data-id='B5')
          td.C5(data-id='C5')
          td.D5(data-id='D5')
          td.E5(data-id='E5')
          td.F5(data-id='F5')
          td.G5(data-id='G5')
          td.H5(data-id='H5')
        tr
          td.A4(data-id='A4')
          td.B4(data-id='B4')
          td.C4(data-id='C4')
          td.D4(data-id='D4')
          td.E4(data-id='E4')
          td.F4(data-id='F4')
          td.G4(data-id='G4')
          td.H4(data-id='H4')
        tr
          td.A3(data-id='A3')
          td.B3(data-id='B3')
          td.C3(data-id='C3')
          td.D3(data-id='D3')
          td.E3(data-id='E3')
          td.F3(data-id='F3')
          td.G3(data-id='G3')
          td.H3(data-id='H3')
        tr
          td.A2(data-id='A2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.B2(data-id='B2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.C2(data-id='C2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.D2(data-id='D2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.E2(data-id='E2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.F2(data-id='F2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.G2(data-id='G2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.H2(data-id='H2', draggable='true')
            a.white.pawn(draggable='true') ♙
        tr
          td.A1(data-id='A1', draggable='true')
            a.white.rook(draggable='true') ♖
          td.B1(data-id='B1', draggable='true')
            a.white.night(draggable='true') ♘
          td.C1(data-id='C1', draggable='true')
            a.white.bishop(draggable='true') ♗
          td.D1(data-id='D1', draggable='true')
            a.white.king(draggable='true') ♕
          td.E1(data-id='E1', draggable='true')
            a.white.wife(draggable='true') ♔
          td.F1(data-id='F1', draggable='true')
            a.white.bishop(draggable='true') ♗
          td.G1(data-id='G1', draggable='true')
            a.white.night(draggable='true') ♘
          td.H1(data-id='H1', draggable='true')
            a.white.rook(draggable='true') ♖
      table.chess_board.black(style='display: none;')
        tr
          td.H1(data-id='H1', draggable='true')
            a.white.rook(draggable='true') ♖
          td.G1(data-id='G1', draggable='true')
            a.white.night(draggable='true') ♘
          td.F1(data-id='F1', draggable='true')
            a.white.bishop(draggable='true') ♗
          td.E1(data-id='E1', draggable='true')
            a.white.king(draggable='true') ♔
          td.D1(data-id='D1', draggable='true')
            a.white.queen(draggable='true') ♕
          td.C1(data-id='C1', draggable='true')
            a.white.bishop(draggable='true') ♗
          td.B1(data-id='B1', draggable='true')
            a.white.knight(draggable='true') ♘
          td.A1(data-id='A1', draggable='true')
            a.white.rook(draggable='true') ♖
        tr
          td.H2(data-id='H2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.G2(data-id='G2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.F2(data-id='F2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.E2(data-id='E2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.D2(data-id='D2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.C2(data-id='C2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.B2(data-id='B2', draggable='true')
            a.white.pawn(draggable='true') ♙
          td.A2(data-id='A2', draggable='true')
            a.white.pawn(draggable='true') ♙
        tr
          td.H3(data-id='H3')
          td.G3(data-id='G3')
          td.F3(data-id='F3')
          td.E3(data-id='E3')
          td.D3(data-id='D3')
          td.C3(data-id='C3')
          td.B3(data-id='B3')
          td.A3(data-id='A3')
        tr
          td.H4(data-id='H4')
          td.G4(data-id='G4')
          td.F4(data-id='F4')
          td.E4(data-id='E4')
          td.D4(data-id='D4')
          td.C4(data-id='C4')
          td.B4(data-id='B4')
          td.A4(data-id='A4')
        tr
          td.H5(data-id='H5')
          td.G5(data-id='G5')
          td.F5(data-id='F5')
          td.E5(data-id='E5')
          td.D5(data-id='D5')
          td.C5(data-id='C5')
          td.B5(data-id='B5')
          td.A5(data-id='A5')
        tr
          td.H6(data-id='H6')
          td.G6(data-id='G6')
          td.F6(data-id='F6')
          td.E6(data-id='E6')
          td.D6(data-id='D6')
          td.C6(data-id='C6')
          td.B6(data-id='B6')
          td.A6(data-id='A6')
        tr
          td.H7(data-id='H7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.G7(data-id='G7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.F7(data-id='F7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.E7(data-id='E7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.D7(data-id='D7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.C7(data-id='C7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.B7(data-id='B7', draggable='true')
            a.black.pawn(draggable='true') ♟
          td.A7(data-id='A7', draggable='true')
            a.black.pawn(draggable='true') ♟
        tr
          td.H8(data-id='H8', draggable='true')
            a.black.rook(draggable='true') ♜
          td.G8(data-id='G8', draggable='true')
            a.black.knight(draggable='true') ♞
          td.F8(data-id='F8', draggable='true')
            a.black.bishop(draggable='true') ♝
          td.E8(data-id='E8', draggable='true')
            a.black.king(draggable='true') ♚
          td.D8(data-id='D8', draggable='true')
            a.black.queen(draggable='true') ♛
          td.C8(data-id='C8', draggable='true')
            a.black.bishop(draggable='true') ♝
          td.B8(data-id='B8', draggable='true')
            a.black.knight(draggable='true') ♞
          td.A8(data-id='A8', draggable='true')
            a.black.rook(draggable='true') ♜

    table#moves.clearfix
      thead
        tr
          th Table of moves
      tbody
        tr
    
    span.promotion
      label(id='for_promotion') Promotion: 
        select(id='promotion')
          option(value='q', selected) Queen
          option(value='r') Rook
          option(value='n') Knight
          option(value='b') Bishop

    span.feedback.whitefeedback
      span.feedback-move White to move.
      span.feedback-status

block scripts
  script(type='text/javascript', src=`${basePath}/javascripts/play.js`)