function MainComponent() { const [language, setLanguage] = React.useState("en"); const [spinning, setSpinning] = React.useState(false); const [currentStation, setCurrentStation] = React.useState(null); const [showHowToPlay, setShowHowToPlay] = React.useState(false); const [spinDuration, setSpinDuration] = React.useState(5000); const [currentIndex, setCurrentIndex] = React.useState(0); const stations = [ "Akihabara", "Ueno", "Okachimachi", "Yurakucho", "Shinagawa", "Tokyo", "Kanda", "Nippori", "Nishi-Nippori", "Tabata", "Komagome", "Sugamo", "Otsuka", "Ikebukuro", "Mejiro", "Takadanobaba", "Shin-Okubo", "Shinjuku", "Yoyogi", "Harajuku", "Shibuya", "Ebisu", "Meguro", "Gotanda", "Osaki", "Tamachi", "Hamamatsucho", "Shimbashi", "Yoyogi", "Harajuku" ]; const goodChoices = [ "Akihabara", "Ueno", "Okachimachi", "Yurakucho", "Shinagawa" ]; const stationNamesJP = { "Akihabara": "秋葉原", "Ueno": "上野", "Okachimachi": "御徒町", "Yurakucho": "有楽町", "Shinagawa": "品川" }; const handleSpin = ()=>{ if (spinning) return; setSpinning(true); const newDuration = Math.floor(Math.random() * 5000) + 5000; setSpinDuration(newDuration); let timer = 0; const interval = setInterval(()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % stations.length); timer += 100; if (timer >= newDuration) { clearInterval(interval); const finalStation = stations[currentIndex]; setCurrentStation(finalStation); setSpinning(false); if (goodChoices.includes(finalStation)) { setTimeout(()=>{ window.location.href = `/${finalStation}`; }, 1000); } } }, 100); }; const toggleLanguage = ()=>{ setLanguage(language === "en" ? "jp" : "en"); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-green-100 font-roboto flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleLanguage, className: "absolute top-4 right-4 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, language === "en" ? "日本語" : "English"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowHowToPlay(true), className: "absolute top-4 left-4 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, language === "en" ? "How To Play" : "プレイ方法"), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, "Tokyo Yamanote Backgammon"), /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[300px] md:w-[400px] md:h-[400px] bg-green-500 rounded-full border-4 border-green-700", onClick: handleSpin, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, stations.map((station, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute w-4 h-4 bg-black rounded-full ${spinning && index === currentIndex ? "animate-pulse" : ""}`, style: { top: `${50 + 45 * Math.cos(2 * Math.PI * index / 30)}%`, left: `${50 + 45 * Math.sin(2 * Math.PI * index / 30)}%`, transform: "translate(-50%, -50%)" }, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, spinning ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/images/${stations[currentIndex]}.jpg`, alt: `${stations[currentIndex]} station iconic image`, className: "w-32 h-32 rounded-full mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, stationNamesJP[stations[currentIndex]] || stations[currentIndex])) : /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, language === "en" ? "Tap to spin!" : "タップしてスピン！"))), !spinning && currentStation && /*#__PURE__*/ React.createElement("div", { className: `mt-4 text-xl font-bold ${goodChoices.includes(currentStation) ? "text-green-500" : "text-red-500"} station-name-animation`, __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, goodChoices.includes(currentStation) ? language === "en" ? `You're going to ${currentStation}!` : `${stationNamesJP[currentStation]}に行きます！` : language === "en" ? "You lost the destination! Spin again!" : "目的地を失いました！もう一度スピン！"), showHowToPlay && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded max-w-md", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, language === "en" ? "This site is for visitors from abroad to enjoy Tokyo. This was developed at the #CreateTokyo event." : "このサイトは外国からの訪問客が東京を楽しむためにあります。これは #CreateTokyo イベントで開発したものです"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowHowToPlay(false), className: "mt-4 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, language === "en" ? "Close" : "閉じる"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-sm text-center", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/AICUai/status/1812807771110375914", target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, "Generated in #CreateTokyo, AICU AIDX Lab + いまっち + のっぺ + 横田さんチーム")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, ` @keyframes stationNameAnimation { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1); } } .station-name-animation { animation: stationNameAnimation 1s ease-in-out; } `)); }