feat: add trapezoid and hexagon shapes in HVV

- refactor HVV bus lines to hexagon shape - refactor HVV ferry lines to trapezoid shape - fix wrong outlined shapes for HVV Xpress bus lines - add support for hexagon and trapezoid shapes in sample website Signed-off-by: The one with the braid <info@braid.business>
Traewelling · Dec 24, 2024 · 2b2486d · 2b2486d
1 parent ba38c0b
commit 2b2486d
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 76 deletions.
diff --git a/line-colors.csv b/line-colors.csv
@@ -311,84 +311,84 @@ hvv-db-sbhh,S 1,s-bahn-hamburg,4-0s-1,#4da553,#ffffff,,pill,
 hvv-db-sbhh,S 2,s-bahn-hamburg,4-0s-2,#95334a,#ffffff,,pill,
 hvv-db-sbhh,S 3,s-bahn-hamburg,4-0s-3,#512c75,#ffffff,,pill,
 hvv-db-sbhh,S 5,s-bahn-hamburg,4-0s-5,#3b87a9,#ffffff,,pill,
-hvv-had,61,,6-hvvhad-61,#009bb6,#ffffff,,rectangle-rounded-corner,
-hvv-had,62,,6-hvvhad-62,#009bb6,#ffffff,,rectangle-rounded-corner,
-hvv-had,64,,6-hvvhad-64,#009bb6,#ffffff,,rectangle-rounded-corner,
-hvv-had,72,,6-hvvhad-72,#009bb6,#ffffff,,rectangle-rounded-corner,
-hvv-had,73,,6-hvvhad-73,#009bb6,#ffffff,,rectangle-rounded-corner,
-hvv-had,75,,6-hvvhad-75,#009bb6,#ffffff,,rectangle-rounded-corner,
+hvv-had,61,,6-hvvhad-61,#009bb6,#ffffff,,trapezoid,
+hvv-had,62,,6-hvvhad-62,#009bb6,#ffffff,,trapezoid,
+hvv-had,64,,6-hvvhad-64,#009bb6,#ffffff,,trapezoid,
+hvv-had,72,,6-hvvhad-72,#009bb6,#ffffff,,trapezoid,
+hvv-had,73,,6-hvvhad-73,#009bb6,#ffffff,,trapezoid,
+hvv-had,75,,6-hvvhad-75,#009bb6,#ffffff,,trapezoid,
 hvv-hha,U 1,,7-hvv001-1,#0072bc,#ffffff,,rectangle,
 hvv-hha,U 2,,7-hvv001-2,#ee1d23,#ffffff,,rectangle,
 hvv-hha,U 3,,7-hvv001-3,#ffdc01,#ffffff,,rectangle,
 hvv-hha,U 4,,7-hvv001-4,#00aaad,#ffffff,,rectangle,
