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

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

О проекте #

Настало время оцифровать еще одну игру. В этом проекте ты познакомишься с React — библиотекой, на которой пишут современные веб-приложения такие как: запрещенные в РФ Facebook и Instagram, Airbnb, Netflix и даже Telegram. Разберёшься, как хранить данные, управлять состоянием и стилизовать интерфейс без CSS.

После этого урока ты не просто создашь игру, но и поймешь, как работают современные инструменты разработки. Это первый шаг к созданию реальных веб-приложений, за которые платят деньги.

Правила. Ну так, на всякий случай.

Чему научишься #

  • Освоишь основы React. React — это библиотека для создания современных веб-приложений. Она помогает разрабатывать интерфейсы, которые быстро обновляются, без необходимости перерисовывать всю страницу.
  • Настроишь локальный сервер для разработки. Когда ты пишешь код, тебе нужно где-то его запускать и тестировать. В HTML/CSS можно просто открыть файл в браузере, но с React так не получится. Здесь нужен локальный сервер — среда, где приложение будет работать прямо на твоем компьютере, пока ты его разрабатываешь.
  • Настроишь сборщик приложений. Vite — современный инструмент, который быстро создает и запускает React-проекты. Он позволяет вносить изменения в код и сразу видеть их в браузере без перезагрузки страницы.
  • Узнаешь про менеджеры пакетов. Когда программисты создают проекты, они редко пишут весь код с нуля. Вместо этого они используют готовые библиотеки (например, React, tailwind), которые уже кто-то написал. Но как быстро скачивать и обновлять эти библиотеки? Для этого и существуют менеджеры пакетов.
  • Познакомишься с менеджером состояний. Это инструмент для управления состоянием в сложных приложениях. Если в игре «Камень-ножницы-бумага» нужно просто хранить выбор игрока и бота, то в более сложных проектах может понадобиться хранить много данных сразу (например, список игроков, статистику, историю игр).
  • Узнаешь про CSS фреймворки. Tailwind — это набор утилитарных классов, которые помогают стилизовать страницу без CSS.
  • Настроишь статический анализатор кода. Когда код большой, его становится трудно читать и поддерживать. ESLint и Prettier помогают автоматически находить ошибки и форматировать код, чтобы он выглядел красиво и одинаково у всех разработчиков.

Материалы для подготовки #

Самостоятельный поиск других источников приветствуется

Техническое задание #

Макет приложения

img.png

  1. Сделай форк репозитория https://github.com/Ospens/rock-paper-scissors-template. В нем уже есть все нужные настойки, можно сразу писать приложение.
    1. Перейди по ссылке на репозиторий
    2. В правом верхнем углу нажми кнопку Fork. GitHub создаст копию этого репозитория в твоём аккаунте
    3. Перейди в свой аккаунт на GitHub и открой форкнутый репозиторий
    4. Нажми кнопку Code (зелёная) → выбери HTTPS и скопируй ссылку
    5. Открой терминал (или командную строку) на компьютере и введи команду:
git clone https://github.com/ТВОЙ_АККАУНТ/rock-paper-scissors-template.git
  1. Для стилизации должен быть использован фреймворк tailwind
  2. Сайт должен быть адаптивным
  3. При открытии страницы появляется кнопка Play и названием игры. При нажатии на кнопку игрок попадает на страницу с игрой.
  4. Сайт должен иметь светлую и темную темы. Переключение происходит в правом верхнем углу на соответсвующую иконку. Выбранная тема должна сохранятся при переходе между экранами
  5. Для хранения состояния (данных) должен быть использован обычный redux (не toolkit)
  6. Чтобы выбрать жест игрок должен нажать на одну из кнопок внизу. Соответствующий жест должен появиться слева от текста VS
  7. Выбор жеста ботом должен быть абсолютно случайным. После того как игрок сделал выбор жест бота появляется справа от текста VS
  8. По результатам раунда счетчик побед игрока или компьютера должен увеличиваться на 1 в соответствии с правилами игры
  9. Кнопка “RESET THE SCORE” должна сбрасывать счет обоих игроков до 0.

Заметки #

  • Пару слов о пример структуры из материалов. Такая организация папок была популярна раньше, и все еще встречается на проектах. Она называется folder-by-type, т.е. код группирован по техническим критериям, а не по бизнес требованиям. Из-за этого с ней есть проблемы, даже на проектах средних размеров. Но я рекомендую ее по следующим причинам:
    • Она проще в понимании и в маленьких проектах с ней нет проблем
    • Если на рабочем проекте попадется такая структура - буде проще в ней ориентироваться
    • В следующих уроках мы изучим современные подходы к проектированию.

Обратная связь и контакты #

По любым вопросам пиши мне, @i_urKing, и подписывайся на канал @js_is_easy