fix: some stuff related to project changing

src/components/Config/ConfigDialog.tsx

@@ -173,7 +173,7 @@ const ConfigDialog = () => {
                                     KAPLAY Configuration are disabled in
                                     examples mode. Try Projects (toolbox) {"->"}
                                     {" "}
-                                    Reset Project
+                                    Create Project
                                 </>
                             )}
                     </main>

src/components/Playground/Playground.tsx

@@ -19,7 +19,7 @@ const Playground = () => {
     const {
         project,
         getProjectMode,
-        resetProject,
+        createNewProject,
     } = useProject();
     const [loadingProject, setLoadingProject] = useState<boolean>(true);
     const [loadingEditor, setLoadingEditor] = useState<boolean>(true);
@@ -32,7 +32,7 @@ const Playground = () => {
     useEffect(() => {
         if (project.files.size > 0) setLoadingProject(false);
         else {
-            resetProject();
+            createNewProject();
         }
     }, [project]);
 

src/components/Toolbar/Projects.tsx

@@ -7,7 +7,7 @@ import { downloadBlob } from "../../util/download";
 import ToolbarButton from "./ToolbarButton";
 
 const Projects: FC = () => {
-    const { project, replaceProject, loadProject } = useProject();
+    const { project, replaceProject, createNewProject } = useProject();
     const { update, run, showNotification } = useEditor();
 
     const handleDownload = () => {
@@ -34,7 +34,7 @@ const Projects: FC = () => {
     };
 
     const handleProjectReset = () => {
-        loadProject("kaplay-unsaved-pj");
+        createNewProject();
         update();
         run();
     };
@@ -72,7 +72,7 @@ const Projects: FC = () => {
                     <button
                         onClick={handleProjectReset}
                     >
-                        Reset project
+                        Create new project
                     </button>
                 </li>
             </ul>

src/stores/project.ts

@@ -3,6 +3,7 @@ import type { StateCreator } from "zustand";
 import { defaultProject } from "../config/defaultProject";
 import { useEditor } from "../hooks/useEditor";
 import { useProject } from "../hooks/useProject";
+import { debug } from "../util/logs";
 import type { Asset, AssetsSlice } from "./storage/assets";
 import type { File, FilesSlice } from "./storage/files";
 
@@ -18,8 +19,8 @@ export type Project = {
 export interface ProjectSlice {
     /** The current project */
     project: Project;
-    /** Reset the project */
-    resetProject: () => void;
+    /** Creates a new project */
+    createNewProject: () => void;
     /** Replace the project with a new project */
     replaceProject: (project: Project) => void;
     /** Set the project mode */
@@ -60,27 +61,33 @@ export const createProjectSlice: StateCreator<
         kaplayConfig: {},
         mode: "project",
     },
-    resetProject: () => {
-        console.debug("Resetting project");
+    createNewProject: () => {
+        debug(0, "creating a new project");
 
         const files = new Map();
         const assets = new Map();
 
         // Load default setup
         get().loadDefaultSetup("project", files, assets);
+        debug(1, "New files for the new project", files, assets);
 
-        console.log("New files", files, assets);
+        useProject.persist.setOptions({
+            name: "Untitled Project",
+        });
+        useProject.persist.rehydrate();
 
         set(() => ({
             project: {
-                name: "Untitled Project",
+                name: "Project #" + get().getSavedProjects().length,
                 version: "2.0.0",
                 files: files,
                 assets: assets,
                 kaplayConfig: {},
                 mode: "project",
             },
         }));
+
+        useEditor.getState().update();
     },
     replaceProject: (project) => {
         const { run, update } = useEditor.getState();
@@ -121,6 +128,8 @@ export const createProjectSlice: StateCreator<
         });
 
         useProject.persist.rehydrate();
+
+        localStorage.removeItem(`Untitled Project`);
     },
     isProjectSaved: (name: string) => {
         return get().getSavedProjects().includes(`pj-${name}`);

src/util/compiler.ts

@@ -1,4 +1,5 @@
 import { useProject } from "../hooks/useProject";
+import { debug } from "./logs";
 
 // Wraps the game in an acceptable format for iFrame
 export const wrapGame = (code: string) => `
@@ -34,6 +35,8 @@ const transformAssetUrl = (regex: RegExp, code: string) => {
     const { project: { assets: resources } } = useProject.getState();
 
     return code.replace(regex, (match, asset: string) => {
+        debug(0, "asset matched", asset);
+
         // remove first / and last / from asset, also remove "assets" from asset
         const normalizeAsset = asset.replace(/^\/|\/$/g, "").replace(
             "assets/",
@@ -51,8 +54,12 @@ export const parseAssets = (code: string) => {
     const regexLoad = /load\w+\(\s*"[^"]*",\s*"([^"]*)"\s*\)/g;
     const regexComment = /\/\/\s*kaplay-transformation-asset\s*(.*)/g;
 
-    return transformAssetUrl(
+    const codeTransformed = transformAssetUrl(
         regexLoad,
         transformAssetUrl(regexComment, code),
     );
+
+    debug(1, "code with assets", codeTransformed);
+
+    return codeTransformed;
 };

src/util/logs.ts

@@ -2,7 +2,7 @@
 // 0: Normal log
 // 1: Internal and long log
 // 2: Ultra internal and long log
-export const debug = (level: number = 0, ...msg: string[]) => {
+export const debug = (level: number = 0, ...msg: any[]) => {
     if (level === 0) {
         console.debug(`%c${msg.join(" ")}`, "color: #ff00ff");
     } else if (level === 1) {