complete new lobby with chart

This commit is contained in:
Thibault Duplessis 2013-06-08 19:24:30 +02:00
parent cfc3b42a21
commit 0674a420db
5 changed files with 122 additions and 41 deletions

View file

@ -7,7 +7,7 @@ import controllers.routes
trait AssetHelper {
val assetVersion = 45
val assetVersion = 46
def cssTag(name: String) = css("stylesheets/" + name)

View file

@ -48,6 +48,7 @@ case class Hook(
"speed" -> chess.Speed(clockOption).id,
"emin" -> realEloRange.map(_.min),
"emax" -> realEloRange.map(_.max),
"color" -> chess.Color(color).??(_.name),
"engine" -> engine)
private def clockOption = (time filter (_ hasClock)) |@| increment apply Clock.apply

View file

@ -1935,20 +1935,22 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
var $userTag = $('#user_tag');
var isRegistered = $userTag.length > 0
var myElo = isRegistered ? parseInt($userTag.data('elo')) : null;
var animation = 800;
var animation = 500;
var pool = [];
// extras
for (elo = 1000; elo <= 2000; elo += 100) {
_.each(['0+1','1+0','2+0','3+0','4+0','5+0','6+0','7+0','8+0','9+0','10+0','30+0','30+30'], function(time) {
pool.push({
username: elo + " and " + time,
id: elo + "and" + time.replace(/\+/,'-'),
elo: elo,
clock: time
});
});
}
// for (elo = 800; elo <= 2000; elo += 100) {
// // for (elo = 1200; elo <= 1200; elo += 100) {
// _.each(['0+1','1+0','2+0','3+0','4+0','5+0','6+0','7+0','8+0','9+0','10+0','12+0','15+0','20+0','25+0','30+0','30+30'], function(time) {
// // _.each(['5+8'], function(time) {
// pool.push({
// username: elo + " and " + time,
// id: elo + "and" + time.replace(/\+/,'-'),
// elo: elo,
// clock: time
// });
// });
// }
var slots = [];
for (i = 1; i <= 12; i++) {
@ -2100,7 +2102,8 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
function addHook(hook) {
if (!isRegistered && hook.mode == "Rated") return;
if (hook.emin && (myElo < parseInt(hook.emin) || myElo > parseInt(hook.emax))) return;
hook.action = hook.uid == lichess_sri ? "cancel" : "join";
if (hook.action == 'join' && hook.emin && (myElo < parseInt(hook.emin) || myElo > parseInt(hook.emax))) return;
pool.push(hook);
drawHooks();
}
@ -2109,24 +2112,24 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
var filter = lichess_preload.filter;
var seen = [];
var hidden = 0;
var visible = [];
var visible = 0;
_.each(pool, function(hook) {
var hide = (filter.variant != null && filter.variant != hook.variant) ||
(filter.mode != null && filter.mode != hook.mode) ||
(filter.speed != null && filter.speed != hook.speed) ||
(filter.eloDiff > 0 && (!hook.elo || hook.elo > (myElo + filter.eloDiff) || hook.elo < (myElo - filter.eloDiff)));
var hash = hook.mode + hook.variant + hook.clock + hook.elo;
if (hide) {
if (hide && hook.action != 'cancel') {
$wrap.find('.' + hook.id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
$(this).remove();
});
hidden++;
} else if (_.contains(seen, hash)) {
} else if (_.contains(seen, hash) && hook.action != 'cancel') {
$wrap.find('.' + hook.id).filter(':visible').hide();
hidden++;
} else {
var $h = $wrap.find('.' + hook.id);
visible.push(hook);
visible++;
if (!$h.length) {
$(_.shuffle($hooks.find('>div:empty'))[0]).html($(renderHook(hook)).fadeIn(animation));
$canvas.append($(renderPlot(hook)).fadeIn(animation));
@ -2134,7 +2137,7 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
$h.not(':visible').fadeIn(animation);
}
}
seen.push(hash);
if (hook.action != 'cancel') seen.push(hash);
});
$hooks.find('div.hook').each(function() {
var id = $(this).data('id');
@ -2147,7 +2150,7 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
}
});
$noHook.toggle(visible.length == 0);
$noHook.toggle(visible == 0);
$wrap
.find('a.filter')
.toggleClass('on', filter.mode != null || filter.variant != null || filter.speed != null || filter.eloDiff > 0)
@ -2155,32 +2158,48 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
}
function renderPlot(hook) {
var width = height = 237;
var elo = Math.max(1000, Math.min(2000, hook.elo || 1200));
if (elo >= 1200) {
var ratio = 0.5 + Math.log(elo - 1200)
}
var bottom = Math.round((elo - 1000) / 1000 * height);
var maxDur = 2700;
if (hook.clock) {
var parts = hook.clock.replace(/\s/g, '').split('+');
var dur = Math.min(3600, parseInt(parts[0]) * 60 + parseInt(parts[1]) * 30);
} else dur = 2700;
var left = Math.round(durLog(dur) / durLog(maxDur) * width);
return '<span data-id="' + hook.id + '" class="plot '+ hook.id+'" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>';
var bottom = eloY(hook.elo);
var left = clockX(hook.clock);
var klass = [
'plot',
hook.id,
hook.mode == "Rated" ? 'rated' : 'casual',
hook.variant == "Chess960" ? 'chess960' : '',
hook.action == 'cancel' ? 'cancel' : ''
].join(' ');
return '<span data-id="' + hook.id + '" class="' + klass + '" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>';
}
function eloLog(a) {
return Math.log(a/10);
function eloY(e) {
function eloLog(a) {
return Math.log(a / 200 + 1);
}
var elo = Math.max(800, Math.min(2000, e || 1200));
if (elo == 1200) {
var ratio = 0.25;
} else if (elo > 1200) {
var ratio = 0.25 + (eloLog(elo - 1200) / eloLog(800)) * 3 / 4;
} else {
var ratio = 0.25 - (eloLog(1200 - elo) / eloLog(400)) / 4;
}
return Math.round(ratio * 237);
}
function durLog(a) {
return Math.log((a-30)/10);
function clockX(c) {
var maxDur = 2000;
function durLog(a) {
return Math.log((a - 30) / 200 + 1);
}
if (c) {
var parts = c.replace(/\s/g, '').split('+');
var dur = Math.min(maxDur, parseInt(parts[0]) * 60 + parseInt(parts[1]) * 30);
} else dur = maxDur;
return Math.round(durLog(dur) / durLog(maxDur) * 237);
}
function renderHook(hook) {
hook.action = hook.uid == lichess_sri ? "cancel" : "join";
if (hook.emin && hook.action == "join" && (myElo < parseInt(hook.emin) || myElo > parseInt(hook.emax))) return "";
var html = '<div data-id="' + hook.id + '" class="hook ' + hook.id + ' ' + hook.action + '">';
var title = hook.action == 'cancel' ? 'title="Click to cancel"' : '';
var html = '<div '+title+' data-id="' + hook.id + '" class="hook ' + hook.id + ' ' + hook.action + '">';
var isEngine = hook.engine && hook.action == 'join';
var userClass = isEngine ? "engine" : "";
if (hook.elo) {
@ -2202,6 +2221,9 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
html += '<span class="clock nope">∞</span>';
}
html += '<span class="mode">' + mode + '</span>';
if(hook.color) {
html += '<span class="color s16 '+hook.color+'"></span>';
}
if (hook.action == "cancel") {
html += '<a class="action socket-link" data-msg="cancel"><span></span></a>';
} else {
@ -2222,11 +2244,23 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
return $hook;
}
$('#hooks_chart').append(
_.map([1000, 1200, 1300, 1400, 1600, 1800, 2000], function(v) {
return '<span class="y label" style="bottom:' + (eloY(v) + 4) + 'px">' + v + '</span>';
}).join('') +
_.map([1, 2, 3, 5, 10, 15, 20, 30], function(v) {
return '<span class="x label" style="left:' + (clockX(v+"+0")) + 'px">' + v + '</span>';
}).join('')
);
$wrap.on('mouseenter', '.plot, div.hook', function() {
$wrap.find('.' + $(this).data('id')).addClass('hover');
}).on('mouseleave', '.plot, div.hook', function(e) {
$wrap.find('.' + $(this).data('id')).removeClass('hover');
});
$wrap.on('click', '.plot', function() {
$hooks.find('.' + $(this).data('id')).click();
});
$hooks.on('click', 'div.hook a.opponent', function(e) {
e.stopPropagation();
return true;

View file

@ -1349,7 +1349,13 @@ div.game_config div.color_submits button.random span {
left: 128px;
width: 256px;
height: 256px;
background: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.5);
}
#hooks_chart > span.label {
font-size: 8px;
position: absolute;
left: 3px;
bottom: 3px;
}
#hooks_chart .canvas {
position: relative;
@ -1361,9 +1367,36 @@ div.game_config div.color_submits button.random span {
width: 13px;
height: 13px;
background: #d0d0d0;
border-radius: 16px;
border: 3px solid #666;
cursor: pointer;
z-index: 1;
}
#hooks_chart .plot:hover {
z-index: 2;
}
#hooks_chart .plot.casual {
border-radius: 16px;
}
#hooks_chart .plot.rated {
border-radius: 3px;
transform:rotate(45deg);
width: 11px;
height: 11px;
}
#hooks_chart .plot.chess960 {
border-style: double;
border-width: 5px;
}
#hooks_chart .plot.casual.chess960 {
width: 9px;
height: 9px;
}
#hooks_chart .plot.rated.chess960 {
width: 7px;
height: 7px;
}
#hooks_chart .plot.cancel {
background: #666;
}
#hooks_wrap > a.no_hook {
position: absolute;
@ -1469,6 +1502,18 @@ div.game_config div.color_submits button.random span {
font-size: 1.25em;
display: block;
}
#hooks .color {
position: absolute;
bottom: 5px;
left: 5px;
display: block;
width: 16px;
height: 16px;
background-position: 0 -240px;
}
#hooks .color.black {
background-position: 0 -256px;
}
#featured_game div.vstext {
margin-top: 0.7em;
text-align: center;

1
todo
View file

@ -62,6 +62,7 @@ IE10 no sound toggle http://en.lichess.org/forum/lichess-feedback/notification-o
filter current games for watching http://en.lichess.org/forum/lichess-feedback/viewing-current-games-suggestion#2
declined challenge still appears
no time data http://en.lichess.org/x9tls3mh/stats
show color and cheater sign
---