biovisualize/index.html

## index.html
<!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>

<body>
    <div class="view-container">
        <div class="info-container"></div>
    </div>
    <div class="widget-container">
        <div class="widget-choices"></div>
    </div>
    <script>

    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>
	<!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>

	<body>
	<div class="view-container">
	<div class="info-container"></div>
	</div>
	<div class="widget-container">
	<div class="widget-choices"></div>
	</div>
	<script>

	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>