const { useState, useRef, useEffect } = React; const ShadowAdjustModalContent = ({ formData, initialParams, onClose, onSave }) => { const [params, setParams] = useState(initialParams || { corners: null, imgWidth: 0, imgHeight: 0, blur: 4, opacity: 0.25, globalOffsetX: 0, globalOffsetY: 0, globalScale: 1 }); const [draggingCorner, setDraggingCorner] = useState(null); const [draggingShadow, setDraggingShadow] = useState(null); const imgContainerRef = useRef(null); // Ref to the image wrapper to calculate local coords const imageElRef = useRef(null); const initCorners = (w, h) => { setParams(prev => { if (prev.corners) return prev; return { ...prev, imgWidth: w, imgHeight: h, corners: [ { x: 0, y: h * 0.6 }, { x: w, y: h * 0.6 }, { x: w, y: h }, { x: 0, y: h } ], globalOffsetX: prev.globalOffsetX !== undefined ? prev.globalOffsetX : 0, globalOffsetY: prev.globalOffsetY !== undefined ? prev.globalOffsetY : 0, globalScale: prev.globalScale !== undefined ? prev.globalScale : 1, blur: prev.blur !== undefined ? prev.blur : 4, opacity: prev.opacity !== undefined ? prev.opacity : 0.25 }; }); }; const handleImgLoad = (e) => { if (params.corners) return; const w = e.target.offsetWidth; const h = e.target.offsetHeight; if (w > 0 && h > 0) { initCorners(w, h); } }; useEffect(() => { let frameId; const checkImage = () => { if (params.corners) return; // Ya está inicializado if (imageElRef.current && imageElRef.current.complete) { const w = imageElRef.current.offsetWidth; const h = imageElRef.current.offsetHeight; if (w > 0 && h > 0) { initCorners(w, h); return; } } frameId = requestAnimationFrame(checkImage); }; checkImage(); return () => { if (frameId) cancelAnimationFrame(frameId); }; }, [params.corners]); const getMatrix = () => { if (!params.corners || !params.imgWidth || !params.imgHeight || !window.solveHomography) return 'none'; const w = params.imgWidth; const h = params.imgHeight; const src = [{ x: 0, y: 0 }, { x: w, y: 0 }, { x: w, y: h }, { x: 0, y: h }]; const h_mat = window.solveHomography(src, params.corners); return `translate(${params.globalOffsetX || 0}px, ${params.globalOffsetY || 0}px) scale(${params.globalScale || 1}) matrix3d(${h_mat.join(',')})`; }; const handlePointerDown = (e, index) => { e.stopPropagation(); e.target.setPointerCapture(e.pointerId); setDraggingCorner(index); }; const handleShadowPointerDown = (e) => { e.stopPropagation(); e.target.setPointerCapture(e.pointerId); setDraggingShadow({ startX: e.clientX, startY: e.clientY, startOffsetX: params.globalOffsetX || 0, startOffsetY: params.globalOffsetY || 0 }); }; const handlePointerMove = (e) => { if (draggingCorner !== null) { if (!imgContainerRef.current || !params.corners) return; const rect = imgContainerRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const gx = params.globalOffsetX !== undefined ? params.globalOffsetX : 0; const gy = params.globalOffsetY !== undefined ? params.globalOffsetY : 0; const gs = params.globalScale !== undefined ? params.globalScale : 1; const newCorners = [...params.corners]; newCorners[draggingCorner] = { x: (x - gx) / gs, y: (y - gy) / gs }; setParams({ ...params, corners: newCorners }); } else if (draggingShadow !== null) { const dx = e.clientX - draggingShadow.startX; const dy = e.clientY - draggingShadow.startY; setParams({ ...params, globalOffsetX: draggingShadow.startOffsetX + dx, globalOffsetY: draggingShadow.startOffsetY + dy }); } }; const handlePointerUp = (e) => { if (draggingCorner !== null) { try { e.target.releasePointerCapture(e.pointerId); } catch (err) { } setDraggingCorner(null); } if (draggingShadow !== null) { try { e.target.releasePointerCapture(e.pointerId); } catch (err) { } setDraggingShadow(null); } }; return (

Ajustar Sombra: {(formData.name && formData.name.es) || 'Asset'}

{/* Preview Area */}
{/* Contenedor de la Sombra */}
{params.corners && ( )}
Asset Preview {/* Tiradores de las esquinas */} {params.corners && params.corners.map((corner, i) => { const gx = params.globalOffsetX !== undefined ? params.globalOffsetX : 0; const gy = params.globalOffsetY !== undefined ? params.globalOffsetY : 0; const gs = params.globalScale !== undefined ? params.globalScale : 1; const finalX = corner.x * gs + gx; const finalY = corner.y * gs + gy; return (
handlePointerDown(e, i)} style={{ position: 'absolute', left: finalX, top: finalY, width: 20, height: 20, transform: 'translate(-50%, -50%)', background: '#fff', border: '3px solid var(--primary-i100)', borderRadius: '50%', cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.4)', zIndex: 10 }} /> ); })}
{/* Controls Area */}

Arrastra los círculos en la previsualización para deformar la sombra. Usa estos controles para moverla o cambiar su tamaño global.

setParams({ ...params, globalOffsetX: parseInt(e.target.value) })} style={{ width: '100%' }} />
setParams({ ...params, globalOffsetY: parseInt(e.target.value) })} style={{ width: '100%' }} />
setParams({ ...params, globalScale: parseFloat(e.target.value) })} style={{ width: '100%' }} />
setParams({ ...params, blur: parseFloat(e.target.value) })} style={{ width: '100%' }} />
setParams({ ...params, opacity: parseFloat(e.target.value) })} style={{ width: '100%' }} />
); }; const AdminClinicMapBuilder = function ({ lang, setToast, onClose }) { if (!window.CLINIC_TILES) { window.CLINIC_TILES = [ { id: 'floor_default', name: 'Piso', type: 'floor', colorTop: '#EAE4DC', colorLeft: '#d6cfc4', colorRight: '#c4bcae', height: 10, w: 200, l: 200 }, { id: 'wall_custom', type: 'wall', name: 'Pared', width: 200, length: 20, height: 300, colorTop: '#F2F8FF', colorLeft: '#E2F1FF', colorRight: '#D2E6FA', cost: 50 }, { id: 'wall_custom_y', type: 'wall', name: 'Pared', width: 20, length: 200, height: 300, colorTop: '#F2F8FF', colorLeft: '#E2F1FF', colorRight: '#D2E6FA', cost: 50, hidden: true } ]; } const [tiles, setTiles] = React.useState(() => { const initial = window.CLINIC_MAP_TILES || []; return initial.map(t => { if (t.colorTop) return t; // Already has saved colors const def = window.CLINIC_TILES.find(d => d.id === t.id); if (!def) return t; return { ...t, colorTop: def.colorTop, colorLeft: def.colorLeft, colorRight: def.colorRight }; }); }); const [activeTool, setActiveTool] = React.useState(null); const [hoverCell, setHoverCell] = React.useState(null); const [hoverSub, setHoverSub] = React.useState('x'); const [hoverTileKey, setHoverTileKey] = React.useState(null); const [updateTrigger, setUpdateTrigger] = React.useState(0); const [mapAreas, setMapAreas] = React.useState(window.CLINIC_MAP_AREAS || []); const [areas, setAreas] = React.useState(window.CLINIC_AREAS || []); const [selectionStart, setSelectionStart] = React.useState(null); const selectionStartRef = React.useRef(null); const [selectionCurrent, setSelectionCurrent] = React.useState(null); const [isSelecting, setIsSelecting] = React.useState(false); const [showAreaModal, setShowAreaModal] = React.useState(false); const [areaFormData, setAreaFormData] = React.useState({ id: null, name: '', reqLevel: 0, price: 0 }); const [hoveredAreaId, setHoveredAreaId] = React.useState(null); const adjustColor = React.useCallback((hex, percent) => { hex = hex.replace(/^#/, ''); if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; let r = parseInt(hex.substring(0, 2), 16); let g = parseInt(hex.substring(2, 4), 16); let b = parseInt(hex.substring(4, 6), 16); r = Math.min(255, Math.max(0, parseInt(r * (100 + percent) / 100))); g = Math.min(255, Math.max(0, parseInt(g * (100 + percent) / 100))); b = Math.min(255, Math.max(0, parseInt(b * (100 + percent) / 100))); const RR = ((r.toString(16).length === 1) ? "0" + r.toString(16) : r.toString(16)); const GG = ((g.toString(16).length === 1) ? "0" + g.toString(16) : g.toString(16)); const BB = ((b.toString(16).length === 1) ? "0" + b.toString(16) : b.toString(16)); return "#" + RR + GG + BB; }, []); const handleColorChange = React.useCallback((id, newColor) => { const tileDef = window.CLINIC_TILES.find(d => d.id === id); if (tileDef) { tileDef.colorTop = newColor; tileDef.colorLeft = adjustColor(newColor, -10); tileDef.colorRight = adjustColor(newColor, -20); if (id === 'wall_custom') { const yWall = window.CLINIC_TILES.find(d => d.id === 'wall_custom_y'); if (yWall) { yWall.colorTop = tileDef.colorTop; yWall.colorLeft = tileDef.colorLeft; yWall.colorRight = tileDef.colorRight; } } setUpdateTrigger(prev => prev + 1); } }, [adjustColor]); const containerRef = React.useRef(null); const mapRef = React.useRef(null); const pos = React.useRef({ x: 0, y: 0 }); const vel = React.useRef({ x: 0, y: 0 }); const scale = React.useRef({ current: 0.1, target: 0.1 }); const zoomCenter = React.useRef(null); const isDragging = React.useRef(false); const lastMouse = React.useRef({ x: 0, y: 0 }); const rafRef = React.useRef(null); const imageSize = { w: 4096, h: 2286 }; const lastClickRef = React.useRef({ time: 0, instId: null, timeout: null }); // Trigger re-render occasionally if we need states updated, but mostly handled by refs const [, setTick] = React.useState(0); const enforceBounds = (p, currentScale) => { if (!containerRef.current) return p; const rect = containerRef.current.getBoundingClientRect(); const boundMinX = Math.min(rect.width - 7000 * currentScale, 3000 * currentScale); const boundMaxX = Math.max(rect.width - 7000 * currentScale, 3000 * currentScale); const boundMinY = Math.min(rect.height - 4000 * currentScale, 2000 * currentScale); const boundMaxY = Math.max(rect.height - 4000 * currentScale, 2000 * currentScale); return { x: Math.max(boundMinX, Math.min(boundMaxX, p.x)), y: Math.max(boundMinY, Math.min(boundMaxY, p.y)) }; }; const updateTransform = () => { if (mapRef.current) { mapRef.current.style.transform = `translate(${pos.current.x}px, ${pos.current.y}px) scale(${scale.current.current})`; } setTick(t => t + 1); // trigger re-render for ghost tile transform }; const startPhysicsLoop = () => { if (rafRef.current) return; let lastTime = performance.now(); const loop = (time) => { rafRef.current = requestAnimationFrame(loop); const dt = Math.min((time - lastTime) / 16, 2); lastTime = time; let needsUpdate = false; if (Math.abs(scale.current.target - scale.current.current) > 0.001) { const oldScale = scale.current.current; scale.current.current += (scale.current.target - scale.current.current) * 0.15 * dt; if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect(); const cx = zoomCenter.current ? zoomCenter.current.x : rect.width / 2; const cy = zoomCenter.current ? zoomCenter.current.y : rect.height / 2; const scaleRatio = scale.current.current / oldScale; pos.current.x = cx - (cx - pos.current.x) * scaleRatio; pos.current.y = cy - (cy - pos.current.y) * scaleRatio; } needsUpdate = true; } else { scale.current.current = scale.current.target; } if (!isDragging.current) { if (Math.abs(vel.current.x) > 0.1 || Math.abs(vel.current.y) > 0.1) { pos.current.x += vel.current.x * dt; pos.current.y += vel.current.y * dt; vel.current.x *= 0.90; vel.current.y *= 0.90; needsUpdate = true; } else { vel.current.x = 0; vel.current.y = 0; } } const boundedPos = enforceBounds(pos.current, scale.current.current); if (boundedPos.x !== pos.current.x || boundedPos.y !== pos.current.y) { if (!isDragging.current) { vel.current.x *= 0.5; vel.current.y *= 0.5; } pos.current = boundedPos; needsUpdate = true; } if (needsUpdate) { updateTransform(); } else if (!isDragging.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; } }; rafRef.current = requestAnimationFrame(loop); }; React.useEffect(() => { let baseScale = 0.1; if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect(); const initialScale = rect.height / imageSize.h; baseScale = initialScale; scale.current.current = initialScale; scale.current.target = initialScale; pos.current = enforceBounds({ x: (rect.width - imageSize.w * initialScale) / 2, y: (rect.height - imageSize.h * initialScale) / 2 }, initialScale); updateTransform(); startPhysicsLoop(); } const handleWheel = (e) => { if (!e.ctrlKey && !e.metaKey) return; e.preventDefault(); if (!containerRef.current) return; if (!window.__zoomAccum) window.__zoomAccum = 0; window.__zoomAccum += e.deltaY; if (Math.abs(window.__zoomAccum) < 30) return; const isZoomingIn = window.__zoomAccum < 0; window.__zoomAccum = 0; const rect = containerRef.current.getBoundingClientRect(); zoomCenter.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }; const minScale = baseScale * 0.5; let levels = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3]; levels = levels.filter(l => l >= minScale); if (levels[0] > minScale) levels.unshift(minScale); let currIdx = 0; let minDiff = Infinity; for (let i = 0; i < levels.length; i++) { const diff = Math.abs(levels[i] - scale.current.target); if (diff < minDiff) { minDiff = diff; currIdx = i; } } if (isZoomingIn) { currIdx = Math.min(levels.length - 1, currIdx + 1); } else { currIdx = Math.max(0, currIdx - 1); } scale.current.target = levels[currIdx]; startPhysicsLoop(); }; const node = containerRef.current; if (node) { node.addEventListener('wheel', handleWheel, { passive: false }); } return () => { if (node) node.removeEventListener('wheel', handleWheel); if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, []); const handlePointerDown = (e) => { if ((e.button === 0 && !activeTool) || e.button === 1) { isDragging.current = true; lastMouse.current = { x: e.clientX, y: e.clientY }; vel.current = { x: 0, y: 0 }; e.currentTarget.setPointerCapture(e.pointerId); startPhysicsLoop(); } }; const handlePointerMove = (e) => { if (!isDragging.current) return; const dx = e.clientX - lastMouse.current.x; const dy = e.clientY - lastMouse.current.y; if (Math.abs(dx) > 3 || Math.abs(dy) > 3) { if (lastClickRef.current && lastClickRef.current.timeout) { clearTimeout(lastClickRef.current.timeout); lastClickRef.current.timeout = null; lastClickRef.current.instId = null; } } pos.current.x += dx; pos.current.y += dy; vel.current.x = vel.current.x * 0.5 + dx * 0.5; vel.current.y = vel.current.y * 0.5 + dy * 0.5; lastMouse.current = { x: e.clientX, y: e.clientY }; updateTransform(); }; const handlePointerUp = (e) => { isDragging.current = false; if (e && e.currentTarget && e.pointerId !== undefined) { try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) { } } startPhysicsLoop(); }; const handleZoom = (factor) => { zoomCenter.current = null; const newTarget = Math.max(0.1, Math.min(3, scale.current.target * factor)); scale.current.target = newTarget; startPhysicsLoop(); }; const isAreaColliding = (areaId, ax, ay, ignoreInstId = null) => { const areaDef = areas.find(a => a.id === areaId); if (!areaDef) return false; const minX = ax; const maxX = ax + areaDef.width - 1; const minY = ay; const maxY = ay + areaDef.length - 1; return mapAreas.some(inst => { if (inst.id === ignoreInstId) return false; const oDef = areas.find(a => a.id === inst.areaId); if (!oDef) return false; const oMinX = inst.x; const oMaxX = inst.x + oDef.width - 1; const oMinY = inst.y; const oMaxY = inst.y + oDef.length - 1; return (minX <= oMaxX && maxX >= oMinX && minY <= oMaxY && maxY >= oMinY); }); }; const handleTileAction = (x, y, sub = hoverSub) => { if (!activeTool || activeTool === 'select_area') return; if (activeTool.startsWith('area_')) { const areaId = activeTool.replace('area_', ''); const areaDef = areas.find(a => a.id === areaId); if (!areaDef) return; const targetX = x - Math.floor(areaDef.width / 2); const targetY = y - Math.floor(areaDef.length / 2); if (isAreaColliding(areaId, targetX, targetY)) return; setMapAreas(prev => [...prev, { id: window.crypto.randomUUID(), areaId: areaId, x: targetX, y: targetY }]); setActiveTool(null); // Detach tool after placing return; } let toolToUse = activeTool; if (activeTool === 'wall_custom') { toolToUse = sub === 'y' ? 'wall_custom_y' : 'wall_custom'; } const def = window.CLINIC_TILES.find(d => d.id === toolToUse); if (!def) return; setTiles(prev => { const next = prev.filter(t => t.x !== x || t.y !== y); const existing = prev.filter(t => t.x === x && t.y === y); let z = 0; if (existing.length > 0) { if (def.type === 'floor') return prev; // No piso sobre otra cosa // Prevent duplicate wall of same orientation const hasSameWall = existing.some(t => t.id === toolToUse); if (hasSameWall) return prev; z = existing.reduce((sum, t) => { const d2 = window.CLINIC_TILES.find(dd => dd.id === t.id); return sum + (d2 && d2.type === 'floor' ? (d2.height || 0) : 0); }, 0); next.push(...existing); } next.push({ id: toolToUse, x, y, z, colorTop: def.colorTop, colorLeft: def.colorLeft, colorRight: def.colorRight }); return next; }); }; const handleRightClick = (e, x, y) => { e.preventDefault(); if (activeTool) { setActiveTool(null); } else if (x !== undefined && y !== undefined) { // Check if we hit a Map Area first let hitArea = null; for (let i = mapAreas.length - 1; i >= 0; i--) { const inst = mapAreas[i]; const areaDef = areas.find(a => a.id === inst.areaId); if (areaDef) { // Check if x, y falls within the area's bounding box if (x >= inst.x && x < inst.x + areaDef.width && y >= inst.y && y < inst.y + areaDef.length) { // Check if there is an actual tile here const hasTile = areaDef.tiles.some(t => t.dx === x - inst.x && t.dy === y - inst.y); if (hasTile) { hitArea = inst.id; break; } } } } if (hitArea) { setMapAreas(prev => prev.filter(a => a.id !== hitArea)); return; } // Erase regular tile setTiles(prev => { const atPos = prev.filter(t => t.x === x && t.y === y).sort((a, b) => b.z - a.z); if (atPos.length === 0) return prev; const top = atPos[0]; return prev.filter(t => t !== top); }); } }; const [saveStatus, setSaveStatus] = React.useState(false); const [isSavingMap, setIsSavingMap] = React.useState(false); const saveMap = async () => { setIsSavingMap(true); try { const currentContent = window.GAME_CONTENT || {}; currentContent.clinicMapTiles = tiles; currentContent.clinicAreas = areas; currentContent.clinicMapAreas = mapAreas; window.GAME_CONTENT = currentContent; // Actualizar variables globales para que al reabrir el modal sin refrescar, sigan ahí window.CLINIC_MAP_TILES = tiles; window.CLINIC_AREAS = areas; window.CLINIC_MAP_AREAS = mapAreas; // Verificar si estamos editando una plantilla const lastEdited = localStorage.getItem('admin_last_edited_template'); let isTemplate = false; let templateInfo = null; if (lastEdited) { try { templateInfo = JSON.parse(lastEdited); isTemplate = true; } catch (e) { } } if (isTemplate && templateInfo && window.cloudSaveTemplate) { // Guardar en la plantilla, NO en el juego en vivo! let savedLocally = false; const filePathToSave = templateInfo.path || `templates/plantilla-${templateInfo.id}.json`; try { const resp = await fetch('/api/save-template', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ filePath: filePathToSave, content: currentContent }) }); const result = await resp.json(); if (result.ok) savedLocally = true; } catch (e) { } if (!savedLocally) { const res = await window.cloudSaveTemplate(templateInfo.id, templateInfo.name, currentContent); if (!res.ok) throw new Error(res.error || 'Template cloud save failed'); } } else if (window.cloudSaveGameContent) { // Guardar en el juego en vivo const res = await window.cloudSaveGameContent(currentContent); if (!res.ok) throw new Error(res.error || 'Cloud save failed'); } if (window.electronAPI) { await window.electronAPI.updateGameContent({ clinicMapTiles: tiles, clinicAreas: areas, clinicMapAreas: mapAreas }); } else { const localContent = JSON.parse(localStorage.getItem('gameContent') || '{}'); localContent.clinicMapTiles = tiles; localContent.clinicAreas = areas; localContent.clinicMapAreas = mapAreas; localStorage.setItem('gameContent', JSON.stringify(localContent)); } window.dispatchEvent(new Event('clinicMapUpdated')); setSaveStatus(true); setTimeout(() => setSaveStatus(false), 2000); } catch (e) { console.error(e); if (setToast) setToast({ type: 'error', message: 'Error al guardar.' }); } finally { setIsSavingMap(false); } }; // Helper to generate pointer events for grid cells and 3D tiles const getTileEvents = (x, y, tileKey = null) => ({ onPointerDown: (e) => { if (activeTool && activeTool !== 'select_area' || e.button === 2) e.stopPropagation(); try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) { } if (activeTool === 'select_area' && e.button === 0) { setIsSelecting(true); setSelectionStart({ x, y }); setSelectionCurrent({ x, y }); return; } const rect = e.currentTarget.getBoundingClientRect(); const isRightHalf = e.clientX > (rect.left + rect.width / 2); const sub = isRightHalf ? 'x' : 'y'; if (activeTool && activeTool.startsWith('wall_')) setHoverSub(sub); if (e.button === 0) { let hitArea = null; if (!activeTool) { for (let i = mapAreas.length - 1; i >= 0; i--) { const inst = mapAreas[i]; const areaDef = areas.find(a => a.id === inst.areaId); if (areaDef) { if (x >= inst.x && x < inst.x + areaDef.width && y >= inst.y && y < inst.y + areaDef.length) { const hasTile = areaDef.tiles.some(t => t.dx === x - inst.x && t.dy === y - inst.y); if (hasTile) { hitArea = inst; break; } } } } } if (hitArea) { const now = Date.now(); if (lastClickRef.current.instId === hitArea.id && now - lastClickRef.current.time < 300) { clearTimeout(lastClickRef.current.timeout); const areaDef = areas.find(a => a.id === hitArea.areaId); if (areaDef) { let wColor = '#F2F8FF', fColor = '#EAE4DC'; if (areaDef.tiles && areaDef.tiles.length > 0) { const wTile = areaDef.tiles.find(t => window.CLINIC_TILES.find(d => d.id === t.id)?.type === 'wall'); if (wTile) wColor = wTile.colorTop || window.CLINIC_TILES.find(d => d.id === wTile.id)?.colorTop || '#F2F8FF'; const fTile = areaDef.tiles.find(t => window.CLINIC_TILES.find(d => d.id === t.id)?.type === 'floor'); if (fTile) fColor = fTile.colorTop || window.CLINIC_TILES.find(d => d.id === fTile.id)?.colorTop || '#EAE4DC'; } setAreaFormData({ id: areaDef.id, name: areaDef.name, reqLevel: areaDef.reqLevel, price: areaDef.price, wallColor: wColor, floorColor: fColor }); setShowAreaModal(true); } lastClickRef.current.instId = null; } else { const timeout = setTimeout(() => { if (lastClickRef.current.timeout === timeout) { setMapAreas(prev => prev.filter(a => a.id !== hitArea.id)); setActiveTool(`area_${hitArea.areaId}`); } }, 250); lastClickRef.current = { time: now, instId: hitArea.id, timeout }; } return; } handleTileAction(x, y, sub); } else if (e.button === 2) handleRightClick(e, x, y); }, onPointerMove: (e) => { const rect = e.currentTarget.getBoundingClientRect(); const isRightHalf = e.clientX > (rect.left + rect.width / 2); if (activeTool && activeTool.startsWith('wall_')) setHoverSub(isRightHalf ? 'x' : 'y'); }, onPointerEnter: (e) => { setHoverCell({ x, y }); if (tileKey) setHoverTileKey(tileKey); if (activeTool === 'select_area' && e.buttons === 1) { setSelectionCurrent({ x, y }); return; } const rect = e.currentTarget.getBoundingClientRect(); const isRightHalf = e.clientX > (rect.left + rect.width / 2); const sub = isRightHalf ? 'x' : 'y'; if (activeTool && activeTool.startsWith('wall_')) setHoverSub(sub); if (e.buttons === 1 && (!activeTool || !activeTool.startsWith('area_'))) handleTileAction(x, y, sub); else if (e.buttons === 2) handleRightClick(e, x, y); }, onPointerUp: (e) => { if (isDragging.current) return; if (activeTool === 'select_area' && e.button === 0) { setIsSelecting(false); if (selectionStart && selectionCurrent) { const minX = Math.min(selectionStart.x, selectionCurrent.x); const maxX = Math.max(selectionStart.x, selectionCurrent.x); const minY = Math.min(selectionStart.y, selectionCurrent.y); const maxY = Math.max(selectionStart.y, selectionCurrent.y); let wColor = '#F2F8FF', fColor = '#EAE4DC'; const selectedTiles = tiles.filter(t => t.x >= minX && t.x <= maxX && t.y >= minY && t.y <= maxY); const wTile = selectedTiles.find(t => window.CLINIC_TILES.find(d => d.id === t.id)?.type === 'wall'); if (wTile) wColor = wTile.colorTop || window.CLINIC_TILES.find(d => d.id === wTile.id)?.colorTop || '#F2F8FF'; const fTile = selectedTiles.find(t => window.CLINIC_TILES.find(d => d.id === t.id)?.type === 'floor'); if (fTile) fColor = fTile.colorTop || window.CLINIC_TILES.find(d => d.id === fTile.id)?.colorTop || '#EAE4DC'; setAreaFormData(prev => ({ ...prev, id: null, wallColor: wColor, floorColor: fColor })); setShowAreaModal(true); } return; } }, onPointerLeave: () => { // hoverCell not cleared here to avoid ghost flickering between adjacent tiles if (hoverTileKey === tileKey) setHoverTileKey(null); }, onContextMenu: (e) => handleRightClick(e, x, y) }); // Generate 30x30 clickable cells const cells = []; for (let x = 0; x < 30; x++) { for (let y = 0; y < 30; y++) { const gx = x * 200 + 8400; const gy = y * 200 - 3200; const svgX = (gx - gy) * 0.70710678; const svgY = (gx + gy) * 0.408248; const sx = svgX - 6144; const sy = svgY - 3429; const p1x = 200 * 0.70710678; const p1y = 200 * 0.408248; const p3x = -200 * 0.70710678; const p3y = 200 * 0.408248; const p2x = p1x + p3x; const p2y = p1y + p3y; const face = `0,0 ${p1x},${p1y} ${p2x},${p2y} ${p3x},${p3y}`; cells.push( ); } } const btnStyle = { all: 'unset', boxSizing: 'border-box', width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--bg-1)', color: 'var(--fg-1)', boxShadow: 'var(--elevation-30)', cursor: 'pointer', fontSize: 16, transition: 'all 0.2s', border: '1px solid var(--border-subtle)' }; return (
{/* Header */}
Configurar Clínica
{/* Body */}
{/* Sidebar */}
Áreas
{areas.map(area => (
setActiveTool(activeTool === `area_${area.id}` ? null : `area_${area.id}`)} onMouseEnter={() => setHoveredAreaId(area.id)} onMouseLeave={() => setHoveredAreaId(null)} style={{ padding: '12px 0', borderBottom: '1px solid var(--border-subtle)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12, color: hoveredAreaId === area.id || activeTool === `area_${area.id}` ? 'var(--primary-i100)' : 'var(--fg-1)', transition: 'color 0.2s', position: 'relative' }} >
{area.name}
Nvl. {area.reqLevel || 0}
{window.formatNumWithMode ? window.formatNumWithMode(area.price || 0, 'short', lang) : (window.formatNum ? window.formatNum(area.price || 0) : area.price || 0)}
))}
{areas.length === 0 && (
No hay áreas. Arrastra sobre el mapa para crear una.
)}
{/* Canvas 3D */} { if (isRightClick) { handleRightClick({ preventDefault: () => {} }, x, y); } else { if (activeTool === 'select_area') return; let hitArea = null; if (!activeTool) { for (let i = mapAreas.length - 1; i >= 0; i--) { const inst = mapAreas[i]; const areaDef = areas.find(a => a.id === inst.areaId); if (areaDef && x >= inst.x && x < inst.x + areaDef.width && y >= inst.y && y < inst.y + areaDef.length) { if (areaDef.tiles.some(t => t.dx === x - inst.x && t.dy === y - inst.y)) { hitArea = inst; break; } } } } if (hitArea) { const now = Date.now(); if (lastClickRef.current.instId === hitArea.id && now - lastClickRef.current.time < 300) { clearTimeout(lastClickRef.current.timeout); const areaDef = areas.find(a => a.id === hitArea.areaId); if (areaDef) { setAreaFormData({ id: areaDef.id, name: areaDef.name, reqLevel: areaDef.reqLevel, price: areaDef.price, activeColor: '#F2F8FF', tiles: areaDef.tiles ? [...areaDef.tiles] : [], width: areaDef.width, length: areaDef.length, fourWalls: areaDef.fourWalls || false }); setShowAreaModal(true); } lastClickRef.current.instId = null; } else { const timeout = setTimeout(() => { if (lastClickRef.current.timeout === timeout) { setMapAreas(prev => prev.filter(a => a.id !== hitArea.id)); setActiveTool(`area_${hitArea.areaId}`); } }, 250); lastClickRef.current = { time: now, instId: hitArea.id, timeout }; } return; } // Only run handleTileAction if a tool is active (area creation on empty tiles is handled in onPointerDown) if (activeTool) handleTileAction(x, y, sub); } }} onGridDragStart={(x, y) => { setIsSelecting(true); selectionStartRef.current = { x, y }; setSelectionStart({ x, y }); setSelectionCurrent({ x, y }); }} onGridDragEnd={(x, y) => { setIsSelecting(false); setSelectionCurrent({ x, y }); const start = selectionStartRef.current; if (start) { const minX = Math.min(start.x, x); const maxX = Math.max(start.x, x); const minY = Math.min(start.y, y); const maxY = Math.max(start.y, y); // Auto-generate tiles const newTiles = []; for(let dx = 0; dx <= maxX - minX; dx++) { for(let dy = 0; dy <= maxY - minY; dy++) { // Floor newTiles.push({ id: 'floor_default', z: 0, dx, dy, colorTop: '#EAE4DC', colorLeft: adjustColor('#EAE4DC', -10), colorRight: adjustColor('#EAE4DC', -20) }); // Top Wall (if at dy === 0) if (dy === 0) { newTiles.push({ id: 'wall_custom', z: 0, dx, dy, colorTop: '#F2F8FF', colorLeft: adjustColor('#F2F8FF', -10), colorRight: adjustColor('#F2F8FF', -20) }); } // Left Wall (if at dx === 0) if (dx === 0) { newTiles.push({ id: 'wall_custom_y', z: 0, dx, dy, colorTop: '#F2F8FF', colorLeft: adjustColor('#F2F8FF', -10), colorRight: adjustColor('#F2F8FF', -20) }); } } } setAreaFormData({ id: null, name: '', reqLevel: 0, price: 0, activeColor: '#F2F8FF', tiles: newTiles, width: maxX - minX + 1, length: maxY - minY + 1, fourWalls: false, minX, minY }); setShowAreaModal(true); } }} />
{/* Area Modal */} {showAreaModal && ( setShowAreaModal(false)} maxWidth={900} persistent={true}>
{/* Left Column: Settings */}

{areaFormData.id ? 'Editar Área' : 'Crear Área'}

setAreaFormData({ ...areaFormData, name: e.target.value })} style={{ width: '100%' }} placeholder="Ej: Sala de Espera" />
setAreaFormData({ ...areaFormData, price: e.target.value })} style={{ width: '100%' }} />
setAreaFormData({ ...areaFormData, reqLevel: e.target.value })} style={{ width: '100%' }} />
setAreaFormData({...areaFormData, activeColor: e.target.value})} style={{ width: 48, height: 48, padding: 0, border: 'none', cursor: 'pointer', borderRadius: 8 }} /> setAreaFormData({...areaFormData, activeColor: e.target.value})} style={{ flex: 1, height: 48 }} />
{['#F2F8FF', '#EAE4DC', '#CADDFB', '#d9c0a3', '#ffcccc', '#ccffcc', '#ccccff'].map(c => (
setAreaFormData({...areaFormData, activeColor: c})} style={{ width: 24, height: 24, background: c, borderRadius: '50%', cursor: 'pointer', border: areaFormData.activeColor === c ? '2px solid var(--fg-1)' : '1px solid var(--border)' }} /> ))}

Selecciona un color aquí, luego haz clic en las baldosas o paredes del modelo 3D para pintarlas.

{areaFormData.id && ( )}
{/* Right Column: 3D Preview */}
{window.ThreeAreaPainter && ( { setAreaFormData(prev => { const newTiles = [...prev.tiles]; const color = prev.activeColor || '#F2F8FF'; newTiles[tileIndex] = { ...newTiles[tileIndex], colorTop: color, colorLeft: adjustColor(color, -10), colorRight: adjustColor(color, -20) }; return { ...prev, tiles: newTiles }; }); }} /> )}
)}
); }; const AdminClinicView = function ({ lang, setToast }) { const [items, setItems] = useState([...(window.GAME_CONTENT.clinicAssets || [])]); const [areas, setAreas] = useState([...(window.GAME_CONTENT.clinicAreas || [])]); const [mapAreas, setMapAreas] = useState([...(window.GAME_CONTENT.clinicMapAreas || [])]); const [activeTool, setActiveTool] = useState('select_area'); const [editingIndex, setEditingIndex] = useState(null); const [selectedItems, setSelectedItems] = useState(new Set()); const [deleteTarget, setDeleteTarget] = useState(null); const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false); const [editLang, setEditLang] = useState('es'); const [draggedIndex, setDraggedIndex] = useState(null); const [dragOverIndex, setDragOverIndex] = useState(null); const [saveStatus, setSaveStatus] = useState(false); const [showMapBuilder, setShowMapBuilder] = useState(false); const [formData, setFormData] = useState({ id: '', name: { es: '', en: '' }, price: 0, interestRate: 1.15, reqLevel: 0, reqGeneratorId: '', reqGeneratorAmount: 0, iconUrl: 'assets/clinic/', flipX: false, hasShadow: true, upgrades: [] }); const [showUpgradesModal, setShowUpgradesModal] = useState(false); const [editingUpgradeIndex, setEditingUpgradeIndex] = useState(null); const [upgradeFormData, setUpgradeFormData] = useState(null); const [upgradeEditLang, setUpgradeEditLang] = useState('es'); const [hoveredUpgrade, setHoveredUpgrade] = useState(null); const [upgradeErrors, setUpgradeErrors] = useState({ name: false, iconUrl: false }); const [showShadowAdjustModal, setShowShadowAdjustModal] = useState(false); const [tempShadowParams, setTempShadowParams] = useState(null); const saveToGlobal = (newItems) => { setItems(newItems); if (window.GAME_CONTENT) window.GAME_CONTENT.clinicAssets = newItems; window.CLINIC_ASSETS = newItems; }; const handleDragStart = (e, index) => { setDraggedIndex(index); e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", index.toString()); }; const handleDragOver = (e, index) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; if (draggedIndex === null || draggedIndex === index) return; setDragOverIndex(index); }; const handleDrop = (e, index) => { e.preventDefault(); if (draggedIndex === null || draggedIndex === index) return; const newItems = [...items]; const item = newItems[draggedIndex]; newItems.splice(draggedIndex, 1); newItems.splice(index, 0, item); saveToGlobal(newItems); setDraggedIndex(null); setDragOverIndex(null); }; const handleDragEnd = () => { setDraggedIndex(null); setDragOverIndex(null); }; const handleCopyName = (nameObj) => { const nameStr = (nameObj && nameObj.es) || (nameObj && nameObj.en) || (typeof nameObj === 'string' ? nameObj : ''); if (!nameStr) return; navigator.clipboard.writeText(nameStr); if (setToast) { setToast({ id: 'copy_name_' + Date.now(), es: 'Nombre copiado al portapapeles', en: 'Name copied to clipboard' }); setTimeout(() => setToast(null), 2500); } }; const handleEdit = (index) => { setEditingIndex(index); const item = items[index]; setFormData({ id: item.id || `clinic_${Date.now()}`, name: { es: (item.name && item.name.es) || (typeof item.name === 'string' ? item.name : '') || item.es || '', en: (item.name && item.name.en) || (typeof item.name === 'string' ? item.name : '') || item.en || '' }, price: item.price || 0, interestRate: item.interestRate !== undefined ? item.interestRate : 1.15, reqLevel: item.reqLevel || 0, reqGeneratorId: item.reqGeneratorId || '', iconUrl: item.iconUrl || '', glbData: item.glbData || '', flipX: !!item.flipX, isWallAsset: item.isWallAsset || false, hasShadow: item.hasShadow !== false, shadowParams: item.shadowParams || null, upgrades: item.upgrades || [] }); }; const handleAdd = () => { setEditingIndex('new'); setFormData({ id: `clinic_${Date.now()}`, name: { es: '', en: '' }, price: 0, interestRate: 1.15, reqLevel: 0, reqGeneratorId: '', iconUrl: '', glbData: '', flipX: false, isWallAsset: false, hasShadow: true, shadowParams: null, upgrades: [] }); }; const handleDelete = (index) => { setDeleteTarget(index); }; const confirmDelete = () => { if (deleteTarget !== null) { const newItems = [...items]; newItems.splice(deleteTarget, 1); saveToGlobal(newItems); if (editingIndex === deleteTarget) setEditingIndex(null); setDeleteTarget(null); const newSelected = new Set(); selectedItems.forEach(i => { if (i < deleteTarget) newSelected.add(i); else if (i > deleteTarget) newSelected.add(i - 1); }); setSelectedItems(newSelected); } }; const handleToggleSelect = (index) => { const newSet = new Set(selectedItems); if (newSet.has(index)) newSet.delete(index); else newSet.add(index); setSelectedItems(newSet); }; const handleSelectAll = (e) => { if (e.target.checked) { setSelectedItems(new Set(items.map((_, i) => i))); } else { setSelectedItems(new Set()); } }; const confirmBulkDelete = () => { const newItems = items.filter((_, i) => !selectedItems.has(i)); saveToGlobal(newItems); setSelectedItems(new Set()); setShowBulkDeleteModal(false); setEditingIndex(null); }; const handleSaveForm = () => { const newItem = { ...(editingIndex !== 'new' ? items[editingIndex] : {}), id: formData.id, name: formData.name, es: formData.name.es, en: formData.name.en, price: Number(formData.price), interestRate: Number(formData.interestRate), reqLevel: Number(formData.reqLevel), reqGeneratorId: formData.reqGeneratorId, iconUrl: formData.iconUrl, flipX: formData.flipX, isWallAsset: formData.isWallAsset, hasShadow: formData.hasShadow, shadowParams: formData.shadowParams, upgrades: formData.upgrades || [] }; if (formData.glbData) { newItem.glbData = formData.glbData; newItem.is3D = true; } else { delete newItem.glbData; delete newItem.is3D; } const newItems = [...items]; let newEditingIndex = editingIndex; if (editingIndex === 'new') { newItems.push(newItem); newEditingIndex = newItems.length - 1; setEditingIndex(newEditingIndex); } else { newItems[editingIndex] = newItem; } saveToGlobal(newItems); setSaveStatus(true); setTimeout(() => setSaveStatus(false), 2000); }; const handleAddUpgrade = () => { setEditingUpgradeIndex('new'); setUpgradeErrors({ name: false, iconUrl: false }); setUpgradeFormData({ id: `${formData.id}_upg_${Date.now()}`, name: { es: '', en: '' }, price: 0, reqLevel: 0, reqGeneratorId: '', reqGeneratorAmount: 0, iconUrl: 'assets/clinic/', flipX: false }); }; const handleEditUpgrade = (index) => { setEditingUpgradeIndex(index); setUpgradeErrors({ name: false, iconUrl: false }); const upg = formData.upgrades[index]; setUpgradeFormData({ id: upg.id || `${formData.id}_upg_${Date.now()}`, name: { es: (upg.name && upg.name.es) || (typeof upg.name === 'string' ? upg.name : '') || upg.es || '', en: (upg.name && upg.name.en) || (typeof upg.name === 'string' ? upg.name : '') || upg.en || '' }, price: upg.price || 0, reqLevel: upg.reqLevel || 0, reqGeneratorId: upg.reqGeneratorId || '', reqGeneratorAmount: upg.reqGeneratorAmount || 0, iconUrl: upg.iconUrl || 'assets/clinic/', flipX: upg.flipX || false }); }; const handleDeleteUpgrade = (index) => { const newUpgrades = [...formData.upgrades]; newUpgrades.splice(index, 1); setFormData({ ...formData, upgrades: newUpgrades }); }; const handleSaveUpgradeForm = () => { const errs = { name: !upgradeFormData.name.es, iconUrl: !upgradeFormData.iconUrl }; setUpgradeErrors(errs); if (errs.name || errs.iconUrl) { return; } const newUpgrade = { ...upgradeFormData, es: upgradeFormData.name.es, en: upgradeFormData.name.en, price: Number(upgradeFormData.price), reqLevel: Number(upgradeFormData.reqLevel), reqGeneratorAmount: Number(upgradeFormData.reqGeneratorAmount), }; const newUpgrades = [...formData.upgrades]; if (editingUpgradeIndex === 'new') { newUpgrades.push(newUpgrade); } else { newUpgrades[editingUpgradeIndex] = newUpgrade; } setFormData({ ...formData, upgrades: newUpgrades }); setEditingUpgradeIndex(null); }; return (
{/* List */}
0 && selectedItems.size === items.length} onChange={handleSelectAll} style={{ cursor: 'pointer', width: 16, height: 16 }} />

