more progress on mithril lobby

This commit is contained in:
Thibault Duplessis 2014-12-27 23:51:24 +01:00
parent 66c46bd89a
commit b5ab7b6a43
17 changed files with 650 additions and 549 deletions

View file

@ -1,5 +1,12 @@
@()(implicit ctx: Context)
@Html(J.stringify(i18nJsObject(
trans.realTime,
trans.correspondence
trans.correspondence,
trans.nbGamesInPlay,
trans.player,
trans.time,
trans.joinTheGame,
trans.cancel,
trans.casual,
trans.rated
)))

View file

@ -58,7 +58,7 @@ case class Hook(
"username" -> username,
"rating" -> rating,
"variant" -> realVariant.shortName,
"mode" -> realMode.toString,
"mode" -> realMode.id,
"clock" -> clock.show,
"time" -> clock.estimateTotalTime,
"speed" -> speed.id,

View file

@ -287,6 +287,12 @@ var storage = {
});
}
if (lichess.round) startRound(document.getElementById('lichess'), lichess.round);
else if (lichess.prelude) startPrelude(document.querySelector('.lichess_game'), lichess.prelude);
else if (lichess.analyse) startAnalyse(document.getElementById('lichess'), lichess.analyse);
else if (lichess.user_analysis) startUserAnalysis(document.getElementById('lichess'), lichess.user_analysis);
else if (lichess.lobby) startLobby(document.getElementById('hooks_wrap'), lichess.lobby);
$('#lichess').on('click', '.socket-link:not(.disabled)', function() {
lichess.socket.send($(this).data('msg'), $(this).data('data'));
});
@ -387,11 +393,6 @@ var storage = {
$('body').on('lichess.content_loaded', setBlindMode);
}
if (lichess.round) startRound(document.getElementById('lichess'), lichess.round);
else if (lichess.prelude) startPrelude(document.querySelector('.lichess_game'), lichess.prelude);
else if (lichess.analyse) startAnalyse(document.getElementById('lichess'), lichess.analyse);
else if (lichess.user_analysis) startUserAnalysis(document.getElementById('lichess'), lichess.user_analysis);
setTimeout(function() {
if (lichess.socket === null) {
lichess.socket = new lichess.StrongSocket("/socket", 0);
@ -1243,6 +1244,468 @@ var storage = {
}, 100);
});
function startLobby(element, cfg) {
var $timeline = $("#timeline");
var $newposts = $("div.new_posts");
var nbPlayersElement = document.getElementById('site_baseline span');
var lobby;
// var $canvas = $wrap.find('.canvas');
// var $hooksList = $wrap.find('#hooks_list');
// var $tableWrap = $hooksList.find('div.table_wrap');
// var $table = $tableWrap.find('table').sortable();
// var $tbody = $table.find('tbody');
// var animation = 500;
// var hookPool = [];
// var nextHooks = [];
// var flushHooksTimeout;
// var flushHooksSchedule = function() {
// flushHooksTimeout = setTimeout(flushHooks, 8000);
// };
// var flushHooks = function() {
// clearTimeout(flushHooksTimeout);
// $tbody.fadeIn(500);
// $tableWrap.clone().attr('id', 'tableclone').appendTo($hooksList).fadeOut(500, function() {
// $(this).remove();
// });
// $tbody.find('tr.disabled').remove();
// $tbody.append(nextHooks);
// nextHooks = [];
// $table.trigger('sortable.sort');
// flushHooksSchedule();
// };
// flushHooksSchedule();
// $('body').on('lichess.hook-flush', flushHooks);
// $wrap.on('click', '>div.tabs>a', function() {
// var tab = $(this).data('tab');
// $(this).siblings().removeClass('active').end().addClass('active');
// $wrap.find('>.tab').hide().filter('.' + tab).show();
// storage.set('lobbytab', tab);
// reloadSeeksIfVisible();
// });
// var active = storage.get('lobbytab');
// if (['real_time', 'seeks', 'now_playing'].indexOf(active) === -1) active = 'real_time';
// if (!$wrap.find('>div.tabs>.' + active).length) active = 'real_time';
// $wrap.find('>div.tabs>.' + active).addClass('active');
// $wrap.find('>.' + active).show();
// $realTime.on('click', '.toggle', function() {
// var mode = $(this).data('mode');
// $realTime.children().hide().filter('#hooks_' + mode).show();
// storage.set('lobbymode', mode);
// });
// var mode = storage.get('lobbymode') || 'list';
// $('#hooks_' + mode).show();
// $wrap.find('a.filter').click(function() {
// var $a = $(this);
// var $div = $wrap.find('#hook_filter');
// setTimeout(function() {
// $div.click(function(e) {
// e.stopPropagation();
// });
// $('html').one('click', function(e) {
// $div.off('click').removeClass('active');
// $a.removeClass('active');
// });
// }, 10);
// if ($(this).toggleClass('active').hasClass('active')) {
// $div.addClass('active');
// if ($div.is(':empty')) {
// $.ajax({
// url: $(this).attr('href'),
// success: function(html) {
// var save = $.fp.debounce(function() {
// var $form = $div.find('form');
// $.ajax({
// url: $form.attr('action'),
// data: $form.serialize(),
// type: 'post',
// success: function(filter) {
// lichess_preload.filter = filter;
// drawHooks();
// $('body').trigger('lichess.hook-flush');
// }
// });
// }, 500);
// $div.html(html).find('input').change(save);
// $div.find('button.reset').click(function() {
// $div.find('label input').prop('checked', true).trigger('change');
// $div.find('.rating_range').each(function() {
// var s = $(this);
// s.slider('values', [s.slider('option', 'min'), s.slider('option', 'max')]).trigger('change');
// });
// });
// $div.find('button').click(function() {
// $wrap.find('a.filter').click();
// return false;
// });
// $div.find('.rating_range').each(function() {
// var $this = $(this);
// var $input = $this.find("input");
// var $span = $this.siblings(".range");
// var min = $input.data("min");
// var max = $input.data("max");
// var values = $input.val() ? $input.val().split("-") : [min, max];
// $span.text(values.join(' - '));
// function change() {
// setTimeout(function() {
// var values = $this.slider('values');
// $input.val(values[0] + "-" + values[1]);
// $span.text(values[0] + " - " + values[1]);
// save();
// }, 50);
// }
// $this.slider({
// range: true,
// min: min,
// max: max,
// values: values,
// step: 50,
// slide: change
// }).change(change);
// });
// }
// });
// }
// } else {
// $div.removeClass('active');
// }
// return false;
// });
function resizeTimeline() {
if ($timeline.length) {
var pos = $timeline.offset().top,
max = $('#lichess').offset().top + 536;
while (pos + $timeline.outerHeight() > max) {
$timeline.find('div.entry:last').remove();
}
}
}
resizeTimeline();
// lichess_preload.hookPool.forEach(addHook);
// drawHooks(true);
// $table.find('th:eq(2)').click().end();
lichess.socket = new lichess.StrongSocket(
'/lobby/socket/v1',
cfg.data.version, {
receive: function(t, d) {
if (lobby) lobby.socketReceive(t, d);
else console.log('missed', t, d);
},
events: {
reload_timeline: function() {
$.ajax({
url: $timeline.data('href'),
success: function(html) {
$timeline.html(html);
resizeTimeline();
$('body').trigger('lichess.content_loaded');
}
});
},
streams: function(html) {
$('#streams_on_air').html(html);
},
// hook_add: function(hook) {
// addHook(hook);
// drawHooks();
// if (hook.action == 'cancel') $('body').trigger('lichess.hook-flush');
// },
// hook_remove: removeHook,
// hook_list: syncHookIds,
featured: changeFeatured,
redirect: function(e) {
$.lichessOpeningPreventClicks();
$.redirect(e);
},
tournaments: function(data) {
$("#enterable_tournaments").html(data);
$('body').trigger('lichess.content_loaded');
},
reload_forum: function() {
setTimeout(function() {
$.ajax($newposts.data('url'), {
success: function(data) {
$newposts.find('ol').html(data).end().scrollTop(0);
$('body').trigger('lichess.content_loaded');
}
});
}, Math.round(Math.random() * 5000));
},
// reload_seeks: reloadSeeksIfVisible,
nbr: function(e) {
if (nbPlayersElement && e) {
var prev = parseInt(nbPlayersElement.textContent, 10);
var k = 5;
var interv = 2000 / k;
$.fp.range(k).forEach(function(it) {
setTimeout(function() {
var val = Math.round(((prev * (k - 1 - it)) + (e * (it + 1))) / k);
if (val != prev) {
nbPlayersElement.textContent = val;
prev = val;
}
}, Math.round(it * interv));
});
}
},
// override fen event to reload playing games list
// fen: function(e) {
// lichess.StrongSocket.defaults.events.fen(e);
// if ($nowPlaying.find('.mini_board_' + e.id).length) $.ajax({
// url: $nowPlaying.data('href'),
// success: function(html) {
// $nowPlaying.html(html);
// $('body').trigger('lichess.content_loaded');
// var nb = $nowPlaying.find('.my_turn').length;
// $wrap.find('.tabs .now_playing').toggleClass('hilight', nb).find('.unread').text(nb);
// }
// });
// }
},
options: {
name: 'lobby'
}
});
cfg.socketSend = lichess.socket.send.bind(lichess.socket);
lobby = LichessLobby(document.getElementById('hooks_wrap'), cfg);
// var variantConfirms = {
// '960': "This is a Chess960 game!\n\nThe starting position of the pieces on the players' home ranks is randomized.\nRead more: http://wikipedia.org/wiki/Chess960\n\nDo you want to play Chess960?",
// 'KotH': "This is a King of the Hill game!\n\nThe game can be won by bringing the king to the center.\nRead more: http://lichess.org/king-of-the-hill",
// '3+': "This is a Three-check game!\n\nThe game can be won by checking the opponent 3 times.\nRead more: http://en.wikipedia.org/wiki/Three-check_chess",
// "Anti": "This is an antichess chess game!\n\n If you can take a piece, you must. The game can be won by losing all your pieces."
// };
// function confirmVariant(variant) {
// return Object.keys(variantConfirms).every(function(key) {
// var v = variantConfirms[key]
// if (variant == key && !storage.get(key)) {
// var c = confirm(v);
// if (c) storage.set(key, 1);
// return c;
// } else return true;
// })
// }
// $seeks.on('click', 'tr', function() {
// if ($(this).hasClass('must_login')) {
// if (confirm($.trans('You need an account to do that'))) {
// location.href = '/signup';
// }
// return false;
// }
// if ($(this).data('action') != 'joinSeek' || confirmVariant($(this).data('variant'))) {
// lichess.socket.send($(this).data('action'), $(this).data('id'));
// }
// });
// function reloadSeeksIfVisible() {
// if ($seeks.is(':visible')) {
// $.ajax($seeks.data('reload-url'), {
// success: function(html) {
// $seeks.html(html);
// }
// });
// }
// }
function changeFeatured(o) {
$('#featured_game').html(o.html);
$('body').trigger('lichess.content_loaded');
}
// function removeHook(id) {
// hookPool = hookPool.filter(function(h) {
// return h.id != id;
// });
// drawHooks();
// }
// function syncHookIds(ids) {
// hookPool = hookPool.filter(function(h) {
// return $.fp.contains(ids, h.id);
// });
// drawHooks();
// }
// function addHook(hook) {
// hook.action = hook.uid == lichess.StrongSocket.sri ? "cancel" : "join";
// hookPool.push(hook);
// }
// function disableHook(id) {
// $tbody.children('.' + id).addClass('disabled').attr('title', '');
// destroyChartHook(id);
// }
// function destroyHook(id) {
// $tbody.children('.' + id).remove();
// destroyChartHook(id);
// }
// function destroyChartHook(id) {
// $('#' + id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
// $.powerTip.destroy($(this));
// $(this).remove();
// });
// }
// function drawHooks(initial) {
// var filter = lichess_preload.filter;
// var seen = [];
// var hidden = 0;
// var visible = 0;
// hookPool.forEach(function(hook) {
// var hide = !$.fp.contains(filter.variant, hook.variant) || !$.fp.contains(filter.mode, hook.mode) || !$.fp.contains(filter.speed, hook.speed) ||
// (filter.rating && (!hook.rating || (hook.rating < filter.rating[0] || hook.rating > filter.rating[1])));
// var hash = hook.mode + hook.variant + hook.time + hook.rating;
// if (hide && hook.action != 'cancel') {
// destroyHook(hook.id);
// hidden++;
// } else if ($.fp.contains(seen, hash) && hook.action != 'cancel') {
// $('#' + hook.id).filter(':visible').hide();
// $tbody.children('.' + hook.id).hide();
// } else {
// visible++;
// if (!$('#' + hook.id).length) {
// $canvas.append($(renderPlot(hook)).fadeIn(animation));
// if (initial) $tbody.append(renderTr(hook));
// else nextHooks.push(renderTr(hook));
// } else {
// $('#' + hook.id).not(':visible').fadeIn(animation);
// $tbody.children('.' + hook.id).show();
// }
// }
// if (hook.action != 'cancel') seen.push(hash);
// });
// $.makeArray($canvas.find('>span.plot')).map(function(o) {
// return o.getAttribute('data-id');
// }).concat(
// $.makeArray($tbody.children()).map(function(o) {
// return o.getAttribute('data-id');
// })).forEach(function(id) {
// if (!$.fp.find(hookPool, function(x) {
// return x.id == id;
// })) disableHook(id);
// });
// $wrap
// .find('a.filter')
// .toggleClass('on', hidden > 0)
// .find('span.number').text('(' + hidden + ')');
// $('body').trigger('lichess.content_loaded');
// }
// function renderPlot(hook) {
// var bottom = Math.max(0, ratingY(hook.rating) - 7);
// var left = Math.max(0, clockX(hook.time) - 4);
// var klass = [
// 'plot',
// hook.mode == "Rated" ? 'rated' : 'casual',
// hook.action == 'cancel' ? 'cancel' : '',
// hook.variant != 'STD' ? 'variant' : ''
// ].join(' ');
// var $plot = $('<span id="' + hook.id + '" class="' + klass + '" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>');
// return $plot.data('hook', hook).powerTip({
// fadeInTime: 0,
// fadeOutTime: 0,
// placement: hook.rating > 2200 ? 'se' : 'ne',
// mouseOnToPopup: true,
// closeDelay: 200,
// intentPollInterval: 50,
// popupId: 'hook'
// }).data('powertipjq', $(renderHook(hook)));
// }
// function ratingY(e) {
// function ratingLog(a) {
// return Math.log(a / 150 + 1);
// }
// var rating = Math.max(800, Math.min(2800, e || 1500));
// var ratio;
// if (rating == 1500) {
// ratio = 0.25;
// } else if (rating > 1500) {
// ratio = 0.25 + (ratingLog(rating - 1500) / ratingLog(1300)) * 3 / 4;
// } else {
// ratio = 0.25 - (ratingLog(1500 - rating) / ratingLog(500)) / 4;
// }
// return Math.round(ratio * 489);
// }
// function clockX(dur) {
// function durLog(a) {
// return Math.log((a - 30) / 200 + 1);
// }
// var max = 2000;
// return Math.round(durLog(Math.min(max, dur || max)) / durLog(max) * 489);
// }
// function renderHook(hook) {
// var html = '';
// if (hook.rating) {
// html += '<a class="opponent" href="/@/' + hook.username + '">' + hook.username.substr(0, 14) + '</a>';
// html += '<span class="rating">' + hook.rating + '</span>';
// } else {
// html += '<span class="opponent anon">Anonymous</span>';
// }
// html += '<span class="clock">' + hook.clock + '</span>';
// html += '<span class="mode">' +
// '<span class="varicon" data-icon="' + hook.perf.icon + '"></span>' + $.trans(hook.mode) + '</span>';
// html += '<span class="is is2 color-icon ' + (hook.color || "random") + '"></span>';
// return html;
// }
// function renderTr(hook) {
// var title = (hook.action == "join") ? $.trans('Join the game') + ' - ' + hook.perf.name : $.trans('cancel');
// return '<tr title="' + title + '" data-id="' + hook.id + '" class="' + hook.id + ' ' + hook.action + '">' + [
// ['', '<span class="is is2 color-icon ' + (hook.color || "random") + '"></span>'],
// [hook.username, (hook.rating ? '<a href="/@/' + hook.username + '" class="ulink">' + hook.username + '</a>' : 'Anonymous')],
// [hook.rating || 0, hook.rating ? hook.rating : ''],
// [hook.time, hook.clock],
// [hook.mode,
// '<span class="varicon" data-icon="' + hook.perf.icon + '"></span>' +
// $.trans(hook.mode)
// ]
// ].map(function(x) {
// return '<td data-sort-value="' + x[0] + '">' + x[1] + '</td>';
// }).join('') + '</tr>';
// }
// $('#hooks_chart').append(
// [1000, 1200, 1400, 1500, 1600, 1800, 2000, 2200, 2400].map(function(v) {
// var b = ratingY(v);
// return '<span class="y label" style="bottom:' + (b + 5) + 'px">' + v + '</span>' +
// '<div class="grid horiz" style="height:' + (b + 4) + 'px"></div>';
// }).join('') + [1, 2, 3, 5, 7, 10, 15, 20, 30].map(function(v) {
// var l = clockX(v * 60);
// return '<span class="x label" style="left:' + l + 'px">' + v + '</span>' +
// '<div class="grid vert" style="width:' + (l + 7) + 'px"></div>';
// }).join(''));
// $tbody.on('click', 'a.ulink', function(e) {
// e.stopPropagation();
// });
// $tbody.on('click', 'td:not(.disabled)', function() {
// $('#' + $(this).parent().data('id')).click();
// });
// $canvas.on('click', '>span.plot:not(.hiding)', function() {
// var data = $(this).data('hook');
// if (data.action != 'join' || confirmVariant(data.variant)) {
// lichess.socket.send(data.action, data.id);
// }
// });
}
////////////////
// lobby.js //
////////////////
@ -1533,469 +1996,6 @@ var storage = {
$('#hooks_list, #hooks_chart').hide();
};
// hooks
$(function() {
var $wrap = $('#hooks_wrap');
if (!$wrap.length) return;
if (!lichess.StrongSocket.available) return;
var $nowPlaying = $('#now_playing');
var $seeks = $('#seeks');
var $timeline = $("#timeline");
var $newposts = $("div.new_posts");
var $realTime = $('#real_time');
var nbPlayersElement = document.getElementById('site_baseline span');
// var $canvas = $wrap.find('.canvas');
// var $hooksList = $wrap.find('#hooks_list');
// var $tableWrap = $hooksList.find('div.table_wrap');
// var $table = $tableWrap.find('table').sortable();
// var $tbody = $table.find('tbody');
// var animation = 500;
// var hookPool = [];
// var nextHooks = [];
// var flushHooksTimeout;
// var flushHooksSchedule = function() {
// flushHooksTimeout = setTimeout(flushHooks, 8000);
// };
// var flushHooks = function() {
// clearTimeout(flushHooksTimeout);
// $tbody.fadeIn(500);
// $tableWrap.clone().attr('id', 'tableclone').appendTo($hooksList).fadeOut(500, function() {
// $(this).remove();
// });
// $tbody.find('tr.disabled').remove();
// $tbody.append(nextHooks);
// nextHooks = [];
// $table.trigger('sortable.sort');
// flushHooksSchedule();
// };
// flushHooksSchedule();
// $('body').on('lichess.hook-flush', flushHooks);
// $wrap.on('click', '>div.tabs>a', function() {
// var tab = $(this).data('tab');
// $(this).siblings().removeClass('active').end().addClass('active');
// $wrap.find('>.tab').hide().filter('.' + tab).show();
// storage.set('lobbytab', tab);
// reloadSeeksIfVisible();
// });
// var active = storage.get('lobbytab');
// if (['real_time', 'seeks', 'now_playing'].indexOf(active) === -1) active = 'real_time';
// if (!$wrap.find('>div.tabs>.' + active).length) active = 'real_time';
// $wrap.find('>div.tabs>.' + active).addClass('active');
// $wrap.find('>.' + active).show();
// $realTime.on('click', '.toggle', function() {
// var mode = $(this).data('mode');
// $realTime.children().hide().filter('#hooks_' + mode).show();
// storage.set('lobbymode', mode);
// });
// var mode = storage.get('lobbymode') || 'list';
// $('#hooks_' + mode).show();
// $wrap.find('a.filter').click(function() {
// var $a = $(this);
// var $div = $wrap.find('#hook_filter');
// setTimeout(function() {
// $div.click(function(e) {
// e.stopPropagation();
// });
// $('html').one('click', function(e) {
// $div.off('click').removeClass('active');
// $a.removeClass('active');
// });
// }, 10);
// if ($(this).toggleClass('active').hasClass('active')) {
// $div.addClass('active');
// if ($div.is(':empty')) {
// $.ajax({
// url: $(this).attr('href'),
// success: function(html) {
// var save = $.fp.debounce(function() {
// var $form = $div.find('form');
// $.ajax({
// url: $form.attr('action'),
// data: $form.serialize(),
// type: 'post',
// success: function(filter) {
// lichess_preload.filter = filter;
// drawHooks();
// $('body').trigger('lichess.hook-flush');
// }
// });
// }, 500);
// $div.html(html).find('input').change(save);
// $div.find('button.reset').click(function() {
// $div.find('label input').prop('checked', true).trigger('change');
// $div.find('.rating_range').each(function() {
// var s = $(this);
// s.slider('values', [s.slider('option', 'min'), s.slider('option', 'max')]).trigger('change');
// });
// });
// $div.find('button').click(function() {
// $wrap.find('a.filter').click();
// return false;
// });
// $div.find('.rating_range').each(function() {
// var $this = $(this);
// var $input = $this.find("input");
// var $span = $this.siblings(".range");
// var min = $input.data("min");
// var max = $input.data("max");
// var values = $input.val() ? $input.val().split("-") : [min, max];
// $span.text(values.join(' - '));
// function change() {
// setTimeout(function() {
// var values = $this.slider('values');
// $input.val(values[0] + "-" + values[1]);
// $span.text(values[0] + " - " + values[1]);
// save();
// }, 50);
// }
// $this.slider({
// range: true,
// min: min,
// max: max,
// values: values,
// step: 50,
// slide: change
// }).change(change);
// });
// }
// });
// }
// } else {
// $div.removeClass('active');
// }
// return false;
// });
function resizeTimeline() {
if ($timeline.length) {
var pos = $timeline.offset().top,
max = $('#lichess').offset().top + 536;
while (pos + $timeline.outerHeight() > max) {
$timeline.find('div.entry:last').remove();
}
}
}
resizeTimeline();
// lichess_preload.hookPool.forEach(addHook);
// drawHooks(true);
// $table.find('th:eq(2)').click().end();
lichess.socket = new lichess.StrongSocket(
'/lobby/socket/v1',
lichess.lobby.data.version, {
events: {
reload_timeline: function() {
$.ajax({
url: $timeline.data('href'),
success: function(html) {
$timeline.html(html);
resizeTimeline();
$('body').trigger('lichess.content_loaded');
}
});
},
streams: function(html) {
$('#streams_on_air').html(html);
},
// hook_add: function(hook) {
// addHook(hook);
// drawHooks();
// if (hook.action == 'cancel') $('body').trigger('lichess.hook-flush');
// },
// hook_remove: removeHook,
// hook_list: syncHookIds,
featured: changeFeatured,
redirect: function(e) {
$.lichessOpeningPreventClicks();
$.redirect(e);
},
tournaments: function(data) {
$("#enterable_tournaments").html(data);
$('body').trigger('lichess.content_loaded');
},
reload_forum: function() {
setTimeout(function() {
$.ajax($newposts.data('url'), {
success: function(data) {
$newposts.find('ol').html(data).end().scrollTop(0);
$('body').trigger('lichess.content_loaded');
}
});
}, Math.round(Math.random() * 5000));
},
// reload_seeks: reloadSeeksIfVisible,
nbr: function(e) {
if (nbPlayersElement && e) {
var prev = parseInt(nbPlayersElement.textContent, 10);
var k = 5;
var interv = 2000 / k;
$.fp.range(k).forEach(function(it) {
setTimeout(function() {
var val = Math.round(((prev * (k - 1 - it)) + (e * (it + 1))) / k);
if (val != prev) {
nbPlayersElement.textContent = val;
prev = val;
}
}, Math.round(it * interv));
});
}
},
// override fen event to reload playing games list
// fen: function(e) {
// lichess.StrongSocket.defaults.events.fen(e);
// if ($nowPlaying.find('.mini_board_' + e.id).length) $.ajax({
// url: $nowPlaying.data('href'),
// success: function(html) {
// $nowPlaying.html(html);
// $('body').trigger('lichess.content_loaded');
// var nb = $nowPlaying.find('.my_turn').length;
// $wrap.find('.tabs .now_playing').toggleClass('hilight', nb).find('.unread').text(nb);
// }
// });
// }
},
options: {
name: "lobby"
}
});
// var variantConfirms = {
// '960': "This is a Chess960 game!\n\nThe starting position of the pieces on the players' home ranks is randomized.\nRead more: http://wikipedia.org/wiki/Chess960\n\nDo you want to play Chess960?",
// 'KotH': "This is a King of the Hill game!\n\nThe game can be won by bringing the king to the center.\nRead more: http://lichess.org/king-of-the-hill",
// '3+': "This is a Three-check game!\n\nThe game can be won by checking the opponent 3 times.\nRead more: http://en.wikipedia.org/wiki/Three-check_chess",
// "Anti": "This is an antichess chess game!\n\n If you can take a piece, you must. The game can be won by losing all your pieces."
// };
// function confirmVariant(variant) {
// return Object.keys(variantConfirms).every(function(key) {
// var v = variantConfirms[key]
// if (variant == key && !storage.get(key)) {
// var c = confirm(v);
// if (c) storage.set(key, 1);
// return c;
// } else return true;
// })
// }
// $seeks.on('click', 'tr', function() {
// if ($(this).hasClass('must_login')) {
// if (confirm($.trans('You need an account to do that'))) {
// location.href = '/signup';
// }
// return false;
// }
// if ($(this).data('action') != 'joinSeek' || confirmVariant($(this).data('variant'))) {
// lichess.socket.send($(this).data('action'), $(this).data('id'));
// }
// });
// function reloadSeeksIfVisible() {
// if ($seeks.is(':visible')) {
// $.ajax($seeks.data('reload-url'), {
// success: function(html) {
// $seeks.html(html);
// }
// });
// }
// }
function changeFeatured(o) {
$('#featured_game').html(o.html);
$('body').trigger('lichess.content_loaded');
}
// function removeHook(id) {
// hookPool = hookPool.filter(function(h) {
// return h.id != id;
// });
// drawHooks();
// }
// function syncHookIds(ids) {
// hookPool = hookPool.filter(function(h) {
// return $.fp.contains(ids, h.id);
// });
// drawHooks();
// }
// function addHook(hook) {
// hook.action = hook.uid == lichess.StrongSocket.sri ? "cancel" : "join";
// hookPool.push(hook);
// }
// function disableHook(id) {
// $tbody.children('.' + id).addClass('disabled').attr('title', '');
// destroyChartHook(id);
// }
// function destroyHook(id) {
// $tbody.children('.' + id).remove();
// destroyChartHook(id);
// }
// function destroyChartHook(id) {
// $('#' + id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
// $.powerTip.destroy($(this));
// $(this).remove();
// });
// }
// function drawHooks(initial) {
// var filter = lichess_preload.filter;
// var seen = [];
// var hidden = 0;
// var visible = 0;
// hookPool.forEach(function(hook) {
// var hide = !$.fp.contains(filter.variant, hook.variant) || !$.fp.contains(filter.mode, hook.mode) || !$.fp.contains(filter.speed, hook.speed) ||
// (filter.rating && (!hook.rating || (hook.rating < filter.rating[0] || hook.rating > filter.rating[1])));
// var hash = hook.mode + hook.variant + hook.time + hook.rating;
// if (hide && hook.action != 'cancel') {
// destroyHook(hook.id);
// hidden++;
// } else if ($.fp.contains(seen, hash) && hook.action != 'cancel') {
// $('#' + hook.id).filter(':visible').hide();
// $tbody.children('.' + hook.id).hide();
// } else {
// visible++;
// if (!$('#' + hook.id).length) {
// $canvas.append($(renderPlot(hook)).fadeIn(animation));
// if (initial) $tbody.append(renderTr(hook));
// else nextHooks.push(renderTr(hook));
// } else {
// $('#' + hook.id).not(':visible').fadeIn(animation);
// $tbody.children('.' + hook.id).show();
// }
// }
// if (hook.action != 'cancel') seen.push(hash);
// });
// $.makeArray($canvas.find('>span.plot')).map(function(o) {
// return o.getAttribute('data-id');
// }).concat(
// $.makeArray($tbody.children()).map(function(o) {
// return o.getAttribute('data-id');
// })).forEach(function(id) {
// if (!$.fp.find(hookPool, function(x) {
// return x.id == id;
// })) disableHook(id);
// });
// $wrap
// .find('a.filter')
// .toggleClass('on', hidden > 0)
// .find('span.number').text('(' + hidden + ')');
// $('body').trigger('lichess.content_loaded');
// }
// function renderPlot(hook) {
// var bottom = Math.max(0, ratingY(hook.rating) - 7);
// var left = Math.max(0, clockX(hook.time) - 4);
// var klass = [
// 'plot',
// hook.mode == "Rated" ? 'rated' : 'casual',
// hook.action == 'cancel' ? 'cancel' : '',
// hook.variant != 'STD' ? 'variant' : ''
// ].join(' ');
// var $plot = $('<span id="' + hook.id + '" class="' + klass + '" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>');
// return $plot.data('hook', hook).powerTip({
// fadeInTime: 0,
// fadeOutTime: 0,
// placement: hook.rating > 2200 ? 'se' : 'ne',
// mouseOnToPopup: true,
// closeDelay: 200,
// intentPollInterval: 50,
// popupId: 'hook'
// }).data('powertipjq', $(renderHook(hook)));
// }
// function ratingY(e) {
// function ratingLog(a) {
// return Math.log(a / 150 + 1);
// }
// var rating = Math.max(800, Math.min(2800, e || 1500));
// var ratio;
// if (rating == 1500) {
// ratio = 0.25;
// } else if (rating > 1500) {
// ratio = 0.25 + (ratingLog(rating - 1500) / ratingLog(1300)) * 3 / 4;
// } else {
// ratio = 0.25 - (ratingLog(1500 - rating) / ratingLog(500)) / 4;
// }
// return Math.round(ratio * 489);
// }
// function clockX(dur) {
// function durLog(a) {
// return Math.log((a - 30) / 200 + 1);
// }
// var max = 2000;
// return Math.round(durLog(Math.min(max, dur || max)) / durLog(max) * 489);
// }
// function renderHook(hook) {
// var html = '';
// if (hook.rating) {
// html += '<a class="opponent" href="/@/' + hook.username + '">' + hook.username.substr(0, 14) + '</a>';
// html += '<span class="rating">' + hook.rating + '</span>';
// } else {
// html += '<span class="opponent anon">Anonymous</span>';
// }
// html += '<span class="clock">' + hook.clock + '</span>';
// html += '<span class="mode">' +
// '<span class="varicon" data-icon="' + hook.perf.icon + '"></span>' + $.trans(hook.mode) + '</span>';
// html += '<span class="is is2 color-icon ' + (hook.color || "random") + '"></span>';
// return html;
// }
// function renderTr(hook) {
// var title = (hook.action == "join") ? $.trans('Join the game') + ' - ' + hook.perf.name : $.trans('cancel');
// return '<tr title="' + title + '" data-id="' + hook.id + '" class="' + hook.id + ' ' + hook.action + '">' + [
// ['', '<span class="is is2 color-icon ' + (hook.color || "random") + '"></span>'],
// [hook.username, (hook.rating ? '<a href="/@/' + hook.username + '" class="ulink">' + hook.username + '</a>' : 'Anonymous')],
// [hook.rating || 0, hook.rating ? hook.rating : ''],
// [hook.time, hook.clock],
// [hook.mode,
// '<span class="varicon" data-icon="' + hook.perf.icon + '"></span>' +
// $.trans(hook.mode)
// ]
// ].map(function(x) {
// return '<td data-sort-value="' + x[0] + '">' + x[1] + '</td>';
// }).join('') + '</tr>';
// }
// $('#hooks_chart').append(
// [1000, 1200, 1400, 1500, 1600, 1800, 2000, 2200, 2400].map(function(v) {
// var b = ratingY(v);
// return '<span class="y label" style="bottom:' + (b + 5) + 'px">' + v + '</span>' +
// '<div class="grid horiz" style="height:' + (b + 4) + 'px"></div>';
// }).join('') + [1, 2, 3, 5, 7, 10, 15, 20, 30].map(function(v) {
// var l = clockX(v * 60);
// return '<span class="x label" style="left:' + l + 'px">' + v + '</span>' +
// '<div class="grid vert" style="width:' + (l + 7) + 'px"></div>';
// }).join(''));
// $tbody.on('click', 'a.ulink', function(e) {
// e.stopPropagation();
// });
// $tbody.on('click', 'td:not(.disabled)', function() {
// $('#' + $(this).parent().data('id')).click();
// });
// $canvas.on('click', '>span.plot:not(.hiding)', function() {
// var data = $(this).data('hook');
// if (data.action != 'join' || confirmVariant(data.variant)) {
// lichess.socket.send(data.action, data.id);
// }
// });
});
///////////////////
// tournament.js //
///////////////////

