WIP

Author: Gimleux

webapp_frontend/public/assets/audio/2017-04-01_-_Viking_Ship_-_David_Fesliyan.mp3

@@ -0,0 +1 @@
+https://www.fesliyanstudios.com/royalty-free-music/download/viking-ship-visual-novel-corruption-and-divide/175

webapp_frontend/public/assets/audio/2017-04-01_-_Viking_Ship_-_David_Fesliyan.txt

@@ -2,8 +2,10 @@ import React, {ReactElement} from 'react';
 import './App.css';
 import {Container} from 'react-bootstrap';
 import Header from "./basicElements/Header";
+import Footer from "./basicElements/Footer";
 import {BrowserRouter} from "react-router-dom";
 import Router from "./Router/Router";
+import PermanentAssets from "./basicElements/PermanentAssets";
 
 function App(): ReactElement {
 
@@ -15,6 +17,8 @@ function App(): ReactElement {
                 <Container>
                     <Router/>
                 </Container>
+                <Footer/>
+                <PermanentAssets/>
             </BrowserRouter>
         </div>
     );

webapp_frontend/src/components/App.tsx

@@ -1,12 +1,10 @@
 import React, {ReactElement} from 'react';
 
-function Footers():ReactElement {
+export default function Footers():ReactElement {
     return(
         <div>
-            hallo
+            Footer
         </div>
     );
 }
 
-export default Footers;
-

webapp_frontend/src/components/basicElements/Footer.tsx

@@ -1,9 +1,11 @@
 import React, {ReactElement} from "react";
-//Assets
-import viking_ship from "../../assets/music/2017-04-01_-_Viking_Ship_-_David_Fesliyan.mp3"
 
-export default function PermanentAssets():ReactElement {
+export default function PermanentAssets(): ReactElement {
     return (
-        <div></div>
+        <div>
+            <audio id={"audio_viking"} preload={"metadata"}>
+                <source src="/assets/audio/2017-04-01_-_Viking_Ship_-_David_Fesliyan.mp3"/>
+            </audio>
+        </div>
     )
 }

webapp_frontend/src/components/basicElements/PermanentAssets.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react";
 import logo from "../../assets/images/logos/logo.png";
 import {Button, Table} from "react-bootstrap";
 import {callBackendHealth} from "../../background/api/api";
+import {audioOnOff, setAudioVolumeByID} from "../../background/methods/sound"
 
 export default function Health() {
 
@@ -26,8 +27,14 @@ export default function Health() {
                 FileFighter
             </h1>
 
-
-            <img src={logo} alt="logo"/>
+            <img
+                src={logo}
+                alt="Logo FileFighter"
+                onClick={() => {
+                    setAudioVolumeByID("audio_viking", 0.5)
+                    audioOnOff("audio_viking")
+                }}
+            />
 
 
             <div>

webapp_frontend/src/components/pages/Health.tsx

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "baseUrl": "src"
   },
   "include": [
     "src"