From 9fce0a2be362a2cbd5d78b1ab5b0c13d6f47e89a Mon Sep 17 00:00:00 2001
From: Jakob Odersky <jakob@odersky.com>
Date: Mon, 14 Nov 2016 14:32:13 -0800
Subject: More docs and style

---
 client/src/main/scala/chat/Main.scala | 44 ++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 8 deletions(-)

(limited to 'client/src/main/scala')

diff --git a/client/src/main/scala/chat/Main.scala b/client/src/main/scala/chat/Main.scala
index ba41355..964486e 100644
--- a/client/src/main/scala/chat/Main.scala
+++ b/client/src/main/scala/chat/Main.scala
@@ -5,6 +5,7 @@ import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
 import scala.scalajs.js
 
 import org.scalajs.dom
+import org.scalajs.dom.html
 import org.scalajs.dom.raw.MessageEvent
 import scala.scalajs.js.annotation.JSExport
 import upickle.default._
@@ -14,39 +15,66 @@ import scalatags.JsDom.all._
 @JSExport
 object Main {
 
+  // these need to be rendered as they will be updated by external events
+  val history = div(`height`:="300px").render
+  val compose = input(`class`:="form-control", placeholder:="say something").render
+
+  // main ui element, uses bootstrap for styling
+  val chatUi = div(`class`:="container")(
+    div(`class`:="row")(
+      div(`class`:="panel panel-default")(
+        div(`class`:="panel-heading")(
+          h1("Chatterbox")
+        ),
+        div(`class`:="panel-body")(
+          history,
+          div(`class`:="input-group", width:= "100%")(
+            span(`class`:="input-group-addon")(">"),
+            compose
+          )
+        )
+      )
+    )
+  )
+
+  // display a line in the chat box
+  def display(element: Frag) = {
+    val line = div(width:="100%")(element)
+    history.appendChild(line.render)
+  }
+
   @JSExport
   def main(uid: String): Unit = {
+    // root element that will contain this single page app
     val root = dom.document.getElementById("root")
     while (root.firstChild != null) {
       root.removeChild(root.firstChild);
     }
-    
-    val history = textarea().render
-    val compose = input().render
-    root.appendChild(history)
-    root.appendChild(compose)
+    root.appendChild(chatUi.render)
 
+    // react to messages over web socket
     val sock = new dom.WebSocket("ws://localhost:9000/socket/" + uid)
     sock.onmessage = (msg: MessageEvent) => {
       val event = read[Event](msg.data.asInstanceOf[String])
       event match {
         case Joined(uid) =>
-          history.textContent += s"**$uid joined**\n"
+          display(span(s"**Welcome, $uid!**\n"))
         case Message(uid, content) =>
-          history.textContent += s"$uid: $content\n"
+          display(span(s"$uid: $content\n"))
         case _ =>
           dom.console.log(s"unhandled event: $event")
       }
     }
 
+    // react to ui events
     compose.onkeypress = (ev: KeyboardEvent) => {
       if (ev.key == "Enter") {
         val msg = Broadcast(compose.value)
         dom.console.log(s"Sending $msg")
         sock.send(write(msg))
+        compose.value = ""
       }
     }
-
   }
 
 }
-- 
cgit v1.2.3