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 rasterizedpull/5077/head
Thibault Duplessis
parent
9aa71fa059
commit
f880264161
|
|
@ -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") }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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')}
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in New Issue