diff --git a/src/components/Config/ConfigDialog.tsx b/src/components/Config/ConfigDialog.tsx index 38761ad..20cab15 100644 --- a/src/components/Config/ConfigDialog.tsx +++ b/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 )} diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx index 32dacd8..e19e779 100644 --- a/src/components/Playground/Playground.tsx +++ b/src/components/Playground/Playground.tsx @@ -19,7 +19,7 @@ const Playground = () => { const { project, getProjectMode, - resetProject, + createNewProject, } = useProject(); const [loadingProject, setLoadingProject] = useState(true); const [loadingEditor, setLoadingEditor] = useState(true); @@ -32,7 +32,7 @@ const Playground = () => { useEffect(() => { if (project.files.size > 0) setLoadingProject(false); else { - resetProject(); + createNewProject(); } }, [project]); diff --git a/src/components/Toolbar/Projects.tsx b/src/components/Toolbar/Projects.tsx index 8527972..cc83507 100644 --- a/src/components/Toolbar/Projects.tsx +++ b/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 = () => { diff --git a/src/stores/project.ts b/src/stores/project.ts index 84b5047..dc76741 100644 --- a/src/stores/project.ts +++ b/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,20 +61,24 @@ 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, @@ -81,6 +86,8 @@ export const createProjectSlice: StateCreator< 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}`); diff --git a/src/util/compiler.ts b/src/util/compiler.ts index e617b0d..a491d9e 100644 --- a/src/util/compiler.ts +++ b/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; }; diff --git a/src/util/logs.ts b/src/util/logs.ts index b00bdca..500433f 100644 --- a/src/util/logs.ts +++ b/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) {