Tibia Wiki:Hot Cuisine Calculator System/Codigo

 <div class="hot-cuisine-panel">
    <div class="hot-cuisine-loading">
        <img src="https://www.tibiawiki.com.br/images/c/ce/The_Epic_Wisdom.gif" /><br />
        <label>Loading...</label>
        <span>@TibiaWiki</span>
    </div>
    <div class="hot-cuisine-players-panel">
        <h2>Hot Cuisine</h2>
        <div class="hot-cuisine-players-input-box">
            <label for="hot-cuisine-players-quantity-input">Quantidade de Personagens:</label>
            <input class="text-center" type="number" id="hot-cuisine-players-quantity-input" min="1" value="1">
        </div>
        <div class="hot-cuisine-players-list-box">
            <label for="hot-cuisine-players-list-select">Personagens:</label>
            <select id="hot-cuisine-players-list-select" type="text" size="10">
            </select>
        </div>
        <div class="hot-cuisine-players-input-box">
            <label for="hot-cuisine-players-name-input">Nome do Personagem:</label>
            <input type="text" id="hot-cuisine-players-name-input" value="Player 1" placeholder="Nome do Personagem...">
        </div>
        <div class="hot-cuisine-checkbox-boxes-flex">
            <div class="hot-cuisine-checkbox-box">
                <input id="hot-cuisine-checkbox-first-time" type="checkbox">
                <label for="hot-cuisine-checkbox-first-time">Primeira vez</label>
            </div>
            <div class="hot-cuisine-checkbox-box">
                <input id="hot-cuisine-checkbox-player-done" type="checkbox">
                <label for="hot-cuisine-checkbox-player-done">Terminado</label>
            </div>
        </div>
        <button onclick="deletAllPlayers()">deletar personagens</button>
    </div>
    <div class="hot-cuisine-foods-panel">
        <h2>Foods</h2>
        <div class="hot-cuisine-checkbox-box">
            <input id="hot-cuisine-checkbox-select-all-food" type="checkbox">
            <label for="hot-cuisine-checkbox-select-all-food">Selecionar todas as Foods</label>
        </div>
        <div class="hot-cuisine-foods-list">
        </div>
    </div>
    <div class="hot-cuisine-selected-player-foods-panel">
        <h2>Foods Selecionados</h2>
        <label class="hot-cuisine-selected-player-label">Player: </label>
        <div class="hot-cuisine-selected-player-foods-list">
        </div>
    </div>
    <div class="hot-cuisine-all-ingredients-list">
        <h2>Todos os Ingredientes</h2>
        <div class="hot-cuisine-checkbox-box">
            <input id="hot-cuisine-checkbox-select-show-all-ingredients" type="checkbox">
            <label for="hot-cuisine-checkbox-select-show-all-ingredients">Mostrar todos Ingredientes</label>
        </div>
        <div class="hot-cuisine-all-ingredients-list-items">
        </div>
    </div>
