indicate turn when game is unlimited

This commit is contained in:
Thibault Duplessis 2014-11-20 01:34:20 +01:00
parent a7eb899766
commit 8cfdf51bce
2 changed files with 34 additions and 15 deletions

View file

@ -1088,57 +1088,64 @@ div.table .button.strong {
font-weight: bold;
font-size: 1.2em;
}
div.table_wrap > div.clock {
div.table_wrap .whos_turn {
height: 2em;
line-height: 2em;
width: 100%;
text-align: center;
font-weight: bold;
}
div.table_wrap > .clock {
position: relative;
}
div.table_wrap > div.clock > div.bar {
div.table_wrap > .clock .bar {
position: absolute;
width: 242px;
height: 4px;
}
div.table_wrap > div.clock_top > div.bar {
div.table_wrap > .clock_top .bar {
bottom: -4px;
}
div.table_wrap > div.clock_bottom > div.bar {
div.table_wrap > .clock_bottom .bar {
top: -4px;
}
div.table_wrap > div.clock > div.bar > span {
div.table_wrap > .clock .bar span {
display: block;
height: 4px;
width: 0px;
background: #759900;
}
div.table_wrap > div.clock > div.time {
div.table_wrap > .clock > .time {
display: inline-block;
border: 1px solid #ccc;
padding: 0 8px;
font-size: 27px;
font-family: monospace;
}
div.table_wrap > div.clock > div.time > span {
div.table_wrap > .clock .time span {
font-size: 80%;
}
div.table_wrap > div.clock > div.time b {
div.table_wrap > .clock .time b {
font-weight: bold;
}
div.table_wrap > div.clock.running > div.time {
div.table_wrap > .clock.running .time {
background: #fff077;
color: #444;
}
div.table_wrap > div.clock.running.emerg > div.time {
div.table_wrap > .clock.running.emerg .time {
background-color: #eFAAAA;
color: #444;
}
div.table_wrap > div.clock.outoftime > div.time {
div.table_wrap > .clock.outoftime .time {
background-color: #eFAAAA;
font-weight: bold;
color: #444;
}
div.table_wrap > div.clock_top > div.time {
div.table_wrap > .clock_top .time {
border-bottom: 0;
border-radius: 2px 2px 0 0;
}
div.table_wrap > div.clock_bottom > div.time {
div.table_wrap > .clock_bottom .time {
border-top: 0;
border-radius: 0 0 2px 2px;
}

View file

@ -105,10 +105,22 @@ function renderTablePlay(ctrl) {
];
}
function whosTurn(ctrl, color) {
return m('div.whos_turn',
ctrl.data.game.player == color ? ctrl.trans(
ctrl.data.game.player == ctrl.data.player.color ? 'yourTurn' : 'waitingForOpponent'
) : ''
);
}
module.exports = function(ctrl) {
var clockRunningColor = ctrl.isClockRunning() ? ctrl.data.game.player : null;
return m('div.table_wrap', [
(ctrl.clock && !ctrl.data.blind) ? renderClock(ctrl.clock, opposite(ctrl.data.player.color), "top", clockRunningColor) : null,
(ctrl.clock && !ctrl.data.blind) ? renderClock(
ctrl.clock,
opposite(ctrl.data.player.color),
"top", clockRunningColor
) : whosTurn(ctrl, ctrl.data.opponent.color),
m('div', {
class: 'table' + (status.finished(ctrl.data) ? ' finished' : '')
}, [
@ -121,6 +133,6 @@ module.exports = function(ctrl) {
]), (ctrl.clock && !ctrl.data.blind) ? [
renderClock(ctrl.clock, ctrl.data.player.color, "bottom", clockRunningColor),
button.moretime(ctrl)
] : null
] : whosTurn(ctrl, ctrl.data.player.color)
])
}