let currentScrollRef = "" // ref of the scroll currently displayed 

function RenderScroll() {
    const scroll = JSON.parse(document.querySelector("#Unity-Data-Interface").dataset.scrollDynamic);
    console.log(scroll.requiredFacts);
    const scrollContainer = document.querySelector("#scrollContainer");

    // replace the description if the scroll changed, otherwise only its content needs update
    if (scroll.ref != currentScrollRef) {
        currentScrollRef = scroll.ref;
        scrollContainer.innerHTML = scroll.description;
    }

    // go through the facts in the scroll, show their labels and add dropzones
    scroll.requiredFacts.forEach(fact => {
        $("[data-slot-id='" + fact.ref.uri + "']")
            .text(fact.label)
            .attr("dropzone", "copy")
            //.attr("data-fact-id", fact.df == null ? "" : fact.df.ref.uri)
    })

    // acquired facts only need updated labels
    scroll.acquiredFacts.forEach(fact => {
        $("[data-solution-id='" + fact.ref.uri + "']")
            .text(fact.label)
    })
    console.log(scroll.label + 'Scroll rendered')
}


$(function () {
    RenderScroll()
});