Cargando grid...

0/2,500
🥇 Bloques Oro (1 SOL)
0/3,500
🥈 Bloques Plata (0.5 SOL)
0/4,000
🥉 Bloques Bronce (0.1 SOL)
0
Total Ventas
-
💰 Selección Actual (SOL)
Selection = 0; for (let by = minBlockY; by <= maxBlockY; by++) { for (let bx = minBlockX; bx <= maxBlockX; bx++) { if (isBlockSold(bx, by)) soldInSelection++; } } const freeBlocks = blocksTotal - soldInSelection; const pricePerBlock = getPriceForBlock(startZone); const totalPrice = (freeBlocks * pricePerBlock).toFixed(4); if (startZone !== endZone) { selectionAmountSpan.textContent = '-'; } else { selectionAmountSpan.textContent = (blocksTotal * pricePerBlock).toFixed(4); } if (startZone !== endZone) { selectionInfo.innerHTML = `❌ Selección inválida: No puedes mezclar zonas diferentes`; selectionOverlay.style.border = '3px solid #dc3545'; selectionOverlay.style.boxShadow = '0 0 10px #dc3545'; } else if (soldInSelection > 0) { selectionInfo.innerHTML = `⚠️ Selección: ${blocksX}×${blocksY} bloques (${getZoneName(startZone)}) | Ocupados: ${soldInSelection} | Disponibles: ${freeBlocks} | Precio: ${totalPrice} SOL`; selectionOverlay.style.border = '3px solid #dc3545'; selectionOverlay.style.boxShadow = '0 0 10px #dc3545'; } else { selectionInfo.innerHTML = `✓ Selección: ${blocksX}×${blocksY} bloques (${getZoneName(startZone)}) | Precio: ${(blocksTotal * pricePerBlock).toFixed(4)} SOL`; selectionOverlay.style.border = '3px solid cyan'; selectionOverlay.style.boxShadow = '0 0 10px cyan'; } const scale = canvas.getBoundingClientRect().width / CANVAS_SIZE; selectionOverlay.style.display = 'block'; selectionOverlay.style.left = (minX * scale) + 'px'; selectionOverlay.style.top = (minY * scale) + 'px'; selectionOverlay.style.width = (width * scale) + 'px'; selectionOverlay.style.height = (height * scale) + 'px'; } function handleUp(e) { if (!isDragging) return; isDragging = false; if (endX === undefined || endY === undefined) { selection = null; return; } const minX = Math.min(startX, endX); const maxX = Math.max(startX, endX); const minY = Math.min(startY, endY); const maxY = Math.max(startY, endY); const minBlockX = minX / BLOCK_SIZE; const minBlockY = minY / BLOCK_SIZE; const maxBlockX = maxX / BLOCK_SIZE; const maxBlockY = maxY / BLOCK_SIZE; const startZone = getZone(minBlockY); const endZone = getZone(maxBlockY); if (startZone !== endZone) { alert(`❌ No puedes seleccionar bloques de zonas diferentes.`); selection = null; selectionOverlay.style.display = 'none'; selectionInfo.textContent = ''; selectionAmountSpan.textContent = '-'; confirmBtn.disabled = true; return; } let soldIn 0 2px 10px rgba(0,0,0,0.5); backdrop-filter: blur(10px); } .logo { font-size: 32px; font-weight: bold; display: flex; align-items: center; gap: 15px; } .logo img { width: 50px; height: 50px; object-fit: contain; } .connectBtn { padding: 10px 20px; background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border: none; border-radius: 8px; color: #fff; cursor: pointer; font-weight: bold; transition: transform 0.2s; } .connectBtn:hover { transform: scale(1.05); } .connectBtn:disabled { background: #666; cursor: not-allowed; transform: none; } #info { padding: 15px; background: rgba(51, 51, 51, 0.8); text-align: center; backdrop-filter: blur(10px); } #stats { display: flex; justify-content: center; gap: 30px; padding: 10px; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-value { font-size: 24px; font-weight: bold; color: gold; } .stat-label { font-size: 12px; color: #aaa; text-transform: uppercase; } #gridWrapper { display: flex; justify-content: center; padding: 20px; } #gridContainer { position: relative; display: inline-block; border: 3px solid #444; border-radius: 8px; overflow: hidden; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); } #canvas { display: block; cursor: pointer; image-rendering: pixelated; background: #555; } #selectionOverlay { position: absolute; pointer-events: none; display: none; z-index: 20; background: rgba(0, 255, 255, 0.1); border: 2px solid cyan; box-shadow: