function MainComponent() { const players = [ { name: "Player 1", points: 5, cardCount: 3 }, { name: "Player 2", points: 15, cardCount: 5 }, { name: "Player 3", points: 20, cardCount: 4 }, { name: "Player 4", points: 10, cardCount: 2 }, { name: "自分", points: 25, cardCount: 5, cards: [ "🂡", "🂢", "🂣", "🂤", "🂥" ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#0B3D91] text-white", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center font-roboto my-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "トランプゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col justify-between items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center mb-4 w-full px-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, players.slice(0, 4).map((player, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#FFD700] shadow-md rounded-lg w-[100px] p-2 m-2", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-md font-crimson-text", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, player.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "ポイント: ", player.points), /*#__PURE__*/ React.createElement("div", { className: "text-xs mb-1", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "手持ち枚数: ", player.cardCount), /*#__PURE__*/ React.createElement("div", { className: "mt-1 flex justify-center", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[60px] bg-[#E0E0E0] rounded flex items-center justify-center", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-bold text-[#757575]", __source: { fileName: "", lineNumber: 22, columnNumber: 19 }, __self: this }, "🂠")))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mb-4 w-full", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[120px] h-[180px] bg-[#9E9E9E] rounded flex items-center justify-center mx-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl font-bold", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "🂠")), /*#__PURE__*/ React.createElement("div", { className: "w-[120px] h-[180px] bg-[#757575] rounded flex items-center justify-center mx-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl font-bold", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "🃏"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-auto mb-4 w-full", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFD700] shadow-md rounded-lg w-[300px] p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg font-crimson-text", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, players[4].name), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "ポイント: ", players[4].points), /*#__PURE__*/ React.createElement("div", { className: "text-sm mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "手持ち枚数: ", players[4].cardCount), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-center", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, players[4].cards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[40px] h-[60px] bg-[#E0E0E0] rounded ml-[-20px] flex items-center justify-center", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-bold text-[#757575]", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, card))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` .bg-[#0B3D91] { background-image: url('/casino_bg.jpg'); background-size: cover; background-position: center; } `)); }