basic quest

Pour Guigui

by christopheviau

HTML

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

CSS

.view-container {
  min-height: 300px;
  border: 1px solid black;
  padding: 20px;
  font-size: 18px;
  background-color: black;
  color: white;
}

.widget-container {
  padding: 20px;
}

JavaScript

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';