Хранение данных на клиенте

Цель: получить базовые навыки создания реактивных интерфейсов, изучить работу с server-sent events, освоить использование классов.

Теория для изучения

Функции-конструкторы, вызов функции с new, работу this.
Прототипное наследование/делегирование.
Создание классов и полей, методов в них, аксессоры. Создание экземпляров классов.
Server-sent events, принцип работы, использование с EventSource.
Паттерн наблюдатель.

Источники

Практическая часть

Создайте от ветки main ветку lab6.
Создайте документ html с H1 заголовком «ФИО - Лабораторная работа №6».
Выполните задания описанные ниже и разместите в отдельных секциях с соответствующими подзаголовками.
Проведите ручное тестирование в браузере.
Проверьте валидность HTML и соответствие критериям доступности.
Отформатируйте документы.
Убедитесь, что нет замечаний от ESLint.
Зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab6 в репозиторий на github и откройте pull request на ветку main.

Задания

Версионирование

Вам необходимо реализовать функцию-конструктор VersionManager. Она должна принимать необязательный параметр, представляющий начальную версию в формате MAJOR.MINOR.PATCH (например ‘1.2.4’). Если три составляющие не целые числа, то выбросите исключение “Некорректный формат версии!”. Если исходная версия не указана или представляет собой пустую строку, по умолчанию используйте “0.0.1”.

Объект должен поддерживать следующие методы (помните про свойство prototype), все из которых должны быть цепочечными (кроме release):

major() - увеличить значение MAJOR на 1, установить значение MINOR и PATCH на 0
minor() - увеличить значение MINOR на 1, установить значение PATCH на 0
patch() - увеличить значение PATCH на 1
rollback() - вернуть значения MAJOR, MINOR и PATCH к их значениям до предыдущего вызова major/minor/patch, или выдает исключение с сообщением “Невозможно выполнить откат!”, если нет версии, к которой можно выполнить откат.
release() - возвращает строку в формате MAJOR.MINOR.PATCH.

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

Прямоугольник и квадрат

Реализуйте класс Rectangle с полями ширины и высоты. Добавьте методы для вычисления площади и периметра. Напишите класс Square, который наследуется от Rectangle, но у конструктора только один параметр - длина стороны.

На странице в интерфейс добавьте поля для ввода ширины и высоты и кнопки расчета периметра и площади. Если значения в полях равны, то создается экземпляр квадрата, если нет --- прямоугольника.

Температура

Реализовать класс температуры (Temperature), который принимает значение температуры в градусах Цельсия. Если температура ниже -273.16 или выше 1.41e32, то выбросить исключение о неверном значении. Изменение значения температуры реализовать через сеттер, в котором проводится валидация указанного значения. Реализовать методы для конвертации температуры в градусы Кельвина и Фаренгейта возвращающие число с округлением до двух знаков. Реализовать метод toString, который возвращает строку с указанием температуры в градусах Кельвинах и К. Реализовать два статически метода для сложения и вычитания, которые принимают два экземпляра класса температуры и проверяют, что они относятся к этому классу и возвращают новый экземпляр класса температуры по вычисленному значению.

В интерфейсе создать поля для ввода двух значений температуры в градусах Цельсия, добавить радиокнопки для выбора градусов по Кельвину, Цельсию или Фаренгейту.

Рядом с полями в виде текста указывается введенная температура с округлением до двух знаков после запятой и с учетом выбранной единицы измерения. Если пользователь поменял выбор, то требуется обновить отображение значений.

Также нужны кнопки для сложения и вычитания значений.

Камень-ножницы-бумага

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

Нажатие на кнопку “Следить за играми” создается экземпляр EventSource и начинается обработка поступающих данных. URL для EventSource - http://194.67.93.117:80/rps/stream. Событие: round, данные формата JSON {player1: "Камень"/"Ножницы"/"Бумага", player2: "Камень"/"Ножницы"/"Бумага"}.

Добавьте кнопку “Остановить”, которая закрывает соединение.

Используйте паттерн наблюдатель, созданный через классы для обновления частей страницы по поступающим событиям из SSE.

В инструментах разработчика найдите вкладку Rendering (отрисовка) и поставьте галочку у пункта Paint Flashing. Это позволит вам видеть, что обновляется на вашей странице. Ваша задача чтобы при событии round обновлялись как можно меньшие части интерфейса. Если подкрашивается весь экран или секция с заданием, то это плохо.

Требования к решению

HTML код валиден.
Отсутствуют ошибки ESLint.
Отсутствуют ошибки в консоли браузера при работе с веб-страницей.

Результаты выполнения лабораторной работы

Результаты работы проверены наставником.

Статическая веб-страница на локальной машине, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Вопросы для защиты

Server-sent Events. Принцип работы, заголовки, формат сообщений.
Объект EventSource. Возможности, методы, события.
Идея реактивности при разработке пользовательских интерфейсов.
Шаблон наблюдатель (классы, поля, методы).
Функция-конструктор. Свойство prototype. Создание объекта.
Создание класса, наследование, задача функции super(), создание экземпляра класса.
Поля и методы классов. Приватные поля и методы, статические методы.

06

Classes, SSE