some interface work

public/css/main.css

@@ -90,3 +90,147 @@ body {
   background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
   background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
 }
+.ircclient #chat .ircwrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.ircclient #chat .ircwrapper .toolbar {
+  height: 56px;
+  background-color: #00c7e0;
+  position: relative;
+  z-index: 10;
+  box-shadow: 2px 2px 4px #cecece;
+}
+.ircclient #chat .ircwrapper .toolbar .logo {
+  width: 56px;
+  height: 56px;
+  display: inline-block;
+  margin: 0 5px;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby {
+  display: inline-block;
+  height: 56px;
+  position: absolute;
+  left: 60px;
+  right: 0;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab {
+  display: inline-block;
+  min-width: 60px;
+  height: 25px;
+  margin: 5px;
+  margin-right: 0;
+  padding: 10px;
+  line-height: 25px;
+  background-color: #29e1ff;
+  border-radius: 5px;
+  border: 1px solid #00d0ea;
+  box-shadow: inset 4px 4px 8px #44ebff;
+  color: #fff;
+  cursor: pointer;
+  font-weight: 600;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #close {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  color: #ff3d3d;
+  float: right;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab:hover {
+  background-color: #63e9ff;
+  box-shadow: inset 4px 4px 8px #86f2ff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active {
+  background-color: #00b9d8;
+  border: 1px solid #009aad;
+  box-shadow: inset 4px 4px 8px #009caf;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active:hover {
+  background-color: #00c7e8;
+}
+.ircclient #chat .ircwrapper .chatarea {
+  position: absolute;
+  top: 56px;
+  width: 100%;
+  bottom: 46px;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar {
+  position: absolute;
+  top: 0;
+  height: 20px;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+  padding: 12px;
+  display: none;
+}
+.ircclient #chat .ircwrapper .chatarea .letterbox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist {
+  width: 280px;
+  position: absolute;
+  right: 0;
+  border-left: 1px solid #ddd;
+  padding: 10px;
+  top: 0;
+  bottom: 0;
+  display: none;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .nicklist {
+  display: block;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .letterbox {
+  right: 301px;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .topicbar {
+  right: 301px;
+}
+.ircclient #chat .ircwrapper .chatarea.vtopic .topicbar {
+  display: block;
+}
+.ircclient #chat .ircwrapper .chatarea.vtopic .letterbox {
+  top: 45px;
+}
+.ircclient #chat .ircwrapper .input {
+  position: absolute;
+  bottom: 0;
+  height: 46px;
+  width: 100%;
+  background-color: #00c7e0;
+}
+.ircclient #chat .ircwrapper .input .nickname {
+  background-color: #00efef;
+  margin: 5px;
+  padding: 7px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  padding-right: 20px;
+  margin-right: 0;
+  width: 183px;
+  text-overflow: clip;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper {
+  display: inline-block;
+  position: absolute;
+  margin: 5px 0;
+  left: 210px;
+  right: 46px;
+  top: 0;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper input {
+  width: 100%;
+  padding: 6px;
+  font-size: 120%;
+  border: 1px solid #929292;
+  border-left: 0;
+  box-shadow: inset 4px 4px 8px #d8d8d8;
+}

public/index.html

@@ -30,9 +30,28 @@
 					</form>
 				</div>
 			</div>
-			<div class="coverwindow" id="chat" style="display: none;">
+			<div class="coverwindow" id="chat">
+				<div class="ircwrapper">
+					<div class="toolbar">
+						<span class="logo"></span>
+						<div class="tabby">
 							
 						</div>
+					</div>
+					<div class="chatarea">
+						<div class="topicbar"></div>
+						<div class="letterbox"></div>
+						<div class="nicklist"></div>
+					</div>
+					<div class="input">
+						<div class="nickname">Test</div>
+						<div class="inputwrapper">
+							<input type="text" id="input">
+						</div>
+						<span class="send"></span>
+					</div>
+				</div>
+			</div>
 		</section>
 	</body>
 </html>

public/js/main.js

@@ -1,21 +1,11 @@
 window.irc = {
 	socketUp: false,
-	primaryFrame: null
+	primaryFrame: null,
+	timestamps: true
 };
 
 window.validators = {};
 
-Array.prototype.remove_str = function(str) {
-	let arr = this;
-	let index = arr.indexOf(str);
-
-	if(indexOf > -1) {
-		arr.splice(index, 1);
-		return arr;
-	}
-	return arr;
-};
-
 window.validators.iporhost = function(str) {
 	let valid = false;
 
@@ -35,9 +25,85 @@ window.validators.nickname = function(str) {
 	return false;
 }
 
+function remove_str(arr, str) {
+	let index = arr.indexOf(str);
+
+	if(index > -1) {
+		arr.splice(index, 1);
+		return arr;
+	}
+	return arr;
+};
+
+
+function removeClass(element, cl) {
+	let classList = element.className.split(" ");
+	remove_str(classList, cl);
+	element.className = classList.join(" ");
+}
+
+function addClass(element, cl) {
+	let classList = element.className.split(" ");
+	classList.push(cl);
+	element.className = classList.join(" ");
+}
+
+class Nicklist {
+	constructor(buffer) {
+		this.buffer = buffer;
+		this.nicks = [];
+	}
+
+	render(frame) {
+
+	}
+}
+
 class Tab {
 	constructor(buffer) {
 		this.buffer = buffer;
+		this.element = null;
+	}
+
+	// Create a tab element
+	renderTab(frame) {
+		let internals = "<span id='title'>"+ this.buffer.title +"</span><span id='unread'></span><span id='close'>x</span>";
+		let ttt = document.createElement('div');
+		ttt.innerHTML = internals;
+		ttt.className = "tab";
+		ttt.setAttribute('id', 'tab-'+this.name);
+		frame.appendChild(ttt);
+		this.element = ttt;
+
+		let instance = this;
+		ttt.addEventListener('click', function() {
+			if(instance.buffer.active)
+				return;
+			irc.chat.render(instance.buffer);
+		}, false);
+	}
+
+	setActive(active) {
+		if(this.element) {
+			this.element.className = "tab";
+			if(active) {
+				addClass(this.element, "active");
+			}
+		}
+	}
+
+	setUnreadCount(count) {
+		if(this.element) {
+			let counter = this.element.querySelector('#unread');
+			if(count == 0) 
+				counter.innerHTML = "";
+			else
+				counter.innerHTML = count;
+		}
+	}
+
+	close() {
+		console.log('close requested for '+this.buffer.title);
 	}
 }
 
@@ -55,16 +121,90 @@ class Buffer {
 		this.type = type;
 
 		this.nicklistDisplayed = false;
+		this.active = false;
 
 		this.tab = new Tab(this);
+		this.tab.renderTab(irc.primaryFrame.querySelector('.tabby'));
 
 		if(type == "channel")
-			nicklistDisplayed = true;
+			this.nicklistDisplayed = true;
+
+		this.frame = irc.primaryFrame.querySelector('#chat');
+		this.letterbox = this.frame.querySelector('.letterbox');
+	}
+
+	render() {
+		this.active = true;
+		this.tab.setActive(true);
+
+		let chat = this.frame.querySelector('.chatarea');
+		let topicbar = chat.querySelector('.topicbar');
+		let nicklist = chat.querySelector('.nicklist');
+
+		chat.className = "chatarea";
+		nicklist.innerHTML = "";
+		topicbar.innerHTML = "";
+
+		if(this.nicklistDisplayed) {
+			addClass(chat, 'vnicks');
+		}
+
+		if(this.topic != null && this.topic != "") {
+			addClass(chat, 'vtopic');
+			topicbar.innerHTML = this.topic;
+		}
+
+		this.renderMessages();
+	}
+
+	renderMessages() {
+		if(!this.active) return;
+
+		this.letterbox.innerHTML = "";
+
+		let instance = this;
+		for(let t in this.messages) {
+			let mesg = instance.messages[t];
+			instance.appendMessage({message: mesg.message, sender: mesg.sender, type: mesg.type, time: mesg.time});
+		}
+	}
+
+	appendMessage(meta) {
+		let mesgConstr = document.createElement('div');
+		mesgConstr.className = "message m_"+meta.type;
+
+		let construct = "";
+		if(irc.timestamps)
+			construct += "<span class='timestamp'>"+meta.time+"</span>";
+
+		if(meta.sender != null)
+			construct += "<span class='sender'>"+meta.sender+"</span>";
+		else
+			addClass(mesgConstr, "no_sender");
+
+		construct += "<span class='content'>"+meta.message+"</span>";
+
+		mesgConstr.innerHTML = construct;
+		this.letterbox.appendChild(mesgConstr);
+	}
+
+	addMessage(message, sender, type) {
+		let mesg = {message: message, sender: sender, type: type, time: Date.now()}
+		this.messages.push(mesg);
+
+		if(this.active)
+			this.appendMessage(mesg);
+	}
+
+	close() {
+
 	}
 }
 
 class IRCConnector {
 	constructor(frame) {
+		let instance = this;
+
 		this.frame = frame;
 		this.messenger = frame.querySelector('#connmsg');
 		this.f_form = frame.querySelector('#IRCConnector');
@@ -75,8 +215,6 @@ class IRCConnector {
 		this.f_port = this.f_form.querySelector('#port');
 		this.formLocked = false;
 
-		let instance = this;
-
 		this.f_form.onsubmit = function(e) {
 			if(instance.formLocked) {
 				e.preventDefault(); 
@@ -101,7 +239,7 @@ class IRCConnector {
 		let port = this.f_port.value;
 
 		if (!window.validators.nickname(nickname)) {
-			this.authMessage("Erronous nickname!", true);
+			this.authMessage("Erroneous nickname!", true);
 			return false;
 		}
 
@@ -109,7 +247,6 @@ class IRCConnector {
 			channel = channel.trim().split(",");
 
 			for (let t in channel) {
-				if(typeof(t) != "number") continue;
 				let chan = channel[t];
 				
 				channel[t] = chan.trim();
@@ -129,19 +266,19 @@ class IRCConnector {
 		}
 
 		if(!window.validators.iporhost(server)) {
-			this.authMessage("Erronous server address!", true);
+			this.authMessage("Erroneous server address!", true);
 			return false;
 		}
 
 		try {
 			port = parseInt(port);
 		} catch(e) {
-			this.authMessage("Erronous port!", true);
+			this.authMessage("Erroneous port!", true);
 			return false;
 		}
 
 		if(port < 10 || port > 65535) {
-			this.authMessage("Erronous port!", true);
+			this.authMessage("Erroneous port!", true);
 			return false;
 		}
 
@@ -172,10 +309,61 @@ class IRCChatWindow {
 		this.firstServer = true;
 
 		this.currentBuffer = null;
+
+		irc.switchBuffer = this.render;
+	}
+
+	getBufferByName(buffername) {
+		let result = null;
+		for (let t in this.buffers) {
+			let buf = this.buffers[t];
+			if(buf.name == buffername)
+				result = buf
+		}
+		return result;
+	}
+
+	getActiveBuffer() {
+		let result = null;
+		for (let t in this.buffers) {
+			let buf = this.buffers[t];
+			if(buf.active == true)
+				result = buf
+		}
+		return result;
+	}
+
+	getBuffersByServer(server) {
+		let result = [];
+		for (let t in this.buffers) {
+			let buf = this.buffers[t];
+			if(buf.server == server)
+				result.push(buf);
+		}
+		return result;
+	}
+
+	getBufferByNameServer(server, channel) {
+		let result = null;
+		for (let t in this.buffers) {
+			let buf = this.buffers[t];
+			if(buf.server == server && buf.name == channel)
+				result = buf;
+		}
+		return result;
+	}
+
+	getBuffersByType(type) {
+		let result = [];
+		for (let t in this.buffers) {
+			let buf = this.buffers[t];
+			if(buf.type == type)
+				result.push(buf);
+		}
+		return result;
 	}
 
 	newServerBuffer(serverinfo) {
-		console.log("wat");
 		if(this.firstServer) {
 			this.frame.style.display = "block";
 		}
@@ -186,41 +374,38 @@ class IRCChatWindow {
 		this.firstServer = false;
 	}
 
-	getBufferByName(buffername) {
+	createBuffer(server, name, type, autoswitch) {
-		let result = null;
+		let buf = this.getBufferByNameServer(server, name);
-		for (let t in this.buffers) {
+		if(buf) {
-			if(typeof(t) != "number") continue;
+			if(autoswitch)
-			let buf = this.buffers[t];
+				this.render(buf);
-			if(buf.name == buffername)
+			return;
-				result = buf
-		}
-		return result;
 		}
 
-	getBuffersByServer(server) {
+		buf = new Buffer(server, name, name, type);
-		let result = [];
+		this.buffers.push(buf);
-		for (let t in this.buffers) {
+
-			if(typeof(t) != "number") continue;
+		if(autoswitch)
-			let buf = this.buffers[t];
+			this.render(buf);
-			if(buf.server == server)
-				result.push(buf);
-		}
-		return result;
 	}
 
-	getBuffersByType(type) {
+	messageBuffer(name, server, message) {
-		let result = [];
+		let buf = this.getBufferByNameServer(server, name);
-		for (let t in this.buffers) {
+		if(buf == null)
-			if(typeof(t) != "number") continue;
+			return;
-			let buf = this.buffers[t];
+		buf.addMessage(message.message, message.from, message.type);
-			if(buf.type == type)
-				result.push(buf);
-		}
-		return result;
 	}
 
 	render(buffer) {
-		console.log(buffer);
+		let instance = this;
+		let activeNow = this.getActiveBuffer();
+
+		if(activeNow) {
+			activeNow.tab.setActive(false);
+			activeNow.active = false;
+		}
+
+		buffer.render();
 	}
 }
 
@@ -247,6 +432,12 @@ window.onload = function() {
 				irc.auther.authComplete();
 				irc.chat.newServerBuffer(data);
 				break;
+			case "event_join_channel":
+				irc.chat.createBuffer(data.server, data.name, "channel", true);
+				break;
+			case "server_message":
+				irc.chat.messageBuffer(data.to, data.server, {message: data.message, type: data.messageType, from: data.from});
+				break;
 			case "connect_message":
 				irc.auther.authMessage(data.data, data.error);
 				break;

public/main.styl

@@ -83,3 +83,129 @@ body
                     background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
                     background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
                     background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+    #chat
+        .ircwrapper
+            position: absolute
+            width: 100%
+            height: 100%
+            .toolbar
+                height: 56px
+                background-color: #00c7e0
+                position: relative
+                z-index: 10
+                box-shadow: 2px 2px 4px #cecece
+                .logo
+                    width: 56px;
+                    height: 56px;
+                    display: inline-block;
+                    margin: 0 5px;
+                .tabby
+                    display: inline-block;
+                    height: 56px;
+                    position: absolute;
+                    left: 60px;
+                    right: 0;
+                    .tab
+                        display: inline-block;
+                        min-width: 60px;
+                        height: 25px;
+                        margin: 5px;
+                        margin-right: 0;
+                        padding: 10px;
+                        line-height: 25px;
+                        background-color: #29e1ff;
+                        border-radius: 5px;
+                        border: 1px solid #00d0ea;
+                        box-shadow: inset 4px 4px 8px #44ebff;
+                        color: #fff;
+                        cursor: pointer;
+                        font-weight: 600;
+                        #close
+                            display: inline-block;
+                            width: 12px;
+                            text-align: center;
+                            color: #ff3d3d;
+                            float: right;
+                        &:hover
+                            background-color: #63e9ff;
+                            box-shadow: inset 4px 4px 8px #86f2ff;
+                        &.active
+                            background-color: #00b9d8;
+                            border: 1px solid #009aad;
+                            box-shadow: inset 4px 4px 8px #009caf;
+                            color: #ffffff;
+                            &:hover
+                                background-color: #00c7e8;
+            .chatarea
+                position: absolute;
+                top: 56px;
+                width: 100%;
+                bottom: 46px;
+                .topicbar
+                    position: absolute;
+                    top: 0;
+                    height: 20px;
+                    right: 0;
+                    left: 0;
+                    background-color: #fff;
+                    border-bottom: 1px solid #ddd;
+                    padding: 12px;
+                    display: none;
+                .letterbox
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                .nicklist
+                    width: 280px;
+                    position: absolute;
+                    right: 0;
+                    border-left: 1px solid #ddd;
+                    padding: 10px;
+                    top: 0;
+                    bottom: 0;
+                    display: none;
+                &.vnicks
+                    .nicklist
+                        display: block;
+                    .letterbox
+                        right: 301px;
+                    .topicbar
+                        right: 301px;
+                &.vtopic
+                    .topicbar
+                        display: block;
+                    .letterbox
+                        top: 45px;
+            .input
+                position: absolute;
+                bottom: 0;
+                height: 46px;
+                width: 100%;
+                background-color: #00c7e0;
+                .nickname
+                    background-color: #00efef;
+                    margin: 5px;
+                    padding: 7px;
+                    border-top-left-radius: 10px;
+                    border-bottom-left-radius: 10px;
+                    padding-right: 20px;
+                    margin-right: 0;
+                    width: 183px;
+                    text-overflow: clip;
+                .inputwrapper
+                    display: inline-block;
+                    position: absolute;
+                    margin: 5px 0;
+                    left: 210px;
+                    right: 46px;
+                    top: 0;
+                    input
+                        width: 100%;
+                        padding: 6px;
+                        font-size: 120%;
+                        border: 1px solid #929292;
+                        border-left: 0;
+                        box-shadow: inset 4px 4px 8px #d8d8d8;
+                        

teemant.js

@@ -39,6 +39,16 @@ io.sockets.on('connection', function (socket) {
 		setTimeout(function() {
 			console.log("fake connect");
 			socket.emit('act_client', {type: 'event_connect', address: connectiondata.server, network: "IcyNet", raw: connectiondata});
-		}, 2000)
+			socket.emit('act_client', {type: 'server_message', messageType: "notice", server: connectiondata.server, to: connectiondata.server, from: null, message: "Connection established"});
+		}, 2000);
+
+		setTimeout(function() {
+			console.log("fake channel");
+			socket.emit('act_client', {type: 'event_join_channel', server: connectiondata.server, name: "#channel"});
+			// Spam the client with messages (for testing)
+			setInterval(function() {
+				socket.emit('act_client', {type: 'server_message', messageType: "privmsg", server: connectiondata.server, to: "#channel", from: "horse", message: "I like ponies"});
+			}, 4000);
+		}, 4000);
 	});
 });