more chess puzzle improvements and theming

This commit is contained in:
Thibault Duplessis 2014-02-09 23:09:59 +01:00
parent b35057a0ef
commit 2f20eae532
16 changed files with 63 additions and 84 deletions

View file

@ -4,7 +4,6 @@
@import chess.{ KingSide, QueenSide }
@moreCss = {
@cssTag("chessboardjs.css")
@cssTag("boardEditor.css")
}
@moreJs = {
@ -16,7 +15,8 @@
title = trans.boardEditor.str(),
menu = game.sideMenu(listMenu, "edit").some,
moreJs = moreJs,
moreCss = moreCss) {
moreCss = moreCss,
themepicker = true) {
<div id="board_editor" class="content_box">
<div id="chessboard_side">
<div>

View file

@ -1,9 +1,10 @@
@(title: String, goodies: Option[Html] = None, menu: Option[Html] = None, moreJs: Html = Html(""), moreCss: Html = Html(""))(body: Html)(implicit ctx: Context)
@(title: String, goodies: Option[Html] = None, menu: Option[Html] = None, moreJs: Html = Html(""), moreCss: Html = Html(""), themepicker: Boolean = true)(body: Html)(implicit ctx: Context)
@base.layout(
title = title,
goodies = goodies,
title = title,
goodies = goodies,
menu = menu,
active = siteMenu.game.some,
moreJs = moreJs,
moreCss = moreCss)(body)
moreCss = moreCss,
themepicker = themepicker)(body)

View file

@ -1,7 +1,6 @@
@(title: String, evenMoreCss: Option[Html] = None, evenMoreJs: Option[Html] = None)(body: Html)(implicit ctx: Context)
@moreCss = {
@cssTag("chessboardjs.css")
@cssTag("puzzle.css")
@evenMoreCss
}
@ -18,6 +17,7 @@
title = title,
moreCss = moreCss,
moreJs = moreJs,
active = siteMenu.puzzle.some) {
active = siteMenu.puzzle.some,
themepicker = true) {
@body
}

View file

@ -22,7 +22,9 @@
<div class="center">
<div id="chessboard"></div>
<div id="chessboard_wrap">
<div id="chessboard"></div>
</div>
@userInfos.map(history(_))

View file

@ -1,7 +0,0 @@
@(puzzle: lila.puzzle.Puzzle, attempt: Option[lila.puzzle.Attempt])(implicit ctx: Context)
@layout("Puzzle " + puzzle.id) {
<div id="puzzle_wrap">
</div>
}

View file

@ -20,12 +20,12 @@
@attempt.map { a =>
@if(a.win) {
<div class="comment win">
<h3><strong>Victory!</strong> (<strong>@showNumber(a.userRatingDiff)</strong>)</h3>
<h3><strong>Victory!</strong><strong class="rating"> @showNumber(a.userRatingDiff)</strong></h3>
Puzzle solved in @a.seconds seconds.
</div>
} else {
<div class="comment loss">
<h3><strong>Puzzle failed</strong> (<strong>@showNumber(a.userRatingDiff)</strong>)</h3>
<h3><strong>Puzzle failed</strong><strong class="rating"> @showNumber(a.userRatingDiff)</strong></h3>
</div>
}
}
@ -34,7 +34,9 @@
<div class="center">
<div id="chessboard"></div>
<div id="chessboard_wrap">
<div id="chessboard"></div>
</div>
<div class="prev_next">
<button class="prev button" value="prev">&lt;</button>

View file

@ -6,3 +6,4 @@ var Chess = {
turn: function() {}
};
jQuery.prototype.sparkline = function(points, options) {};
jQuery.displayBoardMarks = function(board, white) {};

View file

