small prettification of join room component

frontend/src/main/scala/industries/sunshine/planningpoker/FrontendMain.scala

@@ -27,7 +27,7 @@ object Main {
   def appElement(): Element = {
     div(
       className := "w-screen h-screen flex flex-col justify-center items-center",
-      Header.render(loggedIn.writer),
+      Header.render(loggedIn.writer, loggedIn.signal),
       child <-- loggedIn.signal.map(if (_) emptyNode else JoinRoomComponent.render(loggedIn.writer)),
       child <-- loggedIn.signal.map(
         if (_) RoomView.renderRoom(loggedIn.writer) else emptyNode

frontend/src/main/scala/industries/sunshine/planningpoker/Header.scala

@@ -10,20 +10,22 @@ import scala.scalajs.js.Dynamic.{global => g}
 import concurrent.ExecutionContext.Implicits.global
 
 object Header {
-  def render(loggedIn: Observer[Boolean]): Element = {
+  def render(loggedInObserver: Observer[Boolean], loggedInSignal: Signal[Boolean]): Element = {
     val (responsesStream, responseReceived) = EventStream.withCallback[FetchResponse[String]]
 
     val logoutButton = button(
-      "Logout",
+      "Leave Room",
+      className := "border border-black m-2 p-2 absolute right-2",
       onClick.flatMap(_ => Fetch.get("/api/logout").text) --> responseReceived,
       responsesStream --> Observer(resp => g.console.info(s"${resp.toString()}")),
-      responsesStream.collect { case resp if resp.ok => false } --> loggedIn
+      responsesStream.collect { case resp if resp.ok => false } --> loggedInObserver
     )
+    val cachedEmpty = emptyNode
 
     div(
       className := "h-24 w-full flex flex-for justify-center items-center bg-green-200",
-      p(className := "text-2xl", "Here be header"),
+      p(className := "text-2xl", "Planning Poker Grargh (nonpretty prealpha version)"),
-      logoutButton
+      child <-- loggedInSignal.map(if (_) logoutButton else cachedEmpty)
     )
   }
 }

frontend/src/main/scala/industries/sunshine/planningpoker/JoinRoomComponent.scala

@@ -9,7 +9,6 @@ import io.laminext.fetch.circe._
 import scala.util.Failure
 import scala.util.Success
 
-
 import concurrent.ExecutionContext.Implicits.global
 
 object JoinRoomComponent {
@@ -41,18 +40,18 @@ object JoinRoomComponent {
     )
   )
 
-  val roomNameVar = Var("testroom")
+  val roomNameVar = Var("")
-  val roomPassVar = Var("password")
+  val roomPassVar = Var("")
-  val nicknameVar = Var("me")
+  val nicknameVar = Var("")
-  val nicknamePass = Var("nickpass")
+  val nicknamePass = Var("")
 
   val (responsesStream, responseReceived) = EventStream.withCallback[FetchResponse[String]]
 
-
   def render(loggedIn: Observer[Boolean]): Element = {
 
     val submitButton = button(
       "Join room",
+      className := "m-1 border-2 rounded-full border-green-400 bg-green-200 shadow-inner shadow-green-400 active:shadow-yellow-400 duration-100 ease-linear",
       onClick
         .mapTo {
           (roomNameVar.now(), roomPassVar.now(), nicknameVar.now(), nicknamePass.now())
@@ -68,7 +67,8 @@ object JoinRoomComponent {
                 nicknamePass
               )
             )
-            .text.map { response =>
+            .text
+            .map { response =>
               if (response.ok) {
                 loggedIn.onNext(true)
                 response
@@ -77,6 +77,7 @@ object JoinRoomComponent {
         } --> responseReceived
     )
     val newRoomButton = button(
+      className := "m-1 border-2 rounded-full border-yellow-400 bg-yellow-200 shadow-inner shadow-yellow-400 active:shadow-red-400 duration-100 ease-linear",
       "Create new room",
       onClick
         .mapTo {
@@ -93,7 +94,8 @@ object JoinRoomComponent {
                 nicknamePass
               )
             )
-            .text.map { response =>
+            .text
+            .map { response =>
               if (response.ok) {
                 loggedIn.onNext(true)
                 response
@@ -102,25 +104,25 @@ object JoinRoomComponent {
         } --> responseReceived
     )
 
-
     div(
-      className := "flex flex-col h-full justify-center",
+      className := "bg-green-50 w-full h-full flex justify-center",
-      "Logging in:",
-      nameInput(roomNameVar, "Enter room name:"),
-      passInput(roomPassVar, "room password"),
-      nameInput(nicknameVar, "Enter your nickname:"),
-      passInput(nicknamePass, "nickname pass:"),
-      submitButton,
-      newRoomButton,
       div(
+        className := "w-60 flex flex-col justify-center",
+        "Logging in:",
+        nameInput(roomNameVar, "Enter room name:"),
+        passInput(roomPassVar, "room password"),
+        nameInput(nicknameVar, "Enter your nickname:"),
+        passInput(nicknamePass, "nickname pass:"),
+        submitButton,
+        newRoomButton,
         div(
-          code("received:")
+          div(
-        ),
+            code("error log:")
-        div(
+          ),
-          cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900",
+          div(
-          children.command <-- responsesStream.recoverToTry.map {
+            cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900",
-            case Success(response) =>
+            children.command <-- responsesStream.recoverToTry.map {
-              {
+              case Success(response) => {
                 CollectionCommand.Append(
                   div(
                     div(
@@ -135,17 +137,18 @@ object JoinRoomComponent {
                   )
                 )
               }
-            case Failure(exception) =>
+              case Failure(exception) =>
-              CollectionCommand.Append(
+                CollectionCommand.Append(
-                div(
                   div(
-                    cls := "flex space-x-2 items-center",
+                    div(
-                    code(cls := "text-red-500", "Error: "),
+                      cls := "flex space-x-2 items-center",
-                    code(cls := "text-red-300", exception.getMessage)
+                      code(cls := "text-red-500", "Error: "),
+                      code(cls := "text-red-300", exception.getMessage)
+                    )
                   )
                 )
-              )
+            }
-          }
+          )
         )
       )
     )