path: root/pages/chat.php

<?php
htmlHeader(
	array('stats', 'chat'), 'Chat', 
	'Chat for Pathery.com', 
	array('scores', 'dateformat')
);
?>

<?php
echo soundManager2();
topbar($headerLinks);

if (!$accepted) {
	echo "<center>Please <a href='javascript:showSignin();'>login</a> to chat!</center>";
}
?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

var lastID = 1;
const chatTimerDelayUpper = 9000;
const chatTimerDelayLower = 2000;
const chatTimerDelayDefault = 5000;
const chatTimerDelayWindowHidden = 90000;
var chatTimerDelay = chatTimerDelayDefault;
var isChatWindowVisible = true;
var skipNextGetChat = false;
var chatBuffer = new Array();

getChatTimer();
function getChatTimer() {
	setTimeout("getChatTimer()", chatTimerDelay);
	if (isChatWindowVisible)
		chatTimerDelay = Math.min(chatTimerDelay + 300, chatTimerDelayUpper);
	if (skipNextGetChat) {
		skipNextGetChat = false;
		return;
	}
	getChat();
	//addChatMessage("Debug", "Chat timer called!");
}

var firstGetChat = true;
function getChatDone(data) {
	var newChats = false;

	////console.log('datalength', data.length);
	
	if (data.length < 3 || data == 'false')
		return;
		
	//console.log("START BUILD");
	
	//console.log("JSON TO PARSE", data);
	
	json = jQuery.parseJSON(data);
	
	//console.log("JSON PREPED");
	
	$.each(json, function(key, chat) {
	
		var postDate = new Date();
		postDate.setTime(postDate.getTime() + chat.secondsSince * 1000);
		
		if (!chat.message) return;
		
		var isSelf = (chat.userID == userObj.ID);
		var isServer = false;
		
		if (chat.userID == null || chat.userID <= 0) {
			isServer = true;
			chat.displayName = 'SERVER'
		}
		
		//Message is legitmently new or a server message?
		if (chat.ID > lastID || typeof(chat.ID) == 'undefined') {
			addChatMessage(chat.displayName, chat.message, postDate, isSelf, isServer, chat.wallColor, chat.wallEmblem,
				chat.wallOrientation, chat.userID, chat.displayColor, chat.ID);
			newChats = true;
		}
		
		//console.log("INSIDE BUILD START"); 
		if (chat.ID > 0)
			lastID = chat.ID;
	});
	
	//console.log("BUILD DONE");
	
	if (newChats && !firstGetChat) {
		if (isChatWindowVisible)
			chatTimerDelay = chatTimerDelayLower;

		if (chatIsMuted == 'false') {
			soundManager.setVolume('charm', 20);
			soundManager.setPan('charm', -60)
			soundManager.setPosition('charm',150);
			soundManager.play('charm');
		}
	}
	
	firstGetChat = false;
}

function addChatMessage(displayName, message, postDate, isSelf, isServer, wallColor, wallEmblem, wallOrientation, userID, displayColor, chatID)
{
	if(!postDate)
		postDate = new Date();
	var timestamp = postDate.format("hh:MM:ss");
	var timestampDetails = postDate.format("ddd h:MM TT");

	var strClass = '';
	if (isSelf)
		strClass += ' self';
	if (isServer)
		strClass += ' server';

	var usernameClass = '';
	if (message.indexOf("/me ") == 0) {
		message = message.substring(4);
		usernameClass = ' me';
	}

	var isSpoiler = false;
	if (message.indexOf("/spoiler ") == 0) {
		message = message.substring(9);
		isSpoiler = true;
	}
	
	if (!isSpoiler) {
		document.title = displayName + ': '+ message.substring(0, 20) + ' | Pathery Chat';
	} else {
		document.title = displayName + ': ~Spoiler~ | Pathery Chat';
	}
	
	var p = '';
	p = p+ " <div class='chatColumn1'>";
	p = p+ " 	<span class='chatTimestamp' title='"+timestampDetails+"'>["+timestamp+"]</span>";
	p = p+ "		<div class='grid_td chatBadge' style='float:left; width:35px; height:35px; background:"+wallColor+" url("+linkEmblem(wallEmblem, wallOrientation)+");'>";
	p = p+ "			<div style='background-color:transparent;' class='grid_td_inner grid_td_rocks'>";
	p = p+ "			</div>";
	p = p+ "		</div>";
	p = p+ "	</div>";

	p = p+ " <div class='chatColumn2'>";
	if (userID == null || userID <= 0) {
		p = p+ "<span class='chatUsername"+usernameClass+"'><a href='home'>";
	} else {
		p = p+ "<span class='chatUsername"+usernameClass+"'><a href='achievements?id="+userID+"' style='color:"+displayColor+"'>";
	}
	p = p+ displayName+"</a></span>";

	if (isSpoiler == true) p = p+ "	<span class='chatText spoiler' onclick='spoil(this);'>";
	else p = p+ "	<span class='chatText'>";
	p = p+ chatReplaceAndEncode(message);
	p = p+ "	</span>";
	p = p+ "	</div>";
	
	var chatContainer = $("#chatContainer");
	var isAtBottom = (chatContainer.length == 1 && chatContainer.scrollTop() >= chatContainer[0].scrollHeight - chatContainer.outerHeight() - 1);	

	chatContainer.append('<div class="chatMessage'+strClass+'" id="C_' + chatID + '">' + p + '</div>');
	
	if (isAtBottom || firstGetChat) {
		chatContainer.scrollTop(chatContainer[0].scrollHeight);
	}
}

