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,9 +104,10 @@ object JoinRoomComponent {
         } --> responseReceived
     )
 
-
     div(
-      className := "flex flex-col h-full justify-center",
+      className := "bg-green-50 w-full h-full flex justify-center",
+      div(
+        className := "w-60 flex flex-col justify-center",
         "Logging in:",
         nameInput(roomNameVar, "Enter room name:"),
         passInput(roomPassVar, "room password"),
@@ -114,13 +117,12 @@ object JoinRoomComponent {
         newRoomButton,
         div(
           div(
-          code("received:")
+            code("error log:")
           ),
           div(
             cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900",
             children.command <-- responsesStream.recoverToTry.map {
-            case Success(response) =>
+              case Success(response) => {
-              {
                 CollectionCommand.Append(
                   div(
                     div(
@@ -149,5 +151,6 @@ object JoinRoomComponent {
           )
         )
       )
+    )
   }
 }