Add a themeable XP Paint application

README.md

@@ -7,22 +7,24 @@ An authentic recreation of Windows XP, created using **React** and **Typescript*
 - Functional Taskbar and Start Menu
 - Movable Desktop Icons
 - Movable & resizable windows
-- Login Screen
+- Login, Shutdown and boot up sequences
 - **Notepad**
-- Browsable **File Explorer** with back and forward functionality
+- **File Explorer**
 - **Internet Explorer** with Wayback Machine implementation for period accurate web browsing.
 - **Run** can open applications and Folders, either by internal appId, or title. URLs will also open in Internet Explorer.
 - **[Solitaire](https://github.com/Cyanoxide/react-solitaire)**
-- **Clippy**, the desktop assistant — drag him around, ask him questions, I can't guarentee he will be much help though.
-- Login, Shutdown and boot up sequences
+- **Paint**
+- **Clippy**
 
 ## Roadmap
 
 This is an ongoing project, with many more features I’d like to include in the future, here are some potential features I make look into:
 
 - MSN Messenger
-- MS Paint
 - Minesweeper
+- Doom?
+- Media Player
+- Picture Viewer
 
 ## Demo
 

frontend/src/components/Applications/FileExplorer/FileExplorer.tsx

@@ -14,7 +14,8 @@ const Applications = applicationsJSON as unknown as Record<string, Application>;
 const Files = filesJSON as unknown as Record<string, string[] | File[]>;
 
 const FileExplorer = ({ appId }: Record<string, string>) => {
-    const { currentWindows, recycledItems, dispatch } = useContext();
+    const { currentWindows, recycledItems, savedImages, dispatch } = useContext();
+    const recycledImages = savedImages.filter((image) => image.recycled);
     const [selectedItem, setSelectedItem] = useState<string | null>(null);
     const [isBackDisabled, setIsBackDisabled] = useState(true);
     const [isForwardDisabled, setIsForwardDisabled] = useState(true);
@@ -36,6 +37,12 @@ const FileExplorer = ({ appId }: Record<string, string>) => {
 
     const emptyRecycleBinHandler = () => {
         dispatch({ type: "SET_RECYCLED_ITEMS", payload: [] });
+        if (recycledImages.length) dispatch({ type: "SET_SAVED_IMAGES", payload: savedImages.map((image) => image.recycled ? { ...image, recycled: false } : image) });
+        playSound("recycle", true);
+    };
+
+    const restoreSavedImageHandler = (id: string) => {
+        dispatch({ type: "SET_SAVED_IMAGES", payload: savedImages.map((image) => image.id === id ? { ...image, recycled: false } : image) });
         playSound("recycle", true);
     };
 
@@ -194,7 +201,7 @@ const FileExplorer = ({ appId }: Record<string, string>) => {
                             <CollapseBox title="Recycle Bin Tasks">
                                 <ul className="flex flex-col gap-2 p-3">
                                     <li>
-                                        <button className="flex items-center" onClick={emptyRecycleBinHandler} disabled={!recycledItems.length}>
+                                        <button className="flex items-center" onClick={emptyRecycleBinHandler} disabled={!recycledItems.length && !recycledImages.length}>
                                             <img src="/icon__recycle_bin.png" className="mr-2" width="12" height="12" />
                                             <p>Empty the Recycle Bin</p>
                                         </button>
@@ -270,6 +277,15 @@ const FileExplorer = ({ appId }: Record<string, string>) => {
                                     </button>
                                 );
                             })}
+                            {appId === "recycleBin" && recycledImages.map((image) => {
+                                const isActive = (selectedItem === image.id);
+                                return (
+                                    <button key={image.id} data-id={image.id} data-selected={isActive} className={styles.file} title="Double-click to restore" onDoubleClick={() => restoreSavedImageHandler(image.id)} onClick={(e) => fileClickHandler(e, image.id)}>
+                                        <span className="flex items-center shrink-0"><img src={image.dataUrl} width="35" height="35" draggable={false} style={{ objectFit: "contain", border: "0.1rem solid #888", background: "#fff" }} /></span>
+                                        <h4 className="px-0.5">{image.name}</h4>
+                                    </button>
+                                );
+                            })}
                             {appId === "computer" && <h3 className="w-full">Hard Disk Drives</h3>}
 
                         </div>