(x,y)->(y,x)

packages/website/src/components/TankopediaLoadout/index.module.css

@@ -139,74 +139,75 @@
   }
 
   .tree {
-    --column-gap: var(--space-5);
+    /* The game lays the tree out left to right; here depth runs top to bottom */
-    --row-gap: var(--space-4);
+    --depth-gap: var(--space-5);
+    --sibling-gap: var(--space-4);
     --line-thickness: var(--space-1);
     --line-border: var(--space-1) solid var(--gray-6);
 
     display: grid;
-    gap: var(--row-gap) var(--column-gap);
+    gap: var(--depth-gap) var(--sibling-gap);
 
     .cell {
       position: relative;
 
-      .trunk-up,
+      .trunk-left,
-      .trunk-down {
+      .trunk-right {
         position: absolute;
-        left: calc(var(--column-gap) / -2);
+        top: calc(var(--depth-gap) / -2);
-        height: 100%;
+        width: 100%;
       }
 
-      .trunk-up,
+      .trunk-left,
-      .trunk-down,
+      .trunk-right,
-      .snake-up,
+      .snake-left,
-      .snake-down {
+      .snake-right {
-        border-left: var(--line-border);
-        border-right: var(--line-border);
-      }
-
-      .trunk-up {
-        bottom: 50%;
-      }
-
-      .trunk-down {
-        top: 50%;
-      }
-
-      .left,
-      .right {
-        position: absolute;
-        top: 50%;
-        width: calc(var(--column-gap) / 2);
-
         border-top: var(--line-border);
         border-bottom: var(--line-border);
       }
 
-      .left {
+      .trunk-left {
-        right: 100%;
+        right: 50%;
       }
 
-      .right {
+      .trunk-right {
-        left: 100%;
+        left: 50%;
       }
 
-      .snake-up,
+      .top,
-      .snake-down {
+      .bottom {
         position: absolute;
         left: 50%;
-        transform: translateX(-50%);
+        height: calc(var(--depth-gap) / 2);
-        height: var(--row-gap);
+
+        border-left: var(--line-border);
+        border-right: var(--line-border);
       }
 
-      .snake-up {
+      .top {
         bottom: 100%;
       }
 
-      .snake-down {
+      .bottom {
         top: 100%;
       }
 
+      .snake-left,
+      .snake-right {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: var(--sibling-gap);
+      }
+
+      .snake-left {
+        right: 100%;
+      }
+
+      .snake-right {
+        left: 100%;
+      }
+
       .module {
         position: relative;
 

packages/website/src/components/TankopediaLoadout/index.tsx

@@ -119,7 +119,7 @@ function Modules() {
                 });
               }}
             >
-              <DoubleArrowDownIcon />
+              <DoubleArrowUpIcon />
             </IconButton>
 
             <IconButton
@@ -139,7 +139,7 @@ function Modules() {
                 });
               }}
             >
-              <DoubleArrowUpIcon />
+              <DoubleArrowDownIcon />
             </IconButton>
           </div>
         )}
@@ -221,8 +221,9 @@ function ModuleTree() {
     <div
       className={styles.tree}
       style={{
-        gridTemplateColumns: `repeat(${columns}, var(--module-size))`,
+        // Transposed: the layout's columns (depth) become rows
-        gridTemplateRows: `repeat(${rows}, var(--module-size))`,
+        gridTemplateColumns: `repeat(${rows}, var(--module-size))`,
+        gridTemplateRows: `repeat(${columns}, var(--module-size))`,
       }}
     >
       {cells.map((cell) => {
@@ -232,14 +233,14 @@ function ModuleTree() {
           <div
             key={cell.position.join(",")}
             className={styles.cell}
-            style={{ gridColumn: cell.position[0], gridRow: cell.position[1] }}
+            style={{ gridColumn: cell.position[1], gridRow: cell.position[0] }}
           >
-            {cell.trunkUp && <span className={styles["trunk-up"]} />}
+            {cell.trunkUp && <span className={styles["trunk-left"]} />}
-            {cell.trunkDown && <span className={styles["trunk-down"]} />}
+            {cell.trunkDown && <span className={styles["trunk-right"]} />}
-            {cell.snakeUp && <span className={styles["snake-up"]}></span>}
+            {cell.snakeUp && <span className={styles["snake-left"]} />}
-            {cell.snakeDown && <span className={styles["snake-down"]}></span>}
+            {cell.snakeDown && <span className={styles["snake-right"]} />}
-            {cell.right && <span className={styles.right} />}
+            {cell.right && <span className={styles.bottom} />}
-            {cell.left && <span className={styles.left}></span>}
+            {cell.left && <span className={styles.top} />}
 
             {cell.unlock && module && (
               <ModuleNode
@@ -303,7 +304,7 @@ function ModuleNode({ unlock, module, tooltip }: ModuleNodeProps) {
       size="major"
       radius="1"
       variant={isSelected ? "surface" : "soft"}
-      color={isTop ? "amber" : isSelected ? undefined : "gray"}
+      color={isSelected ? (isTop ? "amber" : undefined) : "gray"}
       className={styles.module}
       onClick={() => {
         if (isTank) return;