From f880264161a2eed6cd5ddee07eafcce7ac3756e4 Mon Sep 17 00:00:00 2001
From: Thibault Duplessis <thibault.duplessis@gmail.com>
Date: Wed, 8 May 2019 09:08:55 +0700
Subject: [PATCH] A disgusting hack for a disgusting browser

Edge randomly fails to rasterize SVG on page load
A different SVG must be loaded so a new image can be rasterized
---
 bin/gen/piece-sprite                      | 15 +++++++++++++++
 public/piece-css/alpha.external.css       | 12 ++++++++++++
 public/piece-css/cburnett.external.css    | 12 ++++++++++++
 public/piece-css/chess7.external.css      | 12 ++++++++++++
 public/piece-css/chessnut.external.css    | 12 ++++++++++++
 public/piece-css/companion.external.css   | 12 ++++++++++++
 public/piece-css/fantasy.external.css     | 12 ++++++++++++
 public/piece-css/kosal.external.css       | 12 ++++++++++++
 public/piece-css/leipzig.external.css     | 12 ++++++++++++
 public/piece-css/letter.external.css      | 12 ++++++++++++
 public/piece-css/merida.external.css      | 12 ++++++++++++
 public/piece-css/pirouetti.external.css   | 12 ++++++++++++
 public/piece-css/reillycraig.external.css | 12 ++++++++++++
 public/piece-css/riohacha.external.css    | 12 ++++++++++++
 public/piece-css/shapes.external.css      | 12 ++++++++++++
 public/piece-css/spatial.external.css     | 12 ++++++++++++
 ui/site/src/main.js                       |  8 ++++++++
 17 files changed, 203 insertions(+)
 create mode 100644 public/piece-css/alpha.external.css
 create mode 100644 public/piece-css/cburnett.external.css
 create mode 100644 public/piece-css/chess7.external.css
 create mode 100644 public/piece-css/chessnut.external.css
 create mode 100644 public/piece-css/companion.external.css
 create mode 100644 public/piece-css/fantasy.external.css
 create mode 100644 public/piece-css/kosal.external.css
 create mode 100644 public/piece-css/leipzig.external.css
 create mode 100644 public/piece-css/letter.external.css
 create mode 100644 public/piece-css/merida.external.css
 create mode 100644 public/piece-css/pirouetti.external.css
 create mode 100644 public/piece-css/reillycraig.external.css
 create mode 100644 public/piece-css/riohacha.external.css
 create mode 100644 public/piece-css/shapes.external.css
 create mode 100644 public/piece-css/spatial.external.css

