Add homepage and make bridges look nice
This commit is contained in:
@@ -1,80 +1,194 @@
|
||||
<script lang="ts">
|
||||
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
|
||||
import type { ElecType } from '$lib/railStyles';
|
||||
|
||||
export let feature: {
|
||||
position: 'over' | 'under';
|
||||
category: 'rail' | 'footbridge' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway';
|
||||
category: 'rail' |'stream'| 'foot' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway' | 'pipeline';
|
||||
roadName?: string;
|
||||
};
|
||||
|
||||
export let activeElec: string;
|
||||
export let activeElec: ElecType;
|
||||
|
||||
const bridgeStyles = {
|
||||
rail: { color: '#ffffff', stroke: '#000000', width: 20, text: '#000000' },
|
||||
footbridge: { color: '#ffffff', stroke: '#475569', width: 10, text: '#475569' },
|
||||
aroad: { color: '#00703c', stroke: '#004d29', width: 24, text: '#FFEB3B' },
|
||||
minorRoad: { color: '#ffffff', stroke: '#64748b', width: 20, text: '#334155' },
|
||||
motorway: { color: '#005da1', stroke: '#003e6b', width: 32, text: '#ffffff' },
|
||||
waterway: { color: '#bae6fd', stroke: '#0369a1', width: 24, text: '#075985' },
|
||||
pipeline: { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155' }
|
||||
rail: {
|
||||
stroke: '#0f172a',
|
||||
width: 22,
|
||||
bg: '#334155',
|
||||
text: '#ffffff',
|
||||
textBg: '#000000',
|
||||
textBorder: '',
|
||||
type: 'rail'
|
||||
},
|
||||
foot: {
|
||||
stroke: '#475569',
|
||||
width: 10,
|
||||
bg: '#94a3b8',
|
||||
text: '#ffffff',
|
||||
textBg: '#000000',
|
||||
textBorder: '',
|
||||
type: 'path'
|
||||
},
|
||||
aroad: {
|
||||
stroke: '#065f46',
|
||||
width: 32,
|
||||
bg: '#059669',
|
||||
text: '#ffd200',
|
||||
textBg: '#00703c',
|
||||
textBorder: '#ffd200',
|
||||
type: 'road'
|
||||
},
|
||||
minorRoad: {
|
||||
stroke: '#334155',
|
||||
width: 24,
|
||||
bg: '#475569',
|
||||
text: '#000000',
|
||||
textBg: '#ffffff',
|
||||
textBorder: '#000000',
|
||||
type: 'road'
|
||||
},
|
||||
motorway: {
|
||||
stroke: '#1e40af',
|
||||
width: 40,
|
||||
bg: '#3b82f6',
|
||||
text: '#ffffff',
|
||||
textBg: '#007ac1',
|
||||
textBorder: '#ffffff',
|
||||
type: 'road'
|
||||
},
|
||||
waterway: {
|
||||
stroke: '#0369a1',
|
||||
width: 32,
|
||||
bg: '#bae6fd',
|
||||
text: '#075985',
|
||||
textBg: '#000000',
|
||||
textBorder: '',
|
||||
type: 'water'
|
||||
},
|
||||
stream: {
|
||||
stroke: '#0369a1',
|
||||
width: 4,
|
||||
bg: '#bae6fd',
|
||||
text: '#075985',
|
||||
textBg: '#000000',
|
||||
textBorder: '',
|
||||
type: 'water'
|
||||
},
|
||||
pipeline: {
|
||||
stroke: '#1e293b',
|
||||
width: 4,
|
||||
bg: '#1e293b',
|
||||
text: '#ffffff',
|
||||
textBg: '#000000',
|
||||
textBorder: '',
|
||||
type: 'path'
|
||||
}
|
||||
};
|
||||
|
||||
$: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
|
||||
$: isOver = feature.position === 'over';
|
||||
|
||||
$: topY = 32 - s.width / 2;
|
||||
$: bottomY = 32 + s.width / 2;
|
||||
$: xLeft = 6;
|
||||
$: xRight = 58;
|
||||
|
||||
$: topPath = `M 0 ${topY} Q 8 ${topY} 8 ${topY - 4} M 56 ${topY - 4} Q 56 ${topY} 64 ${topY}`;
|
||||
$: bottomPath = `M 0 ${bottomY} Q 8 ${bottomY} 8 ${bottomY + 4} M 56 ${bottomY + 4} Q 56 ${bottomY} 64 ${bottomY}`;
|
||||
|
||||
$: bodyPath = `M 0 ${topY} L 64 ${topY} L 64 ${bottomY} L 0 ${bottomY} Z`;
|
||||
const yTop = 16;
|
||||
const yBottom = 48;
|
||||
</script>
|
||||
|
||||
<svg viewBox="0 0 64 64" width="64" height="64" class="bridge">
|
||||
{#if !isOver}
|
||||
<path d={bodyPath} fill={s.color} />
|
||||
<path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
|
||||
<path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
|
||||
{#if isOver}
|
||||
<BaseTrack {activeElec} height={64} />
|
||||
|
||||
|
||||
<!-- White edge, to provide separation between abutment line and bridge content -->
|
||||
<rect x=0 y={32 - (s.width / 2) - 4} width="64" height="{s.width + 8}" fill="white" />
|
||||
|
||||
<rect x="6" y={32 - (s.width / 2)} width="52" height={s.width} fill={s.bg} />
|
||||
|
||||
{#if s.type === 'road'}
|
||||
<line
|
||||
x1={xLeft}
|
||||
y1="32"
|
||||
x2={xRight}
|
||||
y2="32"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-dasharray="4 3"
|
||||
opacity="0.6"
|
||||
/>
|
||||
{:else if s.type === 'rail'}
|
||||
<line x1={xLeft} y1="28" x2={xRight} y2="28" stroke="#cbd5e1" stroke-width="1.5" />
|
||||
<line x1={xLeft} y1="36" x2={xRight} y2="36" stroke="#cbd5e1" stroke-width="1.5" />
|
||||
{/if}
|
||||
|
||||
<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="square">
|
||||
<path d={`M 20 ${32 - s.width / 2 - 6} L 20 ${32 - s.width / 2 - 4} L 44 ${32 - s.width / 2 - 4} L 44 ${32 - s.width / 2 - 6}`} />
|
||||
|
||||
<path d={`M 20 ${32 + s.width / 2 + 6} L 20 ${32 + s.width / 2 + 4} L 44 ${32 + s.width / 2 + 4} L 44 ${32 + s.width / 2 + 6}`} />
|
||||
</g>
|
||||
{:else}
|
||||
<BaseTrack {activeElec} height={64} />
|
||||
|
||||
<path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
|
||||
|
||||
<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="round">
|
||||
<path d={`M 0 ${topY} L 64 ${topY}`} />
|
||||
<path d={`M 0 ${bottomY} L 64 ${bottomY}`} />
|
||||
<path d={`M 0 ${topY} Q 4 ${topY} 4 ${topY - 6}`} />
|
||||
<path d={`M 64 ${topY} Q 60 ${topY} 60 ${topY - 6}`} />
|
||||
<path d={`M 0 ${bottomY} Q 4 ${bottomY} 4 ${bottomY + 6}`} />
|
||||
<path d={`M 64 ${bottomY} Q 60 ${bottomY} 60 ${bottomY + 6}`} />
|
||||
<rect x="6" y={32 - (s.width / 2)} width="52" height={s.width} fill={s.bg} />
|
||||
|
||||
{#if s.type === 'road'}
|
||||
<line
|
||||
x1={xLeft}
|
||||
y1="32"
|
||||
x2={xRight}
|
||||
y2="32"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-dasharray="4 3"
|
||||
opacity="0.6"
|
||||
/>
|
||||
{:else if s.type === 'rail'}
|
||||
<line x1={xLeft} y1="28" x2={xRight} y2="28" stroke="#cbd5e1" stroke-width="1.5" />
|
||||
<line x1={xLeft} y1="36" x2={xRight} y2="36" stroke="#cbd5e1" stroke-width="1.5" />
|
||||
{/if}
|
||||
|
||||
<rect x="26" y={yTop} width="12" height="64" fill="white" />
|
||||
<g stroke={s.stroke} stroke-width="2.5" fill="none" stroke-linecap="square">
|
||||
<path d={`M 24 ${(32 - (s.width / 2)) - 5} L 25 ${(32 - (s.width / 2)) - 5} L 25 ${(32 - (s.width / 2)) + s.width + 5} L 24 ${(32 - (s.width / 2)) + s.width + 5}`} />
|
||||
|
||||
<path d={`M 40 ${(32 - (s.width / 2)) - 5} L 39 ${(32 - (s.width / 2)) - 5} L 39 ${(32 - (s.width / 2)) + s.width + 5} L 40 ${(32 - (s.width / 2)) + s.width + 5}`} />
|
||||
</g>
|
||||
|
||||
{#if feature.roadName}
|
||||
<BaseTrack {activeElec} height={64} />
|
||||
{/if}
|
||||
|
||||
{#if feature.roadName}
|
||||
<g class="label-group">
|
||||
<rect
|
||||
x={32 - feature.roadName.length * 3 - 4}
|
||||
y="27"
|
||||
width={feature.roadName.length * 6 + 8}
|
||||
height="10"
|
||||
stroke={s.textBorder || s.textBg}
|
||||
stroke-width="1"
|
||||
fill={s.textBg}
|
||||
rx="3"
|
||||
ry="4"
|
||||
/>
|
||||
<text
|
||||
x="32"
|
||||
y="32"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="central"
|
||||
fill={s.text}
|
||||
font-family="sans-serif"
|
||||
font-weight="bold"
|
||||
font-size={s.width > 20 ? '10' : '8'}
|
||||
style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;"
|
||||
font-family="ui-monospace, monospace"
|
||||
font-weight="900"
|
||||
font-size="8"
|
||||
>
|
||||
{feature.roadName}
|
||||
</text>
|
||||
{/if}
|
||||
</g>
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
text {
|
||||
user-select: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { getElecColour } from '$lib/railStyles';
|
||||
import type { ElecType } from '$lib/railStyles';
|
||||
|
||||
export let feature: {
|
||||
from: {
|
||||
elec: string;
|
||||
elec: ElecType;
|
||||
eco?: string;
|
||||
};
|
||||
to: {
|
||||
elec: string;
|
||||
elec: ElecType;
|
||||
eco?: string;
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,43 +1,48 @@
|
||||
<script lang="ts">
|
||||
import { getElecColour } from '$lib/railStyles';
|
||||
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
|
||||
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;
|
||||
};
|
||||
export let activeElec: any;
|
||||
export let reversed: boolean = false;
|
||||
export let feature: {
|
||||
direction: 'up' | 'down';
|
||||
diverges: 'left' | 'right' | 'both';
|
||||
elecBranch?: string;
|
||||
};
|
||||
export let activeElec: any;
|
||||
export let reversed: boolean = false;
|
||||
|
||||
$: isUp = feature.direction === 'up';
|
||||
$: visualUp = reversed ? !isUp : isUp;
|
||||
$: 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 : 0;
|
||||
const yEnd = visualUp ? 8 : 56;
|
||||
const xEnd = side === 'right' ? 56 : 8;
|
||||
return `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
|
||||
};
|
||||
const getPath = (side: 'left' | 'right') => {
|
||||
const yStart = visualUp ? 64 : 0;
|
||||
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')];
|
||||
return [getPath(feature.diverges)];
|
||||
})();
|
||||
$: 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);
|
||||
$: branchColour = getElecColour(feature.elecBranch || activeElec);
|
||||
</script>
|
||||
|
||||
<svg viewBox="0 0 64 64" width="64" height="64" class="junction">
|
||||
{#each paths as d}
|
||||
<path {d} fill="none" stroke={branchColour} stroke-width="5" stroke-linecap="round" />
|
||||
{/each}
|
||||
<BaseTrack {activeElec} height={64} />
|
||||
{#each paths as 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;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,93 +1,121 @@
|
||||
<script lang="ts">
|
||||
export let feature: {
|
||||
routeName: string;
|
||||
routeId: string;
|
||||
};
|
||||
export let feature: {
|
||||
routeName: string;
|
||||
routeId: string;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="link-wrapper">
|
||||
<a href="/map/{feature.routeId}" class="wide-button">
|
||||
<div class="accent-bar"></div>
|
||||
<div class="content">
|
||||
<span class="sub-text">Continue to next map</span>
|
||||
<span class="main-text">{feature.routeName}</span>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/map/{feature.routeId}" class="wide-button">
|
||||
<div class="content">
|
||||
<div class="header-row">
|
||||
<span class="sub-text">Go to</span>
|
||||
<span class="route-id-chip">{feature.routeId}</span>
|
||||
</div>
|
||||
<span class="main-text">{feature.routeName}</span>
|
||||
</div>
|
||||
|
||||
<div class="icon-circle">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20">
|
||||
<path
|
||||
d="M5 12h14M12 5l7 7-7 7"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.link-wrapper {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.link-wrapper {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wide-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.wide-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
text-decoration: none;
|
||||
padding: 12px 16px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.accent-bar {
|
||||
width: 6px;
|
||||
align-self: stretch;
|
||||
background: #475569;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.sub-text {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.main-text {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
}
|
||||
.route-id-chip {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 800;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: 20px;
|
||||
color: #cbd5e1;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.main-text {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fafc;
|
||||
border-radius: 50%;
|
||||
color: #94a3b8;
|
||||
transition: all 0.3s ease;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.wide-button:hover {
|
||||
border-color: #94a3b8;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.wide-button:hover {
|
||||
border-color: #cbd5e1;
|
||||
background: #fdfdfd;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.wide-button:hover .icon {
|
||||
color: #475569;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.wide-button:hover .icon-circle {
|
||||
background: #4f46e5;
|
||||
color: #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.wide-button:active {
|
||||
transform: scale(0.98);
|
||||
background: #f1f5f9;
|
||||
}
|
||||
</style>
|
||||
.wide-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,14 @@
|
||||
to: string;
|
||||
};
|
||||
|
||||
export let reversed: boolean = false;
|
||||
|
||||
export let activeElec: any;
|
||||
|
||||
$: effectiveFeature = {
|
||||
from: reversed ? feature.to : feature.from,
|
||||
to: reversed ? feature.from : feature.to
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
|
||||
@@ -24,10 +31,10 @@
|
||||
|
||||
<g font-family="sans-serif" font-weight="800" font-size="11">
|
||||
<text x="70" y="24" fill="#4338ca" style="text-transform: uppercase;">
|
||||
{feature.from}
|
||||
{effectiveFeature.from}
|
||||
</text>
|
||||
<text x="70" y="46" fill="#4338ca" style="text-transform: uppercase;">
|
||||
{feature.to}
|
||||
{effectiveFeature.to}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -1,56 +1,59 @@
|
||||
<script lang="ts">
|
||||
import BaseTrack from "./BaseTrack.svelte";
|
||||
import BaseTrack from './BaseTrack.svelte';
|
||||
|
||||
export let feature: {
|
||||
tunnelType: "start" | "whole" | "end";
|
||||
length: string;
|
||||
};
|
||||
export let feature: {
|
||||
tunnelType: 'start' | 'whole' | 'end';
|
||||
length: string;
|
||||
};
|
||||
|
||||
export let activeElec: any;
|
||||
export let activeElec: any;
|
||||
|
||||
export let reversed: boolean = false;
|
||||
export let reversed: boolean = false;
|
||||
|
||||
const portalColour = "#475569"; // Slate grey
|
||||
const portalColour = '#475569'; // Slate grey
|
||||
|
||||
$: effectiveType = (() => {
|
||||
if (!reversed || feature.tunnelType === 'whole') return feature.tunnelType;
|
||||
return feature.tunnelType === 'start' ? 'end' : 'start';
|
||||
})();
|
||||
$: 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} />
|
||||
<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" />
|
||||
<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>
|
||||
|
||||
{: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}
|
||||
{#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>
|
||||
svg {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
.t-text {
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,5 +23,5 @@ export const components = {
|
||||
signallerChange: SignallerChange,
|
||||
electrificationChange: ElectrificationChange,
|
||||
default: BaseTrack,
|
||||
tunnel: Tunnel,
|
||||
tunnel: Tunnel
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user