analysis keyboard shortcuts

app/templating/AssetHelper.scala

@@ -7,7 +7,7 @@ import controllers.routes
 
 trait AssetHelper {
 
-  val assetVersion = 42
+  val assetVersion = 43
 
   def cssTag(name: String) = css("stylesheets/" + name)
 

app/views/analyse/replay.scala.html

@@ -18,6 +18,15 @@
 <div class="watchers inline_userlist">
   @trans.spectators() <span class="list"></span>
 </div>
+<div class="shortcuts">
+  <p class="title">Shortcuts</p>
+  <ul>
+    <li><strong>h</strong> or <strong>arrow-up</strong> go to game start</li> 
+    <li><strong>j</strong> or <strong>arrow-left</strong> move backward</li>
+    <li><strong>k</strong> or <strong>arrow-right</strong> move forward</li> 
+    <li><strong>l</strong> or <strong>arrow-down</strong> go to game end</li> 
+  </ul>
+</div>
 }
 
 @analyse.layout(

public/javascripts/big.js

@@ -2232,7 +2232,7 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
 
     SetImagePath("/assets/vendor/pgn4web/lichess/64"); // use "" path if images are in the same folder as this javascript file
     SetImageType("png");
-    SetShortcutKeysEnabled(false);
+    SetShortcutKeysEnabled(true);
     clearShortcutSquares("BCDEFGH", "12345678");
     clearShortcutSquares("A", "1234567");
     var $game = $("#GameBoard");

public/stylesheets/analyse.css

@@ -133,3 +133,17 @@ div.adv_chart {
 div.adv_chart iframe {
   height: 150px;
 }
+
+div.shortcuts .title {
+  margin: 1.5em 0 0.5em 0;
+  display: block;
+  font-weight: bold;
+  border-bottom: 1px solid #ccc;
+}
+div.shortcuts li {
+  display: block;
+  margin: 0.5em 0;
+}
+#site_header div.shortcuts strong {
+  font-weight: bold;
+}

public/stylesheets/dark.css

@@ -63,6 +63,7 @@ body.dark .button,
 body.dark #GameText,
 body.dark #tournament_side,
 body.dark #GameBoard table.boardTable,
+body.dark div.shortcuts .title,
 body.dark div.content_box,
 body.dark div.content_box_top,
 body.dark div.content_box_top a,