From 6a77be395ba196f8599305b265bab839434fcae5 Mon Sep 17 00:00:00 2001
From: Chris Pyles <cpyles@berkeley.edu>
Date: Mon, 1 Jul 2024 23:29:12 -0700
Subject: [PATCH] Refactor node styles to use sass control flow

---
 src/app/node/node.component.scss | 49 +++++++++++++-------------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/app/node/node.component.scss b/src/app/node/node.component.scss
index 59cfe0d..c05b950 100644
--- a/src/app/node/node.component.scss
+++ b/src/app/node/node.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 $wall: 1px solid var(--border-color);
 $size: 2rem;
 
@@ -12,42 +14,29 @@ $size: 2rem;
   text-transform: uppercase;
   width: $size;
 
-  &.up {
-    border-top: $wall;
-  }
-
-  &.right {
-    border-right: $wall;
-  }
-
-  &.down {
-    border-bottom: $wall;
-  }
-
-  &.left {
-    border-left: $wall;
+  @each $class,
+    $dir in ('up': 'top', 'right': 'right', 'down': 'bottom', 'left': 'left')
+  {
+    // Set a border in the direction indicated by the class.
+    &.#{$class} {
+      border-#{$dir}: $wall;
+    }
+
+    // Move the span's text content outside of the element in the direction indicated by which edge
+    // it's on, so that the endpoint arrows are rendered outside the maze edge.
+    &.endpoint-edge-#{$class} span {
+      @if list.index(('top', 'bottom'), $dir) {
+        #{$dir}: -95%;
+      } @else {
+        #{$dir}: -90%;
+      }
+    }
   }
 
   span {
     position: absolute;
   }
 
-  &.endpoint-edge-up span {
-    top: -95%;
-  }
-
-  &.endpoint-edge-right span {
-    right: -90%;
-  }
-
-  &.endpoint-edge-down span {
-    bottom: -95%;
-  }
-
-  &.endpoint-edge-left span {
-    left: -90%;
-  }
-
   span.current-position,
   span.historical-position {
     background: var(--current-position-color);