simplify

views/odyssey/Box.tsx

@@ -389,12 +389,20 @@ function Hafu() {
 }
 // https://www.youtube.com/watch?v=lX6JcybgDFo
 function BotNDolly() {
-
-    return <div className={`bg-blue-100 w-${size} h-${size}`}>
-<iframe width="560" height="315" src="https://www.youtube.com/embed/lX6JcybgDFo?si=MGWz9S046-TL9I1W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-
-
-    </div>
+    return (
+        <div className={`bg-blue-100 w-${size} h-${size}`}>
+            <iframe
+                width="560"
+                height="315"
+                src="https://www.youtube.com/embed/lX6JcybgDFo?si=MGWz9S046-TL9I1W"
+                title="YouTube video player"
+                frameBorder="0" // Corrected to camelCase
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerPolicy="strict-origin-when-cross-origin" // Corrected to camelCase
+                allowFullScreen // Corrected to camelCase
+            ></iframe>
+        </div>
+    );
 }
 
 function _() {
@@ -407,10 +415,9 @@ function _() {
 
 
    const elements = d3.shuffle([
-
         // <PeriodicTable />,
         // <Hafu />,
-        <BotNDolly />,
+        <BotNDolly key="botndolly" />,
         // <_ />,
         // <ReadmeInfo />
     ])

views/odyssey/PowerPoints.tsx

@@ -25,7 +25,7 @@ function PowerPoint() {
     ></iframe>,
   <iframe key="mechanics-design"  src="http://davidcole.me/mechanics-design.html"></iframe>,
     <img 
-
+    key="reflect-notion-homage"
     className="rainbow-ify"
     src={reflectNotionHomage}></img>,
 

views/odyssey/TeleGuidance.tsx

@@ -3,7 +3,7 @@ import TwitchPlaysPokemonPanel from "./TwitchPlaysPokemonPanel";
 import { useRef, useEffect, useState } from "react";
 //import { Runtime, Inspector } from  "@observablehq/runtime"
 //import notebook1 from "@roboticsuniversity/livekit";
-
+// btw i publish my rewind.ai, reflect.app, and more daialy to a public folder 4 fun - like carmack.plna - hope to be like him in 25 years like jiro dreams of sushi guy making his first souffle 
 import {
   Runtime,
   Inspector,
@@ -180,10 +180,9 @@ 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: '50vh' }}>
-          <iframe width="100%" height="105" 
-  src="https://observablehq.com/embed/@roboticsuniversity/alanthree@327?cells=pointerAndObjects"></iframe>
-
+          <div className="lg:col-span-4 flex flex-col rounded-lg bg-gray-800 overflow-hidden" style={{ maxHeight: '75vh' }}>
+          <iframe width="900px" height="500px" frameborder="0"
+  src="https://observablehq.com/embed/@roboticsuniversity/alanthree?cell=*"></iframe>
 
             <DiffusionVoxelPointCloud />
           </div>
@@ -193,6 +192,33 @@ function TeleGuidance() {
   );
 }
 
+
+
+// import React, {useRef, useEffect} from "react";
+// import {Runtime, Inspector} from "@observablehq/runtime";
+//import alanthree from "@roboticsuniversity/alanthree";
+//import alanthree from "https://api.observablehq.com/@roboticsuniversity/alanthree.js?v= ";
+import alanthree from "https://api.observablehq.com/@roboticsuniversity/alanthree.js?v=4";
+
+function Alanthree() {
+  const ref = useRef();
+
+  useEffect(() => {
+    const runtime = new Runtime();
+    runtime.module(alanthree, Inspector.into(ref.current));
+    return () => runtime.dispose();
+  }, []);
+
+  return (
+    <>
+      <div ref={ref} />
+      <p>Credit: <a href="https://observablehq.com/@roboticsuniversity/alanthree">Three.js by roboticsuniversity</a></p>
+    </>
+  );
+}
+
+//export default Alanthree;
+
 //https://github.com/Erkaman/regl-cnn
 // blip - see conosole - import 
 export default TeleGuidance;

views/odyssey/robotics-odyssey.tsx

@@ -25,7 +25,7 @@ function RoboticsOdyssey() {
             </div>
             <div className="border border-white/10">
 
-              {/* <ObservablePreview></ObservablePreview>{" "} */}
+              <ObservablePreview></ObservablePreview>{" "}