From 3f37803c34f3e7da4d62278ff179a4b0e651d7d3 Mon Sep 17 00:00:00 2001
From: Jesse McDonald <nybble41@gmail.com>
Date: Mon, 4 May 2020 00:18:10 -0500
Subject: [PATCH] use view boxes instead of CSS :target to allow theme preview

---
 scripts/gen-theme-views.hs | 29 ++++++++++++++
 svg/pacosako-theme.svg     | 79 ++++++++++++++++++++++++--------------
 svg/traditional-theme.svg  | 79 ++++++++++++++++++++++++--------------
 webpack.config.js          |  9 +----
 4 files changed, 130 insertions(+), 66 deletions(-)
 create mode 100644 scripts/gen-theme-views.hs

diff --git a/scripts/gen-theme-views.hs b/scripts/gen-theme-views.hs
new file mode 100644
index 0000000..be3e2b7
--- /dev/null
+++ b/scripts/gen-theme-views.hs
@@ -0,0 +1,29 @@
+import Text.Printf
+
+edge = 28.223 :: Double
+spacing = 32 :: Double
+gap = spacing - edge
+across = [("light", "left"), ("dark", "right"), ("dark", "left"), ("light", "right")]
+down = ["king", "queen", "bishop", "knight", "rook", "pawn"]
+
+useElement :: Double -> Double -> String -> String -> String -> String
+useElement x y side kind place = printf format name x y edge edge x y name
+   where
+      format =
+         "<view id=\"%s\" width=\"80pt\" height=\"80pt\" viewBox=\"%.3f %.3f %.3f %.3f\"/>\n" ++
+         "<use transform=\"translate(%.3f %.3f)\" xlink:href=\"#sym_%s\"/>"
+      name = side ++ "_" ++ kind ++ "_" ++ place
+
+main = do
+   putStr $ unlines $ concat $
+      flip map (zip [5*spacing,4*spacing..] down) $ \(y, kind) ->
+         flip map (zip [0,spacing..] across) $ \(x, (side, place)) ->
+            useElement x y side kind place
+   putStr "<path stroke-width=\"0.25\" stroke=\"#000\" d=\""
+   putStr $ flip concatMap [0..6] $ \row ->
+      printf "M%0.3f %0.3fH%0.3f" (0 - gap/2) (row*spacing-(gap/2)) (4*spacing - gap/2)
+   putStr $ flip concatMap [0..4] $ \col ->
+      printf "M%0.3f %0.3fV%0.3f" (col*spacing-(gap/2)) (0 - gap/2) (6*spacing - gap/2)
+   putStrLn "\"/>"
+   printf "viewBox=\"%.3f %0.3f %.3f %.3f\"\n"
+      (0-spacing) (0-gap) (6*spacing + 2*gap) (6*spacing + 2*gap)
diff --git a/svg/pacosako-theme.svg b/svg/pacosako-theme.svg
index 6abaf7b..d01df82 100644
--- a/svg/pacosako-theme.svg
+++ b/svg/pacosako-theme.svg
@@ -1,9 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 28.222 28.222">
-  <style>
-    .piece { display: none !important }
-    .piece:target { display: inline !important }
-  </style>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6in" height="6in" viewBox="-32.000 -3.777 199.554 199.554">
   <defs>
     <symbol id="sym_light_rook_left">
       <g transform="translate(-.851 -271.208)">
@@ -190,28 +186,53 @@
       </g>
     </symbol>
   </defs>