Clínica ({items.length})

{selectedItems.size > 0 && ( )}
{items.length === 0 ? (

Sin assets

Aún no has creado ningún recurso para la clínica.

) : items.map((item, i) => (
handleDragStart(e, i)} onDragOver={(e) => handleDragOver(e, i)} onDrop={(e) => handleDrop(e, i)} onDragEnd={handleDragEnd} className={`admin-list-row ${editingIndex === i ? 'editing' : ''}`} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 12, background: dragOverIndex === i ? 'var(--primary-i10)' : 'var(--bg-1)', borderRadius: 8, border: dragOverIndex === i ? '2px dashed var(--primary-i100)' : '1px solid var(--border)', cursor: 'grab', opacity: draggedIndex === i ? 0.5 : 1, userSelect: 'none' }} onClick={() => handleCopyName(item.name || item)} >
e.stopPropagation()} onChange={() => handleToggleSelect(i)} style={{ cursor: 'pointer', width: 16, height: 16 }} />
{i + 1}.
{(window.GLBPreview && (item.glbData || item.modelUrl?.includes('.glb') || item.modelUrl?.includes('.gltf') || item.iconUrl?.includes('.glb') || item.iconUrl?.includes('.gltf') || item.is3D)) ? ( ) : ( )}
{(item.name && item.name.es) || item.es || (typeof item.name === 'string' ? item.name : '(Sin nombre)')}
Precio: {window.formatNum(item.price)} | Lvl Req: {item.reqLevel} {item.reqGeneratorId ? `| Gen: ${item.reqGeneratorId} (x${item.reqGeneratorAmount})` : ''}
))}
{/* Editor */} {editingIndex !== null && ( setEditingIndex(null)} >
setFormData({...formData, iconUrl: url})} size={120} style={{ marginBottom: 0, flexShrink: 0, border: formData.glbData ? 'none' : undefined, background: formData.glbData ? 'transparent' : undefined }} previewComponent={formData.glbData ? : null} />
setFormData({ ...formData, name: { ...formData.name, [editLang]: e.target.value } })} style={{ width: '100%' }} />
setFormData({...formData, glbData: data})} onSnapshot={(dataUrl) => setFormData(prev => { if (!prev.iconUrl || prev.iconUrl.startsWith('data:')) { return {...prev, iconUrl: dataUrl}; } return prev; })} height={240} isometric={true} />
setFormData({ ...formData, price: e.target.value })} style={{ width: '100%' }} />
setFormData({ ...formData, interestRate: e.target.value })} style={{ width: '100%' }} step="0.01" />
setFormData({ ...formData, reqLevel: e.target.value })} style={{ width: '100%' }} />
setFormData({ ...formData, reqGeneratorId: val })} style={{ width: '100%' }} options={[ { value: "", label: "Ninguno" }, ...(window.GENERATORS || []).map(g => ({ value: g.id, label: (g.name && g.name.es) || g.es || (typeof g.name === 'string' ? g.name : '(Sin nombre)') })) ]} />
{formData.reqGeneratorId && (
setFormData({ ...formData, reqGeneratorAmount: e.target.value })} style={{ width: '100%' }} />
)}
{formData.upgrades && formData.upgrades.length > 0 ? `${formData.upgrades.length} mejora${formData.upgrades.length !== 1 ? 's' : ''} creada${formData.upgrades.length !== 1 ? 's' : ''}.` : 'Sin mejoras creadas.'}
)} {/* Individual Delete Modal */} {deleteTarget !== null && ( setDeleteTarget(null)} maxWidth={400} persistent={false}>

¿Eliminar Asset?

Esta acción no se puede deshacer. ¿Estás seguro de que quieres eliminar este asset de la clínica?

 )} {/* Bulk Delete Modal */} {showBulkDeleteModal && ( setShowBulkDeleteModal(false)} maxWidth={400} persistent={false}>

¿Eliminar {selectedItems.size} Asset(s)?

Esta acción eliminará todos los assets seleccionados y no se puede deshacer.

 )} {/* Upgrades List Modal */} {showUpgradesModal && editingUpgradeIndex === null && ( setShowUpgradesModal(false)} maxWidth={500} persistent={true}>

Mejoras de {(formData.name && formData.name.es) || formData.es || 'Asset'}

{(!formData.upgrades || formData.upgrades.length === 0) ? (

Este objeto aún no tiene mejoras

) : (
{formData.upgrades.map((upg, i) => (
setHoveredUpgrade(i)} onMouseLeave={() => setHoveredUpgrade(null)} onClick={() => handleEditUpgrade(i)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: hoveredUpgrade === i ? 'var(--bg-2)' : 'var(--bg-1)', borderRadius: 8, border: '1px solid var(--border)', cursor: 'pointer', transition: 'background 0.2s' }} >
{upg.iconUrl ? ( ) : (
)}
{(upg.name && upg.name.es) || upg.es || '(Sin nombre)'}
{hoveredUpgrade === i && ( )}
))}
)}
)} {/* Upgrade Editor Modal */} {editingUpgradeIndex !== null && upgradeFormData && ( setEditingUpgradeIndex(null)} maxWidth={500} persistent={true}>

{editingUpgradeIndex === 'new' ? 'Añadir Mejora' : 'Editar Mejora'}

{upgradeFormData.iconUrl ? ( ) : ( )}
setUpgradeFormData({ ...upgradeFormData, name: { ...upgradeFormData.name, [upgradeEditLang]: e.target.value } })} style={{ width: '100%', border: upgradeErrors.name ? '1px solid var(--negative-i100)' : undefined }} /> {upgradeErrors.name &&
Este campo es requerido.
}
setUpgradeFormData({ ...upgradeFormData, iconUrl: e.target.value })} style={{ width: '100%', border: upgradeErrors.iconUrl ? '1px solid var(--negative-i100)' : undefined }} /> {upgradeErrors.iconUrl &&
Este campo es requerido.
}
setUpgradeFormData({ ...upgradeFormData, price: e.target.value })} style={{ width: '100%' }} />
setUpgradeFormData({ ...upgradeFormData, reqLevel: e.target.value })} style={{ width: '100%' }} />
setUpgradeFormData({ ...upgradeFormData, reqGeneratorId: val })} style={{ width: '100%' }} options={[ { value: "", label: "Ninguno" }, ...(window.GENERATORS || []).map(g => ({ value: g.id, label: (g.name && g.name.es) || g.es || (typeof g.name === 'string' ? g.name : '(Sin nombre)') })) ]} />
{upgradeFormData.reqGeneratorId && (
setUpgradeFormData({ ...upgradeFormData, reqGeneratorAmount: e.target.value })} style={{ width: '100%' }} />
)}
)} {/* Shadow Adjust Modal */} {showShadowAdjustModal && ( setShowShadowAdjustModal(false)} maxWidth={1000} persistent={true}> setShowShadowAdjustModal(false)} onSave={(newParams) => { setFormData({ ...formData, shadowParams: newParams }); setShowShadowAdjustModal(false); }} /> )} {/* Map Builder Modal */} {showMapBuilder && ( setShowMapBuilder(false)} setToast={setToast} lang={lang} /> )}
); }; window.AdminClinic = AdminClinicView;