From 1e108a5c43f2fc078ce65ed84270bf9007933ded Mon Sep 17 00:00:00 2001
From: IllusiveBagel <hawkentroop@gmail.com>
Date: Sun, 27 Mar 2022 23:05:15 +0100
Subject: [PATCH] Fixed Mobile Display Size Bug

---
 src/App.tsx       |  5 +++--
 src/lib/World.tsx | 16 ++++------------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b53661a..6199557 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,14 +5,15 @@ import "./App.css";
 function App() {
   useEffect(() => {
     const canvas = document.getElementById("canvas");
-    blastOff(canvas as HTMLCanvasElement);
+    const container = document.getElementById("container");
+    blastOff(canvas as HTMLCanvasElement, container);
   }, []);
 
 
   return (
     <div className="App">
       <h1 className="Title">Synaptic</h1>
-      <div style={{ width: "100%", height: "100%", backgroundColor: "#282c34" }}>
+      <div style={{ width: "100%", height: "100%" }} id="container">
         <canvas id="canvas" width="600" height="600" />
       </div>
       <p className="Desc">Simple React App Implementing the Synaptic Neural Network Library</p>
diff --git a/src/lib/World.tsx b/src/lib/World.tsx
index d827681..09d91b6 100644
--- a/src/lib/World.tsx
+++ b/src/lib/World.tsx
@@ -1,23 +1,15 @@
 import { Creature } from "./Creature";
-import { isMobile } from "react-device-detect";
 import { IWorld } from "./Interfaces";
 
-export function blastOff(canvas: HTMLCanvasElement | null) {
-
+export function blastOff(canvas: HTMLCanvasElement | null, container: HTMLElement | null) {
 	var num = 20;
 	var fps = 100;
 
-	if (canvas !== null) {
+	if (canvas !== null && container !== null) {
 		var ctx = canvas.getContext('2d');
 
-		if (isMobile) {
-			canvas.width = window.screen.width;
-			canvas.height = window.screen.height;
-		}
-		else {
-			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight;
-		}
+		canvas.width = container.offsetWidth;
+		canvas.height = container.offsetHeight;
 
 		var world: IWorld = {
 			creatures: [],