New responsive version

Im-Rises · Sep 17, 2023 · 1be7a78 · 1be7a78
1 parent c639596
commit 1be7a78
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 140 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "nbody-simulator-react-barnes-hut-react-p5": "0.5.7",
+    "nbody-simulator-react-barnes-hut-react-p5": "0.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.67.0"

diff --git a/src/App.jsx b/src/App.jsx
@@ -12,12 +12,18 @@ function App() {
     const [particleMass, setParticleMass] = useState(1);
 
     return (
-        <>
-            <h1>Barnes-Hut N-Body simulation</h1>
-            <NbodySimulatorBarnesHut particlesCount={count} widthHeight={500} showQuadtree={false} maxDepth={maxDepth}
-                                     theta={theta} G={G} softening={softening} capacity={capacity}
-                                     particleMass={particleMass}
-                                     backgroundColor={new Color(100, 100, 100)}/>
+        <div className={'app-panel'}>
+            <h1 className={'title-app'}>Barnes-Hut N-Body simulation</h1>
+            <div className={'nbody-simulator-canvas-holder'}>
+                <NbodySimulatorBarnesHut particlesCount={count} widthHeight={500} showQuadtree={false}
+                                         maxDepth={maxDepth}
+                                         theta={theta} G={G} softening={softening} capacity={capacity}
+                                         particleMass={particleMass}
+                                         backgroundColor={new Color(100, 100, 100)}
+                                         divStyle={"width:100%; height:50vh; align-items:center; justify-content:center; display:flex;"}
+                                         canvasStyle={"object-fit:contain; max-width:90%; max-height:90%;"}
+                />
+            </div>
             <div className={'input-simulation-holder'}>
                 <div>
                     <label htmlFor={'input-particles-count'}>Particles count : </label>
@@ -91,7 +97,7 @@ function App() {
                     }}/>
                 </div>
             </div>
-        </>
+        </div>
     )
 }