Make the ships explode

webclient/src/light.css

@@ -127,7 +127,7 @@ body {
 @media (min-width: 650px) {
 	.footer-content {
 		transition: all 0.2s ease-in;
-		opacity: 0.25;
+		opacity: 0.5;
 	}
 
 	.footer-content:hover {

webclient/src/spaceport/Ship.js

@@ -20,12 +20,17 @@ export class Ship {
 			shipGeo,
 			new THREE.MeshStandardMaterial(this.direction > 0 ? 0xff0000 : 0x0000ff, { flatShading: true })
 		);
-		this.y = (Math.random() - 0.5) * 2;
-		this.x = (Math.random() - 0.5) * 2;
+
+		this.burstGeo = new THREE.SphereGeometry(0.1, 32, 32);
+
+		this.y = (Math.random() - 0.5) * 4;
+		this.x = (Math.random() - 0.5) * 4;
 
 		this.mesh.material.color.set(
 			new THREE.Color(`hsl(${direction > 0 ? 0 : 180},30%,40%)`)
 		);
+		this.mesh.material.opacity = 1;
+
 		this.mesh.position.y = this.y;
 		this.mesh.position.x = this.x;
 		this.mesh.position.z = (-475/4 - 6) * this.direction; //+ Math.random()
@@ -52,11 +57,15 @@ export class Ship {
 		this.life -= deltaTime;
 
 		if (!this.flyIn) {
+			this.mesh.material.color.set(
+				new THREE.Color(`hsl(${this.direction > 0 ? 0 : 180},30%,20%)`)
+			);
+
 			const xs = Math.sin(this.life * 0.5 + this.x);
 			const yrot = Math.sin(this.life + this.x + (3.14/2 * this.direction));
-			this.mesh.position.y = this.y + Math.sin(this.life + this.y) * 0.2;
+			this.mesh.position.y = this.y + Math.sin(this.life + this.y) * 0.1;
 			this.mesh.position.x = this.x + xs * 0.15;
-			this.mesh.rotation.x = yrot * 0.15;
+			this.mesh.rotation.x = yrot * 0.05;
 			this.mesh.position.z += 0.01 * this.direction;
 			this.nextShot -= deltaTime;
 			if (this.nextShot <= 0) {
@@ -65,17 +74,17 @@ export class Ship {
 			}
 		}
 
-		if (this.life < 0) {
-			const a = Math.abs(this.life);
-			this.mesh.position.z += a * 2 * this.direction;
-			this.mesh.scale.z = a * 4;
-			this.firing = false;
+		if (this.life < 0 && !this.flyin) {
+			this.mesh.geometry = this.burstGeo;
+			this.mesh.scale.x *= 1.1;
+			this.mesh.scale.y *= 1.1;
+			this.mesh.scale.z *= 1.1;
 
-			this.mesh.rotation.y = 0;
-			this.mesh.rotation.x = 0;
+			this.mesh.material.transparent = true;
+			this.mesh.material.opacity *= 0.95;
 		}
 
-		if (Math.abs(this.mesh.position.z > 475/2)) {
+		if (this.mesh.scale.x > 10) {
 			this.kill = true;
 		}
 	}

webclient/src/spaceport/scene.js

@@ -22,17 +22,22 @@ export const scene = ({ ref }) => {
 
 	const camera = new THREE.PerspectiveCamera(65, width / height, 0.01, 1000);
 
-	camera.position.set(5, 0.5, 1);
-	camera.lookAt(new THREE.Vector3(-9, 0, 3));
+	camera.position.set(5, 2, 1);
 	camera.lookAt(new THREE.Vector3(0, 0, 0));
 	scene.add(camera);
 
 	ref.current.appendChild(renderer.domElement);
 
-	const light = new THREE.DirectionalLight('#fff', 1);
-	light.position.x = 3;
-	light.position.z = 1;
-	scene.add(light);
+	const light1 = new THREE.DirectionalLight('#fff', 1);
+	light1.position.x = 3;
+	light1.position.z = 1;
+	scene.add(light1);
+
+	const light2 = new THREE.PointLight('#fff', 2);
+	light2.position.x = 5;
+	light2.position.y = 5;
+	light2.position.z = 1;
+	scene.add(light2);
 
 	let ships = [];
 	let bolts = [];