feat: add Liege S train

README.md

@@ -13,11 +13,12 @@ The `line-colors.csv` contains several columns:
 - `textColor`: Color-Hexcode for the text color
 - `borderColor` Color-Hexcode for the border of the shape
 - `shape`: Specifies the shape of the icon --> see examples below
+  - `circle`: Just a circle
+  - `hexagon` A pill with pointy tips
   - `rectangle`: Just a rectangle
-  - `pill`: Rectangle with completely rounded corners
   - `rectangle-rounded-corner`: Rectangle with rounded corners
+  - `pill`: Rectangle with completely rounded corners
   - `trapezoid` A trapezoid shape with a broad top and a narrow bottom side
-  - `hexagon` A pill with pointy tips
 - `wikidataQid`: Wikidata QID for the line (if available, can be empty)
 
 ## Contributing
@@ -138,3 +139,20 @@ Entry: `hvv-had,62,,6-hvvhad-62,#009bb6,#ffffff,,trapezoid,`
 - `wikidataQid` *not available*
 
 Entry: `hvv-hha,X35,,5-hvvhha-x35,#eb452e,#ffffff,,hexagon,`
+
+#### S-train Liege: SNCB, S41
+
+<img src="examples/sncb-s41.png" alt="S41" width="100">
+<br>
+
+- `shortOperatorName`: liege-s
+- `lineName`: S41
+- `hafasOperatorCode`: sncb
+- `hafasLineId`: 4-88-41
+- `backgroundColor`: #0f6030
+- `textColor`: #ffffff
+- `borderColor` #ffffff
+- `shape`: circle
+- `wikidataQid` *not available*
+
+Entry: `liege-s,S41,sncb,4-88-41,#0f6030,#ffffff,#ffffff,circle,`

line-colors.csv

@@ -488,6 +488,7 @@ lavv-swl,107,,5-swlbus-107,#00b2bb,#ffffff,,rectangle,
 lavv-swl,108,,5-swlbus-108,#ffed00,#000000,,rectangle,
 lavv-swl,109,,5-swlbus-109,#0b9a33,#ffffff,,rectangle,
 lavv-swl,110,,5-swlbus-110,#9d1680,#ffffff,,rectangle,
+liege-s,S41,sncb,4-88-41,#0f6030,#ffffff,#ffffff,circle,
 mdv-lvb,1,,8-naslvt-1,#78b145,#ffffff,,rectangle,
 mdv-lvb,2,,8-naslvt-2,#f7ce46,#000000,,rectangle,
 mdv-lvb,3,,8-naslvt-3,#78b145,#ffffff,,rectangle,

sources.json

@@ -676,6 +676,20 @@
             }
         ]
     },
+    {
+        "shortOperatorName": "liege-s",
+        "contributors": [
+            {
+                "github": "TheOneWithTheBraid"
+            }
+        ],
+        "sources": [
+            {
+                "name": "Liège S Train map",
+                "source": "https://www.belgiantrain.be/en/travel-info/train-offer/s-train/s-train-luik"
+            }
+        ]
+    },
     {
         "shortOperatorName": "lavv-swl",
         "contributors": [

validation/common.php

@@ -14,7 +14,7 @@
 
 
 function valid_shape($line, $i) {
-    if (!in_array($line["shape"], ["hexagon", "pill", "rectangle", "rectangle-rounded-corner", "trapezoid"])) {
+    if (!in_array($line["shape"], ["circle", "hexagon", "pill", "rectangle", "rectangle-rounded-corner", "trapezoid"])) {
         throw new Error("bad shape " . $line["shape"] . " in row $i");
     }
 }

website/assets/js/custom-elements.js

@@ -14,7 +14,7 @@ function toggleDetails(event) {
     }
 }
 
-["hexagon", "pill", "rectangle", "rectangle-rounded-corner", "trapezoid"].forEach((shape) =>
+["circle", "hexagon", "pill", "rectangle", "rectangle-rounded-corner", "trapezoid"].forEach((shape) =>
     customElements.define("line-logo-" + shape, class extends HTMLElement {
         constructor() {
             super();

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-circle">
+                    <style>
+                        div {
+                            font-family: "Avenir Next Condensed", "Avenir Next", Arial, sans-serif;
+                            font-size: 2em;
+                            text-align: center;
+
+                            box-sizing: border-box;
+                            width: 2.5em;
+                            height: 2.5em;
+                            line-height: 1;
+                            padding: .6275em 0;
+                            border-radius: 1.5em;
+                            display: inline-block;
+                        }
+
+                    </style>
+                    <div class="line-logo">
+                        <slot name="lineName">Wurst</slot>
+                    </div>
+                </template>
+
                 <template id="template-for-line-logo-hexagon">
                     <style>
                         div {