Fix various small bugs (directionPicker is square and has a max width; fix welcome message, fix translations

Logic/Osm/OsmObject.ts

@@ -292,7 +292,7 @@ export abstract class OsmObject {
                 const element = data.elements.pop();
 
                 let nodes = []
-                if (data.elements.length > 2) {
+                if (self.type === "way" && data.elements.length >= 0) {
                     nodes = OsmObject.ParseObjects(data.elements)
                 }
 
@@ -445,8 +445,8 @@ export class OsmWay extends OsmObject {
             }
             const cp = node.centerpoint();
             this.coordinates.push(cp);
-            latSum = cp[0]
-            lonSum = cp[1]
+            latSum += cp[0]
+            lonSum += cp[1]
         }
         let count = this.coordinates.length;
         this.lat = latSum / count;

UI/Input/DirectionInput.ts

@@ -53,9 +53,11 @@ export default class DirectionInput extends InputElement<string> {
                 `position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform:rotate(${this.value.data ?? 0}deg);`)
                 .SetClass("direction-svg relative")
                  .SetStyle("z-index: 1000"),
-            map.SetClass("w-full h-full block absolute top-0 left-O overflow-hidden"),
+            map.SetStyle(
+                `position: absolute;top: 0;left: 0;width: 100%;height: 100%;`)
+
         ])
-            .SetStyle("width: min(100%, 25em); height: min(100% , 25em);")
+            .SetStyle("width: min(100%, 25em); height: 0; padding-bottom: 100%") // A bit a weird CSS   , see https://stackoverflow.com/questions/13851940/pure-css-solution-square-elements#19448481
             .SetClass("relative block bg-white border border-black overflow-hidden rounded-full")
             .ConstructElement()
 

UI/Input/ValidatedTextField.ts

@@ -95,7 +95,7 @@ export default class ValidatedTextField {
                     )
                 }
                 const di = new DirectionInput(options.mapBackgroundLayer, location, value)
-                di.SetStyle("height: 20rem;");
+                di.SetStyle("max-width: 25rem;");
 
                 return di;
             },

UI/i18n/Translation.ts

@@ -112,8 +112,9 @@ export class Translation extends BaseUIElement {
                 } else if (el.ConstructElement === undefined) {
                     console.error("ConstructElement is not defined", el);
                     throw "ConstructElement is not defined, you are working with a " + (typeof el) + ":" + (el.constructor.name)
-                }else if(el["translations"] !== undefined){
-                    rtext = el["translations"][lang]
+                }else if(el["textFor"] !== undefined){
+                    // @ts-ignore
+                    rtext = el.textFor(lang)
                 } else {
                     rtext = el.ConstructElement().innerHTML;
 

index.css

@@ -320,7 +320,6 @@ li::marker {
     position: absolute;
     z-index: 5000;
     transition: all 500ms linear;
-    pointer-events: none;
     left: 0;
     right: 0;
 }