@jjlmoya/utils-science 1.45.0 → 1.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-science",
-    "version": "1.45.0",
+    "version": "1.46.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/layouts/PreviewLayout.astro

@@ -78,6 +78,7 @@ const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Ast
     transition:
       background-color 0.3s ease,
       color 0.3s ease;
+    font-family: Inter, sans-serif;
   }
 
   main {

package/src/tool/asteroid-impact/asteroid-impact-simulator.css

@@ -242,21 +242,184 @@
 		color: #f87171;
 	}
 
+	.asteroid-observer-marker {
+		position: relative;
+		background: transparent;
+		border: 0;
+	}
+
+	.asteroid-observer-pulse {
+		position: absolute;
+		left: 50%;
+		bottom: 0.15rem;
+		width: 2.35rem;
+		height: 2.35rem;
+		border: 2px solid rgba(37, 99, 235, 0.42);
+		border-radius: 50%;
+		background: rgba(59, 130, 246, 0.14);
+		transform: translateX(-50%);
+		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.32);
+		animation: asteroid-observer-pulse 1.8s ease-out infinite;
+	}
+
+	.asteroid-observer-pin {
+		position: absolute;
+		left: 50%;
+		bottom: 0.62rem;
+		width: 1.75rem;
+		height: 2.05rem;
+		border: 2px solid #fff;
+		border-radius: 999px 999px 0.85rem 0.85rem;
+		background: #2563eb;
+		transform: translateX(-50%);
+		box-shadow: 0 10px 22px rgba(15, 23, 42, 0.32);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.12rem;
+	}
+
+	.asteroid-observer-head {
+		width: 0.48rem;
+		height: 0.48rem;
+		border-radius: 50%;
+		background: #fff;
+	}
+
+	.asteroid-observer-body {
+		width: 0.72rem;
+		height: 0.56rem;
+		border-radius: 999px 999px 0.25rem 0.25rem;
+		background: #fff;
+	}
+
+	.asteroid-observer-label {
+		position: absolute;
+		left: 50%;
+		bottom: 2.7rem;
+		padding: 0.18rem 0.42rem;
+		border-radius: var(--asteroid-radius-full);
+		background: rgba(15, 23, 42, 0.88);
+		color: #fff;
+		font-size: 0.55rem;
+		font-weight: 900;
+		letter-spacing: 0.05em;
+		transform: translateX(-50%);
+		box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
+	}
+
+	@keyframes asteroid-observer-pulse {
+		70% {
+			box-shadow: 0 0 0 0.75rem rgba(59, 130, 246, 0);
+		}
+
+		100% {
+			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+		}
+	}
+
 	.asteroid-desktop-lab {
-		display: none;
+		position: absolute;
+		left: 0.85rem;
+		right: 0.85rem;
+		bottom: 0;
+		z-index: 45;
+		display: flex;
+		max-height: min(82vh, 43rem);
+		padding: 0 0 0.9rem;
+		pointer-events: none;
+		transform: translateY(calc(100% - 4.85rem));
+		transition: transform var(--asteroid-transition-slow);
+	}
+
+	.asteroid-app.controls-open .asteroid-desktop-lab {
+		transform: translateY(0);
 	}
 
 	@media (min-width: 768px) {
 		.asteroid-desktop-lab {
-			display: flex;
-			position: absolute;
 			top: 1.5rem;
 			left: 1.5rem;
+			right: auto;
 			bottom: 1.5rem;
 			width: 20rem;
 			z-index: 30;
 			flex-direction: column;
+			max-height: none;
+			padding: 0;
 			pointer-events: none;
+			transform: none;
+			transition: none;
+		}
+	}
+
+	.asteroid-controls-toggle {
+		position: absolute;
+		left: 50%;
+		bottom: 2.15rem;
+		z-index: 50;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		min-height: 2.35rem;
+		padding: 0 1.05rem;
+		border: 1px solid rgba(148, 163, 184, 0.35);
+		border-radius: var(--asteroid-radius-full);
+		background: rgba(248, 250, 252, 0.92);
+		color: #1e293b;
+		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
+		backdrop-filter: blur(12px);
+		font-size: 0.7rem;
+		font-weight: 900;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		cursor: pointer;
+		pointer-events: auto;
+		transform: translateX(-50%);
+		transition: var(--asteroid-transition);
+	}
+
+	.asteroid-controls-toggle:active {
+		transform: translateX(-50%) scale(0.97);
+	}
+
+	.theme-dark .asteroid-controls-toggle {
+		border-color: rgba(148, 163, 184, 0.45);
+		background: rgba(15, 23, 42, 0.88);
+		color: #f8fafc;
+	}
+
+	.asteroid-app.controls-open .asteroid-controls-toggle {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-controls-toggle {
+			display: none;
+		}
+	}
+
+	.asteroid-controls-backdrop {
+		position: absolute;
+		inset: 0;
+		z-index: 35;
+		background: rgba(15, 23, 42, 0.22);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--asteroid-transition-slow);
+	}
+
+	.asteroid-app.controls-open .asteroid-controls-backdrop {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-controls-backdrop {
+			display: none;
 		}
 	}
 
