Cooler frontend design!

2 files changed, 231 insertions, 64 deletions

diff --git a/static/chat.css b/static/chat.css
index ed56fca..3a834b9 100644
--- a/static/chat.css
+++ b/static/chat.css
@@ -2,11 +2,137 @@
 	font-family: sans-serif;
 }
 
+body {
+	background: hsl(200, 90%, 85%);
+}
+
+#mainwrap {
+	position: fixed;
+	left: 2mm;
+	top: 2mm;
+	right: 2mm;
+	bottom: 2mm;
+}
+
+h1, #chatlogwrap, #buddiescontainer {
+	background: white;
+}
+
+#dialogoverlay {
+	position: fixed;
+	background: rgba(0,0,0,0.4);
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1000;
+}
+
+#dialoginner {
+	background: white;
+	margin: 10% auto 0;
+	width: 90%;
+	max-width: 120mm;
+	padding: 4mm 0 4mm;
+	border-radius: 4mm;
+}
+
+#dialoginner > div {
+	padding: 0 4mm 0;
+}
+
+#dialoginner .buttons {
+	margin: 1ex 0 0;
+	text-align: center;
+}
+
+#dialoginner button {
+	padding: 1ex 2ex 1ex;
+	background: #ddd;
+	border: none;
+	border-radius: 2mm;
+}
+
+#dialoginner button:hover {
+	cursor: pointer;
+	background: #eee;
+}
+#dialoginner input {
+	width: calc(100% - 2px);
+	border: 1px solid #aaa;
+}
+
+#dialoginner h2 {
+	text-align: center;
+	padding: 0;
+	margin: 0;
+	border-bottom: 1px dotted hsl(200, 90%, 85%);
+	font-size: 16pt;
+	font-weight: normal;
+}
+
+#chatinput {
+	padding: 0;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+#chatinput input {
+	position: relative;
+	background: white;
+	border: none;
+	border-top-left-radius: 4mm;
+	border-bottom-left-radius: 4mm;
+	padding: 0 0 0 4mm;
+	height: 3em;
+	width: calc(100% - 4mm - 10ex);
+}
+#chatinput button {
+	position: relative;
+	background: white;
+	border-top-right-radius: 4mm;
+	border-bottom-right-radius: 4mm;
+	border: none;
+	border-left: 1px dotted hsl(200, 90%, 85%);
+	height: 3em;
+	text-align: center;
+	width: 10ex;
+}
+#chatinput button:hover {
+	background: #eee;
+	cursor: pointer;
+}
+
+::-webkit-input-placeholder { font-style: italic; }
+::-moz-placeholder { font-style: italic; }
+:-ms-input-placeholder { font-style: italic; }
+input:-moz-placeholder { font-style: italic; }
+
+#chatlogwrap {
+	position: absolute;
+	top: 13mm;
+	left: 0;
+	bottom: calc(3em + 1mm);
+	right: 40mm;
+	margin: 0;
+	border-radius: 4mm;
+}
+
 #chatlog {
+	position: absolute;
+	margin: 0;
+	padding: 0;
 	display: table;
 	list-style: none;
-	margin: 0;
-	padding: 0
+	display: block;
+	top: 4mm;
+	left: 4mm;
+	right: 4mm;
+	bottom: 4mm;
+	overflow-y: auto;
+	overflow-x: hidden;
 }
 
 #chatlog li {
@@ -17,13 +143,13 @@
 
 #chatlog li .nick {
 	display: table-cell;
-	padding-right: 1ex;
+	padding-right: 0.5ex;
 	font-weight: bold;
-	text-align: right;
 }
 
 #chatlog li .msg {
 	display: table-cell;
+	padding-left: 1ex;
 }
 
 #chatlog li.leave, #chatlog li.join, #chatlog li.leave .nick, #chatlog li.join .nick {
@@ -32,66 +158,40 @@
 }
 
 h1 {
+	border-radius: 4mm;
 	text-align: center;
-	font-weight: bold;
+	margin: 0 0 1mm;
+	padding: 2mm 4mm 2mm;
+	font-weight: normal;
 	font-size: 18pt;
-	margin: 0;
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	border-bottom: 1px solid #28f;
 	height: 8mm;
-	background: white;
 }
 
 #buddiescontainer {
-	position: fixed;
-	top: 0;
+	position: absolute;
+	top: 13mm;
+	bottom: calc(3em + 1mm);
 	right: 0;
-	width: 35mm;
-	margin: 10mm 0 12mm 0;
+	width: 39mm;
+	border-radius: 4mm;
+	padding: 4mm 0 4mm;
 }
 
 #buddiescontainer h2 {
-	font-weight: bold;
+	font-weight: normal;
 	font-size: 12pt;
+	padding: 0 4mm 0;
+	margin: 0 0 2mm;
+	text-align: center;
+	border-bottom: 1px dotted hsl(200, 90%, 85%);
 }
 
 #buddies {
+	list-style: none;
 	margin: 0;
-	padding: 0;
+	padding: 0 4mm 0;
 }
 #buddies li {
 	margin: 0;
 	padding: 0;
 }
