From d28c348bc790863c35d39dabdbadf6da1a51f3b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=A1ez?= Date: Sun, 29 Sep 2024 21:10:32 -0300 Subject: [PATCH] fix: collisions between examples, projects and projects examples (#31) --- src/components/Config/ConfigDialog.tsx | 4 +- src/components/Editor/MonacoEditor.tsx | 87 +++------- .../ExamplesBrowser/ExampleEntry.tsx | 7 +- .../ExamplesBrowser/ExamplesBrowser.tsx | 15 +- src/components/FileTree/FileTree.tsx | 4 +- src/components/Playground/GameView.tsx | 7 +- src/components/Playground/Playground.tsx | 9 +- src/components/Toolbar/ExampleList.tsx | 24 ++- src/components/Toolbar/ProjectStatus.tsx | 26 ++- src/components/Toolbar/Projects.tsx | 22 +-- src/components/Toolbar/ToolbarToolsMenu.tsx | 4 +- src/data/examples.ts | 8 +- src/hooks/useEditor.ts | 162 +++++++----------- src/hooks/useProject.ts | 2 +- src/stores/project.ts | 137 +++++++-------- src/stores/storage/files.ts | 15 +- 16 files changed, 237 insertions(+), 296 deletions(-) diff --git a/src/components/Config/ConfigDialog.tsx b/src/components/Config/ConfigDialog.tsx index 20cab15..9bd2ec0 100644 --- a/src/components/Config/ConfigDialog.tsx +++ b/src/components/Config/ConfigDialog.tsx @@ -10,10 +10,10 @@ import ConfigInput from "./ConfigInput"; const ConfigDialog = () => { const { - getProjectMode, getKAPLAYConfig, updateKAPLAYConfig, syncKAPLAYFile, + getProject, } = useProject(); const { update, @@ -81,7 +81,7 @@ const ConfigDialog = () => {

KAPLAY Configuration

- {getProjectMode() === "project" + {getProject().mode === "pj" ? ( <> diff --git a/src/components/Editor/MonacoEditor.tsx b/src/components/Editor/MonacoEditor.tsx index 803a588..12f11e0 100644 --- a/src/components/Editor/MonacoEditor.tsx +++ b/src/components/Editor/MonacoEditor.tsx @@ -3,7 +3,6 @@ import type { editor } from "monaco-editor"; import { type FC } from "react"; import { useEditor } from "../../hooks/useEditor"; import { useProject } from "../../hooks/useProject"; -import { decompressCode } from "../../util/compressCode"; import { debug } from "../../util/logs"; import { configMonaco } from "./monacoConfig"; @@ -11,58 +10,46 @@ type Props = { onMount?: () => void; }; -const IMPORT_CODE_ALERT = - "Are you sure you want to open this example? This will permanently replace your current project. You can export your current project to save it."; - const MonacoEditor: FC = (props) => { - const { updateFile, replaceProject, addFile, getFile } = useProject(); - const { - setEditor, - run, - update, - currentFile, - setMonaco, - updateImageDecorations, - setGylphDecorations, - getCurrentFile, - } = useEditor(); + const { updateFile, getFile } = useProject(); + const { run, update, updateImageDecorations, getRuntime } = useEditor(); const handleEditorBeforeMount = (monaco: Monaco) => { configMonaco(monaco); - - const codeUrl = new URL(window.location.href).searchParams.get("code"); - if (!codeUrl) return; - - if (confirm(IMPORT_CODE_ALERT)) { - replaceProject({ - files: new Map(), - assets: new Map(), - kaplayConfig: {}, - version: "2.0.0", - mode: "example", - }); - - const code = decompressCode(codeUrl); - - addFile({ - name: "main.js", - value: code, - kind: "main", - language: "javascript", - path: "main.js", - }); - } }; const handleEditorMount = ( editor: editor.IStandaloneCodeEditor, monaco: Monaco, ) => { - setEditor(editor); - setMonaco(monaco); + getRuntime().editor = editor; + getRuntime().monaco = monaco; + const currentFile = getRuntime().currentFile; + props.onMount?.(); editor.setValue(getFile(currentFile)?.value ?? ""); + editor.onDidChangeModelContent((ev) => { + if (ev.isFlush) { + // set value + + updateImageDecorations(); + } else { + const currentProjectFile = getFile(getRuntime().currentFile); + if (!currentProjectFile) { + return debug(0, "Current file not found"); + } + + debug( + 0, + "Due to text editor change, updating file", + currentProjectFile.path, + ); + + updateFile(currentProjectFile.path, editor.getValue()); + } + }); + // Editor Shortcuts editor.addAction({ id: "run-game", @@ -88,32 +75,16 @@ const MonacoEditor: FC = (props) => { }); let decorations = editor.createDecorationsCollection([]); - setGylphDecorations(decorations); + getRuntime().gylphDecorations = decorations; run(); }; - const handleEditorChange = (value: string | undefined) => { - const currentProjectFile = getFile(getCurrentFile()); - if (!currentProjectFile) return debug(0, "Current file not found"); - - debug( - 0, - "Due to editor change, updating file", - currentProjectFile.path, - ); - - updateFile(currentProjectFile.path, value ?? ""); - updateImageDecorations(); - }; - return ( = (props) => { ); }; -MonacoEditor.displayName = "MonacoEditor"; - export default MonacoEditor; diff --git a/src/components/ExamplesBrowser/ExampleEntry.tsx b/src/components/ExamplesBrowser/ExampleEntry.tsx index 8a49cbd..c2c29e6 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 { loadExample } = useEditor(); + const { loadDefaultExample } = useProject(); + const { loadProject } = useEditor(); const handleClick = () => { const dialog = document.querySelector( @@ -27,8 +29,9 @@ export const ExampleEntry: FC = ({ example, isProject }) => { dialog?.close(); if (isProject) { + loadProject(example.name); } else { - loadExample(example.index); + loadDefaultExample(example.index); } }; diff --git a/src/components/ExamplesBrowser/ExamplesBrowser.tsx b/src/components/ExamplesBrowser/ExamplesBrowser.tsx index 3cfced3..969ba67 100644 --- a/src/components/ExamplesBrowser/ExamplesBrowser.tsx +++ b/src/components/ExamplesBrowser/ExamplesBrowser.tsx @@ -1,5 +1,5 @@ import * as Tabs from "@radix-ui/react-tabs"; -import { examples } from "../../data/examples"; +import { examples, type Tag } from "../../data/examples"; import { ExampleEntry } from "./ExampleEntry"; import "./ExamplesBrowser.css"; import { assets } from "@kaplayjs/crew"; @@ -37,7 +37,7 @@ export const ExamplesBrowser = () => { /> - + { ))} diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx index 5e8eeaa..72d25ed 100644 --- a/src/components/FileTree/FileTree.tsx +++ b/src/components/FileTree/FileTree.tsx @@ -4,14 +4,14 @@ import FileFolder from "./FileFolder"; const FileTree = () => { const { - getProjectMode, getFile, getFilesByFolder, + getProject, } = useProject(); return (
- {getProjectMode() === "project" && ( + {getProject().mode === "pj" && ( <> {getFilesByFolder("scenes").length === 0 diff --git a/src/components/Playground/GameView.tsx b/src/components/Playground/GameView.tsx index caffd67..a87b8d3 100644 --- a/src/components/Playground/GameView.tsx +++ b/src/components/Playground/GameView.tsx @@ -1,18 +1,13 @@ import { type FC } from "react"; -import { useEditor } from "../../hooks/useEditor"; type GameViewProps = { onLoad?: () => void; }; const GameView: FC = ({ onLoad }) => { - const { - setIframe, - } = useEditor(); - return (