View file

@ -42,6 +42,7 @@ div.lobby_and_ground {
display: inline-block;
text-decoration: none;
padding: 0px 8px;
margin-right: 3px;
border: 1px solid #ccc;
background: #dadada;
transition: 0.13s;
@ -59,10 +60,7 @@ div.lobby_and_ground {
border-top: 2px solid #d85000;
}
#hooks_wrap > div.tabs .unread {
display: none;
}
#hooks_wrap > div.tabs a.hilight .unread {
display: inline;
margin-left: 3px;
}
#real_time .toggle {
cursor: pointer;
@ -149,15 +147,12 @@ div.lobby_and_ground {
margin-left: 3px;
}
#hooks_wrap .table_wrap {
text-shadow: 0px 1px 0px #FFF;
width: 512px;
max-height: 512px;
min-height: 200px;
min-height: 78px;
overflow: hidden;
}
#hooks_wrap .table_wrap table {
width: 512px;
text-shadow: 0px 1px 0px #FFF;
}
#hooks_wrap .table_wrap thead th {
padding: 14px 12px;
font-weight: lighter;
@ -166,16 +161,6 @@ div.lobby_and_ground {
#hooks_list thead th {
cursor: pointer;
}
#hooks_wrap .table_wrap th.reload span {
display: block;
cursor: pointer;
margin-left: 2px;
opacity: 0.5;
transition: 0.13s;
}
#hooks_wrap .table_wrap th.reload:hover span {
opacity: 0.8;
}
#hooks_wrap .table_wrap th.sorting-asc,
#hooks_wrap .table_wrap th.sorting-desc {
font-weight: normal;

