Convert Lobby from TypeScript react

8 files changed, 347 insertions, 10 deletions

diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
index 68ec1409..5e602ae5 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
@@ -20,7 +20,7 @@ fun RBuilder.application() = hashRouter {
     switch {
         route("/games") { gameBrowser() }
         route<IdProps>("/game/:id") { props -> gameScene(props.match.params.id) }
-        route<IdProps>("/lobby/:id") { props -> lobby(props.match.params.id) }
+        route<IdProps>("/lobby") { lobby() }
         route("/", exact = true) { home() }
         redirect(from = "*", to = "/")
     }
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
index 9804f954..360937ed 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
@@ -1,13 +1,69 @@
 package org.luxons.sevenwonders.ui.components.lobby
 
+import kotlinx.html.js.onClickFunction
+import org.luxons.sevenwonders.model.api.LobbyDTO
+import org.luxons.sevenwonders.model.api.PlayerDTO
+import org.luxons.sevenwonders.ui.redux.RequestStartGameAction
+import org.luxons.sevenwonders.ui.redux.connect
 import react.RBuilder
+import react.RComponent
+import react.RProps
+import react.RState
 import react.dom.*
 
-fun RBuilder.lobby(lobbyId: Long) = div {
-    h1 {
-        +"Lobby $lobbyId"
-    }
-    p {
-        +"Can't wait to play!"
+interface LobbyStateProps : RProps {
+    var currentGame: LobbyDTO?
+    var currentPlayer: PlayerDTO?
+    var players: List<PlayerDTO>
+}
+
+interface LobbyDispatchProps : RProps {
+    var startGame: () -> Unit
+}
+
+interface LobbyProps : LobbyDispatchProps, LobbyStateProps
+
+class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props) {
+
+    override fun RBuilder.render() {
+        val currentGame = props.currentGame
+        val currentPlayer = props.currentPlayer
+        if (currentGame == null || currentPlayer == null) {
+            div { +"Error: no current game." }
+            return
+        }
+        div {
+            h2 { +"${currentGame.name} — Lobby" }
+            radialPlayerList(props.players)
+            if (currentPlayer.isGameOwner) {
+                // <Button text="START"
+                //         className={Classes.LARGE}
+                //         intent={Intent.PRIMARY}
+                //         icon='play'
+                //         onClick={startGame}
+                //         disabled={players.size < 3}/>
+                button {
+                    attrs {
+                        onClickFunction = { props.startGame() }
+                        disabled = props.players.size < 3
+                    }
+                    +"START"
+                }
+            }
+        }
     }
 }
+
+fun RBuilder.lobby() = lobby {}
+
+val lobby = connect<LobbyStateProps, LobbyDispatchProps, LobbyProps>(
+    clazz = LobbyPresenter::class,
+    mapStateToProps = { state, _ ->
+        currentGame = state.lobby
+        currentPlayer = state.player
+        players = state.lobby?.players ?: emptyList()
+    },
+    mapDispatchToProps = { dispatch, _ ->
+        startGame = { dispatch(RequestStartGameAction()) }
+    }
+)
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
new file mode 100644
index 00000000..be3bb1de
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
@@ -0,0 +1,121 @@
+package org.luxons.sevenwonders.ui.components.lobby
+
+import kotlinx.css.CSSBuilder
+import kotlinx.css.Display
+import kotlinx.css.ListStyleType
+import kotlinx.css.Position
+import kotlinx.css.display
+import kotlinx.css.height
+import kotlinx.css.left
+import kotlinx.css.listStyleType
+import kotlinx.css.margin
+import kotlinx.css.padding
+import kotlinx.css.pct
+import kotlinx.css.position
+import kotlinx.css.properties.Timing
+import kotlinx.css.properties.ms
+import kotlinx.css.properties.transform
+import kotlinx.css.properties.transition
+import kotlinx.css.properties.translate
+import kotlinx.css.px
+import kotlinx.css.top
+import kotlinx.css.width
+import kotlinx.css.zIndex
+import react.RBuilder
+import react.ReactElement
+import react.dom.*
+import styled.css
+import styled.styledDiv
+import styled.styledLi
+import styled.styledUl
+
+typealias ElementBuilder = RBuilder.() -> ReactElement
+
+fun RBuilder.radialList(
+    itemBuilders: List<ElementBuilder>,
+    centerElementBuilder: ElementBuilder,
+    itemWidth: Int,
+    itemHeight: Int,
+    options: RadialConfig = RadialConfig()
+): ReactElement {
+    val containerWidth = options.diameter + itemWidth
+    val containerHeight = options.diameter + itemHeight
+
+    return styledDiv {
+        css {
+            zeroMargins()
+            position = Position.relative
+            width = containerWidth.px
+            height = containerHeight.px
+        }
+        radialListItems(itemBuilders, options)
+        radialListCenter(centerElementBuilder)
+    }
+}
+
+private fun RBuilder.radialListItems(itemBuilders: List<ElementBuilder>, radialConfig: RadialConfig): ReactElement {
+    val offsets = offsetsFromCenter(itemBuilders.size, radialConfig)
+    return styledUl {
+        css {
+            zeroMargins()
+            transition(property = "all", duration = 500.ms, timing = Timing.easeInOut)
+            zIndex = 1
+            width = radialConfig.diameter.px
+            height = radialConfig.diameter.px
+            absoluteCenter()
+        }
+        itemBuilders.forEachIndexed { i, itemBuilder ->
+            radialListItem(itemBuilder, i, offsets[i])
+        }
+    }
+}
+
+private fun RBuilder.radialListItem(itemBuilder: ElementBuilder, i: Int, offset: CartesianCoords): ReactElement {
+    return styledLi {
+        css {
+            display = Display.block
+            position = Position.absolute
+            top = 50.pct
+            left = 50.pct
+            zeroMargins()
+            listStyleType = ListStyleType.unset
+            transition("all", 500.ms, Timing.easeInOut)
+            zIndex = 1
+            transform {
+                translate(offset.x.px, offset.y.px)
+                translate((-50).pct, (-50).pct)
+            }
+        }
+        attrs {
+            key = "$i"
+        }
+        itemBuilder()
+    }
+}
+
+private fun RBuilder.radialListCenter(centerElement: ElementBuilder?): ReactElement? {
+    if (centerElement == null) {
+        return null
+    }
+    return styledDiv {
+        css {
+            zIndex = 0
+            absoluteCenter()
+        }
+        centerElement()
+    }
+}
+
+private fun CSSBuilder.absoluteCenter() {
+    position = Position.absolute
+    left = 50.pct
+    top = 50.pct
+    transform {
+        translate((-50).pct, (-50).pct)
+    }
+}
+
+private fun CSSBuilder.zeroMargins() {
+    margin = "0"
+    padding = "0"
+}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialMath.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialMath.kt
new file mode 100644
index 00000000..e4d51cf8
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialMath.kt
@@ -0,0 +1,54 @@
+package org.luxons.sevenwonders.ui.components.lobby
+
+import kotlin.math.PI
+import kotlin.math.cos
+import kotlin.math.roundToInt
+import kotlin.math.sin
+
+data class CartesianCoords(
+    val x: Int,
+    val y: Int
+)
+
+data class PolarCoords(
+    val radius: Int,
+    val angleDeg: Int
+)
+
+private fun Int.toRadians() = (this * PI / 180.0)
+private fun Double.project(angleRad: Double, trigFn: (Double) -> Double) = (this * trigFn(angleRad)).roundToInt()
+private fun Double.xProjection(angleRad: Double) = project(angleRad, ::cos)
+private fun Double.yProjection(angleRad: Double) = project(angleRad, ::sin)
+
+private fun PolarCoords.toCartesian() = CartesianCoords(
+    x = radius.toDouble().xProjection(angleDeg.toRadians()),
+    y = radius.toDouble().yProjection(angleDeg.toRadians())
+)
+
+enum class Direction(private val value: Int) {
+    CLOCKWISE(-1),
+    COUNTERCLOCKWISE(1);
+
+    fun toOrientedDegrees(deg: Int) = value * deg
+}
+
+data class RadialConfig(
+    val radius: Int = 120,
+    val arcDegrees: Int = 360, // full circle
+    val offsetDegrees: Int = 0, // 12 o'clock
+    val direction: Direction = Direction.CLOCKWISE
+) {
+    val diameter: Int = radius * 2
+}
+
+private const val DEFAULT_START = 90; // Up
+
+fun offsetsFromCenter(nbItems: Int, radialConfig: RadialConfig = RadialConfig()): List<CartesianCoords> =
+        (0 until nbItems).map { itemCartesianOffsets(it, nbItems, radialConfig) }
+
+private fun itemCartesianOffsets(index: Int, nbItems: Int, config: RadialConfig): CartesianCoords {
+    val startAngle = DEFAULT_START + config.direction.toOrientedDegrees(config.offsetDegrees)
+    val angleStep = config.arcDegrees / nbItems
+    val itemAngle = startAngle + config.direction.toOrientedDegrees(angleStep) * index
+    return PolarCoords(config.radius, itemAngle).toCartesian()
+}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
new file mode 100644
index 00000000..de6eabbd
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
@@ -0,0 +1,106 @@
+package org.luxons.sevenwonders.ui.components.lobby
+
+import kotlinx.css.Align
+import kotlinx.css.FlexDirection
+import kotlinx.css.alignContent
+import kotlinx.css.flexDirection
+import kotlinx.css.margin
+import kotlinx.css.opacity
+import org.luxons.sevenwonders.model.api.PlayerDTO
+import react.RBuilder
+import react.ReactElement
+import react.dom.*
+import styled.css
+import styled.styledDiv
+import styled.styledH5
+
+fun RBuilder.radialPlayerList(players: List<PlayerDTO>): ReactElement {
+    val playerItemBuilders = players
+        .withUserFirst()
+        .growTo(targetSize = 3)
+        .map { p -> p.elementBuilder() }
+
+    val tableImgBuilder: ElementBuilder = { roundTableImg() }
+
+    return radialList(
+        itemBuilders = playerItemBuilders,
+        centerElementBuilder = tableImgBuilder,
+        itemWidth = 120,
+        itemHeight = 100,
+        options = RadialConfig(
+            radius = 175,
+            offsetDegrees = 180
+        )
+    )
+}
+
+private fun RBuilder.roundTableImg(): ReactElement = img {
+    attrs {
+        src = "images/round-table.png"
+        alt = "Round table"
+        width = "200"
+        height = "200"
+    }
+}
+
+private fun List<PlayerDTO>.withUserFirst(): List<PlayerDTO> {
+    val nonUsersBeginning = takeWhile { !it.isUser }
+    val userToEnd = subList(nonUsersBeginning.size, size)
+    return userToEnd + nonUsersBeginning
+}
+
+private fun <T> List<T>.growTo(targetSize: Int): List<T?> {
+    if (size >= targetSize) return this
+    return this + List(targetSize - size) { null }
+}
+
+private fun PlayerDTO?.elementBuilder(): ElementBuilder {
+    if (this == null) {
+        return { playerPlaceholder() }
+    } else {
+        return { playerItem(this@elementBuilder) }
+    }
+}
+
+private fun RBuilder.playerItem(player: PlayerDTO): ReactElement = styledDiv {
+    css {
+        flexDirection = FlexDirection.column
+        alignContent = Align.center
+    }
+    val title = if (player.isGameOwner) "Game owner" else null
+    userIcon(isUser = player.isUser, isOwner = player.isGameOwner, title = title)
+    styledH5 {
+        css {
+           margin = "0"
+        }
+        +player.displayName
+    }
+}
+
+private fun RBuilder.playerPlaceholder(): ReactElement = styledDiv {
+    css {
+        flexDirection = FlexDirection.column
+        alignContent = Align.center
+        opacity = 0.3
+    }
+    userIcon(isUser = false, isOwner = false, title = "Waiting for player...")
+    styledH5 {
+        css {
+           margin = "0"
+        }
+        +"?"
+    }
+}
+
+private fun RBuilder.userIcon(isUser: Boolean, isOwner: Boolean, title: String?): ReactElement {
+    // TODO
+    // const icon: IconName = isOwner ? 'badge' : 'user';
+    // const intent: Intent = isUser ? Intent.WARNING : Intent.NONE;
+    // return <Icon icon={icon} iconSize={50} intent={intent} title={title}/>;
+    val owner = if (isOwner) "(owner)" else ""
+    val user = if (isUser) "(me)" else ""
+    val hint = listOf(owner, user).joinToString(" ")
+    return span {
+        +hint
+    }
+}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameBrowserSagas.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameBrowserSagas.kt
index 02c8f5f0..f2dd4e0f 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameBrowserSagas.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/redux/sagas/GameBrowserSagas.kt
@@ -52,6 +52,6 @@ private suspend fun SwSagaContext.handleGameJoined(
     dispatch(EnterLobbyAction(lobby.id))
     coroutineScope {
         launch { lobbySaga(session, lobby.id) }
-        Router.lobby(lobby.id)
+        Router.lobby()
     }
 }
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/router/Router.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/router/Router.kt
index fa768cbf..25cb2ec1 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/router/Router.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/router/Router.kt
@@ -12,8 +12,8 @@ object Router {
         push("/game/$id")
     }
 
-    fun lobby(id: Long) {
-        push("/lobby/$id")
+    fun lobby() {
+        push("/lobby")
     }
 
     private fun push(path: String) {
diff --git a/sw-ui-kt/src/main/resources/images/round-table.png b/sw-ui-kt/src/main/resources/images/round-table.png
new file mode 100644
index 00000000..f277376d
--- /dev/null
+++ b/sw-ui-kt/src/main/resources/images/round-table.png