Add UI for prepared move and cancellation

6 files changed, 76 insertions, 28 deletions

diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
new file mode 100644
index 00000000..f5b16248
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
@@ -0,0 +1,36 @@
+package org.luxons.sevenwonders.ui.components
+
+import kotlinx.css.Overflow
+import kotlinx.css.Position
+import kotlinx.css.bottom
+import kotlinx.css.left
+import kotlinx.css.overflow
+import kotlinx.css.pct
+import kotlinx.css.position
+import kotlinx.css.properties.transform
+import kotlinx.css.properties.translate
+import kotlinx.css.px
+import kotlinx.css.right
+import kotlinx.css.top
+import styled.StyleSheet
+
+object GlobalStyles : StyleSheet("GlobalStyles", isStatic = true) {
+
+    val fullscreen by css {
+        position = Position.fixed
+        top = 0.px
+        left = 0.px
+        bottom = 0.px
+        right = 0.px
+        overflow = Overflow.hidden
+    }
+
+    val fixedCenter by css {
+        position = Position.fixed
+        left = 50.pct
+        top = 50.pct
+        transform {
+            translate((-50).pct, (-50).pct)
+        }
+    }
+}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
index 48c993fc..2551b43c 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
@@ -3,15 +3,12 @@ package org.luxons.sevenwonders.ui.components.game
 import com.palantir.blueprintjs.Intent
 import com.palantir.blueprintjs.bpButton
 import com.palantir.blueprintjs.bpButtonGroup
-import com.palantir.blueprintjs.org.luxons.sevenwonders.ui.components.game.handComponent
-import kotlinx.css.CSSBuilder
-import kotlinx.css.Overflow
+import com.palantir.blueprintjs.bpOverlay
 import kotlinx.css.Position
 import kotlinx.css.background
 import kotlinx.css.backgroundSize
 import kotlinx.css.bottom
 import kotlinx.css.left
-import kotlinx.css.overflow
 import kotlinx.css.pct
 import kotlinx.css.position
 import kotlinx.css.properties.transform
@@ -25,9 +22,12 @@ import org.luxons.sevenwonders.model.Action
 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.ui.components.GlobalStyles
 import org.luxons.sevenwonders.ui.redux.GameState
 import org.luxons.sevenwonders.ui.redux.RequestPrepareMove
 import org.luxons.sevenwonders.ui.redux.RequestSayReady
+import org.luxons.sevenwonders.ui.redux.RequestUnprepareMove
 import org.luxons.sevenwonders.ui.redux.connectStateAndDispatch
 import react.RBuilder
 import react.RClass
@@ -45,11 +45,13 @@ interface GameSceneStateProps: RProps {
     var players: List<PlayerDTO>
     var gameState: GameState?
     var preparedMove: PlayerMove?
+    var preparedCard: HandCard?
 }
 
 interface GameSceneDispatchProps: RProps {
     var sayReady: () -> Unit
     var prepareMove: (move: PlayerMove) -> Unit
+    var unprepareMove: () -> Unit
 }
 
 interface GameSceneProps : GameSceneStateProps, GameSceneDispatchProps
@@ -61,7 +63,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
             css {
                 background = "url('images/background-papyrus3.jpg')"
                 backgroundSize = "cover"
-                fullScreen()
+                +GlobalStyles.fullscreen
             }
             val turnInfo = props.gameState?.turnInfo
             if (turnInfo == null) {
@@ -114,6 +116,28 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
                     prepareMove = props.prepareMove
                 )
             }
