Add line wrapping functions and switch to monospaced font

client/src/index.html

@@ -6,7 +6,7 @@
 
 	<title>IRC</title>
 
-	<link href="//fonts.googleapis.com/css?family=Montserrat|Roboto" rel="stylesheet">
+	<link href="//fonts.googleapis.com/css?family=Montserrat|Ubuntu+Mono:400,700" rel="stylesheet">
 	<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
 	<link href="style.css" rel="stylesheet">
 </head>

client/src/js/util.js

@@ -14,4 +14,80 @@ exports.timestamp = function(date) {
 	var m = _.padLeft(date.getMinutes(), 2, '0');
 
 	return h + ':' + m;
+};
+
+exports.wrap = function(lines, width, charWidth) {
+	var wrapped = [];
+	var lineWidth;
+	var wordCount;
+
+	for (var j = 0, llen = lines.length; j < llen; j++) {
+		var words = lines[j].split(' ');
+		var line = '';
+		lineWidth = 0;
+		wordCount = 0;
+
+		for (var i = 0, wlen = words.length; i < wlen; i++) {
+			var word = words[i];
+
+			lineWidth += word.length * charWidth;
+			wordCount++;
+
+			if (lineWidth >= width) {
+				if (wordCount !== 1) {
+					wrapped.push(line);
+
+					line = word;
+					lineWidth = word.length * charWidth;
+					wordCount = 1;
+					
+					if (i !== wlen - 1) {
+						line += ' ';
+						lineWidth += charWidth;
+					}
+				} else {
+					wrapped.push(word);
+					lineWidth = 0;
+					wordCount = 0;
+				}
+			} else if (i !== wlen - 1) {
+				line += word + ' ';
+				lineWidth += charWidth;
+			} else {
+				line += word;
+				wrapped.push(line);
+			}
+		}
+	}
+
+	return wrapped;
+};
+
+var canvas = document.createElement('canvas');
+var ctx = canvas.getContext('2d');
+
+exports.stringWidth = function(str, font) {	
+	ctx.font = font;
+	return ctx.measureText(str).width;
+};
+
+exports.scrollbarWidth = function() {
+    var outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.width = '100px';
+
+    document.body.appendChild(outer);
+
+    var widthNoScroll = outer.offsetWidth;
+    outer.style.overflow = 'scroll';
+
+    var inner = document.createElement('div');
+    inner.style.width = '100%';
+    outer.appendChild(inner);        
+
+    var widthWithScroll = inner.offsetWidth;
+
+    outer.parentNode.removeChild(outer);
+
+    return widthNoScroll - widthWithScroll;
 };

client/src/style.css

@@ -5,12 +5,12 @@
 }
 
 body {
-	font-family: Roboto, sans-serif;
+	font-family: Ubuntu Mono, monospace;
 	background: #f0f0f0;
 }
 
 input {
-	font: 16px Roboto, sans-serif;
+	font: 16px Ubuntu Mono, monospace;
 	border: none;
 	outline: none;
 }
@@ -140,7 +140,7 @@ p {
 
 .connect-form input[type="checkbox"] {
 	display: inline-block;
-	margin-right: 10px;
+	margin-right: 5px;
 	vertical-align: middle;
 }
 
@@ -189,7 +189,7 @@ p {
 
 .chat-topic {
 	display: none;
-	font: 16px Roboto, sans-serif;
+	font: 16px Ubuntu Mono, monospace;
 	line-height: 50px;
 	vertical-align: top;
 	color: #222;
@@ -227,7 +227,7 @@ p {
 }
 
 .message-action {
-	color: #6BB758;
+	color: #FF6698;
 }
 
 .message-time {
@@ -235,8 +235,8 @@ p {
 }
 
 .message-sender {
+	font-weight: 700;
 	color: #6BB758;
-	font: 16px Montserrat, sans-serif;
 }
 
 .message-input-wrap {
@@ -265,7 +265,7 @@ p {
 }
 
 .userlist > div {
-	padding: 15px 0px;
+	padding: 10px 0px;
 }
 
 .userlist p {
@@ -275,4 +275,19 @@ p {
 
 .userlist p:hover {
 	background: #DDD;
+}
+
+.list {
+	position: fixed;
+	left: 200px;
+	top: 0;
+	width: 300px;
+}
+
+.list > div {
+	overflow: auto !important;
+}
+
+.list p:nth-child(even) {
+	background: #AAA;
 }