Skip to content

Commit

Permalink
refactor: line map
Browse files Browse the repository at this point in the history
  • Loading branch information
ludc-octo committed Dec 23, 2023
1 parent fbbf39f commit 8225d51
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 119 deletions.
119 changes: 13 additions & 106 deletions src/routes/timetables/[line]/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import LineMapLabel from './LineMapLabel.svelte';
import LineMapDrawing from './LineMapDrawing.svelte';
import type { PageData } from './$types';
export let data: PageData;
Expand All @@ -9,79 +11,19 @@
<table>
{#each data.lineMap as row}
<tr>
{#each row.drawing as cell}
<td class:filled={cell !== ''}>
{#if cell === '*'}
<svg class="drawing-stop" viewBox="0 0 16 16">
<circle cx="8" cy="8" r={row.isTerminus ? 6 : 4} />
</svg>
{:else if cell === '^'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
<path d="M0,8 a8,-8 0 0,1 8,-8 L0,0 Z" />
</svg>
{:else if cell === 'v'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M0,8 a8,8 0 0,0 8,8 L0,16 Z" />
<path d="M8,16 a8,-8 0 0,0 8,-8 L16,16 Z" />
</svg>
{:else if cell === 'o\\'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if cell === 'o/'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if cell === '\\o'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if cell === '/o'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if cell === '\\.'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{:else if cell === '/.'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{:else if cell === '.\\'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{:else if cell === './'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{/if}
{#if ['', ''].includes(cell)}
<span>{cell}</span>
{/if}
{#each row.drawing as content}
<td class:filled={content !== ''}>
<LineMapDrawing {content} isTerminus={row.isStop && row.isTerminus} />
</td>
{/each}
{#if row.slugName}
{#if row.isStop}
<td class="label">
<a
class="label-text"
class:label-terminus={row.isTerminus}
href="/timetables/{$page.params.line}/{row.slugName}"
>
{row.displayName}
{#if row.lineConnections}
<div class="line-connections">
{#each row.lineConnections as connection}
<img
src="/img/lines-icons/colors/{connection.line}.svg"
alt={connection.line}
/>
{/each}
</div>
{/if}
</a>
<LineMapLabel
displayName={row.displayName}
href={row.href}
isTerminus={row.isTerminus}
lineConnections={row.lineConnections}
/>
</td>
{/if}
</tr>
Expand Down Expand Up @@ -126,45 +68,10 @@
vertical-align: top;
}
.drawing-stop {
display: block;
z-index: 0;
position: absolute;
transform: translate(-0.25rem, 0.5rem);
width: 1.5rem;
fill: #fff;
stroke: #2f2f2f;
stroke-width: 2.5px;
}
.drawing-path {
display: block;
fill: #fff;
}
.label {
padding: 0.2rem 0;
flex-shrink: 1;
flex-grow: 1;
width: auto;
}
.label-terminus {
font-weight: 700;
color: #000;
}
.label-text {
display: inline-block;
padding: 0.4rem 0 0.4rem 1rem;
min-width: 70%;
margin-right: 0.75rem;
text-decoration: inherit;
color: inherit;
}
.line-connections > img {
margin-top: 0.2rem;
margin-right: 0.2rem;
}
</style>
36 changes: 35 additions & 1 deletion src/routes/timetables/[line]/+page.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,44 @@
import type { PageLoad } from './$types';
import type { LineMap } from '../../../../static/schemas/line-maps/line-maps';

type LineMapRow =
| {
isStop: false;
drawing: string[];
}
| {
isStop: true;
drawing: string[];
href: string;
isTerminus: boolean;
slugName: string;
displayName: string;
lineConnections: string[];
};

export const load: PageLoad = async ({ fetch, params }) => {
const { line } = params;
const lineMap: LineMap = await (await fetch(`/schemas/line-maps/${line}.json`)).json();

return {
lineMap,
lineMap: lineMap.map((row): LineMapRow => {
const isStop = !!row.slugName;
if (isStop) {
return {
isStop,
drawing: row.drawing,
displayName: row.displayName ?? '',
slugName: row.slugName ?? '',
href: `/timetables/${params.line}/${row.slugName}`,
isTerminus: row.isTerminus ?? false,
lineConnections: row.lineConnections?.map(({ line }) => line) ?? [],
};
} else {
return {
isStop,
drawing: row.drawing,
};
}
}),
};
};
74 changes: 74 additions & 0 deletions src/routes/timetables/[line]/LineMapDrawing.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<script lang="ts">
export let content: string;
export let isTerminus: boolean;
</script>

{#if content === '*'}
<svg class="drawing-stop" viewBox="0 0 16 16">
<circle cx="8" cy="8" r={isTerminus ? 6 : 4} />
</svg>
{:else if content === '^'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
<path d="M0,8 a8,-8 0 0,1 8,-8 L0,0 Z" />
</svg>
{:else if content === 'v'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M0,8 a8,8 0 0,0 8,8 L0,16 Z" />
<path d="M8,16 a8,-8 0 0,0 8,-8 L16,16 Z" />
</svg>
{:else if content === 'o\\'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if content === 'o/'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if content === '\\o'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if content === '/o'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
</svg>
{:else if content === '\\.'}
<svg class="drawing-path" viewBox="0 0 16 16">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{:else if content === '/.'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{:else if content === '.\\'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{:else if content === './'}
<svg class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
<path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
</svg>
{/if}

{#if ['', ''].includes(content)}
<span>{content}</span>
{/if}

<style>
.drawing-stop {
display: block;
z-index: 0;
position: absolute;
transform: translate(-0.25rem, 0.5rem);
width: 1.5rem;
fill: #fff;
stroke: #2f2f2f;
stroke-width: 2.5px;
}
.drawing-path {
display: block;
fill: #fff;
}
</style>
38 changes: 38 additions & 0 deletions src/routes/timetables/[line]/LineMapLabel.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<script lang="ts">
export let isTerminus: boolean;
export let href: string;
export let displayName: string;
export let lineConnections: string[];
</script>

<a class="label-text" class:label-terminus={isTerminus} {href}>
{displayName}
{#if lineConnections}
<div class="line-connections">
{#each lineConnections as line}
<img src="/img/lines-icons/colors/{line}.svg" alt={line} />
{/each}
</div>
{/if}
</a>

<style>
.label-terminus {
font-weight: 700;
color: #000;
}
.label-text {
display: inline-block;
padding: 0.4rem 0 0.4rem 1rem;
min-width: 70%;
margin-right: 0.75rem;
text-decoration: inherit;
color: inherit;
}
.line-connections > img {
margin-top: 0.2rem;
margin-right: 0.2rem;
}
</style>
12 changes: 0 additions & 12 deletions static/schemas/line-maps/line-maps.d.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,3 @@
type StopSlug = string;

type Stop = {
'#': number;
monitoringRefs: string[];
isTerminus: boolean;
displayName: string;
prevStops: string[];
nextStops: string[];
lineConnections: Array<{ line: string; slugName: string }>;
};

export type LineMap = Array<{
drawing: string[];
isTerminus?: true;
Expand Down

0 comments on commit 8225d51

Please sign in to comment.