You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
7.4 KiB
201 lines
7.4 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Lemonade Stand</title> |
|
<link rel="stylesheet" type="text/css" href="style.css" /> |
|
|
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
</head> |
|
|
|
<body> |
|
<header class="game_header"> |
|
<img src="juice.png" class="game_header_icon"> |
|
<h1 class="game_header_title">Lemonade Stand</h1> |
|
</header> |
|
|
|
<div class="dashboard"> |
|
<section class="game_section"> |
|
<h2 class="section_title">Supplies</h2> |
|
|
|
<ul class="game_list"> |
|
<li>Lemons: <span data-bind="supplies.lemons"></span></li> |
|
<li>Sugar: <span data-bind="supplies.sugar"></span></li> |
|
<li>Ice: <span data-bind="supplies.ice"></span></li> |
|
<li>Cups: <span data-bind="supplies.cups"></span></li> |
|
<li>Money: <span data-bind="player_money" data-format="currency"></span></li> |
|
</ul> |
|
|
|
<button class="go_shopping_btn">Go shopping</button> |
|
</section> |
|
|
|
<section class="game_section"> |
|
<h2 class="section_title">Recipe</h2> |
|
<p class="section_hint">Per cup of lemonade</p> |
|
|
|
<ul class="game_list"> |
|
<li>Lemons: <span data-bind="recipe.lemons">0</span></li> |
|
<li>Sugar: <span data-bind="recipe.sugar">0</span></li> |
|
<li>Ice: <span data-bind="recipe.ice">0</span></li> |
|
</ul> |
|
|
|
<button class="change_recipe_btn">Change Recipe</button> |
|
</section> |
|
|
|
<section class="game_section"> |
|
<h2 class="section_title">Total Earnings</h2> |
|
|
|
<p>$0.00</p> |
|
</section> |
|
|
|
|
|
<section class="game_section"> |
|
<h2 class="section_title">Current Price</h2> |
|
|
|
<p data-bind="price_per_cup" data-format="currency"></p> |
|
|
|
<button class="change_price_button">Change Price</button> |
|
</section> |
|
|
|
<section class="game_section weather_section"> |
|
<h2 class="section_title">Weather</h2> |
|
<img class="weather_icon" src="sunny.png" alt="Weather"> |
|
<p class="weather_label" data-bind="weather">sunny</p> |
|
</section> |
|
</div> |
|
|
|
<div class="shopping_modal"> |
|
<div class="shopping_modal_content"> |
|
<div class="shopping_modal_header"> |
|
<h2 class="shopping_modal_title">Shop for Supplies</h2> |
|
<button class="shopping_modal_close">×</button> |
|
</div> |
|
<div class="shopping_modal_body"> |
|
<div class="shop_item"> |
|
<div class="shop_item_info"> |
|
<span class="shop_item_name">Lemons</span> |
|
<div class="shop_tiers"> |
|
<span class="shop_tier">1-50: $0.02</span> |
|
<span class="shop_tier">51-100: $0.018</span> |
|
<span class="shop_tier best">101+: $0.015</span> |
|
</div> |
|
</div> |
|
<input type="number" class="shop_qty_input" data-item="lemons" min="1" value="10"> |
|
<span class="shop_item_price" data-price="lemons">$0.20</span> |
|
<button class="shop_item_btn" data-item="lemons">Buy</button> |
|
</div> |
|
<div class="shop_item"> |
|
<div class="shop_item_info"> |
|
<span class="shop_item_name">Sugar</span> |
|
<div class="shop_tiers"> |
|
<span class="shop_tier">1-50: $0.01</span> |
|
<span class="shop_tier">51-100: $0.009</span> |
|
<span class="shop_tier best">101+: $0.008</span> |
|
</div> |
|
</div> |
|
<input type="number" class="shop_qty_input" data-item="sugar" min="1" value="10"> |
|
<span class="shop_item_price" data-price="sugar">$0.10</span> |
|
<button class="shop_item_btn" data-item="sugar">Buy</button> |
|
</div> |
|
<div class="shop_item"> |
|
<div class="shop_item_info"> |
|
<span class="shop_item_name">Ice</span> |
|
<div class="shop_tiers"> |
|
<span class="shop_tier">1-100: $0.01</span> |
|
<span class="shop_tier">101-300: $0.009</span> |
|
<span class="shop_tier best">301+: $0.008</span> |
|
</div> |
|
</div> |
|
<input type="number" class="shop_qty_input" data-item="ice" min="1" value="50"> |
|
<span class="shop_item_price" data-price="ice">$0.50</span> |
|
<button class="shop_item_btn" data-item="ice">Buy</button> |
|
</div> |
|
<div class="shop_item"> |
|
<div class="shop_item_info"> |
|
<span class="shop_item_name">Cups</span> |
|
<div class="shop_tiers"> |
|
<span class="shop_tier">1-100: $0.01</span> |
|
<span class="shop_tier best">101+: $0.009</span> |
|
</div> |
|
</div> |
|
<input type="number" class="shop_qty_input" data-item="cups" min="1" value="25"> |
|
<span class="shop_item_price" data-price="cups">$0.25</span> |
|
<button class="shop_item_btn" data-item="cups">Buy</button> |
|
</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">×</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">×</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> |
|
<script type="module" src="index.js"></script> |
|
</body> |
|
|
|
</html>
|
|
|