codegirl007
/
lemonade-stand
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ui optimizations

master
Stephanie Gredell 3 weeks ago
parent
eb50376bf6
commit
846e8be592
3 changed files with 174 additions and 159 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      index.html
  2. 113
      index.js
  3. 112
      style.css

106
index.html
Unescape View File

@ -40,21 +40,42 @@
<h2 class="section_title">Recipe</h2> <h2 class="section_title">Recipe</h2>
<p class="section_hint">Per cup of lemonade</p> <p class="section_hint">Per cup of lemonade</p>
<ul class="game_list"> <ul class="game_list recipe_list">
<li>Lemons: <span data-bind="recipe.lemons">0</span></li> <li>
<li>Sugar: <span data-bind="recipe.sugar">0</span></li> <span>Lemons</span>
<li>Ice: <span data-bind="recipe.ice">0</span></li> <div class="recipe_stepper">
<button class="stepper_btn stepper_minus" data-ingredient="lemons">−</button>
<span class="stepper_value" data-bind="recipe.lemons">0</span>
<button class="stepper_btn stepper_plus" data-ingredient="lemons">+</button>
</div>
</li>
<li>
<span>Sugar</span>
<div class="recipe_stepper">
<button class="stepper_btn stepper_minus" data-ingredient="sugar">−</button>
<span class="stepper_value" data-bind="recipe.sugar">0</span>
<button class="stepper_btn stepper_plus" data-ingredient="sugar">+</button>
</div>
</li>
<li>
<span>Ice</span>
<div class="recipe_stepper">
<button class="stepper_btn stepper_minus" data-ingredient="ice">−</button>
<span class="stepper_value" data-bind="recipe.ice">0</span>
<button class="stepper_btn stepper_plus" data-ingredient="ice">+</button>
</div>
</li>
</ul> </ul>
<button class="change_recipe_btn">Change Recipe</button>
</section> </section>
<section class="game_section"> <section class="game_section">
<h2 class="section_title">Current Price</h2> <h2 class="section_title">Current Price</h2>
<p class="section_hint">Click to edit</p>
<p data-bind="price_per_cup" data-format="currency"></p> <div class="price_editable">
<span class="price_currency">$</span>
<button class="change_price_button">Change Price</button> <input type="text" class="price_inline_input" inputmode="decimal" value="0.00">
</div>
</section> </section>
<section class="game_section day_section"> <section class="game_section day_section">
@ -127,73 +148,6 @@
</div> </div>
</div> </div>
<div class="price_change_modal">
<div class="price_change_modal_content">
<div class="price_change_modal_header">
<h2 class="price_change_modal_title">Set Your Price</h2>
<button class="price_change_modal_close">&times;</button>
</div>
<div class="price_change_modal_body">
<p class="price_change_hint">Choose how much to charge per cup of lemonade.</p>
<div class="price_input_group">
<span class="price_currency">$</span>
<input type="text" class="price_input" inputmode="decimal">
</div>
<button class="price_change_save_btn">Save Price</button>
</div>
</div>
</div>
<div class="recipe_modal">
<div class="recipe_modal_content">
<div class="recipe_modal_header">
<h2 class="recipe_modal_title">Set Your Recipe</h2>
<button class="recipe_modal_close">&times;</button>
</div>
<div class="recipe_modal_body">
<p class="recipe_modal_hint">Ingredients per cup of lemonade</p>
<div class="recipe_grid">
<div class="recipe_item">
<label class="recipe_label">Lemons</label>
<input type="number" class="recipe_input" data-recipe="lemons" min="0" max="10" value="1">
</div>
<div class="recipe_item">
<label class="recipe_label">Sugar</label>
<input type="number" class="recipe_input" data-recipe="sugar" min="0" max="10" value="1">
</div>
<div class="recipe_item">
<label class="recipe_label">Ice</label>
<input type="number" class="recipe_input" data-recipe="ice" min="0" max="10" value="3">
</div>
</div>
<div class="recipe_cost_breakdown">
<h3 class="cost_breakdown">Cost Breakdown</h3>
<div class="recipe_cost_row">
<span>Lemons</span>
<span class="recipe_cost_item" data-cost="lemons">$0.00</span>
</div>
<div class="recipe_cost_row">
<span>Sugar</span>
<span class="recipe_cost_item" data-cost="sugar">$0.00</span>
</div>
<div class="recipe_cost_row">
<span>Ice</span>
<span class="recipe_cost_item" data-cost="ice">$0.00</span>
</div>
<div class="recipe_cost_row">
<span>Cup</span>
<span class="recipe_cost_item" data-cost="cup">$0.01</span>
</div>
<div class="recipe_cost_row total">
<span>Total per cup</span>
<span class="recipe_cost_value">$0.00</span>
</div>
</div>
<button class="recipe_save_btn">Save Recipe</button>
</div>
</div>
</div>
<canvas id="scene" width="1200" height="500"></canvas> <canvas id="scene" width="1200" height="500"></canvas>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>
</body> </body>

