function MainComponent() { const [mode, setMode] = React.useState(null); const [step, setStep] = React.useState("initial"); const [position, setPosition] = React.useState(null); const [startPosition, setStartPosition] = React.useState(null); const [lapTimes, setLapTimes] = React.useState([]); const [isTracking, setIsTracking] = React.useState(false); const [lastLapTime, setLastLapTime] = React.useState(null); const [startTime, setStartTime] = React.useState(null); const [staticPosition, setStaticPosition] = React.useState(null); const [showDialog, setShowDialog] = React.useState(false); const [pairingCode, setPairingCode] = React.useState(""); const [enteredCode, setEnteredCode] = React.useState(""); const [sessions, setSessions] = React.useState([]); const [showSessions, setShowSessions] = React.useState(false); const [isPaired, setIsPaired] = React.useState(false); const [watchId, setWatchId] = React.useState(null); React.useEffect(()=>{ if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js").then(function(registration) { console.log("ServiceWorker registration successful"); }, function(err) { console.log("ServiceWorker registration failed"); }); } }, []); React.useEffect(()=>{ if ("geolocation" in navigator && isTracking) { const id = navigator.geolocation.watchPosition((pos)=>{ const newPosition = { lat: pos.coords.latitude, lng: pos.coords.longitude, speed: pos.coords.speed || 0 }; setPosition(newPosition); if (startPosition && isTracking) { const distance = calculateDistance(startPosition.lat, startPosition.lng, newPosition.lat, newPosition.lng); if (distance < 10 && startTime) { const lapTime = (Date.now() - startTime) / 1000; const avgSpeed = distance / lapTime * 2.237; setLapTimes((prev)=>[ ...prev, lapTime ]); setLastLapTime(lapTime); setStartTime(Date.now()); } } }); setWatchId(id); return ()=>{ navigator.geolocation.clearWatch(id); }; } }, [ startPosition, isTracking, startTime ]); React.useEffect(()=>{ if (mode === "tracked") { const code = Math.random().toString(36).substring(2, 8).toUpperCase(); setPairingCode(code); } }, [ mode ]); const handleShare = ()=>{ if (navigator.share) { navigator.share({ title: "Lap Timer App", text: "Check out this lap timing app!", url: window.location.href }); } }; const handleBack = ()=>{ setMode(null); setShowDialog(false); setPairingCode(""); setEnteredCode(""); setIsPaired(false); setIsTracking(false); if (watchId) { navigator.geolocation.clearWatch(watchId); setWatchId(null); } }; const handlePairDevices = ()=>{ if (pairingCode === enteredCode) { setIsPaired(true); const session = { date: new Date().toLocaleString(), type: mode, duration: 0 }; setSessions((prev)=>[ ...prev, session ]); } }; const handleStopTracking = ()=>{ setIsTracking(false); setStartTime(null); setIsPaired(false); if (watchId) { navigator.geolocation.clearWatch(watchId); setWatchId(null); } const updatedSessions = [ ...sessions ]; updatedSessions[updatedSessions.length - 1].duration = (Date.now() - startTime) / 1000; setSessions(updatedSessions); }; const handleStartTracking = ()=>{ setIsTracking(true); setStartTime(Date.now()); setStartPosition(position); }; if (mode === null) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[url('/checkerboard.png')] p-4 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "/icon.png", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "apple-touch-icon", href: "/icon.png", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "manifest", href: "/manifest.json", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "apple-mobile-web-app-capable", content: "yes", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "apple-mobile-web-app-status-bar-style", content: "black", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "apple-mobile-web-app-title", content: "Lap Timer", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "mobile-web-app-capable", content: "yes", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "theme-color", content: "#000000", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "description", content: "Track laps and share locations", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-white mb-12 font-roboto", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stopwatch mr-2", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }), "Lap Times"), /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-4", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "Choose Mode"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setMode("tracker"); setShowDialog(true); }, className: "w-full bg-blue-500 text-white px-6 py-4 rounded-lg text-xl hover:bg-blue-600", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-binoculars mr-2", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }), "Track Others"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("tracked"), className: "w-full bg-green-500 text-white px-6 py-4 rounded-lg text-xl hover:bg-green-600", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-location-dot mr-2", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }), "Be Tracked"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSessions(true), className: "w-full bg-gray-500 text-white px-6 py-4 rounded-lg text-xl hover:bg-gray-600", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history mr-2", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }), "View Sessions")), /*#__PURE__*/ React.createElement("button", { onClick: handleShare, className: "mt-4 bg-purple-500 text-white px-6 py-2 rounded-lg text-xl hover:bg-purple-600 flex items-center", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt mr-2", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }), "Share App"), showSessions && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, "Tracking Sessions"), sessions.map((session, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b py-2", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, "Date: ", session.date), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, "Type: ", session.type), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }, "Duration: ", session.duration.toFixed(2), "s"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSessions(false), className: "mt-4 bg-gray-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "Close")))); } if (mode === "tracked") { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[url('/checkerboard.png')] p-4 flex flex-col", __source: { fileName: "", lineNumber: 202, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "mb-4 text-blue-500 hover:text-blue-600 flex items-center", __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left mr-2", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }), " Back"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, "Your Pairing Code"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded text-center text-2xl font-mono mb-4", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, pairingCode), isPaired ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-600 mb-4", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, "Device paired successfully!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, "Your location is being shared"), /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "w-full bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 mt-4", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, "End Session")) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "Waiting for other device to enter code...")))); } if (showDialog) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[url('/checkerboard.png')] p-4 flex flex-col", __source: { fileName: "", lineNumber: 241, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "mb-4 text-blue-500 hover:text-blue-600 flex items-center", __source: { fileName: "", lineNumber: 242, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }), " Back"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, "Enter Pairing Code"), /*#__PURE__*/ React.createElement("input", { type: "text", value: enteredCode, onChange: (e)=>setEnteredCode(e.target.value.toUpperCase()), className: "w-full p-2 border rounded mb-4", placeholder: "Enter code from other device", maxLength: 6, __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handlePairDevices, className: "w-full bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, "Pair Devices")))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[url('/checkerboard.png')] p-4 flex flex-col", __source: { fileName: "", lineNumber: 272, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "mb-4 text-blue-500 hover:text-blue-600 flex items-center", __source: { fileName: "", lineNumber: 273, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left mr-2", __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }), " Back"), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 279, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 280, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 282, columnNumber: 13 }, __self: this }), "Location Tracking"), isPaired ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-600 mb-4", __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }, "Device paired successfully!"), !isTracking ? /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ handleStartTracking(); }, className: "w-full bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mb-4", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, "Start Tracking") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: handleStopTracking, className: "w-full bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 mb-4", __source: { fileName: "", lineNumber: 299, columnNumber: 19 }, __self: this }, "Stop Tracking"), /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "w-full bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 305, columnNumber: 19 }, __self: this }, "End Session"))) : /*#__PURE__*/ React.createElement("p", { className: "text-red-600", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }), "Please pair with a device first")))); }