Merge pull request #216 from TrashPandaCode/fixes

fixes

Author: JonathanKr

.github/workflows/deploy.yml

@@ -29,4 +29,4 @@ jobs:
         uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build/client
+          publish_dir: ./build/client

app/lib/core/docs/components/Breadcrumb.tsx

@@ -1,15 +1,15 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
-import classnames from "classnames"
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+import classnames from "classnames";
+import * as React from "react";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+    separator?: React.ReactNode;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
 
 const BreadcrumbList = React.forwardRef<
   HTMLOListElement,
@@ -18,13 +18,13 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={classnames(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 text-sm break-words text-slate-500 sm:gap-2.5",
       className
     )}
     {...props}
   />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+));
+BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<
   HTMLLIElement,
@@ -35,26 +35,29 @@ const BreadcrumbItem = React.forwardRef<
     className={classnames("inline-flex items-center gap-1.5", className)}
     {...props}
   />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
       ref={ref}
-      className={classnames("transition-colors hover:text-foreground", className)}
+      className={classnames(
+        "hover:text-foreground transition-colors",
+        className
+      )}
       {...props}
     />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
@@ -68,8 +71,8 @@ const BreadcrumbPage = React.forwardRef<
     className={classnames("font-normal text-slate-950", className)}
     {...props}
   />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({
   children,
@@ -79,13 +82,13 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={classnames("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    className={classnames("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRightIcon />}
   </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
   className,
@@ -94,14 +97,17 @@ const BreadcrumbEllipsis = ({
   <span
     role="presentation"
     aria-hidden="true"
-    className={classnames("flex h-9 w-9 items-center justify-center", className)}
+    className={classnames(
+      "flex h-9 w-9 items-center justify-center",
+      className
+    )}
     {...props}
   >
     <DotsHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
   Breadcrumb,
@@ -111,4 +117,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};

app/lib/core/docs/search-utils.ts

@@ -61,10 +61,10 @@ export const cleanMarkdownContent = (content: string): string => {
  * @returns A short description string.
  */
 export const extractDescription = (content: string): string => {
-  if (!content) return '';
-  const firstParagraph = content.split('\n\n')[0] || content.split('.')[0];
-  return firstParagraph.length > 150 
-    ? firstParagraph.substring(0, 150) + '...' 
+  if (!content) return "";
+  const firstParagraph = content.split("\n\n")[0] || content.split(".")[0];
+  return firstParagraph.length > 150
+    ? firstParagraph.substring(0, 150) + "..."
     : firstParagraph;
 };
 
@@ -79,4 +79,4 @@ export const createSearchIndex = () => {
     cache: true,
     resolution: 9,
   });
-};
+};

app/lib/core/home/components/Carousel.tsx

@@ -38,7 +38,7 @@ const Button = React.forwardRef<
     <button
       ref={ref}
       className={classNames(
-        "flex items-center cursor-pointer transition-all duration-200 justify-center bg-white text-slate-800 hover:bg-slate-200 focus:ring-2 focus:ring-slate-500 focus:outline-none",
+        "flex cursor-pointer items-center justify-center bg-white text-slate-800 transition-all duration-200 hover:bg-slate-200 focus:ring-2 focus:ring-slate-500 focus:outline-none",
         className
       )}
       {...props}

app/lib/game/components/GoalsDialog.tsx

@@ -88,7 +88,7 @@ export default function GoalsDialog({ open }: { open: boolean }) {
     <Dialog open={open} modal={false}>
       <DialogPortal>
         <DialogContent
-        ref={dialogRef}
+          ref={dialogRef}
           style={{
             left: pos.x,
             top: pos.y,

app/lib/game/components/Tutorial.tsx

@@ -1,5 +1,6 @@
 import { Checkbox, CheckboxIndicator } from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@radix-ui/react-icons";
+import { useEffect } from "react";
 import Joyride, {
   type CallBackProps,
   type Step,
@@ -107,6 +108,10 @@ export default function Tutorial({ onClose }: { onClose: () => void }) {
     }
   };
 
+  useEffect(() => {
+    return () => onClose();
+  }, []);
+
   return (
     <Joyride
       steps={steps}

app/lib/game/core/levels.ts

@@ -3,7 +3,6 @@ import { v4 as uuidv4 } from "uuid";
 
 import bounceCard from "~/assets/home-cards/bounce_card.png";
 import calcCard from "~/assets/home-cards/calc_card.png";
-import sittingCard from "~/assets/home-cards/sitting_card.png";
 import forwardCard from "~/assets/home-cards/forward_card.png";
 import gravityCard from "~/assets/home-cards/gravity_card.png";
 import inverseCard from "~/assets/home-cards/inverse_card.png";
@@ -12,6 +11,7 @@ import loopingCard from "~/assets/home-cards/looping_card.png";
 import moveCard from "~/assets/home-cards/move_card.png";
 import parentingCard from "~/assets/home-cards/parenting_card.png";
 import playgroundCard from "~/assets/home-cards/playground_card.png";
+import sittingCard from "~/assets/home-cards/sitting_card.png";
 import type { NodeType } from "~/lib/node-editor/nodes/node-types";
 import { type GameObject } from "../game-objects";
 import { initializeBounce } from "../levels/bounce";

app/lib/game/levels/gravity.ts

@@ -2,84 +2,84 @@ import { createLevelDataHelpers } from "~/lib/zustand/data";
 import { useGameStore } from "~/lib/zustand/game";
 import { getKaplayCtx } from "../core/kaplay-ctx";
 import {
-    addBackgrounds,
-    addGameobjects,
-    animPlayer,
-    handleReset,
+  addBackgrounds,
+  addGameobjects,
+  animPlayer,
+  handleReset,
 } from "../utils/game-helper";
 
 export const initializeGravity = () => {
-    const { k, game } = getKaplayCtx();
-    const dataHelper = createLevelDataHelpers("gravity");
-
-    addBackgrounds(["default"]);
-    
-    const { raccoon, trashcanFilled } = addGameobjects([
-        "raccoon",
-        "trashcanFilled",
-    ]);
-
-    const floor = k.add([
-        k.rect(50, 10),
-        k.anchor("top"),
-        k.pos(0, 0),
-        k.area(),
-        k.body({ isStatic: true }),
-        k.opacity(0),
-    ]);
-
-    trashcanFilled.use(k.body());
-    trashcanFilled.use(k.area({
-        shape: new k.Rect(k.vec2(0, 0), 16, 16),
-        offset: k.vec2(0, 0),
-    }));
-
-    trashcanFilled.pos.x = 5;
-    trashcanFilled.pos.y = -10;
-
-    let trashcanVely = 0;    
-
-    game.onUpdate(() => {
-        if (useGameStore.getState().isPaused) return;
-
-        animPlayer(raccoon, k, {
-            movementMode: "keyboard",
-            updateStoreData: false,
-            camClampX: {
-                min: -8,
-                max: 12,
-            },
-            playerClampX: {
-                min: -12,
-                max: 20,
-            },
-        });
-
-        trashcanVely = dataHelper.getData("trashcanFilled", "y vel");
-
-        if(trashcanFilled.pos.y < 0){
-            trashcanFilled.pos.y = trashcanFilled.pos.y + trashcanVely;
-        }
-        else{
-            trashcanFilled.use(k.body({ isStatic: true }));
-        }
-
-        raccoon.pos.y = dataHelper.getData("raccoon", "y pos");
-
-        dataHelper.setData("trashcanFilled", "y vel", () => trashcanVely);
-        dataHelper.setData("raccoon", "y pos", () => raccoon.pos.y);
-
-
-        const trashcanTop = trashcanFilled.pos.sub(k.vec2(0, 2));
-
-        if(raccoon.pos.dist(trashcanTop) <= 1){
-            useGameStore.getState().setLevelCompleted(true);
-        }
-
-        if (dataHelper.initData()) {
-            handleReset(raccoon, 1);
-            trashcanFilled.pos.x = 5;
-            trashcanFilled.pos.y = -10;
-        }
+  const { k, game } = getKaplayCtx();
+  const dataHelper = createLevelDataHelpers("gravity");
+
+  addBackgrounds(["default"]);
+
+  const { raccoon, trashcanFilled } = addGameobjects([
+    "raccoon",
+    "trashcanFilled",
+  ]);
+
+  const floor = k.add([
+    k.rect(50, 10),
+    k.anchor("top"),
+    k.pos(0, 0),
+    k.area(),
+    k.body({ isStatic: true }),
+    k.opacity(0),
+  ]);
+
+  trashcanFilled.use(k.body());
+  trashcanFilled.use(
+    k.area({
+      shape: new k.Rect(k.vec2(0, 0), 16, 16),
+      offset: k.vec2(0, 0),
+    })
+  );
+
+  trashcanFilled.pos.x = 5;
+  trashcanFilled.pos.y = -10;
+
+  let trashcanVely = 0;
+
+  game.onUpdate(() => {
+    if (useGameStore.getState().isPaused) return;
+
+    animPlayer(raccoon, k, {
+      movementMode: "keyboard",
+      updateStoreData: false,
+      camClampX: {
+        min: -8,
+        max: 12,
+      },
+      playerClampX: {
+        min: -12,
+        max: 20,
+      },
     });
+
+    trashcanVely = dataHelper.getData("trashcanFilled", "y vel");
+
+    if (trashcanFilled.pos.y < 0) {
+      trashcanFilled.pos.y = trashcanFilled.pos.y + trashcanVely;
+    } else {
+      trashcanFilled.use(k.body({ isStatic: true }));
+    }
+
+    raccoon.pos.y = dataHelper.getData("raccoon", "y pos");
+
+    dataHelper.setData("trashcanFilled", "y vel", () => trashcanVely);
+    dataHelper.setData("raccoon", "y pos", () => raccoon.pos.y);
+
+    const trashcanTop = trashcanFilled.pos.sub(k.vec2(0, 2));
+
+    if (raccoon.pos.dist(trashcanTop) <= 1) {
+      useGameStore.getState().setLevelCompleted(true);
+    }
+
+    if (dataHelper.initData()) {
+      handleReset(raccoon, 1);
+      trashcanFilled.pos.x = 5;
+      trashcanFilled.pos.y = -10;
+    }
+  });
 };

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

@@ -26,7 +26,7 @@ export const IconButton = React.forwardRef<
       </TooltipTrigger>
 
       <TooltipContent side={side}>
-        { typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip }
+        {typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}
       </TooltipContent>
     </Tooltip>
   );

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

@@ -17,12 +17,12 @@ import { Panel } from "@xyflow/react";
 import LevelDialog from "~/lib/game/components/LevelDialog";
 import { useDataStore } from "~/lib/zustand/data";
 import { useGameStore } from "~/lib/zustand/game";
+import useIsMac from "../hooks/useMac";
 import { useFlowStore } from "../node-store/flow-store";
 import { useLoopStore } from "../node-store/loop-store";
 import { useNodeStore } from "../node-store/node-store";
 import { redo, undo } from "../utils/undo";
 import { IconButton } from "./IconButton";
-import useIsMac from "../hooks/useMac";
 
 const LeftPanel = () => {
   const currentLevel = useGameStore((state) => state.currentLevel);