@@ -274,6 +437,15 @@
 		height: 100%;
 		overflow: hidden;
 		color: var(--asteroid-text-primary);
+		width: 100%;
+	}
+
+	@media (max-width: 767px) {
+		.asteroid-lab-panel {
+			max-height: min(82vh, 43rem);
+			border-radius: 1.4rem;
+			padding: 0.85rem 1rem 1rem;
+		}
 	}
 
 	.asteroid-lab-header {
@@ -285,12 +457,90 @@
 		flex-shrink: 0;
 	}
 
+	@media (max-width: 767px) {
+		.asteroid-lab-header {
+			min-height: 3.1rem;
+			padding-bottom: 0.65rem;
+		}
+	}
+
+	.asteroid-controls-close {
+		width: 0;
+		height: 2.25rem;
+		border: 0;
+		border-radius: var(--asteroid-radius-sm);
+		background: var(--asteroid-bg-light);
+		color: var(--asteroid-text-secondary);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		opacity: 0;
+		overflow: hidden;
+		pointer-events: none;
+		transition: var(--asteroid-transition);
+	}
+
+	.asteroid-app.controls-open .asteroid-controls-close {
+		width: 2.25rem;
+		border: 1px solid var(--asteroid-border-light);
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.asteroid-controls-close:hover {
+		color: var(--asteroid-text-primary);
+		border-color: var(--asteroid-primary);
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-controls-close {
+			display: none;
+		}
+	}
+
 	.asteroid-lab-title {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
 	}
 
+	.asteroid-lab-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.55rem;
+	}
+
+	.asteroid-drop-center-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.45rem;
+		min-height: 2.35rem;
+		padding: 0 0.9rem;
+		border: 1px solid rgba(249, 115, 22, 0.5);
+		border-radius: var(--asteroid-radius-full);
+		background: linear-gradient(135deg, var(--asteroid-primary) 0%, var(--asteroid-secondary) 100%);
+		color: #fff;
+		box-shadow: 0 10px 24px rgba(220, 38, 38, 0.28);
+		font-size: 0.7rem;
+		font-weight: 900;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		cursor: pointer;
+		transition: var(--asteroid-transition);
+	}
+
+	.asteroid-drop-center-btn:active {
+		transform: scale(0.97);
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-drop-center-btn {
+			display: none;
+		}
+	}
+
 	.asteroid-lab-icon {
 		width: 2rem;
 		height: 2rem;
@@ -807,4 +1057,4 @@
 		width: 1px;
 		background: var(--asteroid-border-light);
 		margin: 0 0.5rem;
-	}
+	}

package/src/tool/asteroid-impact/component.astro

@@ -38,8 +38,15 @@ const { ui } = Astro.props;
 		</div>
 	</div>
 
