@jjlmoya/utils-nature 1.20.0 → 1.22.0

package/src/tool/compostBinVolumeRatioCalculator/compost-bin-volume-ratio-calculator.css

@@ -0,0 +1,509 @@
+:root {
+  --n-paper: #f4efe4;
+  --n-paper-deep: #e8ddc9;
+  --n-ink: #2d2b25;
+  --n-muted: #716b5e;
+  --n-line: #cfc1a9;
+  --n-brown: #a96e45;
+  --n-brown-soft: #d9ae80;
+  --n-green: #708b58;
+  --n-green-soft: #b8c89c;
+  --n-water: #7a9e9e;
+  --n-red: #a95042;
+  --n-white: #fffdf7;
+}
+
+.theme-dark {
+  --n-paper: #211f1a;
+  --n-paper-deep: #2c2922;
+  --n-ink: #f4efe4;
+  --n-muted: #c2b9a9;
+  --n-line: #625947;
+  --n-brown: #d39764;
+  --n-brown-soft: #ad7952;
+  --n-green: #abc989;
+  --n-green-soft: #6e8c59;
+  --n-water: #a8d0cd;
+  --n-red: #df8d7d;
+  --n-white: #302c24;
+}
+
+.compost-tool {
+  --compost-bg: var(--n-paper);
+  --compost-card: var(--n-white);
+  --compost-ink: var(--n-ink);
+  --compost-muted: var(--n-muted);
+  --compost-line: var(--n-line);
+  --compost-brown: var(--n-brown);
+  --compost-green: var(--n-green);
+  --compost-water: var(--n-water);
+
+  background: var(--compost-bg);
+  border: 1px solid var(--compost-line);
+  border-radius: 28px;
+  color: var(--compost-ink);
+  overflow: hidden;
+  font:
+    400 1em ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace;
+}
+
+.compost-tool-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px 22px;
+  border-bottom: 1px solid var(--compost-line);
+}
+.compost-tool-units {
+  display: inline-flex;
+  border: 1px solid var(--compost-line);
+  border-radius: 99px;
+  padding: 3px;
+}
+.compost-tool button {
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  color: var(--compost-muted);
+  background: transparent;
+}
+.compost-tool-units button {
+  border-radius: 99px;
+  padding: 8px 12px;
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+}
+.compost-tool-units button[aria-pressed="true"] {
+  background: var(--compost-ink);
+  color: var(--compost-bg);
+}
+.compost-tool-reset {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  font-size: 0.7rem;
+}
+.compost-tool-body {
+  display: grid;
+  grid-template-columns: minmax(230px, 0.8fr) minmax(310px, 1.4fr) minmax(
+      220px,
+      0.8fr
+    );
+  min-height: 560px;
+}
+.compost-controls,
+.compost-scene,
+.compost-result {
+  padding: 26px;
+}
+.compost-controls {
+  border-right: 1px solid var(--compost-line);
+}
+.compost-scene {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--compost-card);
+}
+.compost-result {
+  border-left: 1px solid var(--compost-line);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.compost-section-heading {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  margin-bottom: 20px;
+}
+.compost-section-heading span {
+  color: var(--compost-brown);
+  font-size: 0.66rem;
+}
+.compost-section-heading h2 {
+  margin: 0;
+  font:
+    700 1rem/1.2 Georgia,
+    serif;
+}
+.compost-section-heading-materials {
+  margin-top: 34px;
+}
+.compost-section-heading-moisture {
+  margin-top: 34px;
+}
+.compost-choice-group-label {
+  display: block;
+  color: var(--compost-muted);
+  font-size: 0.7rem;
+  margin-bottom: 9px;
+}
+.compost-choice-group-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.compost-choice-group button {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  padding: 10px 6px;
+  border: 1px solid var(--compost-line);
+  border-radius: 12px;
+  font-size: 0.65rem;
+}
+.compost-choice-group button.is-active {
+  border-color: var(--compost-brown);
+  color: var(--compost-ink);
+  background: color-mix(in srgb, var(--compost-brown) 12%, transparent);
+}
+.compost-shape-icon {
+  width: 30px;
+  height: 25px;
+  display: block;
+  border: 2px solid currentcolor;
+  opacity: 0.7;
+}
+.compost-shape-icon-box {
+  border-radius: 3px;
+}
+.compost-shape-icon-cylinder {
+  border-radius: 50% / 18%;
+}
+.compost-dimensions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 18px;
+}
+.compost-dimensions[data-shape="cylindrical"] [data-rectangular-only] {
+  display: none;
+}
+.compost-dimensions[data-shape="rectangular"] [data-cylinder-only] {
+  display: none;
+}
+.compost-tool label {
+  color: var(--compost-muted);
+  font-size: 0.66rem;
+}
+.compost-tool label > span {
+  display: block;
+  margin-bottom: 6px;
+}
+.compost-tool label > div {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--compost-line);
+}
+.compost-tool input {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 0;
+  border: 0;
+  outline: 0;
+  color: var(--compost-ink);
+  background: transparent;
+  font:
+    700 1rem/1.2 ui-monospace,
+    monospace;
+}
+.compost-tool input:focus {
+  border-bottom: 2px solid var(--compost-brown);
+}
+.compost-tool em {
+  color: var(--compost-muted);
+  font-style: normal;
+  font-size: 0.64rem;
+  white-space: nowrap;
+}
+.compost-volume-inputs {
+  display: grid;
+  gap: 13px;
+}
+.compost-volume-inputs label {
+  display: grid;
+  grid-template-columns: 14px 1fr;
+  column-gap: 7px;
+  align-items: start;
+}
+.compost-volume-inputs label > div {
+  grid-column: 2;
+}
+.compost-label-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  margin-top: 3px;
+}
+.compost-label-dot-brown {
+  background: var(--compost-brown);
+}
+.compost-label-dot-green {
+  background: var(--compost-green);
+}
+.compost-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 19px;
+}
+.compost-presets button,
+.compost-moisture button {
+  padding: 7px 8px;
+  border: 1px solid var(--compost-line);
+  border-radius: 8px;
+  font-size: 0.6rem;
+}
+.compost-presets button:hover,
+.compost-moisture button:hover {
+  border-color: var(--compost-brown);
+  color: var(--compost-ink);
+}
+.compost-moisture {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.compost-moisture button[aria-pressed="true"] {
+  background: var(--compost-green);
+  border-color: var(--compost-green);
+  color: var(--n-white);
+}
+.compost-scene-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  border-bottom: 1px solid var(--compost-line);
+  padding-bottom: 12px;
+  color: var(--compost-muted);
+  font-size: 0.7rem;
+}
+.compost-scene-heading strong {
+  color: var(--compost-ink);
+  font:
+    700 0.95rem Georgia,
+    serif;
+}
+.compost-scene-svg {
+  width: 100%;
+  min-height: 350px;
+  overflow: visible;
+}
+.compost-scene-sun,
+.compost-scene-ground {
+  fill: none;
+  stroke: var(--compost-line);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+.compost-bin {
+  fill: var(--compost-bg);
+  stroke: var(--compost-ink);
+  stroke-width: 3;
+}
+.compost-fill {
+  fill: var(--compost-water);
+  opacity: 0.25;
+}
+.compost-layer-brown {
+  fill: var(--compost-brown);
+}
+.compost-layer-green {
+  fill: var(--compost-green);
+}
+.compost-scene-rim,
+.compost-scene-marker {
+  fill: none;
+  stroke: var(--compost-ink);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+.compost-scene-scale {
+  fill: var(--compost-muted);
+  font:
+    12px ui-monospace,
+    monospace;
+}
+.compost-scene-label {
+  font:
+    13px ui-monospace,
+    monospace;
+}
+.compost-scene-label-brown {
+  fill: var(--compost-brown);
+}
+.compost-scene-label-green {
+  fill: var(--compost-green);
+}
+.compost-scene-empty {
+  fill: var(--compost-muted);
+  font:
+    13px ui-monospace,
+    monospace;
+  text-anchor: middle;
+}
+.compost-result-eyebrow {
+  color: var(--compost-muted);
+  font-size: 0.7rem;
+}
+.compost-result-capacity {
+  margin: 8px 0 28px;
+  font:
+    700 clamp(2rem, 4vw, 3.25rem)/1 Georgia,
+    serif;
+  letter-spacing: -0.06em;
+}
+.compost-result-capacity span {
+  font:
+    700 0.85rem ui-monospace,
+    monospace;
+  letter-spacing: 0;
+  color: var(--compost-muted);
+}
+.compost-result-stats {
+  display: grid;
+  gap: 14px;
+  border-top: 1px solid var(--compost-line);
+  border-bottom: 1px solid var(--compost-line);
+  padding: 17px 0;
+}
+.compost-result-stats div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 0.66rem;
+}
+.compost-result-stats span {
+  color: var(--compost-muted);
+}
+.compost-result-stats strong {
+  text-align: right;
+}
+.compost-result-status {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-top: 22px;
+  padding: 11px 12px;
+  border-left: 4px solid var(--compost-brown);
+  background: color-mix(in srgb, var(--compost-brown) 10%, transparent);
+  font-size: 0.68rem;
+}
+.compost-result-status[data-tone="good"] {
+  border-color: var(--compost-green);
+  background: color-mix(in srgb, var(--compost-green) 12%, transparent);
+}
+.compost-result-status[data-tone="alert"] {
+  border-color: var(--n-red);
+  background: color-mix(in srgb, var(--n-red) 12%, transparent);
+}
+.compost-result-status strong {
+  font-size: 0.78rem;
+}
+.compost-result-advice {
+  margin-top: 16px;
+  color: var(--compost-muted);
+  font-size: 0.66rem;
+  line-height: 1.6;
+}
+.compost-result-advice p {
+  margin: 9px 0;
+}
+.compost-result-advice b {
+  color: var(--compost-ink);
+}
+.compost-result-diagnostics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 13px;
+}
+.compost-result-diagnostics span {
+  border: 1px solid var(--compost-line);
+  border-radius: 99px;
+  padding: 5px 7px;
+  font-size: 0.58rem;
+}
+.compost-result-diagnostics span[data-tone="good"] {
+  border-color: var(--compost-green);
+  color: var(--compost-green);
+}
+.compost-result-diagnostics span[data-tone="alert"] {
+  border-color: var(--n-red);
+  color: var(--n-red);
+}
+.compost-tool-note {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 15px 22px;
+  border-top: 1px solid var(--compost-line);
+  color: var(--compost-muted);
+  font-size: 0.62rem;
+}
+.compost-tool-note span {
+  color: var(--compost-brown);
+  font-size: 1.1rem;
+}
+.compost-seo,
+.compost-references {
+  color: var(--n-ink);
+}
+.compost-seo h2,
+.compost-references h2 {
+  font:
+    700 1em Georgia,
+    serif;
+}
+.compost-seo p,
+.compost-seo li,
+.compost-references li {
+  line-height: 1.7;
+}
+.compost-seo aside {
+  border-left: 3px solid var(--n-brown);
+  padding-left: 16px;
+}
+.compost-references a {
+  color: var(--n-brown);
+}
+
+@media (max-width: 900px) {
+  .compost-tool-body {
+    grid-template-columns: 1fr 1fr;
+  }
+  .compost-controls {
+    border-right: 1px solid var(--compost-line);
+  }
+  .compost-scene {
+    border-right: 0;
+  }
+  .compost-result {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--compost-line);
+    border-left: 0;
+  }
+}
+
+@media (max-width: 620px) {
+  .compost-tool-body {
+    display: block;
+  }
+  .compost-controls,
+  .compost-scene,
+  .compost-result {
+    border: 0;
+    border-bottom: 1px solid var(--compost-line);
+  }
+  .compost-scene-svg {
+    min-height: 300px;
+  }
+  .compost-result {
+    min-height: 360px;
+  }
+}

