Fixed Mobile Display Size Bug

IllusiveBagel · Mar 27, 2022 · 1e108a5 · 1e108a5
1 parent bf123d5
commit 1e108a5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 14 deletions.
diff --git 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
@@ -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: [],