Moved to a Vite and React project
This commit is contained in:
parent
c60c9ed815
commit
3ffe3de5c4
SSH key fingerprint:
SHA256:LGomp8Opq0jz+7kbwNcdfTcuaLRb5Nh0k5AchDDb438
28 changed files with 3222 additions and 279 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -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?
|
||||||
56
README.md
56
README.md
|
|
@ -1,4 +1,54 @@
|
||||||
# Zoom Accel - A configurable
|
# ZoomAccel
|
||||||
|
|
||||||
## Features
|
A tool for studying zoom acceleration curves in pointing tasks. Built with React + TypeScript + Vite.
|
||||||
- Customizable "EQ style" zoom scaling
|
|
||||||
|
## 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
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
93
content.js
93
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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
|
|
@ -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 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -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>
|
||||||
|
|
@ -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"]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
29
package.json
Normal file
29
package.json
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
2004
pnpm-lock.yaml
generated
Normal file
2004
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
31
popup.html
31
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>
|
|
||||||
|
|
||||||
75
popup.js
75
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();
|
|
||||||
|
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
129
src/App.css
Normal file
129
src/App.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
391
src/App.tsx
Normal file
391
src/App.tsx
Normal file
|
|
@ -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;
|
||||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 4 KiB |
82
src/components/RoundsHistory.css
Normal file
82
src/components/RoundsHistory.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
38
src/components/RoundsHistory.tsx
Normal file
38
src/components/RoundsHistory.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
85
src/components/Settings.css
Normal file
85
src/components/Settings.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
68
src/components/Settings.tsx
Normal file
68
src/components/Settings.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
74
src/index.css
Normal file
74
src/index.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -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>,
|
||||||
|
)
|
||||||
45
src/types.ts
Normal file
45
src/types.ts
Normal file
|
|
@ -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;
|
||||||
82
src/utils.ts
Normal file
82
src/utils.ts
Normal file
|
|
@ -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);
|
||||||
|
};
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
26
tsconfig.app.json
Normal file
26
tsconfig.app.json
Normal file
|
|
@ -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"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
|
|
@ -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"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Add table
Reference in a new issue