chore: config version

package.json

@@ -15,6 +15,7 @@
     "dev:bin": "node scripts/cli.js --examples=fakeExamples"
   },
   "dependencies": {
+    "@fontsource-variable/rubik": "^5.1.0",
     "@formkit/drag-and-drop": "^0.0.38",
     "@kaplayjs/crew": "^1.6.1",
     "@monaco-editor/react": "^4.6.0",

src/App.tsx

@@ -4,6 +4,7 @@ import "allotment/dist/style.css";
 import "./styles/index.css";
 import "./styles/toast.css";
 import "./util/hotkeys.js";
+import "@fontsource-variable/rubik";
 
 export const App = () => {
     return <Playground />;

src/components/Config/ConfigDialog.tsx

@@ -1,32 +1,42 @@
-import { Tooltip } from "react-tooltip";
-import { EditorConfig } from "./Sections/EditorConfig";
+import { useProject } from "../../hooks/useProject";
+import { debug } from "../../util/logs";
+import { Dialog } from "../UI/Dialog";
+import { ConfigProject } from "./ConfigProject";
 
 const ConfigDialog = () => {
-    return (
-        <dialog id="config" className="modal">
-            <main className="modal-box overflow-hidden px-0 py-0">
-                <Tooltip id="config-dialog" />
-                <section className="max-h-[400px] overflow-y-auto p-4">
-                    <EditorConfig />
-                </section>
+    const { setProject } = useProject();
+
+    const handleDeleteAllData = () => {
+        if (confirm("Are you sure you want to delete all data?")) {
+            localStorage.clear();
+            location.reload();
+        }
+    };
+
+    const handleSave = () => {
+        const versionEl = document.querySelector<HTMLSelectElement>(
+            "#version-selector",
+        );
 
-                <footer className="p-4 bg-base-200">
-                    <div className="modal-action">
-                        <form method="dialog">
-                            <button className="btn btn-primary">
-                                Save Changes
-                            </button>
-                        </form>
-                    </div>
-                </footer>
-            </main>
-            <form
-                method="dialog"
-                className="modal-backdrop"
+        if (!versionEl) return;
+
+        const version = versionEl.value;
+        debug(0, "Project KAPLAY version set to", version);
+        setProject({ kaplayVersion: version });
+    };
+
+    return (
+        <Dialog id="config" onSave={handleSave}>
+            <ConfigProject />
+            <div className="divider"></div>
+            <h2 className="text-2xl font-bold pb-4">Misc configuration</h2>
+            <button
+                className="btn btn-warning"
+                onClick={handleDeleteAllData}
             >
-                <button>Close</button>
-            </form>
-        </dialog>
+                Delete All Data
+            </button>
+        </Dialog>
     );
 };
 

src/components/Config/ConfigProject.tsx

@@ -0,0 +1,51 @@
+import { type Packument } from "query-registry";
+import { useEffect, useState } from "react";
+
+async function getPackageInfo(name: string): Promise<Packument> {
+    const endpoint = `https://registry.npmjs.org/${name}`;
+    const res = await fetch(endpoint);
+    const data = await res.json();
+    return data;
+}
+
+export const ConfigProject = () => {
+    const [packageInfo, setPackageInfo] = useState<Packument | null>(
+        null,
+    );
+
+    useEffect(() => {
+        async function fetchPackageInfo() {
+            const info = await getPackageInfo("kaplay");
+            setPackageInfo(info);
+        }
+
+        fetchPackageInfo();
+    }, []);
+
+    return (
+        <>
+            <h2 className="text-2xl font-bold pb-4">Project configuration</h2>
+
+            <label className="form-control w-full max-w-xs">
+                <div className="label">
+                    <span className="label-text">
+                        KAPLAY.js version:
+                    </span>
+                </div>
+                <select
+                    id="version-selector"
+                    className="select select-bordered"
+                >
+                    {packageInfo
+                        && Object.keys(packageInfo.versions).reverse().map((
+                            version,
+                        ) => (
+                            <option key={version} value={version}>
+                                {version}
+                            </option>
+                        ))}
+                </select>
+            </label>
+        </>
+    );
+};

src/components/FileTree/FileTree.tsx

@@ -3,8 +3,8 @@ import { FileFold } from "./FileFold";
 
 export const FileTree = () => {
     return (
-        <View direction={"column"} justify="between" height="full">
-            <View direction={"column"} padding={2} gap={2}>
+        <View direction={"column"} justify="between" height="full" el={"div"}>
+            <View direction={"column"} padding={2} gap={2} el="div">
                 <FileFold
                     level={1}
                     title="Scenes"
@@ -18,7 +18,7 @@ export const FileTree = () => {
                 />
             </View>
 
-            <View direction="column" padding={2} gap={2}>
+            <View direction="column" padding={2} gap={2} el={"div"}>
                 <ul className="flex flex-col font-bold">
                     <li className="link link-primary">
                         <a

src/components/UI/Dialog.tsx

@@ -0,0 +1,42 @@
+import type { ComponentProps, FC } from "react";
+import { View } from "./View";
+
+type Props = ComponentProps<"dialog"> & {
+    onSave?: () => void;
+    onCloseWithoutSave?: () => void;
+};
+
+export const Dialog: FC<Props> = (props) => {
+    return (
+        <View className="modal" el={"dialog"} id={props.id} {...props}>
+            <main className="modal-box overflow-hidden px-0 py-0">
+                <section className="max-h-[400px] overflow-y-auto p-4">
+                    {props.children}
+                </section>
+
+                <footer className="p-4 bg-base-200">
+                    <div className="modal-action">
+                        <form method="dialog">
+                            <button
+                                className="btn btn-primary"
+                                onClick={props.onSave}
+                            >
+                                Save Changes
+                            </button>
+                        </form>
+                    </div>
+                </footer>
+            </main>
+            <form
+                method="dialog"
+                className="modal-backdrop"
+            >
+                <button
+                    onClick={props.onCloseWithoutSave}
+                >
+                    Close
+                </button>
+            </form>
+        </View>
+    );
+};

src/components/UI/View.tsx

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import type { ElementType, FC, PropsWithChildren } from "react";
 import { cn } from "../../util/cn";
 
 export type ViewProps = PropsWithChildren<{
@@ -8,13 +8,17 @@ export type ViewProps = PropsWithChildren<{
     justify?: "center" | "start" | "end" | "between" | "around";
     height?: "full" | "screen";
     className?: string;
+    id?: string;
+    el: ElementType<{
+        className?: string;
+    }>;
 }>;
 
 export const View: FC<ViewProps> = (props) => {
     const needsFlex = props.direction || props.gap || props.justify;
 
     return (
-        <div
+        <props.el
             className={cn({
                 "flex": needsFlex,
                 "flex-col": props.direction === "column",
@@ -33,8 +37,10 @@ export const View: FC<ViewProps> = (props) => {
                 "h-full": props.height === "full",
                 "h-screen": props.height === "screen",
             }, props.className)}
+            id={props.id}
+            {...props}
         >
             {props.children}
-        </div>
+        </props.el>
     );
 };

src/data/examples.ts

@@ -525,8 +525,7 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
 // would like to personally apologize to MF for not understanding a lot of examples
 
 export const examples = examplesList.filter((example) =>
-    examplesMetaData[example.name]?.version !== "4000"
-    || examplesMetaData[example.name]?.hidden
+    !examplesMetaData[example.name]?.hidden
 ).map((example) => {
     return {
         ...example,

src/stores/project.ts

@@ -16,6 +16,7 @@ export type Project = {
     assets: Map<string, Asset>;
     files: Map<string, File>;
     kaplayConfig: KAPLAYOpt;
+    kaplayVersion: string;
     mode: ProjectMode;
     isDefault?: boolean;
 };
@@ -50,7 +51,7 @@ export const createProjectSlice: StateCreator<
         assets: new Map(),
         kaplayConfig: {},
         mode: "pj",
-        saved: false,
+        kaplayVersion: "3001.0.0-beta.5",
     },
     getProject: () => {
         return get().project;
@@ -107,7 +108,7 @@ export const createProjectSlice: StateCreator<
                 assets: assets,
                 kaplayConfig: {},
                 mode: filter,
-                saved: false,
+                kaplayVersion: "3001.0.0-beta.5",
                 isDefault: exampleIndex ? true : false,
             },
         }));

src/styles/index.css

@@ -8,6 +8,7 @@ html, body, #root {
 	padding: 0;
     overflow: hidden;
     scrollbar-width: none;
+    font-family: 'Rubik Variable', sans-serif;
 }
 
 /* temp */

src/util/compiler.ts

@@ -24,7 +24,7 @@ body {
         </style>
 </head>
 <body>
-<script src="https://unpkg.com/kaplay@latest/dist/kaplay.js"></script>
+<script src="https://unpkg.com/kaplay@${useProject.getState().project.kaplayVersion}/dist/kaboom.js"></script>
 <script>
     ${parseAssets(code)}
 </script>