JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

dialogue test.<br>
<div id='screen'>
    <div id='characters'></div>
    <div id='name'></div>
    <div id='dialogue'></div>
</div>
<button id='back'>Back</button> <button id='forward'>Forward</button>

Current: <span id='current_part'></span>

JavaScript

var test = [
    {name: "poo", text: "aaaa 1"},
    {name: "pottto", text: "aaaa 2"},
    {name: "poo", text: "aaaa 3"},
    {name: "pottto", text: "aaaa 4"},
    {name: "paaaao", text: "aaaa 5"},
    {name: "rrro", text: "aaaa 6"}
];

var current = 0;

$("#back").click(function(){
    if(current < 1){ return; }
    current -= 1;
    
    renderPart(test[current]);
});

$("#forward").click(function(){
    if((current + 1) == test.length){ return; }
    current += 1;
    
    renderPart(test[current]);
});

function renderPart(part){
    $("#name").html(part.name);
    $("#dialogue").html(part.text);
    
    $("#current_part").html(current);
}