chore: stuff

README.md

@@ -9,3 +9,7 @@ KAPLAYGROUND is a web based editor to create, edit and export KAPLAY projects.
 - Export & Improt projects
 - Autosaved project in local
 - Snapable editor
+
+```
+git submodule update --init --recursive
+```

package.json

@@ -4,7 +4,7 @@
   "version": "2.0.0",
   "bin": "scripts/cli.js",
   "scripts": {
-    "install": "git submodule update --init --recursive && cd kaplay && pnpm i",
+    "install": "cd kaplay && pnpm i",
     "dev": "vite dev",
     "start": "vite dev",
     "build": "vite build",

src/components/Playground/GameView.tsx

@@ -1,10 +1,21 @@
-import { type FC } from "react";
+import { type FC, useEffect } from "react";
+import { useEditor } from "../../hooks/useEditor";
 
 type GameViewProps = {
     onLoad?: () => void;
 };
 
 export const GameView: FC<GameViewProps> = ({ onLoad }) => {
+    const { setRuntime } = useEditor();
+
+    useEffect(() => {
+        const iframe = document.getElementById(
+            "game-view",
+        ) as HTMLIFrameElement;
+
+        setRuntime({ iframe: iframe });
+    }, []);
+
     return (
         <iframe
             id="game-view"

src/components/Toolbar/Projects.tsx

@@ -10,7 +10,7 @@ import ToolbarButton from "./ToolbarButton";
 
 const Projects: FC = () => {
     const { project: project, createNewProject, loadProject } = useProject();
-    const { update, run, showNotification } = useEditor();
+    const { update, run, showNotification, getRuntime } = useEditor();
 
     const handleDownload = () => {
         const projectLocal = localStorage.getItem(project.id);
@@ -28,6 +28,21 @@ const Projects: FC = () => {
         showNotification("Exporting the project, check downloads...");
     };
 
+    const handleExportHTML = () => {
+        const projectCode = getRuntime().iframe?.srcdoc;
+
+        if (!projectCode) {
+            showNotification("No project to export... Remember to save!");
+            return;
+        }
+
+        const blob = new Blob([projectCode], {
+            type: "text/html",
+        });
+
+        downloadBlob(blob, `${project.name}.html`);
+    };
+
     const handleProjectUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
         if (!file) return;
@@ -65,12 +80,18 @@ const Projects: FC = () => {
         reader.readAsText(file);
     };
 
-    const handleProjectReset = () => {
+    const handleNewProject = () => {
         createNewProject("pj");
         update();
         run();
     };
 
+    const handleNewExample = () => {
+        createNewProject("ex");
+        update();
+        run();
+    };
+
     return (
         <div className="dropdown dropdown-end flex-grow-0 flex-shrink-0 basis-24 h-full">
             <ToolbarButton
@@ -90,6 +111,13 @@ const Projects: FC = () => {
                         Export project
                     </button>
                 </li>
+                <li>
+                    <button
+                        onClick={handleExportHTML}
+                    >
+                        Export project as .html
+                    </button>
+                </li>
                 <li>
                     <label>
                         <input
@@ -103,11 +131,18 @@ const Projects: FC = () => {
                 </li>
                 <li>
                     <button
-                        onClick={handleProjectReset}
+                        onClick={handleNewProject}
                     >
                         Create new project
                     </button>
                 </li>
+                <li>
+                    <button
+                        onClick={handleNewExample}
+                    >
+                        Create new example
+                    </button>
+                </li>
             </ul>
         </div>
     );

src/hooks/useEditor.ts

@@ -1,6 +1,6 @@
 import type { Monaco } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
-import { createRef, type MutableRefObject } from "react";
+import { createRef, type RefObject } from "react";
 import { toast } from "react-toastify";
 import { create } from "zustand";
 import { wrapGame } from "../util/compiler";
@@ -12,7 +12,7 @@ type EditorRuntime = {
     monaco: Monaco | null;
     currentFile: string;
     gylphDecorations: editor.IEditorDecorationsCollection | null;
-    iframe: MutableRefObject<HTMLIFrameElement>;
+    iframe: HTMLIFrameElement | null;
 };
 
 type EditorStore = {
@@ -21,7 +21,7 @@ type EditorStore = {
         monaco: Monaco | null;
         currentFile: string;
         gylphDecorations: editor.IEditorDecorationsCollection | null;
-        iframe: MutableRefObject<HTMLIFrameElement>;
+        iframe: HTMLIFrameElement | null;
     };
     update: (value?: string) => void;
     run: () => void;
@@ -41,7 +41,7 @@ export const useEditor = create<EditorStore>((set, get) => ({
         monaco: null,
         currentFile: "main.js",
         gylphDecorations: null,
-        iframe: createRef() as MutableRefObject<HTMLIFrameElement>,
+        iframe: null,
         isDefaultExample: false,
     },
     setRuntime: (runtime) => {