efim
/
planning-poker-gwargh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

small prettification of join room component

This commit is contained in:
efim 2023-04-29 23:52:44 +04:00
parent b06baf8c63
commit 65879e092a
2 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/main/scala/industries/sunshine/planningpoker/JoinRoomComponent.scala
View File

@ -9,7 +9,6 @@ import io.laminext.fetch.circe._
import scala.util.Failure import scala.util.Failure
import scala.util.Success import scala.util.Success
import concurrent.ExecutionContext.Implicits.global import concurrent.ExecutionContext.Implicits.global
object JoinRoomComponent { 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]] val (responsesStream, responseReceived) = EventStream.withCallback[FetchResponse[String]]
def render(loggedIn: Observer[Boolean]): Element = { def render(loggedIn: Observer[Boolean]): Element = {
val submitButton = button( val submitButton = button(
"Join room", "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 onClick
.mapTo { .mapTo {
(roomNameVar.now(), roomPassVar.now(), nicknameVar.now(), nicknamePass.now()) (roomNameVar.now(), roomPassVar.now(), nicknameVar.now(), nicknamePass.now())
@ -68,7 +67,8 @@ object JoinRoomComponent {
nicknamePass nicknamePass
) )
) )
.text.map { response => .text
.map { response =>
if (response.ok) { if (response.ok) {
loggedIn.onNext(true) loggedIn.onNext(true)
response response
@ -77,6 +77,7 @@ object JoinRoomComponent {
} --> responseReceived } --> responseReceived
) )
val newRoomButton = button( 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", "Create new room",
onClick onClick
.mapTo { .mapTo {
@ -93,7 +94,8 @@ object JoinRoomComponent {
nicknamePass nicknamePass
) )
) )
.text.map { response => .text
.map { response =>
if (response.ok) { if (response.ok) {
loggedIn.onNext(true) loggedIn.onNext(true)
response response
@ -102,25 +104,26 @@ object JoinRoomComponent {
} --> responseReceived } --> responseReceived
) )
div( 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:", "Logging in:",
nameInput(roomNameVar, "Enter room name:"), nameInput(roomNameVar, "Enter room name:"),
passInput(roomPassVar, "room password"), passInput(roomPassVar, "room password"),
label("Alert: no https, please don't use good passwords"),
nameInput(nicknameVar, "Enter your nickname:"), nameInput(nicknameVar, "Enter your nickname:"),
passInput(nicknamePass, "nickname pass:"), passInput(nicknamePass, "nickname pass:"),
submitButton, submitButton,
newRoomButton, newRoomButton,
div( div(
div( div(
code("received:") code("error log:")
), ),
div( div(
cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900", cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900",
children.command <-- responsesStream.recoverToTry.map { children.command <-- responsesStream.recoverToTry.map {
case Success(response) => case Success(response) => {
{
CollectionCommand.Append( CollectionCommand.Append(
div( div(
div( div(
@ -149,5 +152,6 @@ object JoinRoomComponent {
) )
) )
) )
)
} }
} }

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Planning Poker Grargh : unpretty prealpha version</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>