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>
|
||||
|
||||
Reference in New Issue
Block a user