Emo Test Trainers

Проект для тестирования тренажеров ЭМО.

Как запустить

1. Клонируйте или загрузите архивом этот проект.

2. Откройте папку dist в редакторе Visual Studio Code.

3. Установить расширение Live Server для Visual Studio Code.

4. Нажмите правой кнопкой мыши на файл index.html и выберите пункт Open with Live Server.

5. Если всё выполнено правильно, откроется окно для запуска тренажёра в браузере.

6. Если у вас в тренажёре не загружаются картинки - Откройте папку dist в редакторе Visual Studio Code, а не папку с репозиторием

Куда загружать тренажёр

Разработка ведется в папке assets.

Папка обязательно должна содержать:

1. index.html - файл, который будет запускаться в iframe.
2. params.json - файл настроек и параметров для тренажера. Один и тот же код можно запускать с разными параметрами, это позволяет создавать сразу несколько разных тренажеров для пользователей.

А также стили, скрипты, изображения и любые другие файлы, которые нужны для тренажера.

Описание params.json

смотри строчку TrainerInfo

Требования к тренажёру

Код тренажера запускаетться внутри iframe. Тренажёр взаимодействует c ЭМО через Window: message event. Внутри event любого сообщения передается объект data следующего вида:

"data": {
  "type": string,
  "value": object
}

type - тип сообщения (запроса или ответа) value - любая информация, которая передается в запросе или ответа

Сообщения, которые тренажёр отправляет родительскому окну

Cмотри типы с приставкой ParentReceives

Cписок типов

Сообщения, которые родительское окно отправляет тренажеру

Cмотри типы с приставкой ChildReceives

Cписок типов

Пример кода

const post = (message) => {
    if (DEBUG) console.log('post(message)', message);
    if (window.parent === window) return;
    window.parent.postMessage(message, '*');
}

window.addEventListener('load', () => {
    window.addEventListener('message', (e) => {
        switch (e.data.message) {
            case 'instance':
                const colors = e.data.colors;
                const instance = e.data.instance;
                startGame(instance, colors);
                break;
            case 'replay':
                const colors = e.data.colors;
                const replay = e.data.instance;
                startReplay(replay, colors);
                break;
        }
    });
    post({ message: 'load' });
})

Как редактировать эмулятор

Код эмулятора в папке repo.

1. Перейдите в папку cd repo

2. Установите зависимости npm i --force

3. Запусите проект npm run start

4. Появится ошибка при первом запуске - закомментируй строку с ошибкой

5. Код компонента в папке app, код примера тренажера в папке assets

6. После завершения работы выполните сборку проекта npm run build