deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

css inline svg generator WIP

pull/360/head
Thibault Duplessis 2015-03-14 09:15:34 +01:00
parent 4f51314e78
commit 4b423b6c87
5 changed files with 31 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/views/base/layout.scala.html
View File

@ -24,6 +24,7 @@ chessground: Boolean = true)(body: Html)(implicit ctx: Context)
@cssTag("common.css")
@cssTag("chessground.css")
@cssTag("board.css")
@cssTag(s"piece/${ctx.currentPieceSet}.css")
@moreCss
<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" />

4
bin/svg-optimize
View File

@ -12,7 +12,7 @@ for set (cburnett mono pirouetti merida spatial alpha); do
mkdir -p $to/invert
for file ($from/*.svg); do
svgcleaner-cli $file $(echo $file | sed 's#/piece-src/#/piece/#')
svgo -i $file -o $(echo $file | sed 's#/piece-src/#/piece/#')
done
# for file ($from/invert/*.svg); do
# svgcleaner-cli $file $(echo $file | sed 's#/piece-src/#/piece/#')
@ -23,5 +23,5 @@ done
# LOGO
for file (public/images/bN-bg.src.svg public/images/wN-bg.src.svg); do
svgcleaner-cli $file $(echo $file | sed 's#.src.svg#.svg#')
svgo -i $file -o $(echo $file | sed 's#.src.svg#.svg#')
done

42
gulpfile.js
View File

@ -1,28 +1,30 @@
var gulp = require('gulp');
var svgSprite = require('gulp-svg-sprite');
var svgmin = require('gulp-svgmin');
var config = {
mode: {
inline: true, // Prepare for inline embedding
symbol: true, // Create a «symbol» sprite
example: true
}
// mode: {
// css: { // Activate the «css» mode
// render: {
// css: true // Activate CSS output (with default options)
// },
// example: true
// }
// }
};
var sourceDir = 'public/piece-src/';
var destDir = 'public/piece-sprite/';
var destDir = 'public/stylesheets/piece/';
var pieces = [].concat.apply([], ['w', 'b'].map(function(color) {
return ['P', 'B', 'N', 'R', 'Q', 'K'].map(function(role) {
return color + role;
});
}));
function makeCss(code) {
console.log(code);
return code;
}
gulp.task('piece-sprite', function() {
['cburnett', 'alpha'].forEach(function(theme) {
gulp.src(sourceDir + theme + '/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(destDir + theme));
var code = pieces.map(function(piece) {
var code = gulp.src(sourceDir + theme + '/' + piece + '.svg')
.pipe(svgmin({
multipass: true,
'datauri': 'enc'
}))
// .pipe(makeCss)
.pipe(gulp.dest(destDir + theme));
});
});
});

7
package.json
View File

@ -18,7 +18,12 @@
"vinyl": "^0.4.6",
"websocket": "^1.0.10"
},
"devDependencies": {},
"devDependencies": {
"gulp-imagemin": "^2.2.1",
"gulp-svgmin": "^1.1.1",
"imagemin-svgo": "^4.1.2",
"svgo": "^0.5.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

68
public/stylesheets/board.css
View File

@ -691,43 +691,9 @@ div.lichess_board {
background-image: url(../staunton/Renders/ModernWood/Scaled/Black-King.png);
}
.cburnett .is2d .cg-piece.pawn.white {
background-image: url(../piece/cburnett/wP.svg);
}
.cburnett .is2d .cg-piece.bishop.white {
background-image: url(../piece/cburnett/wB.svg);
}
.cburnett .is2d .cg-piece.knight.white,
#top .cg-piece.cburnett {
background-image: url(../piece/cburnett/wN.svg);
}
.cburnett .is2d .cg-piece.rook.white {
background-image: url(../piece/cburnett/wR.svg);
}
.cburnett .is2d .cg-piece.queen.white {
background-image: url(../piece/cburnett/wQ.svg);
}
.cburnett .is2d .cg-piece.king.white {
background-image: url(../piece/cburnett/wK.svg);
}
.cburnett .is2d .cg-piece.pawn.black {
background-image: url(../piece/cburnett/bP.svg);
}
.cburnett .is2d .cg-piece.bishop.black {
background-image: url(../piece/cburnett/bB.svg);
}
.cburnett .is2d .cg-piece.knight.black {
background-image: url(../piece/cburnett/bN.svg);
}
.cburnett .is2d .cg-piece.rook.black {
background-image: url(../piece/cburnett/bR.svg);
}
.cburnett .is2d .cg-piece.queen.black {
background-image: url(../piece/cburnett/bQ.svg);
}
.cburnett .is2d .cg-piece.king.black {
background-image: url(../piece/cburnett/bK.svg);
}
.pirouetti .is2d .cg-piece.piece.white {
-webkit-filter: drop-shadow(0 0 0.5px #000);
}
@ -886,43 +852,9 @@ div.lichess_board {
.lightp .is2d .cg-piece.king.black {
background-image: url(../piece/lightp/bK.png);
}
.alpha .is2d .cg-piece.pawn.white {
background-image: url(../piece/alpha/wP.svg);
}
.alpha .is2d .cg-piece.bishop.white {
background-image: url(../piece/alpha/wB.svg);
}
.alpha .is2d .cg-piece.knight.white,
#top .cg-piece.alpha {
background-image: url(../piece/alpha/wN.svg);
}
.alpha .is2d .cg-piece.rook.white {
background-image: url(../piece/alpha/wR.svg);
}
.alpha .is2d .cg-piece.queen.white {
background-image: url(../piece/alpha/wQ.svg);
}
.alpha .is2d .cg-piece.king.white {
background-image: url(../piece/alpha/wK.svg);
}
.alpha .is2d .cg-piece.pawn.black {
background-image: url(../piece/alpha/bP.svg);
}
.alpha .is2d .cg-piece.bishop.black {
background-image: url(../piece/alpha/bB.svg);
}
.alpha .is2d .cg-piece.knight.black {
background-image: url(../piece/alpha/bN.svg);
}
.alpha .is2d .cg-piece.rook.black {
background-image: url(../piece/alpha/bR.svg);
}
.alpha .is2d .cg-piece.queen.black {
background-image: url(../piece/alpha/bQ.svg);
}
.alpha .is2d .cg-piece.king.black {
background-image: url(../piece/alpha/bK.svg);
}
div.lichess_overboard {
position: absolute;
z-index: 20;