chore: support updates

kaplayjs · Oct 24, 2024 · 9bd19bb · 9bd19bb
1 parent 928abd5
commit 9bd19bb
Show file tree

Hide file tree

Showing 21 changed files with 1,661 additions and 1,780 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -6,15 +6,6 @@ import { viteStaticCopy } from "vite-plugin-static-copy";
 // https://astro.build/config
 export default defineConfig({
     integrations: [react(), tailwind()],
-    devToolbar: {
-        enabled: false,
-    },
-    server: {
-        headers: {
-            "Cross-Origin-Opener-Policy": "same-origin",
-            "Cross-Origin-Embedder-Policy": "require-corp",
-        },
-    },
     vite: {
         plugins: [
             viteStaticCopy({

diff --git a/package.json b/package.json
@@ -14,34 +14,36 @@
   "dependencies": {
     "@arrow-js/core": "1.0.0-alpha.10",
     "@astrojs/check": "^0.7.0",
-    "@astrojs/react": "^3.5.0",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/tailwind": "^5.1.2",
     "@monaco-editor/react": "^4.6.0",
-    "@nanostores/persistent": "^0.10.1",
-    "astro": "^4.9.3",
-    "daisyui": "^4.12.2",
+    "@nanostores/persistent": "^0.10.2",
+    "astro": "^4.16.7",
+    "daisyui": "^4.12.13",
     "dts-bundle-generator": "^9.5.1",
     "flex-splitter-directive": "^0.5.1",
+    "js-beautify": "^1.15.1",
     "nanostores": "^0.10.3",
     "pako": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.14",
     "tippy.js": "^6.3.7",
-    "typescript": "^5.4.5",
-    "wrangler": "^3.66.0"
+    "typescript": "^5.6.3",
+    "wrangler": "^3.83.0"
   },
   "devDependencies": {
-    "@types/node": "^20.14.2",
+    "@types/js-beautify": "^1.14.3",
+    "@types/node": "^20.17.0",
     "@types/pako": "^2.0.3",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/toastify-js": "^1.12.3",
     "dprint": "^0.45.1",
     "kaplay": "^3000.1.17",
-    "monaco-editor": "^0.48.0",
-    "vite": "^5.2.13",
-    "vite-plugin-static-copy": "^1.0.5"
+    "monaco-editor": "^0.52.0",
+    "vite": "^5.4.10",
+    "vite-plugin-static-copy": "^1.0.6"
   },
   "packageManager": "[email protected]+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/dino.png b/public/dino.png
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/kaplay_icon.png b/public/kaplay_icon.png
diff --git a/src/actions/format.ts b/src/actions/format.ts
@@ -0,0 +1,12 @@
+import { js_beautify } from "js-beautify";
+import { $editorInstance } from "../stores";
+
+export const format = () => {
+    const codeValue = $editorInstance.get()?.getValue();
+    const formattedCode = js_beautify(codeValue ?? "", {
+        indent_size: 4,
+        indent_char: " ",
+    });
+
+    $editorInstance.get()?.setValue(formattedCode);
+};
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -0,0 +1,2 @@
+export * from "./format.ts";
+export * from "./save.ts";
diff --git a/src/components/GameView/wrapCode.ts b/src/components/GameView/wrapCode.ts
@@ -1,13 +1,13 @@
-import kaboomJsFile from "../../../kaplay/dist/kaboom.js?raw";
 import { $version } from "../../stores";
 
-const versions = {
-    v4000:
-        "https://cdn.jsdelivr.net/npm/[email protected]/dist/kaplay.js",
-    v3001: "https://cdn.jsdelivr.net/npm/[email protected]",
+const versions: Record<string, string> = {
+    v4000: "https://unpkg.com/kaplay@next/dist/kaplay.js",
+    v3001: "https://unpkg.com/kaplay@latest/dist/kaplay.js",
 };
 
 export const wrapCode = (code: any) => {
+    const version = $version.get();
+
     return `
 <!DOCTYPE html>
 <head>
@@ -28,11 +28,10 @@ body {
         }
         </style>
 </head>
-<body>
-<script>
-${kaboomJsFile}
-</script>
 
+<script src="${versions[version]}"></script>
+
+<body>
 <script type="module">
 ${code}
 </script>

diff --git a/src/components/MonacoEditor/EditorLoading.tsx b/src/components/MonacoEditor/EditorLoading.tsx
@@ -2,7 +2,7 @@ import loadingIcon from "../../../kaplay/assets/sprites/bag.png";
 
 const EditorLoading = () => {
     return (
-        <div className="flex justify-center items-center h-full">
+        <div className="flex justify-center items-center h-dvh">
             <img
                 src={loadingIcon.src}
                 alt="loading"

diff --git a/src/components/MonacoEditor/MonacoEditor.tsx b/src/components/MonacoEditor/MonacoEditor.tsx
@@ -1,5 +1,4 @@
-import { Editor, type Monaco } from "@monaco-editor/react";
-
+import { Editor } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import { type FC, useEffect } from "react";
 import { $editorInstance, $editorTheme, $playgroundCode } from "../../stores";

diff --git a/src/components/MonacoEditor/configMonaco.ts b/src/components/MonacoEditor/configMonaco.ts
@@ -1,29 +1,45 @@
 import type { Monaco } from "@monaco-editor/react";
-import kaboomGlobal from "../../../kaplay/dist/declaration/global.d.ts?raw";
-import kaboomModule from "../../../kaplay/dist/doc.d.ts?raw";
+import globalDts from "../../../kaplay/dist/declaration/global.d.ts?raw";
+import kaplayDts from "../../../kaplay/dist/declaration/kaplay.d.ts?raw";
+import docTs from "../../../kaplay/dist/doc.d.ts?raw";
 
-const kaboomFunctionImports = `
-import { PluginList, MergePlugins, KAPLAYOpt, KAPLAYCtx } from "./kaboom"
-`;
+const dataUrlRegex = /data:[^;]+;base64,[A-Za-z0-9+\/]+={0,2}/g;
 
-const kaboomFunctionDt = `declare global { 
-    function kaboom<T extends PluginList<unknown> = [undefined]>(options?: KAPLAYOpt<T>): T extends [undefined] ? KAPLAYCtx : KAPLAYCtx & MergePlugins<T>;
-    function kaplay<T extends PluginList<unknown> = [undefined]>(options?: KAPLAYOpt<T>): T extends [undefined] ? KAPLAYCtx : KAPLAYCtx & MergePlugins<T>;
-}`;
+const globalImport = `
+import type { PluginList, MergePlugins, ButtonsDef } from "./types";
 
-const dataUrlRegex = /data:[^;]+;base64,[A-Za-z0-9+\/]+={0,2}/g;
+declare global {
+
+const kaplay: <TPlugins extends PluginList<unknown> = [
+	undefined
+], TButtons extends ButtonsDef = {}, TButtonsName extends string = keyof TButtons & string>(gopt?: KAPLAYOpt<TPlugins, TButtons>) => TPlugins extends [
+	undefined
+] ? KAPLAYCtx<TButtons, TButtonsName> : KAPLAYCtx<TButtons, TButtonsName> & MergePlugins<TPlugins>;
+ 
+}
+
+
+`;
 
 export const configMonaco = (monaco: Monaco) => {
-    // Add global kaboom types
     monaco.languages.typescript.javascriptDefaults.addExtraLib(
-        kaboomFunctionImports + kaboomGlobal + kaboomFunctionDt,
+        globalDts,
         "global.d.ts",
     );
 
-    // Add kaboom module types
     monaco.languages.typescript.javascriptDefaults.addExtraLib(
-        kaboomModule,
-        "kaboom.d.ts",
+        kaplayDts,
+        "index.d.ts",
+    );
+
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(
+        docTs,
+        "types.d.ts",
+    );
+
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(
+        globalImport,
+        "global2.d.ts",
     );
 
     // Hover dataUrl images

diff --git a/src/components/Playground/Playground.astro b/src/components/Playground/Playground.astro
@@ -11,13 +11,13 @@ import Toasty from "../UI/Toasty.astro";
     <Toolbar />
 
     <div id="wrapper">
-        <div class="h-1/2 lg:w-1/2 lg:h-full">
+        <div class="lg:w-1/2 flex-auto">
             <MonacoEditor client:load />
         </div>
 
         <div role="separator" tabindex="1" />
 
-        <div class="h-1/2 lg:w-1/2 lg:h-full">
+        <div class="lg:w-1/2 flex-auto">
             <GameView />
         </div>
     </div>

diff --git a/src/components/Playground/hotKeys.ts b/src/components/Playground/hotKeys.ts
@@ -1,10 +1,11 @@
-import { save } from "../../actions/save";
+import { format, save } from "../../actions";
 
 document.addEventListener("keydown", function(event) {
     if (event.ctrlKey && event.key === "s") {
         event.preventDefault();
 
         save();
+        format();
     }
 });
 

diff --git a/src/components/Toolbar/ToolbarDown.astro b/src/components/Toolbar/ToolbarDown.astro
@@ -4,10 +4,10 @@ import ToolbarVersionSelector from "./ToolbarVersionSelector.astro";
 ---
 
 <div
-    class="lg:hidden flex p-2 bg-base-300"
+    class="lg:hidden flex bg-base-300"
     role="toolbar"
 >
-    <div class="flex">
+    <div class="flex items-center justify-center min-h-14">
         <ToolbarExamples />
         <ToolbarVersionSelector />
     </div>

diff --git a/src/components/Toolbar/ToolbarVersionSelector.astro b/src/components/Toolbar/ToolbarVersionSelector.astro
@@ -3,14 +3,15 @@
     class="select select-bordered select-sm w-full max-w-48 lg:max-w-xs ml-2"
     title="Choose an example"
 >
-    <option selected value="v4000">v4000</option>
+    <option selected value="v4000">v4000 (experimental)</option>
     <option selected value="v3001">v3001</option>
 </select>
 
 <script>
+    import { save } from "../../actions/save";
     import { $version } from "../../stores";
 
-    const select = document.querySelector<HTMLSelectElement>("version-select");
+    const select = document.querySelector<HTMLSelectElement>("#version-select");
     const options = select?.querySelectorAll<HTMLOptionElement>("option");
 
     select?.addEventListener("change", () => {
@@ -19,6 +20,7 @@
 
         if (version) {
             $version.set(version);
+            save();
         }
     });
 </script>
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/App.astro b/src/layouts/App.astro
@@ -38,7 +38,7 @@ import "../styles/splitter.css";
         <meta name="author" content="KAPLAYGROUND" />
         <meta name="theme-color" content="#f5f5f5" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="icon" href="/dino.png" />
+        <link rel="icon" href="/favicon.png" />
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
     </head>

diff --git a/src/stores.ts b/src/stores.ts
@@ -4,9 +4,14 @@ import { atom } from "nanostores";
 import type { GameView } from "./components/GameView/gameView";
 import type { Toasty } from "./components/UI/Toasty.astro";
 
-const defaultCode = `const k = kaplay();
-    
-k.debug.log("welcome to kaplayground!");`;
+const defaultCode = `kaplay();
+
+loadBean();
+
+add([
+    sprite("bean");
+]);
+`;
 
 export const $playgroundCode = persistentAtom(
     "kaplayground_code",
@@ -21,4 +26,4 @@ export const $gameViewElement = atom<GameView | null>(null);
 export const $toastyElement = atom<Toasty | null>(null);
 export const $editorInstance = atom<null | editor.IStandaloneCodeEditor>(null);
 export const $editorTheme = atom("kaplayrk");
-export const $version = atom("v4000");
+export const $version = atom("v3001");
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,4 +9,4 @@
     "./dist/**",
     "./node_modules/**"
   ]
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./format.ts";
		export * from "./save.ts";
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference path="../.astro/types.d.ts" />
		/// <reference types="astro/client" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ @@
         "./dist/**",
         "./node_modules/**"
       ]
-    }
+    }