From d285cac5a3f546d37a31b8cbd06cd46b6325a7e6 Mon Sep 17 00:00:00 2001 From: Joffrey Bion Date: Sun, 22 Mar 2020 23:02:08 +0100 Subject: Fix radial math to account for reversed Y axis --- .../sevenwonders/ui/components/lobby/RadialMath.kt | 23 ++++++++++++---------- .../ui/components/lobby/RadialPlayerList.kt | 2 +- 2 files changed, 14 insertions(+), 11 deletions(-) (limited to 'sw-ui-kt/src/main/kotlin') 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 index d03a423b..d668ab9b 100644 --- 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 @@ -25,30 +25,33 @@ private fun PolarCoords.toCartesian() = CartesianCoords( y = radius.toDouble().yProjection(angleDeg.toRadians()) ) +// Y-axis is pointing down in the browser, so the directions need to be reversed +// (positive angles are now clockwise) enum class Direction(private val value: Int) { - CLOCKWISE(-1), - COUNTERCLOCKWISE(1); + 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 spreadArcDegrees: Int = 360, // full circle + val firstItemAngleDegrees: Int = 0, // 12 o'clock val direction: Direction = Direction.CLOCKWISE ) { val diameter: Int = radius * 2 } -private const val DEFAULT_START = 90 // Up +private const val DEFAULT_START = -90 // Up, because Y-axis is reversed -fun offsetsFromCenter(nbItems: Int, radialConfig: RadialConfig = RadialConfig()): List = - (0 until nbItems).map { itemCartesianOffsets(it, nbItems, radialConfig) } +fun offsetsFromCenter(nbItems: Int, radialConfig: RadialConfig = RadialConfig()): List { + val startAngle = DEFAULT_START + radialConfig.direction.toOrientedDegrees(radialConfig.firstItemAngleDegrees) + val angleStep = radialConfig.spreadArcDegrees / nbItems + return List(nbItems) { itemCartesianOffsets(startAngle, angleStep, it, 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 +private fun itemCartesianOffsets(startAngle: Int, angleStep: Int, index: Int, config: RadialConfig): CartesianCoords { 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 index d243d901..472f5811 100644 --- 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 @@ -34,7 +34,7 @@ fun RBuilder.radialPlayerList(players: List): ReactElement { itemHeight = 100, options = RadialConfig( radius = 175, - offsetDegrees = 180 + firstItemAngleDegrees = 180 // self at the bottom ) ) } -- cgit