feat: bug fixes, new creation buttons

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Format: Major.Minor.Patch (D/M/Y)
 
+## 2.0.1 (3/11/2024)
+
+- Renamed examples to demos
+
 ## 2.0.0 (31/10/2024) Spooky Edition
 
 - todo()

src/components/Config/ConfigDialog.tsx

@@ -1,3 +1,4 @@
+import { useConfig } from "../../hooks/useConfig";
 import { useProject } from "../../hooks/useProject";
 import { debug } from "../../util/logs";
 import { Dialog } from "../UI/Dialog";
@@ -18,24 +19,71 @@ const ConfigDialog = () => {
             "#version-selector",
         );
 
-        if (!versionEl) return;
+        const debugEl = document.querySelector<HTMLSelectElement>(
+            "#debug-selector",
+        );
+
+        if (versionEl) {
+            const version = versionEl.value;
+            setProject({ kaplayVersion: version });
+            debug(0, "KAPLAY.js version set to", version);
+        }
 
-        const version = versionEl.value;
-        debug(0, "Project KAPLAY version set to", version);
-        setProject({ kaplayVersion: version });
+        if (debugEl) {
+            const debugLevel = debugEl.value;
+            useConfig.getState().setConfig({
+                debugLevel: debugLevel === "none" ? null : parseInt(debugLevel),
+            });
+            debug(0, "Debug level set to", debugLevel);
+        }
     };
 
     return (
         <Dialog id="config" onSave={handleSave}>
             <ConfigProject />
             <div className="divider"></div>
-            <h2 className="text-2xl font-bold pb-4">Misc configuration</h2>
-            <button
-                className="btn btn-warning"
-                onClick={handleDeleteAllData}
-            >
-                Delete All Data
-            </button>
+            <h2 className="text-2xl font-bold pb-4">PG Configuration</h2>
+
+            <div className="flex flex-col flex-wrap gap-2">
+                <label className="form-control w-full max-w-xs">
+                    <div className="label">
+                        <span className="label-text">
+                            Debug level:
+                        </span>
+                    </div>
+                    <select
+                        id="debug-selector"
+                        className="select select-bordered"
+                    >
+                        <option>None</option>
+                        <option value="none">Level 1: Project logs</option>
+                        <option value="1">Level 2: Project+ logs</option>
+                        <option value="2">Level 3: Execution logs</option>
+                        <option value="3">
+                            Level 4: Advanced tracing logs
+                        </option>
+                    </select>
+                </label>
+                <label className="form-control w-full max-w-xs">
+                    <div className="label">
+                        <span className="label-text">
+                            Delete all data:
+                        </span>
+                    </div>
+                    <button
+                        className="btn btn-warning"
+                        onClick={handleDeleteAllData}
+                    >
+                        Delete All Data
+                    </button>
+                    <label className="label">
+                        <span className="label-text">
+                            This will delete all saved projects, assets, and
+                            configurations.
+                        </span>
+                    </label>
+                </label>
+            </div>
         </Dialog>
     );
 };

src/components/Config/ConfigProject.tsx