-hvv-hha,5,,5-hvvhha-5,#eb4630,#ffffff,,rectangle-rounded-corner,
-hvv-hha,6,,5-hvvhha-6,#18257b,#ffffff,,rectangle-rounded-corner,
-hvv-hha,8,,5-hvvhha-8,#c49569,#ffffff,,rectangle-rounded-corner,
-hvv-hha,9,,5-hvvhha-9,#5fb358,#ffffff,,rectangle-rounded-corner,
-hvv-hha,10,,5-hvvhha-10,#ed753a,#ffffff,,rectangle-rounded-corner,
-hvv-hha,11,,5-hvvhha-11,#903634,#ffffff,,rectangle-rounded-corner,
-hvv-hha,13,,5-hvvhha-13,#712f91,#ffffff,,rectangle-rounded-corner,
-hvv-hha,14,,5-hvvhha-14,#dc424d,#ffffff,,rectangle-rounded-corner,
-hvv-hha,16,,5-hvvhha-16,#571445,#ffffff,,rectangle-rounded-corner,
-hvv-hha,17,,5-hvvhha-17,#62685f,#ffffff,,rectangle-rounded-corner,
-hvv-hha,18,,5-hvvhha-18,#6b80be,#ffffff,,rectangle-rounded-corner,
-hvv-hha,19,,5-hvvhha-19,#f4ba4f,#ffffff,,rectangle-rounded-corner,
-hvv-hha,20,,5-hvvhha-20,#519bd2,#ffffff,,rectangle-rounded-corner,
-hvv-hha,23,,5-hvvhha-23,#e74796,#ffffff,,rectangle-rounded-corner,
-hvv-hha,24,,5-hvvhha-24,#f8d258,#ffffff,,rectangle-rounded-corner,
-hvv-hha,25,,5-hvvhha-25,#0c653c,#ffffff,,rectangle-rounded-corner,
-hvv-hha,26,,5-hvvhha-26,#bcd25d,#ffffff,,rectangle-rounded-corner,
-hvv-hha,27,,5-hvvhha-27,#11adde,#ffffff,,rectangle-rounded-corner,
-hvv-hha,28,,5-hvvhha-28,#7e9bb4,#ffffff,,rectangle-rounded-corner,
-hvv-hha,603,,5-hvvhha-603,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,604,,5-hvvhha-604,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,605,,5-hvvhha-605,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,606,,5-hvvhha-606,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,607,,5-hvvhha-607,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,608,,5-hvvhha-608,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,617,,5-hvvhha-617,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,618,,5-hvvhha-618,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,640,,5-hvvhha-640,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,641,,5-hvvhha-641,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-hha,X11,,5-hvvhha-x11,#ffffff,#5fb358,#5fb358,rectangle-rounded-corner,
-hvv-hha,X22,,5-hvvhha-x22,#5fb358,#ffffff,,rectangle-rounded-corner,
-hvv-hha,X35,,5-hvvhha-x35,#eb452e,#ffffff,,rectangle-rounded-corner,
-hvv-hha,X40,,5-hvvhha-x40,#ffffff,#73c4a2,#73c4a2,rectangle-rounded-corner,
-hvv-hha,X61,,5-hvvhha-x61,#ed7339,#ffffff,,rectangle-rounded-corner,
-hvv-hha,X65,,5-hvvhha-x65,#52b4dc,#ffffff,,rectangle-rounded-corner,
-hvv-hha,X86,,5-hvvhha-x65,#ebc353,#ffffff,,rectangle-rounded-corner,
-hvv-kvi,X66,,5-hvvkvi-x66,#6780bf,#ffffff,,rectangle-rounded-corner,
-hvv-kvi,X89,,5-hvvkvi-x89,#8cc359,#ffffff,,rectangle-rounded-corner,
-hvv-kvi,X99,,5-hvvkvi-x99,#bc3c95,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,1,,5-hvvvhh-1,#bcd25d,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,2,,5-hvvvhh-2,#f4b94f,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,3,,5-hvvvhh-3,#bc3d95,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,12,,5-hvvvhh-12,#522a90,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,15,,5-hvvvhh-15,#4bbf9d,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,21,,5-hvvvhh-21,#234ea3,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,22,,5-hvvvhh-22,#712f91,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,29,,5-hvvvhh-29,#522a90,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,601,,5-hvvvhh-601,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,602,,5-hvvvhh-602,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,609,,5-hvvvhh-609,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,610,,5-hvvvhh-610,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,619,,5-hvvvhh-619,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,621,,5-hvvvhh-621,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,627,,5-hvvvhh-627,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,629,,5-hvvvhh-629,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,638,,5-hvvvhh-638,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,639,,5-hvvvhh-639,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,649,,5-hvvvhh-649,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,658,,5-hvvvhh-658,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,668,,5-hvvvhh-668,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,669,,5-hvvvhh-669,#000000,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,X3,,5-hvvvhh-x3,#722f91,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,X30,,5-hvvvhh-x30,#8e332a,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,X32,,5-hvvvhh-x32,#bf9466,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,X33,,5-hvvvhh-x32,#ffffff,#1c448f,#1c448f,rectangle-rounded-corner,
-hvv-vhh,X80,,5-hvvvhh-x80,#ebc353,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,X81,,5-hvvvhh-x81,#30653c,#ffffff,,rectangle-rounded-corner,
-hvv-vhh,X95,,5-hvvvhh-x95,#c06936,#ffffff,,rectangle-rounded-corner,
+hvv-hha,5,,5-hvvhha-5,#eb4630,#ffffff,,hexagon,
+hvv-hha,6,,5-hvvhha-6,#18257b,#ffffff,,hexagon,
+hvv-hha,8,,5-hvvhha-8,#c49569,#ffffff,,hexagon,
+hvv-hha,9,,5-hvvhha-9,#5fb358,#ffffff,,hexagon,
+hvv-hha,10,,5-hvvhha-10,#ed753a,#ffffff,,hexagon,
+hvv-hha,11,,5-hvvhha-11,#903634,#ffffff,,hexagon,
+hvv-hha,13,,5-hvvhha-13,#712f91,#ffffff,,hexagon,
+hvv-hha,14,,5-hvvhha-14,#dc424d,#ffffff,,hexagon,
+hvv-hha,16,,5-hvvhha-16,#571445,#ffffff,,hexagon,
+hvv-hha,17,,5-hvvhha-17,#62685f,#ffffff,,hexagon,
+hvv-hha,18,,5-hvvhha-18,#6b80be,#ffffff,,hexagon,
+hvv-hha,19,,5-hvvhha-19,#f4ba4f,#ffffff,,hexagon,
+hvv-hha,20,,5-hvvhha-20,#519bd2,#ffffff,,hexagon,
+hvv-hha,23,,5-hvvhha-23,#e74796,#ffffff,,hexagon,
+hvv-hha,24,,5-hvvhha-24,#f8d258,#ffffff,,hexagon,
+hvv-hha,25,,5-hvvhha-25,#0c653c,#ffffff,,hexagon,
+hvv-hha,26,,5-hvvhha-26,#bcd25d,#ffffff,,hexagon,
+hvv-hha,27,,5-hvvhha-27,#11adde,#ffffff,,hexagon,
+hvv-hha,28,,5-hvvhha-28,#7e9bb4,#ffffff,,hexagon,
+hvv-hha,603,,5-hvvhha-603,#000000,#ffffff,,hexagon,
+hvv-hha,604,,5-hvvhha-604,#000000,#ffffff,,hexagon,
+hvv-hha,605,,5-hvvhha-605,#000000,#ffffff,,hexagon,
+hvv-hha,606,,5-hvvhha-606,#000000,#ffffff,,hexagon,
+hvv-hha,607,,5-hvvhha-607,#000000,#ffffff,,hexagon,
+hvv-hha,608,,5-hvvhha-608,#000000,#ffffff,,hexagon,
+hvv-hha,617,,5-hvvhha-617,#000000,#ffffff,,hexagon,
+hvv-hha,618,,5-hvvhha-618,#000000,#ffffff,,hexagon,
+hvv-hha,640,,5-hvvhha-640,#000000,#ffffff,,hexagon,
+hvv-hha,641,,5-hvvhha-641,#000000,#ffffff,,hexagon,
+hvv-hha,X11,,5-hvvhha-x11,#5fb358,#ffffff,,hexagon,
+hvv-hha,X22,,5-hvvhha-x22,#5fb358,#ffffff,,hexagon,
+hvv-hha,X35,,5-hvvhha-x35,#eb452e,#ffffff,,hexagon,
+hvv-hha,X40,,5-hvvhha-x40,#73c4a2,#ffffff,,hexagon,
+hvv-hha,X61,,5-hvvhha-x61,#ed7339,#ffffff,,hexagon,
+hvv-hha,X65,,5-hvvhha-x65,#52b4dc,#ffffff,,hexagon,
+hvv-hha,X86,,5-hvvhha-x65,#ebc353,#ffffff,,hexagon,
+hvv-kvi,X66,,5-hvvkvi-x66,#6780bf,#ffffff,,hexagon,
+hvv-kvi,X89,,5-hvvkvi-x89,#8cc359,#ffffff,,hexagon,
+hvv-kvi,X99,,5-hvvkvi-x99,#bc3c95,#ffffff,,hexagon,
+hvv-vhh,1,,5-hvvvhh-1,#bcd25d,#ffffff,,hexagon,
+hvv-vhh,2,,5-hvvvhh-2,#f4b94f,#ffffff,,hexagon,
+hvv-vhh,3,,5-hvvvhh-3,#bc3d95,#ffffff,,hexagon,
+hvv-vhh,12,,5-hvvvhh-12,#522a90,#ffffff,,hexagon,
+hvv-vhh,15,,5-hvvvhh-15,#4bbf9d,#ffffff,,hexagon,
+hvv-vhh,21,,5-hvvvhh-21,#234ea3,#ffffff,,hexagon,
+hvv-vhh,22,,5-hvvvhh-22,#712f91,#ffffff,,hexagon,
+hvv-vhh,29,,5-hvvvhh-29,#522a90,#ffffff,,hexagon,
+hvv-vhh,601,,5-hvvvhh-601,#000000,#ffffff,,hexagon,
+hvv-vhh,602,,5-hvvvhh-602,#000000,#ffffff,,hexagon,
+hvv-vhh,609,,5-hvvvhh-609,#000000,#ffffff,,hexagon,
+hvv-vhh,610,,5-hvvvhh-610,#000000,#ffffff,,hexagon,
+hvv-vhh,619,,5-hvvvhh-619,#000000,#ffffff,,hexagon,
+hvv-vhh,621,,5-hvvvhh-621,#000000,#ffffff,,hexagon,
+hvv-vhh,627,,5-hvvvhh-627,#000000,#ffffff,,hexagon,
+hvv-vhh,629,,5-hvvvhh-629,#000000,#ffffff,,hexagon,
+hvv-vhh,638,,5-hvvvhh-638,#000000,#ffffff,,hexagon,
+hvv-vhh,639,,5-hvvvhh-639,#000000,#ffffff,,hexagon,
+hvv-vhh,649,,5-hvvvhh-649,#000000,#ffffff,,hexagon,
+hvv-vhh,658,,5-hvvvhh-658,#000000,#ffffff,,hexagon,
+hvv-vhh,668,,5-hvvvhh-668,#000000,#ffffff,,hexagon,
+hvv-vhh,669,,5-hvvvhh-669,#000000,#ffffff,,hexagon,
+hvv-vhh,X3,,5-hvvvhh-x3,#722f91,#ffffff,,hexagon,
+hvv-vhh,X30,,5-hvvvhh-x30,#8e332a,#ffffff,,hexagon,
+hvv-vhh,X32,,5-hvvvhh-x32,#bf9466,#ffffff,,hexagon,
+hvv-vhh,X33,,5-hvvvhh-x32,#1c448f,#ffffff,,hexagon,
+hvv-vhh,X80,,5-hvvvhh-x80,#ebc353,#ffffff,,hexagon,
+hvv-vhh,X81,,5-hvvvhh-x81,#30653c,#ffffff,,hexagon,
+hvv-vhh,X95,,5-hvvvhh-x95,#c06936,#ffffff,,hexagon,
 kvv-avg,S1,albtal-verkehrs-gesellschaft-mbh,4-a6s1-1,#00a76d,#ffffff,,rectangle-rounded-corner,
 kvv-avg,S4,albtal-verkehrs-gesellschaft-mbh,4-a6s4-4,#ae4a63,#ffffff,,rectangle-rounded-corner,
 kvv-avg,S5,albtal-verkehrs-gesellschaft-mbh,4-a6s5-5,#f69795,#ffffff,,rectangle-rounded-corner,

