Moved to a Vite and React project

2025-02-13 20:33:02 -06:00 · 2025-02-13 20:33:02 -06:00 · 3ffe3de5c4
commit 3ffe3de5c4
parent c60c9ed815
28 changed files with 3222 additions and 279 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -1,4 +1,54 @@
-# Zoom Accel - A configurable
+# ZoomAccel

-## Features
- Customizable "EQ style" zoom scaling
+A tool for studying zoom acceleration curves in pointing tasks. Built with React + TypeScript + Vite.
+
+## Overview
+
+ZoomAccel presents users with a series of target acquisition tasks in a zoomable space. Users can enable/disable zoom acceleration and customize the acceleration curve to study its effects on pointing performance.
+
+### Features
+
+- Target acquisition tasks in a large virtual space
+- Configurable zoom acceleration curves
+- Real-time performance stats
+- Trial history with detailed metrics
+- CSV export for data analysis
+- State persistence between sessions
+
+## Getting Started
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Build for production
+pnpm build
+```
+
+## Usage
+
+1. Click the green target circles to complete trials
+2. Use Ctrl/Cmd + Scroll to zoom in/out
+3. Click and drag to pan the view
+4. Adjust acceleration curve in Settings ⚙️
+5. View performance history in History 📊
+6. Export data as CSV for analysis 📥
+
+## Data Collection
+
+Each trial records:
+- Time taken (ms)
+- Number of misclicks
+- Acceleration status
+- Current acceleration curve values
+- Timestamp
+
+## Development
+
+Built with:
+- React
+- TypeScript
+- Vite
--- a/background.js
+++ b/background.js
@ -1,57 +0,0 @@
-// Dynamic Icon generator
-function createIcon(text, size = 16) {
-  const canvas = new OffscreenCanvas(size, size);
-  const ctx = canvas.getContext("2d");
-
-  // Wipe canvas
-  ctx.clearRect(0, 0, size, size);
-
-  // Background
-  ctx.fillStyle = "#4285F4"; // Google Blue
-  ctx.fillRect(0, 0, size, size);
-
-  // Text
-  ctx.fillStyle = "white";
-  ctx.font = `bold ${Math.floor(size * 0.5625)}px Arial`;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  ctx.fillText(text, size / 2, size / 2);
-
-  return ctx.getImageData(0, 0, size, size);
-}
-
-// Update the extension icon
-function updateExtensionIcon(zoomLevel, accelerationMultiplier) {
-  const zoomText = zoomLevel.toFixed(2);
-  const accelText = accelerationMultiplier.toFixed(2);
-
-  // Create icons of different sizes
-  const icon16 = createIcon(zoomText, 16);
-  const icon32 = createIcon(zoomText, 32);
-  const icon48 = createIcon(zoomText, 48);
-  const icon128 = createIcon(zoomText, 128);
-
-  // Set the icon
-  chrome.action.setIcon({
-    imageData: {
-      16: icon16,
-      32: icon32,
-      48: icon48,
-      128: icon128,
-    },
-  });
-
-  // Update badge with multiplier
-  chrome.action.setBadgeText({ text: accelText + "x" });
-  chrome.action.setBadgeBackgroundColor({ color: "#34A853" }); // Google Green
-}
-
-// Listen for messages
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  if (request.action === "updateZoomInfo") {
-    updateExtensionIcon(request.zoomLevel, request.accelerationMultiplier);
-  }
-});
-
-// Set icon
-updateExtensionIcon(1, 1);
--- a/content.js
+++ b/content.js
@ -1,93 +0,0 @@
-let zoomLevel = 1;
-let lastGestureTime = 0;
-let lastGestureScale = 1;
-const minZoom = 0.1;
-const maxZoom = 5;
-let accelerationCurve = [1, 1, 1, 1, 1];
-
-function interpolateAcceleration(speed) {
-  const index = Math.min(
-    Math.floor((speed * (accelerationCurve.length - 1)) / 2),
-    accelerationCurve.length - 2,
-  );
-  const t = ((speed * (accelerationCurve.length - 1)) / 2) % 1;
-  return accelerationCurve[index] * (1 - t) + accelerationCurve[index + 1] * t;
-}
-
-function applyZoom(delta, speed) {
-  const accelerationMultiplier = interpolateAcceleration(speed);
-  const zoomChange = delta * accelerationMultiplier;
-  zoomLevel *= 1 + zoomChange;
-  zoomLevel = Math.min(Math.max(zoomLevel, minZoom), maxZoom);
-
-  document.body.style.transform = `scale(${zoomLevel})`;
-  document.body.style.transformOrigin = "center top";
-
-  // Update Icon via Messages
-  chrome.runtime.sendMessage({
-    action: "updateZoomInfo",
-    zoomLevel: zoomLevel,
-    accelerationMultiplier: accelerationMultiplier,
-  });
-}
-
-window.addEventListener(
-  "wheel",
-  (event) => {
-    if (event.ctrlKey || event.metaKey) {
-      event.preventDefault();
-      const currentTime = performance.now();
-      const timeDiff = (currentTime - lastGestureTime) / 1000;
-      const delta = event.deltaY * -0.001;
-      const speed = Math.abs(delta / timeDiff);
-      applyZoom(delta, speed);
-      lastGestureTime = currentTime;
-    }
-  },
-  { passive: false },
-);
-
-window.addEventListener(
-  "gesturestart",
-  (event) => {
-    event.preventDefault();
-    lastGestureScale = 1;
-    lastGestureTime = performance.now();
-  },
-  { passive: false },
-);
-
-window.addEventListener(
-  "gesturechange",
-  (event) => {
-    event.preventDefault();
-    const currentTime = performance.now();
-    const timeDiff = (currentTime - lastGestureTime) / 1000;
-    const delta = event.scale - lastGestureScale;
-    const speed = Math.abs(delta / timeDiff);
-    applyZoom(delta, speed);
-    lastGestureScale = event.scale;
-    lastGestureTime = currentTime;
-  },
-  { passive: false },
-);
-
-window.addEventListener(
-  "gestureend",
-  (event) => {
-    event.preventDefault();
-  },
-  { passive: false },
-);
-
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  if (request.action === "updateSettings") {
-    accelerationCurve = request.settings;
-  }
-});
-
-chrome.storage.sync.get("accelerationCurve", (data) => {
-  if (data.accelerationCurve) {
-    accelerationCurve = data.accelerationCurve;
-  }
-});
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>✨ ZoomAccel ✨</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/manifest.json
+++ b/manifest.json
@ -1,20 +0,0 @@
-{
-  "manifest_version": 3,
-  "name": "Zoom Accelerator",
-  "version": "1.0",
-  "description": "Adds customizable smooth zoom acceleration to Chrome",
-  "permissions": ["activeTab", "storage"],
-  "host_permissions": ["<all_urls>"],
-  "action": {
-    "default_popup": "popup.html"
-  },
-  "background": {
-    "service_worker": "background.js"
-  },
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["content.js"]
-    }
-  ]
-}
--- a/package.json
+++ b/package.json
@ -0,0 +1,29 @@
+{
+  "name": "zoomaccell",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/popup.html
+++ b/popup.html
@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      body {
-        width: 300px;
-        padding: 10px;
-        font-family: Arial, sans-serif;
-      }
-      .slider-container {
-        display: flex;
-        align-items: center;
-        margin-bottom: 10px;
-      }
-      .slider {
-        flex-grow: 1;
-        margin: 0 10px;
-      }
-      .value {
-        width: 40px;
-        text-align: right;
-      }
-    </style>
-  </head>
-  <body>
-    <h2>Zoom Acceleration Curve</h2>
-    <div id="sliders"></div>
-    <script src="popup.js"></script>
-  </body>
-</html>
-
--- a/popup.js
+++ b/popup.js
@ -1,75 +0,0 @@
-const numSliders = 5;
-const defaultMultiplier = 1;
-
-function createSliders() {
-  const slidersContainer = document.getElementById("sliders");
-  for (let i = 0; i < numSliders; i++) {
-    const sliderContainer = document.createElement("div");
-    sliderContainer.className = "slider-container";
-
-    const label = document.createElement("label");
-    label.textContent = `${(i / (numSliders - 1) * 2).toFixed(2)} zoom units/s`;
-
-    const slider = document.createElement("input");
-    slider.type = "range";
-    slider.min = "1";
-    slider.max = "10";
-    slider.step = "0.1";
-    slider.value = defaultMultiplier;
-    slider.className = "slider";
-
-    const value = document.createElement("span");
-    value.className = "value";
-    value.textContent = `${defaultMultiplier}x`;
-
-    sliderContainer.appendChild(label);
-    sliderContainer.appendChild(slider);
-    sliderContainer.appendChild(value);
-    slidersContainer.appendChild(sliderContainer);
-
-    slider.addEventListener("input", () => {
-      value.textContent = `${parseFloat(slider.value).toFixed(1)}x`;
-      saveSettings();
-    });
-  }
-}
-
-function saveSettings() {
-  const sliders = document.querySelectorAll(".slider");
-  const settings = Array.from(sliders).map((slider) => parseFloat(slider.value));
-  chrome.storage.sync.set({ accelerationCurve: settings }, () => {
-    sendSettingsToActiveTab(settings);
-  });
-}
-
-function sendSettingsToActiveTab(settings) {
-  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-    if (tabs[0]) {
-      chrome.tabs.sendMessage(
-        tabs[0].id,
-        { action: "updateSettings", settings },
-        (response) => {
-          if (chrome.runtime.lastError) {
-            console.log("Could not send settings to content script.");
-          }
-        }
-      );
-    }
-  });
-}
-
-function loadSettings() {
-  chrome.storage.sync.get("accelerationCurve", (data) => {
-    if (data.accelerationCurve) {
-      const sliders = document.querySelectorAll(".slider");
-      data.accelerationCurve.forEach((value, index) => {
-        sliders[index].value = value;
-        sliders[index].nextElementSibling.textContent = `${value.toFixed(1)}x`;
-      });
-    }
-  });
-}
-
-createSliders();
-loadSettings();
-
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,129 @@
+.app {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: white;
+  position: relative;
+}
+
+.stats {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  transform: none;
+  color: #213547;
+  background-color: white;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-family: Inter, system-ui, Arial, sans-serif;
+  font-size: 14px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border: 1px solid #ddd;
+  z-index: 100;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.stats span {
+  white-space: nowrap;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.content {
+  position: absolute;
+  width: 10000px;
+  /* Match VIRTUAL_SIZE */
+  height: 10000px;
+  transform-origin: 0 0;
+  background-color: white;
+  background-image: linear-gradient(#ddd 1px, transparent 1px),
+    linear-gradient(90deg, #ddd 1px, transparent 1px);
+  background-size: 100px 100px;
+}
+
+.target {
+  position: absolute;
+  background-color: #888888;
+  border-radius: 50%;
+  transition: background-color 0.2s ease;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  transform: translate(-50%, -50%);
+}
+
+.target.active {
+  background-color: #44aa44;
+  box-shadow: 0 0 20px rgba(68, 170, 68, 0.4);
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: white;
+}
+
+.controls {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  gap: 10px;
+  z-index: 1001;
+}
+
+.settings-toggle,
+.rounds-toggle,
+.export-button,
+.reset-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: white;
+  border: 1px solid #ddd;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.settings-toggle:hover,
+.rounds-toggle:hover,
+.export-button:hover,
+.reset-button:hover {
+  background: #f5f5f5;
+  border-color: #646cff;
+}
+
+.export-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.export-button:disabled:hover {
+  background: white;
+  border-color: #ddd;
+}
+
+.reset-button {
+  border-color: #ffcdd2;
+}
+
+.reset-button:hover {
+  background: #fff5f5;
+  border-color: #ef5350;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,391 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Settings } from './components/Settings';
+import { RoundsHistory } from './components/RoundsHistory';
+import { saveState, loadState, exportToCSV } from './utils';
+import {
+  Target,
+  Stats,
+  ViewportOffset,
+  AccelerationSettings,
+  Round,
+  CONSTANTS,
+} from './types';
+import './App.css';
+
+function App() {
+  // Core state
+  const [targets, setTargets] = useState<Target[]>([]);
+  const [currentTarget, setCurrentTarget] = useState<number | null>(null);
+  const [zoom, setZoom] = useState<number>(CONSTANTS.ZOOM_LEVELS.default);
+  const [stats, setStats] = useState<Stats>({
+    startTime: Date.now(),
+    misclicks: 0,
+    targetsHit: 0,
+    times: [],
+  });
+
+  // Load settings from localStorage or use defaults
+  const [settings, setSettings] = useState<AccelerationSettings>(() => {
+    const savedState = loadState();
+    return savedState?.settings ?? {
+      enabled: true,
+      curve: Array(CONSTANTS.NUM_CURVE_POINTS).fill(1),
+    };
+  });
+
+  const [rounds, setRounds] = useState<Round[]>(() => {
+    const savedState = loadState();
+    return savedState?.rounds ?? [];
+  });
+
+  // UI state
+  const [showSettings, setShowSettings] = useState(false);
+  const [showRounds, setShowRounds] = useState(false);
+  const [viewportOffset, setViewportOffset] = useState<ViewportOffset>({
+    x: 0,
+    y: 0,
+  });
+
+  // Refs for handling zoom behavior
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wheelDeltaSamples = useRef<number[]>([]);
+  const touchStartDistance = useRef<number>(0);
+
+  useEffect(() => {
+    const savedState = loadState();
+    if (savedState?.stats) {
+      setStats(savedState.stats);
+    }
+  }, []);
+
+  useEffect(() => {
+    saveState({
+      rounds,
+      stats,
+      settings,
+    });
+  }, [rounds, stats, settings]);
+
+  useEffect(() => {
+    generateTargets();
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleWheelEvent = (e: WheelEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        
+        const rect = container.getBoundingClientRect();
+        const cursorX = e.clientX - rect.left;
+        const cursorY = e.clientY - rect.top;
+
+        const virtualX = viewportOffset.x + cursorX / zoom;
+        const virtualY = viewportOffset.y + cursorY / zoom;
+
+        // Prevent crazy fast scrolling
+        const deltaY = Math.max(-100, Math.min(100, -e.deltaY));
+        
+        if (isFinite(deltaY)) {
+          wheelDeltaSamples.current.push(Math.abs(deltaY));
+          if (wheelDeltaSamples.current.length > CONSTANTS.WHEEL_SAMPLES) {
+            wheelDeltaSamples.current.shift();
+          }
+        }
+
+        let zoomDelta = deltaY * 0.001;
+
+        // Apply acceleration curve if enabled
+        if (settings.enabled && wheelDeltaSamples.current.length > 0) {
+          const averageSpeed = wheelDeltaSamples.current.reduce((a, b) => a + b, 0) / 
+            wheelDeltaSamples.current.length;
+          
+          const normalizedSpeed = Math.max(0, Math.min(2, averageSpeed / 100));
+          const curveIndex = normalizedSpeed * (settings.curve.length - 1);
+          const lowerIndex = Math.floor(curveIndex);
+          const upperIndex = Math.min(settings.curve.length - 1, Math.ceil(curveIndex));
+          const t = curveIndex - lowerIndex;
+          
+          const accelerationFactor = 
+            settings.curve[lowerIndex] * (1 - t) + 
+            settings.curve[upperIndex] * t;
+          
+          if (isFinite(accelerationFactor)) {
+            zoomDelta *= accelerationFactor;
+          }
+        }
+
+        zoomDelta = Math.max(-0.5, Math.min(0.5, zoomDelta));
+
+        const newZoom = Math.max(
+          CONSTANTS.ZOOM_LEVELS.min,
+          Math.min(CONSTANTS.ZOOM_LEVELS.max, zoom * (1 + zoomDelta))
+        );
+
+        // Sanity check before updating state
+        if (isFinite(newZoom) && newZoom > 0) {
+          const newOffsetX = virtualX - cursorX / newZoom;
+          const newOffsetY = virtualY - cursorY / newZoom;
+
+          if (isFinite(newOffsetX) && isFinite(newOffsetY)) {
+            setZoom(newZoom);
+            setViewportOffset({ x: newOffsetX, y: newOffsetY });
+          }
+        }
+      }
+    };
+
+    container.addEventListener('wheel', handleWheelEvent, { passive: false });
+
+    return () => {
+      container.removeEventListener('wheel', handleWheelEvent);
+    };
+  }, [zoom, viewportOffset, settings]);
+
+  const generateTargets = () => {
+    const newTargets: Target[] = [];
+    const PADDING = CONSTANTS.MAX_RADIUS * 2;
+    
+    const usableArea = {
+      start: PADDING,
+      end: CONSTANTS.VIRTUAL_SIZE - PADDING
+    };
+    
+    for (let i = 0; i < CONSTANTS.NUM_TARGETS; i++) {
+      let validPosition = false;
+      let newTarget: Target;
+
+      while (!validPosition) {
+        const radius = CONSTANTS.MIN_RADIUS + 
+          Math.random() * (CONSTANTS.MAX_RADIUS - CONSTANTS.MIN_RADIUS);
+        const x = usableArea.start + Math.random() * (usableArea.end - usableArea.start);
+        const y = usableArea.start + Math.random() * (usableArea.end - usableArea.start);
+        
+        newTarget = { x, y, radius };
+        validPosition = true;
+
+        for (const existing of newTargets) {
+          const distance = Math.hypot(existing.x - x, existing.y - y);
+          if (distance < (existing.radius + radius) * 2) {
+            validPosition = false;
+            break;
+          }
+        }
+      }
+      newTargets.push(newTarget!);
+    }
+
+    setTargets(newTargets);
+    setCurrentTarget(Math.floor(Math.random() * CONSTANTS.NUM_TARGETS));
+
+    const initialZoom = 0.2;
+    setZoom(initialZoom);
+
+    setViewportOffset({
+      x: (CONSTANTS.VIRTUAL_SIZE - window.innerWidth / initialZoom) / 2,
+      y: (CONSTANTS.VIRTUAL_SIZE - window.innerHeight / initialZoom) / 2,
+    });
+
+    setStats((prev) => ({ ...prev, startTime: Date.now() }));
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (e.touches.length === 2) {
+      const touch1 = e.touches[0];
+      const touch2 = e.touches[1];
+      touchStartDistance.current = Math.hypot(
+        touch2.clientX - touch1.clientX,
+        touch2.clientY - touch1.clientY
+      );
+    }
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (e.touches.length === 2) {
+      e.preventDefault();
+      const touch1 = e.touches[0];
+      const touch2 = e.touches[1];
+      const currentDistance = Math.hypot(
+        touch2.clientX - touch1.clientX,
+        touch2.clientY - touch1.clientY
+      );
+
+      const zoomFactor = currentDistance / touchStartDistance.current;
+      setZoom((prev) =>
+        Math.max(
+          CONSTANTS.ZOOM_LEVELS.min,
+          Math.min(CONSTANTS.ZOOM_LEVELS.max, prev * zoomFactor)
+        )
+      );
+    }
+  };
+
+  const handleTouchEnd = () => {
+    touchStartDistance.current = 0;
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (!containerRef.current || currentTarget === null) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / zoom + viewportOffset.x;
+    const y = (e.clientY - rect.top) / zoom + viewportOffset.y;
+
+    const target = targets[currentTarget];
+    if (!target) return;
+
+    const distance = Math.hypot(target.x - x, target.y - y);
+
+    if (distance <= target.radius) {
+      const time = Date.now() - stats.startTime;
+      
+      // Log the round with acceleration curve if enabled
+      setRounds(prev => [...prev, {
+        timeSpent: time,
+        misclicks: stats.misclicks,
+        accelerationEnabled: settings.enabled,
+        accelerationCurve: settings.enabled ? [...settings.curve] : undefined,
+        timestamp: Date.now(),
+      }]);
+
+      // Reset stats for next round
+      setStats({
+        startTime: Date.now(),
+        misclicks: 0,
+        targetsHit: stats.targetsHit + 1,
+        times: [...stats.times, time],
+      });
+
+      // Select new target
+      let newTarget: number;
+      do {
+        newTarget = Math.floor(Math.random() * CONSTANTS.NUM_TARGETS);
+      } while (newTarget === currentTarget);
+      setCurrentTarget(newTarget);
+    } else {
+      setStats((prev) => ({
+        ...prev,
+        misclicks: prev.misclicks + 1,
+      }));
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (e.buttons === 1) {
+      setViewportOffset((prev) => ({
+        x: prev.x - e.movementX / zoom,
+        y: prev.y - e.movementY / zoom,
+      }));
+    }
+  };
+
+  const handleReset = () => {
+    if (window.confirm('Are you sure you want to reset all trials and history? This cannot be undone.')) {
+      setRounds([]);
+      setStats({
+        startTime: Date.now(),
+        misclicks: 0,
+        targetsHit: 0,
+        times: [],
+      });
+      generateTargets();
+    }
+  };
+
+  const handleExport = () => {
+    exportToCSV(rounds);
+  };
+
+  return (
+    <div className="app">
+      <div className="controls">
+        <button 
+          className="settings-toggle" 
+          onClick={() => setShowSettings(!showSettings)}
+        >
+          ⚙️ Settings
+        </button>
+        
+        <button 
+          className="rounds-toggle" 
+          onClick={() => setShowRounds(!showRounds)}
+        >
+          📊 History
+        </button>
+
+        <button 
+          className="export-button" 
+          onClick={handleExport}
+          disabled={rounds.length === 0}
+        >
+          📥 Export CSV
+        </button>
+
+        <button 
+          className="reset-button" 
+          onClick={handleReset}
+        >
+          🔄 Reset
+        </button>
+      </div>
+      
+      <Settings
+        settings={settings}
+        onSettingsChange={setSettings}
+        visible={showSettings}
+        onClose={() => setShowSettings(false)}
+      />
+      
+      <RoundsHistory
+        rounds={rounds}
+        visible={showRounds}
+        onClose={() => setShowRounds(false)}
+      />
+      
+      <div className="stats">
+        <span>Targets: {stats.targetsHit}</span> • 
+        <span>Misclicks: {stats.misclicks}</span> • 
+        <span>Avg Time: {stats.times.length
+          ? Math.round(stats.times.reduce((a, b) => a + b) / stats.times.length)
+          : 0} ms</span> • 
+        <span>Zoom: {zoom.toFixed(2)}x</span>
+      </div>
+
+      <div
+        ref={containerRef}
+        className="container"
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        onClick={handleClick}
+        onMouseMove={handleMouseMove}
+      >
+        <div
+          className="content"
+          style={{
+            transform: `translate(${-viewportOffset.x * zoom}px, ${-viewportOffset.y * zoom
+              }px) scale(${zoom})`,
+            transformOrigin: '0 0',
+          }}
+        >
+          {targets.map((target, i) => (
+            <div
+              key={i}
+              className={`target ${i === currentTarget ? 'active' : ''}`}
+              style={{
+                left: `${target.x}px`,
+                top: `${target.y}px`,
+                width: `${target.radius * 2}px`,
+                height: `${target.radius * 2}px`,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/RoundsHistory.css
+++ b/src/components/RoundsHistory.css
@ -0,0 +1,82 @@
+.rounds-panel {
+	position: fixed;
+	top: 80px;
+	left: 20px;
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	padding: 20px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	z-index: 1000;
+	width: 300px;
+	max-height: calc(100vh - 120px);
+	overflow-y: auto;
+	color: #213547;
+}
+
+.rounds-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	position: sticky;
+	top: 0;
+	background: white;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #eee;
+}
+
+.rounds-header h2 {
+	margin: 0;
+	font-size: 1.2em;
+	font-weight: 600;
+	color: #213547;
+}
+
+.rounds-header button {
+	background: none;
+	border: none;
+	font-size: 20px;
+	cursor: pointer;
+	padding: 0 8px;
+	box-shadow: none;
+}
+
+.rounds-header button:hover {
+	background: none;
+	color: #646cff;
+}
+
+.rounds-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.round-item {
+	padding: 12px;
+	border: 1px solid #eee;
+	border-radius: 6px;
+	background: #f9f9f9;
+	transition: all 0.2s ease;
+}
+
+.round-item:hover {
+	border-color: #ddd;
+	background: white;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.round-number {
+	font-weight: 600;
+	margin-bottom: 8px;
+	color: #213547;
+}
+
+.round-stats {
+	font-size: 0.9em;
+	color: #666;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
--- a/src/components/RoundsHistory.tsx
+++ b/src/components/RoundsHistory.tsx
@ -0,0 +1,38 @@
+import React from 'react';
+import { Round } from '../types';
+import './RoundsHistory.css';
+
+interface RoundsHistoryProps {
+	rounds: Round[];
+	visible: boolean;
+	onClose: () => void;
+}
+
+export const RoundsHistory: React.FC<RoundsHistoryProps> = ({
+	rounds,
+	visible,
+	onClose,
+}) => {
+	if (!visible) return null;
+
+	return (
+		<div className="rounds-panel">
+			<div className="rounds-header">
+				<h2>Rounds History</h2>
+				<button onClick={onClose}>×</button>
+			</div>
+			<div className="rounds-list">
+				{rounds.slice().reverse().map((round, index) => (
+					<div key={round.timestamp} className="round-item">
+						<div className="round-number">Round {rounds.length - index}</div>
+						<div className="round-stats">
+							<div>Time: {round.timeSpent}ms</div>
+							<div>Misclicks: {round.misclicks}</div>
+							<div>Acceleration: {round.accelerationEnabled ? 'On' : 'Off'}</div>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
--- a/src/components/Settings.css
+++ b/src/components/Settings.css
@ -0,0 +1,85 @@
+.settings-panel {
+	position: fixed;
+	top: 80px;
+	right: 20px;
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	padding: 20px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	z-index: 1000;
+	width: 300px;
+	color: #213547;
+}
+
+.settings-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+.settings-header h2 {
+	margin: 0;
+	font-size: 1.2em;
+	font-weight: 600;
+	color: #213547;
+}
+
+.settings-header button {
+	background: none;
+	border: none;
+	font-size: 20px;
+	cursor: pointer;
+	padding: 0 8px;
+	box-shadow: none;
+}
+
+.settings-header button:hover {
+	background: none;
+	color: #646cff;
+}
+
+.slider-row {
+	display: flex;
+	align-items: center;
+	margin: 10px 0;
+	gap: 10px;
+}
+
+.slider-row label {
+	width: 120px;
+	font-size: 14px;
+	color: #213547;
+}
+
+.slider-row input[type="range"] {
+	flex: 1;
+}
+
+.slider-row span {
+	width: 40px;
+	text-align: right;
+	font-size: 14px;
+	color: #666;
+}
+
+.acceleration-toggle {
+	margin-bottom: 20px;
+}
+
+.acceleration-toggle label {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+	font-size: 14px;
+	color: #213547;
+}
+
+.sliders-container h3 {
+	margin: 0 0 15px 0;
+	font-size: 1em;
+	font-weight: 600;
+	color: #213547;
+}
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@ -0,0 +1,68 @@
+import React from 'react';
+import { AccelerationSettings } from '../types';
+import './Settings.css';
+
+interface SettingsProps {
+	settings: AccelerationSettings;
+	onSettingsChange: (settings: AccelerationSettings) => void;
+	visible: boolean;
+	onClose: () => void;
+}
+
+export const Settings: React.FC<SettingsProps> = ({
+	settings,
+	onSettingsChange,
+	visible,
+	onClose,
+}) => {
+	const numSliders = 5;
+
+	const handleSliderChange = (index: number, value: number) => {
+		const newCurve = [...settings.curve];
+		newCurve[index] = value;
+		onSettingsChange({ ...settings, curve: newCurve });
+	};
+
+	if (!visible) return null;
+
+	return (
+		<div className="settings-panel">
+			<div className="settings-header">
+				<h2>Settings</h2>
+				<button onClick={onClose}>×</button>
+			</div>
+
+			<div className="acceleration-toggle">
+				<label>
+					<input
+						type="checkbox"
+						checked={settings.enabled}
+						onChange={(e) =>
+							onSettingsChange({ ...settings, enabled: e.target.checked })
+						}
+					/>
+					Enable Zoom Acceleration
+				</label>
+			</div>
+
+			<div className="sliders-container">
+				<h3>Acceleration Curve</h3>
+				{Array.from({ length: numSliders }).map((_, i) => (
+					<div key={i} className="slider-row">
+						<label>{((i / (numSliders - 1)) * 2).toFixed(2)} zoom units/s</label>
+						<input
+							type="range"
+							min="1"
+							max="10"
+							step="0.1"
+							value={settings.curve[i]}
+							onChange={(e) => handleSliderChange(i, parseFloat(e.target.value))}
+							disabled={!settings.enabled}
+						/>
+						<span>{settings.curve[i].toFixed(1)}x</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,74 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: white;
+  cursor: pointer;
+  transition: all 0.25s;
+  color: #213547;
+}
+
+button:hover {
+  border-color: #646cff;
+  background-color: #f5f5f5;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 2px solid #646cff;
+  outline-offset: 2px;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/types.ts
+++ b/src/types.ts
@ -0,0 +1,45 @@
+export interface Target {
+	x: number;
+	y: number;
+	radius: number;
+}
+
+export interface Stats {
+	startTime: number;
+	misclicks: number;
+	targetsHit: number;
+	times: number[];
+}
+
+export interface ViewportOffset {
+	x: number;
+	y: number;
+}
+
+export interface AccelerationSettings {
+	enabled: boolean;
+	curve: number[];
+}
+
+export interface Round {
+	timeSpent: number;
+	misclicks: number;
+	accelerationEnabled: boolean;
+	accelerationCurve?: number[];  // Only present when acceleration is enabled
+	timestamp: number;
+}
+
+// Game constants
+export const CONSTANTS = {
+	NUM_TARGETS: 50,
+	MIN_RADIUS: 20,
+	MAX_RADIUS: 60,
+	VIRTUAL_SIZE: 10000,  // Size of the virtual canvas
+	ZOOM_LEVELS: {
+		min: 0.1,
+		max: 10,
+		default: 1,
+	},
+	WHEEL_SAMPLES: 5,     // Number of samples to average for smooth zooming
+	NUM_CURVE_POINTS: 5,  // Points in the acceleration curve
+} as const;
--- a/src/utils.ts
+++ b/src/utils.ts
@ -0,0 +1,82 @@
+import { Round, Stats, AccelerationSettings } from './types';
+
+interface AppState {
+  rounds: Round[];
+  stats: Stats;
+  settings: AccelerationSettings;
+}
+
+// Persist app state to localStorage
+export const saveState = (state: AppState) => {
+  try {
+    localStorage.setItem('zoomaccell_state', JSON.stringify(state));
+  } catch (error) {
+    console.error('Failed to save state:', error);
+  }
+};
+
+export const loadState = (): AppState | null => {
+  try {
+    const savedState = localStorage.getItem('zoomaccell_state');
+    if (savedState) {
+      return JSON.parse(savedState);
+    }
+  } catch (error) {
+    console.error('Failed to load state:', error);
+  }
+  return null;
+};
+
+export const exportToCSV = (rounds: Round[]) => {
+  const baseHeaders = ['Round Number', 'Time (ms)', 'Misclicks', 'Acceleration Enabled', 'Timestamp'];
+  
+  // Figure out how many acceleration points we need
+  const maxCurvePoints = rounds.reduce((max, round) => {
+    return Math.max(max, round.accelerationCurve?.length || 0);
+  }, 0);
+  
+  const curveHeaders = maxCurvePoints > 0 
+    ? Array.from({ length: maxCurvePoints }, (_, i) => `Accel ${i + 1}`)
+    : [];
+  
+  const headers = [...baseHeaders, ...curveHeaders];
+  
+  const rows = rounds.map((round, index) => {
+    const baseData = [
+      index + 1,
+      round.timeSpent,
+      round.misclicks,
+      round.accelerationEnabled ? 'true' : 'false',
+      new Date(round.timestamp).toISOString()
+    ];
+    
+    const curveData = maxCurvePoints > 0
+      ? Array.from({ length: maxCurvePoints }, (_, i) => 
+          round.accelerationCurve?.[i]?.toFixed(2) || '')
+      : [];
+    
+    return [...baseData, ...curveData];
+  });
+  
+  const csvContent = [
+    headers.join(','),
+    ...rows.map(row => row.join(','))
+  ].join('\n');
+  
+  // Download the file
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  
+  const now = new Date();
+  const dateStr = now.toISOString().split('T')[0];
+  const timeStr = now.toTimeString().split(' ')[0].replace(/:/g, '-');
+  
+  link.setAttribute('href', url);
+  link.setAttribute('download', `zoom_trials_${dateStr}_${timeStr}.csv`);
+  link.style.visibility = 'hidden';
+  
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}; 
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>