From f845f91a8e97911ab285b4745bdcbaae4e4bcdfc Mon Sep 17 00:00:00 2001 From: efim Date: Fri, 21 Apr 2023 23:49:36 +0400 Subject: [PATCH] prettify table rendering --- .../sunshine/planningpoker/LiveChart.scala | 49 ++----------------- .../sunshine/planningpoker/Models.scala | 22 +++++++-- .../sunshine/planningpoker/RoomView.scala | 8 +-- .../sunshine/planningpoker/TableView.scala | 32 +++++++----- 4 files changed, 48 insertions(+), 63 deletions(-) diff --git a/src/main/scala/industries/sunshine/planningpoker/LiveChart.scala b/src/main/scala/industries/sunshine/planningpoker/LiveChart.scala index d106159..e6b2821 100644 --- a/src/main/scala/industries/sunshine/planningpoker/LiveChart.scala +++ b/src/main/scala/industries/sunshine/planningpoker/LiveChart.scala @@ -18,55 +18,16 @@ def LiveChart(): Unit = ) object Main { + val bgColor = "bg-green-200" def appElement(): Element = { div( - className := "w-screen h-screen flex flex-col justify-center items-center bg-green-100", - div( // container for row of pictures - className := "flex flex-row w-1/2 justify-center", - a( - className := "flex-initial", - href := "https://vitejs.dev", - target := "_blank", - img(src := "/vite.svg", className := "", alt := "Vite logo") - ), - a( - className := "flex-initial", - href := "https://developer.mozilla.org/en-US/docs/Web/JavaScript", - target := "_blank", - img(src := javascriptLogo, className := "", alt := "JavaScript logo") - ) - ), + className := "w-screen h-screen flex flex-col justify-center items-center", div( - className := "flex-initial", - h1("Hello Laminar and Vite and stuff and other stuff!") + className := "h-24 w-full flex flex-for justify-center items-center", + className := bgColor, + p(className := "text-2xl", "Here be header"), ), - div( - className := "bg-blue-400 flex-initial rounded-lg border-2 border-slate-500 p-1 m-1", - counterButton() - ), - p(className := "flex-initial", "Click on the Vite logo to learn more"), RoomView.renderRoom(RoomStateView.testRoom) ) } } - -def counterButton(): Element = { - val counter = Var(0) - button( - tpe := "button", - "count is ", - child.text <-- counter, - onClick --> { event => counter.update(c => c + 1) } - ) -} - -def setupCounter(element: dom.Element): Unit = - var counter = 0 - - def setCounter(count: Int): Unit = - counter = count - element.innerHTML = s"count is $counter" - - element.addEventListener("click", e => setCounter(counter + 1)) - setCounter(0) -end setupCounter diff --git a/src/main/scala/industries/sunshine/planningpoker/Models.scala b/src/main/scala/industries/sunshine/planningpoker/Models.scala index f2a0f3c..a6a829b 100644 --- a/src/main/scala/industries/sunshine/planningpoker/Models.scala +++ b/src/main/scala/industries/sunshine/planningpoker/Models.scala @@ -25,14 +25,28 @@ final case class RoomStateView( object RoomStateView { val testRoom = { val me = Player("wormy", PlayerID()) + val pony = Player("pony", PlayerID()) RoomStateView( - players = List(me, Player("birdy", PlayerID()), Player("pony", PlayerID())), + players = List(me, Player("birdy", PlayerID()), pony), me = me.id, allowedCards = List("xs", "s", "m", "l", "xl"), - round = OpenRound(myCard = Some("l"), alreadyVoted = List(me)), + round = VotingRound(myCard = Some("l"), alreadyVoted = List(me, pony)), canCloseRound = true ) } + val testOpenedRoom = { + val me = Player("wormy", PlayerID()) + val pony = Player("pony", PlayerID()) + val birdy = Player("birdy", PlayerID()) + RoomStateView( + players = List(me, birdy, pony), + me = me.id, + allowedCards = List("xs", "s", "m", "l", "xl"), + round = ViewingRound(Map( me.id -> "xs", pony.id -> "l", birdy.id -> "s" )), + canCloseRound = true + ) + } + } trait RoundState @@ -40,14 +54,14 @@ trait RoundState /** view state for round before votes are open player can know their vote and * who of the other players have voted */ -final case class OpenRound( +final case class VotingRound( myCard: Option[String], alreadyVoted: List[Player] ) extends RoundState /** view state for round after opening the votes */ -final case class ClosedRound( +final case class ViewingRound( votes: Map[PlayerID, String] ) extends RoundState diff --git a/src/main/scala/industries/sunshine/planningpoker/RoomView.scala b/src/main/scala/industries/sunshine/planningpoker/RoomView.scala index ec9c514..f42e2d4 100644 --- a/src/main/scala/industries/sunshine/planningpoker/RoomView.scala +++ b/src/main/scala/industries/sunshine/planningpoker/RoomView.scala @@ -15,14 +15,14 @@ object RoomView { } div( - className := "w-96 h-96 border-4 border-amber-900", + className := "w-full h-full border-4 border-amber-900 flex flex-col", div( className := "flex flex-row", children <-- otherPlayers.split(_.id) { (id, initial, playerSignal) => renderPlayer(playerSignal, roomStateSignal.map(_.allowedCards.size)) - }, - TableView.renderTable(roomStateSignal) - ) + } + ), + TableView.renderTable(roomStateSignal) ) } diff --git a/src/main/scala/industries/sunshine/planningpoker/TableView.scala b/src/main/scala/industries/sunshine/planningpoker/TableView.scala index 329caf2..dc535c3 100644 --- a/src/main/scala/industries/sunshine/planningpoker/TableView.scala +++ b/src/main/scala/industries/sunshine/planningpoker/TableView.scala @@ -19,7 +19,7 @@ object TableView { ) div( - className := "w-32 h-24 border-2 border-amber-700 flex flex-row", + className := "w-full h-full border-2 border-amber-700 flex flex-row justify-center items-center bg-green-100", children <-- playerIdToCardTypeSignal.split(_._1) { (id, initial, cardTypeSignal) => renderPlayerCard(cardTypeSignal.map(_._2)) @@ -29,7 +29,7 @@ object TableView { trait CardState case class NoCard(name: String) extends CardState - case object Closed extends CardState + case object CardBack extends CardState case class Open(value: String) extends CardState def getPlayerCardType( @@ -38,9 +38,9 @@ object TableView { name: String ): CardState = { state match { - case isOpen: OpenRound => - isOpen.alreadyVoted.find(_.id == id).fold(NoCard(name))(_ => Closed) - case isClosed: ClosedRound => + case isOpen: VotingRound => + isOpen.alreadyVoted.find(_.id == id).fold(NoCard(name))(_ => CardBack) + case isClosed: ViewingRound => isClosed.votes .get(id) .fold { @@ -51,13 +51,23 @@ object TableView { } def renderPlayerCard(state: Signal[CardState]): Element = { + val cardTypeStyle = state.map { + case NoCard(_) => "bg-green-100 text-black border-2 border-black" + case CardBack => "bg-green-500 border-4 border-green-700" + case Open(_) => "text-black bg-gray-50 border-black border-2" + } + div( - className := "w-4 h-8 m-1 rounded bg-gray-400 text-yellow-400", - child.text <-- state.map { - case NoCard(name) => name - case Closed => "" - case Open(vote) => vote - } + className := "w-20 h-40 m-1 rounded flex justify-center items-center m-3", + className <-- cardTypeStyle, + div( + className := "-rotate-45 text-xl", + child.text <-- state.map { + case NoCard(name) => name + case CardBack => "" + case Open(vote) => vote + } + ), ) }