function MainComponent() { const [currentBuildingIndex, setCurrentBuildingIndex] = React.useState(0); const [completion, setCompletion] = React.useState(0); const buildings = [ { buildingName: "Willis Tower", buildingHeight: "442m" }, { buildingName: "Trump International Hotel and Tower", buildingHeight: "423m" }, { buildingName: "Aon Center", buildingHeight: "346m" }, { buildingName: "John Hancock Center", buildingHeight: "344m" } ]; const handleNextBuilding = ()=>{ const nextBuildingIndex = currentBuildingIndex + 1; if (nextBuildingIndex < buildings.length) { setCurrentBuildingIndex(nextBuildingIndex); } else { setCompletion(100); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6 text-[#2d3436] font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Chicago Building Game"), completion === 100 ? /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold text-[#2d3436] font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Congratulations! You've built all of Chicago's famous skyscrapers!") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold mb-4 text-[#2d3436] font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Build the ", buildings[currentBuildingIndex].buildingName), /*#__PURE__*/ React.createElement("div", { className: "flex flex-row items-end", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${buildings[currentBuildingIndex].buildingName.replace(/\s+/g, '-').toLowerCase()}.png`, alt: `Build the ${buildings[currentBuildingIndex].buildingName}`, className: "h-[300px] animate-rise", style: { animationDuration: buildings[currentBuildingIndex].buildingHeight }, __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleNextBuilding, className: "bg-white text-[#2d3436] mt-6 p-2 rounded shadow font-medium w-full text-center hover:bg-gray-200 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Next Building"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, ` @keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } `)); }