+            val card = props.preparedCard
+            if (card != null) {
+                bpOverlay(isOpen = true, onClose = props.unprepareMove) {
+                    styledDiv {
+                        css { +GlobalStyles.fixedCenter }
+                        cardImage(card)
+                        styledDiv {
+                            css {
+                                position = Position.absolute
+                                top = 0.px
+                                right = 0.px
+                            }
+                            bpButton(
+                                icon = "cross",
+                                title = "Cancel prepared move",
+                                small = true,
+                                intent = Intent.DANGER, onClick = { props.unprepareMove() }
+                            )
+                        }
+                    }
+                }
+            }
             if (turnInfo.action == Action.SAY_READY) {
                 sayReadyButton {
                     css {
@@ -136,6 +160,7 @@ private val gameScene: RClass<GameSceneProps> = connectStateAndDispatch<GameScen
     clazz = GameScene::class,
     mapDispatchToProps = { dispatch, _ ->
         prepareMove = { move -> dispatch(RequestPrepareMove(move)) }
+        unprepareMove = { dispatch(RequestUnprepareMove()) }
         sayReady = { dispatch(RequestSayReady()) }
     },
     mapStateToProps = { state, _ ->
@@ -143,14 +168,7 @@ private val gameScene: RClass<GameSceneProps> = connectStateAndDispatch<GameScen
         players = state.gameState?.players ?: emptyList()
         gameState = state.gameState
         preparedMove = state.gameState?.currentPreparedMove
+        preparedCard = state.gameState?.currentPreparedCard
     }
 )
 
-private fun CSSBuilder.fullScreen() {
-    position = Position.fixed
-    top = 0.px
-    left = 0.px
-    bottom = 0.px
-    right = 0.px
-    overflow = Overflow.hidden
-}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
index 985b3deb..17ceffd2 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
@@ -1,4 +1,4 @@
-package com.palantir.blueprintjs.org.luxons.sevenwonders.ui.components.game
+package org.luxons.sevenwonders.ui.components.game
 
 import com.palantir.blueprintjs.Intent
 import com.palantir.blueprintjs.bpButton
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
index 458dc7c4..43a1592b 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
@@ -1,5 +1,6 @@
 package org.luxons.sevenwonders.ui.components.home
 
+import org.luxons.sevenwonders.ui.components.GlobalStyles
 import react.RBuilder
 import react.dom.*
 import styled.css
@@ -9,9 +10,9 @@ private const val LOGO = "images/logo-7-wonders.png"
 
 fun RBuilder.home() = styledDiv {
     css {
-        +HomeStyles.fullscreen
-        +HomeStyles.center
-        +HomeStyles.homeRoot
+        +GlobalStyles.fullscreen
+        +HomeStyles.centerChildren
+        +HomeStyles.zeusBackground
     }
 
     img(src = LOGO, alt = "Seven Wonders") {}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
index 3686f35c..624f430c 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
@@ -5,24 +5,15 @@ import styled.StyleSheet
 
 object HomeStyles : StyleSheet("HomeStyles", isStatic = true) {
 
-    val homeRoot by css {
+    val zeusBackground by css {
         background = "url('images/background-zeus-temple.jpg') center no-repeat"
         backgroundSize = "cover"
     }
 
-    val center by css {
+    val centerChildren by css {
         display = Display.flex
         flexDirection = FlexDirection.column
         alignItems = Align.center
         justifyContent = JustifyContent.center
     }
-
-    val fullscreen by css {
-        position = Position.fixed
-        top = 0.px
-        left = 0.px
-        bottom = 0.px
-        right = 0.px
-        overflow = Overflow.hidden
-    }
 }
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameSagas.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameSagas.kt
index c1788c98..a9c2ca2c 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameSagas.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameSagas.kt
@@ -8,6 +8,7 @@ import org.luxons.sevenwonders.ui.redux.PreparedCardEvent
 import org.luxons.sevenwonders.ui.redux.PreparedMoveEvent
 import org.luxons.sevenwonders.ui.redux.RequestPrepareMove
 import org.luxons.sevenwonders.ui.redux.RequestSayReady
+import org.luxons.sevenwonders.ui.redux.RequestUnprepareMove
 import org.luxons.sevenwonders.ui.redux.TurnInfoEvent
 
 suspend fun SwSagaContext.gameSaga(session: SevenWondersSession) {
@@ -17,6 +18,7 @@ suspend fun SwSagaContext.gameSaga(session: SevenWondersSession) {
         val preparedCardsSub = session.watchPreparedCards(game.id)
         val turnInfoSub = session.watchTurns()
         val sayReadyJob = launch { onEach<RequestSayReady> { session.sayReady() } }
+        val unprepareJob = launch { onEach<RequestUnprepareMove> { session.unprepareMove() } }
         val prepareMoveJob = launch {
             onEach<RequestPrepareMove> {
                 val move = session.prepareMove(it.move)