function chatReplaceAndEncode(chat) {
	chat = htmlEncode(chat);
	chat = chat.replace(/\*\*(\S(.*?\S)?)\*\*/gm, "<b>$1</b>");
	chat = chat.replace(/\~\~(\S(.*?\S)?)\~\~/gm, "<s>$1</s>");
	chat = chat.replace(/\*(\S(.*?\S)?)\*/gm, "<i>$1</i>");
	
	chat = replaceSmileys(chat);
	
	//Surround all URLs with a <a> link
	var URLexp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
	chat = chat.replace(URLexp, "<a href='redirect?to=$1' target='_blank' onclick='return doNothingWhenClickingLinks(this);'>$1</a>");
	
	//Replace # with %23, & with %26, ? with %3F
	chat = chat.replace(/<a href='redirect\?to=(.*?)(#)(.*?)' target='_blank'/ig, "<a href='redirect?to=$1%23$3' target='_blank'");
	chat = chat.replace(/<a href='redirect\?to=(.*?)(&amp;)(.*?)' target='_blank'/ig, "<a href='redirect?to=$1%26$3' target='_blank'");
	chat = chat.replace(/<a href='redirect\?to=(.*?)(\?)(.*?)' target='_blank'/ig, "<a href='redirect?to=$1%3F$3' target='_blank'");
	//Making the bet that not all browsers do the same:
	chat = chat.replace(/<a href='redirect\?to=(.*?)(&)(.*?)' target='_blank'/ig, "<a href='redirect?to=$1%26$3' target='_blank'");

	return chat;
}

