efim
/
planning-poker-gwargh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: styling cards as fan, tailwind + css vars

This commit is contained in:
efim 2023-05-07 19:35:03 +04:00
parent 3dab3f66b9
commit 57618b268d
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala
View File

@ -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),
)

17
frontend/src/main/scala/industries/sunshine/planningpoker/OwnHandControls.scala
View File

@ -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,
)
)