feat(sounds): add atmo sounds

apps/demol/src/app/app.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import ScrollIntoView from "./scrollintoview";
@@ -9,15 +9,23 @@ import { ChapterProps } from '@gerdesque/data';
 import './app.scss';
 
 import app from './app.json';
+import { API_URL } from '@gerdesque/data';
 
 (window as any).soundManager.setup({debugMode: false});
 
 export const App = () => {
   const [character, setCharacter] = usePersistedState('character', 'default');
+  const [chapters, setChapters] = useState(app.chapters);
+
+  useEffect(() => {
+    fetch(`${API_URL}/chapters`)
+      .then(_ => _.json())
+      .then(setChapters);
+  }, []);
 
   const renderChapter = (routerProps) => {
     const chapterLink = routerProps.match.params.link
-    const chapter: ChapterProps = app.chapters.find(chapterObj => chapterObj.link === chapterLink)
+    const chapter: ChapterProps = chapters.find(chapterObj => chapterObj.link === chapterLink)
     return (chapter && <Chapter {...chapter} />)
   }
 

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

@@ -32,7 +32,7 @@ export const Chapter = (props: ChapterProps) => {
   return (
     <InView as="div">
       <Sound
-        url={`./assets/sounds/${props.link}.mp3`}
+        url={props.link === 'personen' ? `./assets/sounds/${props.link}_${character}.mp3` : `./assets/sounds/${props.link}.mp3`}
         loop={true}
         playStatus={Sound.status.PLAYING}
       />

libs/ui/src/lib/info/info.scss

@@ -14,7 +14,7 @@
     top: -20%;
     right: auto;
     margin: 50px;
-    opacity: 0;
+    display: none;
     overflow: hidden;
     background-color: rgba(0,0,0,.7);
     color: var(--color-link);
@@ -28,7 +28,7 @@
 
   &:hover .infoText {
       padding: 8px;
-      opacity: 1;
+      display: block;
       transition: opacity .5s ease;
   }
 }

libs/ui/src/lib/redirect/redirect.tsx

@@ -1,5 +1,6 @@
-import React, {useState,useContext} from 'react';
-import { Redirect } from "react-router-dom";
+import React, {useContext} from 'react';
+import { useHistory } from "react-router-dom";
+
 
 import {AppContext } from '../chapter/context';
 
@@ -17,19 +18,15 @@ export interface RedirectProps {
 
 export const RedirectComponent = (props: RedirectProps) => {
   const [character, setCharacter] = useContext(AppContext);
-  const [redirect, setRedirect] = useState(false);
+  const history = useHistory();
 
   const handleRedirect = () => {
     props.avatar && setCharacter(props.avatar);
-    setRedirect(true)
+    history.push(props.value);
   }
 
   return (
-    <>
-      {/* <button type='button' className={`link-button redirect ${props.option}`} onClick={() => handleRedirect()}>{props.title}</button> */}
-      <p className={`redirect ${props.option}`} onClick={() => handleRedirect()}>{props.title}</p>
-      {redirect && <Redirect exact to={props.value} />}
-    </>
+    <p className={`redirect ${props.option}`} onClick={() => handleRedirect()}>{props.title}</p>
   );
 };
 

libs/ui/src/lib/suitcase/suitcase.tsx

@@ -18,20 +18,29 @@ export const Suitcase = (props) => {
   const [bagCounter, setBagCounter] = useState(0);
   const [showResult, setShowResult] = useState(false);
   const [winningSound, setWinningSound] = useState(false);
+  const [rightSound, setRightSound] = useState(false);
   const [lostSound, setLostSound] = useState(false);
-  const [playStatus, setPlayStatus] = useState(Sound.status.PLAYING);
+  const [lostPlayStatus, setLostPlayStatus] = useState(Sound.status.PLAYING);
+  const [rightPlayStatus, setRightPlayStatus] = useState(Sound.status.PLAYING);
   const [falseCounter, setFalseCounter] = useState(0);
 
   useEffect(
     () => {
-      setPlayStatus(Sound.status.PLAYING);
+      setLostPlayStatus(Sound.status.PLAYING);
     }, [falseCounter]
   );
 
+  useEffect(
+    () => {
+      setRightPlayStatus(Sound.status.PLAYING);
+    }, [bagCounter]
+  );
+
   const dropped = (e) => {
     e.containerElem.style.visibility = "hidden";
     setBagCounter(bagCounter +1);
     setDrag(`${character} packt ${e.dragData.label} ein.`);
+    setRightSound(true);
     if (bagCounter === 4) {
       setWinningSound(true);
       setTimeout(() => setShowResult(true), 2500);
@@ -71,8 +80,10 @@ export const Suitcase = (props) => {
         </DropTarget>
       </DropTarget>
       {winningSound && <Sound url={`./assets/sounds/game_won.mp3`} playStatus={Sound.status.PLAYING} />}
-      {lostSound && <Sound url={`./assets/sounds/game_lost.mp3`} playStatus={playStatus} 
-        onFinishedPlaying={() => setPlayStatus(Sound.status.STOPPED)} />}
+      {rightSound && <Sound url={`./assets/sounds/game_right.mp3`} playStatus={rightPlayStatus}
+        onFinishedPlaying={() => setRightPlayStatus(Sound.status.STOPPED)} />}
+      {lostSound && <Sound url={`./assets/sounds/game_lost.mp3`} playStatus={lostPlayStatus} 
+        onFinishedPlaying={() => setLostPlayStatus(Sound.status.STOPPED)} />}
       {showResult && <Redirect exact to="reise" />}
     </div>
   );