Skip to content

Commit

Permalink
Support HTML rooms
Browse files Browse the repository at this point in the history 
This adds support for a new kind of roomtab that just contains plain
HTML.

The current use-case is modlog, but it could be used for a number of
things where an article would be useful.
  • Loading branch information
@Zarel
Zarel committed Nov 24, 2017
1 parent 8ce74ba commit e3f96c9
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 20 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ module.exports = {
"ChatHistory": false, "Topbar": false, "UserList": false,

// Rooms
"Room": false, "BattleRoom": false, "ChatRoom": false, "ConsoleRoom": false, "LadderRoom": false, "MainMenuRoom": false, "RoomsRoom": false, "BattlesRoom": false, "TeambuilderRoom": false,
"Room": false, "BattleRoom": false, "ChatRoom": false, "ConsoleRoom": false, "HTMLRoom": false, "LadderRoom": false, "MainMenuRoom": false, "RoomsRoom": false, "BattlesRoom": false, "TeambuilderRoom": false,

// Tons of popups
"Popup": false, "ForfeitPopup": false, "BracketPopup": false, "LoginPasswordPopup": false, "UserPopup": false, "TeamPopup": false,
Expand Down
57 changes: 56 additions & 1 deletion js/client-ladder.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,61 @@
(function ($) {

var LadderRoom = this.LadderRoom = this.Room.extend({
var HTMLRoom = this.HTMLRoom = this.Room.extend({
type: 'html',
title: 'Page',
initialize: function () {
this.$el.addClass('ps-room-light').addClass('scrollable');
this.$el.html('<div class="pad"><p>Page unavailable</p></div>');
},
send: function (data) {
// HTML rooms don't actually exist server side, so send globally
app.send(data);
},
receive: function (data) {
this.add(data);
},
add: function (log) {
if (typeof log === 'string') log = log.split('\n');
for (var i = 0; i < log.length; i++) {
this.addRow(log[i]);
}
},
addRow: function (line) {
var name, name2, room, action, silent, oldid;
if (!line || typeof line !== 'string') return;
if (line.charAt(0) !== '|') line = '||' + line;
var pipeIndex = line.indexOf('|', 1);
var row;
if (pipeIndex >= 0) {
row = [line.slice(1, pipeIndex), line.slice(pipeIndex + 1)];
} else {
row = [line.slice(1), ''];
}
switch (row[0]) {
case 'init':
// ignore (handled elsewhere)
break;

case 'title':
this.title = row[1];
app.roomTitleChanged(this);
app.topbar.updateTabbar();
break;

case 'pagehtml':
this.$el.html(Tools.sanitizeHTML(row[1]));
break;

case 'selectorhtml':
var pipeIndex2 = row[1].indexOf('|');
if (pipeIndex2 < 0) return;
this.$(row[1].slice(0, pipeIndex2)).html(Tools.sanitizeHTML(row[1].slice(pipeIndex2 + 1)));
break;
}
}
});

var LadderRoom = this.LadderRoom = HTMLRoom.extend({
type: 'ladder',
title: 'Ladder',
initialize: function () {
Expand Down
42 changes: 25 additions & 17 deletions js/client-topbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,9 @@
}
if (title) buf += ' title="' + Tools.escapeHTML(title) + '"';
}
switch (id) {
switch (room ? room.type : id) {
case '':
case 'mainmenu':
return buf + '><i class="fa fa-home"></i> <span>Home</span></a></li>';
case 'teambuilder':
return buf + '><i class="fa fa-pencil-square-o"></i> <span>Teambuilder</span></a><button class="closebutton" name="closeRoom" value="' + 'teambuilder" aria-label="Close"><i class="fa fa-times-circle"></i></button></li>';
Expand All @@ -87,25 +88,32 @@
return buf + '><i class="fa fa-caret-square-o-right"></i> <span>Battles</span></a><button class="closebutton" name="closeRoom" value="' + 'battles" aria-label="Close"><i class="fa fa-times-circle"></i></button></li>';
case 'rooms':
return buf + ' aria-label="Join chatroom"><i class="fa fa-plus" style="margin:7px auto -6px auto"></i> <span>&nbsp;</span></a></li>';
case 'battle':
var name = Tools.escapeHTML(room.title);
var formatid = id.substr(7).split('-')[0];
if (!name) {
var p1 = (room.battle && room.battle.p1 && room.battle.p1.name) || '';
var p2 = (room.battle && room.battle.p2 && room.battle.p2.name) || '';
if (p1 && p2) {
name = '' + Tools.escapeHTML(p1) + ' v. ' + Tools.escapeHTML(p2);
} else if (p1 || p2) {
name = '' + Tools.escapeHTML(p1) + Tools.escapeHTML(p2);
} else {
name = '(empty room)';
}
}
return buf + ' draggable="true"><i class="text">' + Tools.escapeFormat(formatid) + '</i><span>' + name + '</span></a><button class="closebutton" name="closeRoom" value="' + id + '" aria-label="Close"><i class="fa fa-times-circle"></i></a></li>';
case 'chat':
return buf + ' draggable="true"><i class="fa fa-comment-o"></i> <span>' + (Tools.escapeHTML(room.title) || (id === 'lobby' ? 'Lobby' : id)) + '</span></a><button class="closebutton" name="closeRoom" value="' + id + '" aria-label="Close"><i class="fa fa-times-circle"></i></a></li>';
case 'html':
default:
if (id.substr(0, 7) === 'battle-') {
var name = Tools.escapeHTML(room.title);
var formatid = id.substr(7).split('-')[0];
if (!name) {
var p1 = (room.battle && room.battle.p1 && room.battle.p1.name) || '';
var p2 = (room.battle && room.battle.p2 && room.battle.p2.name) || '';
if (p1 && p2) {
name = '' + Tools.escapeHTML(p1) + ' v. ' + Tools.escapeHTML(p2);
} else if (p1 || p2) {
name = '' + Tools.escapeHTML(p1) + Tools.escapeHTML(p2);
} else {
name = '(empty room)';
}
if (room.title && room.title.charAt(0) === '[') {
var closeBracketIndex = room.title.indexOf(']');
if (closeBracketIndex > 0) {
return buf + ' draggable="true"><i class="text">' + Tools.escapeFormat(room.title.slice(1, closeBracketIndex)) + '</i><span>' + Tools.escapeHTML(room.title.slice(closeBracketIndex + 1)) + '</span></a><button class="closebutton" name="closeRoom" value="' + id + '" aria-label="Close"><i class="fa fa-times-circle"></i></a></li>';
}
return buf + ' draggable="true"><i class="text">' + Tools.escapeFormat(formatid) + '</i><span>' + name + '</span></a><button class="closebutton" name="closeRoom" value="' + id + '" aria-label="Close"><i class="fa fa-times-circle"></i></a></li>';
} else {
return buf + ' draggable="true"><i class="fa fa-comment-o"></i> <span>' + (Tools.escapeHTML(room.title) || (id === 'lobby' ? 'Lobby' : id)) + '</span></a><button class="closebutton" name="closeRoom" value="' + id + '" aria-label="Close"><i class="fa fa-times-circle"></i></a></li>';
}
return buf + ' draggable="true"><i class="fa fa-file-text-o"></i> <span>' + (Tools.escapeHTML(room.title) || id) + '</span></a><button class="closebutton" name="closeRoom" value="' + id + '" aria-label="Close"><i class="fa fa-times-circle"></i></a></li>';
}
},
updateTabbar: function () {
Expand Down
5 changes: 4 additions & 1 deletion js/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1350,6 +1350,7 @@
'constructor': ChatRoom
};
var typeTable = {
'html': HTMLRoom,
'battle': BattleRoom,
'chat': ChatRoom
};
Expand All @@ -1362,8 +1363,10 @@

// otherwise, infer the room type
if (!type) {
if (id.substr(0, 7) === 'battle-') {
if (id.slice(0, 7) === 'battle-') {
type = BattleRoom;
} else if (id.slice(0, 5) === 'view-') {
type = HTMLRoom;
} else {
type = ChatRoom;
}
Expand Down

0 comments on commit e3f96c9

Please sign in to comment.