-	<div class="asteroid-desktop-lab">
-		<div class="asteroid-lab-panel">
+	<button id="asteroid-controls-toggle" class="asteroid-controls-toggle" type="button" aria-controls="asteroid-lab-panel" aria-expanded="false">
+		<Icon name="mdi:tune-variant" class="w-5 h-5" />
+		<span>Controls</span>
+	</button>
+
+	<div id="asteroid-controls-backdrop" class="asteroid-controls-backdrop"></div>
+
+	<div class="asteroid-desktop-lab" id="asteroid-controls-shell">
+		<div class="asteroid-lab-panel" id="asteroid-lab-panel">
 			<div class="asteroid-lab-header">
 				<div class="asteroid-lab-title">
 					<div class="asteroid-lab-icon">
@@ -52,6 +59,12 @@ const { ui } = Astro.props;
 						<span class="asteroid-lab-subtitle">Factory</span>
 					</div>
 				</div>
+				<div class="asteroid-lab-actions">
+					<button id="asteroid-drop-center-btn" class="asteroid-drop-center-btn" type="button"><Icon name="mdi:meteor" class="w-5 h-5" /><span>Impact</span></button>
+					<button id="asteroid-controls-close" class="asteroid-controls-close" type="button" aria-label="Close controls">
+						<Icon name="mdi:close" class="w-5 h-5" />
+					</button>
+				</div>
 			</div>
 
 			<div class="asteroid-lab-content">
@@ -146,26 +159,10 @@ const { ui } = Astro.props;
 </div>
 
 <div style="display: none;">
-	<div id="icon-safe">
-		<svg class="w-6 h-6" style="color: #34d399;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"></path>
-		</svg>
-	</div>
-	<div id="icon-shock">
-		<svg class="w-6 h-6" style="color: #60a5fa;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3A9,9 0 0,0 3,12M5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12M11,17H13V15H11V17M11,13H13V7H11V13Z"></path>
-		</svg>
-	</div>
-	<div id="icon-burn">
-		<svg class="w-6 h-6" style="color: #fb923c;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M17.66,11.2C17.43,10.9 17.15,10.64 16.89,10.38C16.22,9.78 15.46,9.35 14.82,8.72C13.33,7.26 13,4.85 13.95,3C13,3.23 12.17,3.75 11.46,4.32C8.87,6.4 7.85,10.07 9.07,13.22C9.11,13.32 9.15,13.42 9.15,13.55C9.15,13.77 9,13.97 8.8,14.05C8.57,14.15 8.33,14.09 8.14,13.93C8.08,13.88 8.04,13.83 8,13.76C6.87,12.33 6.69,10.28 7.45,8.64C5.78,10 4.87,12.3 5,14.47C5.06,14.97 5.12,15.47 5.29,15.97C5.43,16.57 5.7,17.17 6,17.7C7.08,19.43 8.95,20.67 10.96,20.92C13.1,21.19 15.39,20.8 17.03,19.32C18.86,17.66 19.5,15 18.56,12.72L18.43,12.46C18.22,12 17.66,11.2 17.66,11.2Z"></path>
-		</svg>
-	</div>
-	<div id="icon-death">
-		<svg class="w-6 h-6" style="color: #f87171;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"></path>
-		</svg>
-	</div>
+	<div id="icon-safe"><svg class="w-6 h-6" style="color: #34d399;" fill="currentColor" viewBox="0 0 24 24"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"></path></svg></div>
+	<div id="icon-shock"><svg class="w-6 h-6" style="color: #60a5fa;" fill="currentColor" viewBox="0 0 24 24"><path d="M3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3A9,9 0 0,0 3,12M5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12M11,17H13V15H11V17M11,13H13V7H11V13Z"></path></svg></div>
+	<div id="icon-burn"><svg class="w-6 h-6" style="color: #fb923c;" fill="currentColor" viewBox="0 0 24 24"><path d="M17.66,11.2C17.43,10.9 17.15,10.64 16.89,10.38C16.22,9.78 15.46,9.35 14.82,8.72C13.33,7.26 13,4.85 13.95,3C13,3.23 12.17,3.75 11.46,4.32C8.87,6.4 7.85,10.07 9.07,13.22C9.11,13.32 9.15,13.42 9.15,13.55C9.15,13.77 9,13.97 8.8,14.05C8.57,14.15 8.33,14.09 8.14,13.93C8.08,13.88 8.04,13.83 8,13.76C6.87,12.33 6.69,10.28 7.45,8.64C5.78,10 4.87,12.3 5,14.47C5.06,14.97 5.12,15.47 5.29,15.97C5.43,16.57 5.7,17.17 6,17.7C7.08,19.43 8.95,20.67 10.96,20.92C13.1,21.19 15.39,20.8 17.03,19.32C18.86,17.66 19.5,15 18.56,12.72L18.43,12.46C18.22,12 17.66,11.2 17.66,11.2Z"></path></svg></div>
+	<div id="icon-death"><svg class="w-6 h-6" style="color: #f87171;" fill="currentColor" viewBox="0 0 24 24"><path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"></path></svg></div>
 </div>
 
 <script>