diff --git a/sources.json b/sources.json
@@ -545,7 +545,10 @@
         "contributors": [
             {
                 "github": "lunas-bad-coding"
-            }
+            },
+            {
+	        "github": "TheOneWithTheBraid"
+	    }
         ],
         "sources": [
             {

diff --git a/website/assets/js/custom-elements.js b/website/assets/js/custom-elements.js
@@ -14,7 +14,7 @@ function toggleDetails(event) {
     }
 }
 
-["pill", "rectangle", "rectangle-rounded-corner"].forEach((shape) =>
+["hexagon", "pill", "rectangle", "rectangle-rounded-corner", "trapezoid"].forEach((shape) =>
     customElements.define("line-logo-" + shape, class extends HTMLElement {
         constructor() {
             super();

diff --git a/website/index.php b/website/index.php
@@ -135,6 +135,28 @@ class="w-75"></span><span class="w-50"></span></button>
 
                 <!-- Templates for line logo -->
 
+                <template id="template-for-line-logo-hexagon">
+                    <style>
+                        div {
+                            font-family: "IBM Plex Mono", Monaco, Consolas, monospace;
+                            font-weight: 400;
+                            font-size: 2em;
+                            text-align: center;
+
+                            display: inline-block;
+                            line-height: 1.2em;
+
+                            padding: 0 0.75em;
+                            /* TODO: consider the edge case of border around a hexagon shape */
+                            clip-path: polygon(50% -100%, 100% 50%, 50% 200%, 0 50%);
+                        }
+
+                    </style>
+                    <div class="line-logo">
+                        <slot name="lineName">Wurst</slot>
+                    </div>
+                </template>
+
 
                 <template id="template-for-line-logo-pill">
                     <style>
@@ -194,6 +216,28 @@ class="w-75"></span><span class="w-50"></span></button>
                     </div>
                 </template>
 
+                <template id="template-for-line-logo-trapezoid">
+                    <style>
+                        div {
+                            font-family: "IBM Plex Mono", Monaco, Consolas, monospace;
+                            font-weight: 400;
+                            font-size: 2em;
+                            text-align: center;
+
+                            display: inline-block;
+                            line-height: 1.2em;
+
+                            padding: 0 0.75em;
+                            /* TODO: consider the edge case of border around a trapezoid shape */
+                            clip-path: polygon( 100% 0, 50% 250%, 0 0);
+                        }
+
+                    </style>
+                    <div class="line-logo">
+                        <slot name="lineName">Wurst</slot>
+                    </div>
+                </template>
+
 
                 <!-- Templates for pills end -->