feat: add chess board viewer with pgn4web library integration

assets/css/png4web.css

@@ -0,0 +1,134 @@
+/* *  pgn4web javascript chessboard
+ *  copyright (C) 2009-2013 Paolo Casaschi
+ *  see README file and http://pgn4web.casaschi.net
+ *  for credits, license and more details */
+ @import url("../fonts/pgn4web-font-LiberationSans.css");
+ @import url("../fonts/pgn4web-font-ChessSansUsual.css");
+ 
+ div,
+ span,
+ table,
+ tr,
+ td {
+     font-family: 'pgn4web Liberation Sans', sans-serif;
+ 
+     /* fixes IE9 body css issue */
+ }
+ 
+ .boardTable {
+     border-style: double;
+     border-color: black;
+     border-width: 3px;
+     width: 600px;
+     height: 600px;
+ }
+ 
+ .pieceImage {
+     width: 60px;
+     height: 60px;
+ }
+ 
+ .whiteSquare,
+ .blackSquare,
+ .highlightWhiteSquare,
+ .highlightBlackSquare {
+     width: 55px;
+     height: 55px;
+     border-style: solid;
+     border-width: 1px;
+ }
+ 
+ .whiteSquare,
+ .highlightWhiteSquare {
+     border-color: #EFF4EC;
+     background: #EFF4EC;
+ }
+ 
+ .blackSquare,
+ .highlightBlackSquare {
+     border-color: #C6CEC3;
+     background: #C6CEC3;
+ }
+ 
+ .highlightWhiteSquare,
+ .highlightBlackSquare {
+     border-style: inset;
+     border-color: gray;
+ }
+ 
+ .selectControl {
+     /* a "width" attribute here must use the !important flag to override default settings */
+ }
+ 
+ .optionSelectControl {
+ }
+ 
+ .buttonControlPlay,
+ .buttonControlStop,
+ .buttonControl {
+     /* a "width" attribute here must use the !important flag to override default settings */
+ }
+ 
+ .buttonControlSpace {
+     /* a "width" attribute here must use the !important flag to override default settings */
+ }
+ 
+ .searchPgnButton {
+     /* a "width" attribute here must use the !important flag to override default settings */
+ }
+ 
+ .searchPgnExpression {
+     /* a "width" attribute here must use the !important flag to override default settings */
+ }
+ 
+ .move,
+ .variation,
+ .comment {
+     line-height: 1.4em;
+     font-weight: normal;
+     font-size: 1.5rem;
+     font-family: 'pgn4web ChessSansUsual', 'pgn4web Liberation Sans', sans-serif;
+ }
+ 
+ .move,
+ .variation,
+ .commentMove {
+     font-family: 'pgn4web ChessSansUsual', 'pgn4web Liberation Sans', sans-serif;
+ }
+ 
+ a.move,
+ a.variation,
+ .commentMove {
+     white-space: nowrap;
+ }
+ 
+ .move,
+ .variation {
+     text-decoration: none;
+ }
+ 
+ a.move:hover,
+ a.variation:hover {
+     text-decoration: underline;
+ }
+ 
+ .move {
+     color: #c6c6c6;
+ }
+ 
+ .comment,
+ .variation,
+ .label {
+     color: gray;
+ }
+ 
+ a.variation {
+     color: gray;
+ }
+ 
+ .moveOn,
+ .variationOn {
+     background: #DAF4D7;
+ }
+ 
+ 

assets/css/styles.css

@@ -267,6 +267,9 @@
   .hidden {
     display: none;
   }
+  .table {
+    display: table;
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -288,6 +291,9 @@
   .h-full {
     height: 100%;
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
   .w-3\/4 {
     width: calc(3/4 * 100%);
   }
@@ -315,12 +321,18 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .rotate-180 {
     rotate: 180deg;
   }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .resize {
+    resize: both;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -372,6 +384,10 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -379,6 +395,9 @@
   .border-gray-700 {
     border-color: var(--color-gray-700);
   }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
   .bg-blue-500\/40 {
     background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -496,6 +515,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -514,6 +536,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -801,6 +827,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -831,6 +862,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-duration: initial;
     }
   }

site/snippets/header.php

@@ -40,6 +40,7 @@
 
     <?= css([
         'assets/css/styles.css',
+        'assets/css/png4web.css',
     ]) ?>
 
     <?php