Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Código javascript com controle de botão Peças Decremento e Inicar produção

  1. No código javascript foi incluído algoritmo para controlar o decremento das peças, para o Robotrom não aceitar valores negativos.
  2. Também foi adicionado evento para o botão submit "iniciar produção" para que dê o reload na página zerando os valores das peças.
  3. Foi adicionado código javascript para não alterar os valores da estatísticas caso as peças estiverem com o valor zero.
  4. Foi adicionado algoritmo javascript que ao clicar no sinal menos ele decrementa a estatística.

Link para publicação Robotrom 2000

Segue o código abaixo para quem quiser olhar.

const buttons = document.querySelectorAll("[data-controle]");
const statistics  = document.querySelectorAll("[data-estatistica]");
const btnReload = document.querySelector('#producao');


const parts = {
    "bracos": {
        "forca": 29,
        "poder": 35,
        "energia": -21,
        "velocidade": -5
    },

    "blindagem": {
        "forca": 41,
        "poder": 20,
        "energia": 0,
        "velocidade": -20
    },
    "nucleos":{
        "forca": 0,
        "poder": 7,
        "energia": 48,
        "velocidade": -24
    },
    "pernas":{
        "forca": 27,
        "poder": 21,
        "energia": -32,
        "velocidade": 42
    },
    "foguetes":{
        "forca": 0,
        "poder": 28,
        "energia": 0,
        "velocidade": -2
    }
}


// Utilizando foreach javascript
buttons.forEach( (btn)=>{
    var componentValue = 0;
    btn.addEventListener('click', (event)=>{
        componentValue = equalizeRobotrom(event.target.dataset.controle, event.target.parentNode);

        //Três parametros: sinal + ou -  ,  componente/peça  , valor atual da peça
        updateStats(event.target.dataset.controle, event.target.dataset.peca, componentValue);
    });
});


btnReload.addEventListener('click', ()=>{
    location.reload();
});



function equalizeRobotrom(operator, parent){
    const comp = parent.querySelector("[data-contador]");
    var controlValue = parseInt(comp.value);

    if(operator === '-' & controlValue > 0){
            comp.value = controlValue - 1;
    }else if(operator === '+'){
        comp.value = controlValue + 1;
    }
    //Retorna o valor atual da peça para: se "0" bloquea o decremnto da estatistica.
    return parseInt(comp.value);
}

function  updateStats(operator, part, componentValue){
    //else if(componentValue > 0) Se a peça tiver o valor "0", clicando não pode alterar a estatistica.
    statistics.forEach((element)=>{
        if(operator === '+'){
            element.textContent = parseInt(element.textContent) + parts[part][element.dataset.estatistica];
        }else if(componentValue > 0){
            element.textContent = parseInt(element.textContent) - parts[part][element.dataset.estatistica];
        }
    });

}

1 resposta
solução!

Oi Juliano, tudo bem?

Muito obrigada por compartilhar com a gente o seu código :D. Ele tá super completinho e super incrível.

Muito legal que você explicou tudo o que tem no código.

Sinta-se sempre livre para postar aqui suas sugestões.

Um abraço e bons estudos.