import React, { useState, useRef, useCallback } from "react"; import { Play, Pause, RotateCcw, Flag } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "스톱워치", start: "시작", pause: "멈추기", reset: "초기화", lap: "랩", laps: "랩 기록", best: "최고", worst: "최저" }, en: { title: "Stopwatch", start: "Start", pause: "Pause", reset: "Reset", lap: "Lap", laps: "Laps", best: "Best", worst: "Worst" }, ja: { title: "ストップウォッチ", start: "開始", pause: "一時停止", reset: "リセット", lap: "ラップ", laps: "ラップ記録", best: "最速", worst: "最遅" }, zh: { title: "秒表", start: "开始", pause: "暂停", reset: "重置", lap: "圈", laps: "圈记录", best: "最快", worst: "最慢" }, }; var t = T[LANG] || T.en; function fmt(ms) { var m = Math.floor(ms / 60000); var s = Math.floor((ms % 60000) / 1000); var cs = Math.floor((ms % 1000) / 10); return String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0") + "." + String(cs).padStart(2, "0"); } export default function App() { var [elapsed, setElapsed] = useState(0); var [running, setRunning] = useState(false); var [laps, setLaps] = useState([]); var startRef = useRef(0); var rafRef = useRef(null); var baseRef = useRef(0); var tick = useCallback(function() { setElapsed(baseRef.current + Date.now() - startRef.current); rafRef.current = requestAnimationFrame(tick); }, []); var handleStart = useCallback(function() { startRef.current = Date.now(); setRunning(true); rafRef.current = requestAnimationFrame(tick); }, [tick]); var handlePause = useCallback(function() { cancelAnimationFrame(rafRef.current); baseRef.current = baseRef.current + Date.now() - startRef.current; setRunning(false); }, []); var handleReset = useCallback(function() { cancelAnimationFrame(rafRef.current); setRunning(false); setElapsed(0); setLaps([]); baseRef.current = 0; }, []); var handleLap = useCallback(function() { var total = baseRef.current + Date.now() - startRef.current; var prevTotal = laps.length > 0 ? laps[0].total : 0; setLaps(function(prev) { return [{ total: total, split: total - prevTotal }, ...prev]; }); }, [laps]); var bestLap = laps.length > 1 ? Math.min.apply(null, laps.map(function(l) { return l.split; })) : null; var worstLap = laps.length > 1 ? Math.max.apply(null, laps.map(function(l) { return l.split; })) : null; return (

{fmt(elapsed)}

{!running ? ( <> ) : ( <> )}

{laps.length > 0 && (

{t.laps}

{laps.map(function(lap, i) { var num = laps.length - i; var isBest = laps.length > 1 && lap.split === bestLap; var isWorst = laps.length > 1 && lap.split === worstLap; var color = isBest ? "text-emerald-400" : isWorst ? "text-red-400" : "text-gray-400"; return (

{t.lap} {num} {isBest && {t.best}} {isWorst && {t.worst}}

{fmt(lap.split)}

); })}

)}

); }

Stopwatch

Stopwatch

reviews