Commit f24c06f7 authored by Hauk Olaussen's avatar Hauk Olaussen
Browse files

Loading and unloading theme.

Also moved the fav-button down to the exhibition component instead of in App.tsx as this makes more sense.

#12
parents ee1238f2 ae99ace4
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
} }
#wrapperdiv button { #wrapperdiv button {
width: 80px; width: 150px;
margin: 40px; margin: 40px;
} }
......
...@@ -134,7 +134,6 @@ const App: React.FC = () => { ...@@ -134,7 +134,6 @@ const App: React.FC = () => {
const addFavourite = (index: number) => { const addFavourite = (index: number) => {
const newFavs = [...favourites, index]; const newFavs = [...favourites, index];
setFavourites(newFavs); setFavourites(newFavs);
console.log(newFavs);
lsm.change("favourites", newFavs); lsm.change("favourites", newFavs);
}; };
...@@ -145,7 +144,6 @@ const App: React.FC = () => { ...@@ -145,7 +144,6 @@ const App: React.FC = () => {
const removeFavorite = (index: number) => { const removeFavorite = (index: number) => {
const newFavs = favourites.filter((i) => i !== index); const newFavs = favourites.filter((i) => i !== index);
setFavourites(newFavs); setFavourites(newFavs);
console.log(newFavs);
lsm.change("favourites", newFavs); lsm.change("favourites", newFavs);
}; };
...@@ -153,7 +151,9 @@ const App: React.FC = () => { ...@@ -153,7 +151,9 @@ const App: React.FC = () => {
* Will change between the themes available for the web-page * Will change between the themes available for the web-page
*/ */
const changeTheme = () => { const changeTheme = () => {
setTheme(theme === 0 ? 1 : 0); const newTheme = theme === 0 ? 1 : 0;
setTheme(newTheme);
lsm.change("theme", newTheme);
}; };
return ( return (
...@@ -190,14 +190,6 @@ const App: React.FC = () => { ...@@ -190,14 +190,6 @@ const App: React.FC = () => {
> >
Next poetry Next poetry
</button> </button>
<button
id="favouritebutton"
onClick={() => {
toggleFavourite(currentIndex);
}}
>
{isFavourite(currentIndex) ? "Remove from fav" : "Add to fav"}
</button>
<button <button
id="themebutton" id="themebutton"
onClick={() => { onClick={() => {
...@@ -213,6 +205,8 @@ const App: React.FC = () => { ...@@ -213,6 +205,8 @@ const App: React.FC = () => {
lines={installation.lines} lines={installation.lines}
currentIndex={currentIndex + 1} currentIndex={currentIndex + 1}
audiosource={AUDIO_FILES[currentIndex]} audiosource={AUDIO_FILES[currentIndex]}
toggleFavourite={toggleFavourite}
isFavourite={isFavourite}
/> />
} }
</div> </div>
......
...@@ -12,7 +12,10 @@ const Exhibition: React.FC<Installation> = ({ ...@@ -12,7 +12,10 @@ const Exhibition: React.FC<Installation> = ({
lines, lines,
currentIndex, currentIndex,
audiosource, audiosource,
toggleFavourite,
isFavourite,
}) => { }) => {
/** /**
* Temporary function as not all the animations are done * Temporary function as not all the animations are done
* @param specification - the color specification * @param specification - the color specification
...@@ -50,6 +53,15 @@ const Exhibition: React.FC<Installation> = ({ ...@@ -50,6 +53,15 @@ const Exhibition: React.FC<Installation> = ({
<h3> <h3>
By - <em>{author}</em> By - <em>{author}</em>
</h3> </h3>
<button
id="favouritebutton"
onClick={() => {
toggleFavourite(currentIndex - 1);
}}
>
{isFavourite(currentIndex - 1) ? "Remove from fav" : "Add to fav"}
</button>
<br />
<canvas id="canvas" width="400" height="500" /> <canvas id="canvas" width="400" height="500" />
<br /> <br />
<button <button
......
...@@ -4,6 +4,8 @@ type Installation = { ...@@ -4,6 +4,8 @@ type Installation = {
lines: string[] | undefined; lines: string[] | undefined;
currentIndex: number; currentIndex: number;
audiosource: HTMLAudioElement; audiosource: HTMLAudioElement;
toggleFavourite: (index: number) => void;
isFavourite: (index: number) => boolean;
}; };
type InstallationList = { type InstallationList = {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment