Implement basic frontend

7 files changed, 56 insertions, 15 deletions

diff --git a/build.sbt b/build.sbt
index 3d43cd6..c33c245 100644
--- a/build.sbt
+++ b/build.sbt
@@ -16,11 +16,12 @@ lazy val server = (project in file("server"))
 lazy val client = (project in file("client"))
   .enablePlugins(ScalaJSPlugin, ScalaJSWeb)
   .settings(
-    persistLauncher := true,
-    persistLauncher in Test := false,
+    //persistLauncher := true,
+    //persistLauncher in Test := false,
     libraryDependencies ++= Seq(
       "org.scala-js" %%% "scalajs-dom" % "0.9.1",
-      "com.lihaoyi" %%% "upickle" % "0.4.3"
+      "com.lihaoyi" %%% "upickle" % "0.4.3",
+      "com.lihaoyi" %%% "scalatags" % "0.6.1"
     )
   )
   .dependsOn(sharedJs)
diff --git a/client/src/main/scala/chat/Main.scala b/client/src/main/scala/chat/Main.scala
index dbc2876..ba41355 100644
--- a/client/src/main/scala/chat/Main.scala
+++ b/client/src/main/scala/chat/Main.scala
@@ -1,22 +1,52 @@
 package chat
 
+import org.scalajs.dom.raw.KeyboardEvent
 import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
 import scala.scalajs.js
 
 import org.scalajs.dom
 import org.scalajs.dom.raw.MessageEvent
+import scala.scalajs.js.annotation.JSExport
 import upickle.default._
+import scalatags.JsDom.all._
 
-object Main extends js.JSApp {
 
-  def main(): Unit = {
+@JSExport
+object Main {
+
+  @JSExport
+  def main(uid: String): Unit = {
     val root = dom.document.getElementById("root")
-    val sock = new dom.WebSocket("ws://localhost:9000/socket/john")
+    while (root.firstChild != null) {
+      root.removeChild(root.firstChild);
+    }
+    
+    val history = textarea().render
+    val compose = input().render
+    root.appendChild(history)
+    root.appendChild(compose)
 
+    val sock = new dom.WebSocket("ws://localhost:9000/socket/" + uid)
     sock.onmessage = (msg: MessageEvent) => {
       val event = read[Event](msg.data.asInstanceOf[String])
-      dom.console.log(event.toString())
+      event match {
+        case Joined(uid) =>
+          history.textContent += s"**$uid joined**\n"
+        case Message(uid, content) =>
+          history.textContent += s"$uid: $content\n"
+        case _ =>
+          dom.console.log(s"unhandled event: $event")
+      }
     }
+
+    compose.onkeypress = (ev: KeyboardEvent) => {
+      if (ev.key == "Enter") {
+        val msg = Broadcast(compose.value)
+        dom.console.log(s"Sending $msg")
+        sock.send(write(msg))
+      }
+    }
+
   }
 
 }
diff --git a/server/app/controllers/HomeController.scala b/server/app/controllers/HomeController.scala
index 4d48c98..7f5e596 100644
--- a/server/app/controllers/HomeController.scala
+++ b/server/app/controllers/HomeController.scala
@@ -31,6 +31,10 @@ class HomeController @Inject() (
     Ok(views.html.index())
   }
 
+  def chat(uid: String) = Action { implicit request =>
+    Ok(views.html.chat(uid))
+  }
+
   def socket(uid: String) = WebSocket.accept[Command, Event] { request =>
     ActorFlow.actorRef(out => Props(classOf[ClientActor], uid, room, out))
   }
diff --git a/server/app/controllers/actors.scala b/server/app/controllers/actors.scala
index f10f925..138a13f 100644
--- a/server/app/controllers/actors.scala
+++ b/server/app/controllers/actors.scala
@@ -41,10 +41,10 @@ class RoomActor extends Actor {
       }
 
     case Terminated(client) =>
-      clients -= client
       for ( (cl, _) <- clients ) {
         cl ! Left(clients(client))
       }
+      clients -= client
 
     case Broadcast(content) =>
       val origin = clients(sender)
diff --git a/server/app/views/chat.scala.html b/server/app/views/chat.scala.html
new file mode 100644
index 0000000..3a1fa30
--- /dev/null
+++ b/server/app/views/chat.scala.html
@@ -0,0 +1,11 @@
+@(uid: String)
+
+@main("Welcome to Chat") {
+    <main id="root">
+	Loading
+    </main>
+    <script src="@routes.Assets.versioned("client-fastopt.js")" type="text/javascript"></script>
+    <script type="text/javascript">
+     chat.Main().main("@uid")
+    </script>
+}
diff --git a/server/app/views/index.scala.html b/server/app/views/index.scala.html
index 4b71c59..05dbc0d 100644
--- a/server/app/views/index.scala.html
+++ b/server/app/views/index.scala.html
@@ -1,11 +1,5 @@
 @()
 
 @main("Welcome to Chat") {
-    <main id="root">
-	hello
-    </main>
-    <script src="@routes.Assets.versioned("client-fastopt.js")" type="text/javascript"></script>
-    <script type="text/javascript">
-     chat.Main().main()
-    </script>
+    
 }
diff --git a/server/conf/routes b/server/conf/routes
index ab400c7..5d2c73e 100644
--- a/server/conf/routes
+++ b/server/conf/routes
@@ -5,6 +5,7 @@
 
 # An example controller showing a sample home page
 GET     /                           controllers.HomeController.index
+GET     /chat/:uid		    controllers.HomeController.chat(uid)
 GET     /socket/:uid		    controllers.HomeController.socket(uid)
 
 # Map static resources from the /public folder to the /assets URL path