113
index.js
Unescape View File

@ -134,19 +134,8 @@ const goShoppingBtn = document.querySelector('.go_shopping_btn');
const shoppingModal = document.querySelector('.shopping_modal'); const shoppingModal = document.querySelector('.shopping_modal');
const shoppingModalClose = document.querySelector('.shopping_modal_close'); const shoppingModalClose = document.querySelector('.shopping_modal_close');
const changePriceBtn = document.querySelector('.change_price_button'); const priceInlineInput = document.querySelector('.price_inline_input');
const priceModal = document.querySelector('.price_change_modal');
const priceModalClose = document.querySelector('.price_change_modal_close');
const priceInput = document.querySelector('.price_input');
const priceSaveBtn = document.querySelector('.price_change_save_btn');
const changeRecipeBtn = document.querySelector('.change_recipe_btn');
const recipeModal = document.querySelector('.recipe_modal');
const recipeModalClose = document.querySelector('.recipe_modal_close');
const startDayBtn = document.querySelector('.start_day_btn'); const startDayBtn = document.querySelector('.start_day_btn');
const recipeSaveBtn = document.querySelector('.recipe_save_btn');
// Shopping modal - quantity inputs and dynamic pricing // Shopping modal - quantity inputs and dynamic pricing
const shopQtyInputs = document.querySelectorAll('.shop_qty_input'); const shopQtyInputs = document.querySelectorAll('.shop_qty_input');
@ -203,87 +192,53 @@ if (goShoppingBtn) {
}) })
} }
if (changePriceBtn) { // Inline price editing
changePriceBtn.addEventListener('click', () => { if (priceInlineInput) {
// Save price on blur or Enter
priceModal.classList.add('open'); function savePrice() {
priceInput.focus(); const value = parseFloat(priceInlineInput.value) || 0;
const priceInputLength = priceInput.value.length; const newState = set_price_per_cup(gameState, value);
setState(newState);
priceInlineInput.value = gameState.price_per_cup.toFixed(2);
}
priceInput.setSelectionRange(priceInputLength, priceInputLength); priceInlineInput.addEventListener('blur', savePrice);
priceInlineInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
priceInlineInput.blur();
}
}); });
priceModalClose.addEventListener('click', () => { // Select all text on focus for easy editing
priceModal.classList.remove('open'); priceInlineInput.addEventListener('focus', () => {
priceInlineInput.select();
}); });
priceSaveBtn.addEventListener('click', () => { // Initialize with current value
const newState = set_price_per_cup(gameState, Number(priceInput.value)); priceInlineInput.value = gameState.price_per_cup.toFixed(2);
setState(newState);
priceModal.classList.remove('open');
})
} }
// Recipe modal handlers // Start Day button
const recipeInputs = document.querySelectorAll('.recipe_input'); if (startDayBtn) {
const recipeCostValue = document.querySelector('.recipe_cost_value'); startDayBtn.addEventListener('click', startDay);
// Base prices for cost breakdown (matches SupplyPricing tier 1 in game.js)
const basePrices = { lemons: 0.02, sugar: 0.01, ice: 0.01, cup: 0.01 };
function updateRecipeCost() {
const lemons = parseInt(document.querySelector('.recipe_input[data-recipe="lemons"]').value) || 0;
const sugar = parseInt(document.querySelector('.recipe_input[data-recipe="sugar"]').value) || 0;
const ice = parseInt(document.querySelector('.recipe_input[data-recipe="ice"]').value) || 0;
// Update breakdown rows
document.querySelector('.recipe_cost_item[data-cost="lemons"]').textContent = '$' + (lemons * basePrices.lemons).toFixed(2);
document.querySelector('.recipe_cost_item[data-cost="sugar"]').textContent = '$' + (sugar * basePrices.sugar).toFixed(2);
document.querySelector('.recipe_cost_item[data-cost="ice"]').textContent = '$' + (ice * basePrices.ice).toFixed(2);
document.querySelector('.recipe_cost_item[data-cost="cup"]').textContent = '$' + basePrices.cup.toFixed(2);
// Update total
const result = calculate_cost_per_cup(gameState, { lemons, sugar, ice });
recipeCostValue.textContent = '$' + result.cost_per_cup.toFixed(2);
} }
// Update cost when recipe inputs change // Recipe stepper buttons
recipeInputs.forEach(input => { document.querySelectorAll('.stepper_btn').forEach(btn => {
input.addEventListener('input', updateRecipeCost); btn.addEventListener('click', () => {
}); const ingredient = btn.dataset.ingredient;
const isPlus = btn.classList.contains('stepper_plus');
if (changeRecipeBtn) { const currentValue = gameState.recipe[ingredient];
changeRecipeBtn.addEventListener('click', () => { const newValue = isPlus ? currentValue + 1 : Math.max(0, currentValue - 1);
// Set inputs to current recipe values
document.querySelector('.recipe_input[data-recipe="lemons"]').value = gameState.recipe.lemons;
document.querySelector('.recipe_input[data-recipe="sugar"]').value = gameState.recipe.sugar;
document.querySelector('.recipe_input[data-recipe="ice"]').value = gameState.recipe.ice;
updateRecipeCost();
recipeModal.classList.add('open');
});
recipeModalClose.addEventListener('click', () => {
recipeModal.classList.remove('open');
});
recipeSaveBtn.addEventListener('click', () => {
const lemons = parseInt(document.querySelector('.recipe_input[data-recipe="lemons"]').value) || 0;
const sugar = parseInt(document.querySelector('.recipe_input[data-recipe="sugar"]').value) || 0;
const ice = parseInt(document.querySelector('.recipe_input[data-recipe="ice"]').value) || 0;
const result = calculate_cost_per_cup(gameState, { lemons, sugar, ice }); const newRecipe = { ...gameState.recipe, [ingredient]: newValue };
const result = calculate_cost_per_cup(gameState, newRecipe);
setState({ setState({
recipe: { lemons, sugar, ice }, recipe: newRecipe,
cost_per_cup: result.cost_per_cup cost_per_cup: result.cost_per_cup
}); });
recipeModal.classList.remove('open');
}); });
} });
// Start Day button
if (startDayBtn) {
startDayBtn.addEventListener('click', startDay);
}
// Export for debugging in console // Export for debugging in console
window.gameState = gameState; window.gameState = gameState;