package/src/tool/compostBinVolumeRatioCalculator/controller.ts

@@ -0,0 +1,189 @@
+import {
+  applyPreset,
+  calculateCompost,
+  convertInputs,
+  type BinShape,
+  type CompostInputs,
+  type MoistureLevel,
+  type UnitSystem,
+} from "./logic";
+import { renderCompost, syncInputLabels } from "./dom-views";
+import { loadCompostState, saveCompostState } from "./storage";
+import type { CompostBinVolumeRatioCalculatorUI } from "./ui";
+
+const defaults: CompostInputs = {
+  unitSystem: "metric",
+  shape: "rectangular",
+  width: 80,
+  depth: 60,
+  diameter: 60,
+  height: 80,
+  browns: 36,
+  greens: 14,
+  moisture: "sponge",
+};
+
+function validNumber(value: string | undefined, fallback: number): number {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? Math.max(0, parsed) : fallback;
+}
+
+function readInputs(root: HTMLElement, previous: CompostInputs): CompostInputs {
+  const value = (name: string): string | undefined =>
+    root.querySelector<HTMLInputElement>(`[data-input="${name}"]`)?.value;
+  return {
+    ...previous,
+    width: validNumber(value("width"), previous.width),
+    depth: validNumber(value("depth"), previous.depth),
+    diameter: validNumber(value("diameter"), previous.diameter),
+    height: validNumber(value("height"), previous.height),
+    browns: validNumber(value("browns"), previous.browns),
+    greens: validNumber(value("greens"), previous.greens),
+  };
+}
+
+function writeInputs(root: HTMLElement, inputs: CompostInputs): void {
+  const values: Record<string, number> = {
+    width: inputs.width,
+    depth: inputs.depth,
+    diameter: inputs.diameter,
+    height: inputs.height,
+    browns: inputs.browns,
+    greens: inputs.greens,
+  };
+  Object.entries(values).forEach(([name, value]) => {
+    const input = root.querySelector<HTMLInputElement>(
+      `[data-input="${name}"]`,
+    );
+    if (input) input.value = String(Number(value.toFixed(2)));
+  });
+}
+
+function setShape(root: HTMLElement, shape: BinShape): void {
+  root
+    .querySelector<HTMLElement>("[data-dimensions]")
+    ?.setAttribute("data-shape", shape);
+  root
+    .querySelector<HTMLElement>("[data-shape-rectangular]")
+    ?.classList.toggle("is-active", shape === "rectangular");
+  root
+    .querySelector<HTMLElement>("[data-shape-cylindrical]")
+    ?.classList.toggle("is-active", shape === "cylindrical");
+}
+
+function renderState(
+  root: HTMLElement,
+  inputs: CompostInputs,
+  ui: CompostBinVolumeRatioCalculatorUI,
+): void {
+  const result = calculateCompost(inputs);
+  syncInputLabels(root, inputs, ui);
+  setShape(root, inputs.shape);
+  renderCompost(root, inputs, result, ui);
+  saveCompostState(inputs);
+}
+
+function bindNumberInputs(
+  root: HTMLElement,
+  getState: () => CompostInputs,
+  setState: (next: CompostInputs) => void,
+  ui: CompostBinVolumeRatioCalculatorUI,
+): void {
+  root.querySelectorAll<HTMLInputElement>("[data-input]").forEach((input) =>
+    input.addEventListener("input", () => {
+      const next = readInputs(root, getState());
+      setState(next);
+      renderState(root, next, ui);
+    }),
+  );
+}
+
+function bindPresets(
+  root: HTMLElement,
+  getState: () => CompostInputs,
+  setState: (next: CompostInputs) => void,
+  ui: CompostBinVolumeRatioCalculatorUI,
+): void {
+  root.querySelectorAll<HTMLButtonElement>("[data-preset]").forEach((button) =>
+    button.addEventListener("click", () => {
+      const next = applyPreset(
+        button.dataset.preset as "kitchen" | "garden" | "leafy",
+        getState().unitSystem,
+      );
+      setState(next);
+      writeInputs(root, next);
+      renderState(root, next, ui);
+    }),
+  );
+}
+
+function bindChoiceButtons(
+  root: HTMLElement,
+  getState: () => CompostInputs,
+  setState: (next: CompostInputs) => void,
+  ui: CompostBinVolumeRatioCalculatorUI,
+): void {
+  root.querySelectorAll<HTMLButtonElement>("[data-shape]").forEach((button) =>
+    button.addEventListener("click", () => {
+      const next = { ...getState(), shape: button.dataset.shape as BinShape };
+      setState(next);
+      renderState(root, next, ui);
+    }),
+  );
+  root
+    .querySelectorAll<HTMLButtonElement>("[data-moisture]")
+    .forEach((button) =>
+      button.addEventListener("click", () => {
+        const next = {
+          ...getState(),
+          moisture: button.dataset.moisture as MoistureLevel,
+        };
+        setState(next);
+        renderState(root, next, ui);
+      }),
+    );
+}
+
+function bindUnits(
+  root: HTMLElement,
+  getState: () => CompostInputs,
+  setState: (next: CompostInputs) => void,
+  ui: CompostBinVolumeRatioCalculatorUI,
+): void {
+  root.querySelectorAll<HTMLButtonElement>("[data-unit]").forEach((button) =>
+    button.addEventListener("click", () => {
+      const target = button.dataset.unit as UnitSystem;
+      const next = convertInputs(getState(), target);
+      setState(next);
+      writeInputs(root, next);
+      renderState(root, next, ui);
+    }),
+  );
+}
+
+export function mountCompostCalculator(
+  root: HTMLElement,
+  ui: CompostBinVolumeRatioCalculatorUI,
+): void {
+  let state: CompostInputs = {
+    ...defaults,
+    ...(loadCompostState() ?? {}),
+  } as CompostInputs;
+  const getState = (): CompostInputs => state;
+  const setState = (next: CompostInputs): void => {
+    state = next;
+  };
+  bindNumberInputs(root, getState, setState, ui);
+  bindPresets(root, getState, setState, ui);
+  bindChoiceButtons(root, getState, setState, ui);
+  bindUnits(root, getState, setState, ui);
+  root
+    .querySelector<HTMLButtonElement>("[data-reset]")
+    ?.addEventListener("click", () => {
+      state = { ...defaults };
+      writeInputs(root, state);
+      renderState(root, state, ui);
+    });
+  writeInputs(root, state);
+  renderState(root, state, ui);
+}