@jjlmoya/utils-diy 1.1.0

package/src/tool/drillSharpener/component.astro

@@ -0,0 +1,712 @@
+---
+import type { DrillSharpenerUI } from "./ui";
+interface Props {
+  ui?: DrillSharpenerUI;
+}
+const { ui } = Astro.props;
+const t = (ui ?? {}) as DrillSharpenerUI;
+---
+
+<div class="drillsharp-root" id="drill-app">
+  <div class="drillsharp-layout">
+    <section class="drillsharp-gauge">
+      <svg class="drillsharp-svg" viewBox="0 0 500 500" id="gauge-svg">
+        <line
+          x1="250"
+          y1="20"
+          x2="250"
+          y2="480"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-dasharray="10,10"></line>
+        <line
+          x1="20"
+          y1="250"
+          x2="480"
+          y2="250"
+          stroke="currentColor"
+          stroke-width="1"
+          stroke-dasharray="10,10"></line>
+        <rect x="249" y="250" width="2" height="230" fill="currentColor" rx="1"
+        ></rect>
+        <g
+          class="drillsharp-guide-circles"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1"
+        >
+          <circle cx="250" cy="250" r="30" data-val="3"></circle>
+          <circle cx="250" cy="250" r="60" data-val="6"></circle>
+          <circle cx="250" cy="250" r="100" data-val="10"></circle>
+          <circle cx="250" cy="250" r="130" data-val="13"></circle>
+          <circle cx="250" cy="250" r="200" data-val="20"></circle>
+        </g>
+        <g id="drillsharp-gauge-lines" class="drillsharp-gauge-lines">
+          <line
+            id="gl"
+            x1="250"
+            y1="250"
+            x2="50"
+            y2="100"
+            stroke="var(--drillsharp-accent)"
+            stroke-width="3"
+            stroke-linecap="round"></line>
+          <line
+            id="gr"
+            x1="250"
+            y1="250"
+            x2="450"
+            y2="100"
+            stroke="var(--drillsharp-accent)"
+            stroke-width="3"
+            stroke-linecap="round"></line>
+          <circle cx="250" cy="250" r="6" fill="var(--drillsharp-accent)"></circle>
+        </g>
+        <text
+          id="drillsharp-angle-text"
+          x="250"
+          y="235"
+          text-anchor="middle"
+          fill="var(--drillsharp-accent)"
+          font-size="28"
+          font-weight="900">118°</text
+        >
+      </svg>
+      <div class="drillsharp-instruction">
+        <span>{t.gaugeInstruction}</span>
+      </div>
+    </section>
+
+    <aside class="drillsharp-controls">
+      <div class="drillsharp-group">
+        <h4>{t.labelMaterial}</h4>
+        <div class="drillsharp-material-grid">
+          <button
+            class="drillsharp-mat-btn active"
+            data-angle="118"
+            data-vc="25"
+            data-label="Acero / Hierro"
+            data-id="steel">{t.matSteel}</button
+          >
+          <button
+            class="drillsharp-mat-btn"
+            data-angle="135"
+            data-vc="12"
+            data-label="Inoxidable"
+            data-id="inox">{t.matInox}</button
+          >
+          <button
+            class="drillsharp-mat-btn"
+            data-angle="140"
+            data-vc="8"
+            data-label="Aceros Duros"
+            data-id="hard">{t.matHard}</button
+          >
+          <button
+            class="drillsharp-mat-btn"
+            data-angle="90"
+            data-vc="40"
+            data-label="Latón / Cobre"
+            data-id="brass">{t.matBrass}</button
+          >
+          <button
+            class="drillsharp-mat-btn"
+            data-angle="60"
+            data-vc="60"
+            data-label="Plásticos"
+            data-id="plastic">{t.matPlastic}</button
+          >
+          <button
+            class="drillsharp-mat-btn"
+            data-angle="80"
+            data-vc="35"
+            data-label="Madera"
+            data-id="wood">{t.matWood}</button
+          >
+        </div>
+      </div>
+
+      <div class="drillsharp-group">
+        <h4>{t.labelDiameter}</h4>
+        <div class="drillsharp-stepper">
+          <button type="button" class="drillsharp-step-btn" id="btn-minus">−</button>
+          <input
+            type="number"
+            id="diam-input"
+            value="10"
+            step="0.5"
+            min="1"
+            max="50"
+          />
+          <button type="button" class="drillsharp-step-btn" id="btn-plus">+</button>
+        </div>
+
+        <div class="drillsharp-results">
+          <div class="drillsharp-res-item">
+            <span class="drillsharp-res-label">{t.labelVelocity}</span>
+            <div class="drillsharp-res-value-box">
+              <span class="drillsharp-res-value" id="rpm-display">796</span>
+              <span class="drillsharp-res-unit">{t.unitRpm}</span>
+            </div>
+          </div>
+          <div class="drillsharp-res-item">
+            <span class="drillsharp-res-label">{t.labelCooling}</span>
+            <div class="drillsharp-res-value-box">
+              <span
+                class="drillsharp-res-value"
+                id="cooling-display"
+                style="font-size: 0.8rem; color: var(--drillsharp-accent);"
+                >TALADRINA</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button
+        class="drillsharp-diag-btn"
+        id="trigger-diag"
+        title="Si la broca no corta, pulsa aquí"
+      >
+        {t.btnDiagnosis}
+      </button>
+    </aside>
+  </div>
+
+  <div class="drillsharp-modal" id="diag-modal">
+    <div class="drillsharp-modal-header">
+      <h3>{t.diagTitle}</h3>
+      <button type="button" class="drillsharp-modal-close" id="close-modal">×</button>
+    </div>
+
+    <div class="drillsharp-diag-item">
+      <strong>{t.diagIssue1}</strong>
+      <p>{t.diagIssue1Desc}</p>
+      <div class="drillsharp-diag-img">
+        <svg viewBox="0 0 160 60" width="100%">
+          <path
+            d="M10,45 L40,15 L70,45 Z"
+            fill="none"
+            stroke="#ef4444"
+            stroke-width="2"></path>
+          <line
+            x1="40"
+            y1="15"
+            x2="70"
+            y2="15"
+            stroke="#ef444430"
+            stroke-width="1"
+            stroke-dasharray="3,3"></line>
+          <path
+            d="M90,45 L120,15 L150,25 L150,45 Z"
+            fill="none"
+            stroke="#22c55e"
+            stroke-width="2"></path>
+          <line
+            x1="120"
+            y1="15"
+            x2="150"
+            y2="15"
+            stroke="#22c55e30"
+            stroke-width="1"
+            stroke-dasharray="3,3"></line>
+          <text x="10" y="58" fill="#ef4444" font-size="7">MAL: Plano</text>
+          <text x="90" y="58" fill="#22c55e" font-size="7">OK: Destalonado</text
+          >
+        </svg>
+      </div>
+    </div>
+
+    <div class="drillsharp-diag-item">
+      <strong>{t.diagIssue2}</strong>
+      <p>{t.diagIssue2Desc}</p>
+    </div>
+
+    <div class="drillsharp-diag-item">
+      <strong>{t.diagIssue3}</strong>
+      <p>{t.diagIssue3Desc}</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculateSharpener } from "./engine";
+
+  const state = { angle: 118, vc: 25, diameter: 10, materialId: "steel" };
+
+  const ui = {
+    gaugeL: document.getElementById("gl") as SVGLineElement,
+    gaugeR: document.getElementById("gr") as SVGLineElement,
+    angleText: document.getElementById("drillsharp-angle-text") as SVGTextElement,
+    rpmDisplay: document.getElementById("rpm-display") as HTMLElement,
+    coolingDisplay: document.getElementById("cooling-display") as HTMLElement,
+    diamInput: document.getElementById("diam-input") as HTMLInputElement,
+    btnMinus: document.getElementById("btn-minus") as HTMLElement,
+    btnPlus: document.getElementById("btn-plus") as HTMLElement,
+    diagTrigger: document.getElementById("trigger-diag") as HTMLElement,
+    modal: document.getElementById("diag-modal") as HTMLElement,
+    modalClose: document.getElementById("close-modal") as HTMLElement,
+  };
+
+  function updateGauge() {
+    if (!ui.gaugeL || !ui.gaugeR) return;
+    const halfRad = (state.angle / 2) * (Math.PI / 180);
+    const len = 250;
+    const lx2 = 250 - Math.sin(halfRad) * len;
+    const ly2 = 250 + Math.cos(halfRad) * len;
+    const rx2 = 250 + Math.sin(halfRad) * len;
+    const ry2 = 250 + Math.cos(halfRad) * len;
+
+    ui.gaugeL.setAttribute("x2", lx2.toString());
+    ui.gaugeL.setAttribute("y2", ly2.toString());
+    ui.gaugeR.setAttribute("x2", rx2.toString());
+    ui.gaugeR.setAttribute("y2", ry2.toString());
+    if (ui.angleText) ui.angleText.textContent = `${state.angle}°`;
+  }
+
+  function updateResults() {
+    const result = calculateSharpener(state.materialId, state.diameter);
+    if (ui.rpmDisplay) ui.rpmDisplay.textContent = result.rpm.toLocaleString();
+    if (ui.coolingDisplay) ui.coolingDisplay.textContent = result.cooling;
+  }
+
+  function refresh() {
+    updateGauge();
+    updateResults();
+  }
+
+  document.querySelectorAll(".drillsharp-mat-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      document
+        .querySelectorAll(".drillsharp-mat-btn")
+        .forEach((b) => b.classList.remove("active"));
+      btn.classList.add("active");
+      state.angle = parseInt(btn.getAttribute("data-angle") || "118");
+      state.vc = parseInt(btn.getAttribute("data-vc") || "25");
+      state.materialId = btn.getAttribute("data-id") || "steel";
+      refresh();
+    });
+  });
+
+  ui.diamInput?.addEventListener("input", () => {
+    state.diameter = parseFloat(ui.diamInput.value) || 1;
+    refresh();
+  });
+
+  ui.btnMinus?.addEventListener("click", () => {
+    const v = Math.max(1, parseFloat(ui.diamInput.value) - 0.5);
+    ui.diamInput.value = v.toString();
+    state.diameter = v;
+    refresh();
+  });
+
+  ui.btnPlus?.addEventListener("click", () => {
+    const v = Math.min(50, parseFloat(ui.diamInput.value) + 0.5);
+    ui.diamInput.value = v.toString();
+    state.diameter = v;
+    refresh();
+  });
+
+  ui.diagTrigger?.addEventListener("click", () =>
+    ui.modal?.classList.add("active"),
+  );
+  ui.modalClose?.addEventListener("click", () =>
+    ui.modal?.classList.remove("active"),
+  );
+
+  refresh();
+</script>
+
+<style>
+  :root {
+    --drillsharp-primary: #0284c7;
+    --drillsharp-accent: #0284c7;
+    --drillsharp-text: #0f172a;
+    --drillsharp-text-muted: #475569;
+    --drillsharp-bg-dark: #f1f5f9;
+    --drillsharp-bg-panel: #fff;
+    --drillsharp-border: #cbd5e1;
+    --drillsharp-button-bg: #e2e8f0;
+    --drillsharp-button-hover: #cbd5e1;
+  }
+  
+  :global(.theme-dark) {
+    --drillsharp-primary: #38bdf8;
+    --drillsharp-accent: #38bdf8;
+    --drillsharp-text: #f8fafc;
+    --drillsharp-text-muted: #94a3b8;
+    --drillsharp-bg-dark: #000;
+    --drillsharp-bg-panel: #0a0f1d;
+    --drillsharp-border: #1e293b;
+    --drillsharp-button-bg: #1e293b;
+    --drillsharp-button-hover: #334155;
+  }
+
+  .drillsharp-root {
+    max-width: 1200px;
+    margin: 1rem auto;
+    padding: 0 1rem;
+    color: var(--drillsharp-text);
+  }
+
+  .drillsharp-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 340px;
+    gap: 1.5rem;
+    background: var(--drillsharp-bg-dark);
+    border-radius: 2.5rem;
+    padding: 2rem;
+    border: 1px solid var(--drillsharp-border);
+    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+
+  .drillsharp-gauge {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: radial-gradient(
+      circle at center,
+      var(--drillsharp-bg-panel) 0%,
+      var(--drillsharp-bg-dark) 100%
+    );
+    border-radius: 2rem;
+    min-height: 550px;
+    border: 1px solid var(--drillsharp-border);
+    transition: background 0.3s ease;
+  }
+
+  .drillsharp-svg {
+    width: 95%;
+    height: 95%;
+    max-height: 600px;
+    color: var(--drillsharp-text);
+  }
+
+  .drillsharp-gauge-lines {
+    filter: drop-shadow(0 0 2px var(--drillsharp-accent));
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .drillsharp-instruction {
+    position: absolute;
+    bottom: 2rem;
+    text-align: center;
+    width: 100%;
+    pointer-events: none;
+    padding: 0 1rem;
+  }
+
+  .drillsharp-instruction span {
+    background: var(--drillsharp-bg-panel);
+    color: var(--drillsharp-accent);
+    padding: 0.6rem 2rem;
+    border-radius: 2rem;
+    font-size: 0.7rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    border: 1px solid var(--drillsharp-border);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  }
+
+  .drillsharp-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .drillsharp-group {
+    background: var(--drillsharp-bg-panel);
+    padding: 1.5rem;
+    border-radius: 2rem;
+    border: 1px solid var(--drillsharp-border);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .drillsharp-group h4 {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    color: var(--drillsharp-primary);
+    margin-bottom: 1.25rem;
+    font-weight: 900;
+    letter-spacing: 0.1em;
+  }
+
+  .drillsharp-material-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .drillsharp-mat-btn {
+    background: var(--drillsharp-button-bg);
+    border: 1px solid var(--drillsharp-border);
+    border-radius: 1.25rem;
+    padding: 1rem 0.5rem;
+    color: var(--drillsharp-text-muted);
+    cursor: pointer;
+    font-weight: 800;
+    font-size: 0.8rem;
+    transition: all 0.2s;
+    text-transform: uppercase;
+  }
+
+  .drillsharp-mat-btn.active {
+    background: var(--drillsharp-accent);
+    color: var(--drillsharp-bg-dark);
+    border-color: var(--drillsharp-accent);
+    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
+  }
+
+  .drillsharp-stepper {
+    display: flex;
+    align-items: center;
+    background: var(--drillsharp-bg-dark);
+    border-radius: 1.25rem;
+    padding: 0.4rem;
+    border: 1px solid var(--drillsharp-border);
+  }
+
+  .drillsharp-step-btn {
+    width: 54px;
+    height: 54px;
+    background: var(--drillsharp-button-bg);
+    border: none;
+    color: var(--drillsharp-text);
+    border-radius: 1rem;
+    cursor: pointer;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+  }
+
+  .drillsharp-step-btn:active {
+    transform: scale(0.95);
+    background: var(--drillsharp-button-hover);
+  }
+
+  .drillsharp-stepper input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--drillsharp-accent);
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 950;
+    width: 80px;
+    outline: none;
+  }
+
+  .drillsharp-results {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+  }
+
+  .drillsharp-res-item {
+    background: var(--drillsharp-bg-dark);
+    padding: 1.25rem;
+    border-radius: 1.5rem;
+    border: 1px solid var(--drillsharp-border);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-start;
+  }
+
+  .drillsharp-res-label {
+    font-size: 0.65rem;
+    color: var(--drillsharp-text-muted);
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .drillsharp-res-value-box {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+  }
+
+  .drillsharp-res-value {
+    font-size: 1.5rem;
+    font-weight: 900;
+    color: var(--drillsharp-text);
+  }
+
+  .drillsharp-res-unit {
+    font-size: 0.7rem;
+    color: var(--drillsharp-accent);
+    font-weight: 800;
+  }
+
+  .drillsharp-diag-btn {
+    width: 100%;
+    padding: 1.25rem;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px dashed rgba(239, 68, 68, 0.3);
+    color: #ef4444;
+    border-radius: 1.5rem;
+    font-weight: 800;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-transform: uppercase;
+  }
+
+  .drillsharp-diag-btn:hover {
+    background: rgba(239, 68, 68, 0.2);
+    border-style: solid;
+    transform: translateY(-2px);
+  }
+  .drillsharp-diag-btn:active {
+    transform: translateY(0);
+  }
+
+  .drillsharp-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--drillsharp-bg-panel);
+    border: 1px solid var(--drillsharp-border);
+    padding: 2.5rem;
+    border-radius: 2.5rem;
+    z-index: 1000;
+    display: none;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
+  }
+
+  .drillsharp-modal.active {
+    display: block;
+    animation: drillsharp-modal-in 0.3s ease-out;
+  }
+
+  @keyframes drillsharp-modal-in {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -45%) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  .drillsharp-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--drillsharp-border);
+    padding-bottom: 1rem;
+  }
+
+  .drillsharp-modal-header h3 {
+    font-size: 1rem;
+    color: #ef4444;
+    text-transform: uppercase;
+    font-weight: 900;
+    margin: 0;
+  }
+
+  .drillsharp-modal-close {
+    background: none;
+    border: none;
+    font-size: 2rem;
+    color: var(--drillsharp-text-muted);
+    cursor: pointer;
+    transition: color 0.2s;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .drillsharp-modal-close:hover {
+    color: var(--drillsharp-text);
+  }
+
+  .drillsharp-diag-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+  }
+
+  .drillsharp-diag-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .drillsharp-diag-item strong {
+    color: var(--drillsharp-accent);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+  }
+
+  .drillsharp-diag-item p {
+    font-size: 0.75rem;
+    color: var(--drillsharp-text-muted);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .drillsharp-diag-img {
+    background: var(--drillsharp-bg-dark);
+    border-radius: 1rem;
+    padding: 1rem;
+    border: 1px solid var(--drillsharp-border);
+  }
+
+  @media (max-width: 1000px) {
+    .drillsharp-layout {
+      grid-template-columns: 1fr;
+      padding: 1rem;
+      border-radius: 1.5rem;
+    }
+    .drillsharp-gauge {
+      min-height: 380px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .drillsharp-root {
+      padding: 0 0.5rem;
+    }
+    .drillsharp-layout {
+      padding: 0.75rem;
+      gap: 1rem;
+    }
+    .drillsharp-gauge {
+      min-height: 320px;
+    }
+    .drillsharp-mat-btn {
+      font-size: 0.75rem;
+      padding: 0.8rem 0.5rem;
+    }
+    .drillsharp-step-btn {
+      width: 48px;
+      height: 48px;
+    }
+    .drillsharp-group {
+      padding: 1.25rem;
+    }
+    .drillsharp-res-item {
+      padding: 1rem;
+    }
+    .drillsharp-res-value {
+      font-size: 1.25rem;
+    }
+  }
+</style>