37 lines
1.0 KiB
Svelte
37 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { getElecColour } from '$lib/railStyles';
|
|
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
|
|
|
|
export let feature: {
|
|
position: 'left' | 'right' | 'both';
|
|
elecLoop?: string;
|
|
};
|
|
|
|
export let reversed: boolean = false;
|
|
export let activeElec: any;
|
|
|
|
$: 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 effectivePosition === 'left' || feature.position === 'both'}
|
|
<path d={leftPath} />
|
|
{/if}
|
|
|
|
{#if effectivePosition === 'right' || feature.position === 'both'}
|
|
<path d={rightPath} />
|
|
{/if}
|
|
</g>
|
|
|
|
<BaseTrack {activeElec} height={64} />
|
|
</svg>
|