Browse Source

Outro hinzugefügt

master
Adrian Heine 4 years ago
parent
commit
38a2325afc
  1. 10
      src/display.js
  2. 8
      src/index.js
  3. 7
      src/intro.js
  4. 10
      src/texts.js
  5. 35
      style.css

10
src/display.js

@ -149,6 +149,13 @@ export class Display {
); );
target.appendChild(field) 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) { if (state.show !== null) {
const data = state.items[state.show] const data = state.items[state.show]
const name = data.name const name = data.name
@ -166,6 +173,9 @@ export class Display {
`) `)
target.appendChild(wrapper) target.appendChild(wrapper)
} }
if (state.special) {
target.appendChild(modal(state.special))
}
const dd = new diffDOM.DiffDOM() const dd = new diffDOM.DiffDOM()
const diff = dd.diff(this.target, target) const diff = dd.diff(this.target, target)

8
src/index.js

@ -1,5 +1,5 @@
import {Display} from './display.js' import {Display} from './display.js'
import intro from './intro.js'
import {intro, outro} from './texts.js'
const state = {items: [], show: null, links: [] } const state = {items: [], show: null, links: [] }
@ -21,6 +21,10 @@ class Actions {
} }
reset() { reset() {
state.show = null state.show = null
state.special = null
}
end() {
state.special = outro
} }
link(from, to) { link(from, to) {
if (from == to) return false if (from == to) return false
@ -37,6 +41,8 @@ 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(/\/([^/]+)\/([^/]+)/) const match = target.match(/\/([^/]+)\/([^/]+)/)
if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) { if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) {

7
src/intro.js

@ -1,7 +0,0 @@
export default `<h1>Memory des Prekariats.</h1>
<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.
</p>
<p>
Ein Netzwerk der Prekären entsteht.
</p>`

10
src/texts.js

@ -0,0 +1,10 @@
export const intro = `<h1>Memory des Prekariats.</h1>
<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.
</p>
<p>
Ein Netzwerk der Prekären entsteht.
</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>
<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>`

35
style.css

@ -124,7 +124,7 @@ a.fullview {
box-sizing: border-box; box-sizing: border-box;
} }
header {
header, .work {
font-family: "Fell Sc"; font-family: "Fell Sc";
} }
@ -167,6 +167,7 @@ blockquote {
quotes: "\201C""\201D""\2018""\2019"; quotes: "\201C""\201D""\2018""\2019";
/* Otherwise the :before is larger than the blockquote and creates a scrollbar in the parent */ /* Otherwise the :before is larger than the blockquote and creates a scrollbar in the parent */
min-height: 4em; min-height: 4em;
color: black;
} }
blockquote:before { blockquote:before {
color: #1a1c1c66; color: #1a1c1c66;
@ -182,3 +183,35 @@ aside {
float: right; float: right;
padding: 1em; 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;
}
Loading…
Cancel
Save