upgrade pgn4web and make some UI improvements

app/views/analyse/replay.scala.html

@@ -3,7 +3,6 @@
 @import pov._
 
 @moreCss = {
-@cssVendorTag("pgn4web/fonts/pgn4web-fonts.css")
 @cssTag("analyse.css")
 }
 
@@ -42,7 +41,7 @@ moreCss = moreCss,
 moreJs = moreJs) {
 <div class="analyse clearfix">
   <div class="board_wrap">
-    <div id="GameBoard"@color.fold("", " class='flip'")></div>
+    <div id="GameBoard" class="colorable_board @color.fold("", " flip")"></div>
     <div id="GameButtons"></div>
   </div>
   <div class="moves_wrap">

app/views/round/player.scala.html

@@ -27,7 +27,7 @@ chat = roomHtml.map(round.room(_, false))) {
   data-players-url="@routes.Round.players(gameId)">
   <div class="lichess_board_wrap">
     @widget.connection()
-    <div class="lichess_board grey">@Html(ui.Board.render(pov))</div>
+    <div class="lichess_board colorable_board grey with_marks">@Html(ui.Board.render(pov))</div>
     <div id="premove">@trans.premoveEnabledClickAnywhereToCancel()</div>
   </div>
   <div class="lichess_ground">

app/views/round/watcher.scala.html

@@ -12,7 +12,7 @@ bookmarkers = bookmarkers) {
   data-players-url="@routes.Round.players(gameId)">
   <div class="lichess_board_wrap">
     @widget.connection()
-    <div class="lichess_board grey">@Html(ui.Board.render(pov))</div>
+    <div class="lichess_board colorable_board grey with_marks">@Html(ui.Board.render(pov))</div>
   </div>
   <div class="lichess_ground">
     @round.cemetery(pov, "top")

public/javascripts/analyse.js

@@ -1,27 +1,29 @@
 $(function() {
   SetImagePath("/assets/vendor/pgn4web/lichess/64"); // use "" path if images are in the same folder as this javascript file
   SetImageType("png");
+  SetPieceFont("alpha");
 });
 
 function customFunctionOnPgnGameLoad() {
-  var $text = $('#ShowPgnText');
-  var html = '<table><tbody><tr>';
-  $text.find('span.move').remove();
-  $text.find('>span').each(function(it) {
-    if (0 == it%2) {
-      html += '</tr><tr><th>' + (it/2+1) + '.</th>';
-    }
-    html += '<td>' + this.innerHTML + '</td>';
-  });
-  html += '</tr></tbody></table>';
-  $text.html(html).find('tr:empty').remove();
+  console.debug($('#ShowPgnText'));
+  //var $text = $('#ShowPgnText');
+  //var html = '<table><tbody><tr>';
+  //$text.find('span.move').remove();
+  //$text.find('>span').each(function(it) {
+    //if (0 == it%2) {
+      //html += '</tr><tr><th>' + (it/2+1) + '.</th>';
+    //}
+    //html += '<td>' + this.innerHTML + '</td>';
+  //});
+  //html += '</tr></tbody></table>';
+  //$text.html(html).find('tr:empty').remove();
 
-  $('div.lichess_goodies a.rotate_board').click(function() {
-    $('#GameBoard').toggleClass('flip');
-    $('#player_links div:first').appendTo($('#player_links'));
-    redrawBoardMarks();
-    return false;
-  });
+  //$('div.lichess_goodies a.rotate_board').click(function() {
+    //$('#GameBoard').toggleClass('flip');
+    //$('#player_links div:first').appendTo($('#player_links'));
+    //redrawBoardMarks();
+    //return false;
+  //});
   redrawBoardMarks();
 }
 

public/javascripts/ctrl.js

@@ -58,12 +58,11 @@ $(function() {
 
   $('input.lichess_id_input').select();
 
-  if ($bw = $('div.lichess_board_wrap').orNot()) {
-    if ($('div.lichess_homepage').length == 0)
-      $.displayBoardMarks($bw, $('#lichess > div.lichess_player_white').length);
+  if ($board = $('div.colorable_board').orNot()) {
+    if ($board.hasClass("with_marks"))
+      $.displayBoardMarks($board.parent(), $('#lichess > div.lichess_player_white').length);
 
     // board color
-    var $board = $bw.find('> div.lichess_board');
     var $picker = $('#top a.colorpicker');
     var colors = ['brown', 'grey', 'green', 'blue'];
     var color;

public/stylesheets/analyse.css

@@ -1,94 +1,88 @@
 #lichess h1 {
-    font-size: 2em;
-    margin-bottom: 5px;
+  font-size: 2em;
+  margin-bottom: 5px;
 }
 #pgnText {
   display: none;
 }
 
 div.board_wrap {
-    float: left;
-    width: 514px;
+  float: left;
+  width: 514px;
+  min-height: 558px;
 }
 div.moves_wrap {
-    margin-left: 532px;
+  margin-left: 532px;
 }
 span.board_mark {
-    position: absolute;
-    text-transform: uppercase;
-    font-size: 10px;
-    color: #bbb;
-    font-weight: bold;
+  position: absolute;
+  text-transform: uppercase;
+  font-size: 10px;
+  color: #bbb;
+  font-weight: bold;
 }
 span.board_mark.vert {
-    right: -10px;
+  right: -10px;
 }
 span.board_mark.horz {
-    bottom: -14px;
+  bottom: -14px;
+}
+
+@font-face {
+  font-family: 'pgn4web ChessSansMerida';
+  src: url('ChessSansMerida.eot');
+  src: url('/assets/vendor/pgn4web/fonts/ChessSansMerida.eot?#iefix') format('embedded-opentype'), url('/assets/vendor/pgn4web/fonts/ChessSansMerida.woff') format('woff'), url('/assets/vendor/pgn4web/fonts/ChessSansMerida.ttf') format('truetype'), url('/assets/vendor/pgn4web/fonts/ChessSansMerida.svg#ChessSansMerida') format('svg');
 }
 
 #GameBoard {
-    position: relative;
+  position: relative;
 }
 
 #GameBoard table.boardTable {
-    box-shadow: 0 0 7px #bbb;
-    -moz-box-shadow: 0 0 7px #bbb;
-    -webkit-box-shadow: 0 0 7px #bbb;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
+  box-shadow: 0 0 7px #bbb;
+  -moz-box-shadow: 0 0 7px #bbb;
+  -webkit-box-shadow: 0 0 7px #bbb;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 #GameBoard.flip table, #GameBoard.flip img.pieceImage {
-    -o-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  transform: rotate(180deg);
 }
-#GameBoard td.highlightWhiteSquare a,
-#GameBoard td.highlightBlackSquare a {
-    background: url(../images/over5.png) top left no-repeat;
+#GameBoard td.highlightWhiteSquare,
+#GameBoard td.highlightBlackSquare {
+  background-image: url(../images/over5.png);
 }
