Roe2js :: Create View Frame

    createViewFrame (id) {

        id = 'viewframe';

        for( let y = 0; y<=7*3+1;y++){
        for( let x = 0; x<=7*3+1;x++){
        for( let z = 0; z <= this.gui; z++ ){

            if(!(( y === 0 )||(y === 7*3+1)||(x === 0)||(x === 7*3+1)))
            {continue;}

            // Step 1: Create the element
            var newElement = document.createElement('div');

            // Step 2: Modify the element (optional)
            // newElement.textContent = "This is a new div element.";

            newElement.style.width = `8px`;
            newElement.style.height = `8px`;

            if ( z === 0 ){
                newElement.style.backgroundColor = `black`;
            }
            if ( z === this.gui ){
                newElement.style.backgroundImage = `url(http://${this.host}/GFX/sel1dash.png)`;

                // newElement.style.filter = 'brightness(0) saturate(100%) invert(1) sepia(1) saturate(10000%) hue-rotate(90deg)';
            }
            newElement.style.position = `absolute`;
            newElement.style.left = `calc(8px * ${x})`;
            newElement.style.top = `calc(8px * ${y})`;
            newElement.className = `${id}`;
            newElement.id = `${id}_${x}_${y}_${z}`;
            newElement.style.zIndex = `${z}`;

            this.spriteManip.subSprite(newElement,'bottom right');

            // Step 3: Append the element to the document
            document.body.appendChild(newElement);

        }}}

        /*

        z = this.gui;

        for( y = 1; y < 7 * 3 + 1; y++ ){

            x = 0;
            element = document.getElementById(`${id}_${x}_${y}_${z}`);
            if(element){
                element.style.backgroundPosition = '0px 8px';
            }

            x = 5 * 3 + 1;
            element = document.getElementById(`${id}_${x}_${y}_${z}`);
            if(element){
                element.style.backgroundPosition = '16px 8px';
            }
        }
        for( x = 1; x < 7 * 3 + 1; x++ ){

            y = 0;
            element = document.getElementById(`${id}_${x}_${y}_${z}`);
            if(element){
                element.style.backgroundPosition = '8px 0px';
            }

            y = 5 * 3 + 1;
            element = document.getElementById(`${id}_${x}_${y}_${z}`);
            if(element){
                element.style.backgroundPosition = '8px 16px';
            }
        }
        */
    }