GitHub - xeon-git/reactInspector

О проекте

React Inspector — это универсальный проект, первичная цель которого состоит в упрощении взаимодействия с компонентной средой любого реакт приложения/игры с пользователем

Пример реализации проекта показан на игре "Танки Онлайн", продвинутые пользователи могут адаптировать этот проект под любые другие, внеся небольшие изменения

(Важное примечание: автор проекта не несет ответственность за дальнейшее использование/модификации со злым умыслом)

Участвовали в разработке

Логистика, дизайн и концепция в целом: VK | DS - .hierophant.
Тестирование проекта, дизайн, идеи: VK | DS - opium5834
Тестирование проекта, идеи: VK | DS - neontechfox

Установка для браузера

Установите/обновите расширение Tampermonkey: жмать сюда
Установите/обновите скрипт с реакт инспектором: жмать сюда
Перезагрузите вкладку с приложением/игрой, если она открыта

Горячие клавиши

F9 - Показ/скрытие меню с различными видами поиска
F1 - Вывод в консоль компонента с освещением
F7 - Активация сеттинга с освещением на карте
F8 - Активация циклического перемещения источника света
Numpad* - Ручная деактивация всех активных циклов (обычно циклы автоматически чистятся после выхода из битвы)

В планах реализовать/в разработке

Добавить и проработать больше сетов с освещением в игре
Реализация дополнительной секции в меню для лучшего взаимодействия с паттернами и сценариями
Реализация отслеживания компонента (слежка в реалтайме за изменениями внутри объекта)
Реализация условных конструкций в паре с отслеживанием
Перевод массивов с паттернами и сценариями в жсон формат и парсинг в локалсторедж (дополнение к секции меню)
Улучшить логирование и их общую компоновку

Список багов и нюансов, про которые уже известно

Баги с логами

Примеры взаимодействия

Видеодемонстрация работы циклов в сценариях на примере skyboxComponent: жмать сюда

Как это выглядело в массиве сценариев:

export const actions = [
    {
        pattern: 'skyboxComponent',
        keyCode: 104,
        child: '2',
        children: [
            {child: 'number'},
            {child: 'number'},
            {child: 'number', loopValue: '0/100![0.0050](0)'}
        ]
    },
]

loopValue - это циклическое значение, т.е в данном случае задано значение от 0 до 100, с реверсом !, с шагом циклического прохода 0.0050 и задержкой 0 миллисекунд

Как это выглядело в массиве паттернов:

export const patterns = [
    {
        componentName: 'skyboxComponent',
        keyCode: 114,
        depth: 15,
        structure: [
            {type: 'object'},
            {type: 'object', name: 'skybox'},
            {type: 'object', name: 'skybox1'},
            {type: 'string'},
            {type: 'boolean'},
            {type: 'number'},
            {type: 'object'},
            {type: 'object'},
            {type: 'null'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'object'},
            {type: 'boolean'},
            {type: 'null'},
            {type: 'object'},
            {type: 'float32Array'},
            {type: 'float32Array'},
            {type: 'number'},
            {type: 'object'},
            {type: 'object'},
            {type: 'object'},
            {type: 'object'}
        ]
    }
]

Демонстрация работы сценариев без циклов на примере lightComponent:

До использования сценария:

После использования сценария:

Как это выглядело в массиве сценариев:

export const actions = [
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '12',
        children: [
            {child: 'number'},
            {child: 'number'},
            {child: 'number', value: -0.3}
        ]
    },
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '13',
        children: [
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number'}
        ]
    },
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '14',
        children: [
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number'}
        ]
    },
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '11',
        value: [
            {child: 'boolean', value: true}
        ]
    }
]

value - это одиночная смена значений, т.е в данном случае задаются значения с синтаксисом value: -0.3 для различных потомков и их типов

(Примечание: флаг battle: true устанавливается только в том случае, если мы хотим автоматически применить заданный сценарий как только загрузились в битву)

Как это выглядело в массиве паттернов:

