@jjlmoya/utils-nature 1.1.0

package/src/tool/rainHarvester/component.astro

@@ -0,0 +1,559 @@
+---
+import { Icon } from 'astro-icon/components';
+import { rainHarvester } from './index';
+import { ROOF_MATERIALS, FILTER_EFFICIENCY } from './logic';
+
+const { ui: propUi, locale = 'es' } = Astro.props;
+let ui = propUi;
+
+if (!ui) {
+  const content = await rainHarvester.i18n[locale as keyof typeof rainHarvester.i18n]?.();
+  ui = content?.ui;
+}
+
+if (!ui) return null;
+
+const materialNames: Record<string, string> = {
+  metal: ui.materialMetal,
+  clay: ui.materialClay,
+  concrete: ui.materialConcrete,
+  gravel: ui.materialGravel,
+};
+---
+
+<rain-harvester class="rh-wrap" data-filter-efficiency={FILTER_EFFICIENCY}>
+  <div class="rh-container">
+    <div class="rh-inputs">
+      <section class="rh-section">
+        <h2 class="rh-section-head">
+          <span class="rh-step-badge">1</span>
+          {ui.headInputs}
+        </h2>
+
+        <div class="rh-field-group">
+          <div class="rh-field">
+            <label for="area" class="rh-label">
+              <Icon name="mdi:home-roof" class="rh-label-icon" /> {ui.labelArea}
+            </label>
+            <div class="rh-input-wrap">
+              <input type="number" id="area" class="rh-input" value="100" min="0" />
+              <span class="rh-input-suffix">{ui.unitM2}</span>
+            </div>
+          </div>
+
+          <div class="rh-field">
+            <label for="rainfall" class="rh-label">
+              <Icon name="mdi:weather-pouring" class="rh-label-icon" /> {ui.labelRainfall}
+            </label>
+            <div class="rh-input-wrap">
+              <input type="number" id="rainfall" class="rh-input" value="600" min="0" />
+              <span class="rh-input-suffix">{ui.unitMm}</span>
+            </div>
+            <p class="rh-field-help">{ui.helpRainfall}</p>
+          </div>
+
+          <div class="rh-field">
+            <label for="material" class="rh-label">
+              <Icon name="mdi:texture-box" class="rh-label-icon" /> {ui.labelMaterial}
+            </label>
+            <div class="rh-select-wrap">
+              <select id="material" class="rh-select">
+                {ROOF_MATERIALS.map((m) => (
+                  <option value={m.id} data-coeff={m.coefficient}>
+                    {materialNames[m.id]} ({(m.coefficient * 100).toFixed(0)}%)
+                  </option>
+                ))}
+              </select>
+              <Icon name="mdi:chevron-down" class="rh-select-arrow" />
+            </div>
+          </div>
+        </div>
+
+        <div class="rh-info-card">
+          <div class="rh-info-icon-box">
+            <Icon name="mdi:information-outline" class="rh-info-icon" />
+          </div>
+          <div class="rh-info-content">
+            <h4 class="rh-info-title">{ui.efficiencyTitle}</h4>
+            <p class="rh-info-text">{ui.efficiencyNote}</p>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div class="rh-results">
+        <div class="rh-result-main">
+            <h3 class="rh-result-label">{ui.resultTitle}</h3>
+            <div class="rh-result-value-box">
+                <span id="resLiters" class="rh-result-big">0</span>
+                <span class="rh-result-unit">{ui.unitLiters}</span>
+            </div>
+        </div>
+
+        <div class="rh-equivalencies">
+            <h4 class="rh-equiv-title">{ui.equivalenciesTitle}</h4>
+            <div class="rh-equiv-grid">
+                <div class="rh-equiv-card">
+                    <Icon name="mdi:toilet" class="rh-equiv-icon" />
+                    <div class="rh-equiv-info">
+                        <span id="resFlushes" class="rh-equiv-val">0</span>
+                        <span class="rh-equiv-label">{ui.labelFlushes}</span>
+                    </div>
+                </div>
+                <div class="rh-equiv-card">
+                    <Icon name="mdi:shower-head" class="rh-equiv-icon" />
+                    <div class="rh-equiv-info">
+                        <span id="resShowers" class="rh-equiv-val">0</span>
+                        <span class="rh-equiv-label">{ui.labelShowers}</span>
+                    </div>
+                </div>
+                <div class="rh-equiv-card">
+                    <Icon name="mdi:flower" class="rh-equiv-icon" />
+                    <div class="rh-equiv-info">
+                        <span id="resGarden" class="rh-equiv-val">0</span>
+                        <span class="rh-equiv-label">{ui.labelGarden} <small>{ui.gardenArea}</small></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="rh-bg-icon">
+            <Icon name="mdi:water" />
+        </div>
+
+        <div class="rh-liquid-container">
+            <div id="liquidFill" class="rh-liquid-fill">
+                <div class="rh-liquid-wave"></div>
+            </div>
+        </div>
+    </div>
+  </div>
+</rain-harvester>
+
+<style>
+  .rh-wrap {
+    --rh-bg: #fff;
+    --rh-bg-inputs: #f8fafc;
+    --rh-border: #e2e8f0;
+    --rh-text: #1e293b;
+    --rh-text-muted: #64748b;
+    --rh-accent: #06b6d4;
+    --rh-accent-dark: #0891b2;
+    --rh-result-bg: linear-gradient(135deg, #06b6d4, #2563eb);
+    --rh-info-bg: #f0f9ff;
+    --rh-info-border: #bae6fd;
+    --rh-info-text: #0369a1;
+
+    display: block;
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: 1rem;
+    user-select: none;
+  }
+
+  :global(.theme-dark) .rh-wrap {
+    --rh-bg: #0f172a;
+    --rh-bg-inputs: #1e293b;
+    --rh-border: #334155;
+    --rh-text: #f1f5f9;
+    --rh-text-muted: #94a3b8;
+    --rh-info-bg: rgba(3, 105, 161, 0.1);
+    --rh-info-border: #0369a1;
+    --rh-info-text: #7dd3fc;
+  }
+
+  .rh-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    background: var(--rh-bg);
+    border-radius: 2rem;
+    overflow: hidden;
+    border: 1px solid var(--rh-border);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+  }
+
+  @media (min-width: 1024px) {
+    .rh-container {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .rh-inputs {
+    padding: 2.5rem;
+    background: var(--rh-bg-inputs);
+  }
+
+  .rh-section-head {
+    font-size: 1.25rem;
+    font-weight: 800;
+    color: var(--rh-text);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .rh-step-badge {
+    width: 2.25rem;
+    height: 2.25rem;
+    background: var(--rh-text);
+    color: var(--rh-bg);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: 900;
+  }
+
+  .rh-field-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .rh-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .rh-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--rh-text-muted);
+    letter-spacing: 0.05em;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .rh-label-icon {
+    font-size: 1.25rem;
+    color: var(--rh-accent);
+  }
+
+  .rh-input-wrap, .rh-select-wrap {
+    position: relative;
+  }
+
+  .rh-input, .rh-select {
+    width: 100%;
+    background: var(--rh-bg);
+    border: 2px solid var(--rh-border);
+    border-radius: 1rem;
+    padding: 0.875rem 1rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--rh-text);
+    transition: border-color 0.2s;
+    outline: none;
+  }
+
+  .rh-select {
+    font-size: 1.125rem;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .rh-input:focus, .rh-select:focus {
+    border-color: var(--rh-accent);
+  }
+
+  .rh-input-suffix {
+    position: absolute;
+    right: 1.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-weight: 700;
+    color: var(--rh-text-muted);
+    pointer-events: none;
+  }
+
+  .rh-field-help {
+    font-size: 0.75rem;
+    font-style: italic;
+    color: var(--rh-text-muted);
+  }
+
+  .rh-select-arrow {
+    position: absolute;
+    right: 1.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.5rem;
+    color: var(--rh-text-muted);
+    pointer-events: none;
+  }
+
+  .rh-info-card {
+    background: var(--rh-info-bg);
+    border: 1px solid var(--rh-info-border);
+    border-radius: 1.25rem;
+    padding: 1.25rem;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .rh-info-icon-box {
+    background: var(--rh-info-border);
+    color: var(--rh-info-text);
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    display: flex;
+  }
+
+  .rh-info-icon {
+    font-size: 1.5rem;
+  }
+
+  .rh-info-title {
+    margin: 0;
+    font-weight: 800;
+    color: var(--rh-info-text);
+    font-size: 0.875rem;
+  }
+
+  .rh-info-text {
+    margin: 0.25rem 0 0;
+    font-size: 0.75rem;
+    color: var(--rh-info-text);
+    opacity: 0.9;
+  }
+
+  .rh-results {
+    background: var(--rh-result-bg);
+    padding: 2.5rem;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .rh-result-main {
+    position: relative;
+    z-index: 10;
+  }
+
+  .rh-result-label {
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: rgba(255, 255, 255, 0.8);
+    margin: 0 0 0.5rem;
+  }
+
+  .rh-result-value-box {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .rh-result-big {
+    font-size: 5rem;
+    font-weight: 900;
+    letter-spacing: -0.05em;
+    line-height: 1;
+  }
+
+  .rh-result-unit {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  .rh-equivalencies {
+    position: relative;
+    z-index: 10;
+    margin-top: 2rem;
+  }
+
+  .rh-equiv-title {
+    font-size: 1rem;
+    font-weight: 800;
+    margin: 0 0 1.25rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .rh-equiv-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .rh-equiv-card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 1rem;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .rh-equiv-icon {
+    font-size: 2rem;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .rh-equiv-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rh-equiv-val {
+    font-size: 1.5rem;
+    font-weight: 800;
+    line-height: 1;
+  }
+
+  .rh-equiv-label {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    margin-top: 0.25rem;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .rh-bg-icon {
+    position: absolute;
+    bottom: -2rem;
+    right: -2rem;
+    font-size: 15rem;
+    opacity: 0.1;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .rh-liquid-container {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .rh-liquid-fill {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    transition: height 1s ease-in-out;
+    height: 0;
+  }
+
+  .rh-liquid-wave {
+    position: absolute;
+    top: -0.5rem;
+    left: 0;
+    width: 100%;
+    height: 1rem;
+    background: rgba(255, 255, 255, 0.15);
+    transform: skewY(1deg);
+    animation: rh-wave 3s infinite alternate ease-in-out;
+  }
+
+  @keyframes rh-wave {
+    from { transform: skewY(1deg); }
+    to { transform: skewY(-1deg); }
+  }
+</style>
+
+<script>
+  class RainHarvester extends HTMLElement {
+    els: {
+      area?: HTMLInputElement | null;
+      rainfall?: HTMLInputElement | null;
+      material?: HTMLSelectElement | null;
+      resLiters?: HTMLElement | null;
+      resFlushes?: HTMLElement | null;
+      resShowers?: HTMLElement | null;
+      resGarden?: HTMLElement | null;
+      liquidFill?: HTMLElement | null;
+    } = {};
+
+    filterEfficiency = 0.9;
+
+    connectedCallback() {
+      this.filterEfficiency = parseFloat(this.dataset.filterEfficiency || '0.9');
+      this.setupElements();
+      this.setupEvents();
+      this.calculate();
+    }
+
+    setupElements() {
+      this.els = {
+        area: this.querySelector('#area'),
+        rainfall: this.querySelector('#rainfall'),
+        material: this.querySelector('#material'),
+        resLiters: this.querySelector('#resLiters'),
+        resFlushes: this.querySelector('#resFlushes'),
+        resShowers: this.querySelector('#resShowers'),
+        resGarden: this.querySelector('#resGarden'),
+        liquidFill: this.querySelector('#liquidFill'),
+      };
+    }
+
+    setupEvents() {
+      this.els.area?.addEventListener('input', () => this.calculate());
+      this.els.rainfall?.addEventListener('input', () => this.calculate());
+      this.els.material?.addEventListener('change', () => this.calculate());
+    }
+
+    calculate() {
+      const area = parseFloat(this.els.area?.value || '0');
+      const rainfall = parseFloat(this.els.rainfall?.value || '0');
+      const mat = this.els.material;
+      const coeff = parseFloat(mat?.options[mat.selectedIndex]?.dataset.coeff || '0.85');
+
+      const netVolume = area * rainfall * coeff * this.filterEfficiency;
+
+      this.updateUIResults(netVolume);
+      this.updateLiquidViz(netVolume);
+    }
+
+    updateUIResults(volume: number) {
+      this.animateValue(this.els.resLiters, volume);
+      this.animateValue(this.els.resFlushes, Math.floor(volume / 6));
+      this.animateValue(this.els.resShowers, Math.floor(volume / 80));
+      this.animateValue(this.els.resGarden, Math.floor(volume / 500));
+    }
+
+    updateLiquidViz(volume: number) {
+      if (!this.els.liquidFill) return;
+      const maxViz = 500000;
+      const pct = Math.min(100, Math.max(5, (volume / maxViz) * 100));
+      this.els.liquidFill.style.height = `${pct}%`;
+    }
+
+    animateValue(el: HTMLElement | null | undefined, end: number) {
+      if (!el) return;
+      const start = parseInt(el.textContent?.replace(/,/g, '') || '0');
+      if (start === Math.floor(end)) return;
+
+      const duration = 1000;
+      let startTime: number | null = null;
+      const range = Math.floor(end) - start;
+
+      const step = (timestamp: number) => {
+        if (!startTime) startTime = timestamp;
+        const progress = Math.min((timestamp - startTime) / duration, 1);
+        el.textContent = Math.floor(start + range * progress).toLocaleString();
+        if (progress < 1) requestAnimationFrame(step);
+      };
+      requestAnimationFrame(step);
+    }
+  }
+
+  customElements.define('rain-harvester', RainHarvester);
+</script>