Задача «Приключения Аркадия в Тайплэнде»

Перед выполнением задания внимательно прочитайте:

Настройка IDE

WebStorm включает в себя всё необходимое для работы.

Для VSCode рекомендуется установить следующие плагины:

Доступные команды

Запускаются так: npm run <command>

Команда	Действие
build	Компиляция TypeScript кода в JavaScript (в директорию `dist`)
watch	Инкрементальная компиляция в фоновом режиме
start	Запуск скомпилированного решения
test	Запуск скомпилированных тестов
lint	Запуск статического анализатора кода
format	Запуск утилиты форматирования кода

Основное задание

Мы очень хотим, чтобы код вы написали сами, а не пользовались внешними библиотеками.

На выходных Аркадию позвонил друг из Тайплэнда. У него нашлась интересная работа. Друг давно разрабатывает бэкенды и уже успел написать несколько крутых API с данными о погоде и новостях. Но он ничего не смыслит в интерфейсах, поэтому предложил заняться ими нашему герою. Аркадий отправился в незнакомый город. Нужно помочь ему справиться с этой работёнкой.

На планировании друзья решили, что будут разрабатывать две версии интерфейса — мобильную и десктопную. На мобильном экране должна отображаться информация о последнем измерении погоды и последняя новость. Десктопный экран больше, так что он должен показывать 3 последних новости и 2 последних измерения погоды.

Важным архитектурным решением стало применение паттерна "Наблюдатель". Это должно позволить экранам оперативно реагировать на изменения данных и всегда показывать актуальную информацию.

Некоторые договорённости зарисовали на доске и пошли отмечать встречу.

Наутро Аркадий обнаружил, что забыл почти всё о чём они говорили вчера. Вам придётся разобраться.

В директории src вас ждут оставленные наброски приложения. Его составляющие:

state — Сущности отвечающие за состояние приложения
utils — Вспомогательные абстракции
view — "Экраны" приложения

Требования

Интерфейс IObservable нужно реализовать в классе Observable
NewsState и WeatherState должны отдавать только последние новости и погоду
При обновлении данных в хранилищах экраны должны реагировать на изменения
Экраны должны реализовывать интерфейс IView и выводить новые данные с помощью console.log
console.log должен вызываться методом render() только 1 раз
Десктопный экран должен показывать 3 последних новости и 2 последних измерения погоды
Мобильный экран должен показывать последнее измерение погоды и последнюю новость
Новости выводятся в формате [${time}] ${category} - ${title}
Погода выводится в формате [${time}] ${temperature} C, ${pressure} P, ${humidity} U
Метод render() у экранов должен выводить контент обёрнутый в блок <div> с соответствующими классами mobile и desktop. Пример вывода:
```
<div class="mobile">
[12:00] JavaScript - Как использовать декораторы с фабричными функциями в JavaScript
[14:00] -7.2 C, 756.4 P, 76 U
</div>
```

Примеры можно посмотреть в index.ts и открытых тестах в директории __tests__.

Дополнительное задание (+10 к скорости работы)

Бывает так, что источник данных сбоит и повторно отправляет одни и те же объекты, а render() – дорогая операция. Избавьтесь от лишних вызовов метода render(), реализовав в экранах поверхностное сравнение новых данных с теми, которые были показаны во время прошлого вызова.

Выставлять isStar теперь нужно в src/config.ts

LizaGin / typescript-task-1