expo-web/src/client/components/Root.tsx

import React, {useState, useEffect, useCallback} from 'react';
import Shader from './Shader';
import WhoAmI from './WhoAmI';
import Git from './Git';
import DownloadCV from './DownloadCV';
import ClickMe from './ClickMe';
import Player from './Player';

/**
 * @return {jsx} The root component
 */
export default function Root() {
	const [windowSize, setWindowSize] = useState(0);
	const [trigger, setTrigger] = useState(0);
	const [content, setContent]: any = useState([]);
	const [busy, setBusy]: any = useState(true);
	const loader: Array<any> = [];

	for (let i = 0; i < 5; i++) {
		loader.push(
			<div className='tile'>
				<div
					className='
						tile-child
						d-flex
						flex-column
						align-items-center
						justify-content-center'>
					<div className='d-inline loader'></div>
				</div>
			</div>);
	}
	loader.push(<div className='tile'><WhoAmI /></div>);
	loader.push(
		<div className='tile'>
			<Git windowSize={windowSize} />
		</div>);
	for (let i = 0; i < 2; i++) {
		loader.push(
			<div className='tile'>
				<div
					className='
						tile-child
						d-flex
						flex-column
						align-items-center
						justify-content-center'>
					<div className='d-inline loader'></div>
				</div>
			</div>);
	}
	loader.push(
		<div className='tile'>
			<DownloadCV windowSize={windowSize} />
		</div>);
	loader.push(
		<div className='tile'>
			<ClickMe
				windowSize={windowSize}
				setTrigger={setTrigger}
				setBusy={setBusy} />
		</div>);
	for (let i = 0; i < 5; i++) {
		loader.push(
			<div className='tile'>
				<div
					className='
						tile-child
						d-flex
						flex-column
						align-items-center
						justify-content-center'>
					<div className='d-inline loader'></div>
				</div>
			</div>);
	}
	const Shaders = [
		'BaseRaymarching',
		'Collapse',
		'Droplets',
		'Inception',
		'Menstom',
		'Torus',
		'Triangle',
		'BaseLattice',
	];

	const Sounds = [
		'Collapse.mp3',
		'Droplets.mp3',
		'Heavy Ropes.mp3',
		'Inception.mp3',
		'Menstom.mp3',
		'Speechless.mp3',
		'Triangle.mp3',
	];

	const handleWindowResize = useCallback((_event) => {
		setWindowSize(window.innerWidth);
	}, []);
	useEffect(() => {
		window.addEventListener('resize', handleWindowResize);
		return () => {
			window.removeEventListener('resize', handleWindowResize);
		};
	}, [handleWindowResize]);

	useEffect(() => {
		const newContent = [];
		const randomContent = [];
		const shadersRandom: Array<any> = [];
		const imagesRandom: Array<any> = [];
		const soundsRandom: Array<any> = [];

		for (let i = 0; i < 3; i++) {
			shadersRandom.push(Math.floor(Math.random() * 8));
			while (shadersRandom.indexOf(
				shadersRandom[shadersRandom.length - 1]) !=
				shadersRandom.length - 1) {
				shadersRandom[shadersRandom.length - 1] += 1;
				if (shadersRandom[shadersRandom.length - 1] == 8) {
					shadersRandom[shadersRandom.length - 1] = 1;
				}
			}
		}
		for (let i = 0; i < 3; i++) {
			shadersRandom[i] =
				<div className='tile'>
					<Shader name={Shaders[shadersRandom[i]]} />
				</div>;
		}

		for (let i = 0; i < 7; i++) {
			imagesRandom.push(Math.floor(Math.random() * 12) + 1);
			while (imagesRandom.indexOf(
				imagesRandom[imagesRandom.length - 1]) !=
				imagesRandom.length - 1) {
				imagesRandom[imagesRandom.length - 1] += 1;
				if (imagesRandom[imagesRandom.length - 1] == 13) {
					imagesRandom[imagesRandom.length - 1] = 1;
				}
			}
		}
		for (let i = 0; i < 7; i++) {
			imagesRandom[i] =
				<div className='tile'>
					<img
						src={'/static/images/' +
						imagesRandom[i].toString() +
						'.jpg'}>
					</img>
				</div>;
		}

		for (let i = 0; i < 2; i++) {
			soundsRandom.push(Math.floor(Math.random() * 7));
		}
		if (soundsRandom[0] == soundsRandom[1]) {
			soundsRandom[1] += 1;
			if (soundsRandom[1] == 7) {
				soundsRandom[1] = 0;
			}
		}
		soundsRandom[0] = Sounds[soundsRandom[0]];
		soundsRandom[1] = Sounds[soundsRandom[1]];
		for (let i = 0; i < soundsRandom.length; i++) {
			soundsRandom[i] =
				<div className='tile'>
					<Player src={'/static/sounds/' + soundsRandom[i]}/>
				</div>;
		}

		while (shadersRandom.length ||
			imagesRandom.length ||
			soundsRandom.length) {
			const random = Math.floor(Math.random() * 4);
			if (random == 0) {
				if (shadersRandom.length > 0) {
					randomContent.push(shadersRandom[0]);
					shadersRandom.shift();
				}
			} else if (random == 1) {
				if (soundsRandom.length > 0) {
					randomContent.push(soundsRandom[0]);
					soundsRandom.shift();
				}
			} else {
				if (imagesRandom.length > 0) {
					randomContent.push(imagesRandom[0]);
					imagesRandom.shift();
				}
			}
		}
		newContent.push(randomContent[0]);
		newContent.push(randomContent[1]);
		newContent.push(randomContent[2]);
		newContent.push(randomContent[3]);
		newContent.push(randomContent[4]);
		newContent.push(<div className='tile'><WhoAmI /></div>);
		newContent.push(
			<div className='tile'>
				<Git windowSize={windowSize} />
			</div>);
		newContent.push(randomContent[5]);
		newContent.push(randomContent[6]);
		newContent.push(
			<div className='tile'>
				<DownloadCV windowSize={windowSize} />
			</div>);
		newContent.push(
			<div className='tile'>
				<ClickMe
					windowSize={windowSize}
					setTrigger={setTrigger}
					setBusy={setBusy} />
			</div>);
		newContent.push(randomContent[7]);
		newContent.push(randomContent[8]);
		newContent.push(randomContent[9]);
		newContent.push(randomContent[10]);
		newContent.push(randomContent[11]);
		setContent(newContent);
		setBusy(false);
	}, [trigger]);


	return (
		<div id='root'>
			{busy ? loader : content}
		</div>
	);
}