JSFiddle - React, Tailwind, and code Playground

by davecoulter

HTML

<html>
<body>
    <ul id="output" />
</body>
</html>

JavaScript

function Node()
{
    this.name = null;
    this.parent = null;
    this.children = null;
    //An array where frame is the index
    this.hotspots = null;
    
    this.getNodeByName = function(name) {

        var node = null;
        if (this.name === name) {
           node = this;
        } else {
            if (this.children !== null) {
                for(var i = 0; i < this.children.length; i++) {
                    node = this.children[i].getNodeByName(name);
                    if (node !== null) {
                       break;
                    }
                }
            }
        }
        return node;
    };
    
    this.getNavigable = function () {
       var navigable = [];
       
        //Get Parents, Siblings, & Parent's Siblings
        if (this.parent !== null) {
            
            //Parent + Parent's Siblings
            if (this.parent.parent != null) {
                for (var i = 0; i < this.parent.parent.children.length; i++) {
                    navigable.push(this.parent.parent.children[i]);
                }
            }
            
            //Siblings
            if (this.parent.children !== null && this.parent.children.length > 0) {
                for(var i = 0; i < this.parent.children.length; i++) {
                   navigable.push(this.parent.children[i]);
                }
            }
        }
        //Get Children
        if (this.children !== null && this.children.length > 0) {
            for(var i = 0; i < this.children.length; i++) {
               navigable.push(this.children[i]);
            }
        }
        
        return navigable;
    }
}


$(function(){

    //Create Root
    root = new Node;
    root.name = "root";
        
    //Create "Channels"
    channel1 = new Node;
    channel1.name = "channel1";
    channel1.parent = root;
    channel1.hotspots = [ {x: 100, y: 100}, {x: 101, y: 101}, {x: 102, y: 102}];
    
    channel2 = new Node;
    channel2.name = "channel2";
   ...