Fix player re-order animation

Resolves:
https://github.com/joffrey-bion/seven-wonders/issues/129

1 files changed, 9 insertions, 2 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
index 97320b76..1cccdfb7 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
@@ -39,6 +39,7 @@ fun <T> RBuilder.radialList(
     }
 }
 
+@OptIn(ExperimentalStdlibApi::class)
 private fun <T> RBuilder.radialListItems(
     items: List<T>,
     renderItem: (T) -> ReactElement,
@@ -55,8 +56,14 @@ private fun <T> RBuilder.radialListItems(
             height = radialConfig.diameter.px
             absoluteCenter()
         }
-        items.forEachIndexed { i, item ->
-            radialListItem(renderItem(item), getKey(item), offsets[i])
+        // We ensure a stable order of the DOM elements so that position animations look nice.
+        // We still respect the order of the items in the list when placing them along the circle.
+        val indexByKey = buildMap<String, Int> {
+            items.forEachIndexed { index, item -> put(getKey(item), index) }
+        }
+        items.sortedBy { getKey(it) }.forEach { item ->
+            val key = getKey(item)
+            radialListItem(renderItem(item), key, offsets[indexByKey.getValue(key)])
         }
     }
 }