chore: stuff

kaplayjs · Oct 31, 2024 · 3a5b8bf · 3a5b8bf
1 parent 5c73d56
commit 3a5b8bf
Show file tree

Hide file tree

Showing 13 changed files with 314 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",
     "dprint": "^0.45.1",
-    "kaplay": "3001.0.0-alpha.22",
+    "kaplay": "3001.0.0-beta.8",
     "monaco-editor": "^0.48.0",
     "postcss": "^8.4.47",
     "vite": "^5.4.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Config/ConfigProject.tsx b/src/components/Config/ConfigProject.tsx
@@ -1,5 +1,6 @@
 import { type Packument } from "query-registry";
 import { useEffect, useState } from "react";
+import { useProject } from "../../hooks/useProject";
 
 async function getPackageInfo(name: string): Promise<Packument> {
     const endpoint = `https://registry.npmjs.org/${name}`;
@@ -12,6 +13,7 @@ export const ConfigProject = () => {
     const [packageInfo, setPackageInfo] = useState<Packument | null>(
         null,
     );
+    const { project } = useProject();
 
     useEffect(() => {
         async function fetchPackageInfo() {
@@ -45,6 +47,11 @@ export const ConfigProject = () => {
                             </option>
                         ))}
                 </select>
+                <div className="label">
+                    <span className="label-text">
+                        Current version: {project.kaplayVersion}
+                    </span>
+                </div>
             </label>
         </>
     );

diff --git a/src/components/ExamplesBrowser/ExamplesBrowser.tsx b/src/components/ExamplesBrowser/ExamplesBrowser.tsx
@@ -20,6 +20,13 @@ export const ExamplesBrowser = () => {
             ),
         [filter],
     );
+    const filteredProjects = useCallback(
+        () =>
+            getSavedProjects().filter((project) =>
+                project.toLowerCase().includes(filter.toLowerCase())
+            ),
+        [filter],
+    );
 
     return (
         <dialog id="examples-browser" className="modal bg-[#00000070]">
@@ -53,23 +60,30 @@ export const ExamplesBrowser = () => {
                         value="Projects"
                         className="examples-list | gap-2 py-2 overflow-auto"
                     >
-                        {getSavedProjects().map((project) => (
-                            <ExampleEntry
-                                example={{
-                                    description: null,
-                                    formatedName: project.slice(3),
-                                    name: project,
-                                    index: "0",
-                                    tags: [
-                                        ...project.startsWith("pj-")
-                                            ? ["project"] as Tag[]
-                                            : ["example"] as Tag[],
-                                    ],
-                                }}
-                                isProject
-                                key={project}
-                            />
-                        ))}
+                        {filteredProjects().length > 0
+                            && filteredProjects().map((project) => (
+                                <ExampleEntry
+                                    example={{
+                                        description: null,
+                                        formatedName: project.slice(3),
+                                        name: project,
+                                        index: "0",
+                                        tags: [
+                                            ...project.startsWith("pj-")
+                                                ? ["project"] as Tag[]
+                                                : ["example"] as Tag[],
+                                        ],
+                                    }}
+                                    isProject
+                                    key={project}
+                                />
+                            ))}
+
+                        {filteredProjects().length === 0 && (
+                            <p className="text-center text-base text-gray-500">
+                                No projects found
+                            </p>
+                        )}
                     </Tabs.Content>
                     <Tabs.Content
                         value="Examples"
@@ -78,6 +92,12 @@ export const ExamplesBrowser = () => {
                         {filteredExamples().map((example, index) => (
                             <ExampleEntry example={example} key={index} />
                         ))}
+
+                        {filteredExamples().length === 0 && (
+                            <p className="text-center text-base text-gray-500">
+                                No examples found
+                            </p>
+                        )}
                     </Tabs.Content>
                 </Tabs.Root>
             </main>

diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx
@@ -3,7 +3,10 @@ import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { Slide, ToastContainer } from "react-toastify";
 import { Tooltip } from "react-tooltip";
+import { useConfig } from "../../hooks/useConfig";
 import { useProject } from "../../hooks/useProject";
+import { decompressCode } from "../../util/compressCode";
+import { debug } from "../../util/logs";
 import { AboutDialog } from "../About";
 import ConfigDialog from "../Config/ConfigDialog";
 import { ExamplesBrowser } from "../ExamplesBrowser";
@@ -32,6 +35,9 @@ const Playground = () => {
         project,
         getProject,
         createNewProject,
+        loadProject,
+        importProject,
+        projectIsSaved,
     } = useProject();
     const [loadingProject, setLoadingProject] = useState<boolean>(true);
     const [loadingEditor, setLoadingEditor] = useState<boolean>(true);
@@ -55,16 +61,88 @@ const Playground = () => {
     }, []);
 
     useEffect(() => {
-        if (project.files.size > 0) {
+        const lastOpenedProject =
+            useConfig.getState().getConfig().lastOpenedProject;
+        const urlParams = new URLSearchParams(window.location.search);
+        const sharedCode = urlParams.get("code");
+
+        const loadShare = () => {
+            if (!sharedCode) return;
+            debug(
+                0,
+                "Importing shared code...",
+                sharedCode,
+                decompressCode(sharedCode),
+            );
+
+            importProject({
+                assets: new Map(),
+                files: new Map([
+                    [
+                        "main.js",
+                        {
+                            kind: "main",
+                            language: "javascript",
+                            name: "main.js",
+                            path: "main.js",
+                            value: decompressCode(sharedCode),
+                        },
+                    ],
+                ]),
+                mode: "ex",
+                id: "ex-shared",
+                kaplayConfig: {},
+                kaplayVersion: "3001.0.0-beta.8",
+                name: "Shared Example",
+                version: "2.0.0",
+                isDefault: true,
+            });
+
+            loadProject("shared");
             setLoadingProject(false);
-            const urlParams = new URLSearchParams(window.location.search);
-            const sharedCode = urlParams.get("code");
+
+            return;
+        };
+
+        const loadSide = () => {
+            if (projectIsSaved("shared", "ex")) {
+                if (!sharedCode) return;
+
+                const response = window.confirm(
+                    "Do you want to load the shared example? This will overwrite the current shared project.",
+                );
+
+                if (response) {
+                    loadShare();
+                    return;
+                }
+            }
+
             if (sharedCode) {
+                loadShare();
+                return;
+            }
+
+            if (lastOpenedProject) {
+                debug(0, "Loading last opened project...");
+                loadProject(lastOpenedProject);
+                setLoadingProject(false);
+                return;
             }
+        };
+
+        if (project.files.size > 0) {
+            loadSide();
         } else {
-            createNewProject("pj");
+            if (lastOpenedProject || sharedCode) {
+                loadSide();
+            } else {
+                debug(0, "No project found, creating a new one...");
+                createNewProject("pj");
+                setLoadingProject(false);
+            }
         }
-    }, [project]);
+    }, []);
 
     if (loadingProject) {
         return (

diff --git a/src/components/Toolbar/ExampleList.tsx b/src/components/Toolbar/ExampleList.tsx
@@ -4,8 +4,8 @@ import { useEditor } from "../../hooks/useEditor";
 import { useProject } from "../../hooks/useProject";
 
 const ExampleList: FC = () => {
-    const { getSavedProjects } = useProject();
-    const { loadProject, loadDefaultExample } = useEditor();
+    const { getSavedProjects, loadProject } = useProject();
+    const { loadDefaultExample } = useEditor();
 
     const handleExampleChange = (ev: ChangeEvent<HTMLSelectElement>) => {
         const exampleIndex = ev.target.selectedOptions[0].getAttribute(

diff --git a/src/components/Toolbar/ProjectStatus.tsx b/src/components/Toolbar/ProjectStatus.tsx
@@ -1,21 +1,28 @@
 import { assets } from "@kaplayjs/crew";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
 import { useProject } from "../../hooks/useProject";
 
 const ProjectStatus = () => {
-    const { saveProject, getProject, setProject, projectIsSaved } =
-        useProject();
+    const { saveProject, getProject, projectIsSaved } = useProject();
+    const [name, setName] = useState(getProject().name);
 
     const handleSaveProject = () => {
-        saveProject(getProject().name);
+        saveProject(name, getProject().id);
     };
 
     const handleEditName = () => {
         const projectName = prompt("New project name?");
         if (!projectName) return;
 
-        setProject({ name: projectName });
+        setName(projectName);
+        toast("Project name updated, remember save now!");
     };
 
+    useEffect(() => {
+        setName(getProject().name);
+    }, [getProject().name]);
+
     if (getProject().isDefault) return;
 
     return (
@@ -25,10 +32,8 @@ const ProjectStatus = () => {
             </div>
 
             <div>
-                {getProject().name}
-                {!projectIsSaved(getProject().name, getProject().mode) && (
-                    <span>*</span>
-                )}
+                {name}
+                {!projectIsSaved(name, getProject().mode) && <span>*</span>}
             </div>
 
             <button