Я не могу оставаться в тонусе, если не тренируюсь.
Со временем информация, которую я узнал в классе, во время практических упражнений и в ходе личных проектов, постепенно рассеивается. Для меня продолжение создания небольших проектов - даже простых - лучший способ сохранить материал. Я вынужден применять основы и держать прочный фундамент. Оттуда я могу расширить сложность и масштаб проекта, как мне нравится.
Мой последний практический проект был вдохновлен учебником по игре с набором текста Брэда Трэверси, который является частью его курса Udemy под названием «20 веб-проектов с ванильным Javascript». Хотя я заимствовал эту идею из работы Брэда, я не буду использовать созданный им стиль, и слова не будут жестко закодированы.
Я обновил проект для использования в приложении React, и я делаю его динамически воспроизводимым через API Wordnik, что позволяет мне случайным образом генерировать слово. Этот API - отличный ресурс для всех ваших потребностей в создании слов. Он имеет массу настраиваемых конечных точек и функций - определения, синонимы, части речи, произведения! Ниже я проиллюстрирую, как я начал этот проект, и продолжу в другом блоге по мере того, как буду стилизовать и расширять его.
Чтобы сначала снизить функциональность, я проигнорировал стили и заставил свои вызовы API работать в соответствии с определенными спецификациями. Перед реализацией части набора текста я хотел протестировать функциональность API и установить ограничения сложности в соответствии с длиной слова.
Вот самый простой дисплей, который я настраиваю в компоненте, который я называю WordReceiver.
Я создал простое раскрывающееся меню с тремя вариантами сложности, которые я свяжу с ответами Wordnik разной длины.
Напоминание: не забудьте скрыть ключи API в файле .env, размещенном в gitignore, или аналогичными методами!
В приведенном выше коде я приписываю сложность слов (произвольно) в зависимости от их длины, а затем вызываю Wordnik API через эту интерполированную информацию, сохраненную в состоянии. Теперь пользователь может выбрать один из трех уровней в раскрывающемся списке, а затем нажать кнопку, чтобы вернуть простое, среднее или сложное слово.
Зная, что эти элементы работают, я реализовал часть набора текста.
Я удалил кнопку для генерации слов и сделал ее кнопкой запуска, которая теперь будет генерировать первое слово в игре. После этого каждый вызов API для нового слова будет запускаться, когда пользователь правильно набирает слово.
Это так же просто, как сравнение двух слов - совпадает ли слово API с вводом пользователя. На данный момент у меня есть часть набора текста, содержащаяся в том же компоненте, но по мере расширения проекта я буду разделять свои функции.
Вот все, что вам нужно для ввода информации. Убедитесь, что у вас отключено автозаполнение, иначе вам не нужно будет дописывать текст! Кроме того, автофокус будет держать ваш курсор в поле ввода и готов к вводу.
Эта функция typeHandler запускается при изменении ввода, которое происходит при вводе. Затем функция сравнивает, соответствует ли это захваченное слово слову из API, и, если да, сбрасывает поле ввода на пустое и вызывает новое слово.
Сейчас эта игра не очень увлекательная. Но для этого нужно правильно сказать слово, прежде чем вам дадут новое.
В следующем блоге я объясню, как я увеличил сложность игрового процесса, разделил функциональность на различные компоненты, добавил таймер и счетчик, а также немного стилизовал.