112
style.css
Unescape View File

@ -11,7 +11,10 @@ body {
.game_header { .game_header {
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
width: 500px; max-width: 500px;
width: 100%;
padding: 0 16px;
box-sizing: border-box;
align-items: center; align-items: center;
} }
@ -96,6 +99,94 @@ body {
margin-bottom: 0; margin-bottom: 0;
} }
/* Recipe stepper buttons */
.recipe_stepper {
display: flex;
align-items: center;
gap: 8px;
}
.stepper_btn {
font-family: 'Fredoka', sans-serif;
font-size: 18px;
font-weight: 600;
width: 28px;
height: 28px;
border-radius: 6px;
border: 2px solid #c5e8a8;
background: linear-gradient(180deg, #fff 0%, #f5f5f0 100%);
color: #5C4632;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.1s ease;
padding: 0;
line-height: 1;
}
.stepper_btn:hover {
border-color: #8fd16a;
background: linear-gradient(180deg, #f0ffe0 0%, #e5f5d5 100%);
}
.stepper_btn:active {
transform: scale(0.95);
}
.stepper_value {
font-family: 'Fredoka', sans-serif;
font-size: 18px;
font-weight: 600;
color: #5C4632;
min-width: 24px;
text-align: center;
}
/* Inline editable price */
.price_editable {
display: flex;
align-items: center;
justify-content: center;
margin: 12px 0;
}
.price_editable .price_currency {
font-family: 'Fredoka', sans-serif;
font-size: 28px;
font-weight: 600;
color: #5C4632;
margin-right: 2px;
}
.price_inline_input {
font-family: 'Fredoka', sans-serif;
font-size: 28px;
font-weight: 600;
color: #5C4632;
background: transparent;
border: 2px solid transparent;
border-radius: 8px;
padding: 4px 8px;
width: 80px;
text-align: center;
cursor: pointer;
transition: all 0.15s ease;
}
.price_inline_input:hover {
background: rgba(143, 209, 106, 0.15);
border-color: #c5e8a8;
}
.price_inline_input:focus {
outline: none;
background: #fff;
border-color: #8fd16a;
cursor: text;
box-shadow: 0 0 0 3px rgba(143, 209, 106, 0.25);
}
.game_list li span { .game_list li span {
font-family: 'Fredoka', sans-serif; font-family: 'Fredoka', sans-serif;
font-size: 16px; font-size: 16px;
@ -185,8 +276,8 @@ body {
} }
canvas { canvas {
width: 1200px; max-width: 100%;
height: 500px; height: auto;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
pointer-events: none; pointer-events: none;
@ -796,3 +887,18 @@ canvas {
transform: translateY(2px); transform: translateY(2px);
box-shadow: 0 2px 0 #3f7a33; box-shadow: 0 2px 0 #3f7a33;
} }
/* Responsive adjustments for tablets */
@media (max-width: 768px) {
.game_header_title {
font-size: 36px;
}
.game_section > p {
font-size: 22px;
}
.dashboard {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
}

Write Preview
Loading…
Cancel
Save