feat: Add Joy-Con controller support with dedicated page and hooks

Author: 02loveslollipop

visual_controller/frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { TopNav } from "./layout/TopNav";
 import { LegacyControllerPage } from "./pages/LegacyController";
 import { NtControllerPage } from "./pages/NtController";
+import { JoyConControllerPage } from "./pages/JoyConController";
 import { StatusPage } from "./pages/Status";
 import { defaultTankId } from "./utils/constants";
 
@@ -35,6 +36,7 @@ export default function App() {
             <Route path="/" element={<Navigate to="/legacy" replace />} />
             <Route path="/legacy" element={<LegacyControllerPage />} />
             <Route path="/nt" element={<NtControllerPage />} />
+            <Route path="/joycon" element={<JoyConControllerPage />} />
             <Route path="/status" element={<StatusPage />} />
           </Routes>
         </main>

visual_controller/frontend/src/hooks/useJoyConGamepad.ts

@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from "react";
+
+const JOYCON_REGEX = /(joy[-\s]?con|nintendo|pro controller)/i;
+
+export interface JoyConSnapshot {
+  supported: boolean;
+  connected: boolean;
+  id?: string;
+  axes: number[];
+  buttons: { pressed: boolean; touched: boolean; value: number }[];
+  timestamp: number;
+}
+
+const initialSupported = typeof window !== "undefined" && "getGamepads" in navigator;
+
+const initialState: JoyConSnapshot = {
+  supported: initialSupported,
+  connected: false,
+  id: undefined,
+  axes: [],
+  buttons: [],
+  timestamp: 0
+};
+
+/**
+ * Polls the Gamepad API for any connected Nintendo Joy-Con or Switch Pro controller
+ * and exposes a normalized snapshot. The hook only re-renders ~12 times per second
+ * to avoid thrashing the UI.
+ */
+export function useJoyConGamepad(pollIntervalMs = 80): JoyConSnapshot {
+  const [state, setState] = useState<JoyConSnapshot>(initialState);
+
+  const supported = useMemo(
+    () => typeof window !== "undefined" && typeof navigator !== "undefined" && "getGamepads" in navigator,
+    []
+  );
+
+  useEffect(() => {
+    if (!supported) {
+      setState((prev) => ({ ...prev, supported: false, connected: false }));
+      return;
+    }
+
+    let cancelled = false;
+    let timer: number | undefined;
+
+    const poll = () => {
+      if (cancelled) {
+        return;
+      }
+      const pads = navigator.getGamepads ? Array.from(navigator.getGamepads()) : [];
+      const preferred =
+        pads.find((pad) => pad && /joy[-\s]?con \(l\/r\)/i.test(pad.id)) ??
+        pads.find((pad) => pad && /pro controller/i.test(pad.id)) ??
+        pads.find((pad) => pad && JOYCON_REGEX.test(pad.id));
+
+      if (preferred) {
+        setState({
+          supported: true,
+          connected: true,
+          id: preferred.id,
+          timestamp: preferred.timestamp ?? performance.now(),
+          axes: preferred.axes ? [...preferred.axes] : [],
+          buttons: preferred.buttons.map((button) => ({
+            pressed: button.pressed,
+            touched: button.touched,
+            value: button.value
+          }))
+        });
+      } else {
+        setState((prev) => ({
+          supported: true,
+          connected: false,
+          id: undefined,
+          axes: [],
+          buttons: [],
+          timestamp: performance.now()
+        }));
+      }
+
+      timer = window.setTimeout(poll, pollIntervalMs);
+    };
+
+    timer = window.setTimeout(poll, pollIntervalMs);
+
+    const handleConnected = () => poll();
+    const handleDisconnected = () => poll();
+
+    window.addEventListener("gamepadconnected", handleConnected);
+    window.addEventListener("gamepaddisconnected", handleDisconnected);
+
+    return () => {
+      cancelled = true;
+      if (timer) {
+        window.clearTimeout(timer);
+      }
+      window.removeEventListener("gamepadconnected", handleConnected);
+      window.removeEventListener("gamepaddisconnected", handleDisconnected);
+    };
+  }, [supported, pollIntervalMs]);
+
+  return state;
+}
+

visual_controller/frontend/src/layout/TopNav.tsx

@@ -18,6 +18,9 @@ export function TopNav() {
         <NavLink to="/nt" className={({ isActive }) => (isActive ? "active" : "")}>
           NT Controller
         </NavLink>
+        <NavLink to="/joycon" className={({ isActive }) => (isActive ? "active" : "")}>
+          Joy-Con Controller
+        </NavLink>
         <NavLink to="/status" className={({ isActive }) => (isActive ? "active" : "")}>
           Tank Status
         </NavLink>

visual_controller/frontend/src/pages/JoyConController.css

@@ -0,0 +1,89 @@
+.joycon-layout {
+  display: grid;
+  grid-template-columns: minmax(320px, 1.3fr) minmax(320px, 1fr);
+  gap: 1.5rem;
+  min-height: 70vh;
+  position: relative;
+}
+
+.joycon-left,
+.joycon-right {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.joycon-map-card {
+  flex: 1;
+  min-height: 320px;
+}
+
+.joycon-telemetry pre {
+  max-height: 220px;
+  overflow: auto;
+  margin: 0.75rem 0 0;
+}
+
+.joycon-radar {
+  flex: 1;
+  min-height: 320px;
+}
+
+.joycon-status {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.joycon-status-grid {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.95rem;
+  color: rgba(226, 232, 240, 0.85);
+}
+
+.joycon-hints ul {
+  margin: 0.6rem 0 0;
+  padding-left: 1.2rem;
+  display: grid;
+  gap: 0.3rem;
+  font-size: 0.95rem;
+}
+
+.joycon-hints small {
+  display: block;
+  margin-top: 0.75rem;
+  color: rgba(148, 163, 184, 0.85);
+}
+
+.joycon-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(2, 6, 23, 0.75);
+  backdrop-filter: blur(14px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1500;
+}
+
+.joycon-modal {
+  max-width: 580px;
+  width: min(90vw, 580px);
+  padding: 2rem;
+  border: 1px solid rgba(59, 130, 246, 0.4);
+}
+
+.joycon-modal ol {
+  margin: 0 0 1rem;
+  padding-left: 1.25rem;
+  display: grid;
+  gap: 0.4rem;
+}
+
+@media (max-width: 1100px) {
+  .joycon-layout {
+    grid-template-columns: 1fr;
+  }
+}
+