aboutsummaryrefslogtreecommitdiffstats
path: root/src/lib/assets/LineGlyph.svelte
blob: f5df52360dfa53b2c3017201d1c73b4219caeb5b (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<script lang="ts">
  import { dev } from '$app/environment';

  const fernverkehrIconMap = {
    IR: 'M 2.43946,1.11125 H 3.51261 L 2.18493,4.18041 H 1.10728 Z m 4.43442,2.16058 c 0.097,-3.3e-4 0.18477,-0.0576 0.2241,-0.14631 L 7.96899,1.11125 H 4.2291 L 2.90142,4.18041 H 3.96981 L 4.97523,1.88118 H 6.56088 L 6.24311,2.6154 4.8604,2.6104 5.97615,4.18043 H 7.19244 L 6.36588,3.27185 Z',
    IC: 'M 2.4406,1.11203 H 3.51401 L 2.18633,4.1812 H 1.10869 Z m 1.78011,0 H 8.02939 L 7.63516,2.02352 H 4.91525 L 4.37497,3.26971 H 7.09621 L 6.70198,4.1812 H 2.89304 Z',
    EC: 'm 2.1507979,4.1626896 a 0.238125,0.238125 0 0 0 0.094721,0.017727 H 5.5890583 L 4.5100875,3.2525229 H 2.4299333 l 0.4741334,-0.4699 h 2.0984104 l 0.4743979,-0.4699 H 3.3779354 L 3.8401625,1.8370021 h 2.098675 L 6.6558583,1.11125 H 3.3485667 A 0.43127083,0.43127083 0 0 0 3.1231417,1.164696 L 3.0644047,1.212321 2.9929667,1.271852 1.1911542,3.0860999 a 0.21166667,0.21166667 0 0 0 -0.083344,0.1664229 0.16933333,0.16933333 0 0 0 0.065617,0.1367896 l 0.1180041,0.1010708 0.6757459,0.5413375 0.1068917,0.089165 c 0.020373,0.02196 0.047625,0.036513 0.076994,0.041804 m 4.0433625,0.00582 0.088371,0.011906 H 9.44245 L 10.367169,3.2525229 H 6.5315042 L 7.9245354,1.8370021 H 11.291623 L 12.003087,1.11125 H 7.2255062 l -1.920875,1.9629437 q -0.054504,0.050006 -0.097631,0.1098021 a 0.14816667,0.14816667 0 0 0 -0.015081,0.074348 0.17197917,0.17197917 0 0 0 0.04736,0.125148 l 0.089429,0.071438 0.6402917,0.5529791 0.082815,0.077258 q 0.044979,0.033338 0.094456,0.059531 z',
    TGV: 'M 6.1364817,1.762125 A 1.8520833,1.8520833 0 0 0 5.9634437,1.669785 1.8520833,1.8520833 0 0 0 5.7247897,1.588558 1.5610417,1.5610417 0 0 0 5.3085997,1.54252 q -0.543718,0 -0.889264,0.3603625 -0.346075,0.3603625 -0.346075,0.9186334 0,0.434975 0.245269,0.681302 0.245268,0.2460625 0.683418,0.2460625 c 0.0799,0.0037 0.160073,-0.00688 0.236538,-0.030692 l 0.170656,-0.8133288 h -0.648229 l 0.100542,-0.4833937 h 1.239837 l -0.350308,1.6748125 q -0.08784,0.030427 -0.157692,0.050271 -0.07038,0.019844 -0.236537,0.052917 a 2.38125,2.38125 0 0 1 -0.442384,0.032808 q -0.723106,0 -1.101989,-0.3537479 -0.378884,-0.3537479 -0.378884,-1.0218209 0,-0.8262937 0.50165,-1.3123333 0.50165,-0.4855104 1.351492,-0.4855104 0.26035,-0.00132 0.516731,0.043921 a 3.4395833,3.4395833 0 0 1 0.486304,0.127529 z M 1.2125854,1.1115146 H 3.5737267 L 3.4731857,1.5951729 H 2.60985 l -0.5564187,2.58445 H 1.4141979 L 1.9703521,1.5954375 H 1.1075458 Z m 6.1198123,0 h -0.613304 l 0.402961,3.0681083 h 0.731572 l 1.708415,-3.0681083 h -0.665956 l -1.278996,2.3868062 z',
    ICE: 'M 4.9887187,1.7227021 A 1.1641667,1.1641667 0 0 0 4.6950312,1.5909396 1.3758333,1.3758333 0 0 0 4.3053,1.5425208 q -0.5167312,0 -0.8453438,0.3386667 -0.3286125,0.3381375 -0.3286125,0.8744479 0,0.4397375 0.2452688,0.7164917 a 0.809625,0.809625 0 0 0 0.635,0.2770187 c 0.1008062,5.292e-4 0.2010833,-0.0127 0.2981854,-0.039687 0.117475,-0.037042 0.2307167,-0.087048 0.3373438,-0.149225 l -0.096573,0.5889625 q -0.061383,0.013229 -0.1706562,0.03519 -0.1098021,0.02196 -0.2169583,0.034925 a 2.38125,2.38125 0 0 1 -0.2868084,0.013229 q -0.6482291,0 -1.0162646,-0.3823229 -0.3680354,-0.382323 -0.3680354,-1.063625 0,-0.7871354 0.4815417,-1.2573 Q 3.4554583,1.0591271 4.270375,1.0591271 a 2.4870833,2.4870833 0 0 1 0.4489979,0.032808 q 0.1730375,0.033073 0.2365375,0.052917 0.0635,0.019844 0.1860021,0.0635 z M 1.7515417,1.1117792 H 2.3910396 L 1.7470437,4.1798875 H 1.1075458 Z m 5.6816625,0 H 5.6327146 L 4.9887187,4.1798875 h 1.82245 L 6.9162083,3.6962292 H 5.7070625 L 5.8869792,2.8347458 H 6.9598646 L 7.0564375,2.3513521 H 5.9875208 L 6.1452125,1.5954375 h 1.1959167 z',
    // RJ: 'M 6.093,15.802 H 3.703 L 6.133,4.2 h 5.152 q 1.329,0 2.07,0.273 0.741,0.273 1.194,1.001 0.456,0.729 0.456,1.765 0,1.48 -0.887,2.442 -0.885,0.961 -2.683,1.19 0.46,0.412 0.863,1.085 0.8,1.361 1.78,3.846 H 11.514 Q 11.206,14.821 10.304,12.739 9.812,11.615 9.259,11.228 8.919,10.998 8.072,10.998 H 7.098 Z m 1.37,-6.545 h 1.266 q 1.923,0 2.552,-0.23 0.63,-0.228 0.985,-0.72 0.357,-0.49 0.356,-1.028 0,-0.635 -0.514,-0.95 -0.317,-0.19 -1.37,-0.19 H 8.112 Z M 22.375,4.2 h 2.342 l -1.464,7.028 q -0.585,2.793 -1.535,3.783 -0.95,0.99 -2.92,0.989 -1.67,0 -2.501,-0.768 -0.831,-0.767 -0.831,-2.09 0,-0.276 0.04,-0.616 l 2.207,-0.238 a 4.4,4.4 0 0 0 -0.047,0.578 q 0,0.555 0.316,0.847 0.317,0.293 0.974,0.293 0.918,0 1.29,-0.539 0.276,-0.411 0.673,-2.318 z',
    // RJX: '',
    // RX: '',
    // NJ: '',
    // OGV: '',
    // PE: '',
    IRE: '',
    BEX: '',
    GEX: '',
    EN: '',
    EXT: '',
    CNL: '',
    ICN: '',
  };
  let {
    kind: routeShortName,
    type: _type,
    line: _line,
    currentColor: _currentColor,
    nightIsFilled = true,
  }: {
    /** i.e. RE69, TER, etc...  */
    kind: string;
    type?: keyof typeof fernverkehrIconMap | string | null;
    line?: string;
    nightIsFilled?: boolean;
  } & {
    currentColor?: string;
  } = $props();

  let shortNumberIndex = $derived(
    routeShortName.split('').findIndex((char) => char.match(/[0-9]/))
  );
  let line = $derived(
    _line ??
      (_line === undefined
        ? shortNumberIndex !== -1
          ? routeShortName.substring(shortNumberIndex).trim()
          : ''
        : _line)
  );
  let lineType = $derived(
    _type ??
      (_type === undefined
        ? shortNumberIndex !== -1
          ? routeShortName.substring(0, shortNumberIndex).trim()
          : routeShortName
        : _type)
  );
  let isRE = $derived(
      typeof routeShortName === 'string' &&
        routeShortName.toUpperCase().startsWith('RE') &&
        routeShortName.charAt(2).toUpperCase() !== 'N'
    ),
    isFernverkehr = $derived(
      (lineType ?? '').toUpperCase() in fernverkehrIconMap
    ),
    isNightRendering =
      routeShortName.toUpperCase().startsWith('SN') ||
      routeShortName.toUpperCase().startsWith('REN') ||
      routeShortName.startsWith('IRN');
  let currentColor = $derived(
    _currentColor ?? (isRE ? '#eb0000' : 'currentColor')
  );
</script>

<!-- svelte-ignore attribute_illegal_colon -->
<svg
  width="15.61mm"
  height="5.2919998mm"
  viewBox="0 0 15.61 5.2919998"
  version="1.1"
  id="svg1"
  data-kind={routeShortName}
  data-type={lineType}
  data-line={line}
  data-debug={dev
    ? JSON.stringify({
        shortNumberIndex,
        line,
        type: lineType,
        kind: routeShortName,
        _line: _line ?? [`undef, ${_line}`],
        _type: _type ?? [`undef, ${_type}`],
      })
    : undefined}
>
  <defs id="defs1">
    <clipPath id="a">
      <path fill="#fff" d="M0 0h59v20H0z" id="path3" />
    </clipPath>
  </defs>
  {#if isFernverkehr}
    <g id="layer4" data-inkscape-label="Fernverkehr" style="display:inline">
      <path
        fill="#eb0000"
        fill-rule="evenodd"
        d="M 0.52917,0 A 0.52916667,0.52916667 0 0 0 0,0.52916 V 4.7625 A 0.52916667,0.52916667 0 0 0 0.52917,5.29166 H 15.08125 A 0.52916667,0.52916667 0 0 0 15.61042,4.7625 V 0.52916 A 0.52916667,0.52916667 0 0 0 15.08125,0 Z"
        clip-rule="evenodd"
        id="path1"
        style="display:inline;stroke-width:0.264583"
        data-inkscape-label="Background"
      />
      <g
        data-inkscape-label="Glyphs"
        data-inkscape-groupmode="layer"
        id="layer1"
      >
        {#if lineType && lineType.toUpperCase() in fernverkehrIconMap}
          <path
            fill="#ffffff"
            d={fernverkehrIconMap[
              lineType.toUpperCase() as keyof typeof fernverkehrIconMap
            ]}
            id="path2"
            style="stroke-width:0.264583"
            data-sodipodi-nodetypes="ccccccccccccccccccc"
            data-inkscape-label="IR Glyph"
          />
        {/if}
      </g>
      {#if line !== undefined && line !== ''}
        <text
          xml:space="preserve"
          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.23333px;line-height:0;font-family:SBB;-inkscape-font-specification:'SBB Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#ffffff;stroke-width:0.0264583"
          x="9.5329876"
          y="4.1801271"
          id="text1-9"
          data-inkscape-label="Number"
          ><tspan
            id="tspan1-8"
            style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.28625px;line-height:0;font-family:SBB;-inkscape-font-specification:'SBB, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;text-anchor:start;fill:#ffffff;stroke-width:0.0264583"
            x="9.5329876"
            y="4.1801271"
            data-sodipodi-role="line">{line}</tspan
          ></text
        >
      {/if}
    </g>
  {:else}
    <g
      clip-path="url(#a)"
      id="g2"
      transform="scale(0.26458333)"
      data-inkscape-label="Regioverkehr"
    >
      <title id="title1">A</title>
      <path
        stroke="#000000"
        d="M 2,0.5 H 57 A 1.5,1.5 0 0 1 58.5,2 V 18 A 1.5,1.5 0 0 1 57,19.5 H 2 A 1.5,1.5 0 0 1 0.5,18 V 2 A 1.5,1.5 0 0 1 2,0.5 Z"
        id="path1-8"
        style="display:inline;fill:{nightIsFilled && isNightRendering
          ? '#000'
          : 'none'};stroke:{isNightRendering
          ? nightIsFilled
            ? '#000'
            : '#FFDE15'
          : currentColor};stroke-opacity:1"
        data-inkscape-label="Background"
      />
      <text
        xml:space="preserve"
        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.32594px;line-height:0;font-family:SBB;-inkscape-font-specification:'SBB, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:{isNightRendering
          ? '#FFDE15'
          : currentColor};fill-opacity:1;stroke:{/*isNightRendering
          ? nightIsFilled
            '#FFDE15'
          : currentColor*/ 'none'};stroke-width:0.0264583;stroke-opacity:1"
        x="0.80801982"
        y="4.2193737"
        id="text1"
        data-inkscape-label="Kind"
        transform="scale(3.7795276)"
        ><tspan
          data-sodipodi-role="line"
          id="tspan1"
          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.32594px;font-family:SBB;-inkscape-font-specification:'SBB, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.0264583"
          x="0.80801982"
          y="4.2193737">{routeShortName}</tspan
        ></text
      >
    </g>
  {/if}
</svg>