Merge branch 'main' of github.com:TrashPandaCode/dumpster

Author: ecrax

app/lib/game/core/load-level.ts

@@ -1,8 +1,3 @@
-import { useFlowStore } from "~/lib/node-editor/node-store/flow-store";
-import { useLoopStore } from "~/lib/node-editor/node-store/loop-store";
-import { useNodeStore } from "~/lib/node-editor/node-store/node-store";
-import { useDataStore } from "~/lib/zustand/data";
-import { useGameStore } from "~/lib/zustand/game";
 import { LEVELS, type LevelId } from "./levels";
 
 /**
@@ -12,12 +7,5 @@ import { LEVELS, type LevelId } from "./levels";
 export const loadLevel = (level: LevelId) => {
   const curLevel = LEVELS[level];
 
-  // initialize all stores with level data
-  useGameStore.getState().init(level);
-  useFlowStore.getState().init(level);
-  useNodeStore.getState().init();
-  useLoopStore.getState().init();
-  useDataStore.getState().init(level);
-
   curLevel.initialState();
 };

app/lib/node-editor/editor-components/HelpMenu.tsx

@@ -97,7 +97,7 @@ const HelpMenu = () => {
               target="_blank"
               to={`/docs/level-guides/${LEVELS[level].slug}`}
             >
-              Find information on this topic here
+              Find the level guide for this topic here
             </NavLink>
             <hr className="mx-auto h-1 w-full rounded-sm border-0 bg-slate-700" />
             <div className="flex flex-row justify-center gap-2">

app/lib/zustand/init-stores.ts

@@ -0,0 +1,19 @@
+import { type LevelId } from "../game/core/levels";
+import { useFlowStore } from "../node-editor/node-store/flow-store";
+import { useLoopStore } from "../node-editor/node-store/loop-store";
+import { useNodeStore } from "../node-editor/node-store/node-store";
+import { useDataStore } from "./data";
+import { useGameStore } from "./game";
+
+/**
+ * Initializes all stores with the required level data.
+ * @param level Name of the level to load.
+ */
+export const initStores = (level: LevelId) => {
+  // initialize all stores with level data
+  useGameStore.getState().init(level);
+  useFlowStore.getState().init(level);
+  useNodeStore.getState().init();
+  useLoopStore.getState().init();
+  useDataStore.getState().init(level);
+};

app/routes/Game.tsx

@@ -20,6 +20,7 @@ import { useFlowStore } from "~/lib/node-editor/node-store/flow-store";
 import { useLoopStore } from "~/lib/node-editor/node-store/loop-store";
 import { useNodeStore } from "~/lib/node-editor/node-store/node-store";
 import { useDataStore } from "~/lib/zustand/data";
+import { initStores } from "~/lib/zustand/init-stores";
 
 const Game = ({ params }: Route.ComponentProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -42,6 +43,7 @@ const Game = ({ params }: Route.ComponentProps) => {
     }
 
     globalKeyTracker.init();
+    initStores(level);
     initGame(canvasRef.current);
     loadLevel(level);
 
@@ -55,7 +57,7 @@ const Game = ({ params }: Route.ComponentProps) => {
       useNodeStore.getState().save();
       useLoopStore.getState().save();
       useDataStore.getState().save();
-    }, 1000);
+    }, 10000);
 
     return () => {
       cleanupKaplay();

content/docs/faq.mdx

@@ -41,7 +41,8 @@ This section provides answers to frequently asked questions about the project. I
 
 <Details summary="What if I get stuck on a level?">
   Hints are built into each level. For each level a level guide exists in the
-  documentation. You can also revisit previous levels to reinforce earlier concepts.
+  documentation. You can also revisit previous levels to reinforce earlier
+  concepts.
 </Details>
 
 <Details summary="Can I share my solutions or learn from others?">
@@ -68,7 +69,7 @@ This section provides answers to frequently asked questions about the project. I
 <Details summary="I accidentally skipped the tutorial prompts.">
   You can restore all tutorial prompts and guidance messages previously skipped
   using the reset tutorial button in the help menu. The help menu can be
-  accessed in each level using the button displaying a question mark.
+  accessed in each level using the **?** button.
 </Details>
 
 <Details summary="Help, the nodes don't work anymore.">

content/docs/getting-started.mdx

@@ -4,4 +4,47 @@ title: Gettings Started
 
 # Getting Started
 
-This section will help you get started with the project. It will cover the following topics:
+Welcome to the learning platform for computer animation and visual programming. Whether you're completely new or just need a refresher, this guide will walk you through the first steps.
+
+## What is This?
+
+This project is an interactive learning environment for computer animation concepts. It features:
+
+- **Levels** that introduce computer animation topics
+- **A visual programming interface** allowing the user to control gameobjects
+- **Documentation** for every node and computer animation concept
+- A global **FAQ page** answering common questions
+
+## Step 1: Start the First Level
+
+Click the big **Play** button on the homepage to jump into the first level. An interactive tutorial will walk you through:
+
+- What each part of the interface does
+- How to interact with the node editor
+
+Alternatively, you can pick a level manually by selecting one of the **level cards** on the homepage.
+
+## Step 2: Learn by Doing
+
+Each level introduces a specific concept (e.g., time-transformations, for-loops, inverse kinematics). Levels are designed to be solved using the node-based system — experiment freely!
+
+If you're ever stuck, click the **?** button to view hints or navigate to the level guide outlining detailed explanations and strategies.
+
+## Step 3: Explore the Docs
+
+The [Docs](/docs) page contains everything you need:
+
+- Full documentation for every **node type**
+- Reference guides for **animation concepts** like forward/inverse kinematics, hierarchies, and time-transformations
+
+## Tips for Success
+
+- Use the **Import** and **Export** nodes to read and write data from and to game objects
+- Don't be afraid to experiment — levels are safe to reset at any time
+- Revisit solved levels to reinforce your understanding
+
+Ready to begin? Hit **Play** and start creating!
+
+---
+
+Need help? Visit the [FAQ](/docs/faq) or check the documentation for more details.