Compare commits

..

No commits in common. "99b516d087561f6691282cad7a4d685f26c5c505" and "4ec42fdbc0200d003c57299814af75f069363fe9" have entirely different histories.

5 changed files with 64 additions and 434 deletions

View File

@ -141,9 +141,8 @@ function createWidgetJS(css, html, js) {
.replace(/document\.querySelectorAll\(/g, 'this.container.querySelectorAll(')
// Remove the DOMContentLoaded listener and class instantiation - we'll handle this in the widget wrapper
.replace(/document\.addEventListener\('DOMContentLoaded'.*?\n.*?new DogCalorieCalculator.*?\n.*?\}\);/s, '')
// Remove theme/scale assignments that would override widget options
.replace(/this\.theme = this\.getThemeFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultTheme;/g, '')
.replace(/this\.scale = this\.getScaleFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultScale;/g, '')
// Remove duplicate theme/scale assignments that override options
.replace(/this\.theme = this\.getThemeFromURL\(\) \|\| 'system';\s*\n\s*this\.scale = this\.getScaleFromURL\(\) \|\| 1\.0;/g, '')
// Add widget initialization methods
.replace(/constructor\(\) \{/, `constructor(container, options = {}) {
this.container = container;
@ -187,14 +186,14 @@ function createWidgetJS(css, html, js) {
// Remove existing theme classes
calculatorContainer.classList.remove('theme-light', 'theme-dark', 'theme-system');
// Add the selected theme class
if (['light', 'dark', 'system'].includes(this.theme)) {
calculatorContainer.classList.add('theme-' + this.theme);
if (['light', 'dark', 'system'].includes(this.options.theme)) {
calculatorContainer.classList.add('theme-' + this.options.theme);
}
}
}
applyScale() {
const scale = Math.max(0.5, Math.min(2.0, this.scale));
const scale = Math.max(0.5, Math.min(2.0, this.options.scale));
if (scale !== 1.0) {
this.container.style.transform = \`scale(\${scale})\`;
this.container.style.transformOrigin = 'top left';

View File

@ -32,7 +32,7 @@
}
.dog-calculator-container {
max-width: 640px;
max-width: 600px;
margin: 0 auto;
padding: 24px;
box-sizing: border-box;
@ -213,7 +213,6 @@
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
gap: 10px; /* Add gap between label and value */
}
.dog-calculator-result-item:last-child {
@ -233,7 +232,6 @@
padding: 4px 12px;
background: rgba(241, 154, 95, 0.15);
border-radius: 4px;
white-space: nowrap; /* Prevent text from wrapping to multiple lines */
}
.dog-calculator-collapsible {
@ -545,24 +543,6 @@
flex-direction: column;
align-items: flex-start;
}
/* Stack result items vertically on small screens */
.dog-calculator-result-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.dog-calculator-result-label {
margin-right: 0;
font-size: 0.9rem;
}
.dog-calculator-result-value {
font-size: 1rem;
align-self: stretch;
text-align: center;
}
}
/* Dark theme - manual override */
@ -2308,8 +2288,6 @@ const CALCULATOR_CONFIG = {
class DogCalorieCalculator {
constructor() {
this.currentMER = 0;
this.currentMERMin = 0; // For range calculations
this.currentMERMax = 0; // For range calculations
this.isImperial = false;
this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
@ -3357,25 +3335,6 @@ const CALCULATOR_CONFIG = {
return rer * factor;
}
// Get the range multipliers for each life stage
getLifeStageRange(factor) {
// Define ranges based on the reference image
const ranges = {
'3.0': { min: 3.0, max: 3.0 }, // Puppy 0-4 months (no range)
'2.0': { min: 2.0, max: 2.0 }, // Puppy 4m-adult OR Working light (no range for puppies)
'1.2': { min: 1.2, max: 1.4 }, // Adult inactive/obese
'1.6': { min: 1.4, max: 1.6 }, // Adult neutered/spayed
'1.8': { min: 1.6, max: 1.8 }, // Adult intact
'1.0': { min: 1.0, max: 1.0 }, // Weight loss (fixed)
'1.7': { min: 1.2, max: 1.8 }, // Weight gain (wide range)
'5.0': { min: 5.0, max: 5.0 }, // Working heavy (upper bound)
'1.1': { min: 1.1, max: 1.1 } // Senior (no range)
};
const key = factor.toFixed(1);
return ranges[key] || { min: factor, max: factor };
}
validateInput(value, min = 0, isInteger = false) {
const num = parseFloat(value);
if (isNaN(num) || num < min) return false;
@ -3507,21 +3466,10 @@ const CALCULATOR_CONFIG = {
const rer = this.calculateRER(weightKg);
const mer = this.calculateMER(rer, factor);
// Calculate range for MER
const range = this.getLifeStageRange(factor);
this.currentMERMin = this.calculateMER(rer, range.min);
this.currentMERMax = this.calculateMER(rer, range.max);
this.currentMER = mer; // Keep middle/selected value for compatibility
this.currentMER = mer;
rerValue.textContent = this.formatNumber(rer, 0) + ' cal/day';
// Show MER as range if applicable
if (range.min !== range.max) {
merValue.textContent = this.formatNumber(this.currentMERMin, 0) + '-' +
this.formatNumber(this.currentMERMax, 0) + ' cal/day';
} else {
merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
}
merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
calorieResults.style.display = 'block';
this.updateFoodCalculations();
@ -3556,9 +3504,6 @@ const CALCULATOR_CONFIG = {
updateFoodCalculations() {
if (this.currentMER === 0) return;
// Check if we have a range
const hasRange = this.currentMERMin !== this.currentMERMax;
const daysInput = document.getElementById('days');
const unitSelect = document.getElementById('unit');
const dailyFoodResults = document.getElementById('dailyFoodResults');
@ -3631,70 +3576,43 @@ const CALCULATOR_CONFIG = {
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
// Calculate range values if applicable
const dailyCaloriesMin = hasRange ? (this.currentMERMin * fs.percentage) / 100 : dailyCaloriesForThisFood;
const dailyCaloriesMax = hasRange ? (this.currentMERMax * fs.percentage) / 100 : dailyCaloriesForThisFood;
let dailyGramsForThisFood;
let dailyGramsMin, dailyGramsMax;
let dailyCupsForThisFood = null;
let dailyCupsMin, dailyCupsMax;
// For kcal/cup, calculate cups directly from calories
if (fs.energyUnit === 'kcalcup' && fs.energy) {
const caloriesPerCup = parseFloat(fs.energy);
dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
dailyCupsMin = dailyCaloriesMin / caloriesPerCup;
dailyCupsMax = dailyCaloriesMax / caloriesPerCup;
// We still need grams for total calculation, use approximation
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
dailyGramsMin = (dailyCaloriesMin / energyPer100g) * 100;
dailyGramsMax = (dailyCaloriesMax / energyPer100g) * 100;
console.log('Cups calculation:', {
caloriesPerCup,
dailyCaloriesForThisFood,
dailyCupsForThisFood,
dailyGramsForThisFood
});
} else {
// For other units, calculate grams normally
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
dailyGramsMin = (dailyCaloriesMin / energyPer100g) * 100;
dailyGramsMax = (dailyCaloriesMax / energyPer100g) * 100;
}
// Calculate per-meal amounts if needed
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
const displayGramsMin = this.showPerMeal ? dailyGramsMin / this.mealsPerDay : dailyGramsMin;
const displayGramsMax = this.showPerMeal ? dailyGramsMax / this.mealsPerDay : dailyGramsMax;
const displayCups = dailyCupsForThisFood !== null ?
(this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
const displayCupsMin = dailyCupsMin !== undefined ?
(this.showPerMeal ? dailyCupsMin / this.mealsPerDay : dailyCupsMin) : null;
const displayCupsMax = dailyCupsMax !== undefined ?
(this.showPerMeal ? dailyCupsMax / this.mealsPerDay : dailyCupsMax) : null;
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
const displayCaloriesMin = this.showPerMeal ? dailyCaloriesMin / this.mealsPerDay : dailyCaloriesMin;
const displayCaloriesMax = this.showPerMeal ? dailyCaloriesMax / this.mealsPerDay : dailyCaloriesMax;
foodBreakdowns.push({
name: fs.name,
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
dailyGramsMin: dailyGramsMin,
dailyGramsMax: dailyGramsMax,
displayGrams: displayGrams,
displayGramsMin: displayGramsMin,
displayGramsMax: displayGramsMax,
dailyCups: dailyCupsForThisFood,
dailyCupsMin: dailyCupsMin,
dailyCupsMax: dailyCupsMax,
displayCups: displayCups,
displayCupsMin: displayCupsMin,
displayCupsMax: displayCupsMax,
calories: dailyCaloriesForThisFood,
displayCalories: displayCalories,
displayCaloriesMin: displayCaloriesMin,
displayCaloriesMax: displayCaloriesMax,
isLocked: fs.isLocked,
hasEnergyContent: true,
hasRange: hasRange,
foodSource: fs // Store reference for cups conversion
});
@ -3799,23 +3717,12 @@ const CALCULATOR_CONFIG = {
if (unit === 'cups') {
// For cups, use the pre-calculated cups value if available
if (breakdown.displayCups !== null) {
if (breakdown.hasRange && breakdown.displayCupsMin !== breakdown.displayCupsMax) {
valueContent = `${this.formatNumber(breakdown.displayCupsMin, decimals)}-${this.formatNumber(breakdown.displayCupsMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
}
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
}
} else {
// For other units (g, kg, oz, lb)
if (breakdown.hasRange && breakdown.displayGramsMin !== breakdown.displayGramsMax) {
const minConverted = this.convertUnits(breakdown.displayGramsMin, unit);
const maxConverted = this.convertUnits(breakdown.displayGramsMax, unit);
valueContent = `${this.formatNumber(minConverted, decimals)}-${this.formatNumber(maxConverted, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
}
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
}
} else {
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
@ -3853,53 +3760,23 @@ const CALCULATOR_CONFIG = {
if (validForCups) {
// Calculate total cups using pre-calculated values
let totalCups = 0;
let totalCupsMin = 0;
let totalCupsMax = 0;
foodBreakdowns.forEach(breakdown => {
if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
totalCups += breakdown.displayCups;
if (breakdown.hasRange) {
totalCupsMin += breakdown.displayCupsMin || breakdown.displayCups;
totalCupsMax += breakdown.displayCupsMax || breakdown.displayCups;
} else {
totalCupsMin += breakdown.displayCups;
totalCupsMax += breakdown.displayCups;
}
}
});
if (hasRange && totalCupsMin !== totalCupsMax) {
totalDisplayText = `${this.formatNumber(totalCupsMin, decimals)}-${this.formatNumber(totalCupsMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
console.log('Total cups display:', {
totalCups,
displayTotal,
foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
});
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = 'Mixed units - see breakdown';
}
} else {
// Calculate totals for ranges
if (hasRange) {
let totalGramsMin = 0;
let totalGramsMax = 0;
foodBreakdowns.forEach(breakdown => {
if (breakdown.percentage > 0 && breakdown.hasEnergyContent) {
totalGramsMin += breakdown.displayGramsMin || breakdown.displayGrams;
totalGramsMax += breakdown.displayGramsMax || breakdown.displayGrams;
}
});
const convertedMin = this.convertUnits(totalGramsMin, unit);
const convertedMax = this.convertUnits(totalGramsMax, unit);
if (totalGramsMin !== totalGramsMax) {
totalDisplayText = `${this.formatNumber(convertedMin, decimals)}-${this.formatNumber(convertedMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = this.formatNumber(convertedMin, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
} else {
convertedTotal = this.convertUnits(displayTotal, unit);
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
convertedTotal = this.convertUnits(displayTotal, unit);
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
dailyFoodValue.textContent = totalDisplayText;

View File

@ -22,7 +22,7 @@
}
.dog-calculator-container {
max-width: 640px;
max-width: 600px;
margin: 0 auto;
padding: 24px;
box-sizing: border-box;
@ -203,7 +203,6 @@
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
gap: 10px; /* Add gap between label and value */
}
.dog-calculator-result-item:last-child {
@ -223,7 +222,6 @@
padding: 4px 12px;
background: rgba(241, 154, 95, 0.15);
border-radius: 4px;
white-space: nowrap; /* Prevent text from wrapping to multiple lines */
}
.dog-calculator-collapsible {
@ -535,24 +533,6 @@
flex-direction: column;
align-items: flex-start;
}
/* Stack result items vertically on small screens */
.dog-calculator-result-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.dog-calculator-result-label {
margin-right: 0;
font-size: 0.9rem;
}
.dog-calculator-result-value {
font-size: 1rem;
align-self: stretch;
text-align: center;
}
}
/* Dark theme - manual override */

View File

@ -6,8 +6,6 @@
class DogCalorieCalculator {
constructor() {
this.currentMER = 0;
this.currentMERMin = 0; // For range calculations
this.currentMERMax = 0; // For range calculations
this.isImperial = false;
this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
@ -1055,25 +1053,6 @@
return rer * factor;
}
// Get the range multipliers for each life stage
getLifeStageRange(factor) {
// Define ranges based on the reference image
const ranges = {
'3.0': { min: 3.0, max: 3.0 }, // Puppy 0-4 months (no range)
'2.0': { min: 2.0, max: 2.0 }, // Puppy 4m-adult OR Working light (no range for puppies)
'1.2': { min: 1.2, max: 1.4 }, // Adult inactive/obese
'1.6': { min: 1.4, max: 1.6 }, // Adult neutered/spayed
'1.8': { min: 1.6, max: 1.8 }, // Adult intact
'1.0': { min: 1.0, max: 1.0 }, // Weight loss (fixed)
'1.7': { min: 1.2, max: 1.8 }, // Weight gain (wide range)
'5.0': { min: 5.0, max: 5.0 }, // Working heavy (upper bound)
'1.1': { min: 1.1, max: 1.1 } // Senior (no range)
};
const key = factor.toFixed(1);
return ranges[key] || { min: factor, max: factor };
}
validateInput(value, min = 0, isInteger = false) {
const num = parseFloat(value);
if (isNaN(num) || num < min) return false;
@ -1205,21 +1184,10 @@
const rer = this.calculateRER(weightKg);
const mer = this.calculateMER(rer, factor);
// Calculate range for MER
const range = this.getLifeStageRange(factor);
this.currentMERMin = this.calculateMER(rer, range.min);
this.currentMERMax = this.calculateMER(rer, range.max);
this.currentMER = mer; // Keep middle/selected value for compatibility
this.currentMER = mer;
rerValue.textContent = this.formatNumber(rer, 0) + ' cal/day';
// Show MER as range if applicable
if (range.min !== range.max) {
merValue.textContent = this.formatNumber(this.currentMERMin, 0) + '-' +
this.formatNumber(this.currentMERMax, 0) + ' cal/day';
} else {
merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
}
merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
calorieResults.style.display = 'block';
this.updateFoodCalculations();
@ -1254,9 +1222,6 @@
updateFoodCalculations() {
if (this.currentMER === 0) return;
// Check if we have a range
const hasRange = this.currentMERMin !== this.currentMERMax;
const daysInput = document.getElementById('days');
const unitSelect = document.getElementById('unit');
const dailyFoodResults = document.getElementById('dailyFoodResults');
@ -1329,70 +1294,43 @@
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
// Calculate range values if applicable
const dailyCaloriesMin = hasRange ? (this.currentMERMin * fs.percentage) / 100 : dailyCaloriesForThisFood;
const dailyCaloriesMax = hasRange ? (this.currentMERMax * fs.percentage) / 100 : dailyCaloriesForThisFood;
let dailyGramsForThisFood;
let dailyGramsMin, dailyGramsMax;
let dailyCupsForThisFood = null;
let dailyCupsMin, dailyCupsMax;
// For kcal/cup, calculate cups directly from calories
if (fs.energyUnit === 'kcalcup' && fs.energy) {
const caloriesPerCup = parseFloat(fs.energy);
dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
dailyCupsMin = dailyCaloriesMin / caloriesPerCup;
dailyCupsMax = dailyCaloriesMax / caloriesPerCup;
// We still need grams for total calculation, use approximation
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
dailyGramsMin = (dailyCaloriesMin / energyPer100g) * 100;
dailyGramsMax = (dailyCaloriesMax / energyPer100g) * 100;
console.log('Cups calculation:', {
caloriesPerCup,
dailyCaloriesForThisFood,
dailyCupsForThisFood,
dailyGramsForThisFood
});
} else {
// For other units, calculate grams normally
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
dailyGramsMin = (dailyCaloriesMin / energyPer100g) * 100;
dailyGramsMax = (dailyCaloriesMax / energyPer100g) * 100;
}
// Calculate per-meal amounts if needed
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
const displayGramsMin = this.showPerMeal ? dailyGramsMin / this.mealsPerDay : dailyGramsMin;
const displayGramsMax = this.showPerMeal ? dailyGramsMax / this.mealsPerDay : dailyGramsMax;
const displayCups = dailyCupsForThisFood !== null ?
(this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
const displayCupsMin = dailyCupsMin !== undefined ?
(this.showPerMeal ? dailyCupsMin / this.mealsPerDay : dailyCupsMin) : null;
const displayCupsMax = dailyCupsMax !== undefined ?
(this.showPerMeal ? dailyCupsMax / this.mealsPerDay : dailyCupsMax) : null;
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
const displayCaloriesMin = this.showPerMeal ? dailyCaloriesMin / this.mealsPerDay : dailyCaloriesMin;
const displayCaloriesMax = this.showPerMeal ? dailyCaloriesMax / this.mealsPerDay : dailyCaloriesMax;
foodBreakdowns.push({
name: fs.name,
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
dailyGramsMin: dailyGramsMin,
dailyGramsMax: dailyGramsMax,
displayGrams: displayGrams,
displayGramsMin: displayGramsMin,
displayGramsMax: displayGramsMax,
dailyCups: dailyCupsForThisFood,
dailyCupsMin: dailyCupsMin,
dailyCupsMax: dailyCupsMax,
displayCups: displayCups,
displayCupsMin: displayCupsMin,
displayCupsMax: displayCupsMax,
calories: dailyCaloriesForThisFood,
displayCalories: displayCalories,
displayCaloriesMin: displayCaloriesMin,
displayCaloriesMax: displayCaloriesMax,
isLocked: fs.isLocked,
hasEnergyContent: true,
hasRange: hasRange,
foodSource: fs // Store reference for cups conversion
});
@ -1497,23 +1435,12 @@
if (unit === 'cups') {
// For cups, use the pre-calculated cups value if available
if (breakdown.displayCups !== null) {
if (breakdown.hasRange && breakdown.displayCupsMin !== breakdown.displayCupsMax) {
valueContent = `${this.formatNumber(breakdown.displayCupsMin, decimals)}-${this.formatNumber(breakdown.displayCupsMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
}
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
}
} else {
// For other units (g, kg, oz, lb)
if (breakdown.hasRange && breakdown.displayGramsMin !== breakdown.displayGramsMax) {
const minConverted = this.convertUnits(breakdown.displayGramsMin, unit);
const maxConverted = this.convertUnits(breakdown.displayGramsMax, unit);
valueContent = `${this.formatNumber(minConverted, decimals)}-${this.formatNumber(maxConverted, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
}
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
}
} else {
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
@ -1551,53 +1478,23 @@
if (validForCups) {
// Calculate total cups using pre-calculated values
let totalCups = 0;
let totalCupsMin = 0;
let totalCupsMax = 0;
foodBreakdowns.forEach(breakdown => {
if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
totalCups += breakdown.displayCups;
if (breakdown.hasRange) {
totalCupsMin += breakdown.displayCupsMin || breakdown.displayCups;
totalCupsMax += breakdown.displayCupsMax || breakdown.displayCups;
} else {
totalCupsMin += breakdown.displayCups;
totalCupsMax += breakdown.displayCups;
}
}
});
if (hasRange && totalCupsMin !== totalCupsMax) {
totalDisplayText = `${this.formatNumber(totalCupsMin, decimals)}-${this.formatNumber(totalCupsMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
console.log('Total cups display:', {
totalCups,
displayTotal,
foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
});
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = 'Mixed units - see breakdown';
}
} else {
// Calculate totals for ranges
if (hasRange) {
let totalGramsMin = 0;
let totalGramsMax = 0;
foodBreakdowns.forEach(breakdown => {
if (breakdown.percentage > 0 && breakdown.hasEnergyContent) {
totalGramsMin += breakdown.displayGramsMin || breakdown.displayGrams;
totalGramsMax += breakdown.displayGramsMax || breakdown.displayGrams;
}
});
const convertedMin = this.convertUnits(totalGramsMin, unit);
const convertedMax = this.convertUnits(totalGramsMax, unit);
if (totalGramsMin !== totalGramsMax) {
totalDisplayText = `${this.formatNumber(convertedMin, decimals)}-${this.formatNumber(convertedMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = this.formatNumber(convertedMin, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
} else {
convertedTotal = this.convertUnits(displayTotal, unit);
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
convertedTotal = this.convertUnits(displayTotal, unit);
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
dailyFoodValue.textContent = totalDisplayText;

View File

@ -47,7 +47,7 @@
}
.dog-calculator-container {
max-width: 640px;
max-width: 600px;
margin: 0 auto;
padding: 24px;
box-sizing: border-box;
@ -228,7 +228,6 @@
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
gap: 10px; /* Add gap between label and value */
}
.dog-calculator-result-item:last-child {
@ -248,7 +247,6 @@
padding: 4px 12px;
background: rgba(241, 154, 95, 0.15);
border-radius: 4px;
white-space: nowrap; /* Prevent text from wrapping to multiple lines */
}
.dog-calculator-collapsible {
@ -560,24 +558,6 @@
flex-direction: column;
align-items: flex-start;
}
/* Stack result items vertically on small screens */
.dog-calculator-result-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.dog-calculator-result-label {
margin-right: 0;
font-size: 0.9rem;
}
.dog-calculator-result-value {
font-size: 1rem;
align-self: stretch;
text-align: center;
}
}
/* Dark theme - manual override */
@ -2125,11 +2105,9 @@ const CALCULATOR_CONFIG = {
this.theme = this.options.theme;
this.scale = this.options.scale;
this.currentMER = 0;
this.currentMERMin = 0; // For range calculations
this.currentMERMax = 0; // For range calculations
this.isImperial = false;
this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
this.foodSources = [];
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
this.mealsPerDay = 2;
@ -3394,25 +3372,6 @@ const CALCULATOR_CONFIG = {
return rer * factor;
}
// Get the range multipliers for each life stage
getLifeStageRange(factor) {
// Define ranges based on the reference image
const ranges = {
'3.0': { min: 3.0, max: 3.0 }, // Puppy 0-4 months (no range)
'2.0': { min: 2.0, max: 2.0 }, // Puppy 4m-adult OR Working light (no range for puppies)
'1.2': { min: 1.2, max: 1.4 }, // Adult inactive/obese
'1.6': { min: 1.4, max: 1.6 }, // Adult neutered/spayed
'1.8': { min: 1.6, max: 1.8 }, // Adult intact
'1.0': { min: 1.0, max: 1.0 }, // Weight loss (fixed)
'1.7': { min: 1.2, max: 1.8 }, // Weight gain (wide range)
'5.0': { min: 5.0, max: 5.0 }, // Working heavy (upper bound)
'1.1': { min: 1.1, max: 1.1 } // Senior (no range)
};
const key = factor.toFixed(1);
return ranges[key] || { min: factor, max: factor };
}
validateInput(value, min = 0, isInteger = false) {
const num = parseFloat(value);
if (isNaN(num) || num < min) return false;
@ -3544,21 +3503,10 @@ const CALCULATOR_CONFIG = {
const rer = this.calculateRER(weightKg);
const mer = this.calculateMER(rer, factor);
// Calculate range for MER
const range = this.getLifeStageRange(factor);
this.currentMERMin = this.calculateMER(rer, range.min);
this.currentMERMax = this.calculateMER(rer, range.max);
this.currentMER = mer; // Keep middle/selected value for compatibility
this.currentMER = mer;
rerValue.textContent = this.formatNumber(rer, 0) + ' cal/day';
// Show MER as range if applicable
if (range.min !== range.max) {
merValue.textContent = this.formatNumber(this.currentMERMin, 0) + '-' +
this.formatNumber(this.currentMERMax, 0) + ' cal/day';
} else {
merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
}
merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
calorieResults.style.display = 'block';
this.updateFoodCalculations();
@ -3593,9 +3541,6 @@ const CALCULATOR_CONFIG = {
updateFoodCalculations() {
if (this.currentMER === 0) return;
// Check if we have a range
const hasRange = this.currentMERMin !== this.currentMERMax;
const daysInput = this.container.querySelector('#days');
const unitSelect = this.container.querySelector('#unit');
const dailyFoodResults = this.container.querySelector('#dailyFoodResults');
@ -3668,70 +3613,43 @@ const CALCULATOR_CONFIG = {
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
// Calculate range values if applicable
const dailyCaloriesMin = hasRange ? (this.currentMERMin * fs.percentage) / 100 : dailyCaloriesForThisFood;
const dailyCaloriesMax = hasRange ? (this.currentMERMax * fs.percentage) / 100 : dailyCaloriesForThisFood;
let dailyGramsForThisFood;
let dailyGramsMin, dailyGramsMax;
let dailyCupsForThisFood = null;
let dailyCupsMin, dailyCupsMax;
// For kcal/cup, calculate cups directly from calories
if (fs.energyUnit === 'kcalcup' && fs.energy) {
const caloriesPerCup = parseFloat(fs.energy);
dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
dailyCupsMin = dailyCaloriesMin / caloriesPerCup;
dailyCupsMax = dailyCaloriesMax / caloriesPerCup;
// We still need grams for total calculation, use approximation
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
dailyGramsMin = (dailyCaloriesMin / energyPer100g) * 100;
dailyGramsMax = (dailyCaloriesMax / energyPer100g) * 100;
console.log('Cups calculation:', {
caloriesPerCup,
dailyCaloriesForThisFood,
dailyCupsForThisFood,
dailyGramsForThisFood
});
} else {
// For other units, calculate grams normally
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
dailyGramsMin = (dailyCaloriesMin / energyPer100g) * 100;
dailyGramsMax = (dailyCaloriesMax / energyPer100g) * 100;
}
// Calculate per-meal amounts if needed
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
const displayGramsMin = this.showPerMeal ? dailyGramsMin / this.mealsPerDay : dailyGramsMin;
const displayGramsMax = this.showPerMeal ? dailyGramsMax / this.mealsPerDay : dailyGramsMax;
const displayCups = dailyCupsForThisFood !== null ?
(this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
const displayCupsMin = dailyCupsMin !== undefined ?
(this.showPerMeal ? dailyCupsMin / this.mealsPerDay : dailyCupsMin) : null;
const displayCupsMax = dailyCupsMax !== undefined ?
(this.showPerMeal ? dailyCupsMax / this.mealsPerDay : dailyCupsMax) : null;
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
const displayCaloriesMin = this.showPerMeal ? dailyCaloriesMin / this.mealsPerDay : dailyCaloriesMin;
const displayCaloriesMax = this.showPerMeal ? dailyCaloriesMax / this.mealsPerDay : dailyCaloriesMax;
foodBreakdowns.push({
name: fs.name,
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
dailyGramsMin: dailyGramsMin,
dailyGramsMax: dailyGramsMax,
displayGrams: displayGrams,
displayGramsMin: displayGramsMin,
displayGramsMax: displayGramsMax,
dailyCups: dailyCupsForThisFood,
dailyCupsMin: dailyCupsMin,
dailyCupsMax: dailyCupsMax,
displayCups: displayCups,
displayCupsMin: displayCupsMin,
displayCupsMax: displayCupsMax,
calories: dailyCaloriesForThisFood,
displayCalories: displayCalories,
displayCaloriesMin: displayCaloriesMin,
displayCaloriesMax: displayCaloriesMax,
isLocked: fs.isLocked,
hasEnergyContent: true,
hasRange: hasRange,
foodSource: fs // Store reference for cups conversion
});
@ -3836,23 +3754,12 @@ const CALCULATOR_CONFIG = {
if (unit === 'cups') {
// For cups, use the pre-calculated cups value if available
if (breakdown.displayCups !== null) {
if (breakdown.hasRange && breakdown.displayCupsMin !== breakdown.displayCupsMax) {
valueContent = `${this.formatNumber(breakdown.displayCupsMin, decimals)}-${this.formatNumber(breakdown.displayCupsMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
}
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
}
} else {
// For other units (g, kg, oz, lb)
if (breakdown.hasRange && breakdown.displayGramsMin !== breakdown.displayGramsMax) {
const minConverted = this.convertUnits(breakdown.displayGramsMin, unit);
const maxConverted = this.convertUnits(breakdown.displayGramsMax, unit);
valueContent = `${this.formatNumber(minConverted, decimals)}-${this.formatNumber(maxConverted, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
}
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
}
} else {
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
@ -3890,53 +3797,23 @@ const CALCULATOR_CONFIG = {
if (validForCups) {
// Calculate total cups using pre-calculated values
let totalCups = 0;
let totalCupsMin = 0;
let totalCupsMax = 0;
foodBreakdowns.forEach(breakdown => {
if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
totalCups += breakdown.displayCups;
if (breakdown.hasRange) {
totalCupsMin += breakdown.displayCupsMin || breakdown.displayCups;
totalCupsMax += breakdown.displayCupsMax || breakdown.displayCups;
} else {
totalCupsMin += breakdown.displayCups;
totalCupsMax += breakdown.displayCups;
}
}
});
if (hasRange && totalCupsMin !== totalCupsMax) {
totalDisplayText = `${this.formatNumber(totalCupsMin, decimals)}-${this.formatNumber(totalCupsMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
console.log('Total cups display:', {
totalCups,
displayTotal,
foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
});
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = 'Mixed units - see breakdown';
}
} else {
// Calculate totals for ranges
if (hasRange) {
let totalGramsMin = 0;
let totalGramsMax = 0;
foodBreakdowns.forEach(breakdown => {
if (breakdown.percentage > 0 && breakdown.hasEnergyContent) {
totalGramsMin += breakdown.displayGramsMin || breakdown.displayGrams;
totalGramsMax += breakdown.displayGramsMax || breakdown.displayGrams;
}
});
const convertedMin = this.convertUnits(totalGramsMin, unit);
const convertedMax = this.convertUnits(totalGramsMax, unit);
if (totalGramsMin !== totalGramsMax) {
totalDisplayText = `${this.formatNumber(convertedMin, decimals)}-${this.formatNumber(convertedMax, decimals)} ${unitLabel}${frequencySuffix}`;
} else {
totalDisplayText = this.formatNumber(convertedMin, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
} else {
convertedTotal = this.convertUnits(displayTotal, unit);
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
convertedTotal = this.convertUnits(displayTotal, unit);
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
}
dailyFoodValue.textContent = totalDisplayText;