Add hand rotation irection indicator

2 files changed, 35 insertions, 1 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
index 46d6b4c1..2422e66f 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
@@ -10,6 +10,7 @@ import org.luxons.sevenwonders.model.PlayerMove
 import org.luxons.sevenwonders.model.PlayerTurnInfo
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.model.cards.HandCard
+import org.luxons.sevenwonders.model.cards.HandRotationDirection
 import org.luxons.sevenwonders.ui.components.GlobalStyles
 import org.luxons.sevenwonders.ui.redux.*
 import react.*
@@ -59,6 +60,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
             }
             actionInfo(turnInfo.message)
             boardComponent(board = board)
+            handRotationIndicator(turnInfo.table.handRotationDirection)
             val hand = turnInfo.hand
             if (hand != null) {
                 handComponent(
@@ -80,7 +82,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
         }
     }
 
-    private fun RDOMBuilder<DIV>.actionInfo(message: String) {
+    private fun RBuilder.actionInfo(message: String) {
         styledDiv {
             css {
                 classes.add("bp3-dark")
@@ -96,6 +98,38 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
         }
     }
 
+    private 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
+            }
+        }
+    }
+
     private fun RBuilder.preparedMove(card: HandCard, move: PlayerMove) {
         bpOverlay(isOpen = true, onClose = props.unprepareMove) {
             styledDiv {
diff --git a/sw-ui/src/main/resources/images/hand-cards5.png b/sw-ui/src/main/resources/images/hand-cards5.png
new file mode 100644
index 00000000..1e2199cd
--- /dev/null
+++ b/sw-ui/src/main/resources/images/hand-cards5.png