feat: auto-change version on examples

kaplayjs · Nov 1, 2024 · 7f1f775 · 7f1f775
1 parent 836c3c4
commit 7f1f775
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/src/data/examples.ts b/src/data/examples.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_KAPLAY_VERSION } from "../config/common";
 import examplesList from "./exampleList.json";
 
 export type Tag =
@@ -28,6 +29,8 @@ export type Example = {
     image?: string;
 };
 
+const VERSION_4000 = "4000.0.0-alpha.14";
+
 export const examplesMetaData: Record<string, Partial<Example>> = {
     "add": {
         formatedName: "Add game objects",
@@ -101,14 +104,19 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
         description: "How to create different collision shapes.",
         tags: ["physics"],
         difficulty: "medium",
-        version: "4000",
+        version: VERSION_4000,
     },
     "component": {
         formatedName: "Component",
         description: "How to create and use components.",
         tags: ["basic concepts"],
         difficulty: "easy",
     },
+    "clip": {
+        formatedName: "Clip",
+        version: VERSION_4000,
+        hidden: true,
+    },
     "concert": {
         formatedName: "Concert",
         description: "Celebrate Kaboom.js v2000 and back to the old days.",
@@ -137,13 +145,13 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
         formatedName: "Double Jump",
         description: "How to add a double jump.",
         tags: ["basic concepts", "game"],
-        difficulty: "medium",
+        difficulty: "easy",
     },
     "drag": {
         formatedName: "Drag",
         description: "Make game objects draggable.",
         tags: ["ui"],
-        difficulty: "medium",
+        difficulty: "easy",
     },
     "draw": {
         formatedName: "Draw",
@@ -179,7 +187,7 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
         description: "How to create a fake mouse in-game.",
         tags: ["ui", "input"],
         difficulty: "easy",
-        version: "4000",
+        version: VERSION_4000,
     },
     // TODO: This could be better explained, it actually makes use of debug.stepFrame()
     //  so you could argue this is testing
@@ -520,10 +528,14 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
         tags: ["basic concepts", "math"],
         difficulty: "easy",
     },
+    "weirdTextTags": {
+        formatedName: "Weird text tags",
+        description: "How to use weird text tags.",
+        tags: ["ui"],
+        difficulty: "easy",
+    },
 };
 
-// would like to personally apologize to MF for not understanding a lot of examples
-
 export const examples = examplesList.filter((example) =>
     !examplesMetaData[example.name]?.hidden
 ).map((example) => {
@@ -534,5 +546,7 @@ export const examples = examplesList.filter((example) =>
             ?? example.name,
         tags: examplesMetaData[example.name]?.tags ?? [],
         difficulty: examplesMetaData[example.name]?.difficulty ?? "medium",
+        version: examplesMetaData[example.name]?.version
+            ?? DEFAULT_KAPLAY_VERSION,
     };
 });
diff --git a/src/stores/project.ts b/src/stores/project.ts
@@ -1,8 +1,9 @@
 import type { KAPLAYOpt } from "kaplay";
+import { toast } from "react-toastify";
 import type { StateCreator } from "zustand";
 import { DEFAULT_KAPLAY_VERSION } from "../config/common";
 import { defaultProject } from "../config/defaultProject";
-import examplesList from "../data/exampleList.json";
+import { examples } from "../data/examples";
 import { useConfig } from "../hooks/useConfig";
 import { useEditor } from "../hooks/useEditor";
 import { useProject } from "../hooks/useProject";
@@ -90,14 +91,16 @@ export const createProjectSlice: StateCreator<
 
         const files = new Map<string, File>();
         const assets = new Map();
+        const lastVersion = get().project.kaplayVersion;
+        let version = DEFAULT_KAPLAY_VERSION;
         let id = `u${filter}-Untitled`;
 
         // Load default setup
         if (filter === "pj") {
             get().loadDefaultSetup("pj", files, assets);
             debug(1, "New files for the new project", files, assets);
         } else if (exampleIndex) {
-            const example = examplesList.filter(example =>
+            const example = examples.filter(example =>
                 example.index === exampleIndex || example.name === exampleIndex
             )[0];
 
@@ -110,6 +113,8 @@ export const createProjectSlice: StateCreator<
             });
 
             id = example.name;
+
+            version = example.version;
         } else {
             get().loadDefaultSetup("ex", files, assets);
             debug(1, "New files for the new example project", files, assets);
@@ -128,6 +133,12 @@ export const createProjectSlice: StateCreator<
             },
         });
 
+        if (lastVersion !== version) {
+            toast(
+                `KAPLAY version updated to ${version} for this example. May take a few seconds to load.`,
+            );
+        }
+
         set(() => ({
             project: {
                 name: `${filter}#${get().getSavedProjects("pj").length}`,
@@ -136,7 +147,7 @@ export const createProjectSlice: StateCreator<
                 assets: assets,
                 kaplayConfig: {},
                 mode: filter,
-                kaplayVersion: DEFAULT_KAPLAY_VERSION,
+                kaplayVersion: version,
                 isDefault: exampleIndex ? true : false,
                 id: id,
             },