connect analysis UI to round websocket
Thibault Duplessis
parent
272e34a7b7
commit
3025977dd7
|
|
@ -16,6 +16,7 @@ object Analyse extends LilaController {
|
|||
def openingExplorer = chess.OpeningExplorer
|
||||
def bookmarkApi = env.bookmark.api
|
||||
def roundMessenger = env.round.messenger
|
||||
def roundSocket = env.round.socket
|
||||
|
||||
def replay(id: String, color: String) = Open { implicit ctx ⇒
|
||||
IOptionIOk(gameRepo.pov(id, color)) { pov ⇒
|
||||
|
|
@ -26,7 +27,8 @@ object Analyse extends LilaController {
|
|||
pov,
|
||||
Html(roomHtml),
|
||||
bookmarkers,
|
||||
openingExplorer openingOf pov.game.pgn)
|
||||
openingExplorer openingOf pov.game.pgn,
|
||||
roundSocket blockingVersion pov.gameId)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@(pov: Pov, roomHtml: Html, bookmarkers: List[User], opening: Option[chess.OpeningExplorer.Opening])(implicit ctx: Context)
|
||||
@(pov: Pov, roomHtml: Html, bookmarkers: List[User], opening: Option[chess.OpeningExplorer.Opening], version: Int)(implicit ctx: Context)
|
||||
|
||||
@import pov._
|
||||
|
||||
|
|
@ -41,7 +41,11 @@ moreCss = moreCss,
|
|||
moreJs = moreJs) {
|
||||
<div class="analyse clearfix">
|
||||
<div class="board_wrap">
|
||||
<div id="GameBoard" class="colorable_board @color.fold("", " flip")"></div>
|
||||
<div
|
||||
id="GameBoard"
|
||||
data-version="@version"
|
||||
data-socket-url="@routes.Round.websocketWatcher(gameId, color.name)"
|
||||
class="colorable_board @color.fold("", " flip")"></div>
|
||||
<div id="GameButtons"></div>
|
||||
</div>
|
||||
<div class="moves_wrap">
|
||||
|
|
|
|||
|
|
@ -1,28 +1,47 @@
|
|||
$(function() {
|
||||
SetImagePath("/assets/vendor/pgn4web/lichess/64"); // use "" path if images are in the same folder as this javascript file
|
||||
SetImageType("png");
|
||||
SetPieceFont("alpha");
|
||||
var $game = $("#GameBoard");
|
||||
var $chat = $("div.lichess_chat");
|
||||
var $nbViewers = $chat.find('.nb_viewers');
|
||||
$chat.chat();
|
||||
|
||||
lichess.socket = new $.websocket(
|
||||
lichess.socketUrl + $game.data("socket-url"),
|
||||
parseInt($game.data("version")),
|
||||
$.extend(true, lichess.socketDefaults, {
|
||||
options: {
|
||||
name: "analyse",
|
||||
ignoreUnknownMessages: true
|
||||
},
|
||||
events: {
|
||||
message: function(event) {
|
||||
$chat.chat("append", event);
|
||||
},
|
||||
crowd: function(event) {
|
||||
$nbViewers.html($nbViewers.html().replace(/(\d+|-)/, event.watchers)).toggle(event.watchers > 0);
|
||||
}
|
||||
}}));
|
||||
});
|
||||
|
||||
function customFunctionOnPgnGameLoad() {
|
||||
console.debug($('#ShowPgnText'));
|
||||
//var $text = $('#ShowPgnText');
|
||||
//var html = '<table><tbody><tr>';
|
||||
//$text.find('span.move').remove();
|
||||
//$text.find('>span').each(function(it) {
|
||||
//if (0 == it%2) {
|
||||
//html += '</tr><tr><th>' + (it/2+1) + '.</th>';
|
||||
//}
|
||||
//html += '<td>' + this.innerHTML + '</td>';
|
||||
//if (0 == it%2) {
|
||||
//html += '</tr><tr><th>' + (it/2+1) + '.</th>';
|
||||
//}
|
||||
//html += '<td>' + this.innerHTML + '</td>';
|
||||
//});
|
||||
//html += '</tr></tbody></table>';
|
||||
//$text.html(html).find('tr:empty').remove();
|
||||
|
||||
//$('div.lichess_goodies a.rotate_board').click(function() {
|
||||
//$('#GameBoard').toggleClass('flip');
|
||||
//$('#player_links div:first').appendTo($('#player_links'));
|
||||
//redrawBoardMarks();
|
||||
//return false;
|
||||
//$('#GameBoard').toggleClass('flip');
|
||||
//$('#player_links div:first').appendTo($('#player_links'));
|
||||
//redrawBoardMarks();
|
||||
//return false;
|
||||
//});
|
||||
redrawBoardMarks();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@ $.widget("lichess.game", {
|
|||
self.$board = self.element.find("div.lichess_board");
|
||||
self.$table = self.element.find("div.lichess_table_wrap");
|
||||
self.$tableInner = self.$table.find("div.table_inner");
|
||||
self.$chat = $("div.lichess_chat");
|
||||
self.$chatMsgs = self.$chat.find('.lichess_messages');
|
||||
self.$nbViewers = $('.nb_viewers');
|
||||
self.$chat = $("div.lichess_chat").orNot();
|
||||
self.$nbViewers = $chat.find('.nb_viewers');
|
||||
self.initialTitle = document.title;
|
||||
self.hasMovedOnce = false;
|
||||
self.premove = null;
|
||||
|
|
@ -18,9 +17,8 @@ $.widget("lichess.game", {
|
|||
if (self.options.game.started) {
|
||||
self.indicateTurn();
|
||||
self.initSquaresAndPieces();
|
||||
self.initChat();
|
||||
self.initTable();
|
||||
self.initClocks();
|
||||
if (self.$chat) self.$chat.chat();
|
||||
if (self.isMyTurn() && self.options.game.turns == 0) {
|
||||
self.element.one('lichess.audio_ready', function() {
|
||||
$.playSound();
|
||||
|
|
@ -60,7 +58,7 @@ $.widget("lichess.game", {
|
|||
events: {
|
||||
message: function(event) {
|
||||
self.element.queue(function() {
|
||||
self.appendToChat(event);
|
||||
if (self.$chat) self.$chat.chat("append", event);
|
||||
self.element.dequeue();
|
||||
});
|
||||
},
|
||||
|
|
@ -475,54 +473,6 @@ $.widget("lichess.game", {
|
|||
* End of code for touch screens
|
||||
*/
|
||||
},
|
||||
initChat: function() {
|
||||
var self = this;
|
||||
if (!self.$chat.length) {
|
||||
return;
|
||||
}
|
||||
if (self.$chat.hasClass("spectator")) {
|
||||
var headerHeight = self.$chat.parent().height();
|
||||
self.$chat.css("top", headerHeight + 13);
|
||||
self.$chatMsgs.css("height", 457 - headerHeight);
|
||||
}
|
||||
self.$chatMsgs.find('>li').each(function() { $(this).html(urlToLink($(this).html())); });
|
||||
self.$chatMsgs.scrollable();
|
||||
var $form = self.$chat.find('form');
|
||||
self.$chatMsgs[0].scrollTop = 9999999;
|
||||
var $input = self.$chat.find('input.lichess_say').one("focus", function() {
|
||||
$input.val('').removeClass('lichess_hint');
|
||||
});
|
||||
|
||||
// send a message
|
||||
$form.submit(function() {
|
||||
var text = $.trim($input.val());
|
||||
if (!text) return false;
|
||||
if (text.length > 140) {
|
||||
alert('Max length: 140 chars. ' + text.length + ' chars used.');
|
||||
return false;
|
||||
}
|
||||
$input.val('');
|
||||
lichess.socket.send('talk', text);
|
||||
return false;
|
||||
});
|
||||
|
||||
self.$chat.find('a.send').click(function() {
|
||||
$input.trigger('click');
|
||||
$form.submit();
|
||||
});
|
||||
|
||||
// toggle the chat
|
||||
self.$chat.find('input.toggle_chat').change(function() {
|
||||
self.$chat.toggleClass('hidden', ! $(this).attr('checked'));
|
||||
}).trigger('change');
|
||||
},
|
||||
appendToChat: function(msg) {
|
||||
if (this.$chat.length) {
|
||||
this.$chatMsgs.append(urlToLink(msg))[0];
|
||||
$('body').trigger('lichess.content_loaded');
|
||||
this.$chatMsgs[0].scrollTop = 9999999;
|
||||
}
|
||||
},
|
||||
reloadTable: function(callback) {
|
||||
var self = this;
|
||||
self.get(self.options.tableUrl, {
|
||||
|
|
@ -636,7 +586,56 @@ $.widget("lichess.game", {
|
|||
}
|
||||
});
|
||||
|
||||
// clock
|
||||
$.widget("lichess.chat", {
|
||||
_create: function() {
|
||||
var self = this;
|
||||
self.$msgs = self.element.find('.lichess_messages');
|
||||
if (self.element.hasClass("spectator")) {
|
||||
var headerHeight = self.element.parent().height();
|
||||
self.element.css("top", headerHeight + 13);
|
||||
self.$msgs.css("height", 457 - headerHeight);
|
||||
}
|
||||
self.$msgs.find('>li').each(function() {
|
||||
$(this).html(urlToLink($(this).html()));
|
||||
});
|
||||
self.$msgs.scrollable();
|
||||
var $form = self.element.find('form');
|
||||
self.$msgs[0].scrollTop = 9999999;
|
||||
var $input = self.element.find('input.lichess_say').one("focus", function() {
|
||||
$input.val('').removeClass('lichess_hint');
|
||||
});
|
||||
|
||||
// send a message
|
||||
$form.submit(function() {
|
||||
var text = $.trim($input.val());
|
||||
if (!text) return false;
|
||||
if (text.length > 140) {
|
||||
alert('Max length: 140 chars. ' + text.length + ' chars used.');
|
||||
return false;
|
||||
}
|
||||
$input.val('');
|
||||
lichess.socket.send('talk', text);
|
||||
return false;
|
||||
});
|
||||
|
||||
self.element.find('a.send').click(function() {
|
||||
$input.trigger('click');
|
||||
$form.submit();
|
||||
});
|
||||
|
||||
// toggle the chat
|
||||
self.element.find('input.toggle_chat').change(function() {
|
||||
self.element.toggleClass('hidden', ! $(this).attr('checked'));
|
||||
}).trigger('change');
|
||||
},
|
||||
append: function(msg) {
|
||||
var self = this;
|
||||
self.$msgs.append(urlToLink(msg))[0];
|
||||
$('body').trigger('lichess.content_loaded');
|
||||
self.$msgs[0].scrollTop = 9999999;
|
||||
}
|
||||
});
|
||||
|
||||
$.widget("lichess.clock", {
|
||||
_create: function() {
|
||||
var self = this;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ $.websocket = function(url, version, settings) {
|
|||
offlineTag: false, // jQuery object showing connection error
|
||||
pingMaxLag: 5000, // time to wait for pong before reseting the connection
|
||||
pingDelay: 1500, // time between pong and ping
|
||||
lagTag: false // jQuery object showing ping lag
|
||||
lagTag: false, // jQuery object showing ping lag
|
||||
ignoreUnknownMessages: false
|
||||
}
|
||||
};
|
||||
$.extend(true, self.settings, settings);
|
||||
|
|
@ -127,7 +128,9 @@ $.websocket.prototype = {
|
|||
if (m.t) {
|
||||
var h = self.settings.events[m.t];
|
||||
if ($.isFunction(h)) h(m.d || null);
|
||||
else self.debug(m.t + " not supported");
|
||||
else if(!self.options.ignoreUnknownMessages) {
|
||||
self.debug(m.t + " not supported");
|
||||
}
|
||||
}
|
||||
},
|
||||
now: function() { return new Date().getTime(); },
|
||||
|
|
|
|||
Loading…
Reference in New Issue