From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sat, 30 Dec 2023 10:58:13 +0000 (+0100)
Subject: Fix some complete rules
X-Git-Url: https://git.auder.net/variants/Chakart/css/assets/doc/DESCRIPTION?a=commitdiff_plain;h=a55fde41f82207bf401c54b158dd6d0182799fd3;p=xogo.git

Fix some complete rules
---

diff --git a/.gitignore b/.gitignore
index 160c63a..d3206f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,7 @@
 /node_modules/
 /assets/
 /assets.zip
+/extras/
+/extras.zip
 /.pid
 /parameters.js
diff --git a/README.md b/README.md
index b0517cd..4636ac4 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ PHP + Node.js + npm.
 ## Usage
 
 ```wget https://xogo.live/assets.zip && unzip assets.zip``` <br/>
+```wget https://xogo.live/extras.zip && unzip extras.zip``` <br/>
 Rename parameters.js.dist &rarr; parameters.js, and edit file. <br/>
 ```npm i```
 
diff --git a/common.css b/common.css
index 5fee7ef..eabf641 100644
--- a/common.css
+++ b/common.css
@@ -260,6 +260,10 @@ piece.mark.transparent {
   color: #0D1C46;
   font-weight: bold;
 }
+.full-rules .img-center {
+  display: block;
+  margin: 0 auto;
+}
 /* TODO: use same CSS for rules and full-rules? */
 .full-rules p, .full-rules ul, .full-rules ol {
   margin: 10px 0;
diff --git a/variants/Alapo/rules.html b/variants/Alapo/rules.html
index 9ec57e0..910613b 100644
--- a/variants/Alapo/rules.html
+++ b/variants/Alapo/rules.html
@@ -2,8 +2,10 @@
 
 <p>Goal: bring a piece safely on the last rank.</p>
 
-<a href="https://www.chessvariants.com/small.dir/alapo.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/small.dir/alapo.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Johannes Tranelis (1982).</p>
diff --git a/variants/Alice/rules.html b/variants/Alice/rules.html
index 98659ea..215818f 100644
--- a/variants/Alice/rules.html
+++ b/variants/Alice/rules.html
@@ -1,7 +1,9 @@
 <p>Pieces move to the next board after playing (other side of the mirror).</p>
 
-<a href="https://www.chessvariants.com/other.dir/alice.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/other.dir/alice.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Vernon R. Parton (1953).</p>
diff --git a/variants/Allmate/rules.html b/variants/Allmate/rules.html
index 4bdc308..4738949 100644
--- a/variants/Allmate/rules.html
+++ b/variants/Allmate/rules.html
@@ -6,8 +6,10 @@
 
 <p>Win by mate-capturing the enemy king.</p>
 
-<a href="https://www.chessvariants.com/difftaking.dir/allmate.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/difftaking.dir/allmate.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Dr. Chris Taylor (1979).</p>
diff --git a/variants/Ambiguous/rules.html b/variants/Ambiguous/rules.html
index acd3585..137579d 100644
--- a/variants/Ambiguous/rules.html
+++ b/variants/Ambiguous/rules.html
@@ -8,8 +8,10 @@
   your opponent, then to choose one for you - which could be altered.
 </p>
 
-<a href="https://www.chessvariants.com/mvopponent.dir/ambiguous-chess.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/mvopponent.dir/ambiguous-chess.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Fabrice Liardet (2005).</p>
diff --git a/variants/Apocalypse/complete_rules.html b/variants/Apocalypse/complete_rules.html
index ae45dad..9e2d5c0 100644
--- a/variants/Apocalypse/complete_rules.html
+++ b/variants/Apocalypse/complete_rules.html
@@ -5,7 +5,6 @@
   <link href="/variants/Apocalypse/style.css" rel="stylesheet"/>
 </head>
 <body>
-
 <div class="full-rules">
 <h1>Apocalypse Rules</h1>
 
diff --git a/variants/Apocalypse/rules.html b/variants/Apocalypse/rules.html
index 6674bb2..75f35b2 100644
--- a/variants/Apocalypse/rules.html
+++ b/variants/Apocalypse/rules.html
@@ -8,8 +8,10 @@
 
 <p>The goal is to eliminate all enemy pawns.</p>
 
-<a target="_blank" href="/variants/Apocalypse/complete_rules.html">
-  Full rules description.
-</a>
+<p>
+  <a target="_blank" href="/variants/Apocalypse/complete_rules.html">
+    Full rules description.
+  </a>
+</p>
 
 <p class="author">C.S. Elliott (1976).</p>
diff --git a/variants/Arena/rules.html b/variants/Arena/rules.html
index 5aa8716..b9098c3 100644
--- a/variants/Arena/rules.html
+++ b/variants/Arena/rules.html
@@ -14,8 +14,10 @@
   A player who lose both king and queen also lose the game.
 </p>
 
-<a href="https://www.chessvariants.com/32turn.dir/arenachess.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/32turn.dir/arenachess.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Jeff Kiska (2000).</p>
diff --git a/variants/Atomic/rules.html b/variants/Atomic/rules.html
index 6067ed5..6675403 100644
--- a/variants/Atomic/rules.html
+++ b/variants/Atomic/rules.html
@@ -5,6 +5,8 @@
 
 <p>Win by checkmate or by exploding the enemy king.</p>
 
-<a href="https://lichess.org/variant/atomic">
-  lichess page.
-</a>
+<p>
+  <a href="https://lichess.org/variant/atomic">
+    lichess page.
+  </a>
+</p>
diff --git a/variants/Avalam/rules.html b/variants/Avalam/rules.html
index 83e301e..6883b3b 100644
--- a/variants/Avalam/rules.html
+++ b/variants/Avalam/rules.html
@@ -9,8 +9,10 @@
   largest number of towers of his color (on top) wins.
 </p>
 
-<a href="http://jeuxstrategie.free.fr/Avalam_complet.php">
-  More informations.
-</a>
+<p>
+  <a href="http://jeuxstrategie.free.fr/Avalam_complet.php">
+    More informations.
+  </a>
+</p>
 
 <p class="author">Philippe Deweys (1995).</p>
diff --git a/variants/Avalanche/rules.html b/variants/Avalanche/rules.html
index b8bb255..9528d3a 100644
--- a/variants/Avalanche/rules.html
+++ b/variants/Avalanche/rules.html
@@ -6,8 +6,10 @@
 
 <p>The goal is either to checkmate or to capture the enemy king.</p>
 
-<a href="https://www.chessvariants.com/mvopponent.dir/avalanche.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/mvopponent.dir/avalanche.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Ralph Betza (1977).</p>
diff --git a/variants/Balaklava/rules.html b/variants/Balaklava/rules.html
index 97c96a6..96ce11b 100644
--- a/variants/Balaklava/rules.html
+++ b/variants/Balaklava/rules.html
@@ -10,8 +10,10 @@
   <li>No en passant captures.</li>
 </ul>
 
-<a href="https://www.chessvariants.com/diffmove.dir/balaklava.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/diffmove.dir/balaklava.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Gianluca Vecchi (1994).</p>
diff --git a/variants/Bario/complete_rules.html b/variants/Bario/complete_rules.html
index 93ecc9d..ad700ac 100644
--- a/variants/Bario/complete_rules.html
+++ b/variants/Bario/complete_rules.html
@@ -1,64 +1,97 @@
-p.boxed
-  | Your pieces remain in an undefined state until they are moved.
+<!doctype html>
+<html>
+<head>
+  <title>Bario Rules</title>
+  <link href="/common.css" rel="stylesheet"/>
+  <link href="/variants/Checkered/style.css" rel="stylesheet"/>
+</head>
+<body>
+<div class="full-rules">
+<h1>Bario Rules</h1>
 
-p
-  | Bario is a chess variant invented by Panos Louridas in 1998. 
-  a(href="https://www.bario-chess-checkers-chessphotography-spaceart.de/")
-    | His website
-  | &nbsp;contains many examples and explanations.
-  | See also the discussion 
-  a(href="https://www.chessvariants.com/index/listcomments.php?order=DESC&itemid=Bario")
-    | on chessvariants.com
-  | .
+<p>
+  Bario is a chess variant invented by Panos Louridas in 1998.
+  <a href="https://www.bario-chess-checkers-chessphotography-spaceart.de/">
+    His website
+  </a>
+  contains many examples and explanations.
+  See also the discussion
+  <a href="https://www.chessvariants.com/index/listcomments.php?order=DESC&itemid=Bario">
+    on chessvariants.com
+  </a>.
+</p>
 
-figure
-  img.img-center(src="/variants/Bario/chessboard2.jpg" style="width:75%")
-  figcaption.text-center.
-    [With author's permission]
+<figure>
+  <img class="img-center" src="/extras/Bario/chessboard2.jpg" style="width:75%">
+  <figcaption>
+    [With author's permission]<br>
     Undefined pieces on first ranks.
+  </figcaption>
+</figure>
 
-p.
+<p>
   Queens, rooks, bishops and knights begin the game in a reserve below
   the board, because their location isn't determined yet.
   At each turn, you can either move something already defined on the board, or
-ol
-  li move a piece from your reserve to any question mark, and then
-  li move the now defined piece on the board.
+</p>
+<ol>
+  <li>move a piece from your reserve to any question mark, and then</li>
+  <li>move the now defined piece on the board.</li>
+</ol>
 
-p An undefined piece gives check if some specialization giving check exists.
+<p>Your pieces remain in an undefined state until they are moved.</p>
 
-figure.diagram-container
-  .diagram
-    | fen:uuuuu1uk/p2p1qp1/1p6/7p/7P/5N2/PP1P1PP1/UUUKU1UU:
-  figcaption The white king cannot move, a rook might be on c8 or e8
+<p>An undefined piece gives check if some specialization giving check exists.</p>
 
-h4 Details, special cases
+<figure>
+  <div class="diag"
+       data-fen='uuuuu1uk/p2p1qp1/1p6/7p/7P/5N2/PP1P1PP1/UUUKU1UU w 10 {"captureUndef":"-","enpassant":"-","reserve":"22212221"}'>
+  </div>
+  <figcaption>The white king cannot move, a rook might be on c8 or e8</figcaption>
+</figure>
 
-p.
+<h4>Details, special cases</h4>
+
+<p>
   At the first move, you must select a square for the king anywhere on
   the first rank &mdash; preferably in a corner. This deviates from the
   original intention of the author, but this way you will not need to castle
   later in the game. Click on a square to place the king.
+</p>
 
-p.
+<p>
   If after your move all your pieces are defined (and weren't before), then
   all pieces on board revert to undefined state, unless:
-ul
-  li.
+</p>
+<ul>
+  <li>
     all your pieces (board + reserve) are now of the same type,
     in which case none is put back in reserve, or
-  li.
+  </li>
+  <li>
     all opponent's pieces are of the same type, in which case
     they also remain defined.
+  </li>
+</ul>
 
-figure.diagram-container
-  .diagram.diag12
-    | fen:uuu1kuuu/2p5/2n5/1p1ppppp/p4PPP/3N3Q/PPPPP1BB/1RRUK3:
-  .diagram.diag22
-    | fen:uuu1kuuu/2p5/2u5/1p1ppppp/p4PPP/3UU2U/PPPPP1UU/1UU1K3:
-  figcaption.
+<figure>
+  <div class="diag left"
+       data-fen='uuu1kuuu/2p5/2n5/1p1ppppp/p4PPP/3N3Q/PPPPP1BB/1RRUK3 w 10 {"captureUndef":"-","enpassant":"-","reserve":"22212221"}'>
+  </div>
+  <div class="diag right"
+       data-fen='uuu1kuuu/2p5/2u5/1p1ppppp/p4PPP/3UU2U/PPPPP1UU/1UU1K3 w 10 {"captureUndef":"-","enpassant":"-","reserve":"22212221"}'>
+  </div>
+  <figcaption>
     Before and after knight definition on d1 (moving to e3)
+  </figcaption>
+</figure>
 
-p.
+<p>
   If one of your undefined pieces is captured, you first have to choose which
   one was captured from the reserve: place it at the capture location.
+</p>
+
+</body>
+<script src="/utils/drawDiagrams.js"></script>
+<script>fenToDiag("Bario");</script>
+</html>
diff --git a/variants/Bario/rules.html b/variants/Bario/rules.html
index 733246f..2dbcf24 100644
--- a/variants/Bario/rules.html
+++ b/variants/Bario/rules.html
@@ -14,12 +14,16 @@
   all pieces on board return to undefined state.
 </p>
 
-<a href="https://www.bario-chess-checkers-chessphotography-spaceart.de/">
-  Author's website.
-</a>
+<p>
+  <a href="https://www.bario-chess-checkers-chessphotography-spaceart.de/">
+    Author's website.
+  </a>
+</p>
 
-<a href="/variants/Bario/complete_rules.html">
-  Full rules description.
-</a>
+<p>
+  <a href="/variants/Bario/complete_rules.html">
+    Full rules description.
+  </a>
+</p>
 
 <p class="author">Panos Louridas (1985).</p>
diff --git a/variants/Baroque/complete_rules.html b/variants/Baroque/complete_rules.html
index 1ac46cc..87709ed 100644
--- a/variants/Baroque/complete_rules.html
+++ b/variants/Baroque/complete_rules.html
@@ -5,7 +5,6 @@
   <link href="/variants/Baroque/style.css" rel="stylesheet"/>
 </head>
 <body>
-
 <div class="full-rules">
 <h1>Baroque Rules</h1>
 
@@ -108,7 +107,7 @@
   <figure>
     <div class="diag"
          data-fen='2n4k/3r4/5b2/3p4/1m6/3b4/3N4/K7 w 0'
-         data-marks='d4,d6,d8,a5'>
+         data-mks='d4,d6,d8,a5'>
     </div>
     <figcaption>All marked squares captures are playable from d2.</figcaption>
   </figure>
@@ -120,8 +119,8 @@
   </p>
   <figure>
     <div class="diag"
-      data-fen="7k/8/8/3Qr3/8/8/8/K7 w 0"
-      data-marks="a5,b5,c5">
+         data-fen='7k/8/8/3Qr3/8/8/8/K7 w 0'
+         data-mks="a5,b5,c5">
     </div>
     <figcaption>1.Qa5, 1.Qb5 or 1.Qc5 captures the black rook.</figcaption>
   </figure>
@@ -141,8 +140,8 @@
   </p>
   <figure>
     <div class="diag"
-      data-fen="7k/8/8/r3pP2/2n5/8/B7/K7 w 0"
-      data-marks="a5,c4">
+         data-fen='7k/8/8/r3pP2/2n5/8/B7/K7 w 0'
+         data-mks="a5,c4">
     </div>
     <figcaption>1.Bd5 captures the two marked pieces.</figcaption>
   </figure>
@@ -166,8 +165,8 @@
   </p>
   <figure>
     <div class="diag"
-         data-fen="7k/8/8/p4r/4K3/8/8/8 w 0"
-         data-marks="e5">
+         data-fen='7k/8/8/p4r/4K3/8/8/8 w 0'
+         data-mks="e5">
     </div>
     <figcaption>1.Ke5 is impossible</figcaption>
   </figure>
diff --git a/variants/Baroque/rules.html b/variants/Baroque/rules.html
index 0e30307..ec5bb30 100644
--- a/variants/Baroque/rules.html
+++ b/variants/Baroque/rules.html
@@ -6,8 +6,10 @@
 
 <p>The goal is still to checkmate.</p>
 
-<a href="/variants/Baroque/complete_rules.html">
-  Full rules description.
-</a>
+<p>
+  <a href="/variants/Baroque/complete_rules.html">
+    Full rules description.
+  </a>
+</p>
 
 <p class="author">Robert Abbott (1963).</p>
diff --git a/variants/Benedict/rules.html b/variants/Benedict/rules.html
index db103a1..c2798b3 100644
--- a/variants/Benedict/rules.html
+++ b/variants/Benedict/rules.html
@@ -10,8 +10,10 @@
   where only the queen can change the color of enemy pieces.
 </p>
 
-<a href="https://www.chessvariants.com/difftaking.dir/benedict.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/difftaking.dir/benedict.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">William Daniel Troyka (2001).</p>
diff --git a/variants/Berolina/rules.html b/variants/Berolina/rules.html
index bfa1cca..1824b27 100644
--- a/variants/Berolina/rules.html
+++ b/variants/Berolina/rules.html
@@ -1,3 +1,7 @@
-<p>Pawns movements are reversed: they capture forward, and move diagonally. From the initial rank they can move two squares in diagonal. <a href="https://www.chessvariants.com/piececlopedia.dir/berolina.html">See also</a>.</p>
+<p>
+  Pawns movements are reversed: they capture forward, and move diagonally.
+  From the initial rank they can move two squares in diagonal.
+  <a href="https://www.chessvariants.com/piececlopedia.dir/berolina.html">See also</a>.
+</p>
 
 <p class="author">Edmund Nebermann (1926).</p>
diff --git a/variants/Cannibal/rules.html b/variants/Cannibal/rules.html
index 480b5cf..81d9c58 100644
--- a/variants/Cannibal/rules.html
+++ b/variants/Cannibal/rules.html
@@ -1,5 +1,7 @@
 <p>After each capture, the capturer transforms into the captured piece.</p>
 
-<a href="https://www.chessvariants.com/difftaking.dir/cannibal.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/difftaking.dir/cannibal.html">
+    chessvariants page.
+  </a>
+</p>
diff --git a/variants/Chakart/complete_rules.html b/variants/Chakart/complete_rules.html
index 7bf3080..d1c8fd6 100644
--- a/variants/Chakart/complete_rules.html
+++ b/variants/Chakart/complete_rules.html
@@ -5,7 +5,6 @@
   <link href="/variants/Chakart/style.css" rel="stylesheet"/>
 </head>
 <body>
-
 <div class="full-rules">
 <h1>Chakart Rules</h1>
 
diff --git a/variants/Chakart/rules.html b/variants/Chakart/rules.html
index d45cb0d..e125478 100644
--- a/variants/Chakart/rules.html
+++ b/variants/Chakart/rules.html
@@ -10,8 +10,10 @@
   <li>Eggs hide either a bonus or malus: see full description.</li>
 </ul>
 
-<a target="_blank" href="/variants/Chakart/complete_rules.html">
-  Full rules description.
-</a>
+<p>
+  <a target="_blank" href="/variants/Chakart/complete_rules.html">
+    Full rules description.
+  </a>
+</p>
 
 <p class="author">Charlotte Blard &amp; Benjamin Auder (2020).</p>
diff --git a/variants/Checkered/complete_rules.html b/variants/Checkered/complete_rules.html
index 5f21663..503e78d 100644
--- a/variants/Checkered/complete_rules.html
+++ b/variants/Checkered/complete_rules.html
@@ -6,7 +6,6 @@
   <link href="/variants/Checkered/style.css" rel="stylesheet"/>
 </head>
 <body>
-
 <div class="full-rules">
 <h1>Checkered Rules</h1>
 
@@ -15,12 +14,12 @@
   The capture of an enemy piece produces a new "checkered" piece belonging
   to both players.
 </p>
-<figure class="showPieces text-center">
-  <img src="pieces/cp.svg"/>
-  <img src="pieces/cr.svg"/>
-  <img src="pieces/cn.svg"/>
-  <img src="pieces/cb.svg"/>
-  <img src="pieces/cq.svg"/>
+<figure class="show-pieces">
+  <img src="/pieces/Checkered/cp.svg"/>
+  <img src="/pieces/Checkered/cr.svg"/>
+  <img src="/pieces/Checkered/cn.svg"/>
+  <img src="/pieces/Checkered/cb.svg"/>
+  <img src="/pieces/Checkered/cq.svg"/>
   <figcaption>Checkered pieces, born after captures.</figcaption>
 </figure>
 <p>Note: the initial French name for this variant is "l'Échiqueté".</p>
@@ -52,8 +51,10 @@
   </li>
   <li>Checkered pieces cannot be captured.</li>
 </ul>
-<figure class="diagram-container">
-  <div class="diagram">fen:2kr4/pp6/2p5/4ss1r/1P2ns1P/2Np4/P1P1P1BP/R2o1RK1:</div>
+<figure>
+  <div class="diag"
+       data-fen='2kr4/pp6/2p5/4ss1r/1P2ns1P/2Np4/P1P1P1BP/R2o1RK1'>
+  </div>
   <figcaption>
     Black plays Rxh4=P. (Checkered pawn to) h5 is allowed then,
     because piece's nature changed.
diff --git a/variants/Checkered/rules.html b/variants/Checkered/rules.html
index 892f352..a9209dd 100644
--- a/variants/Checkered/rules.html
+++ b/variants/Checkered/rules.html
@@ -3,8 +3,10 @@
   Checkered moves cannot be undone on next turn.
 </p>
 
-<a target="_blank" href="/variants/Checkered/complete_rules.html">
-  Full rules description.
-</a>
+<p>
+  <a target="_blank" href="/variants/Checkered/complete_rules.html">
+    Full rules description.
+  </a>
+</p>
 
 <p class="author">Patrick Bernier (2012).</p>
diff --git a/variants/Chess960/rules.html b/variants/Chess960/rules.html
index 776fa4a..5192abe 100644
--- a/variants/Chess960/rules.html
+++ b/variants/Chess960/rules.html
@@ -1,3 +1,5 @@
-<a href="https://en.wikipedia.org/wiki/Rules_of_chess">
-  Orthodox chess rules.
-</a>
+<p>
+  <a href="https://en.wikipedia.org/wiki/Rules_of_chess">
+    Orthodox chess rules.
+  </a>
+</p>
diff --git a/variants/Circular/rules.html b/variants/Circular/rules.html
index 6db9dd8..f9067b7 100644
--- a/variants/Circular/rules.html
+++ b/variants/Circular/rules.html
@@ -1,4 +1,4 @@
 <p>
-Lower and upper sides of the board communicate.<br>
+  Lower and upper sides of the board communicate.<br>
   All pawns move forward (up).
 </p>
diff --git a/variants/Clorange/rules.html b/variants/Clorange/rules.html
index f10e7f6..541862e 100644
--- a/variants/Clorange/rules.html
+++ b/variants/Clorange/rules.html
@@ -1,8 +1,12 @@
-<p>Captured pieces can be landed later in a non-capturing form;<br>
-they regain their ability to capture when captured again.</p>
+<p>
+  Captured pieces can be landed later in a non-capturing form;<br>
+  they regain their ability to capture when captured again.
+</p>
 
-<a href="https://www.chessvariants.com/other.dir/clockworkorange.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/other.dir/clockworkorange.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Fergus Duniho (1999).</p>
diff --git a/variants/Copycat/rules.html b/variants/Copycat/rules.html
index 43d1f25..230d353 100644
--- a/variants/Copycat/rules.html
+++ b/variants/Copycat/rules.html
@@ -3,6 +3,10 @@
   it borrows powers from it and can move (and capture) like it.
 </p>
 
-<p class="author">Students from the <a href="https://www.facebook.com/groups/ucfchessclub/">UCF Chess Club</a> (2020).</p>
+<p class="author">
+  Students from the
+  <a href="https://www.facebook.com/groups/ucfchessclub/">UCF Chess Club</a>
+  (2020).
+</p>
 
 <p>See also their <a href="https://discord.gg/tv9hVkQKa9">Discord server</a> :-)</p>
diff --git a/variants/Crazyhouse/rules.html b/variants/Crazyhouse/rules.html
index 148015a..f4d239f 100644
--- a/variants/Crazyhouse/rules.html
+++ b/variants/Crazyhouse/rules.html
@@ -2,6 +2,8 @@
 
 <p>Promoted pawns return on the board as pawns.</p>
 
-<a href="https://lichess.org/variant/crazyhouse">
-  lichess page.
-</a>
+<p>
+  <a href="https://lichess.org/variant/crazyhouse">
+    lichess page.
+  </a>
+</p>
diff --git a/variants/Cwda/complete_rules.html b/variants/Cwda/complete_rules.html
index 9114c05..2276050 100644
--- a/variants/Cwda/complete_rules.html
+++ b/variants/Cwda/complete_rules.html
@@ -5,7 +5,6 @@
   <link href="/variants/Cwda/style.css" rel="stylesheet"/>
 </head>
 <body>
-
 <div class="full-rules">
 <h1>Different Armies Rules</h1>
 
@@ -30,7 +29,12 @@
 
 <h3>The Colorbound Clobberers</h3>
 
-<figure class="show-pieces"><img src="/pieces/Cwda/c_black_rook.svg"/><img src="/pieces/Cwda/c_white_knight.svg"/><img src="/pieces/Cwda/c_black_bishop.svg"/><img src="/pieces/Cwda/c_white_queen.svg"/></figure>
+<figure class="show-pieces">
+  <img src="/pieces/Cwda/c_black_rook.svg"/>
+  <img src="/pieces/Cwda/c_white_knight.svg"/>
+  <img src="/pieces/Cwda/c_black_bishop.svg"/>
+  <img src="/pieces/Cwda/c_white_queen.svg"/>
+</figure>
 
 <ul>
   <li>Rook = bishop + dabbabah = "bede" (D),</li>
@@ -53,8 +57,11 @@
   </figcaption>
 </figure>
 
-<figure class="diagram-container">
-  <div class="diagram">fen:8/8/8/3F4/8/8/8/8 b7,c6,b5,f5,d3,d7,b3,c4,e4,f3,e6,f7:</div>
+<figure>
+  <div class="diag"
+       data-fen='8/8/8/3F4/8/8/8/8 w 0 {"armies":"CC","flags":"8888","enpassant":"-"}'
+       data-mks="b7,c6,b5,f5,d3,d7,b3,c4,e4,f3,e6,f7">
+  </div>
   <figcaption>
     Moves of the Fad.
   </figcaption>
@@ -67,7 +74,12 @@
 
 <h3>The Nutty Knights</h3>
 
-<figure class="showPieces text-center"><img src="/images/pieces/Cwda/bg.svg"/><img src="/images/pieces/Cwda/wi.svg"/><img src="/images/pieces/Cwda/bt.svg"/><img src="/images/pieces/Cwda/wl.svg"/></figure>
+<figure class="show-pieces">
+  <img src="/pieces/Cwda/n_black_rook.svg"/>
+  <img src="/pieces/Cwda/n_white_knight.svg"/>
+  <img src="/pieces/Cwda/n_black_bishop.svg"/>
+  <img src="/pieces/Cwda/n_white_queen.svg"/>
+</figure>
 
 <ul>
   <li>Rook = rook forward and sideways + king backwards = "charging rook" (G),</li>
@@ -79,17 +91,29 @@
   <li>Queen = rook forward and sideways + knight forward + king = "colonel" (L).</li>
 </ul>
 
-<figure class="diagram-container">
-  <div class="diagram diag12">fen:8/8/8/8/3G4/8/8/8 d5,d6,d7,d8,c4,b4,a4,e4,f4,g4,h4,c3,d3,e3:</div>
-  <div class="diagram diag22">fen:8/8/8/8/4i3/8/8/8 d6,d2,f6,f2,d3,d5,f5,f3:</div>
+<figure>
+  <div class="diag left"
+       data-fen='8/8/8/8/3G4/8/8/8 w 0 {"armies":"NN","flags":"8888","enpassant":"-"}'
+       data-mks="d5,d6,d7,d8,c4,b4,a4,e4,f4,g4,h4,c3,d3,e3">
+  </div>
+  <div class="diag right"
+       data-fen='8/8/8/8/4i3/8/8/8 w 0 {"armies":"NN","flags":"8888","enpassant":"-"}'
+       data-mks="d6,d2,f6,f2,d3,d5,f5,f3">
+  </div>
   <figcaption>
     Moves of the Charging rook on the left, and of the Fibnif on the right.
   </figcaption>
 </figure>
 
-<figure class="diagram-container">
-  <div class="diagram diag12">fen:8/8/8/8/3T4/8/8/8 b5,c6,e6,f5,c4,e4,c3,d3,e3:</div>
-  <div class="diagram diag22">fen:8/8/8/8/4c3/8/8/8 e5,e6,e7,e8,d4,c4,b4,a4,f4,g4,h4,d6,c5,f6,g5,d5,f5,d3,e3,f3:</div>
+<figure>
+  <div class="diag left"
+       data-fen='8/8/8/8/3T4/8/8/8 w 0 {"armies":"NN","flags":"8888","enpassant":"-"}'
+       data-mks="b5,c6,e6,f5,c4,e4,c3,d3,e3">
+  </div>
+  <div class="diag right"
+       data-fen='8/8/8/8/4c3/8/8/8 w 0 {"armies":"NN","flags":"8888","enpassant":"-"}'
+       data-mks="e5,e6,e7,e8,d4,c4,b4,a4,f4,g4,h4,d6,c5,f6,g5,d5,f5,d3,e3,f3">
+  </div>
   <figcaption>
     Moves of the Charging knight on the left, and of the Colonel on the right.
   </figcaption>
@@ -97,7 +121,12 @@
 
 <h3>The Remarkable Rookies</h3>
 
-<figure class="showPieces text-center"><img src="/images/pieces/Cwda/bs.svg"/><img src="/images/pieces/Cwda/wy.svg"/><img src="/images/pieces/Cwda/bh.svg"/><img src="/images/pieces/Cwda/wo.svg"/></figure>
+<figure class="show-pieces">
+  <img src="/pieces/Cwda/r_black_rook.svg"/>
+  <img src="/pieces/Cwda/r_white_knight.svg"/>
+  <img src="/pieces/Cwda/r_black_bishop.svg"/>
+  <img src="/pieces/Cwda/r_white_queen.svg"/>
+</figure>
 
 <ul>
   <li>Rook = rook limited to 4 squares = "short rook" (S),</li>
@@ -106,9 +135,15 @@
   <li>Queen = rook + knight = "chancellor" (O).</li>
 </ul>
 
-<figure class="diagram-container">
-  <div class="diagram diag12">fen:8/8/8/3y4/8/8/8/8 d3,b5,d7,f5,c5,d6,e5,d4:</div>
-  <div class="diagram diag22">fen:8/8/8/4H3/8/8/8/8 c5,e7,g5,e3,b5,e8,h5,e2,d4,d6,f6,f4:</div>
+<figure>
+  <div class="diag left"
+       data-fen='8/8/8/3y4/8/8/8/8 w 0 {"armies":"RR","flags":"8888","enpassant":"-"}'
+       data-mks="d3,b5,d7,f5,c5,d6,e5,d4">
+  </div>
+  <div class="diag right"
+       data-fen='8/8/8/4H3/8/8/8/8 w 0 {"armies":"RR","flags":"8888","enpassant":"-"}'
+       data-mks="c5,e7,g5,e3,b5,e8,h5,e2,d4,d6,f6,f4">
+  </div>
   <figcaption>
     Moves of the Woody rook on the left, and of the Half-duck on the right.
   </figcaption>
@@ -120,7 +155,12 @@
 
 <h3>Source</h3>
 
-<p><a href="https://www.chessvariants.com/unequal.dir/cwda.html">Chess with different armies</a>&nbsp;on chessvariants.com.</p>
+<p>
+  <a href="https://www.chessvariants.com/unequal.dir/cwda.html">
+    Chess with different armies
+  </a>
+  on chessvariants.com.
+</p>
 
 </body>
 <script src="/utils/drawDiagrams.js"></script>
diff --git a/variants/Cwda/rules.html b/variants/Cwda/rules.html
index cbd2d72..dac6d17 100644
--- a/variants/Cwda/rules.html
+++ b/variants/Cwda/rules.html
@@ -5,8 +5,10 @@
   </a>.
 </p>
 
-<a target="_blank" href="/variants/Cwda/complete_rules.html">
-  Full rules description.
-</a>
+<p>
+  <a target="_blank" href="/variants/Cwda/complete_rules.html">
+    Full rules description.
+  </a>
+</p>
 
 <p class="author">Ralph Betza (1996).</p>
diff --git a/variants/Dark/rules.html b/variants/Dark/rules.html
index 137a626..66d2828 100644
--- a/variants/Dark/rules.html
+++ b/variants/Dark/rules.html
@@ -2,8 +2,10 @@
 
 <p>Win by capturing the enemy king.</p>
 
-<a href="https://en.wikipedia.org/wiki/Dark_chess">
-  Wikipedia page.
-</a>
+<p>
+  <a href="https://en.wikipedia.org/wiki/Dark_chess">
+    Wikipedia page.
+  </a>
+</p>
 
 <p class="author">Jens Baek Nielsen (1997).</p>
diff --git a/variants/Doublemove/rules.html b/variants/Doublemove/rules.html
index 5ac21d4..2a74cbf 100644
--- a/variants/Doublemove/rules.html
+++ b/variants/Doublemove/rules.html
@@ -1,7 +1,9 @@
 <p>After the initial white move, each player moves twice on each turn.</p>
 
-<a href="https://www.chessvariants.org/multimove.dir/marseill.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.org/multimove.dir/marseill.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Albert Fortis (1922).</p>
diff --git a/variants/Giveaway/rules.html b/variants/Giveaway/rules.html
index 3e257bd..54e40aa 100644
--- a/variants/Giveaway/rules.html
+++ b/variants/Giveaway/rules.html
@@ -1,5 +1,7 @@
 <p>Win by losing all your material, or get stalemated.</p>
 
-<a href="https://lichess.org/variant/antichess">
-  lichess page.
-</a>
+<p>
+  <a href="https://lichess.org/variant/antichess">
+    lichess page.
+  </a>
+</p>
diff --git a/variants/Hex/rules.html b/variants/Hex/rules.html
index 15a91b1..b4d7628 100644
--- a/variants/Hex/rules.html
+++ b/variants/Hex/rules.html
@@ -1,11 +1,15 @@
 <p>Win by connecting both edges of your color.</p>
 
-<a href="https://www.maths.ed.ac.uk/~csangwin/hex/index.html">
-  Detailed rules.
-</a>
+<p>
+  <a href="https://www.maths.ed.ac.uk/~csangwin/hex/index.html">
+    Detailed rules.
+  </a>
+</p>
 
-<a href="http://www.mseymour.ca/hex_book/hexstrat.html">
-  A Strategy Guide.
-</a>
+<p>
+  <a href="http://www.mseymour.ca/hex_book/hexstrat.html">
+    A Strategy Guide.
+  </a>
+</p>
 
 <p class="author">Piet Hein (1942).</p>
diff --git a/variants/Madrasi/rules.html b/variants/Madrasi/rules.html
index 741869c..96627ff 100644
--- a/variants/Madrasi/rules.html
+++ b/variants/Madrasi/rules.html
@@ -1,7 +1,9 @@
 <p>Pieces of same nature attacking each other are immobilized.</p>
 
-<a href="https://en.wikipedia.org/wiki/Madrasi_chess">
-  Wikipedia page.
-</a>
+<p>
+  <a href="https://en.wikipedia.org/wiki/Madrasi_chess">
+    Wikipedia page.
+  </a>
+</p>
 
 <p class="author">Abdul J. Karwathar (1979).</p>
diff --git a/variants/Progressive/rules.html b/variants/Progressive/rules.html
index 0521495..b957f45 100644
--- a/variants/Progressive/rules.html
+++ b/variants/Progressive/rules.html
@@ -3,6 +3,8 @@
   then White play 3, and so on.
 </p>
 
-<a href="https://en.wikipedia.org/wiki/Progressive_chess">
-  Wikipedia page.
-</a>
+<p>
+  <a href="https://en.wikipedia.org/wiki/Progressive_chess">
+    Wikipedia page.
+  </a>
+</p>
diff --git a/variants/Recycle/rules.html b/variants/Recycle/rules.html
index ceea70c..badd18b 100644
--- a/variants/Recycle/rules.html
+++ b/variants/Recycle/rules.html
@@ -3,8 +3,10 @@
   can be self-captured and dropped later in the game.
 </p>
 
-<a href="https://www.chessvariants.com/difftaking.dir/recyclechess.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/difftaking.dir/recyclechess.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Robert Huber (2000).</p>
diff --git a/variants/Refusal/rules.html b/variants/Refusal/rules.html
index 5c0b533..0eadaef 100644
--- a/variants/Refusal/rules.html
+++ b/variants/Refusal/rules.html
@@ -3,8 +3,10 @@
   Different pawn promotions count as different moves.
 </p>
 
-<a href="https://www.chessvariants.com/other.dir/refusal.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/other.dir/refusal.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Fred Galvin (1958).</p>
diff --git a/variants/Rifle/rules.html b/variants/Rifle/rules.html
index 650264b..79084a5 100644
--- a/variants/Rifle/rules.html
+++ b/variants/Rifle/rules.html
@@ -1,7 +1,9 @@
 <p>Pieces capture (as usual) without moving.</p>
 
-<a href="https://www.chessvariants.com/difftaking.dir/rifle.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/difftaking.dir/rifle.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">William Buehler Seabrook (1921).</p>
diff --git a/variants/Suction/rules.html b/variants/Suction/rules.html
index a9cfb2e..9ca71e4 100644
--- a/variants/Suction/rules.html
+++ b/variants/Suction/rules.html
@@ -5,8 +5,10 @@
 
 <p>Win by bringing the enemy king on your first rank.</p>
 
-<a href="https://www.chessvariants.com/rules/suction-chess">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/rules/suction-chess">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Nathaniel Virgo (2018).</p>
diff --git a/variants/_Antiking/rules.html b/variants/_Antiking/rules.html
index e850c5e..e52edbb 100644
--- a/variants/_Antiking/rules.html
+++ b/variants/_Antiking/rules.html
@@ -18,8 +18,10 @@
   </li>
 </ul>
 
-<a href="https://www.chessvariants.com/diffobjective.dir/anti-king-chess.html">
-  chessvariants page.
-</a>
+<p>
+  <a href="https://www.chessvariants.com/diffobjective.dir/anti-king-chess.html">
+    chessvariants page.
+  </a>
+</p>
 
 <p class="author">Peter Aronson (2002).</p>