feat: add decission handling for images

apps/demol/src/app/app.json

@@ -59,23 +59,27 @@
             {
               "type": "image",
               "layer": "third",
-              "value": "daheim_karl"
+              "value": "daheim_karl",
+              "title": "karl"
             },
             {
               "type": "image",
               "layer": "third",
-              "value": "daheim_gerda"
+              "value": "daheim_gerda",
+              "title": "gerda"
             },
             {
               "type": "image",
               "layer": "third",
-              "value": "daheim_anna"
+              "value": "daheim_anna",
+              "title": "anna"
             }
           ]
         },
         {
           "grouped": true,
           "row": false,
+          "character": "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.",
@@ -92,6 +96,7 @@
         {
           "grouped": true,
           "row": true,
+          "character": "anna",
           "background": "daheim_familie2",
           "content": [
             {
@@ -133,6 +138,7 @@
         {
           "grouped": true,
           "row": false,
+          "character": "anna",
           "content": [
             {
               "type": "text",
@@ -154,6 +160,7 @@
         {
           "grouped": true,
           "row": false,
+          "character": "anna",
           "content": [
             {
               "type": "text",

apps/demol/src/app/app.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React , {useState} from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Home } from '@gerdesque/home';
-import { Nav, ChapterComponent } from '@gerdesque/ui';  
+import { Nav, ChapterComponent, AppContext } from '@gerdesque/ui';  
 import { Chapter } from '@gerdesque/data';
 import './app.scss';
 
 import app from './app.json';
 
 
 export const App = () => {
+  const [character, setCharacter] = useState('default');
 
   const renderChapter = (routerProps) => {
     const chapterId = parseInt(routerProps.match.params.id)
@@ -17,6 +18,7 @@ export const App = () => {
   }
 
   return (
+    <AppContext.Provider value={[character, setCharacter]}>
     <BrowserRouter basename="/demokratieerleben2020">
       <div className="app">
         <Nav chapters = {app.chapters}/>
@@ -28,6 +30,7 @@ export const App = () => {
         </div>
       </div>
     </BrowserRouter>
+    </AppContext.Provider>
   );
 };
 

libs/data/src/lib/data.tsx

@@ -31,6 +31,7 @@ export interface Group {
   grouped: boolean
   row: boolean
   background?: string
+  character?: string
   content: Content[]
 }
 

libs/ui/src/index.ts

@@ -10,4 +10,5 @@ export * from './lib/footer/footer';
 export * from './lib/nav/nav';
 export * from './lib/title/title';
 export * from './lib/chapter/chapter';
+export * from './lib/chapter/context';
 export * from './lib/ui';

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext } from 'react';
 import Title from '../title/title';
 import Video from '../video/video';
 import Image from '../image/image';
@@ -8,6 +8,7 @@ import Smokingpit from '../smokingpit/smokingpit';
 import Puzzle from '../puzzle/puzzle';
 import Scrollicon from '../scrollicon/scrollicon';
 import Redirect from '../redirect/redirect';
+import {AppContext } from '../chapter/context';
 import { makeStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
@@ -17,6 +18,9 @@ import { IMAGE_SUFFIX } from '@gerdesque/data';
 import './chapter.scss';
 
 export const ChapterComponent = (props: Chapter) => {
+
+  const [character, setCharacter] = useContext(AppContext);
+
   const useStyles = makeStyles(() => ({
     chapter: {
       backgroundImage: `url(${"./assets/"+ props.link+IMAGE_SUFFIX})`,
@@ -36,20 +40,23 @@ export const ChapterComponent = (props: Chapter) => {
 
   const renderChapterGroups = () => {
     return props.groups.map((group, index) => 
-    <div key={index} className={`parallax__group ${group.background ? 'back' : ''}`}>
-      {group.background && <div className={`parallax__layer parallax__layer--back`}>
-        <Image value={group.background} width={'bg'}/>
-      </div>}
-      {group.content && renderChapterContent(group)}
-    </div>)
+      <Fragment key={index}>
+        {(!group.character || group.character === character) && <div key={index} className={`parallax__group ${group.background ? 'back' : ''}`}>
+          {group.background && <div className={`parallax__layer parallax__layer--back`}>
+            <Image value={group.background} width={'bg'}/>
+          </div>}
+          {group.content && renderChapterContent(group)}
+        </div>}
+      </Fragment>
+    )
   }
 
   const renderContent = (content, index) => {
     return <Fragment key={index}>
       {content.type === ContentType.Text && <Text value={content.value} />}
       {content.type === ContentType.Redirect && <Redirect value={content.value} />}
       {content.type === ContentType.Video && <Video value={content.value} width={content.layer} title={content.title} />}
-      {content.type === ContentType.Image && <Image value={content.value} width={content.layer}/>}
+      {content.type === ContentType.Image && <Image value={content.value} width={content.layer} title={content.title}/>}
       {content.type === ContentType.Decission && <Decission value={content.value} />}
       {content.type === ContentType.SmokingPit && <Smokingpit value={content.value} />}
       {content.type === ContentType.Puzzle && <Puzzle/>}

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

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AppContext = createContext([]);

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

@@ -1,16 +1,24 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import { IMAGE_SUFFIX, IMAGE_SUFFIX_ALTERNATE } from '@gerdesque/data';
+import {AppContext } from '../chapter/context';
 import './image.scss';
 
 /* eslint-disable-next-line */
 export interface ImageProps {
   value: string
   width?: string
+  title?: string
 }
 
 export const Image = (props: ImageProps) => {
+  const [character, setCharacter] = useContext(AppContext);
+
+  const chooseCharacter = () => {
+    setCharacter(props.title)
+  }
+
   return (
-    <picture className={`chapter_picture ${props.width}`}>
+    <picture className={`chapter_picture ${props.width}`} onClick={() => chooseCharacter()}>
       <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} />