51 lines
1.4 KiB
Svelte
51 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { getElecColour } from '$lib/railStyles';
|
|
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
|
|
|
|
export let feature: {
|
|
direction: 'up' | 'down';
|
|
diverges: 'left' | 'right' | 'both';
|
|
elecBranch?: string;
|
|
goto?: string;
|
|
entryPoint?: string;
|
|
};
|
|
export let activeElec: any;
|
|
export let reversed: boolean = false;
|
|
|
|
$: isUp = feature.direction === 'up';
|
|
$: visualUp = reversed ? !isUp : isUp;
|
|
$: visualSide = (side: 'left' | 'right') => {
|
|
if (!reversed) return side;
|
|
return side === 'left' ? 'right' : 'left';
|
|
};
|
|
|
|
const getPath = (side: 'left' | 'right') => {
|
|
const yStart = visualUp ? 64 : 8;
|
|
const yEnd = visualUp ? 8 : 56;
|
|
const xEnd = side === 'right' ? 56 : 8;
|
|
return `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
|
|
};
|
|
|
|
$: paths = (() => {
|
|
if (feature.diverges === 'both') return [getPath('left'), getPath('right')];
|
|
const effectiveSide = visualSide(feature.diverges as 'left' | 'right');
|
|
return [getPath(effectiveSide)];
|
|
})();
|
|
|
|
$: branchColour = getElecColour(feature.elecBranch || activeElec);
|
|
</script>
|
|
|
|
<svg viewBox="0 0 64 64" width="64" height="64" class="junction">
|
|
{#each paths as d (d)}
|
|
<path {d} fill="none" stroke={branchColour} stroke-width="5" stroke-linecap="round" />
|
|
{/each}
|
|
<BaseTrack {activeElec} height={64} />
|
|
</svg>
|
|
|
|
<style>
|
|
svg {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
</style>
|