JSFiddle - React, Tailwind, and code Playground

HTML

<div id="game">
    <p id="texte"></p>
    <ul>
    </ul>
</div>

JavaScript

var GameStates = {
    "debut": {
        texte: "Début",
        actions: {
            "milieu1": "Choix numéro 1",
            "milieu2": "Choix numéro 2",            
        }            
    },
    "milieu1": {
        texte: "Scène 1",
        actions: {
            "milieu2": "Action 1",
            "gameover": "Action 2",
            "gagne": "Action 3",
        }            
    },
    "milieu2": {
        texte: "Scène 2",
        actions: {
            "milieu1": "Bouton 1",            
            "gameover": "Bouton 2",
        }            
    },
    "gameover": {
        texte: "Perdu",
        actions: {            
            "debut": "Recommencer",            
        }            
    },
    "gagne": {
        texte: "Gagné",
        actions: {
            "debut": "Recommencer",
        }            
    },    
};

var currentState;

function afficherEtape(etape){
    currentState = GameStates[etape];
    document.getElementById("texte").textContent = currentState.texte;
    var listeActions = document.querySelector("#game ul");
    listeActions.innerHTML=""; //vide la liste précédente
    for(var action in currentState.actions){
        var li = document.createElement("li");
        var bouton = document.createElement("input");
        bouton.setAttribute("type", "button");        
        bouton.value = currentState.actions[action];
        bouton.onclick = (function(){
            afficherEtape(this);
        }).bind(action);
        li.appendChild(bouton);
        listeActions.appendChild(li);
    }
}
    
afficherEtape("debut");