diff --git a/public/stylesheets/board.css b/public/stylesheets/board.css index 12b0d65a4b..6d65cca05f 100644 --- a/public/stylesheets/board.css +++ b/public/stylesheets/board.css @@ -1227,6 +1227,10 @@ div.table_wrap .berserk { line-height: 27px; vertical-align: 2px; } +div.table_wrap .berserk.button { + line-height: 17px; + vertical-align: -3px; +} div.table_wrap a.moretime { opacity: 0.4; position: absolute; diff --git a/ui/round/src/clock/view.js b/ui/round/src/clock/view.js index 9a69562621..f488e05df4 100644 --- a/ui/round/src/clock/view.js +++ b/ui/round/src/clock/view.js @@ -1,5 +1,4 @@ var m = require('mithril'); -var classSet = require('chessground').util.classSet; var game = require('game').game; function prefixInteger(num, length) { @@ -10,12 +9,6 @@ function bold(x) { return '' + x + ''; } -var berserkIcon = m('span.berserk.hint--bottom-left', { - 'data-hint': "BERSERK! Half the time, bonus point" -}, m('span', { - 'data-icon': '`' -})); - function formatClockTime(ctrl, time) { var date = new Date(time); var minutes = prefixInteger(date.getUTCMinutes(), 2); @@ -31,23 +24,17 @@ function formatClockTime(ctrl, time) { } } -module.exports = function(ctrl, color, position, runningColor, getBerserk) { - var time = ctrl.data[color]; - return m('div', { - class: 'clock clock_' + color + ' clock_' + position + ' ' + classSet({ - 'outoftime': !time, - 'running': runningColor === color, - 'emerg': time < ctrl.data.emerg +function showBar(ctrl, time) { + return ctrl.data.showBar ? m('div.bar', + m('span', { + style: { + width: Math.max(0, Math.min(100, (time / ctrl.data.barTime) * 100)) + '%' + } }) - }, [ - ctrl.data.showBar ? m('div.bar', - m('span', { - style: { - width: Math.max(0, Math.min(100, (time / ctrl.data.barTime) * 100)) + '%' - } - }) - ) : null, - m('div.time', m.trust(formatClockTime(ctrl, time * 1000))), - getBerserk(color) ? berserkIcon : null - ]); + ) : null; } + +module.exports = { + formatClockTime: formatClockTime, + showBar: showBar +}; diff --git a/ui/round/src/view/table.js b/ui/round/src/view/table.js index e6fcd7ae75..677c98eb88 100644 --- a/ui/round/src/view/table.js +++ b/ui/round/src/view/table.js @@ -1,11 +1,12 @@ var m = require('mithril'); var chessground = require('chessground'); +var classSet = chessground.util.classSet; var partial = chessground.util.partial; var game = require('game').game; var status = require('game').status; var opposite = chessground.util.opposite; var xhr = require('../xhr'); -var renderClock = require('../clock/view'); +var clockView = require('../clock/view'); var renderCorrespondenceClock = require('../correspondenceClock/view'); var renderReplay = require('../replay/view'); var renderStatus = require('./status'); @@ -86,14 +87,7 @@ function renderTablePlay(ctrl) { button.standard(ctrl, game.abortable, 'L', 'abortGame', 'abort'), button.standard(ctrl, game.takebackable, 'i', 'proposeATakeback', 'takeback-yes'), button.standard(ctrl, game.drawable, '2', 'offerDraw', 'draw-yes'), - button.standard(ctrl, game.resignable, 'b', 'resign', 'resign'), - game.berserkableBy(ctrl.data) ? m('button', { - class: 'button hint--bottom-left', - 'data-hint': "GO BERSERK! Half the time, bonus point", - onclick: partial(xhr.berserk, ctrl) - }, m('span', { - 'data-icon': '`' - })) : null + button.standard(ctrl, game.resignable, 'b', 'resign', 'resign') ]), buttons ? m('div.control.buttons', buttons) : null, renderPlayer(ctrl, d.player) @@ -109,19 +103,44 @@ function whosTurn(ctrl, color) { ); } +var berserkIcon = m('span.berserk.hint--bottom-left', { + 'data-hint': "BERSERK! Half the time, bonus point" +}, m('span', { + 'data-icon': '`' +})); + +function goBerserk(ctrl) { + return m('button', { + class: 'button berserk hint--bottom-left', + 'data-hint': "GO BERSERK! Half the time, bonus point", + onclick: partial(xhr.berserk, ctrl) + }, m('span', { + 'data-icon': '`' + })); +} + +function renderClock(ctrl, color, position) { + var time = ctrl.clock.data[color]; + return m('div', { + class: 'clock clock_' + color + ' clock_' + position + ' ' + classSet({ + 'outoftime': !time, + 'running': ctrl.isClockRunning() && ctrl.data.game.player === color, + 'emerg': time < ctrl.clock.data.emerg + }) + }, [ + clockView.showBar(ctrl.clock, time), + m('div.time', m.trust(clockView.formatClockTime(ctrl.clock, time * 1000))), + game.berserkOf(ctrl.data, color) ? berserkIcon : ( + ctrl.data.player.color === color && game.berserkableBy(ctrl.data) ? goBerserk(ctrl) : null + ) + ]); +} + module.exports = function(ctrl) { - var clockRunningColor = ctrl.isClockRunning() ? ctrl.data.game.player : null; - var berserkOf = partial(game.berserkOf, ctrl.data); return m('div.table_wrap', [ - (ctrl.clock && !ctrl.data.blind) ? renderClock( - ctrl.clock, - ctrl.data.opponent.color, - "top", - clockRunningColor, - berserkOf - ) : ( + (ctrl.clock && !ctrl.data.blind) ? renderClock(ctrl, ctrl.data.opponent.color, 'top') : ( ctrl.data.correspondence ? renderCorrespondenceClock( - ctrl.correspondenceClock, ctrl.trans, ctrl.data.opponent.color, "top", ctrl.data.game.player + ctrl.correspondenceClock, ctrl.trans, ctrl.data.opponent.color, 'top', ctrl.data.game.player ) : whosTurn(ctrl, ctrl.data.opponent.color) ), m('div', { @@ -134,13 +153,7 @@ module.exports = function(ctrl) { ) ) ]), (ctrl.clock && !ctrl.data.blind) ? [ - renderClock( - ctrl.clock, - ctrl.data.player.color, - "bottom", - clockRunningColor, - berserkOf - ), + renderClock(ctrl, ctrl.data.player.color, 'bottom'), button.moretime(ctrl) ] : ( ctrl.data.correspondence ? renderCorrespondenceClock(