simplify

package.json

@@ -7,6 +7,7 @@
     "beautify": "bunx js-beautify static/3_3_journey/https:/threejs-journey.com/bundles/public/HeroExperience-367a3eca.js > static/3_3_journey/https:/threejs-journey.com/bundles/public/HeroExperience-367a3eca.js-2.js",
     "cog": "bun run js/cognition_engine_parser.js",
     "dev": "bun run vite",
+    "build": "bun run vite build",
     "pprof": "go tool trace trace.out",
     "hardware_helper": "bun run js/hardware/hardware-company-helper.js",
     "tailscale_server": "sudo tailscale serve 3000",
@@ -42,6 +43,7 @@
     "@roboticsuniversity/livekit": "https://api.observablehq.com/@roboticsuniversity/livekit.tgz",
     "@roboticsuniversity/ode-to-dynamicland-org": "https://api.observablehq.com/@roboticsuniversity/ode-to-dynamicland-org.tgz?v=3",
     "@roboticsuniversity/robotics-hardware": "https://api.observablehq.com/@roboticsuniversity/robotics-hardware.tgz?v=3",
+    "@tldraw/tldraw": "^3.3.1",
     "3-planning-prediction": "https://api.observablehq.com/@roboticsuniversity/3-planning-prediction.tgz",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",

views/odyssey/Dynamichow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TwitchPlaysPokemonPanel from './TwitchPlaysPokemonPanel';
 //import notebook from "@roboticsuniversity/alan_how";
 //import notebook2 from "@roboticsuniversity/dynamicland";//"@roboticsuniversity/voxels-diffusion-policy-3d";
@@ -14,36 +14,126 @@ import {Runtime, Inspector} from "@observablehq/runtime";
 import notebook from "https://api.observablehq.com/@roboticsuniversity/alan_how.js?v=4";
 import define from "https://api.observablehq.com/@roboticsuniversity/dynamicland.js?v=4";
 
