From fdaf93fce87f878cd0aabb369919fc9c2c93c4aa Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Sun, 29 Dec 2024 13:12:45 +0100
Subject: [PATCH] Better names & defaults

---
 .../src/components/ControlsSidebar.tsx        | 43 ++++++-------------
 apps/phoure-demo/src/controlAtoms.ts          | 14 +++---
 2 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/apps/phoure-demo/src/components/ControlsSidebar.tsx b/apps/phoure-demo/src/components/ControlsSidebar.tsx
index ca449a9..94fe612 100644
--- a/apps/phoure-demo/src/components/ControlsSidebar.tsx
+++ b/apps/phoure-demo/src/components/ControlsSidebar.tsx
@@ -1,12 +1,6 @@
 import type { CheckedState } from '@radix-ui/react-checkbox';
 import type { SliderProps } from '@radix-ui/react-slider';
-import {
-  type SetStateAction,
-  type WritableAtom,
-  useAtom,
-  useSetAtom,
-} from 'jotai';
-import type { RESET } from 'jotai/utils';
+import { type WritableAtom, useAtom, useSetAtom } from 'jotai';
 import { ChevronDown } from 'lucide-react';
 import { useCallback, useId } from 'react';
 
@@ -61,11 +55,7 @@ function ControlLabel(props: { htmlFor: string; children: string }) {
 function SliderControl(
   props: {
     label: string;
-    valueAtom: WritableAtom<
-      number,
-      [SetStateAction<number | typeof RESET>],
-      void
-    >;
+    valueAtom: WritableAtom<number, [number], void>;
   } & SliderProps,
 ) {
   const { label, valueAtom, ...rest } = props;
@@ -103,12 +93,7 @@ function SliderControl(
 
 function CheckboxControl(props: {
   label: string;
-  valueAtom: WritableAtom<
-    boolean,
-    // biome-ignore lint/suspicious/noExplicitAny: <does not really matter>
-    [boolean | any],
-    void
-  >;
+  valueAtom: WritableAtom<boolean, [boolean], void>;
 }) {
   const { label, valueAtom } = props;
 
@@ -123,7 +108,7 @@ function CheckboxControl(props: {
   );
 
   return (
-    <div className="px-4 my-2 flex items-center justify-between">
+    <div className="px-4 mt-4 flex items-center justify-between">
       <ControlLabel htmlFor={id}>{label}</ControlLabel>
       <Checkbox checked={checked} onCheckedChange={onCheckedChange} id="id" />
     </div>
@@ -228,7 +213,7 @@ export function ControlsSidebar() {
           <DisplayModeControl />
           <TargetResolutionControl />
         </ControlGroup>
-        <ControlGroup label="Time controls">
+        <ControlGroup label="Time">
           <CheckboxControl
             label="Fixed timestep"
             valueAtom={fixedTimestepEnabledAtom}
@@ -241,33 +226,33 @@ export function ControlsSidebar() {
             max={2}
           />
         </ControlGroup>
-        <ControlGroup label="Camera controls">
-          <SliderControl
-            label="Camera orientation"
-            valueAtom={cameraOrientationControlAtom}
-            max={360}
-          />
+        <ControlGroup label="Camera">
           <SliderControl
-            label="Camera Y"
+            label="Up/down position"
             valueAtom={cameraYControlAtom}
             min={-0.2}
             step={0.01}
             max={1}
           />
           <SliderControl
-            label="Camera Zoom"
+            label="Distance from origin"
             valueAtom={cameraZoomControlAtom}
             min={1}
             step={0.01}
             max={4}
           />
           <SliderControl
-            label="Camera FOV"
+            label="Field of view"
             valueAtom={cameraFovControlAtom}
             min={20}
             step={1}
             max={170}
           />
+          <SliderControl
+            label="Yaw angle"
+            valueAtom={cameraOrientationControlAtom}
+            max={360}
+          />
           <CheckboxControl
             label="Auto rotate"
             valueAtom={autoRotateControlAtom}
diff --git a/apps/phoure-demo/src/controlAtoms.ts b/apps/phoure-demo/src/controlAtoms.ts
index a98bd6b..113fc5d 100644
--- a/apps/phoure-demo/src/controlAtoms.ts
+++ b/apps/phoure-demo/src/controlAtoms.ts
@@ -18,20 +18,20 @@ export const measurePerformanceAtom = atomWithUrl('perf', false);
 // Camera controls
 // -------------------
 
-export const cameraOrientationControlAtom = atomWithUrl('cyaw', 0);
+export const cameraOrientationControlAtom = atomWithUrl('cyaw', 225);
 export const cameraYControlAtom = atomWithUrl('cy', 0);
-export const cameraZoomControlAtom = atomWithUrl('cd', 2);
-export const cameraFovControlAtom = atomWithUrl('fov', 90);
+export const cameraZoomControlAtom = atomWithUrl('cd', 1.5);
+export const cameraFovControlAtom = atomWithUrl('fov', 60);
 
 export const autoCameraOrientation = atom(0);
 
 export const autoRotateSpeedAtom = atomWithUrl(
   'crot',
-  0.5, // degrees per second
+  10, // degrees per second
 );
 
 export const autoRotateControlAtom = (() => {
-  const innerAtom = atomWithUrl('cauto', true);
+  const innerAtom = atomWithUrl('cauto', false);
 
   return atom(
     (get) => get(innerAtom),
@@ -49,7 +49,7 @@ export const autoRotateControlAtom = (() => {
 // Rendering controls
 // -------------------
 
-export const targetResolutionAtom = atomWithUrl('res', 256);
+export const targetResolutionAtom = atomWithUrl('res', 512 /* pixels */);
 
 export const displayModeAtom = atomWithUrl<DisplayMode>('mode', 'upscaled');
 
@@ -57,5 +57,5 @@ export const displayModeAtom = atomWithUrl<DisplayMode>('mode', 'upscaled');
 // Time controls
 // -------------------
 
-export const fixedTimestepEnabledAtom = atomWithUrl('tfix', true);
+export const fixedTimestepEnabledAtom = atomWithUrl('tfix', false);
 export const fixedTimestepAtom = atomWithUrl('tstep', 0.3 /* seconds */);