Minimal quest framework

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
    .view-container {
        min-height: 300px;
        border: 1px solid black;
        padding: 20px;
        font-size: 18px;
        background-color: black;
        color: white;
    }

.widget-container {
        padding: 20px;
    }
    </style>
</head>

var infoContainer = document.querySelector('.info-container');
    var widgetMessage = document.querySelector('.widget-message');
    var widgetChoices = document.querySelector('.widget-choices');

var etats = {
        chambreDepart: {
            description: 'Vous vous réveillez dans une chambre obscure.',
            choix: [
                {
                    prochainEtat: 'chambreClaire',
                    transition: 'ouvrirPorteRouge'
                },
                {
                    prochainEtat: 'chambreSombre',
                    transition: 'ouvrirPorteBleue'
                }
            ]
        },
        chambreClaire: {
            description: 'Vous êtes dans la chambre claire.',
            choix: [
                {
                    prochainEtat: 'lectureLivre',
                    transition: 'prendreLivre'
                }
            ]
        },
        chambreSombre: {
            description: 'Il fait trop sombre. Vous êtes mort. Pour rien.',
            choix: []
        },
        lectureLivre: {
            description: 'Le livre est empoisonné. Vous êtes mort.',
            choix: []
        }
    };

var transitions = {
        ouvrirPorteRouge: {
            description: 'Vous ouvrez la porte rouge.'
        },
        ouvrirPorteBleue: {
            description: 'Vous ouvrez la porte bleue.'
        },
        prendreLivre: {
            description: 'Vous prenez le livre.'
        }
    };

function listeChoix(choix){
        var html = '';
        choix.forEach(function(d){
            html += '<a href="#' + d.prochainEtat + '" class="choice">' + transitions[d.transition].description + '</a><br>'
        });
        return html;
    }

window.addEventListener('hashchange', function(d) {
        var hash = window.location.hash.slice(1);
        var etat = etats[hash];
        infoContainer.innerText = etat.description;
        widgetChoices.innerHTML = listeChoix(etat.choix);
    });

window.location.hash = 'chambreDepart';

</script>
</body>

</html>