@jjlmoya/utils-home 1.30.0 → 1.31.0

package/src/tool/tileLayoutCalculator/logic.ts

@@ -0,0 +1,55 @@
+export interface TileLayoutInput {
+  roomWidthM: number;
+  roomLengthM: number;
+  tileWidthM: number;
+  tileLengthM: number;
+  groutM: number;
+  wastePercent: number;
+  tilesPerBox: number;
+  pricePerBox: number;
+}
+
+export interface TileLayoutResult {
+  roomWidthM: number;
+  roomLengthM: number;
+  tileWidthM: number;
+  tileLengthM: number;
+  groutM: number;
+  roomArea: number;
+  cols: number;
+  rows: number;
+  exactTiles: number;
+  wasteTiles: number;
+  totalTiles: number;
+  boxes: number;
+  totalCost: number;
+}
+
+export function calculateTileLayout(i: TileLayoutInput): TileLayoutResult {
+  const cols = Math.ceil(i.roomWidthM / (i.tileWidthM + i.groutM));
+  const rows = Math.ceil(i.roomLengthM / (i.tileLengthM + i.groutM));
+  const exactTiles = cols * rows;
+  const wasteTiles = Math.ceil(exactTiles * i.wastePercent / 100);
+  const totalTiles = exactTiles + wasteTiles;
+  const boxes = Math.ceil(totalTiles / i.tilesPerBox);
+  const totalCost = boxes * i.pricePerBox;
+  return {
+    roomWidthM: i.roomWidthM,
+    roomLengthM: i.roomLengthM,
+    tileWidthM: i.tileWidthM,
+    tileLengthM: i.tileLengthM,
+    groutM: i.groutM,
+    roomArea: i.roomWidthM * i.roomLengthM,
+    cols,
+    rows,
+    exactTiles,
+    wasteTiles,
+    totalTiles,
+    boxes,
+    totalCost,
+  };
+}
+
+export function fmt0(n: number): string { return String(Math.round(n)); }
+export function fmt1(n: number): string { return n.toFixed(1); }
+export function fmt2(n: number): string { return n.toFixed(2); }

package/src/tool/tileLayoutCalculator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { tileLayoutCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await tileLayoutCalculator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/tileLayoutCalculator/tile-layout-calculator.css

@@ -0,0 +1,404 @@
+.tile-wrapper {
+  --tile-p: #8b5cf6;
+  --tile-success: #22c55e;
+  --tile-warn: #ef4444;
+  --tile-success-glow: rgba(34, 197, 94, 0.35);
+  --tile-success-glow-0: rgba(34, 197, 94, 0);
+  --tile-warn-glow: rgba(239, 68, 68, 0.15);
+  --tile-stroke: rgba(140, 140, 170, 0.5);
+  --tile-bg-glow: rgba(230, 230, 240, 0.5);
+  --tile-rect-p: rgba(220, 220, 235, 0.95);
+  --tile-rect-s: rgba(195, 195, 215, 0.92);
+
+  width: 100%;
+  padding: 1rem 0;
+}
+
+.tile-card {
+  background: var(--bg-surface);
+  width: calc(100% - 24px);
+  max-width: 960px;
+  margin: 0 auto;
+  border-radius: 24px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .tile-card {
+    flex-direction: row;
+    min-height: 560px;
+  }
+}
+
+.tile-left {
+  flex: 0 0 auto;
+  width: 100%;
+  padding: 32px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media (min-width: 768px) {
+  .tile-left {
+    width: 380px;
+    border-bottom: none;
+    border-right: 1px solid var(--border-color);
+  }
+}
+
+.tile-right {
+  flex: 1;
+  background: var(--bg-page);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  padding: 40px 32px;
+  min-height: 360px;
+}
+
+.tile-section-title {
+  font-size: 0.75rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--tile-p);
+  margin: 0;
+}
+
+.tile-unit-toggle {
+  display: flex;
+  gap: 8px;
+}
+
+.tile-unit-btn {
+  padding: 6px 14px;
+  border-radius: 9999px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tile-unit-btn:hover {
+  border-color: var(--tile-p);
+  color: var(--text-main);
+}
+
+.tile-unit-active {
+  background: var(--tile-p);
+  border-color: var(--tile-p);
+  color: #fff;
+}
+
+.tile-field {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tile-label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+}
+
+.tile-number-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.tile-number-input {
+  width: 100px;
+  font-size: 2.5rem;
+  font-weight: 900;
+  color: var(--text-main);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid var(--border-color);
+  padding: 4px 0;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.tile-number-input:focus {
+  border-color: var(--tile-p);
+}
+
+.tile-price-input {
+  width: 90px;
+  font-size: 1.5rem;
+  font-weight: 900;
+  color: var(--text-main);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid var(--border-color);
+  padding: 4px 0;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.tile-price-input:focus {
+  border-color: var(--tile-p);
+}
+
+.tile-number-unit {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+.tile-slider {
+  width: 100%;
+  height: 6px;
+  accent-color: var(--tile-p);
+  cursor: pointer;
+  border-radius: 9999px;
+}
+
+.tile-waste-desc {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.tile-visual-title {
+  font-size: 0.625rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--tile-p);
+}
+
+.tile-pattern-toggle {
+  display: flex;
+  gap: 8px;
+}
+
+.tile-pattern-btn {
+  padding: 6px 14px;
+  border-radius: 9999px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tile-pattern-btn:hover {
+  border-color: var(--tile-p);
+  color: var(--text-main);
+}
+
+.tile-pattern-active {
+  background: var(--tile-p);
+  border-color: var(--tile-p);
+  color: #fff;
+}
+
+.tile-svg-wrap {
+  width: 100%;
+  max-width: 420px;
+  aspect-ratio: 4 / 3;
+  background: var(--tile-bg-glow);
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.tile-svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+
+.tile-rect-primary {
+  fill: var(--tile-rect-p);
+}
+
+.tile-rect-secondary {
+  fill: var(--tile-rect-s);
+}
+
+.tile-grid-bg {
+  stroke: var(--tile-stroke);
+  stroke-width: 0.15;
+  stroke-dasharray: 1 1;
+  opacity: 0.4;
+}
+
+.tile-dim-label {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid var(--tile-stroke);
+  border-radius: 999px;
+  padding: 3px 12px;
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--tile-p);
+  pointer-events: none;
+  z-index: 2;
+  backdrop-filter: blur(4px);
+  letter-spacing: 0.02em;
+}
+
+.tile-result-badge {
+  font-size: 0.625rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--tile-p);
+  padding: 6px 14px;
+  border: 1px solid var(--tile-stroke);
+  border-radius: 9999px;
+}
+
+.tile-stats {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+  max-width: 320px;
+  justify-content: center;
+}
+
+.tile-stat {
+  text-align: center;
+}
+
+.tile-stat-label {
+  font-size: 0.625rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-muted);
+  margin: 0 0 4px;
+}
+
+.tile-stat-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-main);
+  margin: 0;
+}
+
+.tile-stat-divider {
+  width: 1px;
+  height: 36px;
+  background: var(--border-color);
+  flex-shrink: 0;
+}
+
+.tile-waste-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: 12px;
+  background: var(--tile-bg-glow);
+  border: 1px solid var(--tile-stroke);
+  width: 100%;
+  max-width: 320px;
+}
+
+.tile-waste-label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.tile-waste-value {
+  font-size: 1rem;
+  font-weight: 900;
+  color: var(--tile-p);
+  margin: 0;
+}
+
+@keyframes tile-pulse-success {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--tile-success-glow);
+  }
+
+  70% {
+    transform: scale(1.02);
+    box-shadow: 0 0 0 18px var(--tile-success-glow-0);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--tile-success-glow-0);
+  }
+}
+
+@keyframes tile-shake {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  25% {
+    transform: translateY(5px);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
+
+  75% {
+    transform: translateY(2px);
+  }
+}
+
+.tile-svg-wrap.tile-state-optimal {
+  border-color: var(--tile-success);
+  box-shadow: 0 0 30px var(--tile-success-glow);
+  animation: tile-pulse-success 1.4s ease infinite;
+}
+
+.tile-particle {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  font-size: 0.875rem;
+  font-weight: 900;
+  color: var(--tile-p);
+  text-shadow: 0 0 8px var(--tile-p);
+  animation: tile-particle-float 0.8s ease-out forwards;
+}
+
+@keyframes tile-particle-float {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(var(--tx), var(--ty)) scale(0);
+    opacity: 0;
+  }
+}

