Browse Source

Outro erweitert und um Personenhinweise ergänzt

master
Adrian Heine 4 years ago
parent
commit
fc586002d1
  1. 3
      index.html
  2. 13
      src/index.js
  3. 39
      src/texts.js
  4. 16
      style.css

3
index.html

@ -7,7 +7,4 @@
<script src=/DragDropTouch.js></script> <script src=/DragDropTouch.js></script>
<script src=/src/index.js type=module></script> <script src=/src/index.js type=module></script>
<div class=wrapper></div> <div class=wrapper></div>
<aside>
<a href="https://git.adrianheine.de/adrian/coding-precarity">git</a>
</aside>
</html> </html>

13
src/index.js

@ -1,5 +1,5 @@
import {Display} from './display.js' import {Display} from './display.js'
import {intro, outro} from './texts.js'
import {intro, outro, sources} from './texts.js'
const state = {items: [], show: null, links: [] } const state = {items: [], show: null, links: [] }
@ -26,6 +26,9 @@ class Actions {
end() { end() {
state.special = outro state.special = outro
} }
sources() {
state.special = sources
}
link(from, to) { link(from, to) {
if (from == to) return false if (from == to) return false
const ok = state.items[from].linkable.filter(i => state.items[to].linkable.includes(i)).length > 0 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 let ret
if (target.action) { if (target.action) {
ret = actions[target.action](target.from, target.to) ret = actions[target.action](target.from, target.to)
} else if (target === '/end') {
actions.end()
} else { } 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]) ret = actions[match[2]](match[1])
} else if (match&& Object.hasOwnProperty.call(Actions.prototype, match[1])) {
ret = actions[match[1]]()
} else actions.reset() } else actions.reset()
} }
display.render(state) display.render(state)

39
src/texts.js

@ -1,4 +1,5 @@
export const intro = `<h1>Memory des Prekariats.</h1>
export const intro = `
<h1>Memory des Prekariats.</h1>
<p> <p>
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. 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.
</p> </p>
@ -7,4 +8,38 @@ Ein Netzwerk der Prekären entsteht.
</p>` </p>`
export const outro = `<blockquote>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, [...].</blockquote> export const outro = `<blockquote>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, [...].</blockquote>
<p>Bourdieu, Pierre (1998): <span class=work>Prekarität ist überall.</span> In: <span class=work>Gegenfeuer. Wortmeldungen im Dienste des Widerstands gegen die neoliberale Invasion.</span> Konstanz.</p>`
<p>Bourdieu, Pierre (1998): <span class=work>Prekarität ist überall.</span> In: <span class=work>Gegenfeuer. Wortmeldungen im Dienste des Widerstands gegen die neoliberale Invasion.</span> Konstanz.</p>
<div style="text-align: center">
<h1>Memory des Prekariats.</h1>
<p>Ein Projekt von</p><p>Isabell von Falkenhausen<br>Adrian Heine<br>Roman Huber</p>
<p>Im Rahmen des Hackathon</p><p><a href=https://blog.sbb.berlin/hackathonsbb-coding-precarity/>Coding Precarity</a><br>der Staatsbibliothek zu Berlin</p>
<p>Quelltext: <a href="https://git.adrianheine.de/adrian/coding-precarity">git</a></p>
<p><a href=/sources>Hinweise und Textquellen</a></p>
</div>
`
export const sources = `<p>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.</p>
<div class=sources>
Gretchen: <a href="https://digital.staatsbibliothek-berlin.de/werkansicht?PPN=PPN827659040&PHYSID=PHYS_0020&DMDID=">1</a>
Rehka: <a href="https://bangladesch.org/bangladesch/wirtschaft-und-armut/textilindustrie/textilarbeiterinnen-in-bangladesch.html">1</a>
Wiebke: <a href="https://digital.staatsbibliothek-berlin.de/werkansicht?PPN=PPN1700627007&PHYSID=PHYS_0071&DMDID=DMDLOG_0003">1</a>
Julius: <a href="https://www.zeit.de/karriere/beruf/2016-05/theater-burnout-schauspieler-arbeit-kuenstler-darsteller-arbeitsbedingungen">1</a>, <a href="https://www.zeit.de/karriere/beruf/2016-06/selbststaendigkeit-freiberufler-soziale-absicherung">2</a>
Karlotta: <a href="https://digital.staatsbibliothek-berlin.de/werkansicht?PPN=PPN1702861805&PHYSID=PHYS_0337&DMDID=DMDLOG_0016">1</a>
Tobias: <a href="https://archiv.streikrecht-ist-grundrecht.de/sites/streikrecht-ist-grundrecht.de/files/VortragNowakFachtagDiakonieLeipzig.pdf">1</a>, <a href="https://frausofa.wordpress.com/2020/02/15/pflegefachkraefte-sind-keine-batmen/">2</a>
Martin: <a href="https://ffmdieunibrennt.files.wordpress.com/2012/08/reader_hochschuleimneoliberalismus.pdf">1</a>, <a href="https://www.jetzt.de/digital/unter-unbezahlt-berichten-wissenschaftler-von-ihrer-prekaeren-arbeitssituation">2</a>
Heinrich: <a href="https://digital.staatsbibliothek-berlin.de/werkansicht?PPN=PPN1701716860&PHYSID=PHYS_0036&DMDID=">1</a>
Jarosław: <a href="https://www.faire-mobilitaet.de/faelle/++co++242a1146-ce00-11e9-8d8b-52540088cada">1</a>, <a href="https://www.dw.com/de/saisonarbeiter-deutschland-nie-wieder/a-54341202">2</a>
Gertrude: <a href="https://digital.staatsbibliothek-berlin.de/werkansicht?PPN=PPN1713950367&PHYSID=PHYS_0008&DMDID=DMDLOG_0001">1</a>
Elena: <a href="https://taz.de/Corona-und-Prostitution/!5671919/">1</a>
Hans: <a href="https://digital.staatsbibliothek-berlin.de/werkansicht?PPN=PPN1701716860&PHYSID=PHYS_0036&DMDID=">1</a></div>`

16
style.css

@ -13,8 +13,6 @@ body {
margin: 0; margin: 0;
font-family: "Fell"; font-family: "Fell";
hyphens: auto; hyphens: auto;
display: flex;
flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
@ -28,7 +26,6 @@ body {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 1em; padding: 1em;
flex: 1;
} }
.items { .items {
@ -101,13 +98,15 @@ a.fullview {
max-width: 75vh; max-width: 75vh;
background-color: #006680; background-color: #006680;
padding: 1em; padding: 1em;
color: white;
border-radius: 20px; border-radius: 20px;
border: 5px solid #1a1c1c; border: 5px solid #1a1c1c;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.fullview > div, .fullview a {
color: white;
}
@media (max-width: 30em) { @media (max-width: 30em) {
.fullview > div { .fullview > div {
padding: 0.5em; padding: 0.5em;
@ -179,11 +178,6 @@ blockquote:before {
margin-top: 2.5rem; margin-top: 2.5rem;
} }
aside {
float: right;
padding: 1em;
}
.continue { .continue {
position: absolute; position: absolute;
right: 0; right: 0;
@ -215,3 +209,7 @@ aside {
background-color: #f39a3f; background-color: #f39a3f;
animation: none; animation: none;
} }
.sources a {
font-family: Fell Sc;
}
Loading…
Cancel
Save