-  <use id="dark_king_left" class="piece" xlink:href="#sym_dark_king_left"/>
-  <use id="dark_queen_left" class="piece" xlink:href="#sym_dark_queen_left"/>
-  <use id="dark_bishop_left" class="piece" xlink:href="#sym_dark_bishop_left"/>
-  <use id="dark_knight_left" class="piece" xlink:href="#sym_dark_knight_left"/>
-  <use id="dark_rook_left" class="piece" xlink:href="#sym_dark_rook_left"/>
-  <use id="dark_pawn_left" class="piece" xlink:href="#sym_dark_pawn_left"/>
-  <use id="light_king_right" class="piece" xlink:href="#sym_light_king_right"/>
-  <use id="light_queen_right" class="piece" xlink:href="#sym_light_queen_right"/>
-  <use id="light_bishop_right" class="piece" xlink:href="#sym_light_bishop_right"/>
-  <use id="light_knight_right" class="piece" xlink:href="#sym_light_knight_right"/>
-  <use id="light_rook_right" class="piece" xlink:href="#sym_light_rook_right"/>
-  <use id="light_pawn_right" class="piece" xlink:href="#sym_light_pawn_right"/>
-  <use id="dark_king_right" class="piece" xlink:href="#sym_dark_king_right"/>
-  <use id="dark_queen_right" class="piece" xlink:href="#sym_dark_queen_right"/>
-  <use id="dark_bishop_right" class="piece" xlink:href="#sym_dark_bishop_right"/>
-  <use id="dark_knight_right" class="piece" xlink:href="#sym_dark_knight_right"/>
-  <use id="dark_rook_right" class="piece" xlink:href="#sym_dark_rook_right"/>
-  <use id="dark_pawn_right" class="piece" xlink:href="#sym_dark_pawn_right"/>
-  <use id="light_king_left" class="piece" xlink:href="#sym_light_king_left"/>
-  <use id="light_queen_left" class="piece" xlink:href="#sym_light_queen_left"/>
-  <use id="light_bishop_left" class="piece" xlink:href="#sym_light_bishop_left"/>
-  <use id="light_knight_left" class="piece" xlink:href="#sym_light_knight_left"/>
-  <use id="light_rook_left" class="piece" xlink:href="#sym_light_rook_left"/>
-  <use id="light_pawn_left" class="piece" xlink:href="#sym_light_pawn_left"/>
+  <view id="light_king_left" viewBox="0.000 160.000 28.223 28.223"/>
+  <view id="dark_king_right" viewBox="32.000 160.000 28.223 28.223"/>
+  <view id="dark_king_left" viewBox="64.000 160.000 28.223 28.223"/>
+  <view id="light_king_right" viewBox="96.000 160.000 28.223 28.223"/>
+  <view id="light_queen_left" viewBox="0.000 128.000 28.223 28.223"/>
+  <view id="dark_queen_right" viewBox="32.000 128.000 28.223 28.223"/>
+  <view id="dark_queen_left" viewBox="64.000 128.000 28.223 28.223"/>
+  <view id="light_queen_right" viewBox="96.000 128.000 28.223 28.223"/>
+  <view id="light_bishop_left" viewBox="0.000 96.000 28.223 28.223"/>
+  <view id="dark_bishop_right" viewBox="32.000 96.000 28.223 28.223"/>
+  <view id="dark_bishop_left" viewBox="64.000 96.000 28.223 28.223"/>
+  <view id="light_bishop_right" viewBox="96.000 96.000 28.223 28.223"/>
+  <view id="light_knight_left" viewBox="0.000 64.000 28.223 28.223"/>
+  <view id="dark_knight_right" viewBox="32.000 64.000 28.223 28.223"/>
+  <view id="dark_knight_left" viewBox="64.000 64.000 28.223 28.223"/>
+  <view id="light_knight_right" viewBox="96.000 64.000 28.223 28.223"/>
+  <view id="light_rook_left" viewBox="0.000 32.000 28.223 28.223"/>
+  <view id="dark_rook_right" viewBox="32.000 32.000 28.223 28.223"/>
+  <view id="dark_rook_left" viewBox="64.000 32.000 28.223 28.223"/>
+  <view id="light_rook_right" viewBox="96.000 32.000 28.223 28.223"/>
+  <view id="light_pawn_left" viewBox="0.000 0.000 28.223 28.223"/>
+  <view id="dark_pawn_right" viewBox="32.000 0.000 28.223 28.223"/>
+  <view id="dark_pawn_left" viewBox="64.000 0.000 28.223 28.223"/>
+  <view id="light_pawn_right" viewBox="96.000 0.000 28.223 28.223"/>
+  <path stroke-width="0.25" stroke="#000" d="M-1.889 -1.889H126.112M-1.889 30.112H126.112M-1.889 62.112H126.112M-1.889 94.112H126.112M-1.889 126.112H126.112M-1.889 158.112H126.112M-1.889 190.112H126.112M-1.889 -1.889V190.112M30.112 -1.889V190.112M62.112 -1.889V190.112M94.112 -1.889V190.112M126.112 -1.889V190.112"/>
+  <use transform="translate(0.000 160.000)" xlink:href="#sym_light_king_left"/>
+  <use transform="translate(32.000 160.000)" xlink:href="#sym_dark_king_right"/>
+  <use transform="translate(64.000 160.000)" xlink:href="#sym_dark_king_left"/>
+  <use transform="translate(96.000 160.000)" xlink:href="#sym_light_king_right"/>
+  <use transform="translate(0.000 128.000)" xlink:href="#sym_light_queen_left"/>
+  <use transform="translate(32.000 128.000)" xlink:href="#sym_dark_queen_right"/>
+  <use transform="translate(64.000 128.000)" xlink:href="#sym_dark_queen_left"/>
+  <use transform="translate(96.000 128.000)" xlink:href="#sym_light_queen_right"/>
+  <use transform="translate(0.000 96.000)" xlink:href="#sym_light_bishop_left"/>
+  <use transform="translate(32.000 96.000)" xlink:href="#sym_dark_bishop_right"/>
+  <use transform="translate(64.000 96.000)" xlink:href="#sym_dark_bishop_left"/>
+  <use transform="translate(96.000 96.000)" xlink:href="#sym_light_bishop_right"/>
+  <use transform="translate(0.000 64.000)" xlink:href="#sym_light_knight_left"/>
+  <use transform="translate(32.000 64.000)" xlink:href="#sym_dark_knight_right"/>
+  <use transform="translate(64.000 64.000)" xlink:href="#sym_dark_knight_left"/>
+  <use transform="translate(96.000 64.000)" xlink:href="#sym_light_knight_right"/>
+  <use transform="translate(0.000 32.000)" xlink:href="#sym_light_rook_left"/>
+  <use transform="translate(32.000 32.000)" xlink:href="#sym_dark_rook_right"/>
+  <use transform="translate(64.000 32.000)" xlink:href="#sym_dark_rook_left"/>
+  <use transform="translate(96.000 32.000)" xlink:href="#sym_light_rook_right"/>
+  <use transform="translate(0.000 0.000)" xlink:href="#sym_light_pawn_left"/>
+  <use transform="translate(32.000 0.000)" xlink:href="#sym_dark_pawn_right"/>
+  <use transform="translate(64.000 0.000)" xlink:href="#sym_dark_pawn_left"/>
+  <use transform="translate(96.000 0.000)" xlink:href="#sym_light_pawn_right"/>
 </svg>
