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

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

Подготовка

Изучите функции-конструкторы, вызов функции с new, работу this; прототипное наследование/делегирование; создание классов и полей, методов в них, аксессоры, создание экземпляров классов.

Прочитайте про Server-sent events, его принцип работы, использование с EventSource.

Для создания реактивного интерфейса потребуются знания шаблона наблюдатель и сигнал.

Источники

Выполнение

Как и в прошлых работах, переключитесь на ветку main, cоздайте ветку lab6 и работайте на ней. Создайте документ html с H1 заголовком «ФИО - Лабораторная работа №6. Выполните задания описанные ниже и разместите в отдельных секциях с соответствующими подзаголовками.

Проведите ручное тестирование в браузере, отформатируйте документы, убедитесь, что нет замечаний от ESLint и зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab6 в репозиторий на github.

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

Вам необходимо реализовать функцию-конструктор (не класс) 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://http://95.163.242.125/rps/stream. Событие: round, данные формата JSON {player1: "Камень"/"Ножницы"/"Бумага", player2: "Камень"/"Ножницы"/"Бумага"}.

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

На максимальное число баллов (60 + бонус за сдачу в срок) используйте паттерн сигнал с эффектом для обновления частей страницы по поступающим событиям из SSE. Альтернативный более простой вариант это использовать шаблон наблюдатель.

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

Требования

HTML код валиден.
Весь код отформатирован.
Отсутствуют ошибки ESLint.
Отсутствуют ошибки в консоли браузера при работе с веб-страницей.
Отсутствуют анонимные функции при использовании метода .addEventListener().
Текст в интерфейсе русский.
Отсутствуют ошибки в lighthouse по критерию доступности.

06

Classes, Signals, SSE