@jjlmoya/utils-alcohol 1.1.0

package/src/tool/carbonationCalculator/component.astro

@@ -0,0 +1,225 @@
+---
+import { Icon } from "astro-icon/components";
+import type { CarbonationUI } from "./index";
+import './component.css';
+
+interface Props {
+  ui: CarbonationUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<carbonation-calculator class="carb-app" data-ui={JSON.stringify(ui)}>
+    <div class="carb-card">
+        <div class="carb-layout">
+            <div class="carb-left">
+                <div class="carb-sec">
+                    <div class="carb-params-deco">
+                        <Icon name="mdi:beer" class="carb-deco-icon" />
+                    </div>
+
+                    <h2 class="carb-params-title">
+                        <span class="carb-params-title-icon">
+                            <Icon name="mdi:calculator" class="carb-title-svg" />
+                        </span>
+                        {ui.parametersTitle}
+                    </h2>
+
+                    <div class="units-toggle">
+                        <button id="btnMetric" class="unit-btn unit-btn-active">{ui.metricBtn}</button>
+                        <button id="btnImperial" class="unit-btn">{ui.imperialBtn}</button>
+                    </div>
+
+                    <div class="carb-inputs">
+                        <div class="input-group">
+                            <label class="input-label">
+                                {ui.volumeLabel}
+                                <span id="volUnit" class="input-badge input-badge-amber">{ui.litersUnit}</span>
+                            </label>
+                            <input type="number" id="beerVolume" value="20" step="0.5" min="0" class="carb-input" />
+                        </div>
+
+                        <div class="input-group">
+                            <label class="input-label">
+                                {ui.maxTempLabel}
+                                <span id="tempUnit" class="input-badge input-badge-blue">{ui.celsiusUnit}</span>
+                            </label>
+                            <input type="number" id="beerTemp" value="20" step="1" class="carb-input" />
+                        </div>
+
+                        <div class="co2-section">
+                            <div class="co2-header">
+                                <label class="co2-label">{ui.desiredCo2Label}</label>
+                                <div class="co2-value-wrap">
+                                    <span id="co2ValDisplay" class="co2-value">2.4</span>
+                                    <span class="co2-unit">{ui.volUnit}</span>
+                                </div>
+                            </div>
+                            <input type="range" id="co2Slider" min="1.0" max="4.5" step="0.1" value="2.4" class="co2-slider" />
+                            <div class="preset-row">
+                                {['Stout', 'Ale', 'Lager', 'Wheat'].map((s, idx) => (
+                                    <button class="preset-btn" data-val={[1.8, 2.4, 2.6, 3.5][idx]}>
+                                        <div class="preset-tick"></div>
+                                        <span class="preset-label">{s}</span>
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="carb-sec">
+                    <h3 class="results-title">
+                        <Icon name="mdi:sack" class="results-title-icon" />
+                        {ui.resultsTitle}
+                    </h3>
+                    <div class="results-list">
+                        <div class="result-row result-row-primary">
+                            <span class="result-name">{ui.tableSugarLabel}</span>
+                            <span id="resTable" class="result-value result-value-primary">0 g</span>
+                        </div>
+                        <div class="result-row">
+                            <span class="result-name result-name-muted">{ui.cornSugarLabel}</span>
+                            <span id="resCorn" class="result-value">0 g</span>
+                        </div>
+                        <div class="result-row">
+                            <span class="result-name result-name-muted">{ui.dmeLabel}</span>
+                            <span id="resDME" class="result-value">0 g</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="carb-right">
+                <div id="safetyBox" class="safety-box" style="display:none">
+                    <Icon name="mdi:alert-decagram" class="safety-icon" /> {ui.safetyTitle}
+                </div>
+
+                <div class="beer-visual-wrap">
+                    <div class="beer-glass">
+                        <div id="bubbles" class="glass-bubbles"></div>
+                        <div id="foam" class="glass-foam"></div>
+                    </div>
+                    <div class="glass-shine"></div>
+                </div>
+
+                <div class="foam-info">
+                    <p id="foamText" class="foam-text"></p>
+                    <p class="foam-hint">{ui.bubblingVisualizationLabel}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</carbonation-calculator>
+
+<script>
+    import { calculatePrimingSugar } from "./logic";
+    import type { CarbonationUI } from "./index";
+
+    class CarbonationCalculator extends HTMLElement {
+        state = { units: 'metric', co2: 2.4, vol: 20, temp: 20 };
+        ui = {} as CarbonationUI;
+
+        constructor() {
+            super();
+            this.ui = JSON.parse(this.dataset.ui || "{}") as CarbonationUI;
+        }
+
+        connectedCallback() { this.init(); }
+
+        getEls() {
+            const q = <T extends Element>(s: string) => this.querySelector<T>(s);
+            return {
+                vol: q<HTMLInputElement>("#beerVolume"), temp: q<HTMLInputElement>("#beerTemp"),
+                co2: q<HTMLInputElement>("#co2Slider"), mBtn: q<HTMLButtonElement>("#btnMetric"),
+                iBtn: q<HTMLButtonElement>("#btnImperial"), vUnit: q<HTMLElement>("#volUnit"),
+                tUnit: q<HTMLElement>("#tempUnit"), cDisp: q<HTMLElement>("#co2ValDisplay"),
+                rT: q<HTMLElement>("#resTable"), rC: q<HTMLElement>("#resCorn"),
+                rD: q<HTMLElement>("#resDME"), safe: q<HTMLElement>("#safetyBox"),
+                foam: q<HTMLElement>("#foam"), fText: q<HTMLElement>("#foamText"),
+                bubs: q<HTMLElement>("#bubbles"),
+            };
+        }
+
+        convertVolTemp(v: number, t: number): { v: number; t: number } {
+            if (this.state.units !== 'imperial') return { v, t };
+            return { v: v / 0.264172, t: (t - 32) * 5 / 9 };
+        }
+
+        applyResults(els: ReturnType<typeof this.getEls>) {
+            if (!els.vol || !els.temp || !els.co2) return;
+            const conv = this.convertVolTemp(parseFloat(els.vol.value), parseFloat(els.temp.value));
+            const res = calculatePrimingSugar(conv.v, parseFloat(els.co2.value), conv.t);
+            if (els.cDisp) els.cDisp.innerText = els.co2.value;
+            if (els.rT) els.rT.innerText = res.tableSugar + " g";
+            if (els.rC) els.rC.innerText = res.cornSugar + " g";
+            if (els.rD) els.rD.innerText = res.dme + " g";
+        }
+
+        getFoamState(co2: number): { text: string; cls: string } {
+            if (co2 > 3.5) return { text: this.ui.safetyTitle, cls: "foam-text foam-text-red" };
+            if (co2 < 1.8) return { text: this.ui.lowCarbonation, cls: "foam-text foam-text-muted" };
+            if (co2 < 2.8) return { text: this.ui.optimalCarbonation, cls: "foam-text foam-text-amber" };
+            return { text: this.ui.highEffervescence, cls: "foam-text foam-text-orange" };
+        }
+
+        applyFoam(els: ReturnType<typeof this.getEls>) {
+            if (!els.co2 || !els.foam || !els.fText || !els.safe) return;
+            const co2 = parseFloat(els.co2.value);
+            els.foam.style.height = (20 + (co2 - 1) / 3.5 * 100) + "px";
+            els.safe.style.display = co2 > 3.5 ? "flex" : "none";
+            const foam = this.getFoamState(co2);
+            els.fText.innerText = foam.text; els.fText.className = foam.cls;
+            if (els.bubs) this.setBubs(co2, els.bubs);
+        }
+
+        init() {
+            const els = this.getEls();
+            const update = () => { this.applyResults(els); this.applyFoam(els); };
+            if (els.vol) els.vol.oninput = update;
+            if (els.temp) els.temp.oninput = update;
+            if (els.co2) els.co2.oninput = update;
+            if (els.mBtn) els.mBtn.onclick = () => this.switchMetric(els);
+            if (els.iBtn) els.iBtn.onclick = () => this.switchImperial(els);
+            this.querySelectorAll<HTMLButtonElement>(".preset-btn").forEach(b => {
+                b.onclick = () => { if (els.co2) { els.co2.value = b.dataset.val ?? '2.4'; update(); } };
+            });
+            update();
+        }
+
+        switchMetric(els: ReturnType<typeof this.getEls>) {
+            if (this.state.units !== 'imperial' || !els.vol || !els.temp || !els.mBtn || !els.iBtn || !els.vUnit || !els.tUnit) return;
+            els.vol.value = (parseFloat(els.vol.value) / 0.264172).toFixed(1);
+            els.temp.value = String(Math.round((parseFloat(els.temp.value) - 32) * 5 / 9));
+            this.state.units = 'metric';
+            els.vUnit.innerText = this.ui.litersUnit; els.tUnit.innerText = this.ui.celsiusUnit;
+            els.mBtn.className = "unit-btn unit-btn-active"; els.iBtn.className = "unit-btn";
+            this.applyResults(els); this.applyFoam(els);
+        }
+
+        switchImperial(els: ReturnType<typeof this.getEls>) {
+            if (this.state.units !== 'metric' || !els.vol || !els.temp || !els.mBtn || !els.iBtn || !els.vUnit || !els.tUnit) return;
+            els.vol.value = (parseFloat(els.vol.value) * 0.264172).toFixed(1);
+            els.temp.value = String(Math.round(parseFloat(els.temp.value) * 9 / 5 + 32));
+            this.state.units = 'imperial';
+            els.vUnit.innerText = this.ui.gallonsUnit; els.tUnit.innerText = this.ui.fahrenheitUnit;
+            els.iBtn.className = "unit-btn unit-btn-active"; els.mBtn.className = "unit-btn";
+            this.applyResults(els); this.applyFoam(els);
+        }
+
+        setBubs(co2: number, container: HTMLElement) {
+            if (container.children.length === 0) {
+                for (let i = 0; i < 30; i++) {
+                    const b = document.createElement("div"); b.className = "calc-b";
+                    const s = 2 + Math.random() * 5; b.style.width = s + "px"; b.style.height = s + "px";
+                    b.style.left = Math.random() * 100 + "%"; b.style.animationDelay = Math.random() * 5 + "s";
+                    b.style.setProperty("--s", String(0.7 + Math.random())); container.appendChild(b);
+                }
+            }
+            const dur = 4 * (2 / Math.max(1, co2));
+            Array.from(container.children).forEach(b => (b as HTMLElement).style.animationDuration = (dur + Math.random()) + "s");
+        }
+    }
+    customElements.define("carbonation-calculator", CarbonationCalculator);
+</script>

package/src/tool/carbonationCalculator/component.css

@@ -0,0 +1,483 @@
+.carb-app {
+    display: block;
+    width: 100%;
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: 0.5rem;
+}
+
+.carb-card {
+    background: #fff;
+    border: 1px solid #e4e4e7;
+    border-radius: 1.25rem;
+    overflow: clip;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+    color: #18181b;
+}
+
+.theme-dark .carb-card {
+    background: #18181b;
+    border-color: #27272a;
+    color: #f4f4f5;
+}
+
+.carb-layout {
+    display: flex;
+    flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+    .carb-layout {
+        flex-direction: row;
+        align-items: stretch;
+    }
+}
+
+.carb-left {
+    display: flex;
+    flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+    .carb-left {
+        width: 50%;
+        border-right: 1px solid #e4e4e7;
+    }
+}
+
+.theme-dark .carb-left { border-color: #27272a; }
+
+.carb-sec {
+    padding: 1.5rem;
+    border-bottom: 1px solid #e4e4e7;
+    position: relative;
+    overflow: hidden;
+}
+
+.theme-dark .carb-sec { border-color: #27272a; }
+.carb-sec:last-child { border-bottom: none; }
+
+.carb-params-deco {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 1rem;
+    opacity: 0.07;
+    pointer-events: none;
+}
+
+.carb-deco-icon {
+    width: 5rem;
+    height: 5rem;
+    color: #f59e0b;
+    transform: rotate(12deg);
+}
+
+.carb-params-title {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0 0 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.carb-params-title-icon {
+    background: #f59e0b;
+    border-radius: 0.75rem;
+    padding: 0.5rem;
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(245,158,11,0.3);
+    display: flex;
+}
+
+.carb-title-svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.units-toggle {
+    display: flex;
+    background: #f4f4f5;
+    padding: 0.25rem;
+    border-radius: 0.75rem;
+    width: fit-content;
+    margin-bottom: 1.25rem;
+}
+
+.theme-dark .units-toggle { background: #27272a; }
+
+.unit-btn {
+    padding: 0.4rem 1.25rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: #71717a;
+    background: transparent;
+}
+
+.theme-dark .unit-btn { color: #a1a1aa; }
+.unit-btn:hover { color: #18181b; }
+.theme-dark .unit-btn:hover { color: #e4e4e7; }
+
+.unit-btn-active {
+    background: #fff;
+    color: #18181b;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.theme-dark .unit-btn-active {
+    background: #3f3f46;
+    color: #fff;
+}
+
+.carb-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    position: relative;
+    z-index: 1;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.input-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #71717a;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.theme-dark .input-label { color: #a1a1aa; }
+
+.input-badge {
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+}
+
+.input-badge-amber {
+    background: #fef3c7;
+    color: #b45309;
+}
+
+.theme-dark .input-badge-amber {
+    background: rgba(245,158,11,0.2);
+    color: #fbbf24;
+}
+
+.input-badge-blue {
+    background: #dbeafe;
+    color: #1d4ed8;
+}
+
+.theme-dark .input-badge-blue {
+    background: rgba(59,130,246,0.2);
+    color: #60a5fa;
+}
+
+.carb-input {
+    width: 100%;
+    background: #fafafa;
+    border: 2px solid #e4e4e7;
+    border-radius: 0.75rem;
+    padding: 0.875rem 1rem;
+    font-size: 1.125rem;
+    font-weight: 700;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+}
+
+.theme-dark .carb-input {
+    background: rgba(0,0,0,0.2);
+    border-color: #3f3f46;
+    color: #f4f4f5;
+}
+
+.carb-input:focus { border-color: #f59e0b; }
+
+.co2-section {
+    padding-top: 1.25rem;
+    border-top: 1px dashed #e4e4e7;
+}
+
+.theme-dark .co2-section { border-color: #3f3f46; }
+
+.co2-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 1rem;
+}
+
+.co2-label {
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: #71717a;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.theme-dark .co2-label { color: #a1a1aa; }
+.co2-value-wrap { text-align: right; }
+
+.co2-value {
+    font-size: 2rem;
+    font-weight: 900;
+    color: #f59e0b;
+    line-height: 1;
+}
+
+.co2-unit {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #a1a1aa;
+    text-transform: uppercase;
+    margin-left: 0.25rem;
+}
+
+.co2-slider {
+    width: 100%;
+    height: 1rem;
+    background: #e4e4e7;
+    border-radius: 9999px;
+    appearance: none;
+    cursor: pointer;
+    accent-color: #f59e0b;
+}
+
+.theme-dark .co2-slider { background: #3f3f46; }
+
+.preset-row {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.75rem;
+    padding: 0 0.25rem;
+}
+
+.preset-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+    padding: 0;
+}
+
+.preset-btn:hover { opacity: 1; }
+
+.preset-tick {
+    width: 4px;
+    height: 10px;
+    background: #d4d4d8;
+    margin-bottom: 0.25rem;
+}
+
+.preset-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #71717a;
+}
+
+.results-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin: 0 0 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.results-title-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: #a1a1aa;
+}
+
+.results-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.result-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.875rem;
+    border-radius: 0.75rem;
+    border: 1px solid #f4f4f5;
+}
+
+.theme-dark .result-row { border-color: #27272a; }
+
+.result-row-primary {
+    background: #fafafa;
+    border-color: #e4e4e7;
+}
+
+.theme-dark .result-row-primary {
+    background: rgba(0,0,0,0.2);
+    border-color: #3f3f46;
+}
+
+.result-name { font-weight: 700; }
+
+.result-name-muted {
+    font-weight: 500;
+    color: #71717a;
+}
+
+.theme-dark .result-name-muted { color: #a1a1aa; }
+.result-value {
+    font-size: 1.125rem;
+    font-weight: 700;
+}
+
+.result-value-primary {
+    font-size: 1.375rem;
+    font-weight: 900;
+    color: #4f46e5;
+}
+
+.theme-dark .result-value-primary { color: #818cf8; }
+
+.carb-right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    background: #fafafa;
+}
+
+@media (min-width: 1024px) {
+    .carb-right { width: 50%; }
+}
+
+.theme-dark .carb-right { background: rgba(0,0,0,0.15); }
+
+.safety-box {
+    width: 100%;
+    margin-bottom: 1.25rem;
+    background: #ef4444;
+    color: #fff;
+    padding: 0.75rem 1.25rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    animation: bounce 1s infinite;
+}
+
+.safety-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+@keyframes calc-rise {
+    0% {
+        transform: translateY(100%) scale(0.5);
+        opacity: 0;
+    }
+
+    20% { opacity: 0.8; }
+
+    100% {
+        transform: translateY(-120%) scale(var(--s, 1));
+        opacity: 0;
+    }
+}
+
+.calc-b {
+    position: absolute;
+    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.2));
+    border-radius: 50%;
+    animation: calc-rise linear infinite;
+    bottom: -20px;
+}
+
+.beer-visual-wrap {
+    position: relative;
+    width: 240px;
+    height: 400px;
+}
+
+.beer-glass {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, #fbbf24, #d97706, #78350f);
+    border-radius: 0 0 2rem 2rem;
+    z-index: 1;
+    clip-path: polygon(5% 0, 95% 0, 85% 100%, 15% 100%);
+}
+
+.glass-bubbles {
+    position: absolute;
+    inset: 0;
+    opacity: 0.5;
+    overflow: hidden;
+}
+
+.glass-foam {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background: #fcf5e5;
+    transition: height 0.5s;
+    height: 20px;
+}
+
+.glass-shine {
+    position: absolute;
+    inset: 0;
+    border: 4px solid rgba(255,255,255,0.2);
+    border-bottom-width: 4px;
+    border-radius: 0 0 2rem 2rem;
+    z-index: 2;
+    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
+}
+
+.foam-info {
+    margin-top: 1.5rem;
+    text-align: center;
+}
+
+.foam-text {
+    font-size: 1.25rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    opacity: 0.8;
+    margin: 0 0 0.5rem;
+}
+
+.foam-hint {
+    color: #a1a1aa;
+    font-size: 0.875rem;
+    margin: 0;
+}