(v0.3.8-beta) Smooth Dragging

Fixed the bug where 'the grid snapping was offset from the place where icons snap when u release' originally found  by SNXHIT_! The motion is soo smooth now!

Author: rupnil-codes

README.md

@@ -80,9 +80,9 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [ ] Lock some apps (Hacked yk)
 - [ ] Stress test the terminal.
 - [X] Add games like MC(https://classic.minecraft.net/) and sm others. (Added v0.3.2)
-- [ ] the grid snapping is offset from the place where icons snap when u release (Snxhit_)
+- [X] the grid snapping is offset from the place where icons snap when u release (Snxhit_)
 - [ ] Cmd opens on login and then the notepad opens automatically, remove the alert thing.
-- [ ] WINDOW_DEFAULTS: Now the position of the windows change with the width and height, added the vars in App.js (Done v0.3.7)
+- [X] WINDOW_DEFAULTS: Now the position of the windows change with the width and height, added the vars in App.js (Done v0.3.7)
 
 
 Playtesters & Contributors: Flux3tor, Snxhit_, Matthias, Nx75, Keyboard1000n17, abtheinnovator, redac1ed, TruthEntity, SeradedStripes

src/routes/desktop.jsx

@@ -15,6 +15,11 @@ import * as React from "react";
 
 
 function Desktop() {
+    const GRID_WIDTH = 5.35 * 16; // in rem cuz yes sybau
+    const GRID_HEIGHT = 6 * 16;
+    const GRID_GAP  = 0.5 *  16;
+
+
     const [isOpenProgressPanel, setIsOpenProgressPanel] = useState(false);
     const [isStartMenuActive, setIsStartMenuActive] = useState(false);
 
@@ -76,7 +81,6 @@ function Desktop() {
     });
 
     const lastPos = useRef({ x: 100, y: 100 });
-    const OFFSET = 20;
 
     const nodeRefs = useMemo(() => {
         return Object.keys(APP_REGISTRY).reduce((acc, key) => {
@@ -94,23 +98,33 @@ function Desktop() {
     const [draggingIcon, setDraggingIcon] = useState(null);
 
     const handleIconStop = (e, data, id) => {
-        const gridX = 5.35 * 16;
-        const gridY = 6 * 16;
+        setDraggingIcon(null);
+
+        const maxCols = Math.floor(window.innerWidth / (GRID_WIDTH + GRID_GAP));
+        const maxRows = Math.floor((window.innerHeight - 48) / (GRID_HEIGHT + GRID_GAP));
+
+        const movedCols = Math.round(data.x / (GRID_WIDTH + GRID_GAP));
+        const movedRows = Math.round(data.y / (GRID_HEIGHT + GRID_GAP));
 
-        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 newCol = Math.min(
+            Math.max(1, iconPositions[id].col + movedCols),
+            maxCols
+        );
+        const newRow = Math.min(
+            Math.max(1, iconPositions[id].row + movedRows),
+            maxRows
+        );
 
         const isOccupied = Object.entries(iconPositions).some(([appId, pos]) => {
             return appId !== id && pos.col === newCol && pos.row === newRow;
         });
 
-        if (isOccupied) {
-            return;
+        if (!isOccupied) {
+            setIconPositions(prev => ({
+                ...prev,
+                [id]: { col: newCol, row: newRow }
+            }));
         }
-        setIconPositions(prev => ({
-            ...prev,
-            [id]: { col: newCol, row: newRow }
-        }));
     };
 
     function openApp(name) {
@@ -211,7 +225,6 @@ function Desktop() {
                         key={id}
                         nodeRef={nodeRefs[id]}
                         position={{ x: 0, y: 0 }}
-                        grid={[window.innerWidth / 14, (window.innerHeight - 48) / 6]}
                         onStart={(e) => {
                             e.stopPropagation();
                             setSelectedIcon(id);
@@ -236,8 +249,8 @@ function Desktop() {
                                 gridRow: iconPositions[id].row,
 
                                 zIndex: draggingIcon === id ? 99999 : 1,
-                                opacity: draggingIcon === id ? 1 : undefined,
-                                position: 'relative'
+                                opacity: draggingIcon === id ? 0.6 : 1,
+                                position: 'relative',
                             }}
                         >
                             <img className="app-icon" src={APP_REGISTRY[id].imgSrc} draggable="false" alt="icon" />

src/styles/routes/desktop.css

@@ -18,7 +18,7 @@
     height: calc(100vh - 3rem);
     width: 100vw;
     display: grid;
-
+    inset: 0;
     grid-template-columns: repeat(auto-fill, 5.35rem);
     grid-template-rows: repeat(auto-fill, 6rem);
 
@@ -42,21 +42,21 @@
     height: 100%;
     width: 100%;
     gap: 0.25rem;
-}
-
-.grid-app-item:hover {
-    background-color: var(--border);
-}
 
-.grid-app-item {
-    transition: background 0.1s;
+    transition:
+            opacity var(--hover-animation) var(--hover-animation-type),
+            background 0.15s var(--hover-animation-type);
     border: 1px solid transparent;
     border-radius: 0.25rem;
     touch-action: none;
     user-select: none;
     cursor: pointer;
 }
 
+.grid-app-item:hover {
+    background-color: var(--border);
+}
+
 .grid-app-item.selected {
     background-color: rgba(0, 120, 215, 0.2);
     border: 1px solid var(--blue);
@@ -94,7 +94,7 @@
     position: fixed;
     width: 100vw;
     height: 3rem;
-    backdrop-filter: blur(2rem) brightness(0.2);
+    backdrop-filter: blur(2rem) brightness(0.75);
     transition: var(--animation-time) var(--hover-animation-type);
 
     display: flex;