function replaceSmileys(chat) {
	chat = chat.replace(/:\)|\(:|=\)/g, '<img title=":)" class="chatSmiley" src="images/smileys/Smiling.png" />');
	chat = chat.replace(/:\(|=\(/g, '<img title=":(" class="chatSmiley" src="images/smileys/Unhappy.png" />');
	chat = chat.replace(/\^\_\^/g, '<img title="^_^" class="chatSmiley" src="images/smileys/Happy_3.png" />');
	chat = chat.replace(/\:d/gi, '<img title=":D" class="chatSmiley" src="images/smileys/Grinning.png" />');
	chat = chat.replace(/\:o/gi, '<img title=":O" class="chatSmiley" src="images/smileys/Gasping.png" />');
	chat = chat.replace(/\:p/gi, '<img title=":P" class="chatSmiley" src="images/smileys/Tongue_Out.png" />');
	chat = chat.replace(/;p/gi, '<img title=":s" class="chatSmiley" src="images/smileys/Tongue_Out_Winking.png" />');
	chat = chat.replace(/\:c/gi, '<img title=":c" class="chatSmiley" src="images/smileys/Childish.png" />');
	chat = chat.replace(/\:s/gi, '<img title=":s" class="chatSmiley" src="images/smileys/Confused.png" />');
	chat = chat.replace(/\&gt;_\&lt;/g, '<img title=">_<" class="chatSmiley" src="images/smileys/Gah.png" />');
	chat = chat.replace(/\$_\$/gi, '<img title="$_$" class="chatSmiley" src="images/smileys/Greedy.png" />');
	chat = chat.replace(/-\.-|-_-/gi, '<img title="-.-" class="chatSmiley" src="images/smileys/Tired.png" />');
	chat = chat.replace(/o\.O|o\_O/g, '<img title="o_O" class="chatSmiley" src="images/smileys/Huh.png" />');
	chat = chat.replace(/O\.o|O\_o/g, '<img title="O_o" class="chatSmiley" src="images/smileys/Huh_2.png" />');
	chat = chat.replace(/O\.O|O\_O/g, '<img title="O_O" class="chatSmiley" src="images/smileys/Madness.png" />');
	chat = chat.replace(/\:-\//g, '<img title="O_O" class="chatSmiley" src="images/smileys/Uncertain.png" />');
	chat = chat.replace(/\(y\)/gi, '<img title="(y)" class="chatSmiley" src="images/smileys/Thumb_Up.png" />');
	chat = chat.replace(/\(n\)/gi, '<img title="(n)" class="chatSmiley" src="images/smileys/Thumb_Down.png" />');
	chat = chat.replace(/\&lt;3/g, '<img title="<3" class="chatSmiley" src="images/smileys/Heart.png" />');
	return chat;
}

function prepChat(chat) {
	chat = chat.join('|:|');
	chat = chat.replace(/\&/g,'%26')
	chat = chat.replace(/\+/g,'%2B')
	return chat;
}

var chatIsBusy = false;
function getChat(message) {
	var dataString = 'getChatFromID='+lastID;
	var backup = new Array();

	var fncComplete = '';
	if (!chatIsBusy && chatBuffer.length > 0) {
		chatIsBusy = true;
		dataString += '&send=true&messages='+prepChat(chatBuffer);
		backup = chatBuffer.slice(0);
		chatBuffer.length = 0;
		fncComplete = function() {chatIsBusy = false;};
	}
	$.ajax({
		type: "POST",  
		url: "ajax/chat.ajax.php",  
		data: dataString,
		error: function() {
			chatBuffer = backup.concat(chatBuffer);
			//console.log('concated:', chatBuffer, backup);
		},
		success: function(data) {
			getChatDone(data);
			//console.log('b:', backup);
		},
		complete: fncComplete
	});
}

function sendChat() {
	var message = $("input#message").val().replace("|:|", "||");
	if (message == '') return false;
	chatBuffer.push(message);
	$("input#message").val('');
	if (skipNextGetChat == false) {
		skipNextGetChat = true;
	}
	getChat();
	return false;  
}

function spoil(obj) {
	$(obj).removeClass("spoiler").hide().fadeIn(600);
	$(obj).children().removeAttr('onclick');
}

$(document).ready(function() {
    $('#sendChat').live("submit", function() {
        sendChat()
    });
	
	//Prevent clicking on links in spoilers
	$(document).on('click', '.spoiler > a', function()
	{
		addChatMessage("Debug", "Child called");
	});
});

function htmlEncode(value){
    if (value) {
        return jQuery('<div />').text(value).html();
    } else {
        return '';
    }
}

function doNothingWhenClickingLinks(self)
{
	return !$(self).closest('.spoiler').length;
}

//Code for checking if the window is currently visible or not
//Adapted from http://stackoverflow.com/a/1060034/238419
$(function() {
	var hidden = "hidden";

    // Standards:
    if (hidden in document)
        document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document)
        document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document)
        document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document)
        document.addEventListener("msvisibilitychange", onchange);
    // IE 9 and lower:
    else if ('onfocusin' in document)
        document.onfocusin = document.onfocusout = onchange;
    // All others:
    else
        window.onpageshow = window.onpagehide 
            = window.onfocus = window.onblur = onchange;

    function onchange (evt) {
        var eventMapIsWindowShown = { 
                focus:true, focusin:true, pageshow:true, blur:false, focusout:false, pagehide:false 
            };

        evt = evt || window.event;
        if (evt.type in eventMapIsWindowShown)
            isChatWindowVisible = eventMapIsWindowShown[evt.type];
        else   
            isChatWindowVisible = !this[hidden];
		
		if(isChatWindowVisible)
			onChatWindowShown();
		else
			onChatWindowHidden();
    }
});

function onChatWindowShown()
{
	chatTimerDelay = chatTimerDelayDefault;
	getChatTimer();
}

function onChatWindowHidden()
{
	chatTimerDelay = chatTimerDelayWindowHidden;
}

<?
$chatMute = (isset($_COOKIE['pref_chatMute']) && $_COOKIE['pref_chatMute'] == "true");
$chatMute = ($chatMute) ? 'true' : 'false';
?>
var chatIsMuted = '<? echo $chatMute; ?>';
function setChatMute() {
	var value = chatIsMuted;
	
	$('#chatMute').removeClass("chatMute_"+value);
	if (value == 'true')	{
		value = 'false';
		soundManager.setVolume('pit', 20);
		soundManager.setPan('pit', -60)
		soundManager.play('pit');
	} else { 
		value = 'true';
	}
	chatIsMuted = value;
	$('#chatMute').addClass("chatMute_"+value);
	savePref('chatMute', value);
}

</script>

<div class='wrapper'>
<h3>Pathery Chat - BETA</h3>

<div class='chatContainer2'>
	<div id='chatContainer'>
	</div>
	<form id='sendChat' onsubmit="return false">
	<? if($accepted) { /*Only show the chat button if we're logged in*/ ?>
		<input type="hidden" name="stuff" value="1724">
		
		<?
		echo "
		<a title='Mute sound?' class='chatMute_$chatMute unselectable' href='javascript:setChatMute()' id='chatMute'/></a>";
		?>
		
		<input class='chatButton' type="button" class="send" id='chatSendBtn' value='Send' onClick="sendChat();">
		<input class='chatInputMessage' type="text" name="message" id="message" value="" maxlength="255" autocomplete="off" >
	<? } ?>
	</form>
</div>

</div>

<?


htmlFooter();
?>