Merge branch 'master' of https://github.com/devklick/react-resktop-sim into dev

Author: devklick

README.md

@@ -1,27 +1,79 @@
-# React + TypeScript + Vite
+# React Desktop Simulator
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A simple simulation of a desktop environment, built using React.
 
-Currently, two official plugins are available:
+[Try it out!](https://devklick.github.io/react-desktop-sim/)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Status
 
-## Expanding the ESLint configuration
+⚠️ WIP
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+While it's somewhat functional, it's still a work in progress. Expect things to 
+change fairly often, sometimes for better, sometimes for worse. 
 
-- Configure the top-level `parserOptions` property like this:
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
+## Scope And Purpose
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+The purpose of this app, as with most of my apps, is for fun and practice.
+It doesn't really serve any useful purpose. It's fun to work on, hopefully it's
+interesting to others too, either to work on (feel free to get involved) or just
+play around with.
+
+There's no defined scope, really. It's something that will likely slowly be built 
+up more and more over time. With that being said, there are at least a few things 
+that are definitely out of scope:
+
+- Installing applications
+  <br>You will never be able to install applications into this desktop simulator. 
+  You can build your own applications using React and add them to the repo, but 
+  you will never be able to install any genuine applications.
+
+## Features
+
+### File System
+
+There's a basic file system built into the desktop environment, and it's persisted
+in your browsers local storage. It's not a full file system, so it doesn't contain
+the typical system files and folders you'd expect to see in a Windows, Linux or Mac OS
+system, but it's enough for you to create files and folders as required.
+
+### Moveable/Resizable Applications
+
+You can position your applications anywhere on the desktop, resizing them to fit
+your requirements. You can even maximize and minimize them when necessary.
+
+### File Browser Application
+
+There's no point having a file system built int the environment if there's no GUI
+to use it! There's a basic file browser application that allows you to navigate
+throughout the file system, view and create files and folders, pin favorites, and more.
+
+### Calculator Application
+
+Of course, there's a simple calculator app that allows you to perform basic
+calculations. Don't expect anything fancy though; you wont be able to complete 
+you're algebra homework using it!
+
+### Notes Application
+
+A very bog-standard notes app that allows you to... well, write notes! 
+It doesn't currently support saving files, but that should be added in the near 
+future (the file system supports it, there's just no option in the UI to actually 
+save the file). The same goes for loading saved files.
+
+### Settings Application
+
+The settings application will be for controlling the various settings of the 
+desktop environment. At present, this is limited to:
+
+#### Appearance
+
+You can control the appearance of your simulated desktop environment, changing 
+things like:
+
+- Background image
+- UI color
+- Font color
+
+Hopefully the list of configurable appearance settings will continue to grow 
+over time.

src/components/BorderedApp/BorderedApp.scss

@@ -7,7 +7,8 @@
   grid-template-areas:
     "title-bar"
     "content";
-  border-radius: 10px 10px 0 0;
+  // border-radius: 10px 10px 0 0;
+  border-radius: 10px;
   box-shadow: 0px -2px 10px 1px rgb(0, 0, 0, 0.5);
   position: fixed;
 

src/components/BottomBar/Launcher/Launcher.scss

@@ -20,6 +20,7 @@
   transform: scale(1);
   transition: all 0.2s ease;
   &:hover {
+    box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.5);
     transform: scale(1.3);
     transition: all 0.2s ease;
   }

src/hooks/useDragToMove.ts

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Rect } from "./useDragToResize";
+import { Position, Rect } from "./useDragToResize";
 
 // https://stackoverflow.com/a/39192992/6236042
 
@@ -19,12 +19,20 @@ interface UseDraggableProps {
   moveRef?: React.RefObject<HTMLElement> | null;
 
   elementRect: MutableRefObject<Partial<Rect>>;
+
+  threshold?: number;
 }
 
 // complex logic should be a hook, not a component
