Add Home link to example components

Author: lukehollis

client/src/examples/Ball3D.jsx

@@ -8,6 +8,7 @@ import 'katex/dist/katex.min.css';
 import { BlockMath } from 'react-katex';
 import { Text, Button } from '@geist-ui/core';
 import ButtonForkOnGithub from '../components/ButtonForkOnGithub.jsx';
+import { Link } from 'react-router-dom';
 
 const ROWS = 3;
 const COLS = 4;
@@ -44,6 +45,7 @@ export default function Ball3DExample() {
   const intervalRef = useRef(null);
 
   const [chartState, setChartState] = useState({ labels: [], rewards: [], losses: [] });
+  const [homeHover, setHomeHover] = useState(false);
 
   const envRef = useRef({ rotX: 0, rotZ: 0, ballX: 0, ballZ: 0, velX: 0, velZ: 0 });
 
@@ -209,6 +211,23 @@ export default function Ball3DExample() {
 
       {/* UI overlay */}
       <div style={{ position: 'absolute', top: 10, left: 10, color: '#fff' }}>
+
+        {/* Home link */}
+        <Link
+          to="/"
+          style={{
+            fontFamily: 'monospace',
+            color: '#fff',
+            textDecoration: homeHover ? 'none' : 'underline',
+            marginBottom: '4px',
+            display: 'inline-block',
+          }}
+          onMouseEnter={() => setHomeHover(true)}
+          onMouseLeave={() => setHomeHover(false)}
+        >
+          Home
+        </Link>
+
         <Text h1 style={{ margin: '0 0 12px 0', color: '#fff' }}>
           Ball 3D Example
         </Text>

client/src/examples/Basic.jsx

@@ -15,6 +15,7 @@ import 'katex/dist/katex.min.css';
 import { BlockMath } from 'react-katex';
 import { Text, Button } from '@geist-ui/core';
 import ButtonForkOnGithub from '../components/ButtonForkOnGithub.jsx';
+import { Link } from 'react-router-dom';
 
 ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale);
 
@@ -59,6 +60,9 @@ export default function BasicExample() {
 
   const [chartState, setChartState] = useState({ labels: [], rewards: [], losses: [] });
 
+  // Add hover state for Home link
+  const [homeHover, setHomeHover] = useState(false);
+
   const step = useCallback((direction) => {
     setPos((prev) => {
       const next = Math.min(MAX_POS, Math.max(MIN_POS, prev + direction));
@@ -264,6 +268,21 @@ export default function BasicExample() {
           textShadow: '0 0 4px #000',
         }}
       >
+        {/* Home link */}
+        <Link
+          to="/"
+          style={{
+            fontFamily: 'monospace',
+            color: '#fff',
+            textDecoration: homeHover ? 'none' : 'underline',
+            marginBottom: '4px',
+            display: 'inline-block',
+          }}
+          onMouseEnter={() => setHomeHover(true)}
+          onMouseLeave={() => setHomeHover(false)}
+        >
+          Home
+        </Link>
         <Text h1 style={{ margin: '0 0 12px 0', color: '#fff' }}>
           Basic Example - 1-D Move-To-Goal
         </Text>

client/src/examples/GridWorld.jsx

@@ -8,6 +8,7 @@ import { BlockMath } from 'react-katex';
 import DebugConsole from '../components/DebugConsole.jsx';
 import ChartPanel from '../components/ChartPanel.jsx';
 import ButtonForkOnGithub from '../components/ButtonForkOnGithub.jsx';
+import { Link } from 'react-router-dom';
 
 const WS_URL = `${config.WS_BASE_URL}/ws/gridworld`;
 const CELL_SIZE = 1;
@@ -55,6 +56,7 @@ export default function GridWorldExample() {
   const [trained, setTrained] = useState(false);
   const [modelInfo, setModelInfo] = useState(null);
   const [chartState, setChartState] = useState({ labels: [], rewards: [], losses: [] });
+  const [homeHover, setHomeHover] = useState(false);
   const wsRef = useRef(null);
   const intervalRef = useRef(null);
 
@@ -179,6 +181,21 @@ export default function GridWorldExample() {
 
       {/* Overlay UI */}
       <div style={{ position: 'absolute', top: 10, left: 10, color: '#fff' }}>
+        {/* Home link */}
+        <Link
+          to="/"
+          style={{
+            fontFamily: 'monospace',
+            color: '#fff',
+            textDecoration: homeHover ? 'none' : 'underline',
+            marginBottom: '4px',
+            display: 'inline-block',
+          }}
+          onMouseEnter={() => setHomeHover(true)}
+          onMouseLeave={() => setHomeHover(false)}
+        >
+          Home
+        </Link>
         <Text h1 style={{ margin: '0 0 12px 0', color: '#fff' }}>
           GridWorld Example
         </Text>