From 319da55b31b57557848fe6a60fed612532bff71a Mon Sep 17 00:00:00 2001
From: Patrick Davison <snapwilliam@gmail.com>
Date: Thu, 14 Feb 2013 00:44:31 -0800
Subject: Chat restyled.

---
 css/chat.css        | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 includes/header.php |  14 +++++++
 pages/chat.php      | 110 +++++-------------------------------------------
 3 files changed, 142 insertions(+), 99 deletions(-)
 create mode 100644 css/chat.css

diff --git a/css/chat.css b/css/chat.css
new file mode 100644
index 0000000..1af7c4d
--- /dev/null
+++ b/css/chat.css
@@ -0,0 +1,117 @@
+
+.chatInputMessage {
+	font-family:Comic Sans MS, Comic Sans MS5, cursive;
+	border: 1px solid gray;
+	background-color:#999;
+	width: 700px;
+	margin: 7px;
+	padding: 2px;
+	border-radius: 10px;
+	border-bottom-right-radius: 20px;
+	border-top-right-radius: 20px;
+}
+.chatButton {
+	margin: 4px;
+}
+
+#chatContainer {
+	width:800px;
+	margin:0 auto;
+	height:400px;
+	overflow:auto;
+}
+#sendChat {
+	margin-left: 10px;
+}
+
+
+
+
+.chatBadge { 
+	height:100%;
+	float:left;
+}
+.chatUsername {
+	font-family: 'Trebuchet MS1', 'Trebuchet MS', sans-serif;
+	font-size: 17px;
+	text-overflow: ellipsis;
+	overflow:hidden;
+	float: left;
+	padding-top: 5px;
+	width: 115px;
+}
+.chatText {
+	font-family: 'Trebuchet MS1', 'Trebuchet MS', sans-serif;
+	font-size: 16px;
+	display: inline-block;
+	width: 525px;
+	padding: 5px 5px 5px 5px;
+}
+.chatTimestamp {
+	font-family:"Times New Roman", Times, serif;
+	float:left;
+	padding: 5px 3px 3px 3px;
+	min-width:70px;
+	overflow:hidden;
+	text-overflow: ellipsis;
+	white-space:nowrap;
+}
+.chatColumn1 {
+
+	width:120px;
+	min-height: 35px;
+	padding-left: 7px;
+	position:absolute;
+	left:0;top:0;bottom:0;
+}
+.chatColumn2 {
+	text-align:left;
+	margin-left:130px;
+	min-height: 35px;
+}
+
+.chatMessage {
+	width:780px;
+	min-height:35px;
+	margin:1px;
+	display:block;
+	clear:both;
+	margin-bottom:3px;
+	position:relative;
+	background-color:#333;
+	border-radius:20px;
+	border-bottom-left-radius: 10px;
+	border-top-left-radius: 10px;
+}
+.chatMessage.self {
+	background-color: #444;
+}
+
+.chatContainer2 {
+	background-color: #222;
+	border-radius: 12px;
+	width:810px;
+	margin:0 auto 5px;
+	height:450px;
+	overflow:auto;
+	
+background: rgb(34,34,34); /* Old browsers */
+background: -moz-radial-gradient(center, ellipse cover,  rgba(34,34,34,1) 0%, rgba(119,119,119,1) 100%); /* FF3.6+ */
+background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(34,34,34,1)), color-stop(100%,rgba(119,119,119,1))); /* Chrome,Safari4+ */
+background: -webkit-radial-gradient(center, ellipse cover,  rgba(34,34,34,1) 0%,rgba(119,119,119,1) 100%); /* Chrome10+,Safari5.1+ */
+background: -o-radial-gradient(center, ellipse cover,  rgba(34,34,34,1) 0%,rgba(119,119,119,1) 100%); /* Opera 12+ */
+background: -ms-radial-gradient(center, ellipse cover,  rgba(34,34,34,1) 0%,rgba(119,119,119,1) 100%); /* IE10+ */
+background: radial-gradient(ellipse at center,  rgba(34,34,34,1) 0%,rgba(119,119,119,1) 100%); /* W3C */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#777777',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/includes/header.php b/includes/header.php
index e654cd3..11a99db 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -39,6 +39,7 @@ function htmlHeader($css = array(), $title = 'Pathery', $desc = '', $scripts = a
     </script>
 	 
 <script>
+<? echo userDataToJS(); ?>
 function showSignin() {
 	if (document.getElementById('oid_hidden') !== undefined) {
 		document.getElementById('oid_hidden').id = 'oid_wrapper';
@@ -199,4 +200,17 @@ function topbar($links) {
 	echo "</div>"; //div id='user'
 }
 
+function userDataToJS() {
+	global $wallColor, $wallEmblem, $accepted;
+	if (!$accepted) {
+		$r = 'var userObj = {"wallColor":false,"wallEmblem":false,';
+		$r .= '"ID":"-1","accepted":false};';
+	} else {
+		$userID = $_SESSION['userID'];
+		$r = 'var userObj = {"wallColor":"'.$wallColor.'","wallEmblem":"'.$wallEmblem.'",';
+		$r .= '"ID":"'.$userID.'","accepted":true};';
+	}
+	return $r;
+}
+
 ?>
diff --git a/pages/chat.php b/pages/chat.php
index ff61294..a29cf36 100644
--- a/pages/chat.php
+++ b/pages/chat.php
@@ -1,6 +1,6 @@
 <?php
 htmlHeader(
-	array('stats'), 'Chat', 
+	array('stats', 'chat'), 'Chat', 
 	'BetaChat for Pathery.com', 
 	array('scores', 'dateformat')
 );
@@ -13,99 +13,9 @@ if (!$accepted) {
 	echo "<center>Please <a href='javascript:showSignin();'>login</a> to chat!</center>";
 }
 
-?>
 
-<style>
-.chatMessage {
-	width:99%;
-	min-height:32px;
-	margin:4px;
-	display:block;
-	clear:both;
-}
-.chatColumn1 {
-	float:left;
-	min-height:31px;
-	width:9%;
-	margin:1px;
-	padding:2px;
-	height:100%;
-	background-color:#222;
-	text-overflow: ellipsis;
-	white-space:nowrap;
-	display:block;
-	border-bottom-left-radius: 10px;
-	border-top-left-radius: 10px;
-}
-.chatColumn2 {
-	float:left;
-	min-height:31px;
-	width:4%;
-	background-color:#222;
-	margin:1px;
-	padding-right:3px;
-}
-.chatColumn3 {
-	float:left;
-	min-height:31px;
-	width:83%;
-	background-color:#222;
-	margin:1px;
-	padding:2px;
-	border-bottom-right-radius: 20px;
-	border-top-right-radius: 20px;
-}
-.chatTimestamp {
-	font-family:"Times New Roman", Times, serif;
-	float:left;
-	padding: 5px 3px 3px 3px;
-	min-width:70px;
-	overflow:hidden;
-	text-overflow: ellipsis;
-	white-space:nowrap;
-}
-.chatBadge { 
-	height:100%;
-	float:left;
-}
-.chatUsername {
-	font-family:Comic Sans MS, Comic Sans MS5, cursive;
-	min-height:34px;
-		text-overflow: ellipsis;
-	padding: 5px 5px 5px 5px;
-}
-.chatText {
-	font-family:Comic Sans MS, Comic Sans MS5, cursive;
-	min-height:34px;
-	padding: 5px 5px 5px 5px;
-}
-.chatInputMessage {
-	font-family:Comic Sans MS, Comic Sans MS5, cursive;
-	border: 1px solid gray;
-	background-color:#999;
-	width: 700px;
-	margin: 4px;
-}
-.chatButton {
-	margin: 4px;
-}
 
-#chatContainer {
-	width:800px;
-	margin:0 auto;
-	height:400px;
-	overflow:auto;
-}
-.chatContainer2 {
-	width:810px;
-	margin:0 auto;
-	height:450px;
-	overflow:auto;
-}
-
-
-
-</style>
+?>
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
@@ -161,16 +71,13 @@ function getChatDone(data) {
 		p = '';
 		p = p+ " <div class='chatColumn1'>";
 		p = p+ " 	<span class='chatTimestamp'>["+timestamp+"]</span>";
-		p = p+ "</div>";
-		
-		p = p+ " <div class='chatColumn2'>";
 		p = p+ "		<div class='grid_td chatBadge' style='float:left; width:35px; height:35px; background:"+user.wallColor+" url(images/marks/"+user.wallEmblem+");'>";
 		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='chatColumn3'>";
+		p = p+ " <div class='chatColumn2'>";
 		
 		p = p+ "<span class='chatUsername'><a href='achievements?id="+user.userID+"' style='color:"+user.displayColor+"'>";
 		p = p+ user.displayName+"</a>:</span>";
@@ -182,15 +89,20 @@ function getChatDone(data) {
 		
 		lastID = user.ID;
 		
-		items.unshift('<div class="chatMessage" id="' + key + '">' + p + '</div>');
+		var strClass = '';
+		console.log('cpm', user.userID, userObj.ID); 
+		if (user.userID == userObj.ID) {
+			strClass += ' self';
+		}
+		
+		items.unshift('<div class="chatMessage'+strClass+'" id="' + key + '">' + p + '</div>');
 		newChats = true;
 	});
 	
 	//console.log("BUILD DONE");
 	
 	if (newChats) {
-		if (chatTimerDelay > chatTimerDelayLower)
-			chatTimerDelay -= 1000;
+		if (chatTimerDelay > chatTimerDelayLower)	chatTimerDelay -= 1000;
 		
 		var new_chatDiv = $('<div/>', {
 			'class': 'my-new-list',
-- 
cgit v1.2.3