View file

@ -143,8 +143,8 @@ module.exports = function(cfg, router, i18n, onChange) {
this.router = router;
this.trans = function() {
var str = i18n[arguments[0]]
this.trans = function(key) {
var str = i18n[key] || key;
Array.prototype.slice.call(arguments, 1).forEach(function(arg) {
str = str.replace('%s', arg);
});

View file

@ -1,24 +1,40 @@
var m = require('mithril');
var partial = chessground.util.partial;
var socket = require('./socket');
var variant = require('./variant');
var lobby = require('./lobby');
module.exports = function(opts) {
module.exports = function(env) {
this.data = data({}, opts.data);
this.data = env.data;
lobby.sortHooks(this.data.hooks);
this.socket = new socket(env.socketSend, this);
var fixTab = function(tab) {
if (['real_time', 'seeks', 'now_playing'].indexOf(tab) === -1) tab = 'real_time';
if (tab === 'now_playing' && this.data.nowPlaying.length === 0) tab = 'real_time';
return tab;
}.bind(this);
this.setTab = function(tab) {
this.vm.tab = fixTab(tab);
storage.set('lobbytab', this.vm.tab);
}.bind(this);
this.vm = {
tab: fixTab(storage.get('lobbytab'))
};
this.socket = new socket(opts.socketSend, this);
this.clickHook = function(hook) {
if (hook.action === 'cancel' || variant.confirm(data.variant)) socket.send(hook.action, hook.id);
}.bind(this);
this.router = opts.routes;
this.trans = function() {
var str = opts.i18n[arguments[0]]
this.router = env.routes;
this.trans = function(key) {
var str = env.i18n[key] || key;
Array.prototype.slice.call(arguments, 1).forEach(function(arg) {
str = str.replace('%s', arg);
});
return str;
};
init(this);
};

View file

@ -1,6 +1,6 @@
module.exports = function(messages) {
return function(key) {
var str = messages[key] || untranslated[key] || key;
var str = messages[key] || key;
Array.prototype.slice.call(arguments, 1).forEach(function(arg) {
str = str.replace('%s', arg);
});

9
ui/lobby/src/lobby.js Normal file
View file

@ -0,0 +1,9 @@
function hookOrder(a, b) {
return a.rating > b.rating ? -1 : 1;
};
module.exports = {
sortHooks: function(hooks) {
hooks.sort(hookOrder);
}
};

View file

@ -1,16 +1,20 @@
var m = require('mithril');
var realTime = require('./module/realTime');
var ctrl = require('./ctrl');
var view = require('./view/main');
module.exports = function(element, env) {
module.exports = function(element, opts) {
//setup routes to start w/ the `#` symbol
m.route.mode = 'hash';
var controller = new ctrl(opts);
//define a route
m.route(element, '/', {
'/': realTime(env)
m.module(element, {
controller: function () { return controller; },
view: view
});
return {
socketReceive: controller.socket.receive
};
};
// lol, that's for the rest of lichess to access mithril

View file

@ -1,28 +0,0 @@
var m = require('mithril');
var i18n = require('../i18n');
module.exports = function(env) {
return {
controller: function() {
this.data = env.data;
this.trans = i18n(env.i18n);
this.router = env.routes;
},
view: function(ctrl) {
var myTurnPovsNb = ctrl.data.nowPlaying.povs.count(function(p) {
return p.isMyTurn;
});
return [
m('div.tabs', [
m('a', ctrl.trans('realTime')),
m('a', ctrl.trans('correspondence')),
m('a', [
ctrl.trans('nbGamesInPlay', ctrl.data.nowPlaying.povs.length),
myTurnPovsNb.length > 0 ? m('span.unread', myTurnPovsNb.length) : null
])
])
];
}
};
};

23
ui/lobby/src/variant.js Normal file
View file

@ -0,0 +1,23 @@
var variantConfirms = {
'960': "This is a Chess960 game!\n\nThe starting position of the pieces on the players' home ranks is randomized.\nRead more: http://wikipedia.org/wiki/Chess960\n\nDo you want to play Chess960?",
'KotH': "This is a King of the Hill game!\n\nThe game can be won by bringing the king to the center.\nRead more: http://lichess.org/king-of-the-hill",
'3+': "This is a Three-check game!\n\nThe game can be won by checking the opponent 3 times.\nRead more: http://en.wikipedia.org/wiki/Three-check_chess",
"Anti": "This is an antichess chess game!\n\n If you can take a piece, you must. The game can be won by losing all your pieces."
};
function storageKey(key) {
return 'lichess.variant.' + key;
}
module.exports = {
confirm: function(variant) {
return Object.keys(variantConfirms).every(function(key) {
var v = variantConfirms[key]
if (variant === key && !storage.get(storageKey(key))) {
var c = confirm(v);
if (c) storage.set(storageKey(key), 1);
return c;
} else return true;
})
}
};

View file

@ -1,8 +0,0 @@
var m = require('mithril');
module.exports = function(ctrl) {
return [
m('div#hooks_wrap'),
m('div#start_buttons')
];
};

17
ui/lobby/src/view/main.js Normal file
View file

@ -0,0 +1,17 @@
var m = require('mithril');
var renderTabs = require('./tabs');
var renderRealTime = require('./realTime');
module.exports = function(ctrl) {
var body;
switch (ctrl.vm.tab) {
case 'real_time':
body = renderRealTime(ctrl);
break;
}
return [
m('div.tabs', renderTabs(ctrl)),
body
];
};

View file

@ -0,0 +1,50 @@
var m = require('mithril');
var util = require('chessground').util;
function tds(bits) {
return bits.map(function(bit) {
return {
tag: 'td',
children: [bit]
};
});
}
function renderHook(ctrl, hook) {
var title = (hook.action === 'join') ? ctrl.trans('joinTheGame') + ' - ' + hook.perf.name : ctrl.trans('cancel');
return m('tr', {
title: (hook.action === 'join') ? ctrl.trans('joinTheGame') + ' - ' + hook.perf.name : ctrl.trans('cancel'),
'data-id': hook.id,
class: hook.action,
onclick: util.partial(ctrl.clickHook, hook)
}, tds([
m('span', {
class: 'is is2 color-icon ' + (hook.color || 'random')
}), (hook.rating ? m('a', {
href: '/@/' + hook.username
}, hook.username) : 'Anonymous'),
hook.rating ? hook.rating : '',
hook.clock, [m('span', {
class: 'varicon',
'data-icon': hook.perf.icon
}), ctrl.trans(hook.mode === 1 ? 'rated' : 'casual')]
]));
};
module.exports = function(ctrl) {
return m('table.table_wrap', [
m('thead',
m('tr', [
m('th', m('span', {
'data-hint': ctrl.trans('graph'),
class: 'toggle hint--bottom'
}, m('span.chart[data-icon=9]'))),
m('th', ctrl.trans('player')),
m('th', 'Rating'),
m('th', ctrl.trans('time')),
m('th', ctrl.trans('mode'))
])
),
m('tbody', ctrl.data.hooks.map(util.partial(renderHook, ctrl)))
]);
};

26
ui/lobby/src/view/tabs.js Normal file
View file

@ -0,0 +1,26 @@
var m = require('mithril');
var util = require('chessground').util;
function tab(ctrl, key, active, content) {
var attrs = {
onclick: util.partial(ctrl.setTab, key)
}
if (key === active) attrs.class = 'active';
return m('a', attrs, content);
}
module.exports = function(ctrl) {
var nowPlayingNb = ctrl.data.nowPlaying.length;
var myTurnPovsNb = ctrl.data.nowPlaying.filter(function(p) {
return p.isMyTurn;
}).length;
var active = ctrl.vm.tab;
return [
tab(ctrl, 'real_time', active, ctrl.trans('realTime')),
tab(ctrl, 'seeks', active, ctrl.trans('correspondence')),
nowPlayingNb > 0 ? tab(ctrl, 'now_playing', active, [
ctrl.trans('nbGamesInPlay', nowPlayingNb),
myTurnPovsNb > 0 ? m('span.unread', myTurnPovsNb) : null
]) : null
];
};

View file

@ -153,8 +153,8 @@ module.exports = function(cfg, router, i18n) {
this.router = router;
this.trans = function() {
var str = i18n[arguments[0]]
this.trans = function(key) {
var str = i18n[key] || key;
Array.prototype.slice.call(arguments, 1).forEach(function(arg) {
str = str.replace('%s', arg);
});

View file

@ -118,8 +118,8 @@ module.exports = function(opts) {
this.router = opts.routes;
this.trans = function() {
var str = opts.i18n[arguments[0]]
this.trans = function(key) {
var str = opts.i18n[key] || key;
Array.prototype.slice.call(arguments, 1).forEach(function(arg) {
str = str.replace('%s', arg);
});