add display name for steps

app/src/main/java/com/iqball/app/component/BasketCourt.kt

@@ -1,24 +1,16 @@
 package com.iqball.app.component
 
-import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.requiredWidth
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.wrapContentSize
-
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateMapOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

app/src/main/java/com/iqball/app/component/StepTree.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.chihsuanwu.freescroll.freeScroll
 import com.chihsuanwu.freescroll.rememberFreeScrollState
+import com.iqball.app.domains.getStepName
 import com.iqball.app.model.tactic.StepNodeInfo
 import com.iqball.app.ui.theme.SelectedStepNode
 import com.iqball.app.ui.theme.StepNode
@@ -76,12 +77,13 @@ fun StepsTree(root: StepNodeInfo, selectedNodeId: Int, onNodeSelected: (StepNode
             },
         contentAlignment = Alignment.TopCenter
     ) {
-        StepsTreeContent(root, selectedNodeId, onNodeSelected, nodesOffsets)
+        StepsTreeContent(root, root, selectedNodeId, onNodeSelected, nodesOffsets)
     }
 }
 
 @Composable
 private fun StepsTreeContent(
+    root: StepNodeInfo,
     node: StepNodeInfo,
     selectedNodeId: Int,
     onNodeSelected: (StepNodeInfo) -> Unit,
@@ -93,6 +95,7 @@ private fun StepsTreeContent(
         modifier = Modifier
     ) {
         StepPiece(
+            name = getStepName(root, node.id),
             node = node,
             isSelected = selectedNodeId == node.id,
             onNodeSelected = { onNodeSelected(node) },
@@ -110,6 +113,7 @@ private fun StepsTreeContent(
         ) {
             for (children in node.children) {
                 StepsTreeContent(
+                    root = root,
                     node = children,
                     selectedNodeId = selectedNodeId,
                     onNodeSelected = onNodeSelected,
@@ -122,6 +126,7 @@ private fun StepsTreeContent(
 
 @Composable
 fun StepPiece(
+    name: String,
     node: StepNodeInfo,
     isSelected: Boolean,
     onNodeSelected: () -> Unit,
@@ -136,7 +141,7 @@ fun StepPiece(
         }
     ) {
         Text(
-            text = node.id.toString(),
+            text = name,
             textAlign = TextAlign.Center,
             color = if (isSelected) Color.White else Color.Black,
             modifier = Modifier

app/src/main/java/com/iqball/app/domains/StepsTreeDomains.kt

@@ -0,0 +1,19 @@
+package com.iqball.app.domains
+
+import com.iqball.app.model.tactic.StepNodeInfo
+
+
+fun getStepName(root: StepNodeInfo, step: Int): String {
+    var ord = 1
+    val nodes = mutableListOf(root)
+    while (nodes.isNotEmpty()) {
+        val node = nodes.removeFirst()
+
+        if (node.id == step) break
+
+        ord += 1
+        nodes.addAll(node.children.reversed())
+    }
+
+    return ord.toString()
+}

app/src/main/java/com/iqball/app/page/VisualizerPage.kt

@@ -96,7 +96,6 @@ fun VisualizerPage(
     }
 
 
-
     Column {
         VisualizerHeader(title = info.name, showTree)
         when (screenOrientation) {

app/src/main/res/drawable/half_court.xml

@@ -1,8 +1,8 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="269dp"
-    android:height="309dp"
-    android:viewportWidth="269"
-    android:viewportHeight="309">
+    android:width="200dp"
+    android:height="200dp"
+    android:viewportWidth="270"
+    android:viewportHeight="270">
   <path
       android:pathData="M24,236L24,26"
       android:strokeWidth="2"