fix: example sorting

src/components/ExamplesBrowser/ExampleEntry.tsx

@@ -1,8 +1,8 @@
 import { assets } from "@kaplayjs/crew";
 import type { FC } from "react";
+import type { Example } from "../../data/examples";
 import { useEditor } from "../../hooks/useEditor";
 import { cn } from "../../util/cn";
-import type { Example } from "./data/examples";
 
 type Props = {
     example: Omit<Example, "code">;

src/components/ExamplesBrowser/ExamplesBrowser.tsx

@@ -1,5 +1,5 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import { examples } from "./data/examples";
+import { examples } from "../../data/examples";
 import { ExampleEntry } from "./ExampleEntry";
 import "./ExamplesBrowser.css";
 import { assets } from "@kaplayjs/crew";

src/components/Toolbar/ExampleList.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent, FC } from "react";
-import exampleList from "../../data/examples.json";
+import { examples } from "../../data/examples";
 import { useEditor } from "../../hooks/useEditor";
 import { useProject } from "../../hooks/useProject";
 
@@ -38,8 +38,8 @@ const ExampleList: FC = () => {
 
                 <option className="text-md" disabled>KAPLAY Examples</option>
 
-                {exampleList.map((example, i) => (
-                    <option key={example.name} data-example={i}>
+                {examples.map((example) => (
+                    <option key={example.name} data-example={example.index}>
                         {example.name}
                     </option>
                 ))}

src/components/ExamplesBrowser/data/examples.ts → src/data/examples.ts

@@ -1,4 +1,4 @@
-import examplesList from "../../../data/examples.json";
+import examplesList from "./exampleList.json";
 
 export type Example = {
     name: string;
@@ -107,6 +107,9 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
     },
     "curves": {
         formatedName: "Curves",
+        description: "Something I don't understand.",
+        tags: ["math"],
+        difficulty: "hard",
     },
     "dialog": {
         formatedName: "Dialog",
@@ -149,6 +152,25 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
         tags: ["games"],
         difficulty: "medium",
     },
+    "fadeIn": {
+        formatedName: "Fade In",
+        description: "How to fade in game objects.",
+        tags: ["effects"],
+        difficulty: "easy",
+    },
+    "fakeMouse": {
+        formatedName: "Fake Mouse",
+        description: "How to create a fake mouse in-game.",
+        tags: ["ui", "input"],
+        difficulty: "easy",
+        version: "4000",
+    },
+    "fall": {
+        formatedName: "Fall",
+        description: "How to make game objects fall.",
+        tags: ["basic concepts", "physics"],
+        difficulty: "easy",
+    },
 };
 
 export const examples = examplesList.filter((example) =>

src/hooks/useEditor.ts

@@ -3,7 +3,7 @@ import type { editor } from "monaco-editor";
 import { createRef, type MutableRefObject } from "react";
 import { toast } from "react-toastify";
 import { create } from "zustand";
-import examplesList from "../data/examples.json";
+import examplesList from "../data/exampleList.json";
 import type { File } from "../stores/storage/files";
 import { wrapGame } from "../util/compiler";
 import { debug } from "../util/logs";