- «Часть 1 - Настройка проекта, зависимости и Hello Tic Tac Toe! приложение."
- Часть 2 - Структура игры, состояние и тесты.
- Часть 3 - Геймплей и базовый стиль.
- Часть 4. Подсказки, новая игра и многое другое.
- Часть 5 - Очистка и запоздалые мысли.
Обновление от 22 июля 2019 г .: зависимости проекта обновлены.
- Вавилон 7.x
- Реагировать 16.x
- Redux 4.x
- Webpack 4.x
Полный список обновлений можно найти в package.json.
В части 3 мы добавили UI-материал и компоновку компонентов и сыграли в полную игру. В этой части мы добавим оставшиеся компоненты и стили, необходимые для завершения игры.
Компоненты TitleBar и Menu
Чтобы дать нам возможность начать новую игру без необходимости сначала играть всю игру, нам нужно будет добавить строку заголовка и компонент меню.
Компонент TitleBar - это компонент-контейнер, который будет отображать заголовок и содержать компонент Menu для игры. Мы считаем его контейнерным компонентом, потому что он будет хранить локальное состояние и реагировать на события взаимодействия с меню.
Компонент Menu - это презентационный компонент, который показывает меню и вызывает обработчики событий, которые передаются ему из компонента TitleBar.
Я выбрал значок fiber_new, потому что он содержит слово новый. Вы можете выбрать любой значок из Значков материалов в качестве заполнителя для нового игрового предмета.
Обновление компонента приложения
Теперь, когда у нас созданы компоненты TitleBar и Menu, мы обновим компонент App, заменив заголовок заполнителя на наш TitleBar.
Если мы запустим игру сейчас, мы должны увидеть синюю строку заголовка с гамбургер-меню слева, где мы можем переключить меню «Новая игра».
Компоненты PlayerInfo и GameoverDialog
Затем мы добавим PlayerInfo и GameoverDialog. Это позволит нам увидеть, кто является текущим игроком, и отобразить диалог по окончании игры. Диалог также позволит нам запустить новую игру, не закрывая ее и не используя меню «Новая игра».
Компонент PlayerInfo - это простой компонент представления, который принимает player и gameover и отображает текущего игрока или сообщение о завершении игры.
Диалог Gameover, также являющийся презентационным компонентом, покажет либо выигравшего игрока, либо сообщение о ничьей и инициирует события, основанные на действии игрока, чтобы начать новую игру или закрыть диалоговое окно.
Обновление операций
Поскольку мы собираемся показать диалог завершения игры из компонента Game, нам нужно обновить операцию checkWinner, чтобы она возвращала логическое значение, если есть победитель.
В файле test.js для игровой утки обновите тесты, которые мы написали для checkWinner, назначив возвращаемое значение функции checkWinner переменной. Добавьте операторы expect, чтобы проверить, что для каждого теста возвращается правильное значение.
Откройте файл operations.js и добавьте переменную для hasWinner, установите для него значение true или false и верните его вызывающему.
Запустите yarn test, чтобы убедиться, что все наши тесты по-прежнему проходят.
Обновление игрового компонента
Последний шаг - обновить компонент Game с помощью компонентов диалога PlayerInfo и Gameover.
Как и в случае с TitleBar, мы собираемся сохранить некоторое локальное состояние, чтобы отслеживать, показывать или скрывать диалог «игра поверх» по окончании игры. Мы добавим два новых обработчика событий, которые будут обрабатываться, когда диалоговое окно хочет закрыть и когда игрок нажимает «да» или «нет».
Когда игрок нажимает «нет» или в сером пространстве (на планшетных или больших экранах) вне диалогового окна, мы обрабатываем это, устанавливая локальное состояние showDialog на false. Если игрок нажимает «да», мы отправляем действие newGame, чтобы начать новую игру.
Наконец, мы заменяем старую информацию об игроке компонентом PlayerInfo.
Полная игра
Запустите yarn start, чтобы запустить завершенную игру.
Поскольку мы в первую очередь сосредоточились на мобильных устройствах, давайте попробуем сыграть на мобильном устройстве с помощью эмуляции устройства Chrome.
Необязательно: развернуть на Surge.sh
Если вы действительно хотите играть в игру на мобильном устройстве, вы можете создать бесплатную учетную запись на Surge.sh, установить модуль Surge npm, а затем развернуть каталог ./dist в настраиваемом домене всплеска.
Я обновлю файл package.json новым сценарием для этого, все, что вам нужно сделать, это запустить его, чтобы опубликовать после создания вашей учетной записи.
// install surge globally so you can use it anywhere yarn global add surge // then we run the script to publish yarn surge // console output: $ yarn build && surge ./dist $ yarn clean && webpack --config webpack.config.js --progress $ rimraf ./dist // build output: // ... // ... // surge sample output: Running as <your_account> project: ./dist domain: <autogenerated-domain>.surge.sh upload: [====================] 100% eta: 0.0s (9 files, 3238471 bytes) CDN: [====================] 100% IP: <surge_ip_address> Success! - Published to <autogenerated-domain>.surge.sh
Запуск, yarn surge, создаст приложение, а затем опубликует его для распространения. Я опубликовал код из части 4 по указанному ниже URL-адресу, используя Surge.
Продолжение следует…
Вот и все, увидимся в следующей, заключительной части.
Источник для этой части: https://github.com/vanister/medium.com/tree/part-4
