Complete map display page

src/lib/components/mapIcons/Loop.svelte

@@ -3,7 +3,7 @@
     import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
 
     export let feature: {
-        side: 'left' | 'right' | 'both';
+        position: 'left' | 'right' | 'both';
         elecLoop?: string;
     };
 
@@ -12,17 +12,22 @@
 
     $: loopColour = getElecColour(feature.elecLoop || activeElec);
 
+    $: effectivePosition = (() => {
+        if (!reversed || feature.position === 'both') return feature.position;
+        return feature.position === 'left' ? 'right' : 'left';
+    })();
+
     const leftPath = `M 32 0 Q 8 32 32 64`;
     const rightPath = `M 32 0 Q 56 32 32 64`;
 </script>
 
 <svg viewBox="0 0 64 64" width="64" height="64" class="loops">
     <g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
-        {#if feature.side === 'left' || feature.side === 'both'}
+        {#if effectivePosition === 'left' || feature.position === 'both'}
             <path d={leftPath} />
         {/if}
         
-        {#if feature.side === 'right' || feature.side === 'both'}
+        {#if effectivePosition === 'right' || feature.position === 'both'}
             <path d={rightPath} />
         {/if}
     </g>