</div>

    .hot-cuisine-panel {
        display: flex;
        max-width: 1200px;
        /* max-height: 500px; */
        position: relative;
        border: 2px solid #a2a9b1;
        background: #ffffff;
        border-radius: 5px;
        -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: black;
    }
    .hot-cuisine-loading {
        z-index: 9999;
        background-color: rgba(255, 255, 255, 0.98);
        display: inline-block;
        border-radius: 3px;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        align-content: center;
        text-align: center;
    }

    .hot-cuisine-loading > label {
        position: relative;
        bottom: 0px;
        text-align: center;     
        font-size: math;
        background: transparent;
    }
    .hot-cuisine-loading > span {
        text-align: center;
        align-content: center;
        background-color: #c7451d;
        height: 32px;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        text-align: center;     
        font-size: math;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    .hot-cuisine-players-panel {
        background-color: #c7451d;
        width: 260px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        padding: 10px 5px 5px 5px;
    }
    .hot-cuisine-players-panel > h2 {
        width: 100%;
        padding-bottom: 10px;
        text-align: center;
        color: white;
        border-bottom: 1px solid black;
        font-family: Verdana, Arial, Times New Roman, sans-serif;
    }
    .hot-cuisine-players-panel > .hot-cuisine-checkbox-boxes-flex {
        display: flex;
    }
    .hot-cuisine-players-panel > button {
        margin-top: 15px;
        width: 100%;
        height: 35px;
        font-weight: bold;
        border-radius: 5px;
        border: 1px solid #eae2e2;
    }
    .hot-cuisine-players-panel > button:hover {
        background-color: #eae2e2;
        border: 1px solid #eae2e2;
    }
    .hot-cuisine-players-input-box {
        height: 55px;
        margin-top: 5px;
    }
    .hot-cuisine-players-input-box > label {
        width: 100%;
        font-weight: bold;
        margin-left: 2px;
        color: white;
    }
    .hot-cuisine-players-input-box > input {
        width: 100%;
        height: 32px;
        margin-top: 5px;
        border: none;
        border-radius: 5px;
        font-weight: bold;
    }
    .hot-cuisine-players-input-box > input.text-center {
        text-align: center;
    }

    .hot-cuisine-players-list-box {
        width: 100%;
        margin-top: 5px;
    }
    .hot-cuisine-players-list-box > label {
        width: 100%;
        font-weight: bold;
        margin-left: 2px;
        color: white;
    }
    .hot-cuisine-players-list-box > select {
        width: 100%;
        margin-top: 5px;
        border: none;
        border-radius: 5px;
        padding: 5px;
    }

    .hot-cuisine-players-list-box > select > option {
        width: 100%;
        height: 15px;
        font-weight: bold;
        font-size: 12px;
    }
    .hot-cuisine-checkbox-box {
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
    }
    .hot-cuisine-checkbox-box > input {
        width: 20px;
        height: 20px;
        margin: 0px;
        border-radius: 5px;
        border: none;
    }
    .hot-cuisine-checkbox-box > label {
        height: 100%;
        margin-left: 5px;
        align-content: center;
        font-weight: bold;
    }
    .hot-cuisine-players-panel > div > .hot-cuisine-checkbox-box > label {
        color: #FFFFFF;
    }

    .hot-cuisine-foods-panel {
        width: 300px;
        margin: 5px 0px 5px 0px;
        padding: 5px;
        border-right: 1px solid #000000;
    }
    .hot-cuisine-foods-panel > h2 {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #000000;
        font-family: Verdana, Arial, Times New Roman, sans-serif;
    }
    .hot-cuisine-foods-panel > .hot-cuisine-checkbox-box > label {
        color: black;
    }
    .hot-cuisine-foods-list {
        width: 100%;
        margin-top: 25px;
    }
    .hot-cuisine-foods-list-item {
        width: 100%;
        display: flex;
    }
    .hot-cuisine-foods-list-item {
        width: 100%;
        display: flex;
        align-content: center;
    }
    .hot-cuisine-foods-list-item > input {
        width: 20px;
        height: 20px;
    }
    .hot-cuisine-foods-list-item > img {
        width: 25px;
        height: 25px;
    }
    .hot-cuisine-foods-list-item > label {
        height: 100%;
        margin-left: 5px;
        align-self: center;
        font-weight: bold;
    }
    .hot-cuisine-selected-player-foods-panel {
        width: 340px;
        margin: 5px 0px 5px 0px;
        padding: 5px;
        border-right: 1px solid #000000;
    }
    .hot-cuisine-selected-player-foods-panel > h2 {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #000000;
        font-family: Verdana, Arial, Times New Roman, sans-serif;
    }
    .hot-cuisine-selected-player-label {
        font-weight: bold;
    }
    .hot-cuisine-selected-player-foods-list {
        width: 100%;
        /* height: 365px; */
        margin-top: 25px;
        overflow: auto;
    }
    .hot-cuisine-selected-player-foods-item-box-header {
        width: 100%;
        height: 55px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eae2e2;
        padding-bottom: 5px;
    }
    .hot-cuisine-selected-player-foods-item-box-header > img {
        width: 25px;
        height: 25px;
    }
    .hot-cuisine-selected-player-foods-item-box-header > label {
        height: 100%;
        width: 200px;
        margin-left: 5px;
        text-align: left;
        align-self: center;
        font-weight: bold;
        align-content: center;

    }
    .hot-cuisine-selected-player-foods-item-box-header > div {
        display: flex;
    }
    .hot-cuisine-selected-player-foods-item-box-header > div > input {
        height: 30px;
        width: 55px;
        margin-left: 5px;
        align-self: center;
        text-align: center;
        font-weight: bold;
        border: 1px solid #eae2e2;
        border-radius: 5px;
    }
    .hot-cuisine-selected-player-foods-item-box-header > div > i {
        display: block;
        height: 30px;
        width: 40px;
        align-self: center;
        align-content: center;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        border: none;
        background-color: transparent;
    }
    .hot-cuisine-selected-player-foods-ingredients-box {
        display: flex;
        flex-shrink: 0;
        width: calc(100% - 20px);
        height: 55px;
        margin: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #eae2e2;
    }
    .hot-cuisine-selected-player-foods-ingredients-box > label {
        display: block;
        width: calc(100% - 85px);
        height: 55px;
        margin: 5px;
        font-weight: bold;
        text-align: center;
        align-content: center;
    }
    .hot-cuisine-selected-player-foods-ingredients-box > button {
        min-width: 30px;
        height: 30px;
        background-color: #c7451d;
        border: 1px solid #000000;
        border-radius: 5px;
        align-self: center;
        font-size: 15px;
        font-weight: bold;
        color: white;
    }
    .hot-cuisine-selected-player-foods-ingredients-box > button:hover {
        background-color: #ff0000;
        font-size: 20px;
        color: #ffbf00;
    }
    .hot-cuisine-selected-player-foods-ingredients-box > div.img-quantity {
        background-color: #f3f3f3;
        display: block;
        text-align: center;
        width: 50px;
        height: 55px;
        border: 1px solid #000000;
        border-radius: 5px;
    }
    .hot-cuisine-selected-player-foods-ingredients-box > div.img-quantity > img {
        margin-top: 4px;
    }
    .hot-cuisine-selected-player-foods-ingredients-box > div.img-quantity > label {
        display: block;
        background-color: #c7451d;
        text-align: center;
        /* margin-top: 4px; */
        width: 100%;
        height: 18px;
        border-top: 1px solid #000000;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        font-weight: bold;
    }
    .hot-cuisine-selected-player-foods-item-box-ingredients {
        display: none;
    }

    .hot-cuisine-all-ingredients-list  {
        width: 300px;
        margin: 5px 0px 5px 0px;
        padding: 5px;
    }
    .hot-cuisine-all-ingredients-list > h2 {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #000000;
        font-family: Verdana, Arial, Times New Roman, sans-serif;
    }
    .hot-cuisine-all-ingredients-list-items {
        width: 100%;
        overflow: auto;
        margin-top: 25px;
    }

    var players = new Array();
    var isLoaded = false;
    var updateQuantityPlayersOnLoad = () => {
        const quantityPlayersInput = document.getElementById('hot-cuisine-players-quantity-input');
        quantityPlayersInput.value = players.length;
    }

    var managePlayerOnList = (value) => {
        if (players.length > value) {
            players.pop(players.length - value);
        }
        for (let i = 0; i < value; i++) {
            if (players.find(iPlayer => iPlayer.id === i) == null) {
                const player = {
                    "id": i,
                    "name": "Player ".concat(i + 1),
                    "isFirstTime": false,
                    "isDone": false,
                    "selected": false,
                    "foods": new Object()
                }
                players.push(player);
            }
        }
        let player = (getSelectedPlayerIndex() === -1) ? setSelectedPlayerIndex(0) : players[getSelectedPlayerIndex()];
        selectPlayerUpdateComponents(player);

        updateSavedPlayers();
    }

    var managerPlayerListOnComponent = (component) => {
        let quantity = parseInt(component.value || 1);
        if (quantity <= 0) {
            component.value = 1;
            quantity = 1;
        }
        managePlayerOnList(quantity);
        createPlayerOnListComponent();
    }

    var createPlayerOnListComponent = () => {
        const playerList = document.getElementById('hot-cuisine-players-list-select');
        if (playerList == null) {
            showAlert();
            return;
        }
        playerList.innerHTML = "";
        for (let i = 0; i < players.length; i++) {
            const option = createPlayerItemListCell(players[i]);
            playerList.appendChild(option);
        }
        if (playerList.children.length == null || playerList.children.length === 0) {
            showAlert();
            return;
        }
        const selectedPlayerIndex = getSelectedPlayerIndex();
        playerList.children[selectedPlayerIndex].setAttribute('selected', true);
    }

    var createPlayerItemListCell = (player) => {
        const option = new Option((player.id + 1).toString().concat(": ").concat(player.name), player.name);
        option.setAttribute('list-index', player.id);
        option.setAttribute('is-first-time', player.isFirstTime);

        return option;
    }

    var selectPlayer = (component) => {
        const listOptions = Array.from(document.getElementsByTagName('option'));
        const selectedOptions = listOptions.filter(op => op.value === component.value);
        if (selectedOptions == null || selectedOptions.length === 0) {
            showAlert();
            return;
        }
        const selectedOption = selectedOptions[0];
        return setSelectedPlayerIndex(selectedOption.getAttribute("list-index"));
    }
    var selectPlayerUpdateComponents = (player) => {
        // Update Componenents
        const inputPlayerName = document.getElementById('hot-cuisine-players-name-input');
        const isFirstTimeCheckbox = document.getElementById('hot-cuisine-checkbox-first-time');
        const isDoneCheckbox = document.getElementById('hot-cuisine-checkbox-player-done');

        inputPlayerName.value = player.name;
        inputPlayerName.setAttribute('selected-player-id', player.id);
        isFirstTimeCheckbox.checked = player.isFirstTime;
        isFirstTimeCheckbox.setAttribute('player-id', player.id);
        isDoneCheckbox.checked = player.isDone;
        isDoneCheckbox.setAttribute('player-id', player.id);

        updateSelectedPlayerLabel(player.name);
    }

    var loadSelecedPlayerFoods = () => {
        const components = document.getElementsByClassName('hot-cuisine-selected-player-foods-list');
        if (components == null || Object.keys(components).length === 0) {
            showAlert();
            return;
        }
        const listDiv = components[0];
        listDiv.innerHTML = "";

        const playerFoods = players[getSelectedPlayerIndex()].foods;
        Object.keys(playerFoods).forEach(foodName => {
            const food = playerFoods[foodName];
            const itemList = createPlayerSelectedFoodsItem(food);
            listDiv.appendChild(itemList);
        });

        loadAllIngredients();
    }

    var changePlayerDataName = (component) => {
        const name = component.value;
        players[getSelectedPlayerIndex()].name = name;

        updateSavedPlayers();
    }

    var updatePlayerDataName = (component) => {
        const name = component.value;

        const listOptions = Array.from(document.getElementsByTagName('option'));
        const selectedOptions = listOptions.filter(op => op.getAttribute('list-index') === component.getAttribute('selected-player-id'));
        if (selectedOptions == null || selectedOptions.length === 0) {
            showAlert();
            return;
        }
        selectedOptions[0].value = name;
        const id = parseInt(component.getAttribute('selected-player-id')) + 1;
        selectedOptions[0].innerText = (id.toString()).concat(': ').concat(name);

        updateSelectedPlayerLabel(name);
    }

    var updateSelectedPlayerLabel = (name) => {
        const labelComponents = document.getElementsByClassName('hot-cuisine-selected-player-label');
        if (labelComponents != null && Object.keys(labelComponents).length === 1) {
            labelComponents[0].innerText =  "Player: ".concat(name);
        }
    }

    var changePlayerDataOptions = (component, type) => {
        const playerIndex = getSelectedPlayerIndex();
        if (type === 'first-time') {
            players[playerIndex].isFirstTime = component.checked;
            Object.keys(players[playerIndex].foods).forEach(foodName => {
                players[playerIndex].foods[foodName].quantity = (isFirstTime()) ? 2 : 1;
            });
        }
        if (type === 'player-done') {
            players[playerIndex].isDone = component.checked;
        }
        updateSavedPlayers();
    }

    var loadFoodsList = (completion) => {
        const components = document.getElementsByClassName('hot-cuisine-foods-list');
        if (components == null || Object.keys(components).length === 0) {
            showAlert();
            return;
        }
        const divFoodList = components[0];
        divFoodList.innerHTML = "";
        for(let i = 0; i < foods.length; i++) {
            const itemList = createFoodItemList(foods[i], i);
            divFoodList.appendChild(itemList);
        }
        if (completion) {
            completion();
        }
    }

    var createFoodItemList = (food, index) => {
        const div = document.createElement('div');
        div.classList.add("hot-cuisine-foods-list-item");

        const checkbox = document.createElement('input');
        checkbox.setAttribute('type', 'checkbox');
        checkbox.setAttribute('id', 'food-'.concat(index));
        checkbox.addEventListener('change', function () {
            setSelectedPlayerFood(food, checkbox);
            selectFoodUpdateComponents(checkbox);
        });

        const img = document.createElement('img');
        img.setAttribute('src', food.image);

        const label = document.createElement('label');
        label.setAttribute('for', 'food-'.concat(index));
        label.innerText = food.name;

        div.appendChild(checkbox);
        div.appendChild(img);
        div.appendChild(label);

        return div;
    }

    var setSelectedPlayerFood = (food, component) => {
        const playerIndex = getSelectedPlayerIndex();
        if (component.checked) {
            food.quantity = isFirstTime() ? 2 : 1;
            players[playerIndex].foods[food.name] = food;
        } else {
            delete(players[playerIndex].foods[food.name]);
        }

        updateSavedPlayers();
    }

    var selectFoodUpdateComponents = (component) => {
        const checkboxSelectAll = document.getElementById('hot-cuisine-checkbox-select-all-food');
        const checkboxFirstTime = document.getElementById('hot-cuisine-checkbox-first-time');
        checkboxSelectAll.checked = false;
        checkboxFirstTime.checked = false;

        loadSelecedPlayerFoods();
    }

    var updateFoodsCheckboxComponents = () => {
        for(let i = 0; i < foods.length; i++) {
            const checked = (players[getSelectedPlayerIndex()].foods[foods[i].name]) ? true : false;
            document.getElementById('food-'.concat(i)).checked = checked;   
        }

        const checkboxSelectAllFood = document.getElementById('hot-cuisine-checkbox-select-all-food');
        checkboxSelectAllFood.checked = foods.length === Object.keys(players[getSelectedPlayerIndex()].foods).length;
    }

    var createPlayerSelectedFoodsItem = (food) => {
        const divBox = document.createElement('div');
        divBox.classList.add('hot-cuisine-selected-player-foods-item-box');

        const divBoxHeader = document.createElement('div');
        divBoxHeader.classList.add('hot-cuisine-selected-player-foods-item-box-header');

        const img = document.createElement('img');
        img.setAttribute('src', food.image);

        const label = document.createElement('label');
        label.innerText = food.name;

        const divBoxQuantityToggle = document.createElement('div');

        const inputQuantity = document.createElement('input');
        inputQuantity.setAttribute('type', 'number');
        inputQuantity.setAttribute('min', 1);
        inputQuantity.setAttribute('max', 2);
        inputQuantity.value = food.quantity;
        inputQuantity.addEventListener('change', function () {
            updateFoodQuantity(inputQuantity, food);
            updateFoodQuantityComponents(inputQuantity, food);
        });

        const iBtn = document.createElement('i');
        iBtn.innerHTML = `<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="#0F0F0F"/>
                </svg>`;
        iBtn.addEventListener('click', function () {
            toggleIngredients(food, iBtn);
        });

        divBoxQuantityToggle.appendChild(inputQuantity);
        divBoxQuantityToggle.appendChild(iBtn);

        divBoxHeader.appendChild(img);
        divBoxHeader.appendChild(label);
        divBoxHeader.appendChild(divBoxQuantityToggle);

        const divBoxIngredients = createPlayerSelectedFoodsIngredientsList(food);

        divBox.appendChild(divBoxHeader);
        divBox.appendChild(divBoxIngredients);

        return divBox;
    }

    var createPlayerSelectedFoodsIngredientsList = (food) => {

        const divList = document.createElement('div');
        divList.id = 'ingrendients-food-'.concat(food.name.toLowerCase().replaceAll(' ', '-'));
        divList.classList.add('hot-cuisine-selected-player-foods-item-box-ingredients');

        food.ingredients.forEach(ingredient => {
            const ingredientDiv = createPlayerSelectedFoodsIngredientsListItem(ingredient, food.quantity);
            divList.appendChild(ingredientDiv);
        });

        return divList;
    }

    var createPlayerSelectedFoodsIngredientsListItem = (ingredient, foodQuantity) => {

        const divItem = document.createElement('div');
        divItem.classList.add('hot-cuisine-selected-player-foods-ingredients-box');

        const divImage = document.createElement('div');
        divImage.classList.add('img-quantity');

        const img = document.createElement('img');
        img.setAttribute('src', ingredientes[ingredient.name].image);
        img.setAttribute('alt', ingredient.name);

        const labelQuantity = document.createElement('label');
        labelQuantity.innerText = ingredient.quantity * foodQuantity;

        const lanelName = document.createElement('label');
        lanelName.innerText = ingredient.name;

        divImage.appendChild(img);
        divImage.appendChild(labelQuantity);

        divItem.appendChild(divImage);
        divItem.appendChild(lanelName);

        return divItem;
    }

    var selectAllFood = (component) => {
        const playerSelectedIndex = getSelectedPlayerIndex();

        if (component.checked) {
            foods.forEach(food => {
                const playerFood = { ...food };
                if (players[playerSelectedIndex].foods[food.name] == null) {
                    playerFood.quantity = (isFirstTime()) ? 2 : 1;
                    players[playerSelectedIndex].foods[food.name] = playerFood;
                }
            });
        } else {
            players[playerSelectedIndex].foods = new Object();
        }
        updateSavedPlayers();
    }

    var selectAllFoodUpdateComponents = (component) => {
        for (let i = 0; i< foods.length; i++) {
            document.getElementById('food-'.concat(i)).checked = component.checked;
        }
        loadSelecedPlayerFoods();
    }

    var updateFoodQuantity = (component, food) => {
        let quantity = component.value || 1;
        if (quantity < 1) {
            quantity = 1;
        }
        if (quantity > 2) {
            quantity = 2;
        }
        players[getSelectedPlayerIndex()].foods[food.name].quantity = quantity;

        updateSavedPlayers();
    }

    var loadAllIngredients = () => {
        const components = document.getElementsByClassName('hot-cuisine-all-ingredients-list-items');
        if (components == null || Object.keys(components).length === 0) {
            showAlert();
            return;
        }
        const component = components[0];
        component.innerHTML = "";

        const allIngredients = getAllInngredientsFromPlayers();
        Object.keys(allIngredients).forEach(ingredient => {
            const item = createIngredientsItemBox(allIngredients[ingredient]);
            component.appendChild(item);
        });
    }

    var createIngredientsItemBox = (ingredient) => {

        const divItem = document.createElement('div');
        divItem.classList.add('hot-cuisine-selected-player-foods-ingredients-box');

        const divImage = document.createElement('div');
        divImage.classList.add('img-quantity');

        const img = document.createElement('img');
        img.setAttribute('src', ingredientes[ingredient.name].image);
        img.setAttribute('alt', ingredient.name);

        const labelQuantity = document.createElement('label');
        labelQuantity.innerText = ingredient.quantity;

        const labelName = document.createElement('label');
        labelName.innerText = ingredient.name;

        const buttonRemove = document.createElement('button');
        buttonRemove.setAttribute('title', 'Remover Ingrediente da Lista.');
        buttonRemove.innerText = '✕';
        buttonRemove.addEventListener('click', function () {
            removeItemFromIngredientsList(divItem);
        });

        divImage.appendChild(img);
        divImage.appendChild(labelQuantity);

        divItem.appendChild(divImage);
        divItem.appendChild(labelName);
        divItem.appendChild(buttonRemove);

        return divItem;
    }

    var removeItemFromIngredientsList = (component) => {
        component.style.display = 'none';
    }

    var updateFoodQuantityComponents = (component, food) => {
        const divId = food.name.toLowerCase().replaceAll(' ', '-');
        const bodyDiv = document.getElementById('ingrendients-food-'.concat(divId));

        for(let i = 0; i < food.ingredients.length; i++) {
            bodyDiv.children[i].children[0].children[1].innerText = food.ingredients[i].quantity * component.value;
        }
        loadAllIngredients();
    }

    var toggleIngredients = (food, btn) => {
        const divId = food.name.toLowerCase().replaceAll(' ', '-');
        const bodyDiv = document.getElementById('ingrendients-food-'.concat(divId));

        const currentDisplay = bodyDiv.style.display;

        bodyDiv.style.display = (currentDisplay === '' || currentDisplay === 'none') ? 'block' : 'none';

        const btnIcon = (bodyDiv.style.display === '' || bodyDiv.style.display === 'none') ? `<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="#0F0F0F"/>
                </svg>` : `<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z" fill="#0F0F0F"/>
                </svg>`;
        btn.innerHTML = btnIcon;
    }

    var loadAllItens = async (completion) => {
        let baseURL = '';
        $('.hot-cuisine-loading label').text('Loading Imbuements and Itens for You, Adventurer!...');
        await Promise.all([
            loadData(baseURL, 'foods', 'HotCuisineFoods'),
            loadData(baseURL, 'ingredientes', 'HotCuisineIngredientes')
        ]).then((results) => {
            console.log("Load Done!");
            loadFoodsList();
            completion();
            $('.hot-cuisine-loading')[0].style.display = 'none';
        }).catch((error) => {
            showAlert();
            console.error('Error:', error);
        });
    }

    var loadData = async (baseURL, varName, path) => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: baseURL + '/index.php?title=Tibia_Wiki:' + path + '/json&action=raw',
                contentType: 'text/plain; charset=utf-8',
                type: 'GET',
                success: function(data) {
                    callbacks(data.replace(/<pre id="[^"]*">/gi, '').replace(/<\/pre>/gi, ''), varName);
                    resolve('Loaded: ' + varName);
                },
                error: function(error) {
                    // console.error(error);
                    reject(error);
                }
            });
        });
    }

    var showAlert = (message) => {
        alert(message || "Desculpe pela inconveniência!\n\nAlgo deu errado. Por favor, recarregue a página.");
    }

    var getSelectedPlayerIndex = () => {
        const playerSelected = players.find(player => player.selected);
        return players.indexOf(playerSelected);
    }
    var setSelectedPlayerIndex = (currentIndex) => {
        const beforeIndex = getSelectedPlayerIndex();
        if (beforeIndex > -1) {
            players[beforeIndex].selected = false;
        }
        players[currentIndex].selected = true;
        updateSavedPlayers();
        return players[currentIndex];
    }

    var getAllInngredientsFromPlayers = () => {
        const allIngredients = new Object();
        players.forEach(player => {
            const playerFoods = player.foods;
            Object.keys(playerFoods).forEach(foodName => {
                playerFoods[foodName].ingredients.forEach(ingredient => {
                    const food = playerFoods[foodName];
                    let quantity =  ingredient.quantity;
                    if (food.quantity > 1) {
                        if (ingredient.name === 'Meat') {
                            console.log(quantity);
                        }
                        quantity += quantity;
                    }
                    if (allIngredients[ingredient.name] == null) {
                        allIngredients[ingredient.name] = new Object();
                        allIngredients[ingredient.name].name = ingredient.name;
                        allIngredients[ingredient.name].quantity = 0
                    }
                    allIngredients[ingredient.name].quantity = allIngredients[ingredient.name].quantity + quantity;
                });
            });
        });
        return allIngredients;
    }

    var showAllIngredients = (isShow) => {
        let contentHeight = document.getElementsByClassName('hot-cuisine-foods-list')[0].offsetHeight.toString().concat('px');
        if (isShow) {
            contentHeight = null;
        }
        document.getElementsByClassName('hot-cuisine-selected-player-foods-list')[0].style.height = contentHeight;
        document.getElementsByClassName('hot-cuisine-all-ingredients-list-items')[0].style.height = contentHeight;
        console.log(contentHeight);
        console.log(document.getElementsByClassName('hot-cuisine-selected-player-foods-list')[0].style.height);
        console.log(document.getElementsByClassName('hot-cuisine-all-ingredients-list-items')[0].style.height);
    }

    var isFirstTime = () => {
        const playerIndex = getSelectedPlayerIndex();
        return players[playerIndex].isFirstTime;
    }

    /* Players Hot Cuisine */
    const hotCuisinePlayersKey = "tw-hot-cuisine-players";
    var updateSavedPlayers = () => {
        savePlayers();
    }
    var savePlayers = () => {
        let data = JSON.stringify(players);
        localStorage.setItem(hotCuisinePlayersKey, data);
    }

    var getPlayers = () => {
        const data = localStorage.getItem(hotCuisinePlayersKey);
        if (data != null && data.length > 0) {
            let savedPlayers = JSON.parse(data);
            return savedPlayers;
        }
        return new Array();
    }

    var deletePlayers = () => {
        localStorage.removeItem(hotCuisinePlayersKey);
    }

    var callbacks = (codigo, varName) => {
        if (codigo == null) {
            codigo = "";
        } else {
            console.log('Loaded:', varName);
            window[varName] = JSON.parse(codigo);
        }
    }

    var deletAllPlayers = () => {
        deletePlayers();
        players = getPlayers();
        const quantityPlayersInput = document.getElementById('hot-cuisine-players-quantity-input');
        updateQuantityPlayersOnLoad();
        managerPlayerListOnComponent(quantityPlayersInput);
        loadSelecedPlayerFoods();
        updateFoodsCheckboxComponents();
    }

    var addEventListeners = () => {
        // Quantity Players
        const quantityPlayersInput = document.getElementById('hot-cuisine-players-quantity-input');
        quantityPlayersInput.addEventListener('input', () => {
            managerPlayerListOnComponent(quantityPlayersInput);
        });
        managerPlayerListOnComponent(quantityPlayersInput);

        const playerSelect = document.getElementById('hot-cuisine-players-list-select');
        playerSelect.addEventListener('change', function() {
            const player = selectPlayer(playerSelect);
            selectPlayerUpdateComponents(player);
            loadSelecedPlayerFoods();
            updateFoodsCheckboxComponents();
        }, false);
        loadSelecedPlayerFoods();
        updateFoodsCheckboxComponents();

        const inputPlayerName = document.getElementById('hot-cuisine-players-name-input');
        inputPlayerName.addEventListener('input', () => {
            changePlayerDataName(inputPlayerName);
            updatePlayerDataName(inputPlayerName);
        });

        const isFirstTimeCheckbox = document.getElementById('hot-cuisine-checkbox-first-time');
        isFirstTimeCheckbox.addEventListener('change', function() {
            changePlayerDataOptions(isFirstTimeCheckbox, 'first-time');
            loadSelecedPlayerFoods();
        }, false);
        const isDoneCheckbox = document.getElementById('hot-cuisine-checkbox-player-done');
        isDoneCheckbox.addEventListener('change', function() {
            changePlayerDataOptions(isDoneCheckbox, 'player-done');
        }, false);

        const checkboxSelectAll = document.getElementById('hot-cuisine-checkbox-select-all-food');
        checkboxSelectAll.addEventListener('change', function() {
            selectAllFood(checkboxSelectAll);
            selectAllFoodUpdateComponents(checkboxSelectAll);
        }, false);

        const checkboxShowAllIngredients = document.getElementById('hot-cuisine-checkbox-select-show-all-ingredients');
        checkboxShowAllIngredients.addEventListener('change', function() {
            showAllIngredients(checkboxShowAllIngredients.checked);
        }, false);
    }
    $(document).ready(function () {
        loadAllItens(function () {
            loadFoodsList();
            players = getPlayers();
            updateQuantityPlayersOnLoad();
            addEventListeners();
        });
        const foodLists = document.getElementsByClassName('hot-cuisine-foods-list');
        const foodList = foodLists[0];
        /*const observer = new MutationObserver(function(mutationsList) {
           for (const mutation of mutationsList) {
              if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                 showAllIngredients(false);
              }
           }
        });*/

        const observer = new ResizeObserver(entries => {
            for (let entry of entries) {
                 if (!isLoaded && document.getElementsByClassName('hot-cuisine-foods-list')[0].offsetHeight >= 370) {
                     isLoaded = true;
                     showAllIngredients(false);
                 }
            }
        });

        observer.observe(foodList, { childList: true });
    });