fixed build issues

snekden/app/games/canvas-interactive/page.tsx

@@ -28,7 +28,7 @@ export default function CanvasInteractive() {
     return () => {
       c.removeEventListener('click', clickHandler);
     }
-  }, [])
+  }, [shapes])
 
   return <>
     <p>Stars</p>

snekden/app/games/eliza/BotsList.tsx

@@ -26,7 +26,7 @@ export function BotsList(props: { callback: React.Dispatch<React.SetStateAction<
     console.log('calling callback')
     return () => {
     }
-  }, [chosen])
+  }, [chosen, props])
 
   const handleRemoteClick = (v: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
     console.log('clicked remote button', v);

snekden/app/games/eliza/useTerminal.ts

@@ -1,23 +1,23 @@
-import { useRef, useEffect, useState } from 'react';
-import { Terminal } from 'xterm';
+import { useEffect, useRef, useState } from "react";
+import { Terminal } from "xterm";
 
 export const useTerminal = (say?: any) => {
   const terminalRef = useRef({} as HTMLDivElement);
-  const term = new Terminal();
   const [first, setfirst] = useState(true);
   useEffect(() => {
+    const term = new Terminal();
     if (first) {
-      term.open(document.getElementById('terminal')!);
+      term.open(document.getElementById("terminal")!);
       setfirst(false);
     }
     const render = () => {
-      term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
+      term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ");
     };
     render();
     return () => {
       // window.cancelAnimationFrame(animationFrameId);
     };
-  }, [say]);
+  }, [first, say]);
 
   return terminalRef;
 };

snekden/app/games/face/useWebcam.tsx

@@ -2,25 +2,22 @@
 import { useEffect, useRef, useState } from "react";
 
 export function useWebcam(
-  ref: React.MutableRefObject<HTMLVideoElement>): HTMLVideoElement {
+  ref: React.MutableRefObject<HTMLVideoElement>,
+): HTMLVideoElement {
   const [source, setSource] = useState({} as MediaStream);
 
-  function getVideoNow() {
+  useEffect(() => {
     navigator.mediaDevices.getUserMedia(
-      { video: {} }
+      { video: {} },
     )
       .then((stream) => {
         setSource(stream);
         ref.current.srcObject = source;
       })
       .catch(
-        (err) => console.error(err)
+        (err) => console.error(err),
       );
-  }
-
-  useEffect(() => {
-    getVideoNow();
-  }, []);
+  }, [ref, source]);
 
   return ref.current;
 }

snekden/app/games/ur/(components)/Background.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { actions, interpret } from "xstate";
-import { STARTING_PIECES, urMachine } from "../(logic)/machine";
+import { STARTING_PIECES,  } from "../(logic)/machine";
 import Board from "./Board";
 import PiecesCounter from "./PiecesCounter";
 import { useEffect, useState } from "react";
@@ -10,7 +10,7 @@ import { useInterpret, useMachine } from "@xstate/react";
 import { PlayerAssets } from "../(logic)/types";
 
 function Background() {
-  const actor = useInterpret(urMachine);
+  // const actor = useInterpret(urMachine);
 
   // useEffect(() => {
   //   actor.start();

snekden/app/games/ur/(components)/Graphic.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from "react";
-import { Graphics, Stage, Text } from "@pixi/react";
+import { Graphics, Stage, Text, _ReactPixi } from "@pixi/react";
 
 interface RectangleProps {
   lineWidth: number;
@@ -10,7 +10,7 @@ interface RectangleProps {
 }
 
 function Rectangle(props: RectangleProps) {
-  const draw = useCallback((g) => {
+  const draw = useCallback((g: any) => {
     g.clear();
     g.lineStyle(props.lineWidth, props.color);
     g.drawRect(