From 66349471078ad3cf7dbb0bed4d8348d6943af9ec Mon Sep 17 00:00:00 2001 From: = <=> Date: Thu, 20 Aug 2020 21:25:10 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 3 + package-lock.json | 11 +++ webclient/package.json | 3 +- webclient/src/Footer.js | 152 +++++++++++++++++++++++++++----- webclient/src/light.css | 25 ++++-- webclient/src/spaceport/Ship.js | 65 ++++++++++++++ webclient/yarn.lock | 5 ++ 7 files changed, 235 insertions(+), 29 deletions(-) create mode 100644 .prettierrc create mode 100644 package-lock.json create mode 100644 webclient/src/spaceport/Ship.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..6253224 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..66eb8bf --- /dev/null +++ b/package-lock.json @@ -0,0 +1,11 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "three": { + "version": "0.119.1", + "resolved": "https://registry.npmjs.org/three/-/three-0.119.1.tgz", + "integrity": "sha512-GHyh/RiUfQ5VTiWIVRRTANYoXc1PFB1y+jDVRTb649nif1uX1F06PT1TKU3k2+F/MN4UJ3PWvQB53fY2OqKqKw==" + } + } +} diff --git a/webclient/package.json b/webclient/package.json index b7a9703..b7c7efa 100644 --- a/webclient/package.json +++ b/webclient/package.json @@ -20,7 +20,8 @@ "react-scripts": "3.4.1", "react-to-print": "~2.5.1", "recharts": "~1.8.5", - "semantic-ui-react": "~0.88.2" + "semantic-ui-react": "~0.88.2", + "three": "^0.119.1" }, "scripts": { "start": "react-scripts start", diff --git a/webclient/src/Footer.js b/webclient/src/Footer.js index ad21593..1c57e74 100644 --- a/webclient/src/Footer.js +++ b/webclient/src/Footer.js @@ -1,46 +1,154 @@ -import React from 'react'; +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]); -export function Footer() { return ( -
- +
-- Contact us: info@protospace.ca +
+ Contact us:{' '} + + info@protospace.ca +
-- Created and hosted by Protospace members for Protospace members. +
+ Created and hosted by Protospace members for Protospace + members.
-- Spaceport is free and open-source software. Click here to view the source code and license. +
+ Spaceport is free and open-source software.{' '} + + Click here + {' '} + to view the source code and license.
-
-
© 2020 Calgary Protospace Ltd.
-