@jjlmoya/utils-diy 1.1.0

package/src/tool/balusterCalculator/component.astro

@@ -0,0 +1,605 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale } from '../../types';
+import type { BalusterCalculatorUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as BalusterCalculatorUI;
+---
+
+<div class="bc-root">
+  <div class="bc-input-panel">
+    <div class="bc-panel-header">
+      <div class="bc-panel-icon">
+        <Icon name="mdi:tape-measure" class="bc-icon" />
+      </div>
+      <div>
+        <p class="bc-panel-title">{t.sectionTitle}</p>
+        <p class="bc-panel-desc">{t.sectionDesc}</p>
+      </div>
+    </div>
+
+    <div class="bc-inputs-grid">
+      <div class="bc-input-group">
+        <label for="bc-length" class="bc-label">{t.labelRailLength}</label>
+        <div class="bc-input-wrapper">
+          <input type="number" id="bc-length" value="200" min="0" step="0.1" class="bc-input" />
+          <span class="bc-unit-label">cm</span>
+        </div>
+      </div>
+      <div class="bc-input-group">
+        <label for="bc-width" class="bc-label">{t.labelBalusterWidth}</label>
+        <div class="bc-input-wrapper">
+          <input type="number" id="bc-width" value="5" min="0" step="0.1" class="bc-input" />
+          <span class="bc-unit-label">cm</span>
+        </div>
+      </div>
+      <div class="bc-input-group">
+        <label for="bc-maxgap" class="bc-label">{t.labelMaxGap}</label>
+        <div class="bc-input-wrapper">
+          <input type="number" id="bc-maxgap" value="10" min="0" step="0.1" class="bc-input" />
+          <span class="bc-unit-label">cm</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="bc-unit-switcher">
+      <div class="bc-unit-toggle">
+        <button class="bc-unit-btn" data-bc-unit="cm" data-bc-active="true">cm</button>
+        <button class="bc-unit-btn" data-bc-unit="in" data-bc-active="false">in</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bc-blueprint">
+    <div class="bc-blueprint-grid"></div>
+    <div class="bc-blueprint-inner">
+      <div class="bc-bp-header">
+        <div>
+          <p class="bc-bp-plan-title">{t.blueprintTitle}</p>
+          <p class="bc-bp-ref">{t.blueprintRef}</p>
+        </div>
+        <div class="bc-bp-count-block">
+          <p id="bc-count" class="bc-bp-count">0</p>
+          <p class="bc-bp-count-label">{t.labelRequired}</p>
+        </div>
+      </div>
+
+      <div class="bc-bp-stats">
+        <div class="bc-stat-card">
+          <span class="bc-stat-label">{t.labelExactGap}</span>
+          <span id="bc-gap" class="bc-stat-value">0</span>
+        </div>
+        <div class="bc-stat-card">
+          <span class="bc-stat-label">{t.labelOnCenter}</span>
+          <span id="bc-oncenter" class="bc-stat-value">0</span>
+        </div>
+        <div class="bc-stat-card">
+          <span class="bc-stat-label">{t.labelTotalSpaces}</span>
+          <span id="bc-spaces" class="bc-stat-value">0</span>
+        </div>
+        <div class="bc-stat-card">
+          <span class="bc-stat-label">{t.labelCoveredLength}</span>
+          <span id="bc-covered" class="bc-stat-value">0</span>
+        </div>
+      </div>
+
+      <div class="bc-visualizer">
+        <svg
+          id="bc-svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 1000 200"
+          preserveAspectRatio="xMidYMid meet"
+          class="bc-svg"
+        ></svg>
+      </div>
+
+      <p class="bc-disclaimer">{t.labelDisclaimer}</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  let bcUnit = 'cm';
+  let bcLengthEl: HTMLInputElement | null = null;
+  let bcWidthEl: HTMLInputElement | null = null;
+  let bcMaxGapEl: HTMLInputElement | null = null;
+  let bcCountEl: HTMLElement | null = null;
+  let bcGapEl: HTMLElement | null = null;
+  let bcOnCenterEl: HTMLElement | null = null;
+  let bcSpacesEl: HTMLElement | null = null;
+  let bcCoveredEl: HTMLElement | null = null;
+  let bcSvgEl: Element | null = null;
+
+  function parseInput(el: HTMLInputElement | null, fallback = 0): number {
+    return parseFloat(el?.value ?? '') || fallback;
+  }
+
+  function setText(el: HTMLElement | null, text: string) {
+    if (el) el.textContent = text;
+  }
+
+  function createSvgEl(tag: string, attrs: Record<string, string>): Element {
+    const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+    return el;
+  }
+
+  function renderEmpty() {
+    setText(bcCountEl, '0');
+    setText(bcGapEl, '0');
+    setText(bcOnCenterEl, '0');
+    setText(bcSpacesEl, '0');
+    setText(bcCoveredEl, '0');
+    if (bcSvgEl) bcSvgEl.innerHTML = '';
+  }
+
+  type DrawCtx = { svg: Element; scale: number; pX: number; railY: number; railH: number; balH: number };
+
+  function drawRail(ctx: DrawCtx, L: number) {
+    ctx.svg.appendChild(createSvgEl('rect', {
+      x: String(ctx.pX), y: String(ctx.railY),
+      width: String(L * ctx.scale), height: String(ctx.railH),
+      fill: 'none', stroke: 'white', 'stroke-width': '2',
+    }));
+  }
+
+  function drawBaluster(ctx: DrawCtx, x: number, wp: number) {
+    const balY = ctx.railY + ctx.railH;
+    ctx.svg.appendChild(createSvgEl('rect', {
+      x: String(x), y: String(balY),
+      width: String(wp), height: String(ctx.balH),
+      fill: 'white', 'fill-opacity': '0.2', stroke: 'white', 'stroke-width': '1',
+    }));
+  }
+
+  function drawDashLine(ctx: DrawCtx, cx: number) {
+    const balY = ctx.railY + ctx.railH;
+    ctx.svg.appendChild(createSvgEl('line', {
+      x1: String(cx), y1: String(balY),
+      x2: String(cx), y2: String(balY + ctx.balH + 10),
+      stroke: 'white', 'stroke-width': '0.5', 'stroke-dasharray': '2,2', opacity: '0.5',
+    }));
+  }
+
+  function drawTruncatedText(ctx: DrawCtx, n: number) {
+    const el = createSvgEl('text', {
+      x: '500', y: String(ctx.railY + ctx.railH + ctx.balH / 2), fill: 'white', 'text-anchor': 'middle',
+    });
+    el.textContent = `... ${n - 40} ...`;
+    ctx.svg.appendChild(el);
+  }
+
+  function drawBalusters(ctx: DrawCtx, n: number, g: number, w: number) {
+    const isTruncated = n > 100;
+    const drawLimit = isTruncated ? 20 : n;
+    let currentX = ctx.pX + g * ctx.scale;
+    for (let i = 0; i < drawLimit; i++) {
+      drawBaluster(ctx, currentX, w * ctx.scale);
+      drawDashLine(ctx, currentX + (w * ctx.scale) / 2);
+      currentX += (w + g) * ctx.scale;
+    }
+    if (isTruncated) drawTruncatedText(ctx, n);
+  }
+
+  function drawArrow(ctx: DrawCtx, g: number, label: string) {
+    const balY = ctx.railY + ctx.railH;
+    const x1 = ctx.pX;
+    const x2 = ctx.pX + g * ctx.scale;
+    const y = balY + ctx.balH / 2;
+    if (x2 - x1 < 20) return;
+    const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    group.appendChild(createSvgEl('line', {
+      x1: String(x1), y1: String(y), x2: String(x2), y2: String(y),
+      stroke: '#4ade80', 'stroke-width': '1',
+    }));
+    const textEl = createSvgEl('text', {
+      x: String((x1 + x2) / 2), y: String(y - 5),
+      fill: '#4ade80', 'text-anchor': 'middle', 'font-size': '10',
+    });
+    textEl.textContent = label;
+    group.appendChild(textEl);
+    ctx.svg.appendChild(group);
+  }
+
+  function drawBlueprint(n: number, g: number, w: number, L: number) {
+    if (!bcSvgEl) return;
+    bcSvgEl.innerHTML = '';
+    const pX = 50;
+    const ctx: DrawCtx = { svg: bcSvgEl, scale: (1000 - pX * 2) / L, pX, railY: 50, railH: 20, balH: 100 };
+    drawRail(ctx, L);
+    drawBalusters(ctx, n, g, w);
+    drawArrow(ctx, g, `Gap ${g.toFixed(1)}`);
+  }
+
+  function calculate() {
+    const L = parseInput(bcLengthEl);
+    const w = parseInput(bcWidthEl);
+    const maxGap = parseInput(bcMaxGapEl);
+    if (L <= 0 || maxGap <= 0) { renderEmpty(); return; }
+    let n = Math.ceil((L - maxGap) / (w + maxGap));
+    if (n < 0) n = 0;
+    let g = (L - n * w) / (n + 1);
+    if (g < 0) { g = 0; n = 0; }
+    const onCenter = g + w;
+    const fmt = (v: number) => v.toLocaleString('es-ES', { maximumFractionDigits: 2 });
+    setText(bcCountEl, String(n));
+    setText(bcGapEl, `${fmt(g)} ${bcUnit}`);
+    setText(bcOnCenterEl, `${fmt(onCenter)} ${bcUnit}`);
+    setText(bcSpacesEl, String(n + 1));
+    setText(bcCoveredEl, `${fmt(L)} ${bcUnit}`);
+    drawBlueprint(n, g, w, L);
+  }
+
+  function setUnit(root: HTMLElement, u: string) {
+    bcUnit = u;
+    root.querySelectorAll('[data-bc-unit]').forEach((btn) => {
+      (btn as HTMLElement).dataset.bcActive = btn.getAttribute('data-bc-unit') === u ? 'true' : 'false';
+    });
+    root.querySelectorAll('.bc-unit-label').forEach((el) => { el.textContent = u; });
+    calculate();
+  }
+
+  function attachInputListeners() {
+    bcLengthEl?.addEventListener('input', calculate);
+    bcWidthEl?.addEventListener('input', calculate);
+    bcMaxGapEl?.addEventListener('input', calculate);
+  }
+
+  function attachUnitListeners(root: HTMLElement) {
+    root.querySelectorAll('[data-bc-unit]').forEach((btn) => {
+      btn.addEventListener('click', () => setUnit(root, btn.getAttribute('data-bc-unit') ?? 'cm'));
+    });
+  }
+
+  function initBalusterCalculator(root: HTMLElement) {
+    bcLengthEl = root.querySelector('#bc-length');
+    bcWidthEl = root.querySelector('#bc-width');
+    bcMaxGapEl = root.querySelector('#bc-maxgap');
+    bcCountEl = root.querySelector('#bc-count');
+    bcGapEl = root.querySelector('#bc-gap');
+    bcOnCenterEl = root.querySelector('#bc-oncenter');
+    bcSpacesEl = root.querySelector('#bc-spaces');
+    bcCoveredEl = root.querySelector('#bc-covered');
+    bcSvgEl = root.querySelector('#bc-svg');
+    attachInputListeners();
+    attachUnitListeners(root);
+    calculate();
+  }
+
+  function init() {
+    document.querySelectorAll<HTMLElement>('.bc-root').forEach(initBalusterCalculator);
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>
+
+<style>
+  .bc-root {
+    width: 100%;
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .bc-input-panel {
+    background: #fff;
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f1f5f9;
+  }
+
+  .bc-panel-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .bc-panel-icon {
+    padding: 0.75rem;
+    background: #dbeafe;
+    border-radius: 0.75rem;
+    color: #2563eb;
+    font-size: 1.5rem;
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .bc-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .bc-panel-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 0;
+  }
+
+  .bc-panel-desc {
+    font-size: 0.875rem;
+    color: #94a3b8;
+    margin: 0;
+  }
+
+  .bc-inputs-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 768px) {
+    .bc-inputs-grid {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  .bc-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .bc-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+  }
+
+  .bc-input-wrapper {
+    position: relative;
+  }
+
+  .bc-input {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 2.5rem 0.75rem 1rem;
+    border-radius: 0.75rem;
+    background: #f8fafc;
+    border: 1px solid transparent;
+    color: #1e293b;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    box-sizing: border-box;
+  }
+
+  .bc-input:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
+
+  .bc-unit-label {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #94a3b8;
+    font-size: 0.875rem;
+    pointer-events: none;
+  }
+
+  .bc-unit-switcher {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+  }
+
+  .bc-unit-toggle {
+    display: inline-flex;
+    background: #f1f5f9;
+    padding: 0.25rem;
+    border-radius: 0.5rem;
+    gap: 0.25rem;
+  }
+
+  .bc-unit-btn {
+    padding: 0.375rem 1rem;
+    border-radius: 0.375rem;
+    border: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: #64748b;
+    background: transparent;
+  }
+
+  [data-bc-unit][data-bc-active='true'] {
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    color: #1e293b;
+  }
+
+  .bc-blueprint {
+    background: #1e3a8a;
+    border-radius: 1.5rem;
+    padding: 0.25rem;
+    box-shadow: 0 12px 40px rgba(30, 58, 138, 0.3);
+    overflow: hidden;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    position: relative;
+  }
+
+  .bc-blueprint-grid {
+    position: absolute;
+    inset: 0;
+    opacity: 0.1;
+    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
+    background-size: 20px 20px;
+    pointer-events: none;
+  }
+
+  .bc-blueprint-inner {
+    position: relative;
+    padding: 1.5rem;
+    color: #bfdbfe;
+  }
+
+  @media (min-width: 768px) {
+    .bc-blueprint-inner {
+      padding: 2.5rem;
+    }
+  }
+
+  .bc-bp-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .bc-bp-plan-title {
+    font-size: 1.25rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #fff;
+    margin: 0 0 0.25rem;
+  }
+
+  .bc-bp-ref {
+    font-size: 0.75rem;
+    opacity: 0.6;
+    margin: 0;
+  }
+
+  .bc-bp-count-block {
+    text-align: right;
+  }
+
+  .bc-bp-count {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: #fff;
+    margin: 0 0 0.25rem;
+    line-height: 1;
+  }
+
+  .bc-bp-count-label {
+    font-size: 0.625rem;
+    opacity: 0.6;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: 0;
+  }
+
+  .bc-bp-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  @media (min-width: 768px) {
+    .bc-bp-stats {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
+
+  .bc-stat-card {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(4px);
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .bc-stat-label {
+    display: block;
+    font-size: 0.625rem;
+    opacity: 0.5;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.25rem;
+  }
+
+  .bc-stat-value {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  .bc-visualizer {
+    width: 100%;
+    height: 12rem;
+    border: 1px dashed rgba(255, 255, 255, 0.3);
+    border-radius: 0.375rem;
+    background: rgba(23, 37, 84, 0.5);
+    overflow: hidden;
+    position: relative;
+  }
+
+  @media (min-width: 768px) {
+    .bc-visualizer {
+      height: 16rem;
+    }
+  }
+
+  .bc-svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bc-disclaimer {
+    text-align: center;
+    font-size: 0.75rem;
+    opacity: 0.4;
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
+
+  :global(.theme-dark) .bc-input-panel {
+    background: #18181b;
+    border-color: rgba(51, 65, 85, 0.4);
+  }
+
+  :global(.theme-dark) .bc-panel-icon {
+    background: rgba(30, 58, 138, 0.3);
+  }
+
+  :global(.theme-dark) .bc-panel-title {
+    color: #f1f5f9;
+  }
+
+  :global(.theme-dark) .bc-label {
+    color: #94a3b8;
+  }
+
+  :global(.theme-dark) .bc-input {
+    background: #27272a;
+    color: #f1f5f9;
+  }
+
+  :global(.theme-dark) .bc-input:focus {
+    border-color: #3b82f6;
+  }
+
+  :global(.theme-dark) .bc-unit-toggle {
+    background: #27272a;
+  }
+
+  :global(.theme-dark) [data-bc-unit][data-bc-active='true'] {
+    background: #3f3f46;
+    color: #f1f5f9;
+  }
+
+  :global(.theme-dark) .bc-blueprint {
+    background: #0f172a;
+  }
+</style>