package/src/tool/tileLayoutCalculator/ui.ts

@@ -0,0 +1,37 @@
+export interface TileLayoutCalculatorUI extends Record<string, string> {
+  sectionTitle: string;
+  labelRoomWidth: string;
+  labelRoomLength: string;
+  labelTileWidth: string;
+  labelTileLength: string;
+  labelGrout: string;
+  labelWaste: string;
+  labelTilesPerBox: string;
+  labelPrice: string;
+  labelPattern: string;
+  unitMetricRoom: string;
+  unitImperialRoom: string;
+  unitMetricTile: string;
+  unitImperialTile: string;
+  unitGroutMetric: string;
+  unitGroutImperial: string;
+  unitPercent: string;
+  unitBoxes: string;
+  unitPrice: string;
+  resultBadge: string;
+  labelArea: string;
+  labelTiles: string;
+  labelBoxes: string;
+  labelCost: string;
+  labelWasteCount: string;
+  labelCuts: string;
+  currency: string;
+  btnMetric: string;
+  btnImperial: string;
+  btnPatternStraight: string;
+  btnPatternBrick: string;
+  btnPatternDiagonal: string;
+  badgeOptimal: string;
+  badgeWarning: string;
+  visualTitle: string;
+}

package/src/tools.ts

@@ -13,6 +13,7 @@ import { WALL_PAINTING_CALCULATOR_TOOL } from './tool/wallPaintingCalculator/ind
 import { VAMPIRE_DRAW_SIMULATOR_TOOL } from './tool/vampireDrawSimulator/index';
 import { DESK_ERGONOMICS_TOOL } from './tool/deskErgonomics/index';
 import { APPLIANCE_COST_CALCULATOR_TOOL } from './tool/applianceCostCalculator/index';
+import { TILE_LAYOUT_CALCULATOR_TOOL } from './tool/tileLayoutCalculator/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   QR_GENERATOR_TOOL,
@@ -28,5 +29,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   VAMPIRE_DRAW_SIMULATOR_TOOL,
   DESK_ERGONOMICS_TOOL,
   APPLIANCE_COST_CALCULATOR_TOOL,
+  TILE_LAYOUT_CALCULATOR_TOOL,
 ];