diff options
Diffstat (limited to 'sw-ui')
| -rw-r--r-- | sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt | 11 |
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)]) } } } |