-const useDragToMove = ({ moveRef = null, elementRect }: UseDraggableProps) => {
+const useDragToMove = ({
+  moveRef = null,
+  elementRect,
+  threshold = 7,
+}: UseDraggableProps) => {
   const [pressed, setPressed] = useState(false);
   const ref = useRef<HTMLElement | null>(null);
+  const tempRect = useRef<Position>({ x: 0, y: 0 });
+  const moving = useRef(false);
 
   const unsubscribe = useRef<VoidFunction>();
   const moveHandle: RefCallback<HTMLElement> = useCallback((elem) => {
@@ -52,23 +60,37 @@ const useDragToMove = ({ moveRef = null, elementRect }: UseDraggableProps) => {
 
     const handleMouseMove = throttle(
       (event: { movementX: number; movementY: number }) => {
-        if (!ref.current || !elementRect.current) {
-          return;
-        }
+        const element = moveRef?.current ?? ref.current;
+
+        if (!element) return;
 
-        elementRect.current.left =
-          (elementRect.current.left ?? 0) + event.movementX;
+        tempRect.current.x += event.movementX;
+        tempRect.current.y += event.movementY;
 
-        elementRect.current.top =
-          (elementRect.current.top ?? 0) + event.movementY;
+        if (
+          Math.abs(tempRect.current.x) >= threshold ||
+          Math.abs(tempRect.current.y) >= threshold ||
+          moving.current
+        ) {
+          elementRect.current.left =
+            (elementRect.current.left ?? 0) + tempRect.current.x;
 
-        const elem = moveRef?.current ?? ref.current;
+          elementRect.current.top =
+            (elementRect.current.top ?? 0) + tempRect.current.y;
+
+          tempRect.current.x = 0;
+          tempRect.current.y = 0;
+          moving.current = true;
+        }
 
-        elem.style.left = `${elementRect.current.left}px`;
-        elem.style.top = `${elementRect.current.top}px`;
+        element.style.left = `${elementRect.current.left}px`;
+        element.style.top = `${elementRect.current.top}px`;
       }
     );
     const handleMouseUp = () => {
+      tempRect.current.x = 0;
+      tempRect.current.y = 0;
+      moving.current = false;
       setPressed(false);
     };
     // subscribe to mousemove and mouseup on document, otherwise you
@@ -84,7 +106,7 @@ const useDragToMove = ({ moveRef = null, elementRect }: UseDraggableProps) => {
     // if `onDrag` wasn't defined with `useCallback`, we'd have to
     // resubscribe to 2 DOM events here, not to say it would mess
     // with `throttle` and reset its internal timer
-  }, [pressed, moveRef, elementRect]);
+  }, [pressed, moveRef, elementRect, threshold]);
 
   // actually it makes sense to return an array only when
   // you expect that on the caller side all of the fields

src/hooks/useDragToResize.ts

@@ -12,7 +12,7 @@ export interface Rect extends Dimensions {
   left: number;
 }
 
-interface Position {
+export interface Position {
   x: number;
   y: number;
 }

src/hooks/useWindowMinMax.ts

@@ -49,7 +49,7 @@ function useWindowMinMax({
 
     window.style.transition = "all 0.2s linear";
     window.style.opacity = "0";
-    window.style.transform = "scale(0.5) translate(0, 500%)";
+    window.style.transform = "scale(0.2) translate(0, 500%)";
 
     window.addEventListener("transitionend", handleTransitionEnd);
   }

src/programs/Calculator/Calculator.scss

@@ -9,6 +9,7 @@
     "buttons";
   box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
   padding: 10px;
+  border-radius: 10px;
   box-sizing: border-box;
   gap: 10px;
 

src/programs/FileBrowser/FileBrowser.scss

@@ -10,6 +10,7 @@
     "side-bar bottom-bar";
 
   box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  border-radius: 10px;
 
   &__top-bar {
     grid-area: top-bar;

src/programs/Settings/Settings.scss

@@ -5,6 +5,7 @@
   width: 100%;
   height: 100%;
   box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  border-radius: 10px;
 
   &__page {
     overflow: auto;

src/programs/TextEditor/TextEditor.scss

@@ -12,6 +12,7 @@
     background-color: transparent;
     color: white;
     box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+    border-radius: 10px;
     padding: 10px;
     box-sizing: border-box;