function MainComponent() { const [gemColors, setGemColors] = React.useState(Array.from({ length: 64 }, ()=>Math.floor(Math.random() * 5))); const [selectedGemIndex, setSelectedGemIndex] = React.useState(null); const colorMap = [ 'text-red-500', 'text-blue-500', 'text-yellow-500', 'text-green-500', 'text-purple-500' ]; const gemTypes = [ '💎', '🔮', '💠', '🔷', '🔶' ]; const swapGems = (indexA, indexB)=>{ setGemColors((current)=>{ const newColors = [ ...current ]; [newColors[indexA], newColors[indexB]] = [ newColors[indexB], newColors[indexA] ]; return newColors; }); }; const handleGemClick = (index)=>{ if (selectedGemIndex === null) { setSelectedGemIndex(index); } else { if (index === selectedGemIndex + 1 || index === selectedGemIndex - 1 || index === selectedGemIndex + 8 || index === selectedGemIndex - 8) { swapGems(index, selectedGemIndex); setSelectedGemIndex(null); } else { setSelectedGemIndex(index); } } }; React.useEffect(()=>{ const findAndRemoveMatches = ()=>{ setGemColors((current)=>{ const newColors = [ ...current ]; let matchFound = false; for(let i = 0; i < 64; i++){ const row = Math.floor(i / 8); const col = i % 8; if (col < 6 && newColors[i] === newColors[i + 1] && newColors[i] === newColors[i + 2]) { [newColors[i], newColors[i + 1], newColors[i + 2]] = [ -1, -1, -1 ]; matchFound = true; } if (row < 6 && newColors[i] === newColors[i + 8] && newColors[i] === newColors[i + 16]) { [newColors[i], newColors[i + 8], newColors[i + 16]] = [ -1, -1, -1 ]; matchFound = true; } } if (matchFound) { for(let col = 0; col < 8; col++){ for(let row = 7; row >= 0; row--){ if (newColors[row * 8 + col] === -1) { for(let aboveRow = row; aboveRow >= 0; aboveRow--){ if (aboveRow === 0) { newColors[aboveRow * 8 + col] = Math.floor(Math.random() * 5); } else { newColors[aboveRow * 8 + col] = newColors[(aboveRow - 1) * 8 + col]; } } } } } } return newColors; }); }; findAndRemoveMatches(); }, [ gemColors ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 flex justify-center items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-10 rounded-lg shadow-lg w-[90%] max-w-[900px] h-[600px] overflow-hidden", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-3xl font-bold font-roboto mb-5", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Матч-3 Игра"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-2 w-full h-full", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, gemColors.map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-full h-full ${colorMap[color]} rounded-lg flex justify-center items-center cursor-pointer ${selectedGemIndex === index ? 'ring-4 ring-offset-2 ring-offset-red-500 ring-white' : ''}`, onClick: ()=>handleGemClick(index), __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, gemTypes[color])))))); }