<table class="main_table">
<tr>
<td style="height: 30px;" colspan="2">
<div id="title" class="titulo">Hot Cuisine Calculator System</div>
</td>
</tr>
<tr>
<td>
<table style="width:100%;height:40px;">
<tr>
<td style="width: 48%; vertical-align: top;">
<table style="width:100%;">
<tr>
<td>
<div id="title" class="titulo">Foods:</div>
<div id="foodSelect"></div>
</td>
</tr>
</table>
</td>
<td style="width: 48%; vertical-align: top;">
<table style="height:100%;">
<tr>
<td style="height: 60px; vertical-align: top;">
<div class="titulo">Quantidade de Personagens:</div>
<input type="number" id="qtdPlayers" name="qtdPlayers" value="1" min="1" oninput="updateQuantity()">
</td>
</tr>
<tr>
<td style="width: 48%; vertical-align: top;">
<div class="titulo">Ingredientes:</div>
<div class="ingredients-list" style="max-height: 257px; overflow: auto; vertical-align: top;">
<table style="max-width: 100%; max-height: 238px; overflow:auto;"><tbody id="ingredients"></tbody></table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
.main_table {
border: #7B6E4C 1px solid;
background: #181E23;
margin: 2px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
font-family: Verdana, Arial, Times New Roman, sans-serif;
font-size: 13px;
color: #B2A898;
}
.titulo {
position: relative;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
padding: 0 auto;
height: 24px;
line-height: 24px;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: default;
}
.quantity-box {
position: relative;
width: 34px;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
height: 15px;
line-height: 15px;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: default;
}
.title-box {
position: relative;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
line-height: 50px;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: default;
height: 56px;
width: 100%;
}
#qtdPlayers {
background: #11161A;
width: 273px;
height: 18px;
margin: 5px 0px 0 2px;
padding: 1px 1px 1px 1px;
border: #CBB47A 1px solid;
border-collapse: separate;
font-family: Verdana, Arial, Times New Roman, sans-serif;
font-size: 13px;
color: #B2A898;
}
label {
background: transparent;
font-family: Verdana, Arial, Times New Roman, sans-serif;
font-size: 13px;
color: #B2A898;
display: inline-table;
}
#foodSelect, .ingredients-list {
background: #11161A;
margin: 5px 2px 2px 2px;
padding: 10px;
border: #CBB47A 1px solid;
border-collapse: separate;
}
input[type=checkbox] {
width: 15px;
height: 15px;
}
.ingrendient {
position: relative;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
padding: 0 auto;
height: 32px;
width: 32px;
text-align: center;
cursor: default;
}
.image-box {
position: relative;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
padding: 0 auto;
height: 34px;
width: 34px;
text-align: center;
cursor: default;
}
.ingrendient {
margin: 0 auto;
width: 34px;
}
#qtdPlayers {
border: #7B6E4C 1px solid;
background: #3d5361;
height: 18px;
line-height: 18px;
text-align: center;
display: inline-block;
vertical-align: top;
white-space: nowrap;
font-family: Verdana, Arial, Times New Roman, sans-serif;
font-size: 13px;
color: #B2A898;
}
/* Tooltip */
.tip2 {
background-color: #F2F2F2;
border-radius: 2px;
box-shadow: 0 0 6px #B2B2B2;
display: none;
position: absolute;
padding: 10px;
z-index: 1;
}
.tooltip {
position: relative;
}
.tooltip,
.tooltip:hover + .tip2,
.tip2:hover {
display: block;
}
var version = "1.0";
const ingredients = {
"Meat": {
"link": "https://www.tibiawiki.com.br/wiki/Meat",
"image": "https://www.tibiawiki.com.br/images/5/58/Meat.gif"
},
"Potato": {
"link": "https://www.tibiawiki.com.br/wiki/Potato",
"image": "https://www.tibiawiki.com.br/images/f/fa/Potato.gif"
},
"Onion": {
"link": "https://www.tibiawiki.com.br/wiki/Onion",
"image": "https://www.tibiawiki.com.br/images/5/57/Onion.gif"
},
"Bulb of Garlic": {
"link": "https://www.tibiawiki.com.br/wiki/Bulb_of_Garlic",
"image": "https://www.tibiawiki.com.br/images/6/63/Bulb_of_Garlic.gif"
},
"Flour": {
"link": "https://www.tibiawiki.com.br/wiki/Flour",
"image": "https://www.tibiawiki.com.br/images/1/13/Flour.gif"
},
"Beer": {
"link": "https://www.tibiawiki.com.br/wiki/Beer",
"image": "https://www.tibiawiki.com.br/images/8/8b/Beer.gif"
},
"Hydra Tongue": {
"link": "https://www.tibiawiki.com.br/wiki/Hydra_Tongue",
"image": "https://www.tibiawiki.com.br/images/4/44/Hydra_Tongue.gif"
},
"Tomato": {
"link": "https://www.tibiawiki.com.br/wiki/Tomato",
"image": "https://www.tibiawiki.com.br/images/0/06/Tomato.gif"
},
"Cucumber": {
"link": "https://www.tibiawiki.com.br/wiki/Cucumber",
"image": "https://www.tibiawiki.com.br/images/5/51/Cucumber.gif"
},
"Egg": {
"link": "https://www.tibiawiki.com.br/wiki/Egg",
"image": "https://www.tibiawiki.com.br/images/e/ed/Egg.gif"
},
"Troll Green": {
"link": "https://www.tibiawiki.com.br/wiki/Troll_Green",
"image": "https://www.tibiawiki.com.br/images/e/e4/Troll_Green.gif"
},
"Wine": {
"link": "https://www.tibiawiki.com.br/wiki/Wine",
"image": "https://www.tibiawiki.com.br/images/1/15/Wine.gif"
},
"Bat": {
"link": "https://www.tibiawiki.com.br/wiki/Bat",
"image": "https://www.tibiawiki.com.br/images/0/09/Bat.gif"
},
"Jalapeño Pepper": {
"link": "https://www.tibiawiki.com.br/wiki/Jalapeño_Pepper",
"image": "https://www.tibiawiki.com.br/images/d/d7/Jalape%C3%B1o_Pepper.gif"
},
"Brown Bread": {
"link": "https://www.tibiawiki.com.br/wiki/Brown_Bread",
"image": "https://www.tibiawiki.com.br/images/4/47/Brown_Bread.gif"
},
"Powder Herb": {
"link": "https://www.tibiawiki.com.br/wiki/Powder_Herb",
"image": "https://www.tibiawiki.com.br/images/e/e4/Powder_Herb.gif"
},
"Red Mushroom": {
"link": "https://www.tibiawiki.com.br/wiki/Red_Mushroom",
"image": "https://www.tibiawiki.com.br/images/9/96/Red_Mushroom.gif"
},
"Chicken": {
"link": "https://www.tibiawiki.com.br/wiki/Chicken",
"image": "https://www.tibiawiki.com.br/images/a/a0/Chicken.gif"
},
"Lemon": {
"link": "https://www.tibiawiki.com.br/wiki/Lemon",
"image": "https://www.tibiawiki.com.br/images/c/c2/Lemon.gif"
},
"Orange": {
"link": "https://www.tibiawiki.com.br/wiki/Orange",
"image": "https://www.tibiawiki.com.br/images/4/40/Orange.gif"
},
"Mango": {
"link": "https://www.tibiawiki.com.br/wiki/Mango",
"image": "https://www.tibiawiki.com.br/images/f/f2/Mango.gif"
},
"Coconut Milk": {
"link": "https://www.tibiawiki.com.br/wiki/Coconut_Milk",
"image": "https://www.tibiawiki.com.br/images/e/e4/Coconut_Milk.gif"
},
"Stone Herb": {
"link": "https://www.tibiawiki.com.br/wiki/Stone_Herb",
"image": "https://www.tibiawiki.com.br/images/d/da/Stone_Herb.gif"
},
"Bar of Chocolate": {
"link": "https://www.tibiawiki.com.br/wiki/Bar_of_Chocolate",
"image": "https://www.tibiawiki.com.br/images/c/c4/Bar_of_Chocolate.gif"
},
"Cream Cake": {
"link": "https://www.tibiawiki.com.br/wiki/Cream_Cake",
"image": "https://www.tibiawiki.com.br/images/9/97/Cream_Cake.gif"
},
"Banana": {
"link": "https://www.tibiawiki.com.br/wiki/Banana",
"image": "https://www.tibiawiki.com.br/images/4/4f/Banana.gif"
},
"Milk": {
"link": "https://www.tibiawiki.com.br/wiki/Milk",
"image": "https://www.tibiawiki.com.br/images/4/43/Milk.gif"
},
"Sling Herb": {
"link": "https://www.tibiawiki.com.br/wiki/Sling_Herb",
"image": "https://www.tibiawiki.com.br/images/7/72/Sling_Herb.gif"
},
"Star Herb": {
"link": "https://www.tibiawiki.com.br/wiki/Star_Herb",
"image": "https://www.tibiawiki.com.br/images/c/c5/Star_Herb.gif"
},
"Carrot": {
"link": "https://www.tibiawiki.com.br/wiki/Carrot",
"image": "https://www.tibiawiki.com.br/images/b/b5/Carrot.gif"
},
"Corncob": {
"link": "https://www.tibiawiki.com.br/wiki/Corncob",
"image": "https://www.tibiawiki.com.br/images/9/9b/Corncob.gif"
},
"Cheese": {
"link": "https://www.tibiawiki.com.br/wiki/Cheese",
"image": "https://www.tibiawiki.com.br/images/6/6a/Cheese.gif"
},
"White Mushroom": {
"link": "https://www.tibiawiki.com.br/wiki/White_Mushroom",
"image": "https://www.tibiawiki.com.br/images/e/ed/White_Mushroom.gif"
},
"Brown Mushroom": {
"link": "https://www.tibiawiki.com.br/wiki/Brown_Mushroom",
"image": "https://www.tibiawiki.com.br/images/e/ef/Brown_Mushroom.gif"
},
"Shadow Herb": {
"link": "https://www.tibiawiki.com.br/wiki/Shadow_Herb",
"image": "https://www.tibiawiki.com.br/images/1/15/Shadow_Herb.gif"
},
"Mead": {
"link": "https://www.tibiawiki.com.br/wiki/Mead",
"image": "https://www.tibiawiki.com.br/images/c/c1/Mead.gif"
},
"Ham": {
"link": "https://www.tibiawiki.com.br/wiki/Ham",
"image": "https://www.tibiawiki.com.br/images/e/e8/Ham.gif"
},
"Plum": {
"link": "https://www.tibiawiki.com.br/wiki/Plum",
"image": "https://www.tibiawiki.com.br/images/4/48/Plum.gif"
},
"Beetroot": {
"link": "https://www.tibiawiki.com.br/wiki/Beetroot",
"image": "https://www.tibiawiki.com.br/images/f/f0/Beetroot.gif"
},
"Pumpkin": {
"link": "https://www.tibiawiki.com.br/wiki/Pumpkin",
"image": "https://www.tibiawiki.com.br/images/c/cc/Pumpkin.gif"
},
"Northern Pike": {
"link": "https://www.tibiawiki.com.br/wiki/Northern_Pike",
"image": "https://www.tibiawiki.com.br/images/8/83/Northern_Pike.gif"
},
"Rainbow Trout": {
"link": "https://www.tibiawiki.com.br/wiki/Rainbow_Trout",
"image": "https://www.tibiawiki.com.br/images/5/51/Rainbow_Trout.gif"
},
"Green Perch": {
"link": "https://www.tibiawiki.com.br/wiki/Green_Perch",
"image": "https://www.tibiawiki.com.br/images/2/27/Green_Perch.gif"
},
"Shrimp": {
"link": "https://www.tibiawiki.com.br/wiki/Shrimp",
"image": "https://www.tibiawiki.com.br/images/8/8c/Shrimp.gif"
},
"Roll": {
"link": "https://www.tibiawiki.com.br/wiki/Roll",
"image": "https://www.tibiawiki.com.br/images/8/8f/Roll.gif"
},
"Fern": {
"link": "https://www.tibiawiki.com.br/wiki/Fern",
"image": "https://www.tibiawiki.com.br/images/5/5c/Fern.gif"
},
"Cookie": {
"link": "https://www.tibiawiki.com.br/wiki/Cookie",
"image": "https://www.tibiawiki.com.br/images/4/42/Cookie.gif"
},
"Peanut": {
"link": "https://www.tibiawiki.com.br/wiki/Peanut",
"image": "https://www.tibiawiki.com.br/images/4/43/Peanut.gif"
},
"Rice Ball": {
"link": "https://www.tibiawiki.com.br/wiki/Rice_Ball",
"image": "https://www.tibiawiki.com.br/images/0/00/Rice_Ball.gif"
},
"Sandcrawler Shell": {
"link": "https://www.tibiawiki.com.br/wiki/Sandcrawler_Shell",
"image": "https://www.tibiawiki.com.br/images/6/65/Sandcrawler_Shell.gif"
},
"Water": {
"link": "https://www.tibiawiki.com.br/wiki/Water",
"image": "https://www.tibiawiki.com.br/images/6/6a/Water_%28L%C3%ADquido%29.gif"
},
"Candy": {
"link": "https://www.tibiawiki.com.br/wiki/Candy",
"image": "https://www.tibiawiki.com.br/images/a/a7/Candy.gif"
},
"Candy Cane": {
"link": "https://www.tibiawiki.com.br/wiki/Candy_Cane",
"image": "https://www.tibiawiki.com.br/images/0/0d/Candy_Cane.gif"
},
"Gingerbreadman": {
"link": "https://www.tibiawiki.com.br/wiki/Gingerbreadman",
"image": "https://www.tibiawiki.com.br/images/4/4e/Gingerbreadman.gif"
},
"Flask of Demonic Blood": {
"link": "https://www.tibiawiki.com.br/wiki/Flask_of_Demonic_Blood",
"image": "https://www.tibiawiki.com.br/images/8/8c/Flask_of_Demonic_Blood.gif"
},
"Honeycomb": {
"link": "https://www.tibiawiki.com.br/wiki/Honeycomb",
"image": "https://www.tibiawiki.com.br/images/3/3e/Honeycomb.gif"
},
"Bottle of Bug Milk": {
"link": "https://www.tibiawiki.com.br/wiki/Bottle_of_Bug_Milk",
"image": "https://www.tibiawiki.com.br/images/e/e6/Bottle_of_Bug_Milk.gif"
},
"Bottle of Bug Milk": {
"link": "https://www.tibiawiki.com.br/wiki/Bottle_of_Bug_Milk",
"image": "https://www.tibiawiki.com.br/images/e/e6/Bottle_of_Bug_Milk.gif"
},
"Blessed Wooden Stake": {
"link": "https://www.tibiawiki.com.br/wiki/Blessed_Wooden_Stake",
"image": "https://www.tibiawiki.com.br/images/7/75/Blessed_Wooden_Stake.gif"
}
}
const foods = [
{
"name": "Rotworm Stew",
"ingredients": [
{
"name": "Meat",
"quantity": 2
},
{
"name": "Potato",
"quantity": 20
},
{
"name": "Onion",
"quantity": 1
},
{
"name": "Bulb of Garlic",
"quantity": 1
},
{
"name": "Flour",
"quantity": 5
},
{
"name": "Beer",
"quantity": 2
}
]
},
{
"name": "Hydra Tongue",
"ingredients": [
{
"name": "Hydra Tongue",
"quantity": 2
},
{
"name": "Tomato",
"quantity": 2
},
{
"name": "Cucumber",
"quantity": 1
},
{
"name": "Egg",
"quantity": 2
},
{
"name": "Troll Green",
"quantity": 1
},
{
"name": "Wine",
"quantity": 1
}
]
},
{
"name": "Roasted Dragon Wings",
"ingredients": [
{
"name": "Bat",
"quantity": 1
},
{
"name": "Jalapeño Pepper",
"quantity": 3
},
{
"name": "Brown Bread",
"quantity": 5
},
{
"name": "Egg",
"quantity": 2
},
{
"name": "Powder Herb",
"quantity": 1
},
{
"name": "Red Mushroom",
"quantity": 5
}
]
},
{
"name": "Tropical Fried Terrorbird",
"ingredients": [
{
"name": "Chicken",
"quantity": 1
},
{
"name": "Lemon",
"quantity": 2
},
{
"name": "Orange",
"quantity": 2
},
{
"name": "Mango",
"quantity": 2
},
{
"name": "Coconut Milk",
"quantity": 2
},
{
"name": "Stone Herb",
"quantity": 1
}
]
},
{
"name": "Banana Chocolate Shake",
"ingredients": [
{
"name": "Bar of Chocolate",
"quantity": 1
},
{
"name": "Cream Cake",
"quantity": 1
},
{
"name": "Banana",
"quantity": 2
},
{
"name": "Milk",
"quantity": 2
},
{
"name": "Sling Herb",
"quantity": 1
},
{
"name": "Star Herb",
"quantity": 1
}
]
},
{
"name": "Veggie Casserole",
"ingredients": [
{
"name": "Carrot",
"quantity": 2
},
{
"name": "Tomato",
"quantity": 2
},
{
"name": "Corncob",
"quantity": 2
},
{
"name": "Cucumber",
"quantity": 2
},
{
"name": "Onion",
"quantity": 1
},
{
"name": "Bulb of Garlic",
"quantity": 1
},
{
"name": "Cheese",
"quantity": 1
},
{
"name": "White Mushroom",
"quantity": 20
},
{
"name": "Brown Mushroom",
"quantity": 5
}
]
},
{
"name": "Filled Jalapeño Peppers",
"ingredients": [
{
"name": "Jalapeño Pepper",
"quantity": 10
},
{
"name": "Cheese",
"quantity": 2
},
{
"name": "Troll Green",
"quantity": 1
},
{
"name": "Shadow Herb",
"quantity": 1
},
{
"name": "Mead",
"quantity": 1
},
{
"name": "Egg",
"quantity": 2
}
]
},
{
"name": "Blessed Steak",
"ingredients": [
{
"name": "Ham",
"quantity": 1
},
{
"name": "Plum",
"quantity": 5
},
{
"name": "Onion",
"quantity": 1
},
{
"name": "Beetroot",
"quantity": 2
},
{
"name": "Pumpkin",
"quantity": 1
},
{
"name": "Jalapeño Pepper",
"quantity": 2
}
]
},
{
"name": "Northern Fishburger",
"ingredients": [
{
"name": "Northern Pike",
"quantity": 1
},
{
"name": "Rainbow Trout",
"quantity": 1
},
{
"name": "Green Perch",
"quantity": 1
},
{
"name": "Shrimp",
"quantity": 5
},
{
"name": "Roll",
"quantity": 2
},
{
"name": "Fern",
"quantity": 1
}
]
},
{
"name": "Carrot Cake",
"ingredients": [
{
"name": "Carrot",
"quantity": 5
},
{
"name": "Milk",
"quantity": 1
},
{
"name": "Lemon",
"quantity": 1
},
{
"name": "Flour",
"quantity": 10
},
{
"name": "Egg",
"quantity": 2
},
{
"name": "Cookie",
"quantity": 10
},
{
"name": "Peanut",
"quantity": 2
}
]
},
{
"name": "Coconut Shrimp Bake",
"ingredients": [
{
"name": "Coconut Milk",
"quantity": 5
},
{
"name": "Brown Mushroom",
"quantity": 5
},
{
"name": "Red Mushroom",
"quantity": 5
},
{
"name": "Rice Ball",
"quantity": 10
},
{
"name": "Shrimp",
"quantity": 10
}
]
},
{
"name": "Pot of Blackjack",
"ingredients": [
{
"name": "Sandcrawler Shell",
"quantity": 5
},
{
"name": "Water",
"quantity": 2
},
{
"name": "Carrot",
"quantity": 20
},
{
"name": "Potato",
"quantity": 10
},
{
"name": "Jalapeño Pepper",
"quantity": 3
}
]
},
{
"name": "Demonic Candy Balls",
"ingredients": [
{
"name": "Candy",
"quantity": 3
},
{
"name": "Candy Cane",
"quantity": 3
},
{
"name": "Bar of Chocolate",
"quantity": 2
},
{
"name": "Gingerbreadman",
"quantity": 15
},
{
"name": "Flask of Demonic Blood",
"quantity": 1
}
]
},
{
"name": "Sweet Mangonaise Elixir",
"ingredients": [
{
"name": "Egg",
"quantity": 40
},
{
"name": "Mango",
"quantity": 20
},
{
"name": "Honeycomb",
"quantity": 10
},
{
"name": "Gingerbreadman",
"quantity": 15
},
{
"name": "Bottle of Bug Milk",
"quantity": 1
},
{
"name": "Blessed Wooden Stake",
"quantity": 1
}
]
}
];
const selectedFoods = [];
// Popula o Select de Items.
var populateFoodSelect = () => {
$("#foodSelect").empty();
if (foods != null) { // Verifica se a lista de itens não é nula
let id = 0;
foods.forEach( (item) => {
$("#foodSelect").append("<input type=\"checkbox\" id=\"food-" + id + "\" name=\"" + item.name + "\" value=\"" + item.name + "\" checked=\"true\" onchange=\"updateIngredients(this)\"><label for=\"food-" + id + "\"> " + item.name + "</label><br>");
id++;
selectedFoods.push(item);
});
updateIngredientsGreed();
}
};
var updateIngredients = (checkbox) => {
let food = foods.find(food => food.name == checkbox.value);
if (checkbox.checked) {
console.log(food.name + " added to List.");
selectedFoods.push(food);
} else {
let index = selectedFoods.map(sFood => sFood.name).indexOf(food.name);
if (index > -1) { // only splice array when item is found
selectedFoods.splice(index, 1); // 2nd parameter means remove one item only
console.log(food.name + " removed from List.");
}
}
updateIngredientsGreed();
}
var updateQuantity = () => {
updateIngredientsGreed();
}
var updateIngredientsGreed = () => {
let ingredientsList = {};
selectedFoods.forEach((food) => {
food.ingredients.forEach((ingredient) => {
let mIngrediente = ingredientsList[ingredient.name];
if (mIngrediente == null) {
ingredientsList[ingredient.name] = ingredient.quantity;
} else {
ingredientsList[ingredient.name] = mIngrediente + ingredient.quantity;
}
});
});
updateList(ingredientsList);
};
var updateList = (list) => {
let ingredientsListSorted = Object.entries(list).sort(([a,], [b,]) => {
const nameA = a.toLowerCase();
const nameB = b.toLowerCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
document.getElementById("ingredients").innerHTML = "";
let quantity = Number(document.getElementById("qtdPlayers").value);
ingredientsListSorted.forEach((item) => {
let key = item[0];
let value = item[1];
$("#ingredients").append("<tr><td><div class=\"image-box\"><span class=\"tooltip\"><img style=\"width: 34px; height 34px;\" src=\""+ ingredients[key].image + "\" /></span><span class=\"tip2\" id=\"fonte3\"><a href=\"" + ingredients[key].link + "\" target=\"blank\">" + key + "</a></span></div><label class=\"quantity-box\">" + (Number(value) * quantity) + "</label></td><td style=\"width: 100%;\"><label class=\"title-box\">" + key + "</label></td></tr>")
});
}
$(document).ready(function() {
$("#title").text("Hot Cuisine Calculator System - " + version);
populateFoodSelect();
});
