From 411f1704c1e420200e5ad8126d975e8591c64ba1 Mon Sep 17 00:00:00 2001
From: vonavi <ivvl82@gmail.com>
Date: Tue, 18 Feb 2014 16:45:54 +0200
Subject: [PATCH] Add the game layout with a pgn4web chess board.

---
 _assets/javascripts/custom.js         | 24 ++++++++++++++++
 _assets/javascripts/pgn4web.js        |  1 +
 _assets/stylesheets/less/pgn4web.less | 36 +++++++++++++++++++++++
 _assets/stylesheets/theme.css.less    |  1 +
 _layouts/default.html                 |  6 ++++
 _layouts/game.html                    | 41 +++++++++++++++++++++++++++
 6 files changed, 109 insertions(+)
 create mode 100644 _assets/javascripts/custom.js
 create mode 120000 _assets/javascripts/pgn4web.js
 create mode 100644 _assets/stylesheets/less/pgn4web.less
 create mode 100644 _assets/stylesheets/theme.css.less
 create mode 100644 _layouts/game.html

diff --git a/_assets/javascripts/custom.js b/_assets/javascripts/custom.js
new file mode 100644
index 0000000..314a62a
--- /dev/null
+++ b/_assets/javascripts/custom.js
@@ -0,0 +1,24 @@
+/* Fix the position of chess board while scrolling */
+$(function() {
+  if (obj = $('#GameWrapper')) {
+    obj.affix({
+      offset: {
+        top: function () {
+          return obj.parent().offset().top;
+        }
+      }
+    })
+  }
+})
+
+/* Stylize pgn4web elements by Bootstrap */
+function customFunctionOnPgnGameLoad() {
+  $('#GameSelSelect').addClass('form-control');
+  $('#autoplayButton').click(refreshButtonset);
+}
+function customFunctionOnMove() {
+  refreshButtonset();
+}
+function refreshButtonset() {
+  $('#GameButtons input').addClass('btn btn-default');
+}
diff --git a/_assets/javascripts/pgn4web.js b/_assets/javascripts/pgn4web.js
new file mode 120000
index 0000000..3d6bca2
--- /dev/null
+++ b/_assets/javascripts/pgn4web.js
@@ -0,0 +1 @@
+../vendor/pgn4web/pgn4web.js
\ No newline at end of file
diff --git a/_assets/stylesheets/less/pgn4web.less b/_assets/stylesheets/less/pgn4web.less
new file mode 100644
index 0000000..7f1f146
--- /dev/null
+++ b/_assets/stylesheets/less/pgn4web.less
@@ -0,0 +1,36 @@
+@squareSize: 56px;
+@boardBorderWidth: 4px;
+@boardSize: 8 * @squareSize + 2 * @boardBorderWidth;
+
+#GameWrapper {
+  float: left;
+  width: @boardSize;
+}
+#TextWrapper {
+  margin-left: @boardSize;
+  padding-left: 15px;
+}
+#GameWrapper.affix {
+  top: 0;
+}
+
+.boardTable {
+  width: @boardSize;
+  height: @boardSize;
+  border: @boardBorderWidth solid #663300;
+}
+.whiteSquare, .blackSquare {
+  width: @squareSize;
+  height: @squareSize;
+}
+.pieceImage {
+  height: @squareSize;
+  width: @squareSize;
+}
+
+.whiteSquare, .highlightWhiteSquare {
+  background: #FFCC99;
+}
+.blackSquare, .highlightBlackSquare {
+  background: #CC9966;
+}
diff --git a/_assets/stylesheets/theme.css.less b/_assets/stylesheets/theme.css.less
new file mode 100644
index 0000000..15e95e6
--- /dev/null
+++ b/_assets/stylesheets/theme.css.less
@@ -0,0 +1 @@
+//= require less/pgn4web
diff --git a/_layouts/default.html b/_layouts/default.html
index 9443108..303174d 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,6 +13,9 @@
     <!-- Bootstrap core CSS -->
     {% stylesheet bootstrap %}
 
+    <!-- Custom styles for this template -->
+    {% stylesheet theme %}
+
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -31,5 +34,8 @@
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     {% javascript bootstrap %}
     {% javascript holder %}
+
+    <!-- Custom JavaScript based on Bootstrap and jQuery -->
+    {% javascript custom %}
   </body>
 </html>
diff --git a/_layouts/game.html b/_layouts/game.html
new file mode 100644
index 0000000..5081438
--- /dev/null
+++ b/_layouts/game.html
@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+<div class="col-xs-12 col-sm-8 col-sm-offset-2">
+  <h1>{{ page.title }}</h1>
+  {{ content }}
+</div>
+
+<div class="col-xs-12">
+  <div id="GameWrapper" data-spy="affix">
+    <p></p>
+    <div id="GameSelector"></div>
+    <p></p>
+    <div id="GameBoard"></div>
+    <p></p>
+    <div id="GameButtons"></div>
+  </div>
+
+  <div id="TextWrapper">
+    <p></p>
+    <b><span id="GameWhite"></span>&nbsp;-&nbsp;<span id="GameBlack"></span>&nbsp;&nbsp;<span id="GameResult"></span></b>
+    <p></p>
+    <div id="GameText"></div>
+    <p></p>
+  </div>
+</div>
+
+<!-- pgn4web JavaScript -->
+{% javascript pgn4web %}
+
+<script type="text/javascript">
+ "use strict";
+
+ SetPgnUrl("{{ page.pgn }}");
+ SetImagePath("/assets/img/chesspieces/wikipedia");
+ SetImageType("png");
+ SetGameSelectorOptions("Выбрать партию ...", false, 0, 0, 0, 15, 15, 0, 10); // (head, num, chEvent, chSite, chRound, chWhite, chBlack, chResult, chDate);
+ SetCommentsOnSeparateLines(true);
+ SetShortcutKeysEnabled(true);
+</script>