@@ -177,25 +174,13 @@ const { ui } = Astro.props;
 
 	let map: L.Map;
 
-	interface ImpactData {
-		craterDiameter: number;
-		thermalRadius: number;
-		shockwave1psi: number;
-	}
+	interface ImpactData { craterDiameter: number; thermalRadius: number; shockwave1psi: number; }
+
+	const impacts: { id: string; circles: L.LayerGroup; marker: L.Marker; data: ImpactData; latlng: L.LatLng; config: typeof config; }[] = [];
 
-	const impacts: {
-		id: string;
-		circles: L.LayerGroup;
-		marker: L.Marker;
-		data: ImpactData;
-		config: typeof config;
-	}[] = [];
+	let observerLatLng: L.LatLng, observerMarker: L.Marker;
 
-	const config = {
-		diameter: 10000,
-		velocity: 20,
-		composition: "rock" as Composition,
-	};
+	const config = { diameter: 10000, velocity: 20, composition: "rock" as Composition };
 
 	function init() {
 		map = L.map("asteroid-game-map", {
@@ -210,15 +195,33 @@ const { ui } = Astro.props;
 			attribution: "&copy; OpenStreetMap &copy; CARTO",
 		}).addTo(map);
 
+		setObserver(map.getCenter());
 		setupControls();
 		setupGhostDrag();
 		setupGPS();
+		setupMobileControls();
 
 		map.on("click", () => {
 			map.dragging.enable();
 		});
 	}
 
+	function setControlsOpen(open: boolean) {
+		document.getElementById("asteroid-app")?.classList.toggle("controls-open", open);
+		document.getElementById("asteroid-controls-toggle")?.setAttribute("aria-expanded", open ? "true" : "false");
+	}
+
+	function setupMobileControls() {
+		const toggle = document.getElementById("asteroid-controls-toggle");
+		const close = document.getElementById("asteroid-controls-close");
+		const backdrop = document.getElementById("asteroid-controls-backdrop"), dropCenterBtn = document.getElementById("asteroid-drop-center-btn");
+
+		toggle?.addEventListener("click", () => setControlsOpen(!document.getElementById("asteroid-app")?.classList.contains("controls-open")));
+		const closeControls = () => setControlsOpen(false);
+		close?.addEventListener("click", closeControls); backdrop?.addEventListener("click", closeControls);
+		dropCenterBtn?.addEventListener("click", () => { spawnImpact(map.getCenter()); closeControls(); });
+	}
+
 	function setupControls() {
 		const sizeInput = document.getElementById("input-size") as HTMLInputElement;
 		const velInput = document.getElementById("input-velocity") as HTMLInputElement;
@@ -308,6 +311,15 @@ const { ui } = Astro.props;
 		});
 	}
 
