spaceport/webclient/src/Footer.js

import React, { useRef, useEffect } from 'react';
import { Container, Icon } from 'semantic-ui-react';
import * as THREE from 'three/build/three.module';
import { Ship } from './spaceport/Ship';

export const Footer = () => {
	const footerRef = useRef();

	useEffect(() => {
		if (!footerRef.current) return;

		let t = 0.01;
		const shipInterval = 2;
		let nextShip = shipInterval;

		var scene = new THREE.Scene();
		const renderer = new THREE.WebGLRenderer({ antialias: true });
		renderer.setSize(
			footerRef.current.clientWidth,
			footerRef.current.clientHeight
		);

		const camera = new THREE.PerspectiveCamera(65, 1, 0.01, 1000);
		camera.position.set(4, 1, 4);
		camera.lookAt(new THREE.Vector3(-8, 0, -2));

		scene.add(camera);

		footerRef.current.appendChild(renderer.domElement);

		let ships = [];
		const ship = new Ship();
		scene.add(ship.mesh);
		ships.push(ship);

		const animate = () => {
			const deltaTime = 0.075;
			t += deltaTime;

			// get mouse

			if (t > nextShip) {
				console.log('bing');
				const ship = new Ship();
				scene.add(ship.mesh);
				ships.push(ship);
				nextShip += shipInterval + (Math.random() - 0.5) * 2;
			}

			for (const ship of ships) {
				ship.update({ deltaTime });
				if (ship.kill) {
					console.log('killing ship');
					scene.remove(ship.mesh);
				}
			}

			ships = ships.filter((s) => !s.kill);

			requestAnimationFrame(animate);
			renderer.render(scene, camera);
		};

		animate();

		renderer.render(scene, camera);
	}, [footerRef]);

	return (
		<div className="footer" ref={footerRef}>
			<Container className="footer-content">
				<p>
					<img
						alt="site logo"
						src="/logo-short.svg"
						className="logo"
					/>
				</p>

				<p className="text">
					Contact us:{' '}
					<a
						href="mailto:info@protospace.ca"
						target="_blank"
						rel="noopener noreferrer"
					>
						info@protospace.ca
					</a>
				</p>

				<p className="text">
					Created and hosted by Protospace members for Protospace
					members.
				</p>

				<p className="text">
					Spaceport is free and open-source software.{' '}
					<a
						href="https://github.com/Protospace/spaceport"
						target="_blank"
						rel="noopener noreferrer"
					>
						Click here
					</a>{' '}
					to view the source code and license.
				</p>

				<p>
					<a
						href="https://instagram.com/protospace"
						target="_blank"
						rel="noopener noreferrer"
						aria-label="link to our instagram"
					>
						<Icon name="instagram" size="large" />
					</a>
					<a
						href="https://twitter.com/protospace"
						target="_blank"
						rel="noopener noreferrer"
						aria-label="link to our twitter"
					>
						<Icon name="twitter" size="large" />
					</a>
					<a
						href="https://youtube.com/user/calgaryprotospace/playlists"
						target="_blank"
						rel="noopener noreferrer"
						aria-label="link to our youtube"
					>
						<Icon name="youtube" size="large" />
					</a>
					<a
						href="https://github.com/Protospace"
						target="_blank"
						rel="noopener noreferrer"
						aria-label="link to our github"
					>
						<Icon name="github" size="large" />
					</a>
					<a
						href="https://docs.my.protospace.ca"
						target="_blank"
						rel="noopener noreferrer"
						aria-label="link to our docs"
					>
						<Icon name="book" size="large" />
					</a>
				</p>

				<p>© 2020 Calgary Protospace Ltd.</p>
			</Container>
		</div>
	);
};