Skip to content

Commit

Permalink
reduce HTTP requestse by inlining piece images in stylesheets
Browse files Browse the repository at this point in the history
  • Loading branch information
@ornicar
ornicar committed Mar 16, 2015
1 parent 3b17db9 commit b3ee3fb
Show file tree
Hide file tree
Showing 11 changed files with 120 additions and 201 deletions.
4 changes: 2 additions & 2 deletions app/views/base/layout.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
@cssTag("common.css")
@cssTag("chessground.css")
@cssTag("board.css")
@cssTag(s"piece/${ctx.currentPieceSet}.css")
@moreCss
<link id="piece-sprite" href="@staticUrl(s"stylesheets/piece/${ctx.currentPieceSet}.css?v=$assetVersion")" type="text/css" rel="stylesheet"/>
<meta content="@openGraph.get('description).getOrElse(trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents())" name="description">
<link rel="shortcut icon" href="@staticUrl("images/favicon-32-white.png")" type="image/x-icon" />
@if(!robots) {
Expand All @@ -44,12 +44,12 @@
ctx.currentTheme.cssClass,
ctx.currentTheme3d.cssClass,
ctx.currentBg,
ctx.currentPieceSet,
ctx.currentPieceSet3d,
ctx.pref.highlight ?? "highlight",
ctx.pref.destination ?? "destination",
ctx.blindMode ?? "blind_mode",
"coords_" + ctx.pref.coords).mkString(" ")"
data-piece-set="@ctx.currentPieceSet"
data-sound-dir="@routes.Assets.at("sound")"
data-ports="@portsString"
data-accept-languages="@acceptLanguages.mkString(",")">
Expand Down
49 changes: 30 additions & 19 deletions bin/gen/piece-sprite
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,37 @@ include FileUtils

lila_dir = pwd()
source_dir = lila_dir + '/public/piece/'
dest_dir = lila_dir + '/public/stylesheets/piece/'

themes = ['alpha', 'cburnett']
pieces = ['wP', 'wN', 'wB', 'wR', 'wQ', 'wK', 'bP', 'bN', 'bB', 'bR', 'bQ', 'bK']
themes = [
['alpha', 'svg'],
['cburnett', 'svg'],
['merida', 'svg'],
['pirouetti', 'svg'],
['spatial', 'svg'],
['lightp', 'png']
]
types = {
'svg' => 'svg+xml;base64,',
'png' => 'png;base64,'
}
roles = ['pawn', 'knight', 'bishop', 'rook', 'queen', 'king']
colors = ['white', 'black']

themes.map { |theme|
classes = pieces.map { |piece|
file = source_dir + theme + '/' + piece + '.svg'
svg = File.open(file).readlines[0]
base64 = Base64.strict_encode64(svg)

'.' + theme + ' .is2d .cg-piece.' + role + '.' + color + ' { ' +
'background: url(data:image/svg+xml;base64,"' + base64 + '"); }'
}
puts classes
name = theme[0]
ext = theme[1]
classes = colors.map { |color|
roles.map { |role|
piece = color[0] + (role == 'knight' ? 'N' : role.upcase[0])
file = source_dir + name + '/' + piece + '.' + ext
File.open(file, 'r') do|image_file|
image = image_file.read
base64 = Base64.strict_encode64(image)
'body.base .is2d .cg-piece.' + role + '.' + color + ' { ' +
"background-image: url('data:image/" + types[ext] + base64 + "'); }"
end
}
}.flatten
File.open(dest_dir + name + '.css', 'w') { |f| f.puts classes.join("\n") }
}

# file = lila_trans_dir + '/messages'
# lines = File.open(file).readlines
# keys = lines.map { |l| l.gsub(/(\w+)=.+/, '\1').strip }
# vals = keys.map { |k| ' val ' + literal(k) + ' = new Key("' + k + '")' }
# allCode = code.gsub(/%vals%/, vals.join("\n")).gsub(/%keys%/, keys.map { |k| literal(k) }.join(", "))

# File.open(lila_keys_file, 'w') { |f| f.puts allCode }
27 changes: 0 additions & 27 deletions bin/gen/piece-sprite.js
View file

This file was deleted.

