@jjlmoya/utils-diy 1.1.0

package/src/tool/furnitureFit/component.astro

@@ -0,0 +1,552 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { FurnitureFitUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+const { ui } = Astro.props;
+const t = (ui ?? {}) as FurnitureFitUI;
+---
+
+<div
+  class="ff-root"
+  data-ff-root
+  data-ff-yes={t.verdictYes}
+  data-ff-no={t.verdictNo}
+  data-ff-reason-direct={t.fitDirect}
+  data-ff-reason-diagonal3d={t.fitDiagonal3d}
+  data-ff-reason-diagonalplane={t.fitDiagonalPlane}
+  data-ff-reason-nope={t.fitNope}
+>
+  <div class="ff-grid">
+    <div class="ff-col-left">
+      <div class="ff-card">
+        <h2 class="ff-card-title">
+          <Icon name="mdi:elevator-passenger" />
+          {t.conTitle}
+        </h2>
+        <div class="ff-inputs-grid">
+          <div class="ff-input-group">
+            <label class="ff-label">{t.labelWidth}</label>
+            <input type="number" data-ff-con-w data-ff-inp value="120" class="ff-input" />
+          </div>
+          <div class="ff-input-group">
+            <label class="ff-label">{t.labelHeight}</label>
+            <input type="number" data-ff-con-h data-ff-inp value="210" class="ff-input" />
+          </div>
+          <div class="ff-input-group">
+            <label class="ff-label">{t.labelDepth}</label>
+            <input type="number" data-ff-con-d data-ff-inp value="120" class="ff-input" />
+          </div>
+        </div>
+        <p class="ff-hint">{t.conHint}</p>
+      </div>
+
+      <div class="ff-card">
+        <h2 class="ff-card-title">
+          <Icon name="mdi:sofa" />
+          {t.objTitle}
+        </h2>
+        <div class="ff-inputs-grid">
+          <div class="ff-input-group">
+            <label class="ff-label">{t.labelLength}</label>
+            <input type="number" data-ff-obj-w data-ff-inp value="220" class="ff-input" />
+          </div>
+          <div class="ff-input-group">
+            <label class="ff-label">{t.labelHeight}</label>
+            <input type="number" data-ff-obj-h data-ff-inp value="90" class="ff-input" />
+          </div>
+          <div class="ff-input-group">
+            <label class="ff-label">{t.labelDepth}</label>
+            <input type="number" data-ff-obj-d data-ff-inp value="80" class="ff-input" />
+          </div>
+        </div>
+        <div class="ff-margin-row">
+          <div class="ff-margin-left">
+            <label class="ff-label">{t.labelMargin}</label>
+            <input type="range" data-ff-margin data-ff-inp min="0" max="10" value="2" class="ff-slider" />
+          </div>
+          <span class="ff-margin-display" data-ff-margin-display>2cm</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="ff-col-right">
+      <div class="ff-visual-container">
+        <div class="ff-perspective">
+          <div class="ff-visual" data-ff-visual>
+            <div class="ff-space-box" data-ff-space-box></div>
+            <div class="ff-obj-box" data-ff-obj-box>{t.objLabel}</div>
+          </div>
+        </div>
+        <div class="ff-viz-label">
+          <Icon name="mdi:cube-outline" />
+          <span>{t.vizLabel}</span>
+        </div>
+      </div>
+
+      <div class="ff-verdict" data-ff-verdict>
+        <div class="ff-verdict-inner">
+          <div class="ff-verdict-icon-wrap">
+            <Icon name="mdi:check" />
+          </div>
+          <div>
+            <h3 class="ff-verdict-title" data-ff-verdict-title>{t.verdictDefault}</h3>
+            <p class="ff-verdict-reason" data-ff-verdict-reason>{t.verdictHint}</p>
+          </div>
+        </div>
+        <div class="ff-diag-info ff-hidden" data-ff-diag-info>
+          <span>{t.diagLabel}</span>
+          <span class="ff-diag-val" data-ff-diag-val>0cm</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculateFit } from './engine';
+  import type { Dimensions, FitResult } from './engine';
+
+  interface FfDims {
+    obj: Dimensions;
+    con: Dimensions;
+    margin: number;
+  }
+
+  function ffNum(el: Element | null): number {
+    if (!(el instanceof HTMLInputElement)) return 0;
+    return parseFloat(el.value) || 0;
+  }
+
+  function ffAttr(root: Element, key: string): string {
+    return root.getAttribute(key) ?? '';
+  }
+
+  function ffReadDims(root: Element): FfDims {
+    return {
+      obj: { width: ffNum(root.querySelector('[data-ff-obj-w]')), height: ffNum(root.querySelector('[data-ff-obj-h]')), depth: ffNum(root.querySelector('[data-ff-obj-d]')) },
+      con: { width: ffNum(root.querySelector('[data-ff-con-w]')), height: ffNum(root.querySelector('[data-ff-con-h]')), depth: ffNum(root.querySelector('[data-ff-con-d]')) },
+      margin: ffNum(root.querySelector('[data-ff-margin]')),
+    };
+  }
+
+  function ffUpdateVerdict(root: Element, result: FitResult): void {
+    const card = root.querySelector('[data-ff-verdict]');
+    const title = root.querySelector('[data-ff-verdict-title]');
+    const reason = root.querySelector('[data-ff-verdict-reason]');
+    if (card) card.setAttribute('data-ff-fits', result.fits ? 'yes' : 'no');
+    if (title) title.textContent = result.fits ? ffAttr(root, 'data-ff-yes') : ffAttr(root, 'data-ff-no');
+    if (reason) reason.textContent = ffAttr(root, `data-ff-reason-${result.type}`);
+  }
+
+  function ffUpdateDiag(root: Element, result: FitResult): void {
+    const info = root.querySelector('[data-ff-diag-info]');
+    const val = root.querySelector('[data-ff-diag-val]');
+    const show = result.maxDiagonal > 0;
+    if (!info) return;
+    info.classList.toggle('ff-hidden', !show);
+    if (show && val) val.textContent = `${result.maxDiagonal.toFixed(1)}cm`;
+  }
+
+  function ffApplyBoxSizes(spaceBox: HTMLElement, objBox: HTMLElement, dims: FfDims, scale: number): void {
+    spaceBox.style.width = `${dims.con.width * scale}px`;
+    spaceBox.style.height = `${dims.con.height * scale}px`;
+    objBox.style.width = `${dims.obj.width * scale}px`;
+    objBox.style.height = `${dims.obj.height * scale}px`;
+  }
+
+  function ffApplyBoxStyle(objBox: HTMLElement, result: FitResult, conH: number, conW: number): void {
+    const isDiag = result.type === 'diagonal3d' || result.type === 'diagonalplane';
+    const angle = isDiag ? Math.atan2(conH, conW) * (180 / Math.PI) : 0;
+    objBox.style.transform = `translateX(-50%) translateY(-50%) rotate(-${angle}deg)`;
+    objBox.style.background = result.fits ? 'rgba(16, 185, 129, 0.4)' : 'rgba(244, 63, 94, 0.6)';
+    objBox.style.borderColor = result.fits ? 'rgba(16, 185, 129, 0.8)' : 'rgba(244, 63, 94, 0.8)';
+  }
+
+  function ffUpdateBoxes(root: Element, result: FitResult): void {
+    const dims = ffReadDims(root);
+    const max = Math.max(dims.con.width, dims.con.height, dims.con.depth, dims.obj.width, dims.obj.height, dims.obj.depth);
+    const scale = 200 / (max || 1);
+    const spaceBox = root.querySelector('[data-ff-space-box]') as HTMLElement | null;
+    const objBox = root.querySelector('[data-ff-obj-box]') as HTMLElement | null;
+    if (!spaceBox || !objBox) return;
+    ffApplyBoxSizes(spaceBox, objBox, dims, scale);
+    ffApplyBoxStyle(objBox, result, dims.con.height, dims.con.width);
+  }
+
+  function ffCalc(root: Element): void {
+    const dims = ffReadDims(root);
+    const display = root.querySelector('[data-ff-margin-display]');
+    if (display) display.textContent = `${dims.margin.toFixed(0)}cm`;
+    const result = calculateFit(dims.obj, dims.con, dims.margin);
+    ffUpdateVerdict(root, result);
+    ffUpdateDiag(root, result);
+    ffUpdateBoxes(root, result);
+  }
+
+  function ffAttach(root: Element): void {
+    root.querySelectorAll('[data-ff-inp]').forEach((el) => el.addEventListener('input', () => ffCalc(root)));
+    const vc = root.querySelector('[data-ff-visual]') as HTMLElement | null;
+    window.addEventListener('mousemove', (e) => {
+      if (!vc) return;
+      const x = (e.clientX / window.innerWidth - 0.5) * 40;
+      const y = (e.clientY / window.innerHeight - 0.5) * -40;
+      vc.style.transform = `rotateX(${12 + y}deg) rotateY(${-12 + x}deg)`;
+    });
+  }
+
+  function ffInit(root: Element): void {
+    ffAttach(root);
+    ffCalc(root);
+  }
+
+  document.querySelectorAll('[data-ff-root]').forEach(ffInit);
+</script>
+
+<style>
+  .ff-root {
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .ff-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: start;
+  }
+
+  .ff-col-left {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .ff-col-right {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .ff-card {
+    background: #fff;
+    border-radius: 1.5rem;
+    padding: 2rem;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f1f5f9;
+  }
+
+  :global(.theme-dark) .ff-card {
+    background: #0f172a;
+    border-color: #1e293b;
+  }
+
+  .ff-card-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #1e293b;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0 0 1.5rem;
+  }
+
+  :global(.theme-dark) .ff-card-title {
+    color: #fff;
+  }
+
+  .ff-card-title svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .ff-card-title svg:first-child {
+    color: #6366f1;
+  }
+
+  .ff-inputs-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .ff-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .ff-label {
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+  }
+
+  .ff-input {
+    width: 100%;
+    background: #f8fafc;
+    border: none;
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1e293b;
+    outline: none;
+    transition: box-shadow 0.15s ease;
+    box-sizing: border-box;
+  }
+
+  .ff-input:focus {
+    box-shadow: 0 0 0 2px #6366f1;
+  }
+
+  :global(.theme-dark) .ff-input {
+    background: #1e293b;
+    color: #fff;
+  }
+
+  .ff-input::-webkit-outer-spin-button,
+  .ff-input::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  .ff-input[type="number"] {
+    appearance: textfield;
+  }
+
+  .ff-hint {
+    font-size: 0.625rem;
+    color: #94a3b8;
+    font-style: italic;
+    margin: 0;
+  }
+
+  .ff-margin-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #f1f5f9;
+    margin-top: 0.5rem;
+  }
+
+  :global(.theme-dark) .ff-margin-row {
+    border-color: #1e293b;
+  }
+
+  .ff-margin-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .ff-slider {
+    width: 100%;
+    accent-color: #6366f1;
+    cursor: pointer;
+  }
+
+  .ff-margin-display {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #64748b;
+    min-width: 2.5rem;
+    text-align: right;
+  }
+
+  .ff-visual-container {
+    aspect-ratio: 1;
+    background: #f8fafc;
+    border-radius: 2.5rem;
+    border: 1px solid #e2e8f0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  :global(.theme-dark) .ff-visual-container {
+    background: #020617;
+    border-color: #1e293b;
+  }
+
+  .ff-perspective {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    perspective: 1000px;
+  }
+
+  .ff-visual {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    transform: rotateX(12deg) rotateY(-12deg);
+    transition: transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ff-space-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    border: 2px dashed #cbd5e1;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.5rem;
+    transition:
+      width 0.5s ease,
+      height 0.5s ease;
+    width: 200px;
+    height: 200px;
+  }
+
+  :global(.theme-dark) .ff-space-box {
+    border-color: #334155;
+  }
+
+  .ff-obj-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background: rgba(99, 102, 241, 0.5);
+    border: 1px solid rgba(99, 102, 241, 0.8);
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.5625rem;
+    font-weight: 900;
+    color: rgba(255, 255, 255, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    overflow: hidden;
+    transition:
+      width 0.5s ease,
+      height 0.5s ease,
+      background 0.5s ease,
+      border-color 0.5s ease;
+    width: 160px;
+    height: 80px;
+  }
+
+  .ff-viz-label {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.5625rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #94a3b8;
+  }
+
+  .ff-viz-label svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .ff-verdict {
+    background: #f1f5f9;
+    border-left: 8px solid #94a3b8;
+    border-radius: 1.5rem;
+    padding: 2rem;
+    color: #1e293b;
+    transition: all 0.5s ease;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+  }
+
+  :global(.theme-dark) .ff-verdict {
+    background: #1e293b;
+    border-color: #475569;
+    color: #fff;
+  }
+
+  .ff-verdict[data-ff-fits="yes"] {
+    background: #10b981;
+    border-color: #059669;
+    color: #fff;
+    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
+  }
+
+  .ff-verdict[data-ff-fits="no"] {
+    background: #f43f5e;
+    border-color: #e11d48;
+    color: #fff;
+    box-shadow: 0 8px 32px rgba(244, 63, 94, 0.3);
+  }
+
+  .ff-verdict-inner {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .ff-verdict-icon-wrap {
+    padding: 1rem;
+    border-radius: 1rem;
+    background: rgba(255, 255, 255, 0.2);
+    flex-shrink: 0;
+  }
+
+  .ff-verdict-icon-wrap svg {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .ff-verdict-title {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0 0 0.25rem;
+    line-height: 1.2;
+  }
+
+  .ff-verdict-reason {
+    font-size: 0.875rem;
+    opacity: 0.9;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .ff-diag-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+    opacity: 0.7;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.15);
+  }
+
+  .ff-diag-val {
+    font-weight: 700;
+  }
+
+  .ff-hidden {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    .ff-grid {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+  }
+</style>

package/src/tool/furnitureFit/engine.ts

@@ -0,0 +1,51 @@
+export type FitType = 'direct' | 'diagonal3d' | 'diagonalplane' | 'nope';
+
+export interface Dimensions {
+  width: number;
+  height: number;
+  depth: number;
+}
+
+export interface FitResult {
+  fits: boolean;
+  type: FitType;
+  clearance: number;
+  maxDiagonal: number;
+}
+
+function ffFitsDirect(obj: number[], con: number[]): boolean {
+  return obj[0] <= con[0] && obj[1] <= con[1] && obj[2] <= con[2];
+}
+
+function ffFits3D(objMax: number, objOther: number[], con3D: number, conOther: number[]): boolean {
+  return objMax <= con3D && objOther[0] <= conOther[0] && objOther[1] <= conOther[1];
+}
+
+function ffFitsPlane(objMax: number, maxPlane: number, obj0: number, con0: number): boolean {
+  return objMax <= maxPlane && obj0 <= con0;
+}
+
+export function calculateFit(object: Dimensions, container: Dimensions, margin: number): FitResult {
+  const adjW = container.width - margin;
+  const adjH = container.height - margin;
+  const adjD = container.depth - margin;
+  const objDims = [object.width, object.height, object.depth].sort((a, b) => a - b);
+  const conDims = [adjW, adjH, adjD].sort((a, b) => a - b);
+  if (ffFitsDirect(objDims, conDims)) {
+    const clearance = Math.min(conDims[0] - objDims[0], conDims[1] - objDims[1], conDims[2] - objDims[2]);
+    return { fits: true, type: 'direct', clearance, maxDiagonal: 0 };
+  }
+  const con3D = Math.sqrt(adjW ** 2 + adjH ** 2 + adjD ** 2);
+  const objMax = Math.max(...objDims);
+  const objOther = objDims.slice(0, 2);
+  const conOther = conDims.slice(0, 2);
+  if (ffFits3D(objMax, objOther, con3D, conOther)) {
+    return { fits: true, type: 'diagonal3d', clearance: con3D - objMax, maxDiagonal: con3D };
+  }
+  const planes = [Math.sqrt(adjW ** 2 + adjH ** 2), Math.sqrt(adjW ** 2 + adjD ** 2), Math.sqrt(adjH ** 2 + adjD ** 2)];
+  const maxPlane = Math.max(...planes);
+  if (ffFitsPlane(objMax, maxPlane, objOther[0], conOther[0])) {
+    return { fits: true, type: 'diagonalplane', clearance: maxPlane - objMax, maxDiagonal: maxPlane };
+  }
+  return { fits: false, type: 'nope', clearance: 0, maxDiagonal: con3D };
+}