{"_id":"@algoritmika/blockly-games","_rev":"2-f1487fc5d8bd3961661aa53492ae0c27","name":"@algoritmika/blockly-games","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@algoritmika/blockly-games","version":"1.0.0","description":"отрисовка уровней по заданным в админке конфигам, ui-компоненты, игровые механики","main":"./dist/algoritmika-blockly-games.js","scripts":{"prepare":"webpack","test":"cd nightwatch-tests && ../node_modules/nightwatch/bin/nightwatch --test=tests/levels.js --full && cd -","build":"cd web/js/src/ && tar -xf third-party.tar && cd - && cd web/js/lib/ && python build-app.py && cd -"},"author":"","files":["dist"],"license":"ISC","devDependencies":{"axios":"^0.17.1","chromedriver":"^2.29.0","exports-loader":"^0.7.0","imports-loader":"^0.8.0","mysql":"^2.13.0","nightwatch":"^0.9.15","nodegit":"^0.20.3","webpack":"^3.11.0"},"dependencies":{"minimist":"^1.2.0"},"_id":"@algoritmika/blockly-games@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"6.9.1","_npmUser":{"name":"algoritmika","email":"jenkins@algoritmika.org"},"dist":{"integrity":"sha512-cSFyZZRC3XGJ2qnE/Lo/GIe5q6s1mXpnl0sTjfGSdqonyOB0rh+DhwyiUaGAn7RiIVI3S8yTVk9B4Cakc+jlWQ==","shasum":"49f11deb23d43ba8e202a3cb14ec62e4137f810b","tarball":"https://registry.npmjs.org/@algoritmika/blockly-games/-/blockly-games-1.0.0.tgz","fileCount":3,"unpackedSize":1214679,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ2iIey+NMh6C8cGU6DQDSIMN5vjgrINGBDwzMOmfIcQIgdxP0CQ0oSfilZCk2iaGBGuUXGJhpQtW3XrV5ikqpD2o="}]},"maintainers":[{"name":"algoritmika","email":"jenkins@algoritmika.org"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blockly-games_1.0.0_1519594924569_0.7772555776863441"},"_hasShrinkwrap":false}},"time":{"created":"2018-02-25T21:42:04.476Z","1.0.0":"2018-02-25T21:42:04.764Z","modified":"2022-04-04T12:52:50.590Z"},"maintainers":[{"name":"algoritmika","email":"jenkins@algoritmika.org"}],"description":"отрисовка уровней по заданным в админке конфигам, ui-компоненты, игровые механики","license":"ISC","readme":"# Фронтенд часть онлайн платформы Алгоритмики\n\nотрисовка уровней по заданным в админке конфигам, ui-компоненты, игровые механики\n\ninspired by Blockly Games, based on Google Blockly & Google Closure Library\n\n## архитектура JS-приложения\n\n**algo** — глобальный неймспейс для всего кода платформы\n\n**algo.App** — основной контроллер приложения\n\n* инициализируется в html\n\n* принимает на вход название механики и конфиг\n\n* содержит всю основную логику работы приложения\n\n* инициализирует все дочерние контроллеры\n\n**algo.Ui** — контроллер view\n\n* инициализирует ui-компоненты\n\n* содержит логику, связанную с ui: генерация текстов, показ попапа правильного типа и т.д.\n\n**algo.ui.Dialog**, **algo.ui.ErrorBubble**, **algo.ui.ControlPanel**... — ui-компоненты\n\n* наследуются от **goog.ui.Component**\n\n* содержат подписку на DOM-события типа кликов, ховеров и т.д., в обработчиках событий обычно содержится отправка своих кастомных событий\n\n* не должны содержать никакой логики (должны быть максимально «тупыми»)\n\n**algo.games.Maze**, **algo.games.Turtle**, **algo.games.Fruits**... — игровые механики\n\n* отрисовка карты уровня\n\n* выполнение кода, полученного на основе Blockly\n\n* анимация результата прохождения уровня\n\n* набор отправляемых событий является общим для всех механик и перечислен в файле **algo.games.EventType**\n\n* также есть два обязательных метода для всех механик: **init()** и **reset()** — эти методы дёргаются из **algo.App**\n\n**algo.utils.BlocklyInterface**, **algo.utils.NightwatchTests**, **algo.utils.SvgAnimationFallback**... — классы для работы с внешними/вспомогательными компонентами системы (сюда же будет перенесён компонент для работы со статистикой — **stats-api.js**)\n\n* общение между компонентами системы происходит при помощи событий: все компоненты наследуют класс **goog.events.EventTarget**, экземпляры которого умеют отправлять события и подписываться на них\n\n* исходный код лежит в папке **frontend/js/src/**, структура директорий повторяет структуру неймспейсов (так же как сделано в самой Google Closure Library)\n\n## сборка JS-приложения\n* приложение собирается командой **npm run build** — в папке **frontend/**\n\n* под капотом происходит вызов питоновского файла **frontend/web/js/lib/build-app.py** (наследие Blockly Games)\n\n* при сборке JS-код сжимается Google Closure Compiler'ом в режиме \"advanced\", если сборка прошла без ошибок, то на выходе получается файл **frontend/web/js/compressed.js** — сжатый код для продакшна и **frontend/web/js/uncompressed.js** — для разработки (то, какой файл используется сейчас, определяется в файле **BlocklyGameAsset.php**, в зависимости от переменной **YII_DEBUG**, которая **true** для dev-окружения)\n\n## CSS\n* структура директорий со стилями (**frontend/web/css**) и картинками (**frontend/web/img**) также примерно повторяет структуру неймспейсов JS, например: стили для ui-компонента **algo.ui.Dialog** будут лежать в папке **frontend/web/css/ui/dialog.css**\n\n* сборка CSS в данный момент отсутствует (каждый файл грузится отдельным запросом)\n\n* желательно соблюдать правило «один файл — один ui-компонент»\n\n* слова в названиях css-классов разделяются дефисами\n\n\n## HTML\n* весь html сейчас лежит в php-файлах, в том числе перечень команд для данного уровня (см. **toolbox**)\n\n* в данный момент на каждую механику создаётся свой отдельный php-файл в папке **frontend/views/lesson**, но их отличия минимальны и в будущем файл будет один на все механики\n\n\n# Как добавить новую механику\n1. Создать php-файл для инициализации общего лэйаута механики и прокидывания конфига уровня из админки в js: **frontend/views/lesson/new-mechanics.php** (за основу можно взять **frontend/views/lesson/maze.php**).\n1. Прописать в этот файл название механики, добавить поля в конфиг уровня (если требуется), отредактировать список нужных команд Блокли (см. **toolbox**).\n1. Создать js-файлы c механикой и описанием поведения команд Блокли: **frontend/web/js/src/algo/games/new-mechanics/new-mechanics.js**, **frontend/web/js/src/algo/games/new-mechanics/blocks.js**.\n1. Добавить знание о новой механике в основной файл приложения **frontend/web/js/src/algo/app.js**.\n1. Добавить знание о новой механике в **common/config/params.php**.\n1. Создать новый уровень в админке (http://backoffice.algoritmika.org/admin/level). Лучше взять за основу какой-нибудь существующий и скопировать по id. Указать в конфиге уровня в поле **template** название php-файла из папки **frontend/views/lesson**.\n1. Сохранить и нажать «Проверить уровень» (или «Решение уровня»).\n\n","readmeFilename":"README.md"}