@jjlmoya/utils-aquarium 1.0.0

package/src/tool/aquariumTankVolumeWaterChangeCalculator/aquarium-tank-volume-water-change-calculator.css

@@ -0,0 +1,391 @@
+:root {
+  --n-ink: #17313b;
+  --n-muted: #5d7379;
+  --n-paper: #f4f8f5;
+  --n-surface: #fff;
+  --n-line: #c9d9d4;
+  --n-water: #277b91;
+  --n-water-soft: #d8eef0;
+  --n-gravel: #c7a77d;
+  --n-accent: #d96f4f;
+  --n-accent-ink: #fff;
+  --n-error: #a33632;
+  --n-shadow: rgba(23, 49, 59, 0.12);
+}
+
+.theme-dark {
+  --n-ink: #edf7f4;
+  --n-muted: #b1c8c5;
+  --n-paper: #17282d;
+  --n-surface: #21383d;
+  --n-line: #49666a;
+  --n-water: #72c5d0;
+  --n-water-soft: #244c55;
+  --n-gravel: #d5b583;
+  --n-accent: #ef9474;
+  --n-accent-ink: #251512;
+  --n-error: #ff9b91;
+  --n-shadow: rgba(0, 0, 0, 0.28);
+}
+
+.atvwc-root {
+  --n-card: var(--n-surface);
+  --n-field: var(--n-paper);
+  --n-focus: var(--n-water);
+
+  color: var(--n-ink);
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 1.5rem;
+  box-shadow: 0 1rem 2.5rem var(--n-shadow);
+  padding: clamp(1rem, 3vw, 2rem);
+}
+
+.atvwc-heading,
+.atvwc-panel-topline,
+.atvwc-result-heading,
+.atvwc-footnotes {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.atvwc-eyebrow,
+.atvwc-subtitle,
+.atvwc-help,
+.atvwc-result-hint,
+.atvwc-empty,
+.atvwc-error,
+.atvwc-footnotes,
+.atvwc-control-label {
+  margin: 0;
+}
+
+.atvwc-eyebrow {
+  font-size: 1.15rem;
+  font-weight: 800;
+  letter-spacing: .02em;
+}
+
+.atvwc-subtitle,
+.atvwc-help,
+.atvwc-result-hint,
+.atvwc-empty,
+.atvwc-footnotes {
+  color: var(--n-muted);
+  font-size: .9rem;
+  line-height: 1.5;
+}
+
+.atvwc-unit-control,
+.atvwc-shapes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .4rem;
+}
+
+.atvwc-unit-control {
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.atvwc-unit-control button,
+.atvwc-shape,
+.atvwc-reset,
+.atvwc-calculate {
+  border: 1px solid var(--n-line);
+  border-radius: .7rem;
+  cursor: pointer;
+  font: inherit;
+  min-height: 2.6rem;
+  padding: .55rem .8rem;
+}
+
+.atvwc-unit-control button,
+.atvwc-shape,
+.atvwc-reset {
+  background: var(--n-card);
+  color: var(--n-ink);
+}
+
+.atvwc-unit-control button[aria-pressed="true"],
+.atvwc-shape.is-active {
+  background: var(--n-water-soft);
+  border-color: var(--n-water);
+  color: var(--n-ink);
+  font-weight: 700;
+}
+
+.atvwc-layout {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
+  margin-top: 1.5rem;
+}
+
+.atvwc-panel {
+  background: var(--n-card);
+  border: 1px solid var(--n-line);
+  border-radius: 1.1rem;
+  padding: clamp(1rem, 2vw, 1.5rem);
+}
+
+.atvwc-panel h2 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.atvwc-reset {
+  min-height: 2.25rem;
+  padding: .35rem .65rem;
+}
+
+.atvwc-fieldset {
+  border: 0;
+  margin: 1.25rem 0 0;
+  padding: 0;
+}
+
+.atvwc-fieldset legend {
+  font-weight: 700;
+  margin-bottom: .6rem;
+}
+
+.atvwc-input-grid {
+  display: grid;
+  gap: .8rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 1rem;
+}
+
+.atvwc-field {
+  display: grid;
+  gap: .35rem;
+  min-width: 0;
+}
+
+.atvwc-field > span {
+  font-size: .86rem;
+  font-weight: 700;
+}
+
+.atvwc-field input {
+  background: var(--n-field);
+  border: 1px solid var(--n-line);
+  border-radius: .65rem;
+  box-sizing: border-box;
+  color: var(--n-ink);
+  font: inherit;
+  min-height: 2.7rem;
+  min-width: 0;
+  padding: .55rem .65rem;
+  width: 100%;
+}
+
+.atvwc-field input:focus-visible,
+.atvwc-unit-control button:focus-visible,
+.atvwc-shape:focus-visible,
+.atvwc-reset:focus-visible,
+.atvwc-calculate:focus-visible {
+  outline: 3px solid var(--n-focus);
+  outline-offset: 2px;
+}
+
+.atvwc-calculate {
+  background: var(--n-accent);
+  border-color: var(--n-accent);
+  color: var(--n-accent-ink);
+  font-weight: 800;
+  margin-top: 1.25rem;
+  width: 100%;
+}
+
+.atvwc-bow-note {
+  display: none;
+}
+
+.atvwc-visual-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.atvwc-tank-stage {
+  align-items: center;
+  background: var(--n-water-soft);
+  border: 1px solid var(--n-line);
+  border-radius: .9rem;
+  display: flex;
+  height: 10rem;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.atvwc-tank {
+  background: var(--n-field);
+  border: .35rem solid var(--n-water);
+  border-radius: .8rem .8rem 1.2rem 1.2rem;
+  bottom: 1.2rem;
+  height: 6.4rem;
+  overflow: hidden;
+  position: absolute;
+  width: 10rem;
+}
+
+.atvwc-water,
+.atvwc-gravel {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.atvwc-water {
+  background: var(--n-water);
+  height: 70%;
+  opacity: .82;
+  transition: height .25s ease;
+}
+
+.atvwc-gravel {
+  background: var(--n-gravel);
+  height: 13%;
+  opacity: .9;
+}
+
+.atvwc-glass-line {
+  border: 2px solid var(--n-surface);
+  border-radius: .5rem;
+  height: 82%;
+  left: 8%;
+  opacity: .7;
+  position: absolute;
+  top: 8%;
+  width: 84%;
+}
+
+.atvwc-fish {
+  color: var(--n-accent);
+  font-size: 1.5rem;
+  position: absolute;
+}
+
+.atvwc-fish-one {
+  left: 20%;
+  top: 32%;
+}
+
+.atvwc-fish-two {
+  right: 19%;
+  top: 54%;
+  transform: scaleX(-1);
+}
+
+.atvwc-result-heading {
+  align-items: center;
+  margin-top: 1.25rem;
+}
+
+.atvwc-result-heading h2 {
+  font-size: clamp(1.8rem, 5vw, 2.7rem);
+  line-height: 1.05;
+  margin: .25rem 0 0;
+}
+
+.atvwc-scale {
+  background: var(--n-water-soft);
+  border-radius: 999px;
+  color: var(--n-ink);
+  font-size: .8rem;
+  font-weight: 800;
+  padding: .35rem .6rem;
+  text-align: center;
+}
+
+.atvwc-result-grid {
+  display: grid;
+  gap: .65rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 1rem;
+}
+
+.atvwc-result-card {
+  background: var(--n-field);
+  border: 1px solid var(--n-line);
+  border-radius: .75rem;
+  display: grid;
+  gap: .35rem;
+  min-height: 4.7rem;
+  padding: .75rem;
+}
+
+.atvwc-result-card span {
+  color: var(--n-muted);
+  font-size: .78rem;
+}
+
+.atvwc-result-card strong {
+  font-size: 1.15rem;
+}
+
+.atvwc-result-card-highlight {
+  border-color: var(--n-accent);
+}
+
+.atvwc-footnotes {
+  flex-wrap: wrap;
+  gap: .6rem 1rem;
+  margin-top: auto;
+  padding-top: 1rem;
+}
+
+.atvwc-error {
+  color: var(--n-error);
+  font-weight: 700;
+  margin-top: .75rem;
+}
+
+.atvwc-root[data-state="ready"] .atvwc-empty,
+.atvwc-root[data-state="error"] .atvwc-empty {
+  display: none;
+}
+
+.atvwc-root[data-state="error"] .atvwc-result-card strong,
+.atvwc-root[data-state="error"] .atvwc-footnotes strong {
+  color: var(--n-muted);
+}
+
+@media (max-width: 760px) {
+  .atvwc-heading,
+  .atvwc-layout {
+    display: block;
+  }
+
+  .atvwc-unit-control {
+    justify-content: flex-start;
+    margin-top: 1rem;
+  }
+
+  .atvwc-visual-panel {
+    margin-top: 1.25rem;
+  }
+
+  .atvwc-input-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 430px) {
+  .atvwc-input-grid,
+  .atvwc-result-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .atvwc-water {
+    transition: none;
+  }
+}

package/src/tool/aquariumTankVolumeWaterChangeCalculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<Bibliography links={bibliography} />

package/src/tool/aquariumTankVolumeWaterChangeCalculator/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliography = [
+  {
+    name: 'Centro Español de Metrología, Sistema Internacional de Unidades',
+    url: 'https://www.cem.es/sites/default/files/2021-01/SistemaInternacionalUnidades.pdf',
+  },
+  {
+    name: 'U.S. Geological Survey, Water Density',
+    url: 'https://www.usgs.gov/water-science-school/science/water-density',
+  },
+  {
+    name: 'OpenStax, Measuring Volume',
+    url: 'https://openstax.org/books/contemporary-mathematics/pages/9-3-measuring-volume',
+  },
+];

package/src/tool/aquariumTankVolumeWaterChangeCalculator/component.astro

@@ -0,0 +1,93 @@
+---
+import type { AquariumTankVolumeWaterChangeCalculatorUI } from './ui';
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as AquariumTankVolumeWaterChangeCalculatorUI;
+---
+
+<div id="aquarium-tank-volume-water-change-calculator" class="atvwc-root" data-ui={JSON.stringify(t)}>
+  <div class="atvwc-heading">
+    <div>
+      <p class="atvwc-eyebrow">{t.toolTitle}</p>
+      <p class="atvwc-subtitle">{t.toolSubtitle}</p>
+    </div>
+    <div class="atvwc-unit-control" role="group" aria-label={t.unitLabel}>
+      <span class="atvwc-control-label">{t.unitLabel}</span>
+      <button type="button" data-unit-choice="metric" aria-pressed="true">{t.metricLabel}</button>
+      <button type="button" data-unit-choice="imperial" aria-pressed="false">{t.imperialLabel}</button>
+    </div>
+  </div>
+
+  <div class="atvwc-layout">
+    <section class="atvwc-panel atvwc-form-panel" aria-labelledby="atvwc-dimensions-title">
+      <div class="atvwc-panel-topline">
+        <h2 id="atvwc-dimensions-title">{t.dimensionsTitle}</h2>
+        <button type="button" class="atvwc-reset" data-action="reset">{t.resetLabel}</button>
+      </div>
+
+      <fieldset class="atvwc-fieldset">
+        <legend>{t.shapeLabel}</legend>
+        <div class="atvwc-shapes">
+          <button type="button" class="atvwc-shape is-active" data-shape="rectangular" aria-pressed="true">{t.rectangularShape}</button>
+          <button type="button" class="atvwc-shape" data-shape="cylindrical" aria-pressed="false">{t.cylindricalShape}</button>
+          <button type="button" class="atvwc-shape" data-shape="bow" aria-pressed="false">{t.bowShape}</button>
+        </div>
+        <p class="atvwc-help">{t.shapeHint}</p>
+      </fieldset>
+
+      <div class="atvwc-input-grid" data-shape-fields="rectangular">
+        <label class="atvwc-field"><span>{t.lengthLabel} <span data-length-unit></span></span><input data-input="lengthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field"><span>{t.widthLabel} <span data-length-unit></span></span><input data-input="widthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field"><span>{t.heightLabel} <span data-length-unit></span></span><input data-input="heightCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+      </div>
+
+      <div class="atvwc-input-grid" data-shape-fields="cylindrical" hidden>
+        <label class="atvwc-field"><span>{t.diameterLabel} <span data-length-unit></span></span><input data-input="diameterCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field"><span>{t.heightLabel} <span data-length-unit></span></span><input data-input="heightCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+      </div>
+
+      <div class="atvwc-input-grid" data-shape-fields="bow" hidden>
+        <label class="atvwc-field"><span>{t.lengthLabel} <span data-length-unit></span></span><input data-input="lengthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field"><span>{t.widthLabel} <span data-length-unit></span></span><input data-input="widthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field"><span>{t.heightLabel} <span data-length-unit></span></span><input data-input="heightCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field"><span>{t.bowDepthLabel} <span data-length-unit></span></span><input data-input="bowDepthCm" type="number" min="0" max="500" step="0.1" inputmode="decimal" /></label>
+      </div>
+
+      <div class="atvwc-input-grid">
+        <label class="atvwc-field"><span>{t.substrateLabel} <span data-length-unit></span></span><input data-input="substrateDepthCm" type="number" min="0" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field"><span>{t.changeLabel} %</span><input data-input="changePercent" type="number" min="0" max="100" step="1" inputmode="decimal" /></label>
+      </div>
+
+      <p class="atvwc-help">{t.substrateHint}</p>
+      <p class="atvwc-help atvwc-bow-note">{t.bowHint}</p>
+      <button type="button" class="atvwc-calculate" data-action="calculate">{t.calculateLabel}</button>
+    </section>
+
+    <section class="atvwc-panel atvwc-visual-panel" aria-labelledby="atvwc-results-title">
+      <div class="atvwc-tank-stage" aria-hidden="true">
+        <div class="atvwc-tank"><div class="atvwc-water" data-water></div><div class="atvwc-gravel"></div><div class="atvwc-glass-line"></div></div>
+        <div class="atvwc-fish atvwc-fish-one">◈</div>
+        <div class="atvwc-fish atvwc-fish-two">◈</div>
+      </div>
+      <div class="atvwc-result-heading">
+        <div><p class="atvwc-eyebrow">{t.netVolumeLabel}</p><h2 id="atvwc-results-title" data-result="net">{t.emptyState}</h2></div>
+        <span class="atvwc-scale" data-result="scale"></span>
+      </div>
+      <p class="atvwc-result-hint">{t.resultHint}</p>
+      <p class="atvwc-error" data-error role="alert"></p>
+      <p class="atvwc-empty" data-empty>{t.emptyState}</p>
+      <div class="atvwc-result-grid">
+        <div class="atvwc-result-card"><span>{t.grossVolumeLabel}</span><strong data-result="gross">-</strong></div>
+        <div class="atvwc-result-card"><span>{t.substrateVolumeLabel}</span><strong data-result="substrate">-</strong></div>
+        <div class="atvwc-result-card atvwc-result-card-highlight"><span>{t.changeVolumeLabel}</span><strong data-result="change">-</strong></div>
+        <div class="atvwc-result-card"><span>{t.waterWeightLabel}</span><strong data-result="mass">-</strong></div>
+      </div>
+      <div class="atvwc-footnotes"><span>{t.footprintLabel}: <strong data-result="footprint">-</strong></span><span>{t.approximationLabel}: <strong data-result="share">-</strong></span></div>
+    </section>
+  </div>
+</div>
+
+<script>
+  import { initAquariumTankVolumeWaterChangeCalculator } from './controller';
+  initAquariumTankVolumeWaterChangeCalculator();
+</script>

package/src/tool/aquariumTankVolumeWaterChangeCalculator/controller.ts

@@ -0,0 +1,147 @@
+import {
+  calculateTankVolume,
+  centimetresToInches,
+  inchesToCentimetres,
+  type TankInput,
+  type UnitSystem,
+} from './logic';
+import { defaultAquariumState, loadAquariumState, saveAquariumState, type SavedAquariumState } from './storage';
+import { renderEmpty, renderError, renderResults } from './dom-views';
+import type { AquariumTankVolumeWaterChangeCalculatorUI } from './ui';
+
+interface ControllerContext {
+  root: HTMLElement;
+  ui: AquariumTankVolumeWaterChangeCalculatorUI;
+  state: SavedAquariumState;
+  locale: string;
+}
+
+const DIMENSION_FIELDS = ['lengthCm', 'widthCm', 'heightCm', 'diameterCm', 'bowDepthCm', 'substrateDepthCm'] as const;
+
+function getInput(root: HTMLElement, field: string): HTMLInputElement | null {
+  const selector = '[data-input="' + field + '"]';
+  const inputs = Array.from(root.querySelectorAll<HTMLInputElement>(selector));
+  return inputs.find((input) => input.closest('[hidden]') === null) ?? inputs[0] ?? null;
+}
+
+function readNumber(root: HTMLElement, field: string, unit: UnitSystem): number {
+  const element = getInput(root, field);
+  const value = element === null ? Number.NaN : Number.parseFloat(element.value);
+  if (unit === 'metric' || field.endsWith('Percent')) return value;
+  return inchesToCentimetres(value);
+}
+
+function readInput(context: ControllerContext): TankInput {
+  const input = { ...context.state.input };
+  const activeShape = context.root.querySelector<HTMLElement>('[data-shape].is-active')?.dataset.shape;
+  if (activeShape === 'rectangular' || activeShape === 'cylindrical' || activeShape === 'bow') input.shape = activeShape;
+  for (const field of DIMENSION_FIELDS) input[field] = readNumber(context.root, field, context.state.unit);
+  input.changePercent = readNumber(context.root, 'changePercent', 'metric');
+  return input;
+}
+
+function writeNumber(root: HTMLElement, field: string, valueCm: number, unit: UnitSystem): void {
+  const element = getInput(root, field);
+  if (element === null) return;
+  const value = unit === 'metric' ? valueCm : centimetresToInches(valueCm);
+  element.value = String(Math.round(value * 10) / 10);
+}
+
+function setUnitButtons(context: ControllerContext): void {
+  context.root.querySelectorAll<HTMLElement>('[data-unit-choice]').forEach((button) => {
+    const active = button.dataset.unitChoice === context.state.unit;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+  const unitText = context.state.unit === 'metric' ? context.ui.lengthUnitMetric : context.ui.lengthUnitImperial;
+  context.root.querySelectorAll<HTMLElement>('[data-length-unit]').forEach((label) => {
+    label.textContent = unitText;
+  });
+}
+
+function setShapeButtons(context: ControllerContext): void {
+  context.root.querySelectorAll<HTMLElement>('[data-shape]').forEach((button) => {
+    const active = button.dataset.shape === context.state.input.shape;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+  context.root.querySelectorAll<HTMLElement>('[data-shape-fields]').forEach((group) => {
+    group.toggleAttribute('hidden', group.getAttribute('data-shape-fields') !== context.state.input.shape);
+  });
+}
+
+function writeInput(context: ControllerContext): void {
+  for (const field of DIMENSION_FIELDS) writeNumber(context.root, field, context.state.input[field], context.state.unit);
+  const change = getInput(context.root, 'changePercent');
+  if (change !== null) change.value = String(context.state.input.changePercent);
+  context.root.dataset.unit = context.state.unit;
+  setUnitButtons(context);
+  setShapeButtons(context);
+}
+
+function calculate(context: ControllerContext): void {
+  context.state.input = readInput(context);
+  saveAquariumState(context.state);
+  const result = calculateTankVolume(context.state.input);
+  if (result.ok === false) {
+    renderError(context.root, context.ui.invalidState);
+    return;
+  }
+  renderResults(context.root, {
+    result: result.value,
+    unit: context.state.unit,
+    locale: context.locale,
+    ui: context.ui,
+  });
+}
+
+function reset(context: ControllerContext): void {
+  context.state = defaultAquariumState();
+  writeInput(context);
+  renderEmpty(context.root, context.ui.emptyState);
+  calculate(context);
+}
+
+function bind(context: ControllerContext): void {
+  context.root.querySelectorAll<HTMLElement>('[data-shape]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const shape = button.dataset.shape;
+      if (shape !== 'rectangular' && shape !== 'cylindrical' && shape !== 'bow') return;
+      context.state.input.shape = shape;
+      setShapeButtons(context);
+      calculate(context);
+    });
+  });
+  context.root.querySelectorAll<HTMLElement>('[data-unit-choice]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const next = button.dataset.unitChoice;
+      if (next !== 'metric' && next !== 'imperial') return;
+      context.state.input = readInput(context);
+      context.state.unit = next;
+      writeInput(context);
+      calculate(context);
+    });
+  });
+  context.root.querySelectorAll('input').forEach((input) => input.addEventListener('input', () => calculate(context)));
+  context.root.querySelector('[data-action="reset"]')?.addEventListener('click', () => reset(context));
+  context.root.querySelector('[data-action="calculate"]')?.addEventListener('click', () => calculate(context));
+}
+
+function readUi(root: HTMLElement): AquariumTankVolumeWaterChangeCalculatorUI {
+  return JSON.parse(root.dataset.ui ?? '{}') as AquariumTankVolumeWaterChangeCalculatorUI;
+}
+
+export function initAquariumTankVolumeWaterChangeCalculator(): void {
+  const root = document.querySelector<HTMLElement>('#aquarium-tank-volume-water-change-calculator');
+  if (root === null) return;
+  const stored = loadAquariumState();
+  const context: ControllerContext = {
+    root,
+    ui: readUi(root),
+    state: stored ?? defaultAquariumState(),
+    locale: document.documentElement.lang || 'en',
+  };
+  writeInput(context);
+  bind(context);
+  calculate(context);
+}