feat(ui): add local chapter content

apps/demol/src/app/app.json

@@ -0,0 +1,182 @@
+{
+  "chapters": [
+    {
+      "id": 1,
+      "name": "Zu Hause",
+      "link": "daheim",
+      "groups": [
+        {
+          "grouped": false,
+          "content": [
+            {
+              "type": "text",
+              "value": "Es ist 1928. In der Weimarer Republik leben viele Kinder und Jugendliche, deren Eltern zur großen Arbeiterschaft gehören, die im Bergbau, in Webereien, Fabriken und Stahlwerken arbeiten. Dazu gehören Anna, Karl und Gerda.",
+              "layer": "fore"
+            },
+            {
+              "type": "image",
+              "layer": "back",
+              "value": "daheim_karte"
+            },
+            {
+              "type": "misc",
+              "layer": "base",
+              "value": "smokingpit"
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "row": false,
+          "content": [
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Anna und Karl sind 12 Jahre alt und ihr letztes Schuljahr steht bald bevor. Gerda ist 16 Jahre alt und macht eine Lehre in einer Buchbinderei."
+            },
+            {
+              "type": "image",
+              "layer": "fore",
+              "value": "daheim_kinder"
+            },
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Begleite die drei dabei, wie sie ihren Weg zu einer „Kinderrepublik“ der Reichsarbeitsgemeinschaft der Kinderfreunde finden und was sie dort erleben."
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "row": true,
+          "content": [
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Wen möchtest du auf diesem Weg begleiten?"
+            },
+            {
+              "type": "image",
+              "layer": "fore",
+              "value": "daheim_karl"
+            },
+            {
+              "layer": "fore",
+              "type": "image",
+              "value": "daheim_gerda"
+            },
+            {
+              "type": "image",
+              "layer": "fore",
+              "value": "daheim_anna"
+            }
+          ]
+        },
+        {
+          "content": [
+            {
+              "value": "Anna lebt mit ihrer Familie im Ruhrgebiet. Sie ist gerade 12 Jahre alt geworden. Ihr Vater arbeitet unter Tage im Bergbau. Ihre Mutter kümmert sich um Anna, ihre 3 Geschwister sowie ihren alten Großvater. Der Lohn des Vaters reicht gerade aus, um sie alle zu versorgen.",
+              "type": "text",
+              "layer": "fore"
+            },
+            {
+              "type": "image",
+              "layer": "base",
+              "value": "daheim_familie"
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "row": true,
+          "content": [
+            {
+              "value": "Worüber möchtest du mehr erfahren?",
+              "type": "text",
+              "layer": "fore"
+            },
+            {
+              "type": "video",
+              "layer": "fore",
+              "value": "Anna_Großvater",
+              "title": "Annas Alltag"
+            },
+            {
+              "type": "video",
+              "layer": "fore",
+              "value": "Anna_Großvater",
+              "title": "Annas Lebensumfeld"
+            },
+            {
+              "type": "video",
+              "layer": "fore",
+              "value": "Anna_Großvater",
+              "title": "Annas Familie"
+            },
+            {
+              "type": "video",
+              "layer": "fore",
+              "value": "Anna_Großvater",
+              "title": "Annas Großvater"
+            },
+            {
+              "type": "image",
+              "layer": "back",
+              "value": "daheim_familie2"
+            },
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Interessiert mich nicht, ich will wissen, wie sie zur Kinderrepublik kommt."
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "content": [
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Eines Tages klingelt es an der Tür. Anna öffnet und davor stehen zwei Jugendliche, die nur wenige Jahre älter aussehen als sie. Sie heißen Erna und Hans. Die beiden erzählen ihr, dass sie von einem Verein namens 'Sozialistische Arbeiterjugend' sind. Gemeinsam mit der Reichsarbeitsgemeinschaft der Kinderfreunde haben diese eine Ortsgruppe ins Leben gerufen."
+            },
+            {
+              "type": "image",
+              "layer": "base",
+              "value": "daheim_werbung"
+            },
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Anna hört ihnen interessiert zu. Sie erfährt, dass der Verein sich um die Arbeiterkinder kümmert. Die Ortsgruppe ist durch die Kinder und Jugendlichen weitestgehend selbst organisiert und veranstaltet Spielenachmittage, Zeltlager und Vorträge. Sie ist neugierig und verspricht den Beiden, morgen vorbeizuschauen."
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "content": [
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Anna hat einen Stadtplan mit dem eingezeichneten Weg zur Ortsgruppe bekommen. Nur leider ist dieser in mehrere Teile zerrissen."
+            },
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Hilf Anna, ihn wieder zusammenzufügen, um zum Treffpunkt der Ortsgruppe zu gelangen. Ziehe dazu die durcheinandergewürfelten Kartenausschnitte in das entsprechende vorgezeichnete Feld. Wenn du das Puzzle richtig gelöst hast, kommst du zum nächsten Kapitel."
+            },
+            {
+              "type": "game",
+              "layer": "base",
+              "value": "puzzle"
+            },
+            {
+              "type": "text",
+              "layer": "fore",
+              "value": "Du kennst eine Abkürzung und gehst direkt mit Anna zur Ortsgruppe"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

apps/demol/src/app/app.tsx

@@ -1,32 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Home } from '@gerdesque/home';
 import { Nav, ChapterComponent } from '@gerdesque/ui';  
-// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
-import { API_URL } from '@gerdesque/data';
 
 import './app.scss';
 
-export const App = () => {
-
-  const [chapters, setChapters] = useState([]);
+import app from './app.json';
 
-  useEffect(() => {
-    fetch(`${API_URL}/chapters`)
-      .then(_ => _.json())
-      .then(setChapters);
-  }, []);
+export const App = () => {
 
   const renderChapter = (routerProps) => {
     const chapterId = parseInt(routerProps.match.params.id)
-    const chapter = chapters.find(chapterObj => chapterObj.id === chapterId)
+    const chapter = app.chapters.find(chapterObj => chapterObj.id === chapterId)
     return (chapter && <ChapterComponent {...chapter} />)
   }
 
   return (
     <BrowserRouter basename="/demokratieerleben2020">
       <div className="app">
-        <Nav chapters = {chapters}/>
+        <Nav chapters = {app.chapters}/>
         <div className="app-content">
           <Switch>
             <Route path="/" exact component={Home} />

libs/data/src/lib/data.tsx

@@ -14,7 +14,8 @@ export enum ContentType {
   Video = "video",
   Image = "image",
   Game = "game",
-  Misc = "misc"
+  Misc = "misc",
+  Decission = "decission"
 }
 
 export interface Content {
@@ -24,6 +25,8 @@ export interface Content {
 
 export interface Group {
   content: Content[]
+  grouped: boolean
+  row: boolean
 }
 
 export interface Chapter {

libs/ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/smokingpit/smokingpit';
 export * from './lib/decission/decission';
 export * from './lib/image/image';
 export * from './lib/video/video';

libs/ui/src/lib/chapter/chapter.scss

@@ -28,18 +28,37 @@
     &--fore {
       transform: translateZ(90px) scale(.7);
       z-index: 1;
+
+      picture {
+        width: 75%;
+        display: flex;
+      }
+
+      &.row > * {
+        width: 25%;
+      }
     }
 
     &--base {
       transform: translateZ(0);
       z-index: 4;
       background: 50% 50% / cover;
       filter: saturate(.8);
+
+      picture {
+        display: flex;
+        margin-top: 50%;
+      }
     }
 
     &--back {
       transform: translateZ(-300px) scale(2);
       z-index: 3;
+
+      picture {
+        display: flex;
+        margin-top: -25%;
+      }
     }
 
     &--deep {

libs/ui/src/lib/chapter/chapter.tsx

@@ -4,17 +4,18 @@ import Video from '../video/video';
 import Image from '../image/image';
 import Text from '../text/text';
 import Decission from '../decission/decission';
+import Smokingpit from '../smokingpit/smokingpit';
 import { makeStyles } from '@material-ui/core/styles';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { Chapter, ContentType } from '@gerdesque/data';
-import { API_URL, IMAGE_SUFFIX } from '@gerdesque/data';
+import { IMAGE_SUFFIX } from '@gerdesque/data';
 
 import './chapter.scss';
 
 export const ChapterComponent = (props: Chapter) => {
   const useStyles = makeStyles(() => ({
     chapter: {
-      backgroundImage: `url(${API_URL+"/"+props.link+IMAGE_SUFFIX})`,
+      backgroundImage: `url(${"./assets/"+ props.link+IMAGE_SUFFIX})`,
       boxShadow: '0 0 8px 8px #dcd5cc inset',
       },
   }));
@@ -23,25 +24,50 @@ export const ChapterComponent = (props: Chapter) => {
   const renderChapterGroups = () => {
     return props.groups.map((group, index) => 
     <div key={index} className='parallax__group'>
-      {group.content && renderChapterContent(group.content)}
+      {group.content && renderChapterContent(group)}
     </div>)
   }
 
-  const renderChapterContent = (contentList) => {
-    return contentList.map((content, index) =>
+  const renderChapterContent = ({content : contentList, grouped, row}) => {
+
+    const chapterGroupContent = 
+      <div className={`parallax__layer parallax__layer--fore grouped ${row ? 'row' : 'column'}`}>
+        {contentList.map((content) =>
+          <>
+            {content.type === ContentType.Text && <Text value={content.value} />}
+            {content.type === ContentType.Video && <Video value={content.value} />}
+            {content.type === ContentType.Image && <Image value={content.value} />}
+            {content.type === ContentType.Decission && <Decission value={content.value} />}
+            {content.type === ContentType.Misc && <Smokingpit value={content.value} />}
+          </>
+        )}
+      </div>;
+
+    const chapterContent = 
+      contentList.map((content, index) =>
         <div key={index} className={`parallax__layer parallax__layer--${content.layer}`}>
           {content.type === ContentType.Text && <Text value={content.value} />}
           {content.type === ContentType.Video && <Video value={content.value} />}
           {content.type === ContentType.Image && <Image value={content.value} />}
-          {content.type === ContentType.Misc && <Decission value={content.value} />}
-        </div>)
+          {content.type === ContentType.Decission && <Decission value={content.value} />}
+          {content.type === ContentType.Misc && <Smokingpit value={content.value} />}
+        </div>);
+
+    return grouped ? chapterGroupContent : chapterContent
   }
 
+  const setAudioRef = element => {
+    this.audio = element;
+  };
+
   return (
     <div className='parallax'>
       <div className='parallax__group parallax__header'>
         <div className={`parallax__layer parallax__layer--base ${classes.chapter}`}>
           <Title text={props.name} />
+          <audio controls loop>
+            <source src={"./assets/sounds/daheim.mp3"} type='audio/mpeg' />
+          </audio>
           <div className='icon-scroll'></div>
         </div>
       </div>

libs/ui/src/lib/image/image.scss

@@ -1,4 +1,6 @@
-img {
+.chapter_picture {
   max-width: 100%;
   display: block;
-}
+  filter: saturate(.8);
+  opacity: .9;
+}

libs/ui/src/lib/image/image.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { API_URL, IMAGE_SUFFIX, IMAGE_SUFFIX_ALTERNATE } from '@gerdesque/data';
+import { IMAGE_SUFFIX, IMAGE_SUFFIX_ALTERNATE } from '@gerdesque/data';
 import './image.scss';
 
 /* eslint-disable-next-line */
@@ -9,10 +9,10 @@ export interface ImageProps {
 
 export const Image = (props: ImageProps) => {
   return (
-    <picture>
-      <source srcSet={API_URL+"/"+props.value+IMAGE_SUFFIX} type='image/webp' />
-      <source srcSet={API_URL+"/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} type='image/png' />
-      <img draggable="false" src={API_URL+"/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.value} />
+    <picture className="chapter_picture">
+      <source srcSet={"./assets/"+props.value+IMAGE_SUFFIX} type='image/webp' />
+      <source srcSet={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} type='image/png' />
+      <img draggable="false" src={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.value} />
     </picture>
   )
 };