53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
let jsonContent = [];
|
|
|
|
function printChoices(node) {
|
|
if (node.choices) {
|
|
return node.choices.forEach(choice => {
|
|
const newBtn = document.createElement('button');
|
|
newBtn.onclick = () => selectChoice(choice.id);
|
|
newBtn.innerHTML = choice.text;
|
|
newBtn.classList.add('choice-btn');
|
|
document.getElementById('choices').appendChild(newBtn);
|
|
});
|
|
}
|
|
}
|
|
|
|
function selectChoice(choiceId) {
|
|
console.log('Click on choice ', choiceId);
|
|
const allChoices = jsonContent.flatMap(node =>
|
|
!node.choices ? [] : node.choices
|
|
);
|
|
const selectedChoice = allChoices.find(choice => choice.id === choiceId);
|
|
const nextNode = jsonContent.find(node => node.id === selectedChoice.nextNode);
|
|
|
|
addChoiceToHistory(selectedChoice);
|
|
updateActiveNode(nextNode);
|
|
}
|
|
|
|
function addChoiceToHistory(selectedChoice) {
|
|
const choiceDiv = document.createElement('div');
|
|
choiceDiv.innerHTML = selectedChoice.text;
|
|
choiceDiv.classList.add('choice-div');
|
|
document.getElementById('history').appendChild(choiceDiv);
|
|
}
|
|
|
|
function updateActiveNode(node) {
|
|
const nodeDiv = document.createElement('div');
|
|
nodeDiv.innerHTML = node.text;
|
|
nodeDiv.classList.add('node-div');
|
|
document.getElementById('history').appendChild(nodeDiv);
|
|
|
|
document.getElementById('choices').innerHTML = '';
|
|
printChoices(node);
|
|
}
|
|
|
|
window.onload = () => {
|
|
fetch('/nodes', {
|
|
method: 'GET'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
jsonContent = data;
|
|
updateActiveNode(jsonContent[0]);
|
|
});
|
|
} |