60 lines
1.3 KiB
Svelte
60 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import BaseTrack from './BaseTrack.svelte';
|
|
|
|
export let feature: {
|
|
tunnelType: 'start' | 'whole' | 'end';
|
|
length: string;
|
|
};
|
|
|
|
export let activeElec: any;
|
|
|
|
export let reversed: boolean = false;
|
|
|
|
const portalColour = '#475569'; // Slate grey
|
|
|
|
$: effectiveType = (() => {
|
|
if (!reversed || feature.tunnelType === 'whole') return feature.tunnelType;
|
|
return feature.tunnelType === 'start' ? 'end' : 'start';
|
|
})();
|
|
</script>
|
|
|
|
<svg viewBox="0 0 64 64" width="64" height="64" class="tunnel">
|
|
<BaseTrack {activeElec} height={64} />
|
|
|
|
<g fill="none" stroke={portalColour} stroke-width="3" stroke-linecap="round">
|
|
{#if effectiveType === 'whole'}
|
|
<path d="M 16 12 Q 32 24 48 12" />
|
|
<path d="M 16 52 Q 32 40 48 52" />
|
|
{:else if effectiveType === 'start'}
|
|
<path d="M 16 12 Q 32 24 48 12" />
|
|
{:else if effectiveType === 'end'}
|
|
<path d="M 16 52 Q 32 40 48 52" />
|
|
{/if}
|
|
</g>
|
|
|
|
{#if feature.tunnelType === 'whole' && feature.length}
|
|
<rect x="12" y="26" width="40" height="12" fill="white" />
|
|
<text
|
|
x="32"
|
|
y="35"
|
|
text-anchor="middle"
|
|
font-size="8.5"
|
|
font-weight="bold"
|
|
fill={portalColour}
|
|
class="t-text"
|
|
>
|
|
{feature.length}
|
|
</text>
|
|
{/if}
|
|
</svg>
|
|
|
|
<style>
|
|
svg {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
.t-text {
|
|
font-family: ui-monospace, monospace;
|
|
}
|
|
</style>
|