prettify table rendering

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

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
 

src/main/scala/industries/sunshine/planningpoker/RoomView.scala

@@ -15,15 +15,15 @@ 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)
     )
-    )
   }
 
   def renderPlayer(p: Signal[Player], cardsAmount: Signal[Int]): Element = {

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",
+      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 Closed       => ""
+            case CardBack       => ""
             case Open(vote)   => vote
         }
+      ),
     )
   }