diff --git a/kaplay b/kaplay index 3030298..4c11e92 160000 --- a/kaplay +++ b/kaplay @@ -1 +1 @@ -Subproject commit 3030298ccaa35d2edeff46e19eed4767f02ce61a +Subproject commit 4c11e9205faa0e9aea0bc52f4941f21d02e7e5d8 diff --git a/src/components/ExamplesBrowser/ExampleEntry.tsx b/src/components/ExamplesBrowser/ExampleEntry.tsx index 0811da7..d662d8c 100644 --- a/src/components/ExamplesBrowser/ExampleEntry.tsx +++ b/src/components/ExamplesBrowser/ExampleEntry.tsx @@ -2,6 +2,7 @@ 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 = { @@ -17,7 +18,8 @@ const imagesPerDifficulty: Record = { }; export const ExampleEntry: FC = ({ example, isProject }) => { - const { loadProject, loadDefaultExample } = useEditor(); + const { loadDefaultExample } = useEditor(); + const { loadProject } = useProject(); const handleClick = () => { const dialog = document.querySelector( diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx index f105300..4a3437e 100644 --- a/src/components/Playground/Playground.tsx +++ b/src/components/Playground/Playground.tsx @@ -36,8 +36,8 @@ const Playground = () => { getProject, createNewProject, loadProject, + loadDefaultExample, importProject, - projectIsSaved, } = useProject(); const [loadingProject, setLoadingProject] = useState(true); const [loadingEditor, setLoadingEditor] = useState(true); @@ -47,6 +47,56 @@ 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: "3001.0.1", + name: "Shared Example", + version: "2.0.0", + isDefault: true, + }); + + loadProject("shared"); + setLoadingProject(false); + + return; + }; + + const loadExample = (exampleName: string) => { + loadDefaultExample(exampleName); + setLoadingProject(false); + }; + + const loadNew = () => { + debug(0, "No project found, creating a new one..."); + createNewProject("pj"); + setLoadingProject(false); + }; + // First useEffect useEffect(() => { const defaultTheme = localStorage.getItem("theme") as string; @@ -61,86 +111,20 @@ const Playground = () => { }, []); useEffect(() => { - const lastOpenedProject = - useConfig.getState().getConfig().lastOpenedProject; const urlParams = new URLSearchParams(window.location.search); + const lastOpenedPj = useConfig.getState().getConfig().lastOpenedProject; 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.1", - name: "Shared Example", - version: "2.0.0", - isDefault: true, - }); - - loadProject("shared"); + const exampleName = urlParams.get("example"); + + if (sharedCode) { + loadShare(sharedCode); + } else if (exampleName) { + loadExample(exampleName); + } else if (lastOpenedPj) { + loadProject(lastOpenedPj); setLoadingProject(false); - - 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 { - if (lastOpenedProject || sharedCode) { - loadSide(); - } else { - debug(0, "No project found, creating a new one..."); - createNewProject("pj"); - setLoadingProject(false); - } + loadNew(); } }, []); diff --git a/src/components/Toolbar/ToolbarToolsMenu.tsx b/src/components/Toolbar/ToolbarToolsMenu.tsx index 6112324..1aeccca 100644 --- a/src/components/Toolbar/ToolbarToolsMenu.tsx +++ b/src/components/Toolbar/ToolbarToolsMenu.tsx @@ -23,6 +23,19 @@ const ToolbarToolsMenu: FC = () => { const { run } = useEditor(); const handleShare = () => { + const isDefault = getProject().isDefault; + + if (isDefault) { + const exampleParam = encodeURIComponent(getProject().id); + const url = `${window.location.origin}/?example=${exampleParam}`; + + navigator.clipboard.writeText(url).then(() => { + toast("Example shared, URL copied to clipboard!"); + }); + + return; + } + const mainFile = getMainFile(); const compressedCode = compressCode(mainFile?.value!); const codeParam = encodeURIComponent(compressedCode); diff --git a/src/stores/project.ts b/src/stores/project.ts index 2f5e44e..fedb7fa 100644 --- a/src/stores/project.ts +++ b/src/stores/project.ts @@ -89,6 +89,7 @@ export const createProjectSlice: StateCreator< const files = new Map(); const assets = new Map(); + let id = `u${filter}-Untitled`; // Load default setup if (filter === "pj") { @@ -96,7 +97,7 @@ export const createProjectSlice: StateCreator< debug(1, "New files for the new project", files, assets); } else if (exampleIndex) { const example = examplesList.filter(example => - example.index === exampleIndex + example.index === exampleIndex || example.name === exampleIndex )[0]; files.set("main.js", { @@ -106,6 +107,8 @@ export const createProjectSlice: StateCreator< path: "main.js", value: example.code, }); + + id = example.name; } else { get().loadDefaultSetup("ex", files, assets); debug(1, "New files for the new example project", files, assets); @@ -134,7 +137,7 @@ export const createProjectSlice: StateCreator< mode: filter, kaplayVersion: "3001.0.1", isDefault: exampleIndex ? true : false, - id: `u${filter}-Untitled`, + id: id, }, })); },