В этой части мы сосредоточимся на целевой странице и базовой структуре для поиска игр.
Если вы пропустили последнюю часть и хотите узнать, как мы настраивали проект, вернитесь, чтобы прочитать ее, эта статья никуда не денется.
В этой части мы сосредоточимся на разработке целевой страницы. Мы собираемся записать основы поиска игр, чтобы другие страницы и компоненты знали об этом.
Если вы хотите сразу перейти к коду, вы можете найти его здесь.
Брендинг
В шаблоне Sapper есть favicon с логотипом Svelte. Но мы хотим что-то свое. Мы можем нанять кого-то, кто сделает это за нас, или сделать это сами.
В моем случае я решил сделать это сам, но начав с основы, логотипа PS4, используемого в Википедии.
Мы получаем SVG и используем любые доступные онлайн-превью и редакторы. Я использовал https://www.rapidtables.com/web/tools/svg-viewer-editor.html. Для перевода - как при перемещении логотипа по оси XY - я использовал http://petercollingridge.appspot.com/svg-transforms. Следуя тому же стилю, что и для других букв, мы создаем логотип и сохраняем его как SVG в нашей статической папке, где мы разместим все наши ресурсы.
Используя ту же стратегию, мы создаем значок, который увидим на вкладке браузера.
Панель поиска
Tailwind CSS не является библиотекой компонентов. Но у него есть примеры того, как создавать некоторые часто используемые компоненты с его классами. Мы используем примеры навигации и ввода как основу, чтобы адаптировать их к нашему желаемому виду и потребностям.
Мы будем использовать RxJs для получения значений из строки поиска. RxJs использует Observables, которые действуют как потоки данных. Он поставляется с множеством полезных операторов, которые подходят для панели поиска. Устанавливаем с помощью yarn add --dev rxjs и добавляем в Nav.svelte.
В шаблоне у нас есть <input bind:this={searchElem} /> для привязки элемента input к переменной в нашем коде. onMount запускается при рендеринге шаблона. Нам нужно добавить сюда наш код, чтобы он запускался, когда элемент ввода уже существует - до этого он не определен. fromEvent будет выдавать InputEvent каждый раз, когда мы вводим текст в строку поиска. Piping, для тех, кто не знаком с функциональным программированием, выполняет каждую операцию последовательно, передавая результат следующему оператору. Поскольку мы собираемся выполнять внутренний вызов для каждого поиска, мы хотим ограничить количество отправляемых запросов. debounceTime будет ждать - в данном случае 350 мс - чтобы передать сгенерированное событие следующему оператору. С map мы получаем значение события AKA типизированный запрос. Запросы, содержащие только 1 или 2 символа, могут вернуть слишком много игр, поэтому мы передаем термины следующего оператора только с 3 или более символами или 0 символами, которые вернутся на целевую страницу. Наконец, distinctUntilChanged отфильтровывает те же термины, что и в предыдущем выпуске. Посмотрим, как это работает.
Магазин
Svelte поставляется со встроенными магазинами. Магазины служат единственным источником истины. Мы собираемся использовать магазин, чтобы сохранить состояние панели поиска. При этом каждая страница и компонент будут иметь доступ к искомому термину и действовать в соответствии с ним.
Мы можем настроить его в Nav.svelte.
И быстро создайте пустую страницу «О программе», на которой мы собираемся получить доступ к значению.
И вообще так работает.
И мы подошли к концу другой части. Теперь, когда структура панели поиска настроена, мы можем начать вызывать серверную часть для наших игр. Но сначала нам нужно создать эти конечные точки. Об этом будет в следующей части!
Вы можете увидеть весь код до этого момента в https://github.com/omirobarcelo/retro-ps5/tree/part1.
Спасибо, что прочитали эту новую главу серии. Надеюсь, вам это нравится и вы чему-то научились. Увидимся в следующей части!
Ссылки
Спасибо за чтение от имени команды plainenglish.io.
