feat: upgrade move list variation ui

CSSLab · Feb 11, 2025 · 6d40330 · 6d40330
1 parent 794cc69
commit 6d40330
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 7 deletions.
diff --git a/src/components/Board/AnalysisMovesContainer.tsx b/src/components/Board/AnalysisMovesContainer.tsx
@@ -102,8 +102,7 @@ function FirstVariation({
     <>
       <div className="col-span-2"></div>
       <div className="col-span-5 py-1">
-        {/* Render the variations as a nested list */}
-        <ul className="ml-2 list-none">
+        <ul className="root list-none pl-6">
           {node.getVariations().map((n) => (
             <VariationTree
               key={n.move}
@@ -133,7 +132,7 @@ function VariationTree({
 }) {
   const variations = node.getVariations()
   return (
-    <li className="mb-1">
+    <li className={`tree-li ${level === 0 ? 'no-tree-connector' : ''}`}>
       <span
         onClick={() => goToNode(node)}
         className={`cursor-pointer text-xs ${
@@ -143,7 +142,6 @@ function VariationTree({
         {node.moveNumber}. {node.turn === 'w' ? '...' : ''} {node.san}
       </span>
       {variations.length === 1 ? (
-        // If only one variation, chain it inline.
         <span className="inline">
           <InlineChain
             node={node}
@@ -153,8 +151,7 @@ function VariationTree({
           />
         </span>
       ) : variations.length > 1 ? (
-        // Multiple variations get rendered as nested list.
-        <ul className="ml-4 list-none">
+        <ul className="tree-ul list-none">
           {variations.map((child) => (
             <VariationTree
               key={child.move}
@@ -208,7 +205,7 @@ function InlineChain({
         ))}
       </span>
       {current.getVariations().length > 1 && (
-        <ul className="ml-4 list-none">
+        <ul className="tree-ul list-none">
           {current.getVariations().map((child) => (
             <VariationTree
               key={child.move}

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -103,3 +103,59 @@ svg {
     transform: rotate(360deg);
   }
 }
+
+.tree-ul {
+  position: relative;
+  margin-left: 0.5rem;
+  padding-left: 0.1rem;
+}
+
+.tree-li {
+  position: relative;
+  padding-left: 0.5rem;
+}
+
+/* Vertical Lines */
+.tree-li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: #be6559;
+}
+
+/* Horizontal Lines */
+.tree-li::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.9rem;
+  width: 0.4rem;
+  border-top: 1px solid #be6559;
+}
+
+/* Vertical Lines */
+.tree-li::backdrop {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.9rem;
+  width: 2rem;
+  height: 2rem;
+  background-color: #be6559;
+}
+
+/* .no-tree-connector::after {
+  display: none !important;
+} */
+
+/* .root > li:first-child::before {
+  display: none;
+} */
+
+.tree-ul > li:last-child::before {
+  bottom: auto;
+  height: 0.9rem;
+}