[Solução] Mudar a cor do Robotron.

Demorou, até eu desenvolver a lógica por trás do conceito do código, foram uns bons minutos, demorou mas não desistir;

HTML:

<section class="robotron">
            <img class="robo" src="img/Robotron 2000 - Azul.png" id="robotron">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>

            <div class="botao">
                <button class="prox" data-botao="&gt;">&gt;</button>
                <!-- ------------------ -->
                <button class="ant" data-botao="&lt;">&lt;</button>
            </div>
</section>

CSS: obs. não minto que o css tá um tanto sujo ksksks

.botao{
    position: relative;
    top: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 5em;
    margin-right: 9em;
}

.prox,
.ant{
    font-size: 2em;
    text-transform: uppercase;
    padding: 0.2em 1em;
    float: right;
    border: 3px solid var(--main-branco);
    background: var(--main-branco);

    cursor: pointer;
}

.prox:hover{
    background: var(--main-preto);
            color: var(--main-branco)
}
.ant:hover{
    background: var(--main-preto);
    color: var(--main-branco);
    
}

JS:

const imgRobo = [
    'img/Robotron 2000 - Amarelo.png', 
    'img/Robotron 2000 - Branco.png', 
    'img/Robotron 2000 - Preto.png', 
    'img/Robotron 2000 - Rosa.png', 
    'img/Robotron 2000 - Vermelho.png'
];

const botao = document.querySelectorAll('[data-botao]');
const robo = document.querySelector('.robo');
let valorAtual = 0;

botao.forEach( (elemento) => {
    elemento.addEventListener('click', (evento) => {
        const parametro = (evento.target.textContent);
        mudarRobo(parametro);
    })
});

function mudarRobo (evento) {
    if (evento === ">") {
        valorAtual = (valorAtual + 1) % imgRobo.length;
        robo.src = imgRobo[valorAtual];
    } else {
        valorAtual = (valorAtual - 1 + imgRobo.length) % imgRobo.length;
        robo.src = imgRobo[valorAtual]
    }
};