diff --git a/svg/traditional-theme.svg b/svg/traditional-theme.svg
index dafeaca..59dc450 100644
--- a/svg/traditional-theme.svg
+++ b/svg/traditional-theme.svg
@@ -1,9 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 28.223 28.223">
-  <style>
-    .piece { display: none !important }
-    .piece:target { display: inline !important }
-  </style>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6in" height="6in" viewBox="-32.000 -3.777 199.554 199.554">
   <defs>
     <symbol id="sym_dark_pawn_right" stroke-width="1.01">
       <path transform="matrix(1.37 0 0 1.3436 30.822 -39.214)" d="M-7.219 36.174a1.058 1.058 0 00-.852 1.688 1.708 1.708 0 00-.23 2.818c-.794.28-1.96 1.468-1.96 3.564h6.085c0-2.096-1.167-3.284-1.96-3.564a1.708 1.708 0 00-.23-2.818 1.058 1.058 0 00-.852-1.688z" stroke="#000" stroke-linecap="round" stroke-width=".401"/>
@@ -186,28 +182,53 @@
       </g>
     </symbol>
   </defs>
-  <use id="dark_pawn_left" class="piece" xlink:href="#sym_dark_pawn_left"/>
-  <use id="dark_rook_left" class="piece" xlink:href="#sym_dark_rook_left"/>
-  <use id="dark_knight_left" class="piece" xlink:href="#sym_dark_knight_left"/>
-  <use id="dark_bishop_left" class="piece" xlink:href="#sym_dark_bishop_left"/>
-  <use id="dark_queen_left" class="piece" xlink:href="#sym_dark_queen_left"/>
-  <use id="dark_king_left" class="piece" xlink:href="#sym_dark_king_left"/>
-  <use id="light_pawn_left" class="piece" xlink:href="#sym_light_pawn_left"/>
-  <use id="light_rook_left" class="piece" xlink:href="#sym_light_rook_left"/>
-  <use id="light_knight_left" class="piece" xlink:href="#sym_light_knight_left"/>
-  <use id="light_bishop_left" class="piece" xlink:href="#sym_light_bishop_left"/>
-  <use id="light_queen_left" class="piece" xlink:href="#sym_light_queen_left"/>
-  <use id="light_king_left" class="piece" xlink:href="#sym_light_king_left"/>
-  <use id="dark_pawn_right" class="piece" xlink:href="#sym_dark_pawn_right"/>
-  <use id="dark_rook_right" class="piece" xlink:href="#sym_dark_rook_right"/>
-  <use id="dark_knight_right" class="piece" xlink:href="#sym_dark_knight_right"/>
-  <use id="dark_bishop_right" class="piece" xlink:href="#sym_dark_bishop_right"/>
-  <use id="dark_queen_right" class="piece" xlink:href="#sym_dark_queen_right"/>
-  <use id="dark_king_right" class="piece" xlink:href="#sym_dark_king_right"/>
-  <use id="light_pawn_right" class="piece" xlink:href="#sym_light_pawn_right"/>
-  <use id="light_rook_right" class="piece" xlink:href="#sym_light_rook_right"/>
-  <use id="light_knight_right" class="piece" xlink:href="#sym_light_knight_right"/>
-  <use id="light_bishop_right" class="piece" xlink:href="#sym_light_bishop_right"/>
-  <use id="light_queen_right" class="piece" xlink:href="#sym_light_queen_right"/>
-  <use id="light_king_right" class="piece" xlink:href="#sym_light_king_right"/>
+  <view id="light_king_left" viewBox="0.000 160.000 28.223 28.223"/>
+  <view id="dark_king_right" viewBox="32.000 160.000 28.223 28.223"/>
+  <view id="dark_king_left" viewBox="64.000 160.000 28.223 28.223"/>
+  <view id="light_king_right" viewBox="96.000 160.000 28.223 28.223"/>
+  <view id="light_queen_left" viewBox="0.000 128.000 28.223 28.223"/>
+  <view id="dark_queen_right" viewBox="32.000 128.000 28.223 28.223"/>
+  <view id="dark_queen_left" viewBox="64.000 128.000 28.223 28.223"/>
+  <view id="light_queen_right" viewBox="96.000 128.000 28.223 28.223"/>
+  <view id="light_bishop_left" viewBox="0.000 96.000 28.223 28.223"/>
+  <view id="dark_bishop_right" viewBox="32.000 96.000 28.223 28.223"/>
+  <view id="dark_bishop_left" viewBox="64.000 96.000 28.223 28.223"/>
+  <view id="light_bishop_right" viewBox="96.000 96.000 28.223 28.223"/>
+  <view id="light_knight_left" viewBox="0.000 64.000 28.223 28.223"/>
+  <view id="dark_knight_right" viewBox="32.000 64.000 28.223 28.223"/>
+  <view id="dark_knight_left" viewBox="64.000 64.000 28.223 28.223"/>
+  <view id="light_knight_right" viewBox="96.000 64.000 28.223 28.223"/>
+  <view id="light_rook_left" viewBox="0.000 32.000 28.223 28.223"/>
+  <view id="dark_rook_right" viewBox="32.000 32.000 28.223 28.223"/>
+  <view id="dark_rook_left" viewBox="64.000 32.000 28.223 28.223"/>
+  <view id="light_rook_right" viewBox="96.000 32.000 28.223 28.223"/>
+  <view id="light_pawn_left" viewBox="0.000 0.000 28.223 28.223"/>
+  <view id="dark_pawn_right" viewBox="32.000 0.000 28.223 28.223"/>
+  <view id="dark_pawn_left" viewBox="64.000 0.000 28.223 28.223"/>
+  <view id="light_pawn_right" viewBox="96.000 0.000 28.223 28.223"/>
+  <path stroke-width="0.25" stroke="#000" d="M-1.889 -1.889H126.112M-1.889 30.112H126.112M-1.889 62.112H126.112M-1.889 94.112H126.112M-1.889 126.112H126.112M-1.889 158.112H126.112M-1.889 190.112H126.112M-1.889 -1.889V190.112M30.112 -1.889V190.112M62.112 -1.889V190.112M94.112 -1.889V190.112M126.112 -1.889V190.112"/>
+  <use transform="translate(0.000 160.000)" xlink:href="#sym_light_king_left"/>
+  <use transform="translate(32.000 160.000)" xlink:href="#sym_dark_king_right"/>
+  <use transform="translate(64.000 160.000)" xlink:href="#sym_dark_king_left"/>
+  <use transform="translate(96.000 160.000)" xlink:href="#sym_light_king_right"/>
+  <use transform="translate(0.000 128.000)" xlink:href="#sym_light_queen_left"/>
+  <use transform="translate(32.000 128.000)" xlink:href="#sym_dark_queen_right"/>
+  <use transform="translate(64.000 128.000)" xlink:href="#sym_dark_queen_left"/>
+  <use transform="translate(96.000 128.000)" xlink:href="#sym_light_queen_right"/>
+  <use transform="translate(0.000 96.000)" xlink:href="#sym_light_bishop_left"/>
+  <use transform="translate(32.000 96.000)" xlink:href="#sym_dark_bishop_right"/>
+  <use transform="translate(64.000 96.000)" xlink:href="#sym_dark_bishop_left"/>
+  <use transform="translate(96.000 96.000)" xlink:href="#sym_light_bishop_right"/>
+  <use transform="translate(0.000 64.000)" xlink:href="#sym_light_knight_left"/>
+  <use transform="translate(32.000 64.000)" xlink:href="#sym_dark_knight_right"/>
+  <use transform="translate(64.000 64.000)" xlink:href="#sym_dark_knight_left"/>
+  <use transform="translate(96.000 64.000)" xlink:href="#sym_light_knight_right"/>
+  <use transform="translate(0.000 32.000)" xlink:href="#sym_light_rook_left"/>
+  <use transform="translate(32.000 32.000)" xlink:href="#sym_dark_rook_right"/>
+  <use transform="translate(64.000 32.000)" xlink:href="#sym_dark_rook_left"/>
+  <use transform="translate(96.000 32.000)" xlink:href="#sym_light_rook_right"/>
+  <use transform="translate(0.000 0.000)" xlink:href="#sym_light_pawn_left"/>
+  <use transform="translate(32.000 0.000)" xlink:href="#sym_dark_pawn_right"/>
+  <use transform="translate(64.000 0.000)" xlink:href="#sym_dark_pawn_left"/>
+  <use transform="translate(96.000 0.000)" xlink:href="#sym_light_pawn_right"/>
 </svg>
diff --git a/webpack.config.js b/webpack.config.js
index 65976f6..9651d5f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -52,14 +52,7 @@ module.exports = {
             loader: "svgo-loader",
             options: {
               plugins: [
-                {
-                  cleanupIDs: {
-                    preserve_prefix: [
-                      "light_",
-                      "dark_"
-                    ]
-                  }
-                }
+                { cleanupIDs: false }
               ]
             }
           }