From b28c7702e41a65a010b6a73d3996113b3348adc1 Mon Sep 17 00:00:00 2001
From: Trevor Fitzgerald <fitztrev@users.noreply.github.com>
Date: Mon, 31 Jul 2023 18:06:17 -0400
Subject: [PATCH 1/2] more demos

---
 demo.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 4 deletions(-)
diff --git a/demo.html b/demo.html
index 0ed26081..289f7498 100644
--- 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,69 @@
     <script type="module">
       import { Chessground } from './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: 'A',
+              modifiers: {
+                hilite: true,
+              },
+            },
+            {
+              orig: 'b2',
+              dest: 'b6',
+              brush: 'blue',
+              label: 'B',
+            },
+            {
+              orig: 'c2',
+              dest: 'c4',
+              brush: 'red',
+              label: 'C',
+            },
+            {
+              orig: 'd2',
+              dest: 'd3',
+              brush: 'green',
+              label: 'D',
+            },
+            {
+              orig: 'f1',
+              dest: 'h3',
+              brush: 'blue',
+              label: 'F',
+            },
+            {
+              orig: 'g1',
+              dest: 'f3',
+              brush: 'yellow',
+              label: '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>

From 3e5bd085e823d371283ada64eff059e895a1c1c8 Mon Sep 17 00:00:00 2001
From: Trevor Fitzgerald <fitztrev@users.noreply.github.com>
Date: Tue, 1 Aug 2023 19:05:03 -0400
Subject: [PATCH 2/2] update demo line modifiers

---
 demo.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/demo.html b/demo.html
index 289f7498..f6737998 100644
--- a/demo.html
+++ b/demo.html
@@ -42,7 +42,7 @@
               orig: 'a2',
               dest: 'a6',
               brush: 'green',
-              label: 'A',
+              label: { text: 'A' },
               modifiers: {
                 hilite: true,
               },
@@ -51,31 +51,34 @@
               orig: 'b2',
               dest: 'b6',
               brush: 'blue',
-              label: 'B',
+              label: { text: 'B' },
+              modifiers: {
+                lineWidth: 6,
+              },
             },
             {
               orig: 'c2',
               dest: 'c4',
               brush: 'red',
-              label: 'C',
+              label: { text: 'C' },
             },
             {
               orig: 'd2',
               dest: 'd3',
               brush: 'green',
-              label: 'D',
+              label: { text: 'D' },
             },
             {
               orig: 'f1',
               dest: 'h3',
               brush: 'blue',
-              label: 'F',
+              label: { text: 'F' },
             },
             {
               orig: 'g1',
               dest: 'f3',
               brush: 'yellow',
-              label: 'E',
+              label: { text: 'E' },
             },
           ],
         },
