use external piece svg assets and preload them

experimental, see if that eliminates rare cases of invisible pieces

app/Env.scala

@@ -127,6 +127,11 @@ final class Env(
     default = 200,
     text = "Opening explorer games per second".some
   )
+  lazy val pieceImageExternal = memo.settingStore[Boolean](
+    "pieceImageExternal  ",
+    default = false,
+    text = "Use external piece images".some
+  )
 
   lazy val preloader     = wire[mashup.Preload]
   lazy val socialInfo    = wire[mashup.UserInfo.SocialApi]

app/controllers/Dev.scala

@@ -26,7 +26,8 @@ final class Dev(env: Env) extends LilaController(env) {
     env.fishnet.openingBookDepth,
     env.noDelaySecretSetting,
     env.featuredTeamsSetting,
-    env.prizeTournamentMakers
+    env.prizeTournamentMakers,
+    env.pieceImageExternal
   )
 
   def settings =

app/templating/AssetHelper.scala

@@ -22,7 +22,8 @@ trait AssetHelper { self: I18nHelper with SecurityHelper =>
 
   def assetVersion = AssetVersion.current
 
-  def assetUrl(path: String): String = s"$assetBaseUrl/assets/_$assetVersion/$path"
+  def assetUrl(path: String): String       = s"$assetBaseUrl/assets/_$assetVersion/$path"
+  def staticAssetUrl(path: String): String = s"$assetBaseUrl/assets/$path"
 
   def cdnUrl(path: String) = s"$assetBaseUrl$path"
 

app/views/base/layout.scala

@@ -34,7 +34,7 @@ object layout {
     def pieceSprite(ps: lila.pref.PieceSet): Frag =
       link(
         id := "piece-sprite",
-        href := assetUrl(s"piece-css/$ps.css"),
+        href := assetUrl(s"piece-css/$ps.${env.pieceImageExternal.get() ?? "external."}css"),
         rel := "stylesheet"
       )
   }
@@ -55,6 +55,14 @@ object layout {
     ctx.pref.is3d option
       preload(s"images/staunton/board/${ctx.currentTheme3d.file}", "image")
   )
+  private def piecesPreload(implicit ctx: Context) =
+    env.pieceImageExternal.get() option raw {
+      (for {
+        c <- List('w', 'b')
+        p <- List('K', 'Q', 'R', 'B', 'N', 'P')
+        href = staticAssetUrl(s"piece/${ctx.currentPieceSet.name}/$c$p.svg")
+      } yield s"""<link rel="preload" href="$href" as="image" crossorigin>""").mkString
+    }
 
   private val manifests = raw(
     """<link rel="manifest" href="/manifest.json"><meta name="twitter:site" content="@lichess">"""
@@ -254,6 +262,7 @@ object layout {
           },
           fontPreload,
           boardPreload,
+          piecesPreload,
           manifests,
           jsLicense
         ),

ui/dasher/src/piece.ts

@@ -93,6 +93,6 @@ function applyPiece(t: Piece, list: Piece[], is3d: boolean) {
     $('body').removeClass(list.join(' ')).addClass(t);
   } else {
     const sprite = document.getElementById('piece-sprite') as HTMLLinkElement;
-    sprite.href = sprite.href.replace(/\w+\.css/, t + '.css');
+    sprite.href = sprite.href.replace(/\w+(\.external|)\.css/, t + '$1.css');
   }
 }