atridad/zoomaccel
1
0
Fork 0
Code Activity Actions

More misc changes

Browse source
This commit is contained in:
Atridad Lahiji 2025-03-25 01:15:52 -06:00
parent b9cc6bc079
commit 58d74fe8c7
Signed by: atridad
SSH key fingerprint: SHA256:LGomp8Opq0jz+7kbwNcdfTcuaLRb5Nh0k5AchDDb438
4 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App.tsx
View file

@ -38,7 +38,7 @@ function App() {
const [stats, setStats] = useState<Stats>(createInitialStats()); const [stats, setStats] = useState<Stats>(createInitialStats());
// Experiment mode configuration // Experiment mode configuration
const [mode, setMode] = useState<AppMode>('freestyle'); const [mode, setMode] = useState<AppMode>('demo');
const [currentPreset, setCurrentPreset] = useState<ZoomPreset>('A'); const [currentPreset, setCurrentPreset] = useState<ZoomPreset>('A');
const [presetsCompleted, setPresetsCompleted] = useState<ZoomPreset[]>([]); const [presetsCompleted, setPresetsCompleted] = useState<ZoomPreset[]>([]);
const [targetCount, setTargetCount] = useState(0); const [targetCount, setTargetCount] = useState(0);
@ -580,13 +580,13 @@ function App() {
<div className="break-container"> <div className="break-container">
<h2>Study Complete!</h2> <h2>Study Complete!</h2>
<p>You've completed all presets in the study (100 trials). Thank you for participating!</p> <p>You've completed all presets in the study (100 trials). Thank you for participating!</p>
<p>You can now export your data or continue experimenting in freestyle mode.</p> <p>You can now export your data or continue experimenting in demo mode.</p>
<div className="button-group"> <div className="button-group">
<button onClick={() => { <button onClick={() => {
setStudyComplete(false); setStudyComplete(false);
setMode('freestyle'); setMode('demo');
}}> }}>
Switch to Freestyle Mode Switch to Demo Mode
</button> </button>
<button <button
onClick={() => exportToCSV(rounds)} onClick={() => exportToCSV(rounds)}

16
src/components/Instructions.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { AppMode } from '../types'; import { AppMode, CONSTANTS } from '../types';
import './Instructions.css'; import './Instructions.css';
interface InstructionsProps { interface InstructionsProps {
@ -13,7 +13,7 @@ export const Instructions: React.FC<InstructionsProps> = ({
onClose, onClose,
onModeSelect onModeSelect
}) => { }) => {
const [selectedMode, setSelectedMode] = useState<AppMode>('freestyle'); const [selectedMode, setSelectedMode] = useState<AppMode>('demo');
const handleStart = () => { const handleStart = () => {
onModeSelect(selectedMode); onModeSelect(selectedMode);
@ -41,11 +41,11 @@ export const Instructions: React.FC<InstructionsProps> = ({
<input <input
type="radio" type="radio"
name="initial-mode" name="initial-mode"
value="freestyle" value="demo"
checked={selectedMode === 'freestyle'} checked={selectedMode === 'demo'}
onChange={() => setSelectedMode('freestyle')} onChange={() => setSelectedMode('demo')}
/> />
<span className="mode-label">Freestyle Mode</span> <span className="mode-label">Demo Mode</span>
<p className="mode-description">Test and explore different zoom acceleration settings at your own pace.</p> <p className="mode-description">Test and explore different zoom acceleration settings at your own pace.</p>
</label> </label>
<label> <label>
@ -57,7 +57,7 @@ export const Instructions: React.FC<InstructionsProps> = ({
onChange={() => setSelectedMode('study')} onChange={() => setSelectedMode('study')}
/> />
<span className="mode-label">Study Mode</span> <span className="mode-label">Study Mode</span>
<p className="mode-description">Complete 25 targets with each preset curve (A, B, C, D) for structured data collection.</p> <p className="mode-description">Complete {CONSTANTS.STUDY_TARGETS_PER_PRESET} trials with each preset curve (A, B, C, D) for structured data collection.</p>
</label> </label>
</div> </div>
</div> </div>
@ -96,7 +96,7 @@ export const Instructions: React.FC<InstructionsProps> = ({
<div className="instructions-footer"> <div className="instructions-footer">
<button className="got-it-button" onClick={handleStart}> <button className="got-it-button" onClick={handleStart}>
Start {selectedMode === 'freestyle' ? 'Freestyle Mode' : 'Study Mode'} Start {selectedMode === 'demo' ? 'Demo Mode' : 'Study Mode'}
</button> </button>
</div> </div>
</div> </div>

8
src/components/Settings.tsx
View file

@ -98,11 +98,11 @@ export const Settings: React.FC<SettingsProps> = ({
<input <input
type="radio" type="radio"
name="mode" name="mode"
value="freestyle" value="demo"
checked={mode === 'freestyle'} checked={mode === 'demo'}
onChange={() => handleModeChange('freestyle')} onChange={() => handleModeChange('demo')}
/> />
<span>Freestyle Mode</span> <span>Demo Mode</span>
</label> </label>
<label> <label>
<input <input

4
src/types.ts
View file

@ -22,7 +22,7 @@ export interface ViewportOffset {
} }
export type ZoomPreset = 'A' | 'B' | 'C' | 'D'; export type ZoomPreset = 'A' | 'B' | 'C' | 'D';
export type AppMode = 'freestyle' | 'study'; export type AppMode = 'demo' | 'study';
export interface AccelerationSettings { export interface AccelerationSettings {
enabled: boolean; enabled: boolean;
@ -53,7 +53,7 @@ export const CONSTANTS = {
}, },
MOUSE_WHEEL_SAMPLES: 5, MOUSE_WHEEL_SAMPLES: 5,
NUM_CURVE_POINTS: 5, NUM_CURVE_POINTS: 5,
STUDY_TARGETS_PER_PRESET: 25, STUDY_TARGETS_PER_PRESET: 1,
PRESETS: { PRESETS: {
A: [1, 2, 3, 4, 5], // Linear increase A: [1, 2, 3, 4, 5], // Linear increase
B: [1, 1.5, 2.5, 4, 6], // Slow start, fast end B: [1, 1.5, 2.5, 4, 6], // Slow start, fast end