From 03687402c9644192112da13c26eea44432ee2052 Mon Sep 17 00:00:00 2001
From: Elijah Lucian <elijahlucian@gmail.com>
Date: Wed, 17 Mar 2021 10:51:19 -0600
Subject: [PATCH] handling window resize events

---
 webclient/src/light.css          |  1 +
 webclient/src/spaceport/scene.js | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/webclient/src/light.css b/webclient/src/light.css
index 530ceec..90e9c9e 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -128,6 +128,7 @@ body {
 .footer canvas {
 	grid-row: 1/2;
 	grid-column: 1/2;
+	margin: auto;
 }
 
 /* grid top */
diff --git a/webclient/src/spaceport/scene.js b/webclient/src/spaceport/scene.js
index cccc2e1..2c9f0cf 100644
--- a/webclient/src/spaceport/scene.js
+++ b/webclient/src/spaceport/scene.js
@@ -11,7 +11,9 @@ export const scene = ({ ref }) => {
 	let nextShip = shipInterval;
 
 	var scene = new THREE.Scene();
+
 	const renderer = new THREE.WebGLRenderer({ antialias: true });
+
 	const width = ref.current.clientWidth;
 	const height = ref.current.clientHeight;
 	renderer.setSize(width, height);
@@ -72,7 +74,15 @@ export const scene = ({ ref }) => {
 
 		ships = ships.filter((s) => !s.kill);
 
+		window.addEventListener('resize', onWindowResize, false);
+
+		function onWindowResize() {
+			camera.updateProjectionMatrix();
+			renderer.setSize(ref.current.clientWidth, ref.current.clientHeight);
+		}
+
 		requestAnimationFrame(animate);
+
 		renderer.render(scene, camera);
 	};