Добавляем в мод Scratch 3 вывод на сцене значений свойств спрайта

Когда на глаза попадается очередная платформа блочного программирования типа Scratch, то в голове возникает один и тот же вопрос: почему они до сих пор не дополнены текстовым программированием?

Когда мы находимся на сцене, то для просмотра свойств объекта (спрайта) приходится использовать глобальные переменные и обмен сообщениями. Но гораздо удобнее было бы выводить значения свойств прямо на сцену, например, в верхнюю её часть:

В прошлый раз мы написали расширение, выполняющего код JavaScript. Теперь нам осталось добавить в него пару блоков для создания информационной панели и отображения на ней значения свойства выбранного спрайта. Для чего она нужна, если на сцену можно поместить нужные блоки для мониторинга значений? Эти блоки мониторинга работают локально в режиме работы со спрайтом. А наша панель будет отображать информацию глобально независимо от того, в каком объекте будет находится скрипт.

Блоки имеют разную конфигурацию параметров и стыков. С параметрами всё просто — нам необходимо задать количество и тип параметров.

Информационная панель будет находиться на холсте сцене. Для этого нужно указать класс родительского элемента, в котором отображается элемент canvas

Блок отображения значения свойства спрайта состоит из двух текстовых полей для ввода имени спрайта и имен свойств в формате JSON.

Помимо этого нужно задаётся тип блока «command» для того, чтобы его можно было присоединять к другим блокам.

class ScratchJS {
    constructor(runtime) {
        this.runtime = runtime
        window.runtime = runtime;
    }
    
    getInfo() {
        return {
            "id": "SimpleGamepad",
            "name": "SimpleGamepad",
            "blocks": [
                {
                    "opcode": "jsEval",
                    "blockType": "reporter",
                    "text": "eval js code from [data]",
                    "arguments": {
                        "data": {
                            "type": "string",
                            "defaultValue": 'alert(12)'
                        },
                    }
                },
                {
                    "opcode": 'createInfoPanel',
                    "blockType": "command",
                    "text": "создать инфо панель [data]",
                    "arguments": {
                        "data": {
                            "type": "string",
                            "defaultValue": ".stage_stage_1fD7k.box_box_2jjDp"
                        },
                    }
                },
                {
                    "opcode": 'showPropValue',
                    "blockType": "command",
                    "text": "спрайт [sprite] свойство [proper]",
                    "arguments": {
                        "sprite": {
                            "type": "string",
                            "defaultValue": 'Спрайт 1'
                        },
                        "proper": {
                            "type": "string",
                            "defaultValue": '{"X":"x","Y":"y","↔":"size","∠":"direction","→":"tempo","👚":"currentCostume","👁":"visible","🔈":"volume" }'
                        }
                    }
                },
            ],
        };
    }
    
    jsEval({data}) {

let result = '';

try{
            result = eval(data);

}catch(e){}

return result;
    }

createInfoPanel({data}){
        
        var parent = document.querySelector(data); 
        var el = document.createElement('div'); 
        el.style = "position:absolute";
        el.innerText = 'Панель';
        parent.insertBefore(el, parent.firstChild);
        window.infoPanel = el;
    }

showPropValue({sprite,proper}){
        
        var result = [];
        var obj = window.runtime.targets;
        for(let i in obj){
            if(obj[i].sprite.name == sprite){

var props = JSON.parse(proper);
                for(let p in props){
                    result.push(p + ': ' + obj[i][props[p]]);
                }
                window.infoPanel.innerHTML = result.join(" ");
                result = window.infoPanel.innerHTML;
                break;
            }
        }
        return result;
    }
}

(function() {
    var extensionInstance = new ScratchJS(window.vm.extensionManager.runtime)
    var serviceName = window.vm.extensionManager._registerInternalExtension(extensionInstance)
    window.vm.extensionManager._loadedExtensions.set(extensionInstance.getInfo().id, serviceName)
})()

Для обновления данных в информационной панели можно, например, использовать таймер с интервалом 1 секунда.