add toggle for the debug mode

package-lock.json

@@ -18,11 +18,13 @@
         "@radix-ui/react-dialog": "^1.0.4",
         "@radix-ui/react-dropdown-menu": "^2.0.5",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-menubar": "^1.0.3",
         "@radix-ui/react-popover": "^1.0.6",
         "@radix-ui/react-select": "^1.2.2",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
         "@silevis/reactgrid": "^4.0.5",
         "@tanstack/react-query": "^4.30.0",
         "@tanstack/react-table": "^8.9.3",
@@ -1048,6 +1050,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.5.tgz",
@@ -1374,6 +1399,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",

package.json

@@ -19,11 +19,13 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@silevis/reactgrid": "^4.0.5",
     "@tanstack/react-query": "^4.30.0",
     "@tanstack/react-table": "^8.9.3",

src/app/main.tsx

@@ -13,9 +13,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
 
 import { newRender, getRender } from "./render"
-
 import { RenderedScene } from "./types"
 import { Game, GameType } from "./games/types"
 import { defaultGame, games, getGame } from "./games"
@@ -47,7 +48,8 @@ export default function Main() {
   const requestedEngine = (searchParams.get('engine') as EngineType) || defaultEngine
   const [engine, setEngine] = useState<Engine>(getEngine(requestedEngine))
 
-  const debug = (searchParams.get('debug') === "true")
+  const requestedDebug = (searchParams.get('debug') === "true")
+  const [debug, setDebug] = useState<boolean>(requestedDebug)
 
   const [situation, setSituation] = useState("")
 
@@ -190,6 +192,22 @@ export default function Main() {
 
   const clickables = Array.from(new Set(rendered.segments.map(s => s.label)).values())
 
+  const handleToggleDebug = (isToggledOn: boolean) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()))
+    current.set("debug", `${isToggledOn}`)
+    const search = current.toString()
+    const query = search ? `?${search}` : ""
+
+    // for some reason, this doesn't work?!
+    router.replace(`${pathname}${query}`, { })
+    
+    // workaround.. but it is strange that router.replace doesn't work..
+    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
+    window.history.pushState({path: newurl}, '', newurl)
+
+    setDebug(isToggledOn)
+  }
+
   const handleSelectGame = (newGameType: GameType) => {
     gameRef.current = newGameType
     setGame(getGame(newGameType))
@@ -233,11 +251,11 @@ export default function Main() {
     router.replace(`${pathname}${query}`, { })
     
     // workaround.. but it is strange that router.replace doesn't work..
-    // let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
-    // window.history.pushState({path: newurl}, '', newurl)
+    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
+    window.history.pushState({path: newurl}, '', newurl)
 
     // actually we don't handle partial reload very well, so let's reload the whole page
-    window.location = `${window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()}` as any
+    // window.location = `${window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()}` as any
   }
 
   // determine when to show the spinner
@@ -249,7 +267,7 @@ export default function Main() {
     >
       <div className="flex flex-row w-full justify-between items-center px-2 py-2 border-b-1 border-gray-50 dark:border-gray-50 bg-gray-800 dark:bg-gray-800">
         <div className="flex flex-row items-center space-x-3 font-mono">
-          <label className="flex text-sm">Select a story:</label>
+          <Label className="flex text-sm">Select a story:</Label>
           <Select
             defaultValue={gameRef.current}
             onValueChange={(value) => { handleSelectGame(value as GameType) }}>
@@ -258,13 +276,21 @@ export default function Main() {
             </SelectTrigger>
             <SelectContent>
               {Object.entries(games).map(([key, game]) =>
-              <SelectItem key={key} value={key}>{game.title}</SelectItem>
+                <SelectItem key={key} value={key}>{game.title}</SelectItem>
               )}
             </SelectContent>
           </Select>
         </div>
         <div className="flex flex-row items-center space-x-3 font-mono">
-          <label className="flex text-sm">Rendering engine:</label>
+          <Switch
+             checked={debug}
+             onCheckedChange={handleToggleDebug}
+             disabled={isLoading}
+           />
+           <Label>Debug</Label>
+        </div>
+        <div className="flex flex-row items-center space-x-3 font-mono">
+          <Label className="flex text-sm">Rendering engine:</Label>
           <Select
             defaultValue={engine.type}
             onValueChange={(value) => { handleSelectEngine(value as EngineType) }}>

src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-zinc-900 data-[state=unchecked]:bg-zinc-200 dark:focus-visible:ring-zinc-800 dark:focus-visible:ring-offset-zinc-950 dark:data-[state=checked]:bg-zinc-50 dark:data-[state=unchecked]:bg-zinc-800",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-zinc-950"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }