@jjlmoya/utils-textiles 1.1.0

package/src/tool/stainChemistry/component.astro

@@ -0,0 +1,717 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { StainChemistryUI } from './ui';
+
+interface Props {
+  ui: StainChemistryUI;
+}
+
+const { ui } = Astro.props;
+
+function resolveFiberType(family: string, isNoble?: boolean): string {
+  if (family === 'synthetic') return 'synthetic';
+  if (isNoble) return 'delicate';
+  return 'natural';
+}
+
+const fibers = Object.entries(ui.fiberData)
+  .map(([id, data]) => ({
+    id,
+    name: data.name,
+    fiberType: resolveFiberType(data.family, data.isNoble),
+  }))
+  .sort((a, b) => a.name.localeCompare(b.name));
+---
+
+<div class="stain-chemistry-container" id="stain-chemistry-root">
+  <div class="card-wrapper">
+    <div class="selectors-section">
+      <div class="selectors-grid">
+        <div class="selector-group">
+          <label class="selector-label">
+            <Icon name="mdi:tshirt-v-outline" class="label-icon" />
+            {ui.fiberLabel}
+          </label>
+          <div class="select-wrapper">
+            <select id="fiber-select" class="selector-input">
+              <option value="" disabled selected>{ui.selectFiberPlaceholder}</option>
+              {fibers.map((fiber) => (
+                <option value={fiber.id} data-fiber-type={fiber.fiberType}>{fiber.name}</option>
+              ))}
+            </select>
+            <Icon name="mdi:chevron-down" class="select-chevron" />
+          </div>
+        </div>
+
+        <div class="selector-group">
+          <label class="selector-label">
+            <Icon name="mdi:shimmer" class="label-icon" />
+            {ui.stainLabel}
+          </label>
+          <div class="select-wrapper">
+            <select id="stain-select" class="selector-input">
+              <option value="" disabled selected>{ui.selectStainPlaceholder}</option>
+              {ui.stains.map((stain) => (
+                <option value={stain.id}>{stain.name}</option>
+              ))}
+            </select>
+            <Icon name="mdi:chevron-down" class="select-chevron" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="protocol-display" class="protocol-display hidden">
+      <div class="protocol-card">
+        <div class="protocol-header">
+          <div class="protocol-icon-wrap">
+            <Icon name="mdi:flask-outline" class="protocol-icon" />
+          </div>
+          <div>
+            <p class="protocol-meta">{ui.molecularDiagnosis}</p>
+            <h3 id="protocol-title" class="protocol-title">—</h3>
+          </div>
+        </div>
+
+        <div class="protocol-body">
+          <div class="protocol-grid">
+            <div class="info-card info-card--agent">
+              <div class="info-card-icon-wrap agent-icon-wrap">
+                <Icon name="mdi:molecule" class="info-card-icon" />
+              </div>
+              <span class="info-card-meta">{ui.requiredAgent}</span>
+              <p id="protocol-agent" class="info-card-value">—</p>
+              <p id="protocol-agent-desc" class="info-card-desc"></p>
+            </div>
+
+            <div class="info-card info-card--temp">
+              <div class="info-card-icon-wrap temp-icon-wrap">
+                <Icon name="mdi:water-thermometer-outline" class="info-card-icon" />
+              </div>
+              <span class="info-card-meta">{ui.thermalCondition}</span>
+              <p id="protocol-temp" class="info-card-temp-value">—</p>
+              <span class="info-card-temp-label">{ui.temperature}</span>
+            </div>
+          </div>
+
+          <div class="method-card">
+            <div class="method-card-overlay">
+              <Icon name="mdi:washing-machine" class="method-overlay-icon" />
+            </div>
+            <div class="method-card-content">
+              <div class="method-card-header">
+                <div class="method-icon-wrap">
+                  <Icon name="mdi:format-list-bulleted" class="method-icon" />
+                </div>
+                <span class="method-meta">{ui.cleaningInstructions}</span>
+              </div>
+              <div id="protocol-method" class="method-text">—</div>
+            </div>
+          </div>
+
+          <div id="protocol-warning" class="warning-card hidden">
+            <div class="warning-card-inner">
+              <Icon name="mdi:shield-alert-outline" class="warning-icon" />
+              <div>
+                <p class="warning-label">{ui.criticalWarningLabel}</p>
+                <p id="warning-text" class="warning-text"></p>
+              </div>
+            </div>
+          </div>
+
+          <div class="note-card">
+            <div class="note-card-inner">
+              <span class="note-badge">!</span>
+              <div>
+                <p class="note-label">{ui.technicalNote}</p>
+                <p class="note-text">{ui.technicalNoteText}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="empty-state" class="empty-state">
+      <div class="empty-icon-wrap">
+        <Icon name="mdi:hanger" class="empty-icon" />
+      </div>
+      <h4 class="empty-title">{ui.systemDiagnosis}</h4>
+      <p class="empty-desc">{ui.systemDiagnosisDesc}</p>
+    </div>
+  </div>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__stainUI = ui;
+</script>
+
+<script>
+  import { getFiberType } from './logic';
+  import type { StainChemistryUI, StainChemistryStain, StainChemistryAgent, StainChemistryProtocol } from './ui';
+
+  type StainUI = StainChemistryUI;
+
+  interface ProtocolCtx {
+    stain: StainChemistryStain;
+    agent: StainChemistryAgent;
+    protocol: StainChemistryProtocol;
+    fiberType: string;
+    ui: StainUI;
+  }
+
+  function setText(id: string, value: string) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+  }
+
+  function renderWarning({ agent, protocol, fiberType, ui }: ProtocolCtx) {
+    const warningDiv = document.getElementById('protocol-warning');
+    const warningText = document.getElementById('warning-text');
+    if (!warningDiv || !warningText) return;
+
+    const isDelicatePercarbonate = fiberType === 'delicate' && protocol.agentId === 'percarbonate';
+    const warning = isDelicatePercarbonate ? ui.delicatePercarbonateWarning : (agent.warning ?? '');
+    warningDiv.classList.toggle('hidden', !warning);
+    if (warning) warningText.textContent = warning;
+  }
+
+  function renderProtocol(ctx: ProtocolCtx) {
+    const { stain, agent, protocol } = ctx;
+    setText('protocol-title', stain.name);
+    setText('protocol-agent', agent.name);
+    setText('protocol-agent-desc', agent.description);
+    setText('protocol-temp', protocol.temperature);
+    setText('protocol-method', protocol.method);
+    renderWarning(ctx);
+  }
+
+  function resolveProtocol(ui: StainUI, fiberId: string, stainId: string): ProtocolCtx | null {
+    const fiberType = getFiberType(fiberId, ui.fiberData);
+    const stain = ui.stains.find((s) => s.id === stainId);
+    if (!stain) return null;
+    const protocol = stain.protocols[fiberType] ?? stain.protocols.natural;
+    const agent = ui.agents[protocol.agentId];
+    if (!agent) return null;
+    return { stain, agent, protocol, fiberType, ui };
+  }
+
+  function updateProtocol() {
+    const stainUI = (window as unknown as { __stainUI: StainUI }).__stainUI;
+    const fiberSelect = document.getElementById('fiber-select') as HTMLSelectElement;
+    const stainSelect = document.getElementById('stain-select') as HTMLSelectElement;
+    const display = document.getElementById('protocol-display');
+    const emptyState = document.getElementById('empty-state');
+
+    if (!fiberSelect?.value || !stainSelect?.value || !display || !emptyState) return;
+
+    const ctx = resolveProtocol(stainUI, fiberSelect.value, stainSelect.value);
+    if (!ctx) return;
+
+    emptyState.classList.add('hidden');
+    display.classList.remove('hidden');
+    renderProtocol(ctx);
+  }
+
+  function initStainChemistry() {
+    const root = document.getElementById('stain-chemistry-root');
+    if (!root) return;
+
+    const fiberSelect = document.getElementById('fiber-select');
+    const stainSelect = document.getElementById('stain-select');
+
+    fiberSelect?.addEventListener('change', updateProtocol);
+    stainSelect?.addEventListener('change', updateProtocol);
+  }
+
+  function startInit() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initStainChemistry);
+    } else {
+      setTimeout(initStainChemistry, 100);
+    }
+    document.addEventListener('astro:page-load', initStainChemistry);
+  }
+
+  startInit();
+</script>
+
+<style>
+  .stain-chemistry-container {
+    width: 100%;
+    padding: 1rem;
+  }
+
+  .card-wrapper {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    overflow: hidden;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  }
+
+
+  .selectors-section {
+    padding: 2rem;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-surface);
+  }
+
+  .selectors-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 600px) {
+    .selectors-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .selector-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .selector-label {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.65rem;
+    font-weight: 900;
+    color: #6366f1;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+  }
+
+  .label-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .select-wrapper {
+    position: relative;
+  }
+
+  .selector-input {
+    width: 100%;
+    height: 3.5rem;
+    padding: 0 2.5rem 0 1rem;
+    background: var(--bg-page);
+    border: 2px solid var(--border-color);
+    border-radius: 0.875rem;
+    appearance: none;
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--text-main);
+    cursor: pointer;
+    transition: border-color 0.2s;
+    outline: none;
+  }
+
+  .selector-input:focus {
+    border-color: #6366f1;
+  }
+
+  .select-chevron {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--text-muted);
+    pointer-events: none;
+  }
+
+
+  .protocol-display {
+    padding: 1.5rem 2rem 2rem;
+    background: var(--bg-page);
+    animation: fade-in 0.4s ease;
+  }
+
+  :global(.protocol-display.hidden) {
+    display: none;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .protocol-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.25rem;
+    overflow: hidden;
+  }
+
+  .protocol-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.25rem 1.5rem;
+    background: var(--bg-page);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .protocol-icon-wrap {
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 0.75rem;
+    background: #6366f1;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  }
+
+  .protocol-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .protocol-meta {
+    font-size: 0.65rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--text-muted);
+    margin: 0 0 0.2rem;
+  }
+
+  .protocol-title {
+    font-size: 1.35rem;
+    font-weight: 900;
+    color: var(--text-main);
+    margin: 0;
+    letter-spacing: -0.02em;
+  }
+
+  .protocol-body {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .protocol-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    .protocol-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+
+  .info-card {
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.4rem;
+    transition: border-color 0.2s;
+  }
+
+  .info-card:hover {
+    border-color: rgba(99, 102, 241, 0.3);
+  }
+
+  .info-card-icon-wrap {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .agent-icon-wrap {
+    background: rgba(99, 102, 241, 0.08);
+    color: #6366f1;
+  }
+
+  .temp-icon-wrap {
+    background: rgba(249, 115, 22, 0.08);
+    color: #f97316;
+  }
+
+  .info-card-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .info-card-meta {
+    font-size: 0.6rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: var(--text-muted);
+  }
+
+  .info-card-value {
+    font-size: 1.15rem;
+    font-weight: 900;
+    color: var(--text-main);
+    margin: 0;
+  }
+
+  .info-card-desc {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin: 0;
+    max-width: 14rem;
+    line-height: 1.4;
+  }
+
+  .info-card-temp-value {
+    font-size: 2rem;
+    font-weight: 900;
+    color: var(--text-main);
+    margin: 0;
+    letter-spacing: -0.03em;
+  }
+
+  .info-card-temp-label {
+    font-size: 0.6rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--text-muted);
+  }
+
+
+  .method-card {
+    background: #6366f1;
+    border-radius: 1rem;
+    padding: 1.5rem;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2);
+  }
+
+  .method-card-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 1.5rem;
+    opacity: 0.08;
+    pointer-events: none;
+  }
+
+  .method-overlay-icon {
+    width: 5rem;
+    height: 5rem;
+    color: #fff;
+  }
+
+  .method-card-content {
+    position: relative;
+  }
+
+  .method-card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .method-icon-wrap {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+    background: rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+
+  .method-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .method-meta {
+    font-size: 0.6rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .method-text {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #fff;
+    line-height: 1.55;
+    letter-spacing: -0.01em;
+  }
+
+
+  .warning-card {
+    border-radius: 1rem;
+    background: rgba(239, 68, 68, 0.06);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    padding: 1.25rem;
+    animation: pulse-warning 4s ease infinite;
+  }
+
+  :global(.warning-card.hidden) {
+    display: none;
+  }
+
+  @keyframes pulse-warning {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+  }
+
+  .warning-card-inner {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+
+  .warning-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: #ef4444;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+  }
+
+  .warning-label {
+    font-size: 0.6rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: #ef4444;
+    margin: 0 0 0.25rem;
+  }
+
+  .warning-text {
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--text-main);
+    margin: 0;
+    line-height: 1.5;
+  }
+
+
+  .note-card {
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 1.25rem;
+  }
+
+  .note-card-inner {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+
+  .note-badge {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: var(--text-main);
+    color: var(--bg-page);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.65rem;
+    font-weight: 900;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+  }
+
+  .note-label {
+    font-size: 0.6rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--text-muted);
+    margin: 0 0 0.25rem;
+  }
+
+  .note-text {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin: 0;
+    line-height: 1.5;
+  }
+
+
+  .empty-state {
+    padding: 3rem 2rem;
+    text-align: center;
+    background: var(--bg-page);
+  }
+
+  :global(.empty-state.hidden) {
+    display: none;
+  }
+
+  .empty-icon-wrap {
+    width: 5rem;
+    height: 5rem;
+    background: var(--bg-surface);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    border: 1px solid var(--border-color);
+  }
+
+  .empty-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: var(--border-color);
+  }
+
+  .empty-title {
+    font-size: 1.1rem;
+    font-weight: 900;
+    color: var(--text-main);
+    margin: 0 0 0.5rem;
+    letter-spacing: -0.02em;
+  }
+
+  .empty-desc {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    margin: 0;
+    max-width: 18rem;
+    margin-inline: auto;
+    line-height: 1.5;
+  }
+</style>