diff --git a/bin/gen/piece-sprite b/bin/gen/piece-sprite
index 02121bda76..472d0d7f0d 100755
--- a/bin/gen/piece-sprite
+++ b/bin/gen/piece-sprite
@@ -32,6 +32,7 @@ types = {
 roles = ['pawn', 'knight', 'bishop', 'rook', 'queen', 'king']
 colors = ['white', 'black']
 
+# inline SVG
 themes.map { |theme|
   name = theme[0]
   ext = theme[1]
@@ -49,3 +50,17 @@ themes.map { |theme|
   }.flatten
   File.open(dest_dir + name + '.css', 'w') { |f| f.puts classes.join("\n") }
 }
+
+# external SVG
+themes.map { |theme|
+  name = theme[0]
+  ext = theme[1]
+  classes = colors.map { |color|
+    roles.map { |role|
+      piece = color[0] + (role == 'knight' ? 'N' : role.upcase[0])
+      '.is2d .' + role + '.' + color + ' {' +
+        "background-image:url('/assets/piece/" + name + "/" + piece + "." + ext + "')}"
+    }
+  }.flatten
+  File.open(dest_dir + name + '.external.css', 'w') { |f| f.puts classes.join("\n") }
+}
diff --git a/public/piece-css/alpha.external.css b/public/piece-css/alpha.external.css
new file mode 100644
index 0000000000..7655bb89fd
--- /dev/null
+++ b/public/piece-css/alpha.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/alpha/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/alpha/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/alpha/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/alpha/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/alpha/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/alpha/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/alpha/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/alpha/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/alpha/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/alpha/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/alpha/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/alpha/bK.svg')}
diff --git a/public/piece-css/cburnett.external.css b/public/piece-css/cburnett.external.css
new file mode 100644
index 0000000000..cd290ba779
--- /dev/null
+++ b/public/piece-css/cburnett.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/cburnett/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/cburnett/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/cburnett/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/cburnett/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/cburnett/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/cburnett/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/cburnett/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/cburnett/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/cburnett/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/cburnett/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/cburnett/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/cburnett/bK.svg')}
diff --git a/public/piece-css/chess7.external.css b/public/piece-css/chess7.external.css
new file mode 100644
index 0000000000..c9ec7e3f43
--- /dev/null
+++ b/public/piece-css/chess7.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/chess7/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/chess7/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/chess7/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/chess7/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/chess7/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/chess7/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/chess7/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/chess7/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/chess7/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/chess7/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/chess7/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/chess7/bK.svg')}
diff --git a/public/piece-css/chessnut.external.css b/public/piece-css/chessnut.external.css
new file mode 100644
index 0000000000..ca80922672
--- /dev/null
+++ b/public/piece-css/chessnut.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/chessnut/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/chessnut/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/chessnut/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/chessnut/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/chessnut/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/chessnut/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/chessnut/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/chessnut/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/chessnut/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/chessnut/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/chessnut/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/chessnut/bK.svg')}
diff --git a/public/piece-css/companion.external.css b/public/piece-css/companion.external.css
new file mode 100644
index 0000000000..77804266c2
--- /dev/null
+++ b/public/piece-css/companion.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/companion/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/companion/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/companion/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/companion/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/companion/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/companion/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/companion/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/companion/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/companion/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/companion/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/companion/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/companion/bK.svg')}
diff --git a/public/piece-css/fantasy.external.css b/public/piece-css/fantasy.external.css
new file mode 100644
index 0000000000..83f123328b
--- /dev/null
+++ b/public/piece-css/fantasy.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/fantasy/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/fantasy/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/fantasy/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/fantasy/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/fantasy/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/fantasy/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/fantasy/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/fantasy/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/fantasy/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/fantasy/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/fantasy/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/fantasy/bK.svg')}
diff --git a/public/piece-css/kosal.external.css b/public/piece-css/kosal.external.css
new file mode 100644
index 0000000000..f5989a8d0c
--- /dev/null
+++ b/public/piece-css/kosal.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/kosal/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/kosal/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/kosal/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/kosal/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/kosal/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/kosal/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/kosal/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/kosal/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/kosal/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/kosal/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/kosal/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/kosal/bK.svg')}
diff --git a/public/piece-css/leipzig.external.css b/public/piece-css/leipzig.external.css
new file mode 100644
index 0000000000..39ef2b4f37
--- /dev/null
+++ b/public/piece-css/leipzig.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/leipzig/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/leipzig/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/leipzig/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/leipzig/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/leipzig/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/leipzig/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/leipzig/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/leipzig/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/leipzig/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/leipzig/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/leipzig/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/leipzig/bK.svg')}
diff --git a/public/piece-css/letter.external.css b/public/piece-css/letter.external.css
new file mode 100644
index 0000000000..75af00cafe
--- /dev/null
+++ b/public/piece-css/letter.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/letter/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/letter/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/letter/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/letter/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/letter/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/letter/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/letter/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/letter/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/letter/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/letter/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/letter/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/letter/bK.svg')}
diff --git a/public/piece-css/merida.external.css b/public/piece-css/merida.external.css
new file mode 100644
index 0000000000..c247015304
--- /dev/null
+++ b/public/piece-css/merida.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/merida/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/merida/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/merida/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/merida/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/merida/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/merida/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/merida/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/merida/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/merida/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/merida/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/merida/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/merida/bK.svg')}
diff --git a/public/piece-css/pirouetti.external.css b/public/piece-css/pirouetti.external.css
new file mode 100644
index 0000000000..5ebe69b58c
--- /dev/null
+++ b/public/piece-css/pirouetti.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/pirouetti/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/pirouetti/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/pirouetti/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/pirouetti/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/pirouetti/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/pirouetti/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/pirouetti/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/pirouetti/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/pirouetti/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/pirouetti/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/pirouetti/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/pirouetti/bK.svg')}
diff --git a/public/piece-css/reillycraig.external.css b/public/piece-css/reillycraig.external.css
new file mode 100644
index 0000000000..757b5ab6cf
--- /dev/null
+++ b/public/piece-css/reillycraig.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/reillycraig/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/reillycraig/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/reillycraig/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/reillycraig/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/reillycraig/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/reillycraig/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/reillycraig/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/reillycraig/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/reillycraig/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/reillycraig/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/reillycraig/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/reillycraig/bK.svg')}
diff --git a/public/piece-css/riohacha.external.css b/public/piece-css/riohacha.external.css
new file mode 100644
index 0000000000..f092703884
--- /dev/null
+++ b/public/piece-css/riohacha.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/riohacha/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/riohacha/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/riohacha/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/riohacha/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/riohacha/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/riohacha/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/riohacha/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/riohacha/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/riohacha/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/riohacha/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/riohacha/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/riohacha/bK.svg')}
diff --git a/public/piece-css/shapes.external.css b/public/piece-css/shapes.external.css
new file mode 100644
index 0000000000..ad81bd74c0
--- /dev/null
+++ b/public/piece-css/shapes.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/shapes/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/shapes/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/shapes/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/shapes/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/shapes/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/shapes/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/shapes/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/shapes/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/shapes/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/shapes/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/shapes/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/shapes/bK.svg')}
diff --git a/public/piece-css/spatial.external.css b/public/piece-css/spatial.external.css
new file mode 100644
index 0000000000..abee586126
--- /dev/null
+++ b/public/piece-css/spatial.external.css
@@ -0,0 +1,12 @@
+.is2d .pawn.white {background-image:url('/assets/piece/spatial/wP.svg')}
+.is2d .knight.white {background-image:url('/assets/piece/spatial/wN.svg')}
+.is2d .bishop.white {background-image:url('/assets/piece/spatial/wB.svg')}
+.is2d .rook.white {background-image:url('/assets/piece/spatial/wR.svg')}
+.is2d .queen.white {background-image:url('/assets/piece/spatial/wQ.svg')}
+.is2d .king.white {background-image:url('/assets/piece/spatial/wK.svg')}
+.is2d .pawn.black {background-image:url('/assets/piece/spatial/bP.svg')}
+.is2d .knight.black {background-image:url('/assets/piece/spatial/bN.svg')}
+.is2d .bishop.black {background-image:url('/assets/piece/spatial/bB.svg')}
+.is2d .rook.black {background-image:url('/assets/piece/spatial/bR.svg')}
+.is2d .queen.black {background-image:url('/assets/piece/spatial/bQ.svg')}
+.is2d .king.black {background-image:url('/assets/piece/spatial/bK.svg')}
diff --git a/ui/site/src/main.js b/ui/site/src/main.js
index d9f2607c87..c7a312ab70 100644
--- a/ui/site/src/main.js
+++ b/ui/site/src/main.js
@@ -517,6 +517,14 @@
           $.get(lichess.assetUrl('oops/browser.html'), html => $('body').prepend(html))
       }, 3000);
 
+      /* A disgusting hack for a disgusting browser
+       * Edge randomly fails to rasterize SVG on page load
+       * A different SVG must be loaded so a new image can be rasterized */
+      if (navigator.userAgent.indexOf('Edge/') > -1) setTimeout(function() {
+        const sprite = $('#piece-sprite');
+        sprite.attr('href', sprite.attr('href').replace('.css', '.external.css'));
+      }, 1000);
+
       if (window.Fingerprint2) setTimeout(function() {
         var t = Date.now()
         new Fingerprint2({