@jjlmoya/utils-alcohol 1.1.0

package/src/tool/alcoholClearance/component.astro

@@ -0,0 +1,219 @@
+---
+import { Icon } from "astro-icon/components";
+import type { AlcoholClearanceUI } from "./index";
+import './component.css';
+
+interface Props {
+  ui: AlcoholClearanceUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="alc-app" id="alcohol-app">
+    <div class="alc-card">
+        <div class="alc-grid">
+            <div class="alc-inputs-panel">
+                <div class="alc-sec">
+                    <div class="alc-sex-weight">
+                        <div class="alc-field">
+                            <label class="field-label">
+                                <Icon name="mdi:gender-male-female" class="field-label-icon" />
+                                {ui.biologicalSexLabel}
+                            </label>
+                            <div class="sex-toggle">
+                                <button class="sex-btn selected" data-r="0.68">
+                                    <Icon name="mdi:gender-male" class="sex-icon" />
+                                </button>
+                                <button class="sex-btn" data-r="0.55">
+                                    <Icon name="mdi:gender-female" class="sex-icon" />
+                                </button>
+                            </div>
+                        </div>
+                        <div class="alc-field">
+                            <label class="field-label">
+                                <Icon name="mdi:weight-kilogram" class="field-label-icon" />
+                                {ui.weightLabel}
+                            </label>
+                            <div class="weight-input-wrap">
+                                <input type="number" id="weight" value="75" class="weight-input" />
+                                <span class="weight-unit">{ui.kgUnit}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="alc-sec">
+                    <label class="field-label">{ui.addDrinkLabel}</label>
+                    <div class="drink-btns">
+                        {[
+                            { type: 'beer', icon: 'mdi:beer' },
+                            { type: 'wine', icon: 'mdi:glass-wine' },
+                            { type: 'spirit', icon: 'mdi:glass-cocktail' },
+                            { type: 'shot', icon: 'mdi:glass-mug-variant' }
+                        ].map(d => (
+                            <button class="drink-add-btn" data-type={d.type}>
+                                <Icon name={d.icon} class="drink-icon" />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                <div class="alc-sec">
+                    <div class="list-header">
+                        <label class="field-label">{ui.accumulatedLabel}</label>
+                        <span id="items-count" class="items-count">0 {ui.drinksUnit}</span>
+                    </div>
+                    <div id="drinks-list" class="drinks-list custom-scroll">
+                        <div class="list-empty">
+                            <Icon name="mdi:glass-cocktail-off" class="list-empty-icon" />
+                            <p class="list-empty-text">{ui.emptyListLabel}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="alc-results-panel">
+                <div class="bac-section">
+                    <div class="bac-bg-icon">
+                        <Icon name="mdi:account-alert" class="bac-bg-icon-svg" />
+                    </div>
+                    <div class="bac-content">
+                        <div class="bac-label">{ui.estimatedBacLabel}</div>
+                        <div class="bac-value-row">
+                            <span class="bac-number" id="res-bac">0.00</span>
+                            <span class="bac-unit">% {ui.bacUnit}</span>
+                        </div>
+                        <div id="time-box" class="time-box">
+                            <Icon name="mdi:clock-outline" class="time-icon" />
+                            <span id="res-time" class="time-text">--</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="alc-sec alc-advice-sec">
+                    <div class="advice-row">
+                        <div class="advice-icon advice-icon-blue">
+                            <Icon name="mdi:water" class="advice-icon-svg" />
+                        </div>
+                        <div>
+                            <p class="advice-label">{ui.waterAdviceLabel}</p>
+                            <p class="advice-value" id="res-water">0 ml</p>
+                        </div>
+                    </div>
+                    <div class="advice-row">
+                        <div class="advice-icon advice-icon-amber">
+                            <Icon name="mdi:pill" class="advice-icon-svg" />
+                        </div>
+                        <div>
+                            <p class="advice-label">{ui.pillAdviceLabel}</p>
+                            <p class="advice-value advice-value-sm" id="res-pill">--</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="alc-sec alc-disclaimer-sec">
+                    <div class="disclaimer">
+                        <Icon name="mdi:alert-circle" class="disclaimer-icon" />
+                        <p class="disclaimer-text">{ui.disclaimerText}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div style="display:none" id="ui-labels" data-ui={JSON.stringify(ui)}></div>
+</div>
+
+
+<script>
+    import { calculateAlcoholClearance, getAlcoholGrams, DRINK_TEMPLATES } from "./logic";
+    import type { AlcoholClearanceUI } from "./index";
+
+    interface DrinkEntry { id: string; name: string; size: number; abv: number; }
+
+    class AlcoholClearanceApp {
+        state = { weight: 75, r: 0.68, drinks: [] as DrinkEntry[] };
+        ui = {} as AlcoholClearanceUI;
+
+        constructor() {
+            const uiEl = document.getElementById("ui-labels");
+            if (uiEl) this.ui = JSON.parse(uiEl.dataset.ui || "{}") as AlcoholClearanceUI;
+            this.init();
+        }
+
+        init() {
+            document.querySelectorAll<HTMLButtonElement>(".sex-btn").forEach(btn => {
+                btn.onclick = () => this.onSexSelect(btn);
+            });
+            const weightEl = document.getElementById("weight") as HTMLInputElement | null;
+            if (weightEl) weightEl.oninput = () => { this.state.weight = parseFloat(weightEl.value) || 75; this.update(); };
+            document.querySelectorAll<HTMLButtonElement>(".drink-add-btn").forEach(btn => {
+                btn.onclick = () => this.addDrink(btn.dataset.type ?? '');
+            });
+            this.update();
+        }
+
+        onSexSelect(btn: HTMLButtonElement) {
+            document.querySelectorAll(".sex-btn").forEach(b => b.classList.remove("selected"));
+            btn.classList.add("selected");
+            this.state.r = parseFloat(btn.dataset.r ?? '0.68');
+            this.update();
+        }
+
+        addDrink(type: string) {
+            const tpl = DRINK_TEMPLATES[type as keyof typeof DRINK_TEMPLATES];
+            if (!tpl) return;
+            this.state.drinks.push({ id: Math.random().toString(36).substr(2, 9), ...tpl });
+            this.renderList();
+        }
+
+        buildDrinkRow(name: string, qty: number): HTMLElement {
+            const row = document.createElement("div");
+            row.className = "drink-list-row";
+            row.innerHTML = `<div class="drink-row-info"><span class="drink-row-name">${this.ui[name + 'Label']}</span><span class="drink-row-qty">x${qty}</span></div>`;
+            const del = document.createElement("button");
+            del.className = "drink-row-del";
+            del.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19V4M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/></svg>';
+            del.onclick = () => {
+                const idx = this.state.drinks.findIndex(d => d.name === name);
+                this.state.drinks.splice(idx, 1);
+                this.renderList();
+            };
+            row.appendChild(del);
+            return row;
+        }
+
+        renderList() {
+            const container = document.getElementById("drinks-list");
+            const count = document.getElementById("items-count");
+            if (!container || !count) return;
+            if (this.state.drinks.length === 0) {
+                container.innerHTML = `<div class="list-empty"><p class="list-empty-text">${this.ui.emptyListLabel}</p></div>`;
+                count.innerText = `0 ${this.ui.drinksUnit}`;
+                this.update();
+                return;
+            }
+            container.innerHTML = "";
+            const grouped = this.state.drinks.reduce((acc: Record<string, number>, d) => { acc[d.name] = (acc[d.name] || 0) + 1; return acc; }, {});
+            Object.entries(grouped).forEach(([name, qty]) => container.appendChild(this.buildDrinkRow(name, qty)));
+            const len = this.state.drinks.length;
+            count.innerText = `${len} ${len > 1 ? this.ui.drinksUnit : this.ui.drinkUnit}`;
+            this.update();
+        }
+
+        update() {
+            const totalGrams = this.state.drinks.reduce((sum, d) => sum + getAlcoholGrams(d.size, d.abv), 0);
+            const res = calculateAlcoholClearance(totalGrams, this.state.weight, this.state.r, this.state.drinks.length);
+            const bacEl = document.getElementById("res-bac");
+            const timeEl = document.getElementById("res-time");
+            const waterEl = document.getElementById("res-water");
+            const pillEl = document.getElementById("res-pill");
+            if (bacEl) bacEl.innerText = res.bacPercent.toFixed(3);
+            if (timeEl) timeEl.innerText = res.bacPercent > 0 ? `${res.hoursToZero}h ${res.minutesToZero}m ${this.ui.timeToZeroLabel}` : "--";
+            if (waterEl) waterEl.innerText = res.waterMl + " ml";
+            if (pillEl) pillEl.innerText = this.ui[res.advice + 'Advice'] || "--";
+        }
+    }
+    new AlcoholClearanceApp();
+</script>

package/src/tool/alcoholClearance/component.css

@@ -0,0 +1,369 @@
+    .alc-app {
+        width: 100%;
+        max-width: 56rem;
+        margin: 0 auto;
+        padding: 0.5rem;
+    }
+
+    .alc-card {
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-radius: 1.25rem;
+        overflow: clip;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+        color: #1e293b;
+    }
+    .theme-dark .alc-card {
+        background: #0f172a;
+        border-color: #1e293b;
+        color: #f1f5f9;
+    }
+
+    .alc-grid { display: grid; }
+
+    @media (min-width: 768px) {
+        .alc-grid {
+            grid-template-columns: 1fr 1fr;
+            align-items: stretch;
+        }
+    }
+
+    .alc-inputs-panel {
+        display: flex;
+        flex-direction: column;
+    }
+
+    @media (min-width: 768px) { .alc-inputs-panel { border-right: 1px solid #e2e8f0; } }
+    .theme-dark .alc-inputs-panel { border-color: #1e293b; }
+
+    .alc-sec {
+        padding: 1.25rem 1.5rem;
+        border-bottom: 1px solid #e2e8f0;
+    }
+    .theme-dark .alc-sec { border-color: #1e293b; }
+    .alc-sec:last-child { border-bottom: none; }
+
+    .alc-sex-weight {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1.25rem;
+    }
+    .alc-field {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .field-label {
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        color: #94a3b8;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .field-label-icon {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .sex-toggle {
+        display: flex;
+        gap: 0.5rem;
+        padding: 0.25rem;
+        background: #f1f5f9;
+        border-radius: 0.75rem;
+    }
+    .theme-dark .sex-toggle { background: #1e293b; }
+
+    .sex-btn {
+        flex: 1;
+        padding: 0.75rem;
+        border-radius: 0.5rem;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #94a3b8;
+        background: transparent;
+        transition: all 0.2s;
+    }
+    .sex-btn:hover { color: #64748b; }
+    .sex-btn.selected {
+        background: #fff;
+        color: #4f46e5;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .theme-dark .sex-btn.selected {
+        background: #334155;
+        color: #818cf8;
+    }
+    .sex-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    .weight-input-wrap { position: relative; }
+    .weight-input {
+        width: 100%;
+        background: #f8fafc;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.75rem;
+        padding: 0.75rem 3rem 0.75rem 1rem;
+        font-weight: 700;
+        font-size: 1.125rem;
+        outline: none;
+        transition: border-color 0.2s;
+        box-sizing: border-box;
+    }
+    .theme-dark .weight-input {
+        background: rgba(0,0,0,0.2);
+        border-color: #334155;
+        color: #f1f5f9;
+    }
+    .weight-input:focus { border-color: #6366f1; }
+    .weight-unit {
+        position: absolute;
+        right: 1rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #94a3b8;
+        font-weight: 700;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+    }
+
+    .drink-btns {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.75rem;
+        margin-top: 0.75rem;
+    }
+    .drink-add-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 1rem;
+        border-radius: 0.75rem;
+        border: none;
+        cursor: pointer;
+        background: #f1f5f9;
+        color: #475569;
+        transition: all 0.15s;
+    }
+    .theme-dark .drink-add-btn {
+        background: #1e293b;
+        color: #94a3b8;
+    }
+    .drink-add-btn:hover {
+        background: #e0e7ff;
+        color: #6366f1;
+        transform: scale(1.05);
+    }
+    .drink-add-btn:active { transform: scale(0.95); }
+    .drink-icon {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    .list-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+    }
+    .items-count {
+        font-size: 0.75rem;
+        font-weight: 900;
+        color: #6366f1;
+        text-transform: uppercase;
+    }
+
+    .drinks-list {
+        max-height: 250px;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        padding-right: 0.5rem;
+    }
+    .list-empty {
+        text-align: center;
+        padding: 2rem 0;
+        color: #cbd5e1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem;
+    }
+    .theme-dark .list-empty { color: #334155; }
+    .list-empty-icon {
+        width: 2.5rem;
+        height: 2.5rem;
+        opacity: 0.2;
+    }
+    .list-empty-text {
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    .custom-scroll::-webkit-scrollbar { width: 4px; }
+    .custom-scroll::-webkit-scrollbar-track { background: transparent; }
+    .custom-scroll::-webkit-scrollbar-thumb {
+        background: #e2e8f0;
+        border-radius: 10px;
+    }
+
+    .alc-results-panel {
+        display: flex;
+        flex-direction: column;
+        background: #f8fafc;
+    }
+    .theme-dark .alc-results-panel { background: rgba(0,0,0,0.2); }
+
+    .bac-section {
+        background: #4f46e5;
+        color: #fff;
+        padding: 1.5rem;
+        position: relative;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+    .theme-dark .bac-section { background: #4338ca; }
+    .bac-bg-icon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 1.5rem;
+        opacity: 0.1;
+    }
+    .bac-bg-icon-svg {
+        width: 5rem;
+        height: 5rem;
+        transform: rotate(12deg);
+    }
+    .bac-content {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .bac-label {
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.2em;
+        opacity: 0.6;
+    }
+    .bac-value-row {
+        display: flex;
+        align-items: baseline;
+        gap: 0.5rem;
+    }
+    .bac-number {
+        font-size: 3.5rem;
+        font-weight: 900;
+        letter-spacing: -0.05em;
+        line-height: 1;
+        font-variant-numeric: tabular-nums;
+    }
+    .bac-unit {
+        font-size: 1rem;
+        font-weight: 700;
+        opacity: 0.6;
+    }
+
+    .time-box {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        background: rgba(255,255,255,0.1);
+        border-radius: 0.75rem;
+        padding: 0.75rem;
+        border: 1px solid rgba(255,255,255,0.1);
+    }
+    .time-icon {
+        width: 1.25rem;
+        height: 1.25rem;
+        flex-shrink: 0;
+    }
+    .time-text {
+        font-weight: 700;
+        font-size: 0.875rem;
+    }
+
+    .alc-advice-sec {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .advice-row {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+    .advice-icon {
+        width: 2.25rem;
+        height: 2.25rem;
+        border-radius: 0.6rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+    .advice-icon-blue {
+        background: #dbeafe;
+        color: #3b82f6;
+    }
+    .theme-dark .advice-icon-blue { background: rgba(59,130,246,0.2); }
+    .advice-icon-amber {
+        background: #fef3c7;
+        color: #f59e0b;
+    }
+    .theme-dark .advice-icon-amber { background: rgba(245,158,11,0.2); }
+    .advice-icon-svg {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+    .advice-label {
+        font-size: 0.75rem;
+        font-weight: 700;
+        color: #94a3b8;
+        text-transform: uppercase;
+        margin: 0 0 0.2rem;
+    }
+    .advice-value {
+        font-size: 1.125rem;
+        font-weight: 900;
+        margin: 0;
+    }
+    .advice-value-sm { font-size: 0.875rem; }
+
+    .alc-disclaimer-sec { margin-top: auto; }
+    .disclaimer {
+        background: #fffbeb;
+        border-radius: 0.75rem;
+        padding: 0.875rem;
+        display: flex;
+        gap: 0.75rem;
+        color: #92400e;
+        font-size: 0.75rem;
+        line-height: 1.6;
+        border: 1px solid #fde68a;
+    }
+    .theme-dark .disclaimer {
+        background: rgba(120,53,15,0.2);
+        border-color: rgba(120,53,15,0.5);
+        color: #f59e0b;
+    }
+    .disclaimer-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+        flex-shrink: 0;
+    }
+    .disclaimer-text { margin: 0; }