Merge pull request #279 from fitztrev/more-demos

Include multiple demos
lichess-org · Sep 12, 2023 · 4bb7be9 · 4bb7be9
2 parents 0aa3ce6 + 3e5bd08
commit 4bb7be9
Showing 1 changed file with 74 additions and 4 deletions.
diff --git a/demo.html b/demo.html
@@ -9,7 +9,16 @@
     <link rel="stylesheet" type="text/css" href="assets/chessground.brown.css" />
     <link rel="stylesheet" type="text/css" href="assets/chessground.cburnett.css" />
     <style>
-      #chessground {
+      body {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      body > div {
+        margin: 10px;
+      }
+
+      .chessground {
         width: 500px;
         height: 500px;
       }
@@ -22,11 +31,72 @@
     <script type="module">
       import { Chessground } from './dist/chessground.js';
 
-      const config = {};
-      const ground = Chessground(document.getElementById('chessground'), config);
+      Chessground(document.getElementById('board-1'), {});
+      Chessground(document.getElementById('board-2'), {
+        fen: 'r2q2k1/1p6/p2p4/2pN1rp1/N1Pb2Q1/8/PP1B4/R6K b - - 2 25',
+      });
+      Chessground(document.getElementById('board-3'), {
+        drawable: {
+          autoShapes: [
+            {
+              orig: 'a2',
+              dest: 'a6',
+              brush: 'green',
+              label: { text: 'A' },
+              modifiers: {
+                hilite: true,
+              },
+            },
+            {
+              orig: 'b2',
+              dest: 'b6',
+              brush: 'blue',
+              label: { text: 'B' },
+              modifiers: {
+                lineWidth: 6,
+              },
+            },
+            {
+              orig: 'c2',
+              dest: 'c4',
+              brush: 'red',
+              label: { text: 'C' },
+            },
+            {
+              orig: 'd2',
+              dest: 'd3',
+              brush: 'green',
+              label: { text: 'D' },
+            },
+            {
+              orig: 'f1',
+              dest: 'h3',
+              brush: 'blue',
+              label: { text: 'F' },
+            },
+            {
+              orig: 'g1',
+              dest: 'f3',
+              brush: 'yellow',
+              label: { text: 'E' },
+            },
+          ],
+        },
+      });
     </script>
   </head>
   <body>
-    <div id="chessground"></div>
+    <div>
+      basic board, default config
+      <div class="chessground" id="board-1"></div>
+    </div>
+    <div>
+      board with a fen
+      <div class="chessground" id="board-2"></div>
+    </div>
+    <div>
+      board with fixed arrows + labels
+      <div class="chessground" id="board-3"></div>
+    </div>
   </body>
 </html>