diff --git a/IMFePIit29P.ttf b/IMFePIit29P.ttf new file mode 100644 index 0000000..5572611 Binary files /dev/null and b/IMFePIit29P.ttf differ diff --git a/IMFePIsc29P.ttf b/IMFePIsc29P.ttf new file mode 100644 index 0000000..44ee75e Binary files /dev/null and b/IMFePIsc29P.ttf differ diff --git a/img/gretchen.jpg b/img/gretchen.jpg new file mode 100644 index 0000000..304e857 Binary files /dev/null and b/img/gretchen.jpg differ diff --git a/src/display.js b/src/display.js index 6f1efed..98cba1e 100644 --- a/src/display.js +++ b/src/display.js @@ -35,8 +35,8 @@ export class Display { target.addEventListener('drop', e => { let target = findA(e.target) if (!target || !target.draggable) return - e.preventDefault() dispatch({ action: 'link', from: e.dataTransfer.getData("application/prs.x"), to: target.dataset['id']}) + && e.preventDefault() }) this.graph = new Springy.Graph() @@ -58,7 +58,9 @@ export class Display { graph.addNode(new Springy.Node(item.id, item)) } for (const item of state.links) { - graph.addEdge(new Springy.Edge(item.id, graph.nodeSet[item.from], graph.nodeSet[item.to], {})) + graph.addEdge(new Springy.Edge(item.id, graph.nodeSet[item.from], graph.nodeSet[item.to], { + text: state.items[item.from].linkable.filter(i => state.items[item.to].linkable.includes(i)).join(', ') + })) } let currentBB = this.layout.getBoundingBox() let width = this.target.scrollWidth || 100 @@ -70,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, () => { @@ -86,7 +82,7 @@ export class Display { }, function drawEdge(edge, p1, p2) { const dom = document.createElement('span') - dom.innerText = 'text' + dom.innerText = edge.data.text p1 = toScreen(p1) p2 = toScreen(p2) if (p1.y > p2.y) [p1, p2] = [p2, p1] @@ -96,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) }, @@ -145,8 +136,18 @@ export class Display { if (state.show !== null) { const wrapper = document.createElement('a') wrapper.href = '/' - const fullview = document.createElement('div') wrapper.className = 'fullview' + const fullview = document.createElement('div') + const name = 'Gretchen' + const desc = 'Näherin, 20' + const img = '/img/gretchen.jpg' + const text = '

Text

More text text text

' + fullview.innerHTML = ` + +

${name}

+

${desc}

+
Text text
+ ` wrapper.appendChild(fullview) target.appendChild(wrapper) } diff --git a/src/index.js b/src/index.js index 4834d6e..4a4e84a 100644 --- a/src/index.js +++ b/src/index.js @@ -4,9 +4,15 @@ const target = document.createElement('div') const state = {items: [], show: null, links: [] } -const imgs = ['Dienstmädchen2.svg', 'Rucksack2.svg', 'Theater2.svg', 'UnskilledLabour2.svg', 'weben.svg'] -for (let i = 0; i < imgs.length; ++i) { - state.items.push({id: i, state: 'face-down', img: imgs[i]}) +const items = [ + {img: 'Dienstmädchen2.svg', linkable: ['Prekär']}, + {img: 'Rucksack2.svg', linkable: ['Prekär']}, + {img: 'Theater2.svg', linkable: ['Prekär']}, + {img: 'UnskilledLabour2.svg', linkable: ['Prekär']}, + {img: 'weben.svg', linkable: ['Prekär']} +] +for (let i = 0; i < items.length; ++i) { + state.items.push({id: i, state: 'face-down', img: items[i].img, linkable: items[i].linkable}) } class Actions { @@ -21,21 +27,24 @@ class Actions { } link(from, to) { state.links.push({id: state.links.length, from, to}) + return true } } const actions = new Actions let display const dispatch = target => { + let ret if (target.action) { - actions[target.action](target.from, target.to) + ret = actions[target.action](target.from, target.to) } else { const match = target.match(/\/([^/]+)\/([^/]+)/) if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) { - actions[match[2]](match[1]) + ret = actions[match[2]](match[1]) } else actions.reset() } display.render(state) + return ret } window.onpopstate = e => { dispatch(document.location.search) diff --git a/style.css b/style.css index e52e145..408ae6b 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,18 @@ +@font-face { + font-family: "Fell"; + src: url("/IMFePIit29P.ttf"); +} + +@font-face { + font-family: "Fell Sc"; + src: url("/IMFePIsc29P.ttf"); +} + + body { - background-color: #e2eff3; + background-color: #e1eef2; margin: 0; + font-family: "Fell"; } .wrapper { @@ -44,23 +56,67 @@ 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%; +} +.fullview > div { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 20em; + min-height: 30em; + max-height: 100%; + background-color: #006680; + padding: 1.5em; + color: white; + border-radius: 20px; + border: 5px solid #1a1c1c; + box-sizing: border-box; +} +.fullview > div img { + float: right; + width: 120px; + border-radius: 80px; + border: 3px solid #1a1c1c; + margin-bottom: 1em; +} + +h1, .desc { + font-family: "Fell Sc"; +} + +.fulltext { + clear: both; + background-color: #99d7e9; + border-radius: 80px; + border: 3px solid #1a1c1c; + color: #1a1c1c; + margin-left: -10px; + padding: 0.5em; }