(v0.1.4.1-alpha) Dynamic Grid

Now instead of loading fixed amount of grids we now load grids of 5.35rem width and 6rem height and repeat them! so size remains constant!!

Author: rupnil-codes

README.md

@@ -7,9 +7,10 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [ ] Add more stuff to Lockscreen.
 - [X] Animations in the Lockscreen.
 - [ ] A loading screen on desktop load and sound
-- [ ] Windows Design
+- [X] Windows Design + Desktop Design (Done in v0.1.3... & v0.1.4... respectively)
 - [X] Minimizing window still takes up the zIndex and prevents from using it.(FIXED IN v0.1.3.3-alpha)
 - [X] Clicking app on task bar checks if it is focussed or not then: if focussed minimize it, else focus it. (v0.1.3.3-alpha)
 - [X] Bug: Closing all apps still makes one of them active (visual) (FIXED: v0.1.3.4-alpha)
 - [X] Windows Lag when moving (FIXED in v0.1.3.5).
 - [X] Draggable component throughout (FIXED in v0.1.3.5).
+- [X] Dynamic Grid (Fixed in v0.1.4.1)

src/routes/desktop.jsx

@@ -36,11 +36,11 @@ function Desktop() {
     }), []);
 
     const handleIconStop = (e, data, id) => {
-        const gridX = window.innerWidth / 15;
-        const gridY = (window.innerHeight - 48) / 6;
+        const gridX = 5.35 * 16;
+        const gridY = 6 * 16;
 
-        const newCol = Math.max(1, Math.min(15, iconPositions[id].col + Math.round(data.x / gridX)));
-        const newRow = Math.max(1, Math.min(6, iconPositions[id].row + Math.round(data.y / gridY)));
+        const newCol = Math.max(1, Math.round(data.x / gridX) + iconPositions[id].col) ;
+        const newRow = Math.max(1, Math.round(data.y / gridY) + iconPositions[id].row);
 
         const isOccupied = Object.entries(iconPositions).some(([appId, pos]) => {
             return appId !== id && pos.col === newCol && pos.row === newRow;

src/styles/routes/desktop.css

@@ -12,23 +12,19 @@
     height: calc(100vh - 3rem);
     width: 100vw;
     display: grid;
-    grid-template-columns: repeat(15, 1fr);
-    grid-template-rows: repeat(6, 1fr);
+
+    grid-template-columns: repeat(auto-fill, 5.35rem);
+    grid-template-rows: repeat(auto-fill, 6rem);
 
     align-items: center;
     justify-items: center;
 
-    grid-template-areas:
-        "a1 b1 c1 d1 e1 f1 g1 h1 i1 j1 k1 l1 m1 n1 o1"
-        "a2 b2 c2 d2 e2 f2 g2 h2 i2 j2 k2 l2 m2 n2 o2"
-        "a3 b3 c3 d3 e3 f3 g3 h3 i3 j3 k3 l3 m3 n3 o3"
-        "a4 b4 c4 d4 e4 f4 g4 h4 i4 j4 k4 l4 m4 n4 o4"
-        "a5 b5 c5 d5 e5 f5 g5 h5 i5 j5 k5 l5 m5 n5 o5"
-        "a6 b6 c6 d6 e6 f6 g6 h6 i6 j6 k6 l6 m6 n6 o6";
-
     gap: 0.5rem;
     padding: 0.5rem;
-    margin-right: 0.5rem;
+
+    grid-auto-flow: column;
+
+    overflow: hidden;
 }