export const patterns = [
    {
        componentName: 'lightComponent',
        keyCode: 112,
        depth: 17,
        structure: [
            {type: 'object'},
            {type: 'number'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'object'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean', name: 'toggleLight'},
            {type: 'object', name: 'shadows'},
            {type: 'object', name: 'light'},
            {type: 'object', name: 'light1'},
            {type: 'object'},
            {type: 'number'}
        ]
    },
]

Демонстрация более простой интеракции с потомками без углублений, если они находятся на одном уровне в родителе:

Как это выглядело в массиве сценариев:

export const actions = [
    {
        pattern: 'lightComponent',
        keyCode: 118,
        child: '11',
        value: [
            {child: 'boolean', value: true}
        ]
    },
]

В данном случае мы указываем сразу value без явного указания children как это было с другими примерами, поскольку 11 потомок не является объектом

Демонстрация более сложной интеракции с потомками:

Как это выглядело в массиве cценариев:

export const actions = [
    {
        pattern: 'suppliesComponent',
        keyCode: 97,
        child: '1',
        children: [
            {
                child: 'object',
                children: [
                    {child: 'string', value: "GAYCLEAR"},
                    {child: 'number'},
                        {
                            child: 'object',
                            children: [
                                {child: 'string', value: "GAYCLEAR"},
                                {child: 'number'}
                            ]
                        }
                    ]
                },
                {child: 'object'},
                {child: 'number'},
                {child: 'object'},
                {child: 'boolean'},
                {child: 'number', loopValue: '1611(0)'},
                {child: 'object'}
        ]
    },
]

На данном примере прекрасно видно, что мы проникли во множество вложенностей внутри первого потомока от компонента suppliesComponent и поменяли значения внутри потомков с NUCLEAR на GAYCLEAR

Демонстрация составления паттерна на примере lightComponent: Предположим, что мы наткнулись на объект после тщательного анализа всего древа с его вложенностями, извлекли частичный именной путь o3h_1.n3d_1: После чего мы находим нужный нам компонент: После анализа структуры выведенного компонента мы составляем паттерн на его основе:

Как это выглядело в массиве паттернов:

export const patterns = [
    {
        componentName: 'lightComponent',
        keyCode: 112,
        depth: 17,
        structure: [
            {type: 'object'},
            {type: 'number'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'object'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean', name: 'toggleLight'},
            {type: 'object', name: 'shadows'},
            {type: 'object', name: 'light'},
            {type: 'object', name: 'light1'},
            {type: 'object'},
            {type: 'number'}
        ]
    },
]

Проще говоря: мы основываемся на типах внутри нужного нам компонента и их количестве каждого из типов, при желании присваиваем локальное наименование на ключевых потомков

(Примечание: правильный порядок потомков для дальнейшего взаимодействия через сценарии выстраивается автоматически после корректно составленного и выведенного паттерна в логи)

Список изменений

changelog version 3.4 === 3.5:

Проведен полный рефакторинг важной логики фильтров и алгоритмов поиска
Полноцено реализована вложенность потомков для паттернов
Полноцено реализована вложенность потомков для сценариев
Исправлены проблемы с регистром
Исправлены некоторые проблемы с логами, в целом чутка лучше структурированы
Исправлены проблемы с типами
Оптимизирован поиск, теперь поиск по частичным совпадениям и паттернам стал еще быстрее
Составлен новый паттерн и сценарий к источнику света, т.к его недавно убили сменой структуры рендера

changelog version beta === 3.4:

Проведен неоднократный полный рефакторинг и багфикс проекта
Проект полностью разбит на модули под дальнейшую сборку с заделом на масштабируемость и универсальность
Реализован весьма колхозный но практичный мониторинг состояния битвы для автоматизации применения сценариев (в будущем будет заменен на мониторинг объектов)
Реализовано полноценное меню для различных видов поиска
Реализована функция поиска компонентов по именам
Реализована функция поиска компонентов по индексам
Реализована функция поиска компонентов по значениям
Реализована функция поиска компонентов по частям имени
Реализована функция поиска компонентов по структурным паттернам
Реализована функциональность с паттернами
Реализована функциональность сценариев для более удобного взаимодействия с компонентами, включая множество вложенностей внутри ссылаемого паттерна
Реализовано кэширование для лучшего и более плавного взаимодействия со структурой
Реализован поиск с кастомным выбором глубины для фильтрации лишних и схожих объектов
Реализована возможность пускать в цикл значения для любого типа потомка

(Примечание: да, мне было лень вести полноценную историю версий до недавних пор)

About project

React Inspector — is a universal project whose primary goal is to simplify the interaction with the component environment of any reactive application/game with the user

An example of project realization is shown on the game “Tanki Online”, advanced users can adapt this project for any other by making small changes

(Important note: the author of the project is not responsible for further malicious use/modifications)

Participated in development

Logistics, design and overall concept: VK | DS - .hierophant.
Project testing, design, ideas: VK | DS - opium5834
Project testing, ideas: VK | DS - neontechfox

Browser installation

Install/update the Tampermonkey extension: click here
Install/update the script with react inspector: click here
Reload the application/game tab if it is open

Hotkeys

F9 - Show/hide menu with different search types
F1 - Console output of lighting component
F7 - Activation of setting with lighting on the map
F8 - Activation of light source cycling
Numpad* - Manual deactivation of all active cycles (usually cycles are automatically cleared after exiting the battle)

Planned/in development

Add and work through more sets with lighting in the game
Implement an additional section in the menu for better interaction with patterns and scenarios
Implement component tracking (real-time tracking of changes within an object)
Implementation of conditional constructs paired with tracking
Translation of pattern and script arrays into json format and parsing into localstorege (addition to menu section)
Optimize search algorithms and improve their efficiency even in the deepest structure
Improve logging and their overall layout

List of bugs that are already known about

Bugs with styles in menu
Bugs with logs
Long search and filtering of components on weak devices

Examples of interaction

video demo of how loops work in scripts by example skyboxComponent: click here

What it looked like in the array of scenarios:

export const actions = [
    {
        pattern: 'skyboxComponent',
        keyCode: 104,
        child: '2',
        children: [
            {child: 'number'},
            {child: 'number'},
            {child: 'number', loopValue: '0/100![0.0050](0)'}
        ]
    },
]

loopValue - is a cyclic value, i.e. in this case the value from 0 to 100, reversed !, with cyclic pitch 0.0050 and delay 0 milliseconds

What it looked like in the patterns array:

export const patterns = [
    {
        componentName: 'skyboxComponent',
        keyCode: 114,
        depth: 15,
        structure: [
            {type: 'object'},
            {type: 'object', name: 'skybox'},
            {type: 'object', name: 'skybox1'},
            {type: 'string'},
            {type: 'boolean'},
            {type: 'number'},
            {type: 'object'},
            {type: 'object'},
            {type: 'null'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'object'},
            {type: 'boolean'},
            {type: 'null'},
            {type: 'object'},
            {type: 'float32Array'},
            {type: 'float32Array'},
            {type: 'number'},
            {type: 'object'},
            {type: 'object'},
            {type: 'object'},
            {type: 'object'}
        ]
    }
]

Demonstration of the work of scripts without loops by example lightComponent:

Before using the script:

After using the script:

What it looked like in the array of scenarios:

export const actions = [
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '12',
        children: [
            {child: 'number'},
            {child: 'number'},
            {child: 'number', value: -0.3}
        ]
    },
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '13',
        children: [
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number'}
        ]
    },
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '14',
        children: [
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number', value: 0.87},
            {child: 'number'}
        ]
    },
    {
        pattern: 'lightComponent',
        battle: true,
        keyCode: 118,
        child: '11',
        value: [
            {child: 'boolean', value: true}
        ]
    }
]

