@jjlmoya/utils-diy 1.1.0

package/src/tool/thermalExpansionCalculator/component.astro

@@ -0,0 +1,771 @@
+---
+import type { ThermalExpansionCalculatorUI } from "./ui";
+interface Props {
+  ui?: ThermalExpansionCalculatorUI;
+}
+const { ui } = Astro.props;
+const t = (ui ?? {}) as ThermalExpansionCalculatorUI;
+---
+
+<div
+  class="te-root"
+  data-te-root
+  data-te-risk-low={t.riskLow}
+  data-te-risk-moderate={t.riskModerate}
+  data-te-risk-critical={t.riskCritical}
+  data-te-tip-default={t.tipDefault}
+>
+  <div class="te-grid">
+    <aside class="te-sidebar">
+      <p class="te-section-hdr">{t.configTitle}</p>
+
+      <div class="te-cat-badge">
+        <span class="te-cat-dot"></span>
+        <span class="te-cat-name" data-te-cat-label>{t.catMetals}</span>
+      </div>
+
+      <div class="te-field">
+        <label for="te-sel-mat" class="te-label">{t.labelMaterial}</label>
+        <select
+          id="te-sel-mat"
+          class="te-select"
+          data-te-material
+          data-te-input
+        >
+          <optgroup label={t.groupMetals} data-cat-label={t.catMetals}>
+            <option value="0.000012" data-tip={t.tipSteel}>{t.matSteel}</option>
+            <option value="0.000023" data-tip={t.tipAluminum}
+              >{t.matAluminum}</option
+            >
+            <option value="0.000017">{t.matCopper}</option>
+            <option value="0.000011">{t.matIron}</option>
+          </optgroup>
+          <optgroup
+            label={t.groupConstruction}
+            data-cat-label={t.catConstruction}
+          >
+            <option value="0.000012" data-tip={t.tipConcrete}
+              >{t.matConcrete}</option
+            >
+            <option value="0.000009">{t.matBrick}</option>
+            <option value="0.000009" data-tip={t.tipGlass}>{t.matGlass}</option>
+          </optgroup>
+          <optgroup label={t.groupWood} data-cat-label={t.catWood}>
+            <option value="0.000005" data-tip={t.tipWood}
+              >{t.matWoodFiber}</option
+            >
+            <option value="0.000040" data-tip={t.tipWood}
+              >{t.matWoodTransversal}</option
+            >
+            <option value="0.000030" data-tip={t.tipPvc}>{t.matPvc}</option>
+          </optgroup>
+        </select>
+      </div>
+
+      <div class="te-field">
+        <label for="te-len" class="te-label">{t.labelLength}</label>
+        <div class="te-input-row">
+          <input
+            id="te-len"
+            type="number"
+            class="te-input"
+            value="5"
+            step="0.1"
+            min="0"
+            data-te-length
+            data-te-input
+          />
+          <span class="te-unit">m</span>
+        </div>
+      </div>
+
+      <div class="te-temp-grid">
+        <div class="te-field">
+          <label for="te-t1" class="te-label">{t.labelTempStart}</label>
+          <div class="te-input-row">
+            <input
+              id="te-t1"
+              type="number"
+              class="te-input"
+              value="20"
+              step="1"
+              data-te-t1
+              data-te-input
+            />
+            <span class="te-unit">°C</span>
+          </div>
+        </div>
+        <div class="te-field">
+          <label for="te-t2" class="te-label">{t.labelTempEnd}</label>
+          <div class="te-input-row">
+            <input
+              id="te-t2"
+              type="number"
+              class="te-input"
+              value="60"
+              step="1"
+              data-te-t2
+              data-te-input
+            />
+            <span class="te-unit">°C</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="te-delta-bar">
+        <span class="te-delta-lbl">{t.deltaLabel}</span>
+        <span class="te-delta-val" data-te-delta-display>40 °C</span>
+      </div>
+    </aside>
+
+    <main class="te-main">
+      <p class="te-section-hdr">{t.vizTitle}</p>
+
+      <div class="te-viz">
+        <div class="te-beam-wrap">
+          <div class="te-beam-base"></div>
+          <div class="te-beam-expand" data-te-beam></div>
+        </div>
+        <div class="te-markers">
+          <span class="te-marker">0 m</span>
+          <span class="te-marker" data-te-length-marker>5 m</span>
+        </div>
+        <div class="te-ind-wrap">
+          <span class="te-ind" data-te-indicator>+0.00 mm</span>
+        </div>
+      </div>
+
+      <div class="te-results">
+        <div class="te-result-primary">
+          <span class="te-result-lbl">{t.resultGrowthLabel}</span>
+          <div class="te-result-val">
+            <span class="te-result-num" data-te-growth>2.40</span>
+            <span class="te-result-unit">{t.unitMm}</span>
+          </div>
+        </div>
+        <div class="te-result-secondary">
+          <span class="te-result-lbl">{t.resultFinalLabel}</span>
+          <div class="te-result-val">
+            <span class="te-result-num" data-te-final>5.002</span>
+            <span class="te-result-unit">{t.unitM}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="te-ref-grid">
+        <div class="te-ref-card" data-te-risk-card>
+          <span class="te-ref-title">{t.riskTitle}</span>
+          <span class="te-ref-val" data-te-risk-el>{t.riskLow}</span>
+        </div>
+        <div class="te-ref-card">
+          <span class="te-ref-title">{t.jointTitle}</span>
+          <span class="te-ref-val" data-te-joint>3 mm</span>
+        </div>
+      </div>
+
+      <div class="te-tip-card">
+        <span class="te-tip-bullet" aria-hidden="true">*</span>
+        <p class="te-tip-text" data-te-tip>{t.tipDefault}</p>
+      </div>
+    </main>
+  </div>
+</div>
+
+<script>
+  import { calculateExpansion, type TeResult } from "./engine";
+
+  interface TeState {
+    L0: number;
+    alpha: number;
+    T1: number;
+    T2: number;
+  }
+
+  function teNum(el: Element | null): number {
+    const val = (el as HTMLInputElement | null)?.value ?? "0";
+    return parseFloat(val) || 0;
+  }
+
+  function teAttr(root: Element, key: string): string {
+    return root.getAttribute(key) ?? "";
+  }
+
+  function teReadState(root: Element): TeState {
+    return {
+      L0: teNum(root.querySelector("[data-te-length]")),
+      alpha: teNum(root.querySelector("[data-te-material]")),
+      T1: teNum(root.querySelector("[data-te-t1]")),
+      T2: teNum(root.querySelector("[data-te-t2]")),
+    };
+  }
+
+  function teUpdateDelta(root: Element, state: TeState): void {
+    const el = root.querySelector("[data-te-delta-display]");
+    if (el) el.textContent = `${state.T2 - state.T1} \u00B0C`;
+  }
+
+  function teUpdateBeam(root: Element, deltaLmm: number): void {
+    const beam = root.querySelector("[data-te-beam]") as HTMLElement | null;
+    if (!beam) return;
+    const px = Math.min(40, (Math.abs(deltaLmm) / 10) * 10);
+    beam.style.width = `calc(100% + ${px}px)`;
+  }
+
+  function teUpdateResults(root: Element, result: TeResult): void {
+    const growth = root.querySelector("[data-te-growth]");
+    const final = root.querySelector("[data-te-final]");
+    const ind = root.querySelector("[data-te-indicator]");
+    if (growth) growth.textContent = result.deltaLmm.toFixed(2);
+    if (final) final.textContent = result.finalLength.toFixed(3);
+    if (ind) ind.textContent = `+${result.deltaLmm.toFixed(2)} mm`;
+  }
+
+  function teUpdateRisk(root: Element, result: TeResult): void {
+    const riskEl = root.querySelector("[data-te-risk-el]");
+    const card = root.querySelector("[data-te-risk-card]");
+    const joint = root.querySelector("[data-te-joint]");
+    if (riskEl)
+      riskEl.textContent = teAttr(root, `data-te-risk-${result.riskType}`);
+    if (card) card.setAttribute("data-risk", result.riskType);
+    if (joint) joint.textContent = `${result.minJoint} mm`;
+  }
+
+  function teUpdateTip(root: Element): void {
+    const select = root.querySelector(
+      "[data-te-material]",
+    ) as HTMLSelectElement | null;
+    const tipEl = root.querySelector("[data-te-tip]");
+    if (!select || !tipEl) return;
+    const opt = select.options[select.selectedIndex];
+    tipEl.textContent = opt?.dataset.tip ?? teAttr(root, "data-te-tip-default");
+  }
+
+  function teCatLabel(root: Element): void {
+    const select = root.querySelector(
+      "[data-te-material]",
+    ) as HTMLSelectElement | null;
+    const catEl = root.querySelector("[data-te-cat-label]");
+    if (!select || !catEl) return;
+    const og = select.options[select.selectedIndex]
+      ?.parentElement as HTMLOptGroupElement | null;
+    catEl.textContent = og?.dataset.catLabel ?? "";
+  }
+
+  function teUpdate(root: Element): void {
+    const state = teReadState(root);
+    const result = calculateExpansion(
+      state.L0,
+      state.alpha,
+      state.T1,
+      state.T2,
+    );
+    const marker = root.querySelector("[data-te-length-marker]");
+    if (marker) marker.textContent = `${state.L0} m`;
+    teUpdateDelta(root, state);
+    teUpdateBeam(root, result.deltaLmm);
+    teUpdateResults(root, result);
+    teUpdateRisk(root, result);
+    teUpdateTip(root);
+    teCatLabel(root);
+  }
+
+  function teAttach(root: Element): void {
+    root.querySelectorAll("[data-te-input]").forEach((el) => {
+      el.addEventListener("input", () => teUpdate(root));
+    });
+    teUpdate(root);
+  }
+
+  document.querySelectorAll("[data-te-root]").forEach(teAttach);
+</script>
+
+<style>
+  .te-root {
+    width: 100%;
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+
+  .te-grid {
+    display: grid;
+    grid-template-columns: 340px 1fr;
+    border: 1px solid #e5e7eb;
+    border-radius: 24px;
+    overflow: hidden;
+  }
+
+  :global(.theme-dark) .te-grid {
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .te-sidebar {
+    padding: 2rem;
+    background: rgba(255, 255, 255, 0.6);
+    border-right: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  :global(.theme-dark) .te-sidebar {
+    background: rgba(255, 255, 255, 0.02);
+    border-right-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .te-main {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  :global(.theme-dark) .te-main {
+    background: rgba(255, 255, 255, 0.01);
+  }
+
+  .te-section-hdr {
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #f97316;
+    margin: 0;
+  }
+
+  .te-cat-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 12px;
+    padding: 0.75rem 1rem;
+  }
+
+  :global(.theme-dark) .te-cat-badge {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .te-cat-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #f97316;
+    flex-shrink: 0;
+  }
+
+  .te-cat-name {
+    font-size: 0.8rem;
+    font-weight: 800;
+    color: #374151;
+  }
+
+  :global(.theme-dark) .te-cat-name {
+    color: #e5e7eb;
+  }
+
+  .te-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .te-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #6b7280;
+  }
+
+  :global(.theme-dark) .te-label {
+    color: #9ca3af;
+  }
+
+  .te-input-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .te-input {
+    width: 100%;
+    padding: 0.875rem 3rem 0.875rem 1rem;
+    border: 2px solid #e5e7eb;
+    border-radius: 12px;
+    font-size: 1.1rem;
+    font-weight: 800;
+    background: white;
+    color: #111827;
+    transition: border-color 0.2s;
+  }
+
+  .te-input:focus {
+    outline: none;
+    border-color: #f97316;
+  }
+
+  :global(.theme-dark) .te-input {
+    background: rgba(0, 0, 0, 0.25);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: black;
+  }
+
+  :global(.theme-dark) .te-input:focus {
+    border-color: #f97316;
+  }
+
+  .te-unit {
+    position: absolute;
+    right: 1rem;
+    font-size: 0.7rem;
+    font-weight: 900;
+    color: #f97316;
+    pointer-events: none;
+  }
+
+  .te-select {
+    width: 100%;
+    padding: 0.875rem 2.5rem 0.875rem 1rem;
+    border: 2px solid #e5e7eb;
+    border-radius: 12px;
+    font-weight: 700;
+    font-size: 0.9rem;
+    background: white;
+    color: #111827;
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23f97316' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    cursor: pointer;
+    transition: border-color 0.2s;
+  }
+
+  .te-select:focus {
+    outline: none;
+    border-color: #f97316;
+  }
+
+  :global(.theme-dark) .te-select {
+    background-color: rgba(0, 0, 0, 0.25);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+
+  .te-temp-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .te-delta-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(249, 115, 22, 0.08);
+    border: 1px solid rgba(249, 115, 22, 0.2);
+    border-radius: 12px;
+    padding: 1rem 1.25rem;
+    margin-top: auto;
+  }
+
+  .te-delta-lbl {
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #f97316;
+  }
+
+  .te-delta-val {
+    font-size: 1.1rem;
+    font-weight: 900;
+    color: #f97316;
+  }
+
+  .te-viz {
+    position: relative;
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px dashed rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+    padding: 2.5rem 3rem 1.5rem;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    justify-content: center;
+  }
+
+  :global(.theme-dark) .te-viz {
+    background: rgba(255, 255, 255, 0.01);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .te-beam-wrap {
+    position: relative;
+    height: 32px;
+    border-radius: 4px;
+    overflow: visible;
+  }
+
+  .te-beam-base {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, #d1d5db, #9ca3af);
+    border-radius: 4px;
+    z-index: 2;
+  }
+
+  :global(.theme-dark) .te-beam-base {
+    background: linear-gradient(to bottom, #4b5563, #374151);
+  }
+
+  .te-beam-expand {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(249, 115, 22, 0.25);
+    border-right: 3px solid #f97316;
+    border-radius: 4px;
+    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    z-index: 1;
+  }
+
+  .te-markers {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2px;
+  }
+
+  .te-marker {
+    font-size: 0.6rem;
+    font-weight: 800;
+    color: #9ca3af;
+  }
+
+  .te-ind-wrap {
+    position: absolute;
+    top: 0.75rem;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .te-ind {
+    background: #f97316;
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.7rem;
+    font-weight: 900;
+    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
+    animation: te-bounce 2s infinite;
+  }
+
+  @keyframes te-bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-4px);
+    }
+  }
+
+  .te-results {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .te-result-primary,
+  .te-result-secondary {
+    padding: 1.5rem;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .te-result-primary {
+    background: linear-gradient(135deg, #f97316, #ea580c);
+    color: white;
+    box-shadow: 0 12px 28px rgba(234, 88, 12, 0.25);
+  }
+
+  .te-result-secondary {
+    background: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.7);
+  }
+
+  :global(.theme-dark) .te-result-secondary {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .te-result-lbl {
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.75;
+  }
+
+  .te-result-secondary .te-result-lbl {
+    color: #6b7280;
+    opacity: 1;
+  }
+
+  :global(.theme-dark) .te-result-secondary .te-result-lbl {
+    color: #9ca3af;
+  }
+
+  .te-result-val {
+    display: flex;
+    align-items: baseline;
+    gap: 0.35rem;
+  }
+
+  .te-result-num {
+    font-size: 2rem;
+    font-weight: 900;
+    line-height: 1;
+  }
+
+  .te-result-secondary .te-result-num {
+    color: #111827;
+  }
+
+  :global(.theme-dark) .te-result-secondary .te-result-num {
+    color: #f9fafb;
+  }
+
+  .te-result-unit {
+    font-size: 0.8rem;
+    font-weight: 800;
+    opacity: 0.7;
+  }
+
+  .te-result-secondary .te-result-unit {
+    color: #374151;
+    opacity: 1;
+  }
+
+  :global(.theme-dark) .te-result-secondary .te-result-unit {
+    color: #d1d5db;
+  }
+
+  .te-ref-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .te-ref-card {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 14px;
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    transition:
+      background 0.25s,
+      border-color 0.25s;
+  }
+
+  :global(.theme-dark) .te-ref-card {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .te-ref-card[data-risk="critical"] {
+    background: rgba(239, 68, 68, 0.08);
+    border-color: rgba(239, 68, 68, 0.25);
+  }
+
+  .te-ref-card[data-risk="moderate"] {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.25);
+  }
+
+  .te-ref-title {
+    font-size: 0.6rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #9ca3af;
+  }
+
+  .te-ref-val {
+    font-size: 1.1rem;
+    font-weight: 900;
+    color: #374151;
+  }
+
+  :global(.theme-dark) .te-ref-val {
+    color: #e5e7eb;
+  }
+
+  .te-ref-card[data-risk="critical"] .te-ref-val {
+    color: #ef4444;
+  }
+
+  .te-ref-card[data-risk="moderate"] .te-ref-val {
+    color: #f59e0b;
+  }
+
+  .te-tip-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    background: rgba(249, 115, 22, 0.04);
+    border: 1px dashed rgba(249, 115, 22, 0.2);
+    border-radius: 14px;
+    padding: 1rem 1.25rem;
+  }
+
+  .te-tip-bullet {
+    color: #f97316;
+    font-size: 0.7rem;
+    flex-shrink: 0;
+    padding-top: 0.15rem;
+  }
+
+  .te-tip-text {
+    margin: 0;
+    font-size: 0.82rem;
+    line-height: 1.55;
+    color: #6b7280;
+    font-style: italic;
+  }
+
+  :global(.theme-dark) .te-tip-text {
+    color: #9ca3af;
+  }
+
+  @media (max-width: 860px) {
+    .te-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .te-sidebar {
+      border-right: none;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    :global(.theme-dark) .te-sidebar {
+      border-bottom-color: rgba(255, 255, 255, 0.06);
+    }
+
+    .te-results {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>