Farben, aufräumen und Beispielkarte

src/display.js

@@ -72,12 +72,6 @@ export class Display {
       return new Springy.Vector(sx, sy);
     };
 
-    var fromScreen = function(s) {
-      var size = currentBB.topright.subtract(currentBB.bottomleft);
-      var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x;
-      var py = (s.y / canvas.height) * size.y + currentBB.bottomleft.y;
-      return new Springy.Vector(px, py);
-    };
     var renderer = new Springy.Renderer(
       this.layout,
       () => {
@@ -98,22 +92,17 @@ export class Display {
         let rad = Math.atan(b / a)
         if (negative) rad = rad + Math.PI
         if (rad > Math.PI / 2) {
-          console.warn(negative)
           rad += Math.PI
           ;[p2, p1] = [p1, p2]
-        } else if (negative) { console.warn(false) }
+        }
 
-        dom.style.transformOrigin = '0 0'
+        dom.className = 'line'
         dom.style.transform = 'rotate(' + rad + 'rad) translateY(-1em)'
-        dom.style.position = 'absolute'
         dom.style.left = p1.x + 'px'
         dom.style.top = p1.y + 'px'
         dom.style.right = p2.x + 'px'
         dom.style.bottom = p2.y + 'px'
         dom.style.width = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)) + 'px'
-        dom.style.height = '1em'
-        dom.style.borderBottom = '3px solid black'
-        dom.style.textAlign = 'center'
         // FIXME eigentlich falsches parent
         field.appendChild(dom)
       },
@@ -147,7 +136,8 @@ export class Display {
     if (state.show !== null) {
       const wrapper = document.createElement('a')
       wrapper.href = '/'
-      const fullview = document.createElement('div')
+      const fullview = document.createElement('img')
+      fullview.src = '/img/Kartendesign.svg'
       wrapper.className = 'fullview'
       wrapper.appendChild(fullview)
       target.appendChild(wrapper)

style.css

@@ -1,5 +1,5 @@
 body {
-  background-color: #e2eff3;
+  background-color: #e1eef2;
   margin: 0;
 }
 
@@ -44,23 +44,31 @@ body {
   background-position: center;
 }
 
+.line {
+  border-bottom: 3px solid #1a1c1c;
+  height: 1em;
+  text-align: center;
+  position: absolute;
+  transform-origin: 0 0;
+}
+
 .fullview {
   width: 100%;
   height: 100%;
   position: fixed;
   left: 0;
   top: 0;
-  background-color: #858c8f90;
+  background-color: #e1eef280;
   padding: 1em;
   box-sizing: border-box;
   cursor: default;
 }
-.fullview > div {
-  background-color: #858c8f;
+.fullview > img {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 40em;
   min-height: 30em;
+  max-height: 100%;
 }