value - is a single change of values, i.e. in this case values with the syntax of value: -0.3 for different offspring and their types

(Note: flag battle: true is set only if we want to automatically apply the given script as soon as we have loaded into the battle)

What it looked like in the patterns array:

export const patterns = [
    {
        componentName: 'lightComponent',
        keyCode: 112,
        depth: 17,
        structure: [
            {type: 'object'},
            {type: 'number'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'object'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean', name: 'toggleLight'},
            {type: 'object', name: 'shadows'},
            {type: 'object', name: 'light'},
            {type: 'object', name: 'light1'},
            {type: 'object'},
            {type: 'number'}
        ]
    },
]

Demonstrate easier interaction with descendants without deepening if they are at the same level in the parent:

What it looked like in the array of scenarios:

export const actions = [
    {
        pattern: 'lightComponent',
        keyCode: 118,
        child: '11',
        value: [
            {child: 'boolean', value: true}
        ]
    },
]

In this case, we specify immediately value without explicitly stating children as was the case with the other examples, since 11 descendant is not the subject

Demonstration of a more complex interaction with descendants:

What it looked like in the array of scenarios:

export const actions = [
    {
        pattern: 'suppliesComponent',
        keyCode: 97,
        child: '1',
        children: [
            {
                child: 'object',
                children: [
                    {child: 'string', value: "GAYCLEAR"},
                    {child: 'number'},
                        {
                            child: 'object',
                            children: [
                                {child: 'string', value: "GAYCLEAR"},
                                {child: 'number'}
                            ]
                        }
                    ]
                },
                {child: 'object'},
                {child: 'number'},
                {child: 'object'},
                {child: 'boolean'},
                {child: 'number', loopValue: '1611(0)'},
                {child: 'object'}
        ]
    },
]

In this example, we can perfectly see that we have penetrated many nesting within the first descendant from the component suppliesComponent and changed the values inside the descendants from NUCLEAR to GAYCLEAR

Demonstration of pattern making by example lightComponent: Suppose we came across an object after carefully analyzing the entire tree with its nestings, extracted a partial name path o3h_1.n3d_1: After that we find the component we need: After analyzing the structure of the derived component, we make a pattern based on it:

What it looked like in the patterns array:

export const patterns = [
    {
        componentName: 'lightComponent',
        keyCode: 112,
        depth: 17,
        structure: [
            {type: 'object'},
            {type: 'number'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'object'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean'},
            {type: 'boolean', name: 'toggleLight'},
            {type: 'object', name: 'shadows'},
            {type: 'object', name: 'light'},
            {type: 'object', name: 'light1'},
            {type: 'object'},
            {type: 'number'}
        ]
    },
]

Simply put: we base the types within the component we need and their number of each type, assign local naming on key descendants if desired

(Note: the correct order of descendants for further interaction through scripts is built automatically after a correctly composed and output pattern in logs)

List of changes

changelog version 3.4 === 3.5:

Complete refactoring of important filter logic and search algorithms has been performed
Fully implemented nesting of descendants for patterns
Fully implemented nesting of descendants for scripts
Fixed case problems
Fixed some problems with logs, in general they are a bit better structured
Fixed problems with types
Optimized search, now search by partial matches and patterns is even faster
New pattern and script for the light source has been created, as it was recently killed by changing the rendering structure

changelog version beta === 3.4:

Repeated full refactoring and bugfixing of the project was carried out
The project is fully broken down into modules for future builds with a focus on scalability and versatility.
Implemented a very kolkhozny but practical monitoring of the state of the battle to automate the application of scenarios (in the future will be replaced by object monitoring)
Implemented a full menu for different types of searches
Implemented search function for components by name
Implemented search function for components by indexes
Component search function by values has been implemented
Component search function by name parts is implemented
Function for searching components by structural patterns implemented
Functionality with patterns implemented
Implemented scripting functionality for easier interaction with components, including multiple nesting within a referenced pattern
Implemented caching for better and smoother interaction with the structure
Implemented search with custom depth selection to filter out redundant and similar objects
Implemented the ability to loop values for any type of descendant

(Note: yes, i was too lazy to keep a full-fledged version history until recently)

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
build		build
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
reactInspector.user.js		reactInspector.user.js
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

О проекте

Участвовали в разработке

Установка для браузера

Горячие клавиши

В планах реализовать/в разработке

Список багов и нюансов, про которые уже известно

Примеры взаимодействия

Список изменений

About project

Participated in development

Browser installation

Hotkeys

Planned/in development

List of bugs that are already known about

Examples of interaction

List of changes

About

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

О проекте

Участвовали в разработке

Установка для браузера

Горячие клавиши

В планах реализовать/в разработке

Список багов и нюансов, про которые уже известно

Примеры взаимодействия

Список изменений

About project

Participated in development

Browser installation

Hotkeys

Planned/in development

List of bugs that are already known about

Examples of interaction

List of changes

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Uh oh!

Contributors

Uh oh!

Languages