(v0.1.6.4-alpha) Loading Screen + Sound

A loading screen on lockscreen after correct pass + SOUND. This is a very small YET tedious stuff that I had to get out of the way lmao.

Author: rupnil-codes

README.md

@@ -6,7 +6,8 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [ ] HINT after failed try.
 - [ ] Add more stuff to Lockscreen.
 - [X] Animations in the Lockscreen.
-- [ ] A loading screen on lockscreen after correct pass slowly fade while loading desktop in the back + SOUND.
+- [X] A loading screen on lockscreen after correct pass + SOUND. (Done v0.1.6.4)
+- [ ] loading screen slowly fade while loading desktop in the back.
 - [X] Fullscreen after login (Done v0.1.6.3)
 - [X] Windows Design + Desktop Design (Done in v0.1.3... & v0.1.4... respectively)
 - [X] Windows start menu does nothing rn. (Done in v0.1.4.4)
@@ -38,7 +39,7 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [X] BUG: Notepad selection stops when it goes outside the rnd window. (Fixed in v0.1.5.5(1))
 - [X] Window App's title bar and tab bar colors need adjusting. (Its fine lol)
 - [ ] Notepad Generalised component
-- [ ] CHANGE CHROME TO BRAVE
+- [ ] ~~CHANGE CHROME TO BRAVE~~ (I aint doing this)
 - [X] VSCode App (Added v0.1.6.2)
 - [X] Terminal (v0.1.6.0 ... v0.1.6.1)
 - [X] Terminal (Proper) Selection, Proper fonts, Polish (Done v0.1.6.1)

package-lock.json

@@ -18,7 +18,8 @@
     "react-draggable": "^4.5.0",
     "react-rnd": "^10.5.2",
     "react-router": "^7.13.0",
-    "react-router-dom": "^7.13.0"
+    "react-router-dom": "^7.13.0",
+    "react-spinners": "^0.17.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package.json

@@ -7,6 +7,8 @@ function Chrome() {
             <iframe
                 className={"chrome-iframe"}
                 src={"https://5.39.47.103/#/cast/browser"}
+                allow="camera; microphone; display-capture; clipboard-read; clipboard-write; self"
+                sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-downloads"
             />
         </>
     )

public/sounds/startup.mp3

@@ -10,8 +10,14 @@ import Draggable from 'react-draggable';
 import { motion, AnimatePresence } from "framer-motion";
 
 import SystemTray from "../components/SystemTray.jsx";
+import LockScreen from "./lockscreen.jsx";
+
 
 function Desktop() {
+    const startupSound = new Audio("/sounds/startup.mp3");
+    startupSound.volume = Math.min(1.5, 1.0);
+    startupSound.play().catch(e => console.log("Audio play blocked", e));
+
     const [isStartMenuActive, setIsStartMenuActive] = useState(false);
 
     const startMenuRef = useRef(null);

src/apps/chrome.jsx

@@ -4,9 +4,13 @@ import '../styles/routes/lockscreen.css';
 import { Wifi, BatteryCharging } from 'lucide-react';
 import {useNavigate} from "react-router";
 import * as React from "react";
-
 import { useDateTime } from "../components/DateTime.jsx";
 
+import { GridLoader } from "react-spinners";
+
+
+console.log("Password is: DuckyCelestron76700");
+
 function LockScreen() {
     const [showPin, setShowPin] = useState(false);
 
@@ -30,18 +34,21 @@ function LockScreen() {
     const [password, setPassword] = useState("");
     const navigate = useNavigate();
 
+    const [isLoading, setIsLoading] = useState(false);
+
     const handleSubmit = (e) => {
         if (e.key === "Enter") {
             if (password === "DuckyCelestron76700" || password === "42069") {
-
                 const elem = document.documentElement;
-                if (elem.requestFullscreen) {
-                    elem.requestFullscreen().catch(err => {
+                elem.requestFullscreen().catch(err => {
                         console.error(`Error attempting to enable fullscreen: ${err.message}`);
-                    });
-                }
+                });
+
+                setIsLoading(true);
 
-                navigate("/desktop");
+                setTimeout(() => {
+                    navigate("/desktop");
+                }, 3000);
             }
         }
     }
@@ -71,25 +78,38 @@ function LockScreen() {
                         <div className={"pfp"}/>
                         <p className={"username"}>Rupnil's PC</p>
                         {/*<p className={"enter-pass"}>Enter your password</p>*/}
-                        <input
-                            type={"text"}
-                            className={"input"}
-                            id={"password"}
-                            placeholder={"Password"}
-                            onChange={(e) => setPassword(e.target.value)}
-                            onKeyDown={handleSubmit}
-                            autoFocus={true}
-                        />
-                        <p className={"hint"}>
-                            HINT: I love making <a
-                            className={"devlog"}
-                            href={"https://flavortown.hackclub.com/projects/13380"}
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            Devlogs!
-                        </a>
-                        </p>
-                        {/*<p className={"hint"}>HINT: Check the oldest <a className={"devlog"} href={"https://flavortown.hackclub.com/projects/13380"}>Devlogs!</a></p>*/}
+
+                        {!isLoading ? (
+                            <>
+                                <input
+                                    type={"text"}
+                                    className={"input"}
+                                    id={"password"}
+                                    placeholder={"Password"}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    onKeyDown={handleSubmit}
+                                    autoFocus={true}
+                                />
+                                <p className={"hint"}>
+                                    Ps: Check the first <a
+                                    className={"devlog"}
+                                    href={"https://flavortown.hackclub.com/projects/13380"}
+                                    target="_blank"
+                                    rel="noopener noreferrer">
+                                    Devlogs
+                                </a> or Console!
+                                </p>
+                            </>
+                        ) : (
+                            <div className="loading-container">
+                                <GridLoader
+                                    color="#ffffff"
+                                    size={8}
+                                    margin={4}
+                                    speedMultiplier={1}
+                                />
+                            </div>
+                        )}
                     </div>
                     <div className={"system"}>
                         <div className={"profile"}>

src/routes/desktop.jsx

@@ -199,4 +199,4 @@
 
 .hidden {
     display: none;
-}
+}