styling and animation of own card controls

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

@@ -9,11 +9,23 @@ object OtherPlayers {
     val otherPlayers = roomStateSignal.map { state =>
       state.players.filterNot(_.id == state.me).zipWithIndex
     }
+    def playerCardsAmountSignal(id: PlayerID): Signal[Int] = {
+      roomStateSignal.map(state => {
+        val totalCards = state.allowedCards.size
+        val playerModification = state.round match {
+          case RoundStateView.Viewing(votes) if votes.toMap.contains(id)           => -1
+          case RoundStateView.Voting(_, votedPlayers) if votedPlayers.contains(id) => -1
+          case _                                                                   => 0
+        }
+
+        totalCards + playerModification
+      })
+    }
 
     div(
       className := "flex flex-row",
-      children <-- otherPlayers.split(_._1.id) { (id, initial, playerSignal) =>
-        renderPlayer(playerSignal, roomStateSignal.map(_.allowedCards.size))
+      children <-- otherPlayers.split(_._1.id) { (playerID, initial, playerSignal) =>
+        renderPlayer(playerSignal, playerCardsAmountSignal(playerID))
       }
     )
   }
@@ -21,7 +33,7 @@ object OtherPlayers {
   def renderPlayer(p: Signal[(Player, Int)], cardsAmount: Signal[Int]): Element = {
     val xOffsetStyleSignal = p.map(_._2)
     div(
-      className := "w-20 h-20 border-2 border-amber-400 m-2 absolute",
+      className := "bg-green-200 border-b-2 border-black rounded p-2 m-2 absolute drop-shadow-xl",
       // left <-- p.map(tuple => ((1 + tuple._2) * 10000).toString()),
       styleAttr <-- p.map(tuple => s"left: ${(1 + tuple._2) * 100}px"),
       child.text <-- p.map(_._1.name),
@@ -32,7 +44,7 @@ object OtherPlayers {
   def renderHandCardBacks(amountSignal: Signal[Int]): Element = {
     def renderCard(index: Int): Element =
       div(
-        className := "w-4 h-8 m-1 rounded bg-gray-600 text-yellow"
+        className := "w-8 h-12 rounded bg-green-500 text-yellow m-1 border border-green-700 drop-shadow-md"
       )
 
     div(

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

@@ -21,7 +21,8 @@ object OwnHandControls {
     val submitVote = Fetch.get(s"/api/vote/$value").text
 
     div(
-      className := "cursor-pointer w-24 h-48 m-1 rounded-l flex justify-center items-center m-3 text-black bg-gray-50 border-black border-2",
+      className := "cursor-pointer w-24 h-48 m-1 rounded-l flex justify-center items-center m-3 text-black bg-gray-50 border-black border-2 drop-shadow-md",
+      className := "hover:-translate-y-2 hover:scale-[1.02] hover:drop-shadow-xl hover:bg-gray-100 ease-linear duration-200",
       onClick.flatMap(_ => submitVote) --> Observer(resp => g.console.info(resp.toString())),
       div(
         className := "-rotate-45 text-xl",

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

@@ -19,9 +19,9 @@ object TableView {
         )
 
     div(
-      className := "w-full h-full border-2 border-amber-700 flex flex-col justify-center items-center bg-green-100",
+      className := "w-full h-full flex flex-col justify-center items-center bg-green-100",
       div(
-        className := "w-full border-2 border-amber-600 flex flex-row justify-center items-center bg-green-100",
+        className := "w-full flex flex-row justify-center items-center bg-green-100",
         children <-- playerIdToCardTypeSignal.split(_._1) { (id, initial, cardTypeSignal) =>
           renderPlayerCard(cardTypeSignal.map(_._2))
         }
@@ -53,7 +53,7 @@ object TableView {
           .find(_._1 == id)
           .fold {
             g.console.error(s"missing vote for player $name")
-            Open(name, "error")
+            NoCard(name)
           } { case (_, vote) => Open(name, vote) }
     }
   }
@@ -66,11 +66,11 @@ object TableView {
     }
 
     div(
-      className := "w-20 h-40 m-1 rounded flex flex-col justify-center items-center m-3",
+      className := "w-20 h-40 m-1 rounded m-3 relative",
       className <-- cardTypeStyle,
       // the diagonal card value \ place text
       div(
-        className := "-rotate-45 text-xl",
+        className := "-rotate-45 text-xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
         child.text <-- state.map {
           case NoCard(name)   => name
           case CardBack(name) => name
@@ -79,13 +79,12 @@ object TableView {
       ),
       // name under viewing the votes
       div(
-        className := "text-xl",
+        className := "text-xl absolute bottom-1 left-1/2  transform -translate-x-1/2",
         child.text <-- state.map {
           case Open(name, _) => name
-          case _ => ""
+          case _             => ""
         }
       )
-
     )
   }