$(document).ready(function(){
//add buttons
$('.chatLog').append(`<div class="btn btn-success btn-toggle-chat-events">Game Events</div>`);
$('.chatLog').eq(0).css('max-height', '200px');
$('.chatLog').eq(1).css('max-height', '600px');
var events = [];
$('.chatLog tr').each(function(){
var isLog;
if ($(this).find('td').eq(1).find('span').length){
isLog = $(this).find('td').eq(1).find('span').html() ? false : true;
}else{
isLog = $(this).find('td').eq(1).html() ? false : true;
}
var t = $(this).find('td').eq(0).html().split(':');
var time = (+t[0]) * 60 + (+t[1]);
$(this).attr({
'data-line': $(this).index() + 1,
'data-log': isLog,
'data-time': time
});
if (isLog){
var text = $(this).find('td').eq(3).text();
if (text[0] == "["){
var _o = 0;
var _c = 0;
var _n = "";
for(i = 0; i < text.length; i++){
_o += text[i] == "[" ? 1 : 0;
_c += text[i] == "]" ? 1 : 0;
_n += text[i];
if (_o == _c){
break;
}
}
text = text.replace(_n, "");
var found = $.grep(events, (e) => {
return (text == e.text && time < e.time + 2) ? true : false;
})
if(found.length){
$(this).remove();
}else{
$(this).find('td').eq(3).text(text);
events.push({
text: text,
time: time
});
}
}
}
})
$('.btn-toggle-chat-events').on('click', function(){
$(this).toggleClass('off');
$(this).closest('.chatLog').find('tr[data-log="true"]').toggle();
});
})
.chatLog{
position: relative;
}
.btn-toggle-chat-events{
position: sticky;
bottom: 10px;
left: calc(100% - 100px);
font-size: 10px;
word-break: break-word;
width: 75px;
background: #471;
color: #000;
padding: 6px 6px;
border-radius: 3px;
box-shadow: inset 0px 0px 0px 1px #FFF2;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.btn-toggle-chat-events:after{
content: "ON";
color: #FFF;
font-size: 14px;
font-weight: bold;
display: inline-block;
width: 100%;
}
.btn-toggle-chat-events.off{
background: #900;
}
.btn-toggle-chat-events.off:after{
content: "OFF"
}
.btn-toggle-chat-events:active{
transform: scale(0.96);
}
Chat Toggle to select what users to see chat for. Ex: when you want to fast see the conversation of only 2 players. You simply hide all the other messages.