function MainComponent() { const [rankings, setRankings] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const [retryCount, setRetryCount] = useState(0); useEffect(()=>{ const fetchRankings = async ()=>{ try { setLoading(true); setError(null); const response = await fetch("/api/ranking", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error(`ランキングの取得に失敗しました (${response.status})`); } const data = await response.json(); if (!data || !Array.isArray(data.rankings)) { throw new Error("不正なデータ形式です"); } setRankings(data.rankings); } catch (err) { console.error("Ranking fetch error:", err); setError(err.message || "ランキングを読み込めませんでした"); } finally{ setLoading(false); } }; fetchRankings(); }, [ retryCount ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen relative bg-[length:400%_400%]", style: { backgroundImage: "linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #8000ff, #ff0080)", animation: "gradient 15s ease infinite" }, __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, ` @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-30 backdrop-blur-sm", __source: { fileName: "", lineNumber: 59, columnNumber: 1 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 p-4 md:p-8", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white text-center mb-12", style: { fontFamily: '"Press Start 2P", system-ui, sans-serif', textShadow: "4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000" }, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "連打王決定戦！"), /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/90 backdrop-blur-sm rounded-2xl p-8 shadow-2xl border-4 border-white/50", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-8 text-center", style: { fontFamily: '"Press Start 2P", system-ui, sans-serif', textShadow: "2px 2px 0 #ccc" }, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "ランキング"), error ? /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setRetryCount((count)=>count + 1), className: "px-6 py-3 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-all transform hover:scale-105 shadow-lg", style: { fontFamily: '"Press Start 2P", system-ui, sans-serif' }, __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }, "再試行")) : loading ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 border-4 border-gray-900 border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-900", style: { fontFamily: '"Press Start 2P", system-ui, sans-serif' }, __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this }, "読み込み中...")) : /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-h-[60vh] overflow-y-auto custom-scrollbar", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "sticky top-0 bg-white/95 backdrop-blur-sm", __source: { fileName: "", lineNumber: 113, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b-2 border-gray-200", __source: { fileName: "", lineNumber: 114, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-4 px-6 text-left text-gray-900 font-bold", __source: { fileName: "", lineNumber: 115, columnNumber: 27 }, __self: this }, "順位"), /*#__PURE__*/ React.createElement("th", { className: "py-4 px-6 text-left text-gray-900 font-bold", __source: { fileName: "", lineNumber: 118, columnNumber: 27 }, __self: this }, "プレイヤー"), /*#__PURE__*/ React.createElement("th", { className: "py-4 px-6 text-left text-gray-900 font-bold", __source: { fileName: "", lineNumber: 121, columnNumber: 27 }, __self: this }, "スコア"), /*#__PURE__*/ React.createElement("th", { className: "py-4 px-6 text-left text-gray-900 font-bold", __source: { fileName: "", lineNumber: 124, columnNumber: 27 }, __self: this }, "日時"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 129, columnNumber: 23 }, __self: this }, rankings.map((rank, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: `border-b border-gray-200 hover:bg-white/50 transition-colors ${rank.score === -1 ? "bg-red-50/50" : ""}`, __source: { fileName: "", lineNumber: 131, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6 text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 137, columnNumber: 29 }, __self: this }, index === 0 ? "👑" : index === 1 ? "🥈" : index === 2 ? "🥉" : index + 1), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6 text-gray-900", __source: { fileName: "", lineNumber: 146, columnNumber: 29 }, __self: this }, rank.player_name), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6 text-gray-900 font-bold", __source: { fileName: "", lineNumber: 149, columnNumber: 29 }, __self: this }, rank.score === -1 ? /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 151, columnNumber: 33 }, __self: this }, "×") : `${rank.score} 回/10秒`), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6 text-gray-700", __source: { fileName: "", lineNumber: 156, columnNumber: 29 }, __self: this }, new Date(rank.created_at).toLocaleString()))))))))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/game", className: "px-12 py-6 text-4xl bg-white text-gray-900 rounded-xl font-bold hover:bg-gray-100 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.5)] hover:shadow-[0_0_30px_rgba(255,255,255,0.7)] transform hover:scale-105 transition-all duration-300 border-4 border-gray-900", style: { fontFamily: '"Press Start 2P", system-ui, sans-serif', textShadow: "2px 2px 0 #ccc" }, __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, "プレイ開始！")))), /*#__PURE__*/ React.createElement("link", { href: "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap", rel: "stylesheet", __source: { fileName: "", lineNumber: 183, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 187, columnNumber: 1 }, __self: this }, ` .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } `)); }