From 7778e27599846edc6338b55026009754950bc386 Mon Sep 17 00:00:00 2001
From: Joffrey Bion <joffrey.bion@gmail.com>
Date: Mon, 22 Feb 2021 19:58:11 +0100
Subject: Fix player re-order animation

Resolves:
https://github.com/joffrey-bion/seven-wonders/issues/129
---
 .../org/luxons/sevenwonders/ui/components/lobby/RadialList.kt | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'sw-ui/src/main/kotlin/org/luxons')

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)])
         }
     }
 }
-- 
cgit