code: change color scheme

code/hub.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"fmt"
 	"strings"
 	"time"
 
@@ -8,17 +9,23 @@ import (
 )
 
 var usernames = make(map[*websocket.Conn]string)
+var nameToConn = make(map[string]*websocket.Conn)
 
 func handleIncomingMessage(sender *websocket.Conn, msg string) {
 	if _, ok := usernames[sender]; !ok {
 		username := strings.TrimSpace(msg)
 		if username == "" || username == "server" {
-			sender.WriteJSON(newError("You have an illegal nickname"))
+			sender.WriteJSON(newError("You have an illegal username."))
+			return
+		}
+		if _, ok = nameToConn[username]; ok {
+			sender.WriteJSON(newError("The specified username is already taken."))
 			return
 		}
 		sendUserList(sender)
 
 		usernames[sender] = username
+		nameToConn[username] = sender
 		m := newMessage(msgJoin, "server", username)
 		m.dispatch()
 		return
@@ -28,9 +35,16 @@ func handleIncomingMessage(sender *websocket.Conn, msg string) {
 }
 
 func handleDisconnection(sender *websocket.Conn) {
-	m := newMessage(msgLeave, "server", usernames[sender])
+	username, ok := usernames[sender]
+	if !ok {
+		fmt.Println("leave without registering")
+		return
+	}
+
+	m := newMessage(msgLeave, "server", username)
 	m.dispatch()
 	delete(usernames, sender)
+	delete(nameToConn, username)
 }
 
 type messageType string

code/main.go

@@ -3,6 +3,7 @@ package main
 import (
 	"fmt"
 	"net/http"
+	"strconv"
 
 	"github.com/gorilla/websocket"
 )
@@ -33,12 +34,15 @@ func websocketConnection(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+const port = 8080
+
 func main() {
 	http.HandleFunc("/websocket", websocketConnection)
 	http.Handle("/", http.FileServer(http.Dir("./static")))
 
-	err := http.ListenAndServe(":8080", nil)
+	fmt.Println("Chat server opening on port", port)
+	err := http.ListenAndServe(":"+strconv.Itoa(port), nil)
 	if err != nil {
-		fmt.Errorf("Server could not start up: %s", err.Error())
+		_ = fmt.Errorf("Server could not start up: %s", err.Error())
 	}
 }

code/static/css/style.css

@@ -1,15 +1,11 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400&display=swap');
 
 body {
-	justify-content: center;
-	align-items: center;
-	background-color: #19180A;
 	width: 100vw;
 	height: 100vh;
 	padding: 0;
 	margin: 0;
-	font-family: 'Open Sans', sans-serif;
-	display: flex;
+	font-family: 'Roboto', sans-serif;
 }
 
 #snackbar {
@@ -35,136 +31,92 @@ body {
 }
 
 .container {
+	width: 100%;
+	height: 100%;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	margin: 32px;
-	width: 90%;
-	height: 90%;
-}
-
-.messages {
-	width: 82%;
-	height: 80%;
-	overflow-y: scroll;
-	border-radius: 4px;
-	background-color: #4D5359;
-}
-
-.messages > div {
-	padding: 20px;
 }
 
-.message hr {
-	border: none;
-	border-bottom: 1px solid transparent;
-	border-bottom-color: #6c6882;
-	margin: 14px 0;
+.lhs {
+	width: calc(100% - 300px);
+	display: flex;
+	flex-direction: column-reverse;
+	background-color: #39363F;
 }
 
-.message .new{
-	border-bottom-color: #BA5C5C;
+.rhs {
+	width: calc(300px - 24px);
+	background-color: #28272D;
+	padding: 12px;
+	color: #eeeeee;
 }
 
-.message .author {
-	line-height: 24px;
-	line-height: 24px;
-	color: #AAB3FF;
-	display: inline;
-	font-weight: bold;
+.messages {
+	overflow: auto;
+	max-height: calc(100vh - 128px);
+	flex-grow: 1;
 }
 
-.message .timestamp {
-	line-height: 24px;
-	color: #888888;
-	display: inline;
-	font-size: 12px;
+.messages::-webkit-scrollbar {
+  width: 8px;
 }
 
-.message .content {
-	color: #C9CEB1;
+.messages::-webkit-scrollbar-track {
+  background: #322F37;
+	border-radius: 12px;
 }
-
-.message .server-message {
-	padding: 4px 0 4px 20px;
-	margin: 6px 0;
-	font-weight: bold;
-	color: #AAB3FF;
-	border-left: 4px solid #EAF0CE;
-	background-color: #EAF0CE22;
+ 
+.messages::-webkit-scrollbar-thumb {
+  background: #504D56; 
+	border-radius: 12px;
 }
 
-.users {
-	width: 15%;
-	height: 80%;
-	border-radius: 4px;
-	background-color: #4D5359;
-	background: -moz-linear-gradient(left,  #4d5359 0%, #324a59 100%);
-	background: -webkit-linear-gradient(left,  #4d5359 0%,#324a59 100%);
-	background: linear-gradient(to bottom,  #4d5359 0%,#324a59 100%);
-	font-weight: 200px;
-	text-align: center;
-	overflow-y: scroll;
+.messages::-webkit-scrollbar-thumb:hover {
+  background: #5C5766; 
 }
 
-.users h3 {
-	color: #EAF0CE;
-	font-weight: 100px;
-}
 
-.users p {
-	text-align: left;
-	color: #AAB3FF;
-	margin: 16px 6%;
-	padding: 3px 9%;
-	border-left: 4px solid #EAF0CE;
-	background-color: #EAF0CE22;
-	text-overflow: ellipsis;
-	overflow-x: hidden;
-	white-space: nowrap;
+/*  */
+.chat {
+	height: 64px;
+	padding: 32px;
 }
 
-.chat {
+.chat-inner {
+	height:64px;
 	display: flex;
 	align-items: center;
-	width: 96%;
-	height: 8%;
-	padding: 9px;
-	border-radius: 8px;
-	background-color: #4d5359;
 }
 
-.primary {	
+#chatI {
+	height: 64px;
 	width: 100%;
-	background: -moz-linear-gradient(left,  #4d5359 0%, #324a59 100%);
-	background: -webkit-linear-gradient(left,  #4d5359 0%,#324a59 100%);
-	background: linear-gradient(to bottom,  #4d5359 0%,#324a59 100%);
-	padding: 12px 32px 12px;
+	padding: 0 12px;
+	font-size: 20px;
+	color: #eeeeee;
+	border: none;
+	border-radius: 6px 0 0 6px;
+	background: #28272D;
 }
 
-input {
-	font-family: Helvetica;
-	font-weight: 300;
-	width: 100%;
-	line-height: 2.2rem;
-	font-size: 1.1rem;
-	background-color: transparent;
-	border: none;
+#chatI:focus {
 	outline: none;
-	color: #AAB3FF;
-	padding: 0;
-	margin: 0;
 }
 
-input::placeholder{
-	color: #999;
+#chatI::placeholder {
+	color: #908D9B;
 }
 
-button {
+#chatB {
+	height: 64px;
 	padding: 0;
-	background: none;
+	width: 128px;
+	font-size: 24px;
+	color: #000;
 	border: none;
-	outline: none;
+	border-radiuS: 0 6px 6px 0;
+	background: #8EFFD6;
 }
 
 i {
@@ -177,6 +129,40 @@ i:hover {
 	color: #EAF0CE;
 }
 
+/* Chat Messages */
+.message {
+	margin: 32px 32px;
+}
+
+.server-message {
+	color: #908D9B;
+	font-style: italic;
+	font-size: 21px;
+}
+
+.author {
+	color: #fcfcfc;
+	font-weight: 700;
+	display: inline-block;
+	margin-right: 8px;
+}
+
+.author.self {
+	color: #8EFFD6;
+}
+
+.timestamp {
+	display: inline-block;
+	font-weight: 400;
+	font-size: 14px;
+	color: #7D7A87;
+}
+
+.content {
+	color: #eee;
+	margin-top: 2px;
+}
+
 .modal {
 	display: none;
 	position: fixed;
@@ -192,15 +178,14 @@ i:hover {
 }
 
 .modal-content {
-	color: #AAB3FF;
+	color: #eeeeee;
 	position: relative;
-	background-color: #324a59;
+	background-color: #39363F;
 	margin: auto;
 	padding: 18px;
 	padding-bottom: 36px;
 	border-radius: 4px;
 	width: 60%;
-	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 	-webkit-animation-name: animatetop;
 	-webkit-animation-duration: 0.6s;
 }
@@ -209,6 +194,34 @@ i:hover {
 	padding: 18px 0;
 }
 
+#nickI {
+	height: 48px;
+	padding: 0 12px;
+	font-size: 16px;
+	color: #eeeeee;
+	border: none;
+	border-radius: 6px;
+	background: #28272D;
+}
+
+#nickI:focus {
+	outline: none;
+}
+
+#nickI::placeholder {
+	color: #908D9B;
+}
+
+#nickB {
+	height: 48px;
+	padding: 0;
+	width: 96px;
+	font-size: 18px;
+	color: #000;
+	border: none;
+	border-radiuS: 6px;
+	background: #8EFFD6;
+}
 @-webkit-keyframes animatetop {
 	from {top:-300px; opacity:0}
 	to {top:0; opacity:1}

code/static/index.html

@@ -6,31 +6,29 @@
 		<link rel="stylesheet" type="text/css" href="/css/style.css">
 		<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 	</head>
-	<div id="snackbar">Warning: This is some message.</div>
+	<div id="snackbar"></div>
 	<body>
 		<div id="modal" class="modal">
 			<div class="modal-content">
 				<h1>Enter a username:</h1>
-				<div class="chat">
-					<input type="text" id="nickI" placeholder="Nickname">
-					<button type="submit" id="nickB"><i class="icon ion-android-arrow-forward"></i></button>
-					</input>
-				</div>
+				<input type="text" id="nickI" placeholder="Nickname">
+				<button type="submit" id="nickB">Join ›</button>
 			</div>
 		</div>
 		<div class="container">
-			<div class="messages">
-				<div id="messages">
+			<div class="lhs">
+				<div class="chat">
+					<div class="chat-inner">
+						<input type="text" id="chatI" placeholder="Enter your message">
+						<button id="chatB">Send ›</button>
+					</div>
+				</div>
+				<div class="messages" id="messages">
 				</div>
 			</div>
-			<div class="users" id="users">
+			<div class="rhs" id="users">
 				<h3>Online Users</h3>
 			</div>
-			<div class="chat primary">
-				<input type="text" id="chatI" placeholder="Enter your message">
-					<button type="submit" id="chatB"><i class="icon ion-android-arrow-forward"></i></button>
-				</input>
-			</div>
 		</div>
 		<script src="/js/index.js"></script>
 	</body>

code/static/js/index.js

@@ -5,10 +5,6 @@ let nickname = window.localStorage.getItem("nickname");
 let nickI = document.getElementById("nickI");
 let nickB = document.getElementById("nickB");
 
-if (nickname != null) {
-	nickI.value = nickname;	
-}
-
 //Chatting button and input
 let chatI = document.getElementById("chatI");
 let chatB = document.getElementById("chatB");
@@ -20,6 +16,10 @@ let modal = document.getElementById("modal");
 let protocol = location.protocol == "http:" ? "ws:" : "wss:";
 let url = protocol + "//" + location.host + "/websocket";
 
+if (nickname != null) {
+	nickI.value = nickname;	
+}
+
 let ws = new WebSocket(url);
 
 ws.onopen = function() {
@@ -68,9 +68,12 @@ function newMessage(data) {
 
 function chatMessage(sender, content, date) {
 	let msg = create("div", "message");
-	let hr = create("hr", "seperator");
 
-	let author = create("div", "author");
+	aClasses = "author"
+	if (sender === nickname) {
+		aClasses += " self"
+	}
+	let author = create("div", aClasses);
 	author.innerText = sender;
 
 	let timestamp = create("div", "timestamp");
@@ -79,21 +82,17 @@ function chatMessage(sender, content, date) {
 	let text = create("div", "content");
 	text.innerText = content;
 
-	msg.append(hr, author, timestamp, text);
+	msg.append(author, timestamp, text);
 	insertMessage(msg);
 }
 
 function serverMessage(content, date) {
 	let msg = create("div", "message");
-	let hr = create("hr", "seperator");
-
-	let timestamp = create("div", "timestamp");
-	timestamp.innerText = dateToString(new Date(date));
 
 	let text = create("div", "server-message");
 	text.innerText = content;
 
-	msg.append(hr, timestamp, text);
+	msg.append(text);
 	insertMessage(msg);
 }