I'll create a starter project for the EV Tracker with the MVP features. We'll use React with TypeScript for type safety and Zustand for state management. import { useState } from 'react'; import { useStore } from './store'; import PrizeConfig from './components/PrizeConfig'; import SpinTracker from './components/SpinTracker'; import StatsPanel from './components/StatsPanel'; function App() { const [activeTab, setActiveTab] = useState<'config' | 'tracker'>('config'); const { prizes } = useStore(); return (

EV Tracker

{activeTab === 'config' ? : }

{activeTab === 'tracker' && }

); } export default App; import { create } from 'zustand'; import { persist } from 'zustand/middleware'; type Prize = { id: string; name: string; value: number; quantity: number; remaining: number; category?: string; }; type Spin = { prizeId: string; value: number; cost: number; timestamp: number; }; type StoreState = { prizes: Prize[]; spins: Spin[]; lastCost: number; addPrize: (prize: Omit) => void; updatePrize: (id: string, updates: Partial) => void; removePrize: (id: string) => void; recordSpin: (prizeId: string, cost: number) => void; undoSpin: () => void; resetSession: () => void; duplicatePrize: (id: string) => void; }; export const useStore = create()( persist( (set, get) => ({ prizes: [], spins: [], lastCost: 1, addPrize: (prize) => set((state) => ({ prizes: [ ...state.prizes, { ...prize, id: crypto.randomUUID(), remaining: prize.quantity } ] })), updatePrize: (id, updates) => set((state) => ({ prizes: state.prizes.map(p => p.id === id ? { ...p, ...updates } : p ) })), removePrize: (id) => set((state) => ({ prizes: state.prizes.filter(p => p.id !== id) })), recordSpin: (prizeId, cost) => { const prize = get().prizes.find(p => p.id === prizeId); if (!prize || prize.remaining <= 0) return; set((state) => ({ prizes: state.prizes.map(p => p.id === prizeId ? { ...p, remaining: p.remaining - 1 } : p ), spins: [ ...state.spins, { prizeId, value: prize.value, cost, timestamp: Date.now() } ], lastCost: cost })); }, undoSpin: () => set((state) => { if (state.spins.length === 0) return state; const lastSpin = state.spins[state.spins.length - 1]; return { prizes: state.prizes.map(p => p.id === lastSpin.prizeId ? { ...p, remaining: p.remaining + 1 } : p ), spins: state.spins.slice(0, -1) }; }), resetSession: () => set((state) => ({ prizes: state.prizes.map(p => ({ ...p, remaining: p.quantity })), spins: [] })), duplicatePrize: (id) => set((state) => { const prize = state.prizes.find(p => p.id === id); if (!prize) return state; return { prizes: [ ...state.prizes, { ...prize, id: crypto.randomUUID(), remaining: prize.quantity } ] }; }) }), { name: 'ev-tracker-storage', partialize: (state) => ({ prizes: state.prizes, lastCost: state.lastCost }) } ) ); import { useState } from 'react'; import { useStore } from '../store'; export default function PrizeConfig() { const { prizes, addPrize, removePrize, duplicatePrize } = useStore(); const [newPrize, setNewPrize] = useState({ name: '', value: 0, quantity: 1, category: '' }); const handleAddPrize = () => { if (!newPrize.name || newPrize.value <= 0 || newPrize.quantity <= 0) return; addPrize(newPrize); setNewPrize({ name: '', value: 0, quantity: 1, category: '' }); }; return (

Configure Prizes

setNewPrize({...newPrize, name: e.target.value})} /> setNewPrize({...newPrize, value: parseFloat(e.target.value) || 0})} /> setNewPrize({...newPrize, quantity: parseInt(e.target.value) || 1})} /> setNewPrize({...newPrize, category: e.target.value})} />

{prizes.map((prize) => (

{prize.name} (${prize.value}) Qty: {prize.remaining}/{prize.quantity} {prize.category}

))}

); } import { useState } from 'react'; import { useStore } from '../store'; export default function SpinTracker() { const { prizes, recordSpin, undoSpin, lastCost } = useStore(); const [cost, setCost] = useState(lastCost); const handleSpin = (prizeId: string) => { recordSpin(prizeId, cost); }; return (

Spin Tracker

Spin Cost: setCost(parseFloat(e.target.value) || 0)} />

{prizes.map((prize) => ( ))}

); } import { useStore } from '../store'; export default function StatsPanel() { const { prizes, spins } = useStore(); const totalSpins = spins.length; const totalCost = spins.reduce((sum, spin) => sum + spin.cost, 0); const avgCost = totalSpins > 0 ? totalCost / totalSpins : 0; const totalRemaining = prizes.reduce((sum, prize) => sum + prize.remaining, 0); const totalValueRemaining = prizes.reduce((sum, prize) => sum + (prize.remaining * prize.value), 0); const currentEV = totalRemaining > 0 ? totalValueRemaining / totalRemaining : 0; const totalProfitLoss = spins.reduce((sum, spin) => sum + (spin.value - spin.cost), 0); return (

Live Stats

Total Spins: {totalSpins}

Avg. Spin Cost: ${avgCost.toFixed(2)}

Current EV: ${currentEV.toFixed(2)}

Total P/L: = 0 ? 'positive' : 'negative'}> ${totalProfitLoss.toFixed(2)}

); } :root { --primary: #4a6fa5; --secondary: #166088; --accent: #4fc3f7; --text: #333; --bg: #f5f7fa; --card-bg: #fff; --disabled: #ccc; --positive: #4caf50; --negative: #f44336; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text); background-color: var(--bg); line-height: 1.6; padding: 20px; } .app { max-width: 1200px; margin: 0 auto; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; } nav button { padding: 8px 16px; margin-left: 10px; background: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; } nav button.active { background: var(--secondary); } nav button:disabled { background: var(--disabled); cursor: not-allowed; } .prize-config, .spin-tracker { background: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; } .add-prize-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; margin-bottom: 20px; } .add-prize-form input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .add-prize-form button { background: var(--primary); color: white; border: none; border-radius: 4px; padding: 0 16px; cursor: pointer; } .prize-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .prize-item { background: white; padding: 10px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column; } .prize-item button { margin-top: 8px; padding: 4px 8px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; } .prize-item button:last-child { background: var(--negative); } .spin-tracker .cost-input { margin-bottom: 20px; } .spin-tracker .cost-input input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-left: 10px; } .prize-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; } .prize-buttons button { padding: 15px; background: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; transition: transform 0.1s; } .prize-buttons button:active { transform: scale(0.98); } .prize-buttons button.disabled { background: var(--disabled); cursor: not-allowed; } .undo-button { padding: 10px 20px; background: var(--negative); color: white; border: none; border-radius: 4px; cursor: pointer; } .stats-panel { background: var(--card-bg); padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .stats-grid div { display: flex; justify-content: space-between; } .positive { color: var(--positive); } .negative { color: var(--negative); } import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; ReactDOM.createRoot(document.getElementById('root')!).render( ); EV Tracker

{ "name": "ev-tracker", "version": "0.1.0", "private": true, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "zustand": "^4.4.1", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", "typescript": "^5.2.2" }, "scripts": { "start": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "@vitejs/plugin-react": "^4.2.1", "vite": "^4.4.9" } } import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], }); { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], "module": "ESNext", "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "types": ["vite/client"] }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } { "compilerOptions": { "composite": true, "module": "ESNext", "moduleResolution": "node", "allowSyntheticDefaultImports": true }, "include": ["vite.config.ts"] }