adrian/coding-precarity
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Farben, aufräumen und Beispielkarte

Browse source
This commit is contained in:
Adrian Heine 2020-09-18 10:45:35 +02:00
parent 8090edbd69
commit 03967a5789
3 changed files with 261 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

245
img/Kartendesign.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

18
src/display.js
View file

@ -72,12 +72,6 @@ export class Display {
return new Springy.Vector(sx, sy); 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( var renderer = new Springy.Renderer(
this.layout, this.layout,
() => { () => {
@ -98,22 +92,17 @@ export class Display {
let rad = Math.atan(b / a) let rad = Math.atan(b / a)
if (negative) rad = rad + Math.PI if (negative) rad = rad + Math.PI
if (rad > Math.PI / 2) { if (rad > Math.PI / 2) {
console.warn(negative)
rad += Math.PI rad += Math.PI
;[p2, p1] = [p1, p2] ;[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.transform = 'rotate(' + rad + 'rad) translateY(-1em)'
dom.style.position = 'absolute'
dom.style.left = p1.x + 'px' dom.style.left = p1.x + 'px'
dom.style.top = p1.y + 'px' dom.style.top = p1.y + 'px'
dom.style.right = p2.x + 'px' dom.style.right = p2.x + 'px'
dom.style.bottom = p2.y + 'px' dom.style.bottom = p2.y + 'px'
dom.style.width = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)) + '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 // FIXME eigentlich falsches parent
field.appendChild(dom) field.appendChild(dom)
}, },
@ -147,7 +136,8 @@ export class Display {
if (state.show !== null) { if (state.show !== null) {
const wrapper = document.createElement('a') const wrapper = document.createElement('a')
wrapper.href = '/' wrapper.href = '/'
const fullview = document.createElement('div') const fullview = document.createElement('img')
fullview.src = '/img/Kartendesign.svg'
wrapper.className = 'fullview' wrapper.className = 'fullview'
wrapper.appendChild(fullview) wrapper.appendChild(fullview)
target.appendChild(wrapper) target.appendChild(wrapper)

16
style.css
View file

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