From ddab953b8daa5aab01dedb5d0a3b8ead7790294d Mon Sep 17 00:00:00 2001 From: Hamza Ali Date: Wed, 2 Sep 2020 10:37:23 +0700 Subject: [PATCH] code: change color scheme --- code/hub.go | 18 +++- code/main.go | 8 +- code/static/css/style.css | 221 ++++++++++++++++++++------------------ code/static/index.html | 26 +++-- code/static/js/index.js | 23 ++-- 5 files changed, 162 insertions(+), 134 deletions(-) diff --git a/code/hub.go b/code/hub.go index 8efd0db..daa5e3a 100644 --- a/code/hub.go +++ b/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 diff --git a/code/main.go b/code/main.go index eafa8cc..e090ddd 100644 --- a/code/main.go +++ b/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()) } } diff --git a/code/static/css/style.css b/code/static/css/style.css index fb29669..9354941 100644 --- a/code/static/css/style.css +++ b/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} diff --git a/code/static/index.html b/code/static/index.html index 633703d..786fcb4 100644 --- a/code/static/index.html +++ b/code/static/index.html @@ -6,31 +6,29 @@ -
Warning: This is some message.
+
-
-
+
+
+
+ + +
+
+
-
+

Online Users

-
- - - -
diff --git a/code/static/js/index.js b/code/static/js/index.js index caade35..11e73ec 100644 --- a/code/static/js/index.js +++ b/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); }