From 38a2325afc4db86c009cec5c054d14de85fa658a Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Tue, 10 Nov 2020 15:48:08 +0100 Subject: [PATCH 1/2] =?UTF-8?q?Outro=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/display.js | 10 ++++++++++ src/index.js | 8 +++++++- src/intro.js | 7 ------- src/texts.js | 10 ++++++++++ style.css | 35 ++++++++++++++++++++++++++++++++++- 5 files changed, 61 insertions(+), 9 deletions(-) delete mode 100644 src/intro.js create mode 100644 src/texts.js diff --git a/src/display.js b/src/display.js index 61b0c32..f5ec5d3 100644 --- a/src/display.js +++ b/src/display.js @@ -149,6 +149,13 @@ export class Display { ); target.appendChild(field) + if (state.items.filter(i => i.state != 'face-up').length == 0) { + const a = document.createElement('a') + a.className = 'continue' + a.innerText = 'fertig' + a.href = '/end' + target.appendChild(a) + } if (state.show !== null) { const data = state.items[state.show] const name = data.name @@ -166,6 +173,9 @@ export class Display { `) target.appendChild(wrapper) } + if (state.special) { + target.appendChild(modal(state.special)) + } const dd = new diffDOM.DiffDOM() const diff = dd.diff(this.target, target) diff --git a/src/index.js b/src/index.js index cba1b79..7324105 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import {Display} from './display.js' -import intro from './intro.js' +import {intro, outro} from './texts.js' const state = {items: [], show: null, links: [] } @@ -21,6 +21,10 @@ class Actions { } reset() { state.show = null + state.special = null + } + end() { + state.special = outro } link(from, to) { if (from == to) return false @@ -37,6 +41,8 @@ const dispatch = target => { let ret if (target.action) { ret = actions[target.action](target.from, target.to) + } else if (target === '/end') { + actions.end() } else { const match = target.match(/\/([^/]+)\/([^/]+)/) if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) { diff --git a/src/intro.js b/src/intro.js deleted file mode 100644 index 3dc3c52..0000000 --- a/src/intro.js +++ /dev/null @@ -1,7 +0,0 @@ -export default `

Memory des Prekariats.

-

-Unsichere Arbeits- und Lebensverhältnisse haben viele Gesichter. In diesem Spiel ist es eure Aufgabe, ihr geteiltes Leid aufzudecken. Klickt dafür auf die Symbole und lernt die historischen und heutigen Figuren des Prekariats kennen. Durch das Zusammenziehen der Kreise entdeckt ihr, was die Vergangenheit mit der Gegenwart verknüpft. -

-

-Ein Netzwerk der Prekären entsteht. -

` diff --git a/src/texts.js b/src/texts.js new file mode 100644 index 0000000..3f7db4d --- /dev/null +++ b/src/texts.js @@ -0,0 +1,10 @@ +export const intro = `

Memory des Prekariats.

+

+Unsichere Arbeits- und Lebensverhältnisse haben viele Gesichter. In diesem Spiel ist es eure Aufgabe, ihr geteiltes Leid aufzudecken. Klickt dafür auf die Symbole und lernt die historischen und heutigen Figuren des Prekariats kennen. Durch das Zusammenziehen der Kreise entdeckt ihr, was die Vergangenheit mit der Gegenwart verknüpft. +

+

+Ein Netzwerk der Prekären entsteht. +

` +export const outro = `
Aufgrund dieser Konkurrenz, die mitunter genauso rüde ist wie diejenige der Unternehmen untereinander, kommt es zu einem regelrechten Kampf aller gegen alle, der sämtliche Werte der Solidarität und Menschlichkeit zunichte macht, [...].
+ +

Bourdieu, Pierre (1998): Prekarität ist überall. In: Gegenfeuer. Wortmeldungen im Dienste des Widerstands gegen die neoliberale Invasion. Konstanz.

` diff --git a/style.css b/style.css index 5ecc453..78951d6 100644 --- a/style.css +++ b/style.css @@ -124,7 +124,7 @@ a.fullview { box-sizing: border-box; } -header { +header, .work { font-family: "Fell Sc"; } @@ -167,6 +167,7 @@ blockquote { quotes: "\201C""\201D""\2018""\2019"; /* Otherwise the :before is larger than the blockquote and creates a scrollbar in the parent */ min-height: 4em; + color: black; } blockquote:before { color: #1a1c1c66; @@ -182,3 +183,35 @@ aside { float: right; padding: 1em; } + +.continue { + position: absolute; + right: 0; + bottom: 0; + padding: 0.5rem 1rem; + font-size: 2rem; + border-radius: 20px; + margin: 0.5rem; + background: #D66C00; + border: 3px solid #1a1c1c; + display: block; + cursor: pointer; + transform: scale(1); + animation: pulse 1s infinite alternate; + text-decoration: none; + color: black; +} + +@keyframes pulse { + from { + transform: scale(0.9); + } + to { + transform: scale(1); + } +} + +.continue:hover { + background-color: #f39a3f; + animation: none; +} From fc586002d1452543b442cd12a19d66174a4f32ad Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Tue, 10 Nov 2020 16:11:36 +0100 Subject: [PATCH 2/2] =?UTF-8?q?Outro=20erweitert=20und=20um=20Personenhinw?= =?UTF-8?q?eise=20erg=C3=A4nzt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 --- src/index.js | 13 ++++++++----- src/texts.js | 39 +++++++++++++++++++++++++++++++++++++-- style.css | 16 +++++++--------- 4 files changed, 52 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 1bcf4ab..fa657ea 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,4 @@
- diff --git a/src/index.js b/src/index.js index 7324105..a03089b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import {Display} from './display.js' -import {intro, outro} from './texts.js' +import {intro, outro, sources} from './texts.js' const state = {items: [], show: null, links: [] } @@ -26,6 +26,9 @@ class Actions { end() { state.special = outro } + sources() { + state.special = sources + } link(from, to) { if (from == to) return false const ok = state.items[from].linkable.filter(i => state.items[to].linkable.includes(i)).length > 0 @@ -41,12 +44,12 @@ const dispatch = target => { let ret if (target.action) { ret = actions[target.action](target.from, target.to) - } else if (target === '/end') { - actions.end() } else { - const match = target.match(/\/([^/]+)\/([^/]+)/) - if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) { + const match = target.match(/\/([^/]+)(?:\/([^/]+))?/) + if (match && match.length > 1 && Object.hasOwnProperty.call(Actions.prototype, match[2])) { ret = actions[match[2]](match[1]) + } else if (match&& Object.hasOwnProperty.call(Actions.prototype, match[1])) { + ret = actions[match[1]]() } else actions.reset() } display.render(state) diff --git a/src/texts.js b/src/texts.js index 3f7db4d..a874bbd 100644 --- a/src/texts.js +++ b/src/texts.js @@ -1,4 +1,5 @@ -export const intro = `

Memory des Prekariats.

+export const intro = ` +

Memory des Prekariats.

Unsichere Arbeits- und Lebensverhältnisse haben viele Gesichter. In diesem Spiel ist es eure Aufgabe, ihr geteiltes Leid aufzudecken. Klickt dafür auf die Symbole und lernt die historischen und heutigen Figuren des Prekariats kennen. Durch das Zusammenziehen der Kreise entdeckt ihr, was die Vergangenheit mit der Gegenwart verknüpft.

@@ -7,4 +8,38 @@ Ein Netzwerk der Prekären entsteht.

` export const outro = `
Aufgrund dieser Konkurrenz, die mitunter genauso rüde ist wie diejenige der Unternehmen untereinander, kommt es zu einem regelrechten Kampf aller gegen alle, der sämtliche Werte der Solidarität und Menschlichkeit zunichte macht, [...].
-

Bourdieu, Pierre (1998): Prekarität ist überall. In: Gegenfeuer. Wortmeldungen im Dienste des Widerstands gegen die neoliberale Invasion. Konstanz.

` +

Bourdieu, Pierre (1998): Prekarität ist überall. In: Gegenfeuer. Wortmeldungen im Dienste des Widerstands gegen die neoliberale Invasion. Konstanz.

+
+

Memory des Prekariats.

+

Ein Projekt von

Isabell von Falkenhausen
Adrian Heine
Roman Huber

+

Im Rahmen des Hackathon

Coding Precarity
der Staatsbibliothek zu Berlin

+

Quelltext: git

+

Hinweise und Textquellen

+
+` + +export const sources = `

Die im Spiel gezeigten Figuren sind keine real existierenden Personen. Ihre Geschichten basieren jedoch auf historischen Texten sowie zeitgenössischen Studien und Berichten. Im Folgenden können Sie die Textenquellen, der jeweiligen Figuren einsehen.

+
+Gretchen: 1 + +Rehka: 1 + +Wiebke: 1 + +Julius: 1, 2 + +Karlotta: 1 + +Tobias: 1, 2 + +Martin: 1, 2 + +Heinrich: 1 + +Jarosław: 1, 2 + +Gertrude: 1 + +Elena: 1 + +Hans: 1
` diff --git a/style.css b/style.css index 78951d6..1a42833 100644 --- a/style.css +++ b/style.css @@ -13,8 +13,6 @@ body { margin: 0; font-family: "Fell"; hyphens: auto; - display: flex; - flex-direction: column; height: 100%; width: 100%; } @@ -28,7 +26,6 @@ body { position: relative; box-sizing: border-box; padding: 1em; - flex: 1; } .items { @@ -101,13 +98,15 @@ a.fullview { max-width: 75vh; background-color: #006680; padding: 1em; - color: white; border-radius: 20px; border: 5px solid #1a1c1c; box-sizing: border-box; display: flex; flex-direction: column; } +.fullview > div, .fullview a { + color: white; +} @media (max-width: 30em) { .fullview > div { padding: 0.5em; @@ -179,11 +178,6 @@ blockquote:before { margin-top: 2.5rem; } -aside { - float: right; - padding: 1em; -} - .continue { position: absolute; right: 0; @@ -215,3 +209,7 @@ aside { background-color: #f39a3f; animation: none; } + +.sources a { + font-family: Fell Sc; +}