Authentication reaches zero -- sign-in, bootstrap, forgot and reset password. These are the first words a new account reads, which is why the brief ranked them above the larger screens. DavAppPasswords had the third toLocaleDateString(undefined, ...) in the shell; it now uses useFormat().date like the other two. DebugPanel's three labels are keyed too. Worth knowing rather than acting on: that panel is rendered behind showDebug, which Background.tsx hardcodes to false, so it never appears. Keyed rather than deleted because removing it is not my call.
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { useTranslation } from '@/lib/i18n';
|
|
|
|
type DebugPanelProps = {
|
|
fullControlMode: boolean;
|
|
cameraInfo: {
|
|
cameraPosition: number[];
|
|
target: number[];
|
|
zoom: number;
|
|
};
|
|
modelInfo: {
|
|
position: number[];
|
|
rotation: number[];
|
|
scale: number;
|
|
};
|
|
};
|
|
|
|
export function DebugPanel({ fullControlMode, cameraInfo, modelInfo }: DebugPanelProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="fixed top-4 left-4 bg-black/80 text-white p-4 rounded text-xs font-mono space-y-2 z-[100]">
|
|
<div className="font-bold text-blue-400">{t('auth.debug.controls')}</div>
|
|
<div className={fullControlMode ? 'text-green-300' : 'text-yellow-300'}>
|
|
Mode: {fullControlMode ? 'FULL CONTROL' : 'ROTATION ONLY'}
|
|
</div>
|
|
<div>* Left-click/Touch + drag: Rotate</div>
|
|
{fullControlMode && (
|
|
<>
|
|
<div>* Right-click + drag: Pan</div>
|
|
<div>* Scroll: Zoom</div>
|
|
</>
|
|
)}
|
|
<div>* Ctrl+Alt+Enter: Toggle full control</div>
|
|
<div>* Ctrl+Alt+D: Toggle debug panel</div>
|
|
|
|
<div className="font-bold text-green-400 pt-2">{t('auth.debug.camera')}</div>
|
|
<div>Position: [{cameraInfo.cameraPosition.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Target: [{cameraInfo.target.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Zoom: {cameraInfo.zoom.toFixed(2)}</div>
|
|
|
|
<div className="font-bold text-yellow-400 pt-2">{t('auth.debug.model')}</div>
|
|
<div>Position: [{modelInfo.position.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Rotation: [{modelInfo.rotation.map((v) => v.toFixed(2)).join(', ')}]</div>
|
|
<div>Scale: {modelInfo.scale.toFixed(2)}</div>
|
|
</div>
|
|
);
|
|
}
|