-function Alanhow() {
-  const planeDivRef = useRef();
-  const viewofXRotRef = useRef();
-  const viewofYRotRef = useRef();
-
+// function Alanhow() {
+//   const planeDivRef = useRef();
+//   const viewofXRotRef = useRef();
+//   const viewofYRotRef = useRef();
+
+//   useEffect(() => {
+//     const runtime = new Runtime();
+//     runtime.module(notebook, name => {
+//       if (name === "planeDiv") return new Inspector(planeDivRef.current);
+//       if (name === "viewof xRot") return new Inspector(viewofXRotRef.current);
+//       if (name === "viewof yRot") return new Inspector(viewofYRotRef.current);
+//     });
+//     return () => runtime.dispose();
+//   }, []);
+
+//   return (
+//     <>
+//       <div ref={planeDivRef} />
+//       <div ref={viewofXRotRef} />
+//       <div ref={viewofYRotRef} />
+//       <p>Credit: <a href="https://observablehq.com/@roboticsuniversity/alan_how">ALan - how? by roboticsuniversity</a></p>
+//     </>
+//   );
+// }
+
+
+
+const AlanHow = () => {
+  const ballRef = useRef(null);
+
+  // Ball Animation Logic
   useEffect(() => {
-    const runtime = new Runtime();
-    runtime.module(notebook, name => {
-      if (name === "planeDiv") return new Inspector(planeDivRef.current);
-      if (name === "viewof xRot") return new Inspector(viewofXRotRef.current);
-      if (name === "viewof yRot") return new Inspector(viewofYRotRef.current);
-    });
-    return () => runtime.dispose();
+    let time = 0;
+    const animateBall = () => {
+      time += 0.05;
+      const x = Math.sin(time) * 180;
+      const y = Math.cos(time * 1.5) * 50;
+      const z = Math.sin(time * 2) * 100 + 100;
+      if (ballRef.current) {
+        ballRef.current.style.transform = `translateX(${x}px) translateY(${y}px) translateZ(${z}px)`;
+      }
+      requestAnimationFrame(animateBall);
+    };
+    animateBall();
   }, []);
 
+  // Inline Styles
+  const sceneStyle = {
+    position: 'relative',
+    width: '500px',
+    height: '500px',
+    transformStyle: 'preserve-3d',
+    animation: 'rotateScene 10s infinite linear',
+  };
+
+  const planeStyle = {
+    position: 'absolute',
+    width: '400px',
+    height: '200px',
+    backgroundColor: 'teal',
+    transform: 'rotateX(45deg) rotateY(45deg) rotateZ(45deg) ',
+    "opacity": 0.5
+  };
+
+  const ballStyle = {
+    position: 'absolute',
+    width: '30px',
+    height: '30px',
+    backgroundColor: 'red',
+    borderRadius: '50%',
+    transform: 'translateZ(100px)',
+  };
+
+  const wallStyle = {
+    position: 'absolute',
+    width: '400px',
+    height: '200px',
+    backgroundColor: 'blue',
+    transform: 'translateZ(50px)',
+    "opacity": 0.5
+  };
+
+  const containerStyle = {
+    margin: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    backgroundColor: '#f8f8f8',
+
+  };
+
   return (
-    <>
-      <div ref={planeDivRef} />
-      <div ref={viewofXRotRef} />
-      <div ref={viewofYRotRef} />
-      <p>Credit: <a href="https://observablehq.com/@roboticsuniversity/alan_how">ALan - how? by roboticsuniversity</a></p>
-    </>
+    <div style={containerStyle}>
+      <div> Alan Kay how?</div>
+      <div style={sceneStyle}>
+        <div style={planeStyle}></div>
+        <div ref={ballRef} style={ballStyle}></div>
+        <div style={wallStyle}></div>
+      </div>
+    </div>
   );
-}
-
+};
 
 
 
 function DynamicLand() {
   const viewofModuleNameRef = useRef();
+  const [index, setIndex] = useState(0);
+
+      useEffect(() => {
+        const interval = setInterval(() => {
+          setIndex(prevIndex => prevIndex + 1);
+        }, 1000);
+
+        return () => clearInterval(interval);
+      }, []);
+
+
 
   useEffect(() => {
     const runtime = new Runtime();
@@ -57,6 +147,9 @@ function DynamicLand() {
   return (
     <>
       <div ref={viewofModuleNameRef} />
+      <img src={`https://files.hashirama.blog/static/blog/seeing/cropped_image_${index}.png`} alt="Cropped Image" />
+      {/* <img src="https://files.hashirama.blog/static/blog/animated_gifs/Optimized%20%281%29.gif" alt="Optimized GIF" /> */}
+      {/* <img src="https://files.hashirama.blog/static/blog/animated_gifs/samus.jpeg" alt="Samus" /> */}
       <p className="text-green-100">Credit: <a href="https://observablehq.com/@observablehq/module-require-debugger">LIVE KIT = WEBRTC = GREAT</a></p>
     </>
   );
@@ -78,7 +171,7 @@ function DynamicHow() {
               <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
 
 
-                <Alanhow />
+                <AlanHow />
 
 
               </div>

views/odyssey/ObservablePreview.tsx

@@ -21,10 +21,10 @@ function ObservablePreview() {
             className="h-full rounded-[var(--radius)] shadow-2xl ring-1 ring-black/10"
           /> */}
             <iframe
-              className="h-screen w-1/3 flex-1"
+              className="h-screen w-1/2 flex-1"
               src="http://localhost:3001"
             ></iframe>
-            <div className="h-full w-1/4 flex flex-col justify-center border border-white/10">
+            {/* <div className="h-full w-1/4 flex flex-col justify-center border border-white/10">
               <h1 className="text-blue-500">Hello</h1>
               <h1 className="text-blue-500">Hello</h1>
               <h1 className="text-blue-500">Hello</h1>
@@ -34,7 +34,7 @@ function ObservablePreview() {
               <h1 className="text-blue-500">Hello</h1>
               <h1 className="text-blue-500">Hello</h1>
 
-            </div>
+            </div> */}
 
             {/* <iframe className="h-full w-full" src="https://roboticsuniversity.observablehq.cloud/robotics-odyssey/"></iframe> */}
           </div>

views/odyssey/PowerPoints.tsx

@@ -11,25 +11,30 @@ import reflectNotionHomage from '../../static/reflect_notion_homage.png';
 // import Box from './Box';
 
 function PowerPoint() {
-  return ([
+  return (<div class="flex flex-row">[
 
     <iframe
     key="youtube"
       width="560"
-      height="315"
+      height="215"
       src="https://www.youtube.com/embed/SxdOUGdseq4?si=dh0gFVybuG8m3Mgw"
       title="YouTube video player"
       frameBorder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
     ></iframe>,
   <iframe key="mechanics-design"  src="http://davidcole.me/mechanics-design.html"></iframe>,
-    <img 
+  ,
+
+]  </div>,
+
+<div>my goal = to make all code 100% open sauce like rms wanted because otherwise robots might eat the toaster oh noes.</div>,
+<img 
     key="reflect-notion-homage"
     className="rainbow-ify"
-    src={reflectNotionHomage}></img>,
+    src={reflectNotionHomage}></img>
+);
 
-]);
   // mega man x
   // current status quo - founder of way mo - hoe noe robots will eat us - people are ivevil wow
   // current status quo - raina borrows 5k - vote - sshould raina give eggnog his 5k back? she says "barf" and "i need space" --- her friends say "hes toxic ---- hes tocxic -" -- but sodiam and naicnin

views/odyssey/TeleGuidance.tsx

@@ -70,13 +70,34 @@ function Livekit() {
 
 // import notebook2 from "@roboticsuniversity/robotics-hardware";
 
-import { Tldraw } from 'tldraw'
+import { Tldraw, TldrawApp, TDDocument } from '@tldraw/tldraw';
+
 import 'tldraw/tldraw.css'
 
  function Whiteboard() {
+  const handleMount = (app: TldrawApp) => {
+
+  //app.selectTool('pencil'); 
+
+  // Hide all unnecessary controls like UI, panels, etc.
+  // app.updateSettings({
+  //   isReadonly: true, // Disable interactions that aren't drawing.
+  //   showPages: false, // Hide pages panel.
+  //   showMenu: false,  // Hide the top menu.
+  //   showStyles: false, // Hide style panel.
+  //   showZoom: false,  // Hide zoom controls.
+  //   showMultiplayerMenu: false, // Hide multiplayer options.
+  //   showStatusBar: false, // Hide the status bar.
+  // });
+};
 	return (
 		<div style={{ width: '300px', height: '300px',  inset: 0 }}>
-			<Tldraw />
+		 <Tldraw
+      autofocus // Optional: Focus on the canvas automatically.
+      disableAssets={true} // Disable assets upload.
+      showUI={false} // Hide the general UI.
+      onMount={handleMount} // Set up the app with custom behavior.
+    />
 		</div>
 	)
 }
@@ -131,8 +152,9 @@ function DiffusionVoxelPointCloud() {
   useEffect(() => {
     const runtime = new Runtime();
     runtime.module(VoxelNotebook, name => {
-      if (name === "LOGO") return new Inspector(lOGORef.current);
       if (name === "NOTCH") return new Inspector(nOTCHRef.current);
+      if (name === "LOGO") return new Inspector(lOGORef.current);
+
     });
     return () => runtime.dispose();
   }, []);
@@ -141,8 +163,9 @@ function DiffusionVoxelPointCloud() {
   return (
     <>
       <VoxelPainter />
-      <div ref={lOGORef} />
       <div ref={nOTCHRef} />
+      <div ref={lOGORef} />
+
       {/* <p>Credit: <a href="https://observablehq.com/@roboticsuniversity/voxels-diffusion-policy-3d@88">Voxels + diffusion-policy-3d by roboticsuniversity</a></p> */}
     </>
   );
@@ -152,9 +175,6 @@ function DiffusionVoxelPointCloud() {
 
 
 
-// https://files.hashirama.blog/static/blog/seeing/cropped_image_0.png
-// https://files.hashirama.blog/static/blog/animated_gifs/Optimized%20%281%29.gif
-// https://files.hashirama.blog/static/blog/animated_gifs/samus.jpeg
 function TeleGuidance() {
   const list_of_links = [
     "https://observablehq.com/embed/@roboticsuniversity/livekit?cell=*",
@@ -180,7 +200,7 @@ function TeleGuidance() {
 
             {/* <TeleGuidanceFrame link={list_of_links[2]}/> */}
           </div>
-          <div className="lg:col-span-4 flex flex-col rounded-lg bg-gray-800 overflow-hidden" style={{ maxHeight: '75vh' }}>
+          <div className="lg:col-span-4 flex flex-col rounded-lg bg-gray-800 overflow-hidden">
           <iframe width="900px" height="500px" frameborder="0"
   src="https://observablehq.com/embed/@roboticsuniversity/alanthree?cell=*"></iframe>
 
@@ -193,6 +213,12 @@ function TeleGuidance() {
 }
 
 
+// "The less confident you are, the more serious you have to act."
+//"“At every period of history, people have believed things that were just ridiculous, and believed them so strongly that you risked ostracism or even violence by saying otherwise. If our own time were any different, that would be remarkable. As far as I can tell it isn't.”"
+
+const pg = `“Let's start with a test: Do you have any opinions that you would be reluctant to express in front of a group of your peers?
+
+If the answer is no, you might want to stop and think about that. If everything you believe is something you're supposed to believe, could that possibly be a coincidence? Odds are it isn't. Odds are you just think whatever you're told.”`
 
 // import React, {useRef, useEffect} from "react";
 // import {Runtime, Inspector} from "@observablehq/runtime";

views/odyssey/TwitchPlaysPokemonPanel.tsx

@@ -23,7 +23,6 @@ function TwitchPlaysPokemonPanel(props) {
     { name: 'B2badare', vote: 'democracy' },
     { name: 'Go3sauer', vote: 'r' },
   ];
-console.log('props')
   return (
     <div className="bg-gray-800 text-white p-4 font-mono text-sm bg-slate-900">
 <script src="https://cdn.tailwindcss.com"></script>