import React, { useState, useCallback } from "react"; import { Plus, Minus, RotateCcw, Edit2, X, Check } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "점수판", reset: "초기화", addTeam: "팀 추가", teamName: "팀 이름", vs: "VS", score: "점", rename: "이름 변경" }, en: { title: "Scoreboard", reset: "Reset", addTeam: "Add Team", teamName: "Team name", vs: "VS", score: "pts", rename: "Rename" }, ja: { title: "スコアボード", reset: "リセット", addTeam: "チーム追加", teamName: "チーム名", vs: "VS", score: "点", rename: "名前変更" }, zh: { title: "记分板", reset: "重置", addTeam: "添加队伍", teamName: "队伍名", vs: "VS", score: "分", rename: "改名" }, }; var t = T[LANG] || T.en; var TEAM_COLORS = ["from-blue-500 to-indigo-600", "from-red-500 to-rose-600", "from-emerald-500 to-teal-600", "from-amber-500 to-orange-600", "from-purple-500 to-violet-600", "from-cyan-500 to-sky-600"]; var BG_COLORS = ["bg-blue-500", "bg-red-500", "bg-emerald-500", "bg-amber-500", "bg-purple-500", "bg-cyan-500"]; export default function App() { var [teams, setTeams] = useSharedStorage("score_teams", [ { id: 1, name: "Team A", score: 0 }, { id: 2, name: "Team B", score: 0 }, ]); var [editing, setEditing] = useState(null); var [editName, setEditName] = useState(""); var list = teams || []; var addScore = useCallback(function(id, delta) { setTeams(function(prev) { return (prev || []).map(function(tm) { return tm.id === id ? { ...tm, score: Math.max(0, tm.score + delta) } : tm; }); }); }, [setTeams]); var resetAll = useCallback(function() { setTeams(function(prev) { return (prev || []).map(function(tm) { return { ...tm, score: 0 }; }); }); }, [setTeams]); var addTeam = useCallback(function() { setTeams(function(prev) { var n = (prev || []).length + 1; return [...(prev || []), { id: Date.now(), name: "Team " + String.fromCharCode(64 + n), score: 0 }]; }); }, [setTeams]); var removeTeam = useCallback(function(id) { setTeams(function(prev) { return (prev || []).filter(function(tm) { return tm.id !== id; }); }); }, [setTeams]); var startEdit = useCallback(function(team) { setEditing(team.id); setEditName(team.name); }, []); var saveEdit = useCallback(function() { if (!editName.trim()) return; setTeams(function(prev) { return (prev || []).map(function(tm) { return tm.id === editing ? { ...tm, name: editName.trim() } : tm; }); }); setEditing(null); }, [editing, editName, setTeams]); var maxScore = Math.max.apply(null, list.map(function(tm) { return tm.score; }).concat([0])); return (

🏅 {t.title}

{list.length < 6 && ( )}

{list.map(function(team, i) { var isLeading = team.score === maxScore && maxScore > 0; var color = TEAM_COLORS[i % TEAM_COLORS.length]; var bgColor = BG_COLORS[i % BG_COLORS.length]; return (

{editing === team.id ? (

) : (

{team.name}

{isLeading && 👑}

)} {list.length > 2 && ( )}

{team.score}

); })}

); }

Scoreboard

Scoreboard

reviews