@@ -13,7 +13,7 @@ export const ConfigProject = () => {
     const [packageInfo, setPackageInfo] = useState<Packument | null>(
         null,
     );
-    const { project } = useProject();
+    const { project: project } = useProject();
 
     useEffect(() => {
         async function fetchPackageInfo() {

src/components/FileTree/FileEntry.tsx

@@ -43,7 +43,7 @@ const FileButton: FC<{
 };
 
 export const FileEntry: FC<Props> = ({ file }) => {
-    const { removeFile, project, setProject } = useProject();
+    const { removeFile, project: project, setProject } = useProject();
     const { getRuntime, setCurrentFile } = useEditor();
 
     const handleClick: MouseEventHandler = () => {

src/components/FileTree/FileFold.tsx

@@ -26,7 +26,7 @@ const paddingLevels = {
 
 export const FileFold: FC<Props> = (props) => {
     const [folded, setFolded] = useState(props.folded);
-    const { getFilesByFolder, project } = useProject();
+    const { getFilesByFolder, project: project } = useProject();
     const files = useMemo(() => getFilesByFolder(props.folder), [
         project.files.values(),
     ]);

src/components/Playground/Playground.tsx

@@ -3,14 +3,13 @@ import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { Slide, ToastContainer } from "react-toastify";
 import { Tooltip } from "react-tooltip";
-import { DEFAULT_KAPLAY_VERSION } from "../../config/common";
 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";
+import { ProjectBrowser } from "../ProjectBrowser";
 import ExampleList from "../Toolbar/ExampleList";
 import { LoadingPlayground } from "./LoadingPlayground";
 import { WorkspaceExample } from "./WorkspaceExample";
@@ -37,8 +36,8 @@ const Playground = () => {
         getProject,
         createNewProject,
         loadProject,
-        loadDefaultExample,
-        importProject,
+        createNewProjectFromDemo,
+        loadSharedDemo,
     } = useProject();
     const [loadingProject, setLoadingProject] = useState<boolean>(true);
     const [loadingEditor, setLoadingEditor] = useState<boolean>(true);
@@ -48,55 +47,31 @@ const Playground = () => {
         setLoadingEditor(false);
     };
 
-    const loadShare = (shareCode: string) => {
-        if (!shareCode) return;
-
-        debug(
-            0,
-            "Importing shared code...",
-            shareCode,
-            decompressCode(shareCode),
-        );
-
-        importProject({
-            assets: new Map(),
-            files: new Map([
-                [
-                    "main.js",
-                    {
-                        kind: "main",
-                        language: "javascript",
-                        name: "main.js",
-                        path: "main.js",
-                        value: decompressCode(shareCode),
-                    },
-                ],
-            ]),
-            mode: "ex",
-            id: "ex-shared",
-            kaplayConfig: {},
-            kaplayVersion: DEFAULT_KAPLAY_VERSION,
-            name: "Shared Example",
-            version: "2.0.0",
-            isDefault: false,
-        });
-
+    const loadShare = (sharedCode: string) => {
+        debug(0, "Importing shared code...", decompressCode(sharedCode));
+        loadSharedDemo(decompressCode(sharedCode));
         setLoadingProject(false);
-        return;
     };
 
-    const loadExample = (exampleName: string) => {
-        loadDefaultExample(exampleName);
+    const loadDemo = (demo: string) => {
+        debug(0, "Loading demo...", demo);
+        createNewProjectFromDemo(demo);
         setLoadingProject(false);
     };
 
-    const loadNew = () => {
+    const loadNewProject = () => {
         debug(0, "No project found, creating a new one...");
         createNewProject("pj");
         setLoadingProject(false);
     };
 
-    // First useEffect
+    const loadLastOpenedProject = (lastOpenedProjectId: string) => {
+        debug(0, "Loading last opened project...");
+        loadProject(lastOpenedProjectId);
+        setLoadingProject(false);
+    };
+
+    // First paint
     useEffect(() => {
         const defaultTheme = localStorage.getItem("theme") as string;
         const browserPrefersDark = window.matchMedia(
@@ -118,12 +93,11 @@ const Playground = () => {
         if (sharedCode) {
             loadShare(sharedCode);
         } else if (exampleName) {
-            loadExample(exampleName);
+            loadDemo(exampleName);
         } else if (lastOpenedPj) {
-            loadProject(lastOpenedPj);
-            setLoadingProject(false);
+            loadLastOpenedProject(lastOpenedPj);
         } else {
-            loadNew();
+            loadNewProject();
         }
     }, []);
 
@@ -144,11 +118,11 @@ const Playground = () => {
 
                 <p>
                     Projects are currently not supported in mobile! Please use a
-                    desktop device, anyway you can still view examples.
+                    desktop device, anyway you can still view demos.
                 </p>
 
                 <ExampleList />
-                <ExamplesBrowser />
+                <ProjectBrowser />
             </div>
         );
     }
@@ -175,7 +149,7 @@ const Playground = () => {
             <ConfigDialog />
             <ToastContainer position="bottom-right" transition={Slide} />
             <Tooltip id="global" />
-            <ExamplesBrowser />
+            <ProjectBrowser />
         </>
     );
 };

src/components/ExamplesBrowser/ExamplesBrowser.tsx → src/components/ProjectBrowser/ProjectBrowser.tsx

@@ -1,14 +1,15 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { examples, type Tag } from "../../data/examples";
-import { ExampleEntry } from "./ExampleEntry";
-import "./ExamplesBrowser.css";
+import { ExampleEntry } from "./ProjectEntry";
+import "./ProjectBrowser.css";
 import { assets } from "@kaplayjs/crew";
 import { useCallback, useState } from "react";
 import { useProject } from "../../hooks/useProject";
 import { TabsList } from "../UI/TabsList";
 import { TabTrigger } from "../UI/TabTrigger";
+import { ProjectCreate } from "./ProjectCreate";
 
-export const ExamplesBrowser = () => {
+export const ProjectBrowser = () => {
     const { getSavedProjects } = useProject();
     const [filter, setFilter] = useState("");
     const filteredExamples = useCallback(
@@ -30,10 +31,10 @@ export const ExamplesBrowser = () => {
 
     return (
         <dialog id="examples-browser" className="modal bg-[#00000070]">
-            <main className="modal-box | overflow-hidden max-w-screen-md p-4 flex flex-col gap-4 w-dvw h-dvh">
-                <header>
+            <div className="modal-box | overflow-hidden max-w-screen-md p-4 flex flex-col gap-4 w-dvw h-dvh">
+                <header className="space-y-4">
                     <h2 className="text-3xl font-semibold">
-                        Projects & Examples
+                        Projects Browser
                     </h2>
 
                     <input
@@ -47,11 +48,13 @@ export const ExamplesBrowser = () => {
                 <Tabs.Root className="overflow-auto" defaultValue="Projects">
                     <TabsList>
                         <TabTrigger
-                            label="Projects"
+                            label="My Projects & Examples"
+                            value="Projects"
                             icon={assets.api_book.outlined}
                         />
                         <TabTrigger
-                            label="Examples"
+                            label="KAPLAY Demos"
+                            value="Examples"
                             icon={assets.apple.outlined}
                         />
                     </TabsList>
@@ -79,11 +82,8 @@ export const ExamplesBrowser = () => {
                                 />
                             ))}
 
-                        {filteredProjects().length === 0 && (
-                            <p className="text-center text-base text-gray-500">
-                                No projects found
-                            </p>
-                        )}
+                        <ProjectCreate mode="pj" />
+                        <ProjectCreate mode="ex" />
                     </Tabs.Content>
                     <Tabs.Content
                         value="Examples"
@@ -92,15 +92,9 @@ 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>
+            </div>
 
             <form method="dialog" className="modal-backdrop">
                 <button>close</button>

src/components/ProjectBrowser/ProjectCreate.tsx

@@ -0,0 +1,50 @@
+import { assets } from "@kaplayjs/crew";
+import type { FC } from "react";
+import { useProject } from "../../hooks/useProject";
+import type { ProjectMode } from "../../stores/project";
+import { View } from "../UI/View";
+
+type Props = {
+    mode: ProjectMode;
+};
+
+export const ProjectCreate: FC<Props> = ({ mode }) => {
+    const { createNewProject } = useProject();
+
+    const handleClick = () => {
+        const dialog = document.querySelector<HTMLDialogElement>(
+            "#examples-browser",
+        );
+
+        dialog?.close();
+
+        if (mode === "pj") {
+            createNewProject("pj");
+        } else {
+            createNewProject("ex");
+        }
+    };
+
+    return (
+        <View
+            el="article"
+            justify="center"
+            gap={2}
+            rounded="lg"
+            cursor="pointer"
+            className="border-4 border-dashed border-base-200 cursor-pointer min-h-20 items-center"
+            onClick={handleClick}
+        >
+            <div className="flex flex-col items-center gap-2">
+                <img
+                    src={assets.plus.outlined}
+                    alt="Create Project"
+                    className="h-6"
+                />
+                <p className="text-lg">
+                    Create {mode === "pj" ? "Project" : "Example"}
+                </p>
+            </div>
+        </View>
+    );
+};