-
-#chatlog {
-	margin: 10mm 40mm 12mm 0;
-}
-
-#chatinput {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 10mm;
-	border-top: 1px solid #28f;
-}
-
-#chatinput input {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	height: 8mm;
-	width: calc(100% - 25mm);
-}
-
-#chatinput button {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 20mm;
-	bottom: 0;
-}
\ No newline at end of file
diff --git a/static/chat.js b/static/chat.js
index 47cf6d3..65266bf 100644
--- a/static/chat.js
+++ b/static/chat.js
@@ -1,3 +1,55 @@
+function initGui(roomname) {
+	$("#nojs").remove();
+	
+	var dialogoverlay = $("<div/>").prop("id", "dialogoverlay")
+		.append($("<div/>").prop("id", "dialoginner")
+			.append($("<h2/>"))
+			.append($("<div/>")
+				.append($("<p/>"))
+				.append($("<input/>"))
+				.append($("<div/>").addClass("buttons")))).hide();
+	var h1 = $("<h1/>").text("Chatroom ").append($("<span/>").css("font-style", "italic").text(roomname));
+	var chatlog = $("<div/>").prop("id", "chatlogwrap").append($("<ul/>").prop("id", "chatlog"));
+	var buddiescontainer = $("<section/>").prop("id", "buddiescontainer")
+		.append($("<h2/>").text("Buddies online"))
+		.append($("<ul/>").prop("id", "buddies"));
+	var chatinput = $("<section/>").prop("id", "chatinput")
+		.append($("<input/>").prop("name", "chattext").prop("id", "chattext").prop("type", "text").prop("placeholder", "Type to chat..."))
+		.append($("<button/>").prop("id", "sendbtn").text("Send"));
+	$("body").append(dialogoverlay);
+	$("#mainwrap")
+		.append(h1)
+		.append(chatlog)
+		.append(buddiescontainer)
+		.append(chatinput);
+}
+
+function mydialog(title, text, input, buttons) {
+	$("#dialoginner h2").text(title);
+	$("#dialoginner p").text(text);
+	var callcallback;
+	if(input === null) {
+		$("#dialoginner input").hide();
+		callcallback = function(cb) {cb();};
+	} else {
+		$("#dialoginner input").prop("placeholder", input).show();
+		callcallback = function(cb) {cb($("#dialoginner input").val());};
+	}
+	
+	$("#dialoginner .buttons > *").remove();
+	var btncontainer = $("#dialoginner .buttons");
+	
+	for(var i in buttons) {
+		var button = buttons[i];
+		btncontainer.append($("<button/>").text(button.text).click(function() {
+			$("#dialogoverlay").hide();
+			callcallback(button.callback);
+		}));
+	}
+	
+	$("#dialogoverlay").show();
+}
+
 function randomColor() {
 	var h = Math.floor(Math.random() * 360);
 	var s = Math.floor((Math.random() * 0.5 + 0.5)*100);
@@ -6,9 +58,17 @@ function randomColor() {
 }
 
 function askTryAgain(reason, ws_url) {
-	if(confirm("Could not join chat (Reason: "+ reason +"). Try again?")) {
-		window.setTimeout(RunChat, 1, ws_url); // We use a timeout, so we don't accidentally fill up the call stack.
-	}
+	mydialog(
+		"Could not join",
+		"Could not Join chat (Reason: "+reason+")",
+		null,
+		[{
+			"text": "Try again",
+			"callback": (function() {
+				pickUsername(ws_url);
+			})
+		}]
+	);
 }
 
 var buddyColors = {};
@@ -57,14 +117,14 @@ function chatlogWriter(event) {
 	var elemText = $("<span/>").addClass("msg").text(msgtext);
 	var logentry = $("<li/>").addClass(data.type).append(elemNick).append(elemText);
 	$("#chatlog").append(logentry);
-	window.scrollTo(0, logentry.offset().top);
+	logentry.get()[0].scrollIntoView();
 }
 
 function initChatSender(ws) {
 	var send = function() {
 		var ct = $("#chattext")
-		ws.send(ct.prop("value"));
-		ct.prop("value","");
+		ws.send(ct.val());
+		ct.val("");
 		ct.focus();
 	};
 	
@@ -83,13 +143,14 @@ function Join(ws_url, nick) {
 		ws.onmessage = function(event) {
 			var data = JSON.parse(event.data);
 			if(data.ok) {
+				$("#chatinput").show();
 				ws.onmessage = chatlogWriter;
-				for(i in data.buddies) {
+				for(var i in data.buddies) {
 					addBuddy(data.buddies[i]);
 				}
 				initChatSender(ws);
 				ws.onclose = function(_) {
-					alert("Connection lost. Try refreshing the page.");
+					mydialog("Connection lost", "Connection to server lost. Try refreshing the page", null, []);
 				};
 			} else {
 				ws.close();
@@ -99,13 +160,19 @@ function Join(ws_url, nick) {
 	};
 }
 
-function RunChat(ws_url) {
-	var nick = "";
-	while(nick == "") {
-		nick = prompt("Choose a nickname");
-		if(nick === null) {
-			return;
-		}
-	}
-	Join(ws_url, nick);
+function RunChat(ws_url, roomname) {
+	initGui(roomname);
+	pickUsername(ws_url);
+}
+
+function pickUsername(ws_url) {
+	mydialog(
+		"Pick a username",
+		"Pick a username to join the chat",
+		"username",
+		[{
+			"text": "OK",
+			"callback": (function(nick) {Join(ws_url, nick);})
+		}]
+	);
 }