+	function createObserverIcon(): L.DivIcon {
+		return L.divIcon({ className: "asteroid-observer-marker", iconSize: [42, 52], iconAnchor: [21, 48], html: '<div class="asteroid-observer-pulse"></div><div class="asteroid-observer-pin"><div class="asteroid-observer-head"></div><div class="asteroid-observer-body"></div></div><div class="asteroid-observer-label">YOU</div>' });
+	}
+
+	function setObserver(latlng: L.LatLng) {
+		observerLatLng = latlng; if (observerMarker) observerMarker.setLatLng(latlng);
+		else observerMarker = L.marker(latlng, { icon: createObserverIcon(), zIndexOffset: 1000 }).addTo(map); updateVerdict();
+	}
+
 	function setupMarkerDragHandlers(marker: L.Marker, group: L.LayerGroup, physics: ImpactData) {
 		marker.on("dragstart", () => {
 			map.dragging.disable();
@@ -315,6 +327,7 @@ const { ui } = Astro.props;
 
 		marker.on("drag", (e: L.LeafletEvent) => {
 			const newPos = (e.target as L.Marker).getLatLng();
+			const impact = impacts.find((item) => item.marker === marker); if (impact) impact.latlng = newPos;
 			group.clearLayers();
 			renderCircles(newPos, physics, group);
 			updateVerdict();
@@ -323,6 +336,7 @@ const { ui } = Astro.props;
 		marker.on("dragend", (e: L.LeafletEvent) => {
 			map.dragging.enable();
 			const newPos = (e.target as L.Marker).getLatLng();
+			const impact = impacts.find((item) => item.marker === marker); if (impact) impact.latlng = newPos;
 			group.clearLayers();
 			renderCircles(newPos, physics, group);
 			updateVerdict();
@@ -347,7 +361,7 @@ const { ui } = Astro.props;
 			icon: createMarkerIcon(markerColor),
 		}).addTo(map);
 
-		impacts.push({ id: Date.now().toString(), circles: group, marker, data: physics, config });
+		impacts.push({ id: Date.now().toString(), circles: group, marker, data: physics, latlng, config });
 		setupMarkerDragHandlers(marker, group, physics);
 		updateVerdict();
 	}
@@ -379,9 +393,7 @@ const { ui } = Astro.props;
 		}).addTo(group);
 	}
 
-	function renderCircles(latlng: L.LatLng, physics: ImpactData, group: L.LayerGroup) {
-		addCircleLayers(latlng, physics, group);
-	}
+	function renderCircles(latlng: L.LatLng, physics: ImpactData, group: L.LayerGroup) { addCircleLayers(latlng, physics, group); }
 
 	function setupGPS() {
 		const btn = document.getElementById("asteroid-gps-btn");
@@ -392,6 +404,7 @@ const { ui } = Astro.props;
 			navigator.geolocation.getCurrentPosition(
 				(pos) => {
 					const ll = new L.LatLng(pos.coords.latitude, pos.coords.longitude);
+					setObserver(ll);
 					if (gpsText) gpsText.textContent = "GPS Activo";
 					map.flyTo(ll, 9);
 				},
@@ -421,13 +434,20 @@ const { ui } = Astro.props;
 
 	function updateVerdict() {
 		const pill = document.getElementById("asteroid-verdict-pill");
-		if (impacts.length === 0) {
-			pill?.classList.remove("active");
-			return;
-		}
+		if (impacts.length === 0) { pill?.classList.remove("active"); return; }
+		pill?.classList.add("active"); updateVerdictUI(getWorstVerdict());
+	}
 
-		pill?.classList.add("active");
-		updateVerdictUI("safe");
+	function getWorstVerdict() {
+		const observer = observerLatLng;
+		const severity = { safe: 0, shook: 1, burned: 2, vaporized: 3 };
+		return impacts.reduce<keyof typeof severity>((worst, impact) => {
+			const distance = map.distance(observer, impact.latlng); let verdict: keyof typeof severity = "safe";
+			if (distance < impact.data.shockwave1psi) verdict = "shook";
+			if (distance < impact.data.thermalRadius) verdict = "burned";
+			if (distance < impact.data.craterDiameter / 2) verdict = "vaporized";
+			return severity[verdict] > severity[worst] ? verdict : worst;
+		}, "safe");
 	}
 
 	function clearAll() {