own hand control - adding interactivity

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

@@ -3,28 +3,40 @@ package industries.sunshine.planningpoker
 import scala.scalajs.js
 import com.raquo.laminar.api.L.{*, given}
 import industries.sunshine.planningpoker.common.Models.*
+import io.laminext.fetch.Fetch
+import scala.scalajs.js.Dynamic.{global => g}
+
+import concurrent.ExecutionContext.Implicits.global
 
 object OwnHandControls {
   def render(roomStateSignal: Signal[RoomStateView]): Element = {
-    val a = 1
+    val cardTypesSignal = roomStateSignal.map(myUnselectedCards(_))
     div(
-    className := "flex flex-row justify-center",
-    renderCard("xs"),
-    renderCard("s"),
-    renderCard("m"),
-    renderCard("l"),
+      className := "flex flex-row justify-center",
+      children <-- cardTypesSignal.map(_.map(renderCard(_)))
     )
   }
 
-  def renderCard(value: String): Element = {
-     div(
-      className := "w-24 h-48 m-1 rounded flex justify-center items-center m-3",
-      className :=  "text-black bg-gray-50 border-black border-2",
+  private def renderCard(value: String): Element = {
+    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",
+      onClick.flatMap(_ => submitVote) --> Observer(resp => g.console.info(resp.toString())),
       div(
         className := "-rotate-45 text-xl",
         value
       )
     )
-
   }
+
+  private def myUnselectedCards(state: RoomStateView): List[String] = {
+    state.round match {
+      case RoundState.Voting(myCard, _) =>
+        state.allowedCards.filterNot(value => myCard.contains(value))
+      case RoundState.Viewing(votes) =>
+        state.allowedCards.filterNot(value => votes.toMap.get(state.me).contains(value))
+    }
+  }
+
 }