11 changes: 5 additions & 6 deletions public/javascripts/big.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -694,14 +694,12 @@ lichess.storage = {
var $body = $('body');
var $content = $body.children('.content');
var $dropdown = $themepicker.find('.dropdown');
var $pieceSprite = $('#piece-sprite');
var themes = $dropdown.data('themes').split(' ');
var theme = $.fp.find(document.body.classList, function(a) {
return $.fp.contains(themes, a);
});
var sets = $dropdown.data('sets').split(' ');
var set = $.fp.find(document.body.classList, function(a) {
return $.fp.contains(sets, a);
});
var set = $body.data('piece-set');
var theme3ds = $dropdown.data('theme3ds').split(' ');
var theme3d = $.fp.find(document.body.classList, function(a) {
return $.fp.contains(theme3ds, a);
Expand All @@ -724,9 +722,10 @@ lichess.storage = {
$themepicker.removeClass("shown");
});
$themepicker.find('.is2d div.no-square').hover(function() {
$body.removeClass(sets.join(' ')).addClass($(this).data("set"));
var s = $(this).data("set");
$pieceSprite.attr('href', $pieceSprite.attr('href').replace(/\w+\.css/, s + '.css'));
}, function() {
$body.removeClass(sets.join(' ')).addClass(set);
$pieceSprite.attr('href', $pieceSprite.attr('href').replace(/\w+\.css/, set + '.css'));
}).click(function() {
set = $(this).data("set");
$.post($(this).parent().data("href"), {
Expand Down
158 changes: 11 additions & 147 deletions public/stylesheets/board.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -694,166 +694,30 @@ div.lichess_board {
#top .cg-piece.cburnett {
background-image: url(../piece/cburnett/wN.svg);
}
.pirouetti .is2d .cg-piece.piece.white {
-webkit-filter: drop-shadow(0 0 0.5px #000);
}
.pirouetti .is2d .cg-piece.piece.black {
-webkit-filter: drop-shadow(0 0 0.6px #e0e0e0);
}
.pirouetti .is2d .cg-piece.piece.ui-draggable-dragging,
.pirouetti .is2d .piece.animating {
-webkit-filter: none!important;
}
.pirouetti .is2d .cg-piece.pawn.white {
background-image: url(../piece/pirouetti/wP.svg);
}
.pirouetti .is2d .cg-piece.bishop.white {
background-image: url(../piece/pirouetti/wB.svg);
}
.pirouetti .is2d .cg-piece.knight.white,
#top .cg-piece.pirouetti {
background-image: url(../piece/pirouetti/wN.svg);
}
.pirouetti .is2d .cg-piece.rook.white {
background-image: url(../piece/pirouetti/wR.svg);
}
.pirouetti .is2d .cg-piece.queen.white {
background-image: url(../piece/pirouetti/wQ.svg);
}
.pirouetti .is2d .cg-piece.king.white {
background-image: url(../piece/pirouetti/wK.svg);
}
.pirouetti .is2d .cg-piece.pawn.black {
background-image: url(../piece/pirouetti/bP.svg);
}
.pirouetti .is2d .cg-piece.bishop.black {
background-image: url(../piece/pirouetti/bB.svg);
}
.pirouetti .is2d .cg-piece.knight.black {
background-image: url(../piece/pirouetti/bN.svg);
}
.pirouetti .is2d .cg-piece.rook.black {
background-image: url(../piece/pirouetti/bR.svg);
}
.pirouetti .is2d .cg-piece.queen.black {
background-image: url(../piece/pirouetti/bQ.svg);
}
.pirouetti .is2d .cg-piece.king.black {
background-image: url(../piece/pirouetti/bK.svg);
}
.merida .is2d .cg-piece.pawn.white {
background-image: url(../piece/merida/wP.svg);
}
.merida .is2d .cg-piece.bishop.white {
background-image: url(../piece/merida/wB.svg);
}
.merida .is2d .cg-piece.knight.white,
#top .cg-piece.merida {
background-image: url(../piece/merida/wN.svg);
}
.merida .is2d .cg-piece.rook.white {
background-image: url(../piece/merida/wR.svg);
}
.merida .is2d .cg-piece.queen.white {
background-image: url(../piece/merida/wQ.svg);
}
.merida .is2d .cg-piece.king.white {
background-image: url(../piece/merida/wK.svg);
}
.merida .is2d .cg-piece.pawn.black {
background-image: url(../piece/merida/bP.svg);
}
.merida .is2d .cg-piece.bishop.black {
background-image: url(../piece/merida/bB.svg);
}
.merida .is2d .cg-piece.knight.black {
background-image: url(../piece/merida/bN.svg);
}
.merida .is2d .cg-piece.rook.black {
background-image: url(../piece/merida/bR.svg);
}
.merida .is2d .cg-piece.queen.black {
background-image: url(../piece/merida/bQ.svg);
}
.merida .is2d .cg-piece.king.black {
background-image: url(../piece/merida/bK.svg);
}
.spatial .is2d .cg-piece.pawn.white {
background-image: url(../piece/spatial/wP.svg);
}
.spatial .is2d .cg-piece.bishop.white {
background-image: url(../piece/spatial/wB.svg);
}
.spatial .is2d .cg-piece.knight.white,
#top .cg-piece.spatial {
background-image: url(../piece/spatial/wN.svg);
}
.spatial .is2d .cg-piece.rook.white {
background-image: url(../piece/spatial/wR.svg);
}
.spatial .is2d .cg-piece.queen.white {
background-image: url(../piece/spatial/wQ.svg);
}
.spatial .is2d .cg-piece.king.white {
background-image: url(../piece/spatial/wK.svg);
}
.spatial .is2d .cg-piece.pawn.black {
background-image: url(../piece/spatial/bP.svg);
}
.spatial .is2d .cg-piece.bishop.black {
background-image: url(../piece/spatial/bB.svg);
}
.spatial .is2d .cg-piece.knight.black {
background-image: url(../piece/spatial/bN.svg);
}
.spatial .is2d .cg-piece.rook.black {
background-image: url(../piece/spatial/bR.svg);
}
.spatial .is2d .cg-piece.queen.black {
background-image: url(../piece/spatial/bQ.svg);
}
.spatial .is2d .cg-piece.king.black {
background-image: url(../piece/spatial/bK.svg);
}
.lightp .is2d .cg-piece.pawn.white {
background-image: url(../piece/lightp/wP.png);
}
.lightp .is2d .cg-piece.bishop.white {
background-image: url(../piece/lightp/wB.png);
}
.lightp .is2d .cg-piece.knight.white,
#top .cg-piece.lightp {
background-image: url(../piece/lightp/wN.png);
}
.lightp .is2d .cg-piece.rook.white {
background-image: url(../piece/lightp/wR.png);
}
.lightp .is2d .cg-piece.queen.white {
background-image: url(../piece/lightp/wQ.png);
}
.lightp .is2d .cg-piece.king.white {
background-image: url(../piece/lightp/wK.png);
}
.lightp .is2d .cg-piece.pawn.black {
background-image: url(../piece/lightp/bP.png);
}
.lightp .is2d .cg-piece.bishop.black {
background-image: url(../piece/lightp/bB.png);
}
.lightp .is2d .cg-piece.knight.black {
background-image: url(../piece/lightp/bN.png);
#top .cg-piece.alpha {
background-image: url(../piece/alpha/wN.svg);
}
.lightp .is2d .cg-piece.rook.black {
background-image: url(../piece/lightp/bR.png);
#top .cg-piece.pirouetti {
background-image: url(../piece/pirouetti/wN.svg);
}
.lightp .is2d .cg-piece.queen.black {
background-image: url(../piece/lightp/bQ.png);
.pirouetti .is2d .cg-piece.piece.white {
-webkit-filter: drop-shadow(0 0 0.5px #000);
}
.lightp .is2d .cg-piece.king.black {
background-image: url(../piece/lightp/bK.png);
.pirouetti .is2d .cg-piece.piece.black {
-webkit-filter: drop-shadow(0 0 0.6px #e0e0e0);
}
#top .cg-piece.alpha {
background-image: url(../piece/alpha/wN.svg);
.pirouetti .is2d .cg-piece.piece.ui-draggable-dragging,
.pirouetti .is2d .piece.animating {
-webkit-filter: none!important;
}
div.lichess_overboard {
position: absolute;
Expand Down
Loading

0 comments on commit b3ee3fb

Please sign in to comment.