-#GameBoard td a {
-    display: block;
-    height: 64px;
+#GameBoard td img {
+  width: 64px;
+  height: 64px;
+  display: block;
 }
 
 #GameButtons {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 #GameButtons input {
-    width: 100px;
-    height: 2em;
+  width: 100px;
+  height: 2em;
 }
-
 #GameText {
-    font-size: 1.2em;
-    height: 504px;
-    border: 1px solid #C0C0C0;
-    overflow: auto;
-    padding: 5px;
-    border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-}
-#GameText table {
-    margin: auto;
-}
-#GameText tr {
-    border-bottom: 1px solid #eaeaea;
+  text-align: justify;
+  font-family: 'pgn4web ChessSansMerida', 'pgn4web Liberation Sans', sans-serif;
+  font-size: 14px;
 }
 #GameText a.move {
-    font-family: 'pgn4web ChessSansMerida', 'pgn4web Liberation Sans', sans-serif;
-    text-decoration: none;
-    padding: 3px 12px;
-    display: block;
-    color: #444;
+  text-decoration: none;
+  padding: 3px;
+  color: #444;
 }
 #GameText a:hover {
-    background: #DDD;
+  background: #DDD;
 }
 #GameText a.moveOn {
-    background: #FFE73B;
+  background: #FFE73B;
 }

public/stylesheets/board.css

@@ -29,28 +29,28 @@ div.lcs {
   height: 64px;
 }
 
-div.grey div.lcs.black, a.colorpicker.grey  {
+#GameBoard.grey td.blackSquare, div.grey div.lcs.black, a.colorpicker.grey  {
   background: #cacaca;
 }
-div.grey div.lcs.white {
+#GameBoard.grey td.whiteSquare, div.grey div.lcs.white {
   background: #FFFFFF;
 }
-div.brown div.lcs.black, a.colorpicker.brown   {
+#GameBoard.brown td.blackSquare, div.brown div.lcs.black, a.colorpicker.brown   {
   background: #b58863;
 }
-div.brown div.lcs.white {
+#GameBoard.brown td.whiteSquare, div.brown div.lcs.white {
   background: #f0d9b5;
 }
-div.green div.lcs.black, a.colorpicker.green   {
+#GameBoard.green td.blackSquare, div.green div.lcs.black, a.colorpicker.green   {
   background: #86a666;
 }
-div.green div.lcs.white {
+#GameBoard.green td.whiteSquare, div.green div.lcs.white {
   background: #ffffdd;
 }
-div.blue div.lcs.black, a.colorpicker.blue   {
+#GameBoard.blue td.blackSquare, div.blue div.lcs.black, a.colorpicker.blue   {
   background: #8ca2ad;
 }
-div.blue div.lcs.white {
+#GameBoard.blue td.whiteSquare, div.blue div.lcs.white {
   background: #dee3e6;
 }
 

public/stylesheets/common.css

@@ -611,3 +611,6 @@ span.bookmark .icon {
 span.bookmark .icon.bookmarked {
   background-position: 0 -24px;
 }
+span.bookmark a {
+  outline: none;
+}