package org.luxons.sevenwonders.ui.components.game

import com.palantir.blueprintjs.bpIcon
import kotlinx.css.*
import org.luxons.sevenwonders.model.cards.HandRotationDirection
import react.RBuilder
import styled.css
import styled.styledDiv
import styled.styledImg

fun RBuilder.handRotationIndicator(direction: HandRotationDirection) {
    styledDiv {
        css {
            position = Position.absolute
            display = Display.flex
            alignItems = Align.center
            bottom = 25.vh
        }
        val sideDistance = 2.rem
        when (direction) {
            HandRotationDirection.LEFT -> {
                css { left = sideDistance }
                bpIcon("arrow-left", size = 25)
                handCardsImg()
            }
            HandRotationDirection.RIGHT -> {
                css { right = sideDistance }
                handCardsImg()
                bpIcon("arrow-right", size = 25)
            }
        }
    }
}

private fun RBuilder.handCardsImg() {
    styledImg(src = "images/hand-cards5.png") {
        css {
            width = 4.rem
        }
    }
}

package org.luxons.sevenwonders.ui.components.game

import com.palantir.blueprintjs.bpIcon
import kotlinx.css.*
import kotlinx.html.title
import org.luxons.sevenwonders.model.cards.HandRotationDirection
import react.RBuilder
import styled.css
import styled.styledDiv
import styled.styledImg

fun RBuilder.handRotationIndicator(direction: HandRotationDirection) {
    styledDiv {
        css {
            position = Position.absolute
            display = Display.flex
            alignItems = Align.center
            bottom = 25.vh
        }
        attrs {
            title = "Your hand will be passed to the player on your $direction after playing this card."
        }
        val sideDistance = 2.rem
        when (direction) {
            HandRotationDirection.LEFT -> {
                css { left = sideDistance }
                bpIcon("arrow-left", size = 25)
                handCardsImg()
            }
            HandRotationDirection.RIGHT -> {
                css { right = sideDistance }
                handCardsImg()
                bpIcon("arrow-right", size = 25)
            }
        }
    }
}

private fun RBuilder.handCardsImg() {
    styledImg(src = "images/hand-cards5.png") {
        css {
            width = 4.rem
        }
    }
}

Add title on hand rotation direction
Add title on hand rotation direction

luxons/seven-wonders,luxons/seven-wonders,luxons/seven-wonders