Commit 21602e66 authored by Noran Baskaran's avatar Noran Baskaran
Browse files

Merge branch 'issue-14-canvasbug' into 'master'

Fixed error where the canvas updated on state change :)

Closes #14

See merge request !11
parents 657ea895 cc900cb0
/**
* Enum for holding track of the colors
* Enum for keeping track of the colors
*/
export enum Color {
RANDOM = -1,
......@@ -13,7 +12,7 @@ export enum Color {
* All the animation-functions will have a specification of color (or default = Color.RANDOM) and a boolean clear (or default = false)
*/
interface AnimationFunction {
(specification?: Color, clear?: boolean) : void
(specification?: Color, clear?: boolean): void;
}
/**
......@@ -54,7 +53,7 @@ const randomRGB = (specification: Color = Color.RANDOM): string => {
const generateRandomColor = (specification: Color = Color.RANDOM): string => {
const color: string = `#${
specification === Color.RANDOM
? Math.floor(Math.random() * 16777215).toString(16)
? Math.random().toString(16).substr(-6)
: randomRGB(specification)
}`;
return color;
......@@ -101,7 +100,10 @@ const updateBoxesColor = (specification: Color = Color.RANDOM) => {
* @param specification - the color specification
* @param clear - a boolean signaling the change/clear of color
*/
const draw1:AnimationFunction = (specification: Color = Color.RANDOM, clear: boolean = false) => {
const draw1: AnimationFunction = (
specification: Color = Color.RANDOM,
clear: boolean = false
) => {
if (clear) {
updateBoxesColor(specification);
}
......@@ -112,7 +114,7 @@ const draw1:AnimationFunction = (specification: Color = Color.RANDOM, clear: boo
const timeStamp: number = Date.now();
let xPos: number;
ctx.globalAlpha = 0.5;
ctx.globalAlpha = 0.7;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < boxes.length; i++) {
......@@ -141,7 +143,10 @@ let draw2Color: string = generateRandomColor();
* @param specification - the color specification
* @param clear - a boolean signaling the change/clear of color
*/
const draw2: AnimationFunction = (specification: Color = Color.RANDOM, clear: boolean = false) => {
const draw2: AnimationFunction = (
specification: Color = Color.RANDOM,
clear: boolean = false
) => {
if (clear) {
draw2Color = generateRandomColor(specification);
}
......
......@@ -3,6 +3,7 @@ import Exhibition from "./components/Exhibition";
import { fetchPoetryFromPoetryDB } from "./PoetryAPI";
import Header from "./components/Header";
import LocalStorageManager from "./LocalStorageManager";
import { animate, Color } from "./Animations";
import "./App.css";
/**
......@@ -32,6 +33,7 @@ const App: React.FC = () => {
const [loading, setLoading] = useState<boolean>(false);
const [favourites, setFavourites] = useState<number[]>([]);
const [theme, setTheme] = useState<number>(0);
const [userEdit, setUserEdit] = useState<boolean>(true)
const [errorDisplay, setErrorDisplay] = useState<boolean>(false);
const lsm: LocalStorageManager = new LocalStorageManager();
......@@ -74,6 +76,21 @@ const App: React.FC = () => {
setInstallationList({ installations: fetchedPoetryList });
setInstallation(fetchedPoetryList[0]);
setLoading(false);
setUserEdit(false);
};
/**
* Temporary function as not all the animations are done
* @param specification - the color specification
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
const drawAnimation = (specification: Color = Color.RANDOM) => {
let index: number = currentIndex;
if (index > 1) {
index = 1;
}
animate(index, specification);
setUserEdit(false);
};
/**
......@@ -101,6 +118,7 @@ const App: React.FC = () => {
*/
const changePoetry = (forward: boolean) => {
if (installationList === undefined) return;
setUserEdit(true);
const index: number = forwardOrBackward(currentIndex, forward);
setInstallation(installationList.installations[index]);
setCurrentIndex(index);
......@@ -111,7 +129,6 @@ const App: React.FC = () => {
* @param index - index of the installation
*/
const toggleFavourite = (index: number) => {
console.log(isFavourite(index));
if (isFavourite(index)) {
removeFavorite(index);
} else {
......@@ -205,8 +222,10 @@ const App: React.FC = () => {
lines={installation.lines}
currentIndex={currentIndex + 1}
audiosource={AUDIO_FILES[currentIndex]}
userEdit={userEdit}
toggleFavourite={toggleFavourite}
isFavourite={isFavourite}
drawAnimation={drawAnimation}
/>
}
</div>
......
import React, { useEffect } from "react";
import { animate, Color } from "../Animations";
import { Color } from "../Animations";
import AudioPlayer from "./AudioPlayer";
/**
......@@ -12,28 +12,16 @@ const Exhibition: React.FC<Installation> = ({
lines,
currentIndex,
audiosource,
userEdit,
toggleFavourite,
isFavourite,
drawAnimation,
}) => {
/**
* Temporary function as not all the animations are done
* @param specification - the color specification
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
const drawAnimation = (specification: Color = Color.RANDOM) => {
let index: number = currentIndex - 1;
if (index > 1) {
index = 1;
}
animate(index, specification);
};
/**
* Runs when the component is loaded on the page
*/
useEffect(() => {
drawAnimation();
drawAnimation(Color.RANDOM);
}, [drawAnimation]);
/**
......
type Installation = {
title: string;
author: string;
lines: string[] | undefined;
currentIndex: number;
audiosource: HTMLAudioElement;
userEdit: boolean;
toggleFavourite: (index: number) => void;
isFavourite: (index: number) => boolean;
drawAnimation: (specification?: Color) => void;
};
type InstallationList = {
......@@ -32,4 +35,4 @@ type Box = {
color: string;
size: number;
y: number;
};
\ No newline at end of file
};
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