@ -28,6 +28,11 @@
:pieceTheme (str static-domain "/assets/images/chessboard/{piece}.png")}
config)))))
(defn board-marks! [$puzzle]
(.displayBoardMarks js/jQuery
($ :#chessboard_wrap $puzzle)
(= "white" (jq/data $puzzle :color))))
(defn center-right! [$right]
(jq/css $right {:top (str (- 256 (/ (jq/height $right) 2)) "px")}))

View file

@ -123,6 +123,7 @@
chessboard (make-chessboard $puzzle initial-fen)
started-at (new js/Date)]
(core/center-right! ($ :.right $puzzle))
(core/board-marks! $puzzle)
(core/user-chart! ($ :.user_chart $puzzle))
(jq/bind ($ :.giveup $puzzle) :click #(put! giveup-chan %))
(go

View file

@ -68,6 +68,7 @@
history (vec (make-history (jq/data $puzzle :fen) (conj (seq line) (jq/data $puzzle :move))))
chessboard (make-chessboard $puzzle)]
(core/center-right! ($ :.right $puzzle))
(core/board-marks! $puzzle)
(core/user-chart! ($ :.user_chart $puzzle))
(bind-vote! ($ :div.vote_wrap $puzzle))
(bind-continue! ($ :button.continue $puzzle))

View file

@ -1 +1 @@
sbt.version=0.13.1
sbt.version=0.13.0

View file

@ -46,6 +46,7 @@ $(function() {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true,
showNotation: false,
pieceTheme: pieceTheme,
onChange: function() {
setTimeout(onChange, 100);

View file

@ -26,22 +26,22 @@ div.lcs {
width: 64px;
height: 64px;
}
body.blue div.lichess_board, body.blue #GameBoard, #top div.color_demo.blue {
body.blue div.lichess_board, body.blue #GameBoard, body.blue #chessboard .board-b72b1, #top div.color_demo.blue {
background-image: url(../images/board/blue.png);
}
body.brown div.lichess_board, body.brown #GameBoard, #top div.color_demo.brown {
body.brown div.lichess_board, body.brown #GameBoard, body.brown #chessboard .board-b72b1, #top div.color_demo.brown {
background-image: url(../images/board/brown.png);
}
body.green div.lichess_board, body.green #GameBoard, #top div.color_demo.green {
body.green div.lichess_board, body.green #GameBoard, body.green #chessboard .board-b72b1, #top div.color_demo.green {
background-image: url(../images/board/green.png);
}
body.grey div.lichess_board, body.grey #GameBoard, #top div.color_demo.grey {
body.grey div.lichess_board, body.grey #GameBoard, body.grey #chessboard .board-b72b1, #top div.color_demo.grey {
background-image: url(../images/board/grey.png);
}
body.wood div.lichess_board, body.wood #GameBoard, #top div.color_demo.wood {
body.wood div.lichess_board, body.wood #GameBoard, body.wood #chessboard .board-b72b1, #top div.color_demo.wood {
background-image: url(../images/board/woodenboard.jpg);
}
body.canvas div.lichess_board, body.canvas #GameBoard, #top div.color_demo.canvas {
body.canvas div.lichess_board, body.canvas #GameBoard, body.canvas #chessboard .board-b72b1, #top div.color_demo.canvas {
background-image: url(../images/board/canvas.jpg);
}
#GameBoard {
@ -579,3 +579,23 @@ div.replay_and_analyse a {
display: inline-block;
font-size: 1.4em;
}
/* chessboardjs */
.board-b72b1 {
border: 1px solid #c0c0c0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 512px;
}
.square-55d63 {
float: left;
position: relative;
/* disable any native browser highlighting */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

View file

@ -1,51 +0,0 @@
/*!
* Copyright 2013 Chris Oakman
* Released under the MIT license
* https://github.com/oakmac/chessboardjs/blob/master/LICENSE
*/
.board-b72b1 {
border: 1px solid #c0c0c0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 512px;
}
.square-55d63 {
float: left;
position: relative;
/* disable any native browser highlighting */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.white-1e1d7 {
background-color: #f0d9b5;
color: #b58863;
}
.black-3c85d {
background-color: #b58863;
color: #f0d9b5;
}
.highlight1-32417,
.highlight2-9c5d2 {
-webkit-box-shadow: inset 0 0 3px 3px yellow;
-moz-box-shadow: inset 0 0 3px 3px yellow;
box-shadow: inset 0 0 3px 3px yellow;
}
.notation-322f9 {
cursor: default;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
position: absolute;
}
.alpha-d2270 {
bottom: 1px;
right: 3px;
}
.numeric-fc462 {
top: 2px;
left: 2px;
}

View file

@ -30,9 +30,13 @@
}
#puzzle > .side div.comment h3 {
font-size: inherit;
margin: 3px;
margin: 4px;
display: block;
}
#puzzle > .side div.comment .rating {
font-size: 2em;
vertical-align: -3px;
}
#puzzle > .side div.retry {
color: #31708f;
background: #D9EDF7;
@ -64,12 +68,11 @@
}
#puzzle > .right {
position: absolute;
left: 524px;
left: 532px;
width: 242px;
}
#puzzle > .right h2 {
font-size: 1.4em;
font-weight: bold;
margin-bottom: 7px;
}
#puzzle > .right .lichess_control {
@ -114,6 +117,9 @@
#puzzle .prev_next button:disabled {
color: transparent;
}
#chessboard_wrap {
position: relative;
}
#chessboard {
width: 520px;
}

5
todo
View file

@ -108,15 +108,12 @@ run many AIs per server. And paralellize analysis! \o/
restore "continue from here" button
share the puzzle
show puzzle check
chessboardjs theming
board editor/play from position
puzzle letters outside
one-time introduction to puzzle "Find the best move for white"
more sounds http://en.lichess.org/forum/lichess-feedback/play-a-sound-when-a-game-is-beginning#1
puzzle stats page
check play-RM dependency (prismic?)
kingcrusher wants his FIDE title http://en.lichess.org/forum/general-chess-discussion/player-titles---cm-fm-im-gm-etc
drop old notifications (timeline)
anon shares running game - hilarity follows.
deploy
------