feat: util and objects folder

kaplayjs · Nov 2, 2024 · dba32b3 · dba32b3
1 parent 7f1f775
commit dba32b3
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 26 deletions.
diff --git a/src/components/FileTree/FileEntry.css b/src/components/FileTree/FileEntry.css
@@ -1,3 +1,13 @@
+
+/* Show file actions on hoveronly if kind is not scene nor assets nor kaplay */
 .file[data-file-kind="scene"]:hover .file-actions {
   display: block;
+}
+
+.file[data-file-kind="util"]:hover .file-actions {
+  display: block;
+}
+
+.file[data-file-kind="obj"]:hover .file-actions {
+  display: block;
 }
diff --git a/src/components/FileTree/FileEntry.tsx b/src/components/FileTree/FileEntry.tsx
@@ -1,7 +1,7 @@
 import { assets } from "@kaplayjs/crew";
 import type { FC, MouseEventHandler } from "react";
 import { useProject } from "../../hooks/useProject";
-import type { File } from "../../stores/storage/files";
+import type { File, FileKind } from "../../stores/storage/files";
 import { cn } from "../../util/cn";
 import { removeExtension } from "../../util/removeExtensions";
 import "./FileEntry.css";
@@ -11,11 +11,13 @@ type Props = {
     file: File;
 };
 
-const logoByKind = {
+const logoByKind: Record<FileKind, string> = {
     kaplay: assets.dino.outlined,
     scene: assets.art.outlined,
     main: assets.play.outlined,
     assets: assets.assetbrew.outlined,
+    obj: assets.burpman.outlined,
+    util: assets.toolbox.outlined,
 };
 
 const FileButton: FC<{

diff --git a/src/components/FileTree/FileFold.tsx b/src/components/FileTree/FileFold.tsx
@@ -15,6 +15,7 @@ type Props = PropsWithChildren<{
     kind?: FileKind;
     /** Folder */
     folder: FileFolder;
+    folded?: boolean;
 }>;
 
 const paddingLevels = {
@@ -24,7 +25,7 @@ const paddingLevels = {
 };
 
 export const FileFold: FC<Props> = (props) => {
-    const [folded, setFolded] = useState(false);
+    const [folded, setFolded] = useState(props.folded);
     const { getFilesByFolder, project } = useProject();
     const files = useMemo(() => getFilesByFolder(props.folder), [
         project.files.values(),

diff --git a/src/components/FileTree/FileToolbar.tsx b/src/components/FileTree/FileToolbar.tsx
@@ -7,6 +7,15 @@ type Props = PropsWithChildren<{
     kind: FileKind;
 }>;
 
+const templateByKind = (fileName: string): Record<FileKind, string> => ({
+    assets: `// User can't create this`,
+    kaplay: `// User can't create this`,
+    main: `// User can't create this`,
+    scene: `scene("${fileName}", () => {\n\n});\n`,
+    obj: `function add${fileName}() {\n\n}\n`,
+    util: `function ${fileName}() {\n\n}\n`,
+});
+
 export const FileToolbar: FC<Props> = (props) => {
     const { addFile, getFile } = useProject();
 
@@ -17,8 +26,8 @@ export const FileToolbar: FC<Props> = (props) => {
 
         addFile({
             name: fileName + ".js",
-            kind: "scene",
-            value: `scene("${fileName}", () => {\n\n});`,
+            kind: props.kind,
+            value: templateByKind(fileName)[props.kind],
             language: "javascript",
             path: `${folderByKind[props.kind]}/${fileName}.js`,
         });

diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx
@@ -12,6 +12,22 @@ export const FileTree = () => {
                     kind="scene"
                     toolbar
                 />
+                <FileFold
+                    level={1}
+                    title="Game Objs"
+                    folder="objects"
+                    kind="obj"
+                    toolbar
+                    folded
+                />
+                <FileFold
+                    level={1}
+                    title="Utils"
+                    folder="utils"
+                    kind="util"
+                    toolbar
+                    folded
+                />
                 <FileFold
                     folder="root"
                     level={0}

diff --git a/src/hooks/useEditor.ts b/src/hooks/useEditor.ts
@@ -99,27 +99,34 @@ export const useEditor = create<EditorStore>((set, get) => ({
         } = useProject.getState();
         if (!iframe) return;
 
-        let KAPLAYFile = "";
-        let mainFile = "";
-        let assetsFile = "";
-        let sceneFiles = "";
+        let mainFile = getMainFile()?.value ?? "";
         let parsedFiles = "";
 
-        KAPLAYFile = getKAPLAYFile()?.value ?? "";
-        mainFile = getMainFile()?.value ?? "";
-        assetsFile = getAssetsFile()?.value ?? "";
-
-        getProject().files.forEach((file) => {
-            if (file.kind !== "scene") return;
-
-            sceneFiles += `\n${file.value}\n`;
-        });
-
-        if (getProject().mode === "pj") {
-            parsedFiles =
-                `${KAPLAYFile}\n\n ${assetsFile}\n\n ${sceneFiles}\n\n ${mainFile}`;
-        } else {
+        if (getProject().mode === "ex") {
             parsedFiles = mainFile;
+        } else {
+            let sceneFiles = "";
+            let objectFiles = "";
+            let utilFiles = "";
+            let KAPLAYFile = getKAPLAYFile()?.value ?? "";
+            let assetsFile = getAssetsFile()?.value ?? "";
+
+            getProject().files.forEach((file) => {
+                if (file.kind == "scene") {
+                    sceneFiles += `\n${file.value}\n`;
+                } else if (file.kind == "obj") {
+                    objectFiles += `\n${file.value}\n`;
+                } else if (file.kind == "util") {
+                    utilFiles += `\n${file.value}\n`;
+                }
+            });
+
+            parsedFiles = `${KAPLAYFile}\n\n 
+            ${assetsFile}\n\n 
+            ${utilFiles}\n\n
+            ${objectFiles}\n\n
+            ${sceneFiles}\n\n 
+            ${mainFile}`;
         }
 
         iframe.srcdoc = wrapGame(parsedFiles);

diff --git a/src/stores/storage/files.ts b/src/stores/storage/files.ts
@@ -3,8 +3,8 @@ import { debug } from "../../util/logs";
 import type { KAPLAYConfigSlice } from "../kaplayConfig";
 import type { ProjectSlice } from "../project";
 
-export type FileKind = "kaplay" | "main" | "scene" | "assets";
-export type FileFolder = "scenes" | "assets" | "root";
+export type FileKind = "kaplay" | "main" | "scene" | "assets" | "util" | "obj";
+export type FileFolder = "root" | "scenes" | "assets" | "utils" | "objects";
 
 export type File = {
     name: string;
@@ -19,6 +19,8 @@ export const folderByKind: Record<FileKind, FileFolder> = {
     main: "root",
     scene: "scenes",
     assets: "assets",
+    util: "utils",
+    obj: "objects",
 };
 
 export interface FilesSlice {
@@ -127,7 +129,9 @@ export const createFilesSlice: StateCreator<
     getFilesByFolder(folder) {
         if (folder === "root") {
             return Array.from(get().project.files.values()).filter(
-                (file) => !file.path.startsWith("scenes"),
+                (file) =>
+                    file.kind === "kaplay" || file.kind === "main"
+                    || file.kind === "assets",
             );
         }