From 57618b268d7f5a3695fc658495dc75e1ac476472 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Sun, 7 May 2023 19:35:03 +0400
Subject: [PATCH] feat: styling cards as fan, tailwind + css vars

---
 .../sunshine/planningpoker/OtherPlayers.scala   | 12 ++++++++----
 .../planningpoker/OwnHandControls.scala         | 17 ++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala b/frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala
index 7be313f..b5ff2ea 100644
--- a/frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala
+++ b/frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala
@@ -40,19 +40,23 @@ object OtherPlayers {
     )
   }
 
+  /**
+   * adds css variables to be used in tailwindcss classes
+   */
   def dynamicCardStyle(index: Int, totalCards: Int): String = {
     val offCenterIndex = 2*index - (totalCards + 1)
     val maxOffCenter = (totalCards + 1) / 2
-    val angle = Math.round((offCenterIndex / maxOffCenter.toDouble) * 20)
-    val xOffset = (offCenterIndex * 0.3)
-    s"transform: rotate(${angle}deg) translateX(${xOffset}em) "
+    val angle = Math.round((offCenterIndex / maxOffCenter.toDouble) * 25)
+    val xOffset = (offCenterIndex * 0.2)
+    s" --custom-rotate: ${angle}deg; --custom-x-translate: ${xOffset}rem; "
   }
 
   def renderHandCardBacks(amountSignal: Signal[Int]): Element = {
     def renderCard(index: Int, totalCards: Int): Element =
       div(
         className := "w-8 h-12 rounded bg-green-500 text-yellow m-1 border border-green-700 drop-shadow-md",
-        className := "absolute ",
+        className := "origin-bottom rotate-[--custom-rotate] translate-x-[--custom-x-translate]",
+        className := "absolute start-5",
         styleAttr := dynamicCardStyle(index, totalCards),
 
       )
diff --git a/frontend/src/main/scala/industries/sunshine/planningpoker/OwnHandControls.scala b/frontend/src/main/scala/industries/sunshine/planningpoker/OwnHandControls.scala
index 6135b8b..f87dd79 100644
--- a/frontend/src/main/scala/industries/sunshine/planningpoker/OwnHandControls.scala
+++ b/frontend/src/main/scala/industries/sunshine/planningpoker/OwnHandControls.scala
@@ -17,13 +17,16 @@ object OwnHandControls {
     )
   }
 
+  /**
+   * adds css variables to be used in tailwindcss classes
+   */
   def dynamicCardStyle(index: Int, totalCards: Int): String = {
     val offCenterIndex = 2*index - (totalCards + 1)
     val maxOffCenter = (totalCards + 1) / 2
-    val angle = Math.round((offCenterIndex / maxOffCenter.toDouble) * 15)
-    val xOffset = offCenterIndex * 1.3
-    s"$offCenterIndex ${(offCenterIndex.toLong / maxOffCenter.toLong)} transform: rotate(${angle}deg) "
-    s"transform: rotate(${angle}deg) translateX(${xOffset}em) translateY(-2em)"
+    val angle = Math.round((offCenterIndex / maxOffCenter.toDouble) * 17)
+    val xOffset = offCenterIndex * 1.4
+    val yOffset = -1.7 + Math.pow( Math.abs( offCenterIndex ), 1.5) * 0.2
+    s" --custom-rotate: ${angle}deg; --custom-x-translate: ${xOffset}rem; --custom-y-translate: ${yOffset}rem"
   }
 
   private def renderCard(cardWithIndex: (String, Int), totalCards: Int): Element = {
@@ -32,12 +35,12 @@ object OwnHandControls {
 
     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 drop-shadow-md",
-      className := " hover:z-50 hover:drop-shadow-xl rounded-lg hover:bg-gray-100 ease-linear duration-200",
-      className := "absolute origin-bottom start-1/2",
+      className := " hover:-translate-y-8 hover:scale-[1.05] hover:z-50 hover:drop-shadow-xl rounded-lg hover:bg-white ease-linear duration-200",
+      className := "absolute origin-bottom start-1/2 rotate-[--custom-rotate] translate-x-[--custom-x-translate] translate-y-[--custom-y-translate]",
       styleAttr := dynamicCardStyle(index, totalCards),
       onClick.flatMap(_ => submitVote) --> Observer(resp => g.console.info(resp.toString())),
       div(
-        className := "-rotate-45 text-xl",
+        className := "-rotate-45 text-3xl",
         value,
       )
     )