complete new lobby with chart
This commit is contained in:
parent
cfc3b42a21
commit
0674a420db
|
@ -7,7 +7,7 @@ import controllers.routes
|
|||
|
||||
trait AssetHelper {
|
||||
|
||||
val assetVersion = 45
|
||||
val assetVersion = 46
|
||||
|
||||
def cssTag(name: String) = css("stylesheets/" + name)
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
1
todo
|
@ -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
|
||||
|
||||
---
|
||||
|
||||
|
|
Loading…
Reference in a new issue