feat: delete all button, fix example not running at start (#32)

kaplayjs · Sep 30, 2024 · 7232217 · 7232217
1 parent 2de044d
commit 7232217
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 26 deletions.
diff --git a/src/components/Config/ConfigDialog.tsx b/src/components/Config/ConfigDialog.tsx
@@ -7,6 +7,7 @@ import { stringToType, type Type } from "../../util/stringToType";
 import ConfigCheckbox from "./ConfigCheckbox";
 import ConfigGroup from "./ConfigGroup";
 import ConfigInput from "./ConfigInput";
+import { EditorConfig } from "./Sections/EditorConfig";
 
 const ConfigDialog = () => {
     const {
@@ -177,7 +178,12 @@ const ConfigDialog = () => {
                                 </>
                             )}
                     </main>
+
+                    <div className="divider"></div>
+
+                    <EditorConfig />
                 </section>
+
                 <footer className="p-4 bg-base-200">
                     <div className="modal-action">
                         <form method="dialog">

diff --git a/src/components/Config/Sections/EditorConfig.tsx b/src/components/Config/Sections/EditorConfig.tsx
@@ -0,0 +1,24 @@
+export const EditorConfig = () => {
+    const handleDeleteAllData = () => {
+        if (confirm("Are you sure you want to delete all data?")) {
+            localStorage.clear();
+            location.reload();
+        }
+    };
+
+    return (
+        <section>
+            <header className="flex items-center font-bold">
+                <h2 className="text-xl">Editor Configuration</h2>
+            </header>
+            <main>
+                <button
+                    className="btn btn-warning"
+                    onClick={handleDeleteAllData}
+                >
+                    Delete All Data
+                </button>
+            </main>
+        </section>
+    );
+};
diff --git a/src/components/ExamplesBrowser/ExampleEntry.tsx b/src/components/ExamplesBrowser/ExampleEntry.tsx
@@ -2,7 +2,6 @@ import { assets } from "@kaplayjs/crew";
 import type { FC } from "react";
 import type { Example } from "../../data/examples";
 import { useEditor } from "../../hooks/useEditor";
-import { useProject } from "../../hooks/useProject";
 import { cn } from "../../util/cn";
 
 type Props = {
@@ -18,8 +17,7 @@ const imagesPerDifficulty: Record<string, string> = {
 };
 
 export const ExampleEntry: FC<Props> = ({ example, isProject }) => {
-    const { loadDefaultExample } = useProject();
-    const { loadProject } = useEditor();
+    const { loadProject, loadDefaultExample } = useEditor();
 
     const handleClick = () => {
         const dialog = document.querySelector<HTMLDialogElement>(

diff --git a/src/components/Playground/LoadingPlayground.tsx b/src/components/Playground/LoadingPlayground.tsx
@@ -9,14 +9,17 @@ const LoadingPlayground: FC<Props> = ({ isLoading }) => {
     return (
         <div
             className={cn(
-                "h-full flex items-center justify-center",
+                "h-full flex flex-col items-center justify-center",
                 {
                     "hidden": !isLoading,
                 },
             )}
         >
             <span className="loading loading-dots loading-lg text-primary">
             </span>
+            <span className="text-lg">
+                Launching Playground...
+            </span>
         </div>
     );
 };

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, loadDefaultExample } = useProject();
-    const { loadProject } = useEditor();
+    const { getSavedProjects } = useProject();
+    const { loadProject, loadDefaultExample } = useEditor();
 
     const handleExampleChange = (ev: ChangeEvent<HTMLSelectElement>) => {
         const exampleIndex = ev.target.selectedOptions[0].getAttribute(

diff --git a/src/hooks/useEditor.ts b/src/hooks/useEditor.ts
@@ -3,8 +3,6 @@ import type { editor } from "monaco-editor";
 import { createRef, type MutableRefObject } from "react";
 import { toast } from "react-toastify";
 import { create } from "zustand";
-import examplesList from "../data/exampleList.json";
-import { examples } from "../data/examples";
 import { wrapGame } from "../util/compiler";
 import { debug } from "../util/logs";
 import { useProject } from "./useProject";
@@ -183,24 +181,7 @@ export const useEditor = create<EditorStore>((_set, get) => ({
         editor.setValue(value);
     },
     loadDefaultExample(exampleIndex) {
-        const exampleId =
-            examplesList.filter(example => example.index === exampleIndex)[0]
-                .name;
-        const exampleName =
-            examples.filter(example => example.name === exampleId)[0]
-                .formatedName;
-
-        useProject.persist.setOptions({
-            name: exampleName,
-        });
-
-        useProject.getState().createNewProject("ex");
-        useProject.getState().updateFile(
-            "main.js",
-            examplesList[Number(exampleIndex)].code,
-        );
-
-        get().runtime.editor?.setScrollTop(0);
+        useProject.getState().loadDefaultExample(exampleIndex);
         get().update();
         get().run();
     },