Скачать "Build and Deploy an Online Multiplayer Web 3 NFT Card Game | Full Course"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FC9ctoK4M9Bk%252Fmaxresdefault.webp&w=1139&q=75)
Оглавление
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F1X5bBLvmvww%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FAhwoks_dawU%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FF627pKNUCVQ%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FMJzbJQLGehs%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FZqEa8fTxypQ%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fb9eMGE7QtTk%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FpUNSHPyVryU%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FvpvtZZi5ZWk%252Fmaxresdefault.webp&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
Веб 3.0 может изменить00:00:04
Интернет, каким мы его знаем, навсегда, ты00:00:07
еще рано уловить тенденцию00:00:09
сейчас и создаем свой первый блокчейн00:00:12
приложение привет и добро пожаловать в00:00:15
видео проекта, где вы будете строить и00:00:17
развернуть онлайн00:00:19
многопользовательская карточная игра Web 3 NFD00:00:24
от Avalanche создайте своих персонажей00:00:27
создавайте и присоединяйтесь к живым боям, выбирайте свой00:00:31
Поле боя и сражайтесь с другими игроками00:00:35
в реальном времени с потрясающим дизайном00:00:38
интерактивный игровой процесс, умный кошелек00:00:41
сочетание живого взаимодействия с умными00:00:43
контракты и, самое главное,00:00:46
возможность сражаться с другими игроками в реальном времени00:00:49
time avax Gods — лучший и единственный00:00:52
многопользовательская карточная онлайн-игра web 3, которая00:00:56
в настоящее время вы можете найти на YouTube вас00:00:59
может быть интересно, почему какие00:01:01
предпосылки для создания такого00:01:02
фантастическая игра, которую нужно знать00:01:04
JavaScript и чувствовать себя комфортно с00:01:06
отреагируйте, если это ваш первый раз00:01:08
Learning Web 3 Предлагаю вам посмотреть00:01:11
создать и развернуть современную веб300:01:13
сначала видео о блокчейн-приложении, а потом приходите00:01:16
назад, чтобы посмотреть, как этот строит это00:01:18
феноменальная игра даст вам должное00:01:20
понимание того, как создавать регулярные00:01:23
веб-игры, но это также даст00:01:25
вы подробно рассказываете о мире00:01:28
web3 как взаимодействовать со смартом00:01:30
пара контрактов со смарт-кошельками и00:01:33
слушать события смарт-контракта, которые мы00:01:36
собираюсь начать с простого, а затем перейти к00:01:38
более сложные темы, я объясню каждую00:01:41
шаг на пути к созданию этого00:01:43
приложение, вы также узнаете, как00:01:46
подключить обычное приложение act.js00:01:48
к блокчейну и выполнить сопряжение с вашим00:01:51
кошельке, вы также узнаете о00:01:53
язык программирования Solidity и как00:01:55
смарт-контракты, написанные на Solidity, работают00:01:58
вы научитесь создавать умные00:02:00
контракты и децентрализованные приложения00:02:02
на платформе Avalanche Avalanche00:02:05
самая быстрая платформа смарт-контрактов00:02:08
там это позволяет вам быстро строить00:02:11
недорогие приложения, совместимые с Solidity, сверху00:02:14
из этого с подсетями Avalanche позволяет00:02:17
вы можете построить свою собственную сеть00:02:19
оптимизирован для соответствия всем вашим проектам00:02:22
потребности00:02:23
подсети дадут полноценные игры Web300:02:26
контроль над своими собственными настраиваемыми00:02:28
сети блокчейн без жертвования00:02:31
безопасность или децентрализация, которая позволяет00:02:35
вы можете быстро масштабировать свою пользовательскую базу00:02:38
настраиваемые правила для вашего блокчейна00:02:39
и сосредоточиться на игровом процессе, по существу, с00:02:43
лавины, вы научитесь00:02:45
создать полноценный веб 3.0 онлайн00:02:49
многопользовательскую игру и изучите все тонкости и00:02:51
основы блокчейна в одном видео00:02:54
помимо скорости и дешевизны00:02:57
использую Avalanche, то, что мне нравится00:03:00
это скорее всего наоборот00:03:02
совместимость с существующим Ethereum00:03:04
инструменты и рабочие процессы виртуальных машин позволяют00:03:07
я объясню, предположим, у тебя есть опыт00:03:10
создание веб-3D-приложений для любого Ethereum00:03:13
виртуальную машину или используйте такие инструменты, как00:03:15
метамаска Remix трюфельная каска web3js00:03:19
ethers JS или откройте Zeppelin and More в00:03:23
в таком случае точно такие же скрипты00:03:26
и рабочие процессы будут работать в Avalanche00:03:29
без каких-либо изменений, это не так уж и здорово00:03:33
мы будем использовать наиболее востребованные00:03:35
Технологии сегодня, и я научу вас00:03:37
как развернуть свою игру в Интернете, чтобы вы00:03:40
можешь поиграть с друзьями, поделись00:03:42
с вашими потенциальными работодателями и расскажите об этом00:03:44
в вашем портфолио, если это видео достигнет00:03:46
20 000 лайков записываю очередной веб 300:03:50
видео00:03:51
то, что я только что показал, может показаться тебе00:03:53
просто, но поверьте мне, их много00:03:56
происходит логика блокчейна и web300:03:59
за кулисами, и я твердо верю00:04:01
что создание этого приложения — лучший способ00:04:04
чтобы по-настоящему понять, как работают Web3 и Smart00:04:07
с учетом сказанного контракты работают отлично00:04:10
есть еще один важный00:04:12
объявление, которым я хочу поделиться с вами00:04:14
прежде чем мы углубимся в проект00:04:16
так как это веб 3 тяжелый00:04:18
видео на основе проекта, которое я также подготовил00:04:21
для вас двоих совершенно бесплатно в Интернете 300:04:24
resources one — это комплексный веб300:04:27
дорожная карта, а другая – это солидность00:04:30
шпаргалка, ссылка для скачивания00:04:32
ресурсы совершенно бесплатно находятся в00:04:34
описание помимо этого у меня также есть00:04:37
создал курс Web 3.0, в котором вы будете00:04:40
построить полностью функциональный nft00:04:43
Торговая площадка этого 10-часового курса погружений00:04:47
во все, что вам нужно знать о00:04:48
Solidity Web3 и смарт-контракты также00:04:52
так как ты смотришь это видео от00:04:54
используя ссылку в описании, вы00:04:56
я получу специальный код скидки, который00:04:58
будет автоматически подано заявление на00:05:00
вы во время оформления заказа это новаторское00:05:03
проект поразит ваш потенциал00:05:04
работодатели делают00:05:06
jsmastery.pro единственный источник00:05:09
знания, необходимые для достижения вашей мечты00:05:11
оплачиваемая работа в web3, от которой вы можете получать удовольствие00:05:14
через много лет после этого сказано, давайте00:05:17
Погрузитесь прямо в сегодняшнее видео00:05:20
[Музыка]00:05:28
для начала мы собираемся создать00:05:31
пустая новая папка на рабочем столе, давайте00:05:34
назовите это nft подчеркивание карты подчеркивание00:05:37
игра, я также открыл пустую визуальную00:05:40
Окно кода студии, поэтому просто перетащите его и00:05:43
скиньте эту папку00:05:45
как только ты это сделаешь, у нас будет00:05:48
папка открыта в самом популярном коде00:05:50
редактор там00:05:51
так что теперь мы можем пойти в00:05:54
просмотреть, а затем терминал, это будет00:05:57
откройте встроенный интегрированный код vs00:06:00
терминал, мы также можем нажать прямо здесь, чтобы00:06:03
открываем Проводник и мы готовы00:06:05
приступим к настройке структуры нашего проекта00:06:07
мы собираемся начать это видео с00:06:10
с точки зрения блокчейна Web 300:06:12
Итак, чтобы начать, давайте щелкнем правой кнопкой мыши00:06:15
прямо здесь и создайте новую папку00:06:18
называется web3 теперь внутри нашего терминала00:06:22
мы можем записать компакт-диск или изменить каталог на web300:06:26
теперь, чтобы правильно инициализировать наш00:06:28
блокчейн-сторона того, что мы собираемся сделать00:06:30
надо сделать пару шагов и бежать00:06:32
пара команд, но не волнуйся, я00:06:35
покажу тебе, как делать все шаг00:06:37
шаг за шагом, чтобы сделать все еще проще для00:06:40
ты, я создал целый GitHub00:06:42
репозиторий с финальным кодом, пока00:06:45
ты здесь, не стесняйся, поставь звезду00:06:48
здесь вы можете прокрутить вниз и вы можете00:06:51
посмотреть все инструкции по настройке00:06:53
написана часть web3 их проектов00:06:55
шаг за шагом, но не волнуйся, мы идем00:06:58
пройти через все вместе и00:07:00
Я покажу тебе, как пройти00:07:02
каждый из этих шагов, чтобы00:07:04
убедитесь, что вы можете хорошо следовать00:07:06
еще одна замечательная вещь, которую мы недавно сделали00:07:08
на канале GSM YouTube создан00:07:12
специальное сообщество Discord в этом Discord00:07:14
Сообщество огромно, и мы уже на00:07:18
более 14 000 участников, но это не то00:07:22
Я хочу поделиться с тобой тем, чего я хочу00:07:24
хочу поделиться с вами этим особенным видео00:07:27
раздел помощи здесь, у нас будет00:07:30
специальная доска форума для каждого00:07:32
одно из наших видео, так что если вы00:07:34
возникли проблемы с настройкой00:07:36
лучший способ получить помощь – это не00:07:39
быть через комментарии на YouTube, а это00:07:41
Будет, создав новую справочную публикацию в00:07:44
это специальное видео-помощь на канале здесь00:07:47
я другие администраторы и прочее00:07:49
люди смогут вам помочь00:07:52
с учетом сказанного, начнем с00:07:54
инициализация нашей веб-стороны 300:07:56
как только мы окажемся в каталоге web3, мы сможем00:08:00
запустите команду каски MPX00:08:03
вам может быть предложено установить жесткий00:08:05
в этом случае просто нажмите Y и00:08:08
нажмите Enter, как только вы это сделаете, мы сможем00:08:11
выбери машинописный текст, но не беспокойся, нет00:08:13
знание машинописного текста обязательно00:08:15
для получения корня проекта в каске просто нажмите00:08:18
входить00:08:19
и нажмите Enter еще раз00:08:23
вот и все, это только что инициализировало00:08:25
проект внутри нашего каталога web300:08:28
если прокрутить немного вверх, то можно это увидеть00:08:30
нам нужно установить некоторые зависимости для00:08:32
запустим пример проекта, так что давайте просто00:08:34
скопируйте это сообщение прямо сюда00:08:36
вставьте его и нажмите Enter, это00:08:39
собираюсь установить парочку Dev00:08:40
зависимости00:08:42
это займет всего минуту и00:08:44
Я скоро вернусь вместе с этими Девами.00:08:47
зависимости, нам также понадобится00:08:49
пара обычных зависимостей, так что давайте00:08:51
запустить npm install добавить открыть Zeppelin00:08:56
контракты с косой чертой00:08:59
dot EnV в nomic Labs сильно ударьте вперед00:09:04
шапка Dash эфиров и можно нажимать Enter00:09:07
эти зависимости действительно установлены00:09:09
быстро, если вы хотите быть уверены, что получите00:09:11
нужные, вы можете просто скопировать это00:09:13
команда отсюда также00:09:15
вот и мы можем очистить терминал00:09:18
теперь мы установили все важное00:09:20
зависимости, которые мы собираемся использовать для Интернета00:09:22
3 стороны вещей, следующее, что у нас есть00:09:25
нужно установить браузерный кошелек00:09:28
расширение00:09:30
это позволит нам взаимодействовать00:09:32
с блокчейном через наш браузер00:09:33
наше приложение будет написано на00:09:36
прочность00:09:37
но мы будем использовать Avalanche для создания00:09:40
приложение быстрее и с меньшими затратами, поэтому00:09:44
это позволит нам запустить их00:09:46
Эфириум работает еще быстрее с00:09:49
транзакции происходят мгновенно, потому что00:09:51
из этого мы будем использовать лавину00:09:54
специальное ядро кошелька ядро — это метамаска00:09:58
альтернатива децентрализованным приложениям Avalanche00:10:01
приложение, которое вы создадите сегодня, будет00:10:03
отлично работает с кошельком метамаски00:10:05
но поскольку мы строим на основе00:10:08
ядро лавины будет намного больше00:10:11
быстрее, и поскольку мы создаем игру00:10:13
нам нужно быть максимально интерактивными00:10:17
поэтому я решил использовать ядро00:10:20
кошелек, чтобы получить основной кошелек на00:10:22
Браузер Chrome, в который можно просто зайти00:10:24
Интернет-магазин Chrome, а затем найдите00:10:27
основной00:10:28
если вы используете другой браузер, который00:10:30
пока не поддерживает ядро, я бы предложил00:10:32
перехожу на Chrome хотя бы на время00:10:34
целей этого видео, потому что Chrome00:10:36
также позволяет нам иметь несколько учетных записей00:10:38
который нам придется использовать для проверки00:10:41
функциональность многопользовательской онлайн-игры, поэтому00:10:43
это может быть хороший шанс переключиться на00:10:45
Chrome, если нет, если вы действительно этого хотите00:10:48
в таком случае используйте другой браузер00:10:49
тебе придется использовать метамаску, так что оставайся в курсе00:10:52
Имейте в виду, что транзакций будет немного00:10:54
медленнее, чем на ядре00:10:56
с учетом сказанного я полностью удалил00:10:59
core из моего браузера, чтобы я мог помочь вам00:11:01
шаг за шагом о том, как его установить так00:11:04
давайте нажмем «Добавить в Chrome»00:11:06
это автоматически откроется00:11:08
окно, и вы можете нажать «Создать новый»00:11:11
кошелек00:11:13
вы можете нажать «Я согласен»00:11:15
здесь вы можете ввести имя своего кошелька00:11:17
Я собираюсь сделать что-то вроде JS Mastery00:11:19
ты можешь выбрать свой пароль, я собираюсь00:11:22
выберите что-нибудь действительно простое00:11:24
и вы можете согласиться и признать и00:11:27
нажмите «Сохранить»00:11:28
теперь здесь ты получишь свое00:11:30
секретная фраза восстановления это самая00:11:33
священный пароль, когда он придет00:11:36
для блокчейн-кошельков, конечно, на моем00:11:38
реальных средств не будет, поэтому я смогу00:11:40
покажи это тебе, но оставь это при себе00:11:42
ты сам запиши это где-нибудь, потому что00:11:45
нам это понадобится для инициализации нашего00:11:47
кошелек, я скопирую его00:11:49
сохраните его где-нибудь, нажмите «Понять» и00:11:53
Нажмите "Далее00:11:54
теперь я вставлю сюда в URL то, что я00:11:57
скопировано, чтобы мы могли видеть слова и00:12:00
просит нас проверить это секретное восстановление00:12:02
фраза, поэтому давайте выберем слово, которое00:12:05
идет за мулом, давай найдем его, это00:12:07
будет слово SEC, которое будет следовать после00:12:10
ядерная энергия будет изображением и00:12:13
слово, которое идет после поверхностного00:12:16
это будет безопасно, и давайте нажмем00:12:19
следующий00:12:21
Итак, наш кошелек здесь, и давайте00:12:24
просто нажмите вкладку «Расширения» и давайте00:12:27
поверните его для облегчения доступа00:12:29
вот и наш кошелек, вот и мы00:12:33
собираюсь установить его в качестве кошелька по умолчанию, как00:12:35
ну, отлично, теперь то, что нам нужно сделать, как00:12:38
ну открыто расширение00:12:41
нажмите на настройки прямо здесь,00:12:43
нажав на гамбургер-меню00:12:44
перейдите в раздел «Дополнительно» и затем включите тест00:12:48
сетевой режим, это позволит нам00:12:50
взаимодействовать с тестовыми сетями00:12:53
отлично, теперь нам нужно пополнить наш кошелек00:12:56
из крана Avax сделать это вы можете00:12:59
нажмите ссылку внизу в описании00:13:00
это приведет вас к00:13:03
faucet.avax.network вы можете выбрать00:13:06
сеть Fuji C Chain Avax — это токен00:13:09
и вы можете нажать «Подключиться»00:13:11
это немедленно подскажет вам00:13:12
кошелек, и вы можете нажать «Одобрить» и00:13:15
просто нажмите запрос на Avax и поехали00:13:18
транзакция прошла успешно и всего за00:13:21
пару секунд, если ты откроешь свой00:13:23
кошелек снова, вы должны увидеть00:13:25
два авакса прямо здесь, это так здорово, что00:13:29
мы получили жетоны очень быстро, когда вы00:13:31
установите ядро, скорее всего, так и будет00:13:34
дать вам много сообщений, чтобы у вас было00:13:36
чтобы щелкнуть этот значок прямо здесь, перейдите к00:13:39
настройки консоли, а затем щелкните выбранное00:13:42
контекст только потому, что таким образом вы можете00:13:45
отфильтровать все связанные с эфирами00:13:47
Сообщения00:13:48
теперь мы можем вернуться в нашу Visual Studio00:13:50
код, и мы сможем создать новый DOT EnV00:13:54
файл внутри папки web3, так что это00:13:57
снова будет точка EnV, убедитесь, что00:14:01
он находится внутри папки web3, как мы00:14:03
у меня будет еще одна EnV для клиента00:14:05
там создайте личное подчеркивание00:14:09
ключевая переменная, и сейчас мы собираемся00:14:12
оставь это пустым, теперь здесь у нас будет00:14:14
поместить закрытый ключ нашего кошелька так00:14:17
вот как заставить его открыть ядро00:14:19
расширение00:14:20
нажмите на гамбургер-меню в левом верхнем углу00:14:23
перейти в безопасность и конфиденциальность00:14:26
нажмите показать фразу восстановления00:14:29
а затем введите свой пароль00:14:32
как только ты это сделаешь, он тебе покажет00:14:34
еще раз твоя фраза восстановления, сохрани ее00:14:37
вам нужно скопировать его, а затем00:14:40
ты можешь отправиться в00:14:42
Wallet.avax.network еще раз ссылка00:14:44
будет внизу в описании00:14:46
нажмите доступ к кошельку00:14:49
выберите мнемоническую ключевую фразу00:14:52
и вставьте свою фразу прямо сюда00:14:54
вы сразу же войдете в свой00:14:57
кошелек и здесь, если он не выбран00:14:59
уже00:15:00
выберите тестовую сеть Fuji в качестве00:15:03
подключен к нему, теперь перейдите к управлению ключами на00:15:07
левую боковую панель и нажмите «Вид C».00:15:10
цепочка секретных ключей00:15:13
окончательно00:15:14
скопируйте его, теперь мы можем вернуться к коду vs00:15:17
и вы можете вставить его прямо сюда, равный00:15:20
ваш личный ключ00:15:21
отлично, теперь у нас есть средства и мы00:15:25
подключен к нашему кошельку, мы можем закрыть00:15:27
это откройте папку и перейдите в00:15:32
hardhat.config.ts здесь у нас есть00:15:34
базовая конфигурация, что вы можете сделать00:15:37
прямо сейчас переходим к описанию00:15:39
это видео и найти суть GitHub, которую я00:15:41
предоставлено только для тебя, там ты будешь00:15:44
возможность найти новое и обновленное00:15:46
hardhat.config точка DS, и вы можете просто00:15:50
вставьте сюда эту конфигурацию каски00:15:53
содержит немного больше настроек, которые нужно сделать00:15:56
убедитесь, что наше приложение правильно развернуто на00:15:58
Тестовая сеть Fuji, кроме того, я00:16:01
также включил несколько комментариев прямо здесь00:16:03
объясняя, как развернуть этот контракт00:16:06
позже в вашей собственной подсети изначально00:16:10
децентрализованное приложение, которым вы являетесь00:16:12
собираюсь строить в этом видео будет00:16:14
развернут в цепочке C нашего основного00:16:16
подсеть в нашей тестовой сети под названием Fuji, и мы00:16:20
со временем я смогу увидеть это прямо здесь, поскольку00:16:23
ваше приложение растет, вам, вероятно, захочется00:16:25
переместите его в свою подсеть00:16:28
если вы хотите узнать больше о подсетях00:16:30
зачем вам вообще нужно развертывать00:16:32
подсети или как бы вы развернули00:16:35
подсеть, то вы найдете это00:16:37
ссылки невероятно полезные по сути00:16:41
Тестовая сеть 4G C отлично подходит для00:16:43
в разработке, но при запуске вашего приложения00:16:46
растешь и начинаешь много ездить00:16:48
транзакции и комиссии за газ, тогда это может быть00:16:51
было бы хорошей идеей мигрировать в подсеть00:16:54
вместо первой ссылки у вас много00:16:56
информации о том, когда вы можете захотеть00:16:58
использовать подсеть вместо тестовой сети c Chain00:17:01
и внутри второй ссылки у вас есть00:17:04
Полная документация о том, как00:17:06
сделать это самостоятельно, по сути00:17:08
транзакции в цепочке C могут занять00:17:11
от 2 до 10 секунд, те, что на00:17:14
подсеть будет намного быстрее и на C00:17:17
цепочка, в которой мы полагаемся на токен Avax00:17:19
подтверждать транзакции, но в подсети00:17:22
по сути, мы можем создать свой собственный токен00:17:25
вы будете полностью контролировать00:17:28
работа сети и ее внутреннее устройство, и я00:17:31
также не включил структуру для добавления00:17:34
подсеть прямо здесь, на случай, если вы захотите сделать00:17:36
это позже само по себе отлично, это00:17:39
это будет для нашей конфигурации каски00:17:41
DS, теперь мы можем закрыть это и идти.00:17:44
в сценарии и откройте файл Deploy.ts00:17:47
сценарий внутри здесь вы можете увидеть некоторые00:17:50
демо-код, который снова создала каска00:17:53
внизу в описании там же00:17:55
GitHub gist вы можете найти обновленную00:17:58
скрипт Deploy.ts, и вы можете просто00:18:01
вставьте сюда, это так же просто, как00:18:04
создание нового контракта Фабричное право00:18:06
здесь, а затем развертываем его после того, как сделаем00:18:09
что единственное, что мы хотим получить, это00:18:11
адрес развернутого смарта00:18:13
контракт, который является единственным, что00:18:16
этот сценарий развертывания отлично работает и00:18:19
доработать нашу сторону веб300:18:21
конечно, самая важная часть00:18:23
отсутствует, и это контракты и00:18:27
конечно, наш смарт-контракт, который мы собираемся00:18:29
удалите этот журнал, эта Душа, так как это00:18:32
демонстрационный смарт-контракт, и мы собираемся00:18:34
создайте нашу собственную под названием Avax Gods dot Sol00:18:39
смарт-контракт, созданный для этого00:18:42
приложение имеет около 500 строк, и я00:18:47
не хочу, чтобы вы просто копировали и вставляли00:18:49
что я набираю 500 строк и так еще раз00:18:52
в той же сути GitHub в00:18:54
описание внизу будет00:18:56
будь полным аваксом00:18:58
Смарт-контракт gods.soul00:19:00
как видите, это длинный контракт и00:19:04
там много кода, но не волнуйтесь00:19:07
мы собираемся пройти через все00:19:08
вместе, и я собираюсь объяснить все00:19:11
самые важные функции, которые я использовал00:19:14
долго об этом думаю, что00:19:16
Я хочу, чтобы вы просто скопировали все00:19:18
персонаж, которого я пишу за эти 50000:19:20
линии или я бы хотел связать это с00:19:24
переднюю часть, а затем вернуться и00:19:27
местами ссылаться на смарт-контракт00:19:29
где это имеет смысл, чтобы мы могли00:19:32
вернитесь и изучите конкретные функции00:19:35
именно там, где мы их используем таким образом00:19:38
мы еще собираемся объяснить все00:19:40
самая важная функция, но вы00:19:43
также иметь возможность увидеть, что он делает на00:19:45
интерфейс и как он ведет себя в моем00:19:48
мнение, о котором вы узнаете00:19:49
события о функциях конструкторов и00:19:53
все будет намного лучше, если мы это покажем00:19:56
как это уже написано и то00:19:58
объясните это, надеюсь, это поможет00:20:00
смысл, с другой стороны, если бы вы00:20:02
как я, чтобы создать полный курс00:20:04
где мы углубимся в написание этого00:20:07
смарт-контракт вручную, вы можете позволить мне00:20:09
узнайте в комментариях, и если это так00:20:11
что-то, что вам было бы интересно и00:20:13
тебе это нужно прямо сейчас, тогда у меня есть00:20:15
феноменальные новости для вас, совсем недавно мы00:20:19
опубликовал криптокад целиком nft00:20:21
Курс по применению Marketplace внутри00:20:24
этот 12-часовой курс, который ты собираешься пройти00:20:26
создайте свой собственный блокчейн на основе00:20:29
Приложение Marketplace, где люди могут00:20:31
открыть для себя создание покупки и продажи nfts00:20:34
и самое лучшее в этом то, что00:20:37
все написано солидно от00:20:40
поцарапать, что означает, что ты собираешься00:20:42
освоить твердость, создав целое00:20:45
смарт-контракт с нуля, ты собираешься00:20:47
научитесь использовать и тестировать умные00:20:50
контракты используют силу00:20:52
блокчейн и использовать его на реальном Nexgs00:20:55
приложение имеет красивый дизайн и00:20:57
ты научишься создавать00:20:59
изучить список страниц nfts nfts мой nfts00:21:03
и как загрузить свой собственный nfts на00:21:06
блокчейн, так что еще раз, если это так00:21:09
что-то, что вам было бы интересно00:21:10
ссылка будет недоступна00:21:12
описание и потому что вы смотрите00:21:14
это видео будет для тебя особенным00:21:16
уникальный код скидки YouTube00:21:19
так что не стесняйтесь проверить это с этим00:21:21
сказал, что теперь у нас есть смарт-контракт00:21:24
наш скрипт развертывания и наша каска00:21:27
config, мы готовы развернуть смарт00:21:29
контракт на блокчейн и, как я уже говорил00:21:32
сказал, не волнуйся, мы вернемся00:21:34
и изучить функциональные возможности00:21:36
подробно о смарт-контракте, как мы00:21:39
реализуя их на переднем конце00:21:41
чтобы развернуть наш смарт-контракт, мы можем пойти00:21:43
для просмотра, а затем терминал00:21:45
сначала нам нужно его скомпилировать, так что давайте запустим00:21:48
команду компиляции каски MPX и00:21:52
убедитесь, что вы находитесь в сети300:21:53
каталог, который будет занимать этот процесс00:21:56
пара секунд и я буду00:21:58
обратно00:22:00
и вот, договор заключен00:22:02
наконец скомпилировано, нам нужно развернуть00:22:05
смарт-контракт в тестовой сети Fuji от00:22:08
запуск команды MPX в каске run00:22:12
скрипты косая черта развертывание точка TS тире00:22:17
даш Сеть космос Фудзи00:22:21
этот процесс обычно занимает около00:22:23
минута, и ваш смарт-контракт готов00:22:25
быть развернутым, я был неправ, на самом деле00:22:28
прошло около пяти секунд и вот оно00:22:30
теперь есть еще одна важная вещь, которую мы00:22:33
нужно сделать, а именно сохранить адрес00:22:36
развернутого смарт-контракта, поэтому для00:22:39
теперь давайте просто безопасно сохраним его внутри00:22:42
точки EnV, так скажем, контракт00:22:45
адрес подчеркивания равен и давайте00:22:49
положи сюда, мы воспользуемся им позже00:22:52
на стороне клиента для доступа ко всем00:22:54
функциональные возможности контракта, а также00:22:57
позже мы собираемся использовать контракт00:23:00
ABI, который находится прямо здесь, чтобы иметь возможность00:23:03
получить все функции на клиенте00:23:05
сторону, чтобы мы могли позвонить им и мы могли00:23:07
манипулировать данными на смарте00:23:09
договор00:23:10
отлично, что сказали, что мы закончили с00:23:13
Веб-3 сторона вещей, но, как я уже сказал,00:23:16
мы разрабатываем интерфейс и00:23:18
интегрируя смарт-контракт, мы00:23:20
собираюсь вернуться много раз в00:23:22
смарт-контракт для проверки таких вещей, как00:23:24
создать битву, создать разных игроков00:23:27
и собственно работа с игрой00:23:29
функциональность, которую мы собираемся изучить все00:23:32
этот код, когда мы его разрабатываем00:23:35
тем не менее, теперь мы готовы создать наш00:23:37
интерфейсная часть, а затем мы00:23:39
уметь соединить эти два, чтобы сделать00:23:41
инициализация и запуск нашего00:23:44
на стороне клиента немного проще, я подготовил00:23:48
стартовая папка клиента для вас, это00:23:50
позволит нам очень быстро получить00:23:52
вы готовы к работе, и тогда мы сможем сосредоточиться00:23:55
о том, что важно, что строится00:23:57
логика приложения, создающая пользовательский интерфейс00:24:00
и ux и, наконец, интегрируем их с00:24:04
смарт-контракт web3, так что внизу00:24:07
в описании вы можете найти ссылку на00:24:10
заархивированная версия стартового клиента00:24:12
просто скачайте его, разархивируйте, а затем вы00:24:15
можно зайти в файловый менеджер прямо00:24:17
нажмите, а затем нажмите «Вставить», наконец, мы00:24:21
можно переименовать это во что-то вроде клиента00:24:23
что является клиентской стороной нашего00:24:25
приложение, если мы расширим нашего клиента, мы00:24:28
вижу, что это обычная реакция.00:24:31
приложение, созданное с использованием Veet Veet — это00:24:36
новое и современное приложение Create React00:24:38
альтернатива, которая намного быстрее, чем00:24:41
создать реагирующее приложение00:24:43
здесь я также установил базовый хвостовой плавник00:24:46
конфигурация с некоторыми цветами, которые00:24:48
мы будем использовать фоновые изображения и00:24:52
семейство шрифтов, наряду с которым существует00:24:55
package.json, который содержит всего пару00:24:57
зависимостей00:24:59
как видите, мы будем использовать пакеты00:25:01
как эфиры и модель web3, чтобы сделать00:25:04
интеграция с web3 возможна, тогда мы00:25:08
использовать модель реагирования, чтобы показать некоторые00:25:10
информация на экране, которую мы будем использовать00:25:12
инструмент реагирования на наклон и реакцию параллакса00:25:15
вкладка, чтобы сделать вещи немного больше00:25:17
интерактивный и, наконец, мы используем00:25:19
отреагировать на маршрутизатор Dom, чтобы, конечно, создать00:25:21
маршрутизация, теперь мы можем погрузиться в исходный код00:25:24
папка для более глубокого изучения приложения00:25:28
здесь, кажется, много00:25:30
происходящих вещей, но все это00:25:33
в основном просто пустая папка с базовыми00:25:35
стартовые файлы, поэтому давайте посмотрим на00:25:38
папка с ресурсами, первая здесь, которую я подготовил00:25:41
для тебя все фоновые изображения все звуки00:25:46
как защита от атаки и взрыв00:25:48
они будут использоваться на протяжении всего00:25:49
приложение, и я также подготовился к00:25:52
вы атакуете и защищает значки, а также00:25:56
все карты, которые есть, такие вот00:25:59
будет интересное видео, но00:26:01
как вы можете видеть, файлов много00:26:04
поэтому мне нужно было убедиться, что у тебя есть00:26:06
все, чтобы быть готовым начать работу00:26:09
с кодированием логики, когда она придет00:26:12
среди компонентов есть только один00:26:13
компонент, подготовленный для вас здесь, который00:26:16
бортовая модель это базовая часто00:26:19
использован компонент web3, который просто проверяет00:26:22
что все настроено правильно00:26:24
убеждается, что у нас есть основной кошелек00:26:27
установили все и убедитесь, что мы00:26:30
подключен к нашему кошельку и что мы00:26:32
в правой Сети и, наконец, что мы00:26:35
у нас достаточно токенов Avax, но поскольку мы00:26:38
хорошо со всеми этими проверками, мы00:26:40
вообще не должен видеть модель, которая есть00:26:42
почему я предоставил его для включения этой модели00:26:45
у нас также есть встроенные утилиты и даже00:26:49
что еще важнее, у нас есть00:26:51
файл анимации.js, который предоставляет нам00:26:55
анимацию взрыва, которую мы будем использовать00:26:57
это длинный файл, но это не тот00:27:00
код, который я создал с нуля, я00:27:03
нашел это на этом замечательном кодепане00:27:05
Репозиторий00:27:06
как вы можете видеть, эта анимация была00:27:08
созданный Дэвидом, и нам просто нужно00:27:11
нажмите, чтобы увидеть 8-битное действие Dom00:27:14
поэтому я собираюсь щелкнуть по нему пару раз00:27:16
раз и это будет именно00:27:18
что наши игроки увидят, когда00:27:21
карты отлично атакованы, наконец, сверху00:27:24
из этого у нас есть базовая домашняя страница, и мы00:27:28
у нас есть несколько часто используемых стилей, которыми мы будем00:27:30
использование в нашем приложении, например, текста00:27:33
Стили у нас также есть более высокого порядка00:27:35
Страницы полей боя стилей компонентов и00:27:39
обычные контейнеры — отлично, и наконец мы00:27:42
есть файл index.css, в котором мы находимся00:27:45
импортируем попутный ветер и шрифт, которым мы будем00:27:47
используя во всем нашем приложении00:27:50
наконец, есть файл main.jsx, где00:27:53
мы импортировали маршруты или маршрутизатор00:27:56
из реагирующего маршрутизатора Дом и прямо сейчас00:27:58
там есть только один маршрут, который00:28:01
Домашний маршрут великолепен, теперь вы знаете00:28:04
все, что нужно знать о нашем00:28:06
текущая стартовая папка для запуска нашей00:28:08
приложение, которое нам нужно перейти для просмотра и00:28:11
затем терминал, затем нам нужно CD точка точка00:28:14
вернуться в One Directory назад, а затем мы00:28:17
нужно записать компакт-диск в клиент, наконец, мы сможем00:28:20
запустите npm install, чтобы установить все00:28:23
необходимые зависимости00:28:25
этот процесс займет всего лишь00:28:27
пару секунд, потому что большая часть00:28:29
все будет кодировать с нуля и00:28:32
наконец, как только это будет сделано, вы сможете запустить00:28:34
mpm run Dev, который запустит нашу00:28:38
veed-приложение на локальном хосте 5173 и00:28:42
вот и пустой белый экран, который00:28:45
говорит Avax Gods Web 3 в боевом стиле NFT00:28:50
карточная игра, созданная с любовью на JavaScript00:28:52
Мастерство, и, как вы можете видеть, я думаю, что00:28:55
теперь ты можешь мне поверить, что это просто00:28:57
пустая стандартная папка, потому что00:28:59
на экране ничего нет нет00:29:01
функциональность, какую бы мы ни собирались00:29:04
напишите все с нуля и сделайте это00:29:08
выглядеть так00:29:09
Итак, чтобы начать, мы можем теперь разместить наш00:29:12
браузер бок о бок с нашим редактором и00:29:16
наконец-то мы можем закрыть наш терминал и00:29:19
можно перейти к исходному коду, а затем домой, это00:29:22
будет отправной точкой нашего приложения00:29:25
сразу же мы начнем с00:29:27
что-то феноменальное, чего не так много00:29:30
люди учат тебя00:29:31
если вы посмотрите готовый сайт00:29:33
вы можете заметить, что у нас есть свой дом00:29:36
Добро пожаловать на страницу evax Gods a web 3 NFD00:29:39
карточная игра, чтобы начать, подключите свой кошелек00:29:42
разыгрываем лучшую боевую карту Web 300:29:44
игра, это здорово, но если мы переедем00:29:47
для косой черты создать Dash, сразись с тобой00:29:51
можно видеть, что дизайн по существу00:29:54
тот же логотип, у нас есть00:29:57
заголовок, у нас также есть подзаголовок, и мы00:30:00
есть изображение и нижний колонтитул00:30:02
внизу, но что изменилось, так это содержание00:30:05
для текста прямо здесь здесь и потом00:30:08
ввод внутри компонента00:30:10
и, как я уже сказал, я очень взволнован00:30:13
эта часть, потому что я собираюсь научить тебя00:30:15
как добиться разумности кода в00:30:18
реагировать, используя компоненты более высокого порядка00:30:22
это то, чего не так много00:30:24
люди тебя учат, так что давай сразу погрузимся00:30:27
внутрь00:30:28
начать создавать наш высший порядок00:30:30
компонент, мы можем открыть компоненты00:30:32
и создайте новый файл прямо внутри00:30:35
назовем это page hoc, как выше00:30:39
компонент заказа Dot jsx00:30:42
внутри там вы можете запустить rafce00:30:47
создать базовый функционал реагирования00:30:49
структура компонента, если это не сработало00:30:51
для вас вы можете перейти к расширениям и00:30:54
затем введите es7 Plus00:30:56
Подобные фрагменты это расширение00:31:00
вам нужно иметь возможность один раз запустить RAF CE00:31:03
вы установите это, это должно работать00:31:05
совершенно внутри нашего высокого порядка00:31:07
компонент, который на данный момент выглядит так же, как00:31:09
обычный компонент, мы можем импортировать00:31:12
используйте навигационный крючок, полученный из реакции00:31:17
маршрутизатор Дом, как мы собираемся сделать позже00:31:19
используйте его для повторной навигации куда-нибудь, где мы можем00:31:22
также импортируйте логотип и героя00:31:26
ИМГ00:31:27
исходит из ресурсов с точечной косой чертой00:31:31
и мы также можем импортировать эти стили00:31:34
как импорт по умолчанию, исходящий из точки00:31:38
Слэш Стили — огромная разница00:31:41
между компонентом более высокого порядка и00:31:44
регулярный компонент заключается в том, что в качестве первого00:31:46
параметр, он будет принимать новый00:31:49
компонент, в который мы собираемся перейти00:31:51
по сути, он будет действовать как00:31:54
обертка для меньшего внутри00:31:57
компонент, мы также можем передать некоторые00:31:59
дополнительные вещи, такие как заголовок и00:32:02
описание00:32:04
наконец-то из-за того, как мы будем звонить00:32:07
наш компонент более высокого порядка, который мы должны00:32:09
добавьте еще одну функцию прямо здесь00:32:11
по сути это будет функция00:32:13
внутри функции00:32:16
ты очень быстро увидишь, как00:32:18
мы собираемся позвонить сюда, мы можем00:32:20
инициализируйте этот навигационный крючок, сказав00:32:23
константная навигация равна использованию навигации00:32:26
наконец, приступим к созданию макета00:32:29
сначала у нас будет div, который00:32:31
будет иметь имя класса, равное00:32:34
Стили точечного контейнера00:32:39
внутри там у нас будет00:32:41
еще один div, у которого будет класс00:32:43
имя00:32:44
равно стилям00:32:47
точечное поле содержимого00:32:51
и если вам интересно, где эти00:32:53
стили исходят от вас, вы всегда можете00:32:55
удерживайте Ctrl, а затем нажмите на это имя00:32:58
он покажет вам, что именно00:33:00
здесь используются стили, и это00:33:03
используя Tailwind, поэтому, если вы не уверены00:33:06
что py8 или small или PX означает, что вы можете00:33:10
быстро поищите это в документации Tailwind00:33:12
просто зайдите на Tailwindcss.com и найдите00:33:16
например, сразу же ты будешь00:33:20
видеть, что это служит вашему00:33:23
дополнение, и оно обеспечивает дополнение y00:33:26
ось Y означает вертикаль, если хотите00:33:29
найдите что-нибудь еще, например Flex call00:33:31
посмотрим вызов Flex Dash и сразу00:33:35
вы можете видеть, что это используется для00:33:37
расположите предметы вертикально, так что00:33:40
теперь вы знаете, что можете исследовать любую00:33:42
имущество, которое мы используем прямо здесь, с00:33:44
тем не менее, давайте продолжим макет00:33:46
внутри этого div давайте также создадим00:33:49
изображение, которое будет самозакрывающимся00:33:52
тег изображения с источником, равным логотипу00:33:55
alt равно имени класса логотипа, равному00:33:59
Стили точечного логотипа, и он будет00:34:04
иметь свойство unclick с обратным вызовом00:34:06
функция, в которой мы собираемся Просто00:34:09
перейдите к простому значению косой черты00:34:12
домашняя страница00:34:14
отлично, если мы сохраним это, ничего не будет00:34:17
произойдет, потому что мы еще не00:34:20
используя компонент высшего порядка этой страницы00:34:22
Итак, теперь позвольте мне показать вам, как мы можем его использовать00:34:25
прежде чем мы это сделаем, давайте экспортируем его из00:34:28
нашу папку компонентов, создав новую00:34:31
файл index.js, а затем внутри него00:34:33
мы можем импортировать его, сказав страницу импорта00:34:37
специальный00:34:39
с этой косой страницы, и тогда мы сможем00:34:42
скажем, объект экспорта, и тогда мы сможем поместить00:34:45
вот этот компонент, это сейчас00:34:48
собираемся позволить нам вернуться домой00:34:50
а затем импортируйте страницу внутри00:34:55
фигурные скобки, подобные этой странице импорта, hoc00:34:59
из компонентов «точка-точка-слэш» — это здорово, так что00:35:05
наконец, как вы его используете, что такое00:35:07
разница между высшим порядком00:35:08
компонент и обычный компонент00:35:11
ну, компонент высокого порядка может обернуть00:35:14
другой компонент00:35:16
и в этом случае мы собираемся обернуть наш00:35:18
дома прямо внизу, где00:35:20
эксперт прямо здесь, давайте позвоним00:35:23
специальная страница00:35:25
давайте назовем это функцией и00:35:27
первый параметр будет таким00:35:29
второй компонент, который будет00:35:31
дом сейчас, если мы сохраним это и перезагрузим00:35:35
страница00:35:36
сразу видно, что все00:35:39
становится темно, и мы видим логотип00:35:41
это исходит с нашей страницы, но00:35:45
это пока не так интересно, потому что00:35:47
мы не можем видеть ничего другого, как мы можем00:35:50
увидеть этот контент на главной странице как00:35:52
ну, это пользовательский контент, верно00:35:55
ну, чтобы увидеть, что мы можем идти00:35:57
вернемся на страницу hoc, и мы сможем использовать00:36:00
первая опора, которая является компонентом, поэтому00:36:03
прямо под изображением мы можем создать его00:36:06
больше дел00:36:07
давайте дадим ему имя класса, равное00:36:10
Стили точечной оболочки тела и внутри00:36:15
отсюда давайте сделаем самозакрытие00:36:19
тег компонента и сохраните его00:36:22
как только ты это сделаешь, ты сможешь00:36:24
едва вижу все ее сообщения00:36:26
появился прямо здесь, хотя это так00:36:29
сейчас темно, мы знаем, что оно там00:36:32
так как еще мы можем изменить более высокий порядок00:36:35
компонент ну, мы указали, что это00:36:38
собираюсь принять дополнительный реквизит, так что00:36:40
давайте пройдем мимо них, давайте пройдем пустой00:36:43
фрагмент реакции, который скажет00:36:45
добро пожаловать в Avax Gods, давайте также добавим00:36:49
Разорвите тег здесь, и тогда мы сможем сказать паутину.00:36:52
3 карточная игра NFD, это название, давайте00:36:58
также добавьте еще один фрагмент и сюда00:37:00
скажем, подключиться00:37:03
Ваш кошелек00:37:05
начать играть00:37:07
и давайте добавим тег разрыва, а затем мы00:37:10
можно сказать, что это настоящая битва Web300:37:14
карточная игра00:37:15
конечно, нам нужно поставить запятую правильно00:37:18
здесь00:37:19
отлично, так как же нам это получить00:37:22
данные внутри нашего компонента высокого порядка00:37:24
ну, у нас есть название и описание00:37:27
реквизит, прямо здесь, внутри помещения00:37:31
обертка тела, давайте продолжим и создадим00:37:34
div00:37:35
у этого div будет имя класса00:37:38
равно строке Flex Flex Dash и W Dash00:37:44
полностью внутри мы можем визуализировать H100:37:47
элемент, который будет отображать заголовок00:37:51
и прямо под этим мы можем отобразить p00:37:54
элемент имейте в виду, что мы ниже этого00:37:57
div прямо здесь, который будет отображаться00:37:59
описание теперь давайте сохраним его и00:38:03
мы сразу же сможем увидеть наш текст правильно00:38:05
здесь конечно это не совсем так стилизовано00:38:08
давайте применим несколько стилей к rh1, давайте00:38:12
дайте ему имя класса, равное тому, что он собирается00:38:15
быть строкой шаблона flex теперь00:38:18
динамический знак доллара, фигурные скобки, стили00:38:21
текст с точкой и, наконец, текст с тире00:38:26
если мы сохраним это, это уже ищется00:38:29
лучше, теперь мы сможем уменьшить масштаб00:38:31
а также давайте добавим стили в00:38:34
описание, говоря, что имя класса00:38:37
равно долларовым фигурным скобкам Стили00:38:40
обычный текст с точкой, а также мой для поля y00:38:45
10 и сохрани там, поехали, это00:38:50
выглядит великолепно, давай немного расширим его00:38:53
вот и все, теперь оно выглядит еще лучше и00:38:56
а пока давайте удалим эти три00:38:58
элементы, поскольку они нам больше не нужны, мы00:39:01
иметь все внутри нашего высшего00:39:03
компонент заказа00:39:05
теперь давайте вернемся к этому и давайте00:39:08
примените изображение, а также нижний колонтитул как00:39:11
хорошо00:39:12
для этого мы можем пойти ниже нашего компонента00:39:15
сейчас и ниже еще одного div00:39:17
давайте создадим тег P, который будет00:39:20
иметь имя класса00:39:22
равен тексту нижнего колонтитула с точкой и в00:39:27
там можно сказать сделано с любовью JSM00:39:33
если мы сохраним это, мы сможем увидеть это правильно00:39:35
вот и просто чтобы немного соответствовать теме00:39:37
еще мы можем изменить это на «мокрое» и00:39:40
затем это фиолетовое сердце прямо здесь и из00:39:43
конечно, не стесняйтесь изменить это имя на00:39:45
наконец-то твой собственный, давай сделаем это здорово00:39:47
изображение ниже метки скорости и ниже00:39:50
еще один div, мы можем создать последний div00:39:53
этого компонента он будет иметь00:39:56
имя класса, равное flex и flex тире00:39:59
one, и внутри него мы можем визуализировать00:40:02
самозакрывающееся изображение, которое будет иметь00:40:05
источник равен Hero IMG, который мы собираемся00:40:09
также дайте ему тег ALT-героя Dash IMG00:40:12
и мы дадим ему имя класса00:40:15
равно00:40:17
W-4 на очень больших устройствах высота00:40:21
тоже полный, и это будет объект00:40:24
крышка00:40:25
теперь, если мы сохраним это, у нас будет красивый00:40:29
компонент домашней страницы, но не только00:40:32
это не просто дом, мы уже00:40:35
обсуждали, что мы собираемся использовать00:40:37
тот же макет для домашней страницы для00:40:39
создать страницу битвы на выбор00:40:41
Страница поля боя и панель присоединения00:40:44
страница, на три-четыре разные00:40:46
страницы у них будут похожие00:40:48
макет, поэтому позвольте мне показать вам, как мы можем00:40:51
в полной мере использовать наш высший порядок00:40:53
компонент и как мы можем создавать вещи00:40:55
многоразовый, давайте создадим новую страницу правильно00:40:59
внутри папки страниц под названием create00:41:03
Battle.jsx, а сейчас мы можем скопировать00:41:06
всю домашнюю страницу, а затем вставьте ее правильно00:41:09
здесь единственное, что нам нужно сделать, это00:41:11
измените дом в строках 5 и 14 на00:41:15
создать битву внутри создания битвы00:41:19
мы собираемся сказать что-то вроде00:41:21
создайте БР и тогда прямо здесь мы сможем сказать00:41:26
новая битва и под описанием мы00:41:30
могу сказать что-то вроде создай свой собственный00:41:34
сражайтесь и ждите, пока другие игроки00:41:39
присоединиться к вам00:41:40
вот и наконец нам пора идти00:41:43
внутри основного00:41:45
там нам придется импортировать00:41:47
создайте битву из папки Pages00:41:50
давайте сначала экспортируем его, щелкнув правой кнопкой мыши00:41:53
страницу и создав новый файл с именем00:41:56
index.js, туда мы можем импортировать наш дом00:41:59
страница, идущая из дома с точкой-косой чертой00:42:02
и мы также можем импортировать нашу битву создания00:42:06
страница из раздела «Создать битву», и мы00:42:10
может экспортировать оба из них внутри00:42:13
объект, который будет выглядеть так00:42:15
домой и создать битву00:42:17
это позволит нам вернуться в00:42:19
Основной и импортный как дома00:42:23
и создать бой в одну линию00:42:27
чисто и просто, и это будет00:42:29
со страницы с косой чертой00:42:32
теперь мы можем дублировать этот маршрут00:42:35
измените его, чтобы создать битву с косой чертой00:42:38
и измените страницу рендеринга, чтобы создать00:42:42
боевой00:42:43
теперь, если мы сохраним это00:42:45
мы можем вручную перейти к косой черте00:42:48
создайте Dash Battle и проверьте его00:42:52
тот же макет, но другой текст и00:42:55
разные элементы, если мы сейчас вернемся назад00:42:58
вы можете увидеть разницу, мы это сделали00:43:00
просто буквально имея пустую00:43:03
компонент и использование страницы более высокого порядка00:43:06
компонент00:43:07
конечно, здесь, теперь мы можем00:43:10
создайте дополнительные элементы, такие как H100:43:13
с именем класса давайте напишем текстовое тире00:43:16
белый и поздороваться из создания битвы00:43:21
теперь, если мы сохраним это и перейдем вперед00:43:25
косая черта создайте весло Dash, которое вы можете увидеть00:43:28
привет из Create Battle, давай сделаем это00:43:31
немного больше, поэтому напишите Dash XL, и мы сможем00:43:35
скопируйте это и вставьте то же самое в00:43:37
дом00:43:38
который собирается поздороваться из дома00:43:41
и теперь мы можем продолжать переключаться между00:43:43
два, что означает, что теперь мы можем иметь00:43:46
вся конструкция такая же, как у00:43:49
практически без усилий, как это00:43:52
компонент уже закодирован, но мы00:43:54
может продолжать менять то, что происходит внутри00:43:58
эти компоненты с логикой и с00:44:00
все остальное там идеально00:44:02
Я очень рад, что так рано00:44:05
видео, которое я должен показать вам силу00:44:08
используя компоненты более высокого порядка, если вы00:44:11
как эта часть видео, перейдите к00:44:13
комментарии прямо сейчас и дайте мне знать00:44:15
если ты это сделаешь, я постараюсь научить этому00:44:18
лекции как можно чаще в будущем00:44:21
видео также, если вам нравится этот сегмент00:44:24
Вам понравится то, что мы делаем00:44:27
jsmastery.pro у нас есть профессиональные00:44:30
10-часовые курсы плюс курсы, в которые мы погружаемся00:44:33
Углубление в темы реагирования, подобные этой00:44:36
один00:44:37
у нас сейчас два курса фильма00:44:39
Курс в парке, в котором подробно рассказывается о00:44:41
реакция, а затем торговая площадка nft00:44:44
курс, который требует Nextges и Web 300:44:47
развитие надежности на новый уровень00:44:49
еще раз, я просто хотел это выложить00:44:51
с учетом сказанного, мы теперь готовы00:44:54
продолжать развитие нашего00:44:56
отличное приложение, хотите верьте, хотите нет00:44:58
мы собираемся сразу же приступить к делу, мы00:45:02
собираюсь закрыть или создать битву00:45:04
Аппаратный компонент и основной, и мы00:45:06
собираюсь сосредоточиться непосредственно на приложениях00:45:09
контекст, чтобы мы могли перейти к источнику и00:45:12
можно создать новую папку в исходнике00:45:14
папка под названием context, это не произойдет00:45:18
это будет обычный контекст, это будет00:45:21
быть контекстом, через который мы проходим00:45:23
чтобы подключить наше интерфейсное приложение к00:45:25
смарт-контракт web3, давайте создадим00:45:28
новый00:45:29
внутри файла index.jsx мы можем00:45:33
реакция на импорт, мы тоже собираемся импортировать00:45:36
создать 8 контекстов00:45:38
использовать контекст, использовать эффект, использовать ссылку и использовать00:45:44
Состояние, я думаю, что вы уже можете видеть00:45:47
что мы используем почти все00:45:50
функциональные возможности из реакции, так что это будет00:45:53
быть длинным компонентом, и это не будет00:45:56
легко, но мы пройдем через это00:45:58
мы также собираемся импортировать кое-что известное00:46:01
поскольку эфиры происходят из эфиров, это00:46:04
пакет, который позволит нам00:46:06
взаимодействовать со смарт-контрактом, который мы00:46:08
собираюсь также импортировать модель web3 как00:46:12
импорт по умолчанию00:46:13
вот так из модели web3, поскольку мы00:46:18
обсуждалось до того, как это поможет00:46:20
мы как бы настраиваем процесс адаптации00:46:23
наше приложение, чтобы убедиться, что00:46:25
пользователь правильно подключен к00:46:27
приложение, а также давайте импортируем00:46:31
использовать навигационный крючок, исходящий из00:46:34
реакции-маршрутизатор Dash Dom, тогда мы можем начать00:46:37
создавая наш контекст, мы можем сказать const00:46:39
Глобальный контекст равен созданию00:46:44
такой контекст00:46:46
и тогда мы можем сказать: «export const Global»00:46:51
поставщик контекста равен функции00:46:55
у которого есть только один реквизит детей и00:46:59
оно будет иметь возврат, поскольку это00:47:01
обычный компонент реагирования теперь то, что мы хотим00:47:04
возвращение будет глобальным00:47:07
поставщик контекстных точек — компонент, который00:47:10
выглядит так и принимает одну опору00:47:14
которое называется значением, это объект00:47:17
куда мы можем передать все значения00:47:19
которым мы хотим поделиться с каждым00:47:21
компонент в нашем приложении, так что правильно00:47:24
здесь, внутри контекста, который мы собираемся00:47:26
взаимодействовать и подключаться к нашим умным00:47:29
контракт, а затем мы перейдем00:47:31
все эти ценности здесь, чтобы мы могли00:47:34
использовать их из каждого отдельного компонента00:47:36
в нашем приложении, наконец, мы00:47:39
также будет иметь вспомогательную функцию или00:47:42
вспомогательный хук под названием «export const use»00:47:46
Глобальный контекст, который будет00:47:48
равно функции обратного вызова, где мы00:47:52
собираемся вызвать контекст использования, и мы00:47:54
пройдет в этом глобальном контексте00:47:56
это позволит нам позвонить ему00:47:58
из других компонентов в качестве примера для00:48:01
теперь давайте передадим демонстрационную переменную00:48:05
равно для проверки нашего значения вот так и00:48:10
теперь мы можем попытаться получить к этому доступ00:48:12
ценность других наших компонентов00:48:15
первое, что нам нужно сделать, это пойти00:48:17
внутри Main, и нам нужно обернуть наш00:48:19
все приложение с нашим провайдером, поэтому00:48:23
прямо здесь мы можем сказать импорт00:48:25
Поставщик глобального контекста из точечной косой черты00:48:29
контекст, а затем прямо здесь, над маршрутами00:48:31
мы можем создать поставщика глобального контекста00:48:35
компонент, и мы можем поместить все00:48:37
маршруты внутри него, давайте обязательно00:48:40
сделать правильный отступ00:48:42
вот и все маршруты идут внутрь00:48:45
надеюсь, это имеет смысл, и что мы00:48:48
только что закончили, мы завернули все наши00:48:51
приложение с глобальным контекстом00:48:54
провайдера, это означает, что теперь внутри00:48:57
дом, который мы должны иметь возможность00:48:59
успешно использовать демонстрационную переменную, которую мы00:49:02
создали, теперь собираемся вернуться00:49:04
на домашнюю страницу здесь00:49:06
теперь причина, по которой мы не видим наше приложение, заключается в том, что00:49:08
потому что мы ничего не возвращаем00:49:10
из нашего контекста, как вы можете видеть, это00:49:13
пусто, поэтому мы должны поставить00:49:16
дети прямо здесь, что означает возвращение00:49:18
все, что мы передаем нашему приложению в00:49:21
этот чемодан станет нашим домом00:49:24
компонент отличный00:49:27
теперь, как я и обещал, давайте попробуем протестировать00:49:30
контекст внутри нашего дома00:49:32
приложение прямо здесь, мы можем импортировать00:49:36
использовать глобальный контекст, исходящий из00:49:40
Контекст – единственное, что нам нужно сделать, чтобы00:49:44
получить эту демонстрационную переменную, скажем, const demo00:49:48
равно00:49:50
используйте глобальный контекст, и теперь мы можем00:49:54
запишите это в консоль или, что еще лучше, мы можем00:49:56
распечатайте это, так что давайте прямо здесь создадим00:49:59
H1, давайте дадим ему имя класса00:50:02
равно00:50:05
текст Dash XL и текст Dash белый и00:50:09
внутри давайте отрендерим демо00:50:12
переменная00:50:13
как только мы это сделаем, мы сможем увидеть тест00:50:15
а это значит, что мы успешно00:50:17
передача значения из нашего глобального00:50:20
поставщик контекста вплоть до нашего дома00:50:22
компонент00:50:23
хотя передача чего-то вроде демо-версии00:50:26
не так уж и круто, поэтому мы собираемся удалить00:50:27
это на данный момент00:50:29
и удали отсюда также то, что есть00:50:32
круто — это получить все данные из00:50:34
смарт-контракт, а затем иметь возможность00:50:37
передать это прямо здесь, чтобы это было точно00:50:39
что мы собираемся делать дальше, мы собираемся00:50:42
иметь ряд эффектов использования, которые00:50:44
мы собираемся использовать для подключения к нашему00:50:46
смарт-контракт, как только00:50:48
загрузка приложений00:50:50
сначала нам нужно подключиться к нашему смарту00:50:53
кошелек с ядром, чтобы сделать это, давайте00:50:56
создайте новое поле состояния использования, которое00:50:59
будет называться адресом кошелька и по адресу00:51:03
в начале он будет установлен как00:51:05
пустая строка00:51:06
теперь давайте создадим обновление функции const00:51:09
текущий адрес кошелька00:51:14
это будет асинхронно00:51:15
функция00:51:17
и прямо внутри этого мы можем сказать00:51:19
константные счета равны весу00:51:22
запрос точки окна Ethereum Dot, а затем00:51:28
внутри мы можем передать метод00:51:30
равно учетным записям запроса eth с подчеркиванием00:51:36
теперь вам может быть интересно, что это такое00:51:38
Объект Ethereum на объекте окна, как00:51:42
оно существует, пойдем проверять00:51:45
давайте откроем консоль и наберем00:51:48
окно Dot Ethereum00:51:51
как только ты это сделаешь, ты это увидишь00:51:53
существует много разных переменных00:51:55
который мы можем назвать00:51:57
здесь у нас есть конструкторы, назначающие00:51:59
создавать много разных вещей00:52:01
происходит здесь, и это связано с00:52:04
тот факт, что у нас установлено одно и то же ядро00:52:06
что-то происходит с метамаской00:52:08
внедряет функциональные возможности Web3 прямо в00:52:11
ваш браузер, теперь давайте попробуем консоль00:52:14
войти в эти аккаунты00:52:17
вот и все00:52:19
Я собираюсь открыть элемент проверки00:52:22
консоль и теперь, конечно, нам придется00:52:25
вызовите эту функцию, поэтому давайте создадим использование00:52:27
эффект00:52:28
мы собираемся вызвать его только в начале00:52:31
это означает, что наш массив зависимостей00:52:33
будет пусто00:52:35
и мы собираемся вызвать наше обновление00:52:38
текущий адрес кошелька вот так00:52:41
давай сохраним это00:52:43
теперь мы получаем сообщение, что по сути00:52:46
говорит, что мы пока не можем подключиться и что00:52:49
потому что мы еще не настроили00:52:51
поставщик смарт-контрактов, так что давайте сделаем это00:52:54
прямо сейчас я создам еще один00:52:57
используйте эффект и потерпите, будет00:53:00
будь парой в этом индексном файле, так что давай00:53:03
создайте новый эффект использования прямо под этим00:53:06
один00:53:07
и он также будет вызван только в00:53:10
начало приложения так00:53:12
массив зависимостей будет пустым00:53:15
там мы можем создать новую функцию const00:53:18
установить смарт-контракт и провайдера00:53:23
и это также будет00:53:25
асинхронная функция, которую мы собираемся00:53:27
вызовите эту функцию немедленно, как только00:53:29
как веб-сайт загружает причину, по которой мы00:53:32
пришлось создать эту функцию и не только00:53:34
напишите код здесь, потому что это00:53:35
асинхронно, к которому мы хотим получить доступ00:53:38
какой-то асинхронный код00:53:39
Итак, давайте инициализируем модель web300:53:42
константная модель web3 равна новой модели web300:53:47
модель, и мы называем ее функцией const00:53:50
соединение равно весу web300:53:53
модель точка подключения00:53:56
константный новый поставщик равен00:54:00
новые провайдеры эфиров dot web300:54:05
провайдера, и мы собираемся передать это00:54:08
связь, которую мы установили здесь, затем мы00:54:11
нужно получить подписывающую сторону, которая подписывает00:54:13
контракт, который будет равен00:54:15
новый провайдер, подписывающий точку00:54:19
и, наконец, мы получим новый00:54:21
контракт, который будет равен00:54:24
новый ethers.contract и здесь у нас есть00:54:27
передать данные из смарт-контракта00:54:30
что мы создали, но, конечно, мы00:54:33
у нас еще нет этих данных или у нас все хорошо00:54:37
технически да, но это внутри00:54:40
папка web3, которую нам еще предстоит передать00:54:43
в наше клиентское приложение, но00:54:45
даже после внесения этого изменения вы можете увидеть00:54:48
что мы получили основное уведомление, которое00:54:51
отлично, сейчас я откажусь от этого, так как00:54:53
сначала мы собираемся подключиться позже00:54:55
давайте добавим наш смарт-контракт в нашу00:54:58
интерфейсное приложение, которое мы собираемся сделать00:55:00
это создав новую пустую папку00:55:03
внутри исходной папки под названием00:55:05
договор00:55:07
внутри него мы собираемся создать00:55:10
новый файл index.js00:55:12
вот нам нужно будет это экспортировать00:55:15
адрес, который мы сохранили ранее, так что он будет00:55:18
быть экспортным константным адресом, и все будет готово00:55:22
быть равным пустой строке и00:55:24
наконец-то мы можем вернуться в Web 3. ЭнВ00:55:28
и мы можем скопировать этот адрес контракта, который мы00:55:30
сохранил и удалил его отсюда, обязательно00:55:33
скопировать адрес контракта, а не00:55:35
закрытый ключ и, наконец, вы можете вставить его00:55:38
вот еще кое-что, что мы сделаем00:55:40
нужно сделать, и это взять00:55:43
контракты артефактов, а затем скопировать и00:55:46
вставьте havax gods.json прямо внутрь00:55:50
нашей папки контракта, поэтому просто перетащите00:55:53
и брось это прямо сюда, а затем внутрь00:55:55
индекс, который мы можем импортировать00:55:58
контракт на импорт из dot slash evox00:56:02
gods.json, а затем мы сможем экспортировать ABI00:56:06
из этого контракта, поэтому экспортируйте const00:56:08
внутри объекта ABI, равный ABI в00:56:12
заглавные буквы или просто двоеточие справа00:56:15
здесь и тогда равно контракту00:56:19
если вам интересно, что такое API00:56:21
ABI — это двоичный интерфейс приложения.00:56:24
это контекст, который вы можете рассматривать как00:56:27
интерфейс между двумя программными модулями00:56:29
по сути, это позволяет нашей интерфейсной стороне00:56:32
для вызова функций, которые у нас есть00:56:34
созданный внутри нашего смарт-контракта, мы00:56:37
это нужно для правильного сопряжения двух00:56:39
с учетом сказанного, теперь мы можем вернуться внутрь00:56:42
нашего контекста, и мы действительно можем передать00:56:44
правильные значения, конечно, давайте00:56:47
сначала импортируйте их, чтобы вверху мы могли00:56:50
скажи импорт00:56:52
ABI и адрес все с заглавной буквы, начиная с точки.00:56:57
слэш, это будет контракт00:57:02
и, наконец, мы можем передать их прямо здесь00:57:05
новый контракт на эфиры, который мы передадим00:57:08
адрес00:57:10
ABI и подписывающее лицо, вот и все00:57:15
нам нужно правильно создать новый00:57:17
договор00:57:18
и что мы собираемся с этим делать00:57:19
контракт, давайте установим его в штат00:57:22
чтобы мы могли использовать его позже00:57:24
Я собираюсь создать два новых поля состояния00:57:27
использовать состояние00:57:29
это будет провайдер00:57:32
установил провайдера и вначале все идет00:57:35
быть установлен в пустую строку, а также00:57:37
использовать состояние00:57:40
контракт, набор контрактов, и всё пошло00:57:44
также будет установлена пустая строка00:57:47
наконец-то мы можем прокрутить вниз и сделать это00:57:49
скажем, поставщик установки00:57:51
и мы собираемся передать новый00:57:53
поставщика, и мы можем сказать, установили контракт и00:57:56
принять новый контракт, что означает00:57:58
что мы успешно устанавливаем эти00:58:00
значения для состояния и, как вы можете видеть00:58:02
обновить текущий адрес кошелька, где00:58:05
мы запрашиваем учетные записи сейчас на самом деле00:58:08
появляется прямо здесь, так что давайте нажмем00:58:10
одобряю отлично, это означает, что у нас есть00:58:14
подключили наш кошелек к нашему приложению00:58:16
теперь это приложение не собирается00:58:18
зайдите снова вместо входа в консоль00:58:21
счета, давайте установим их состояние00:58:23
поэтому мы можем сказать, если00:58:24
Счета00:58:26
затем установите адрес кошелька на ноль учетных записей00:58:32
потому что мы хотим установить только первый00:58:34
один теперь мы хотим вызвать эту функцию в00:58:36
первая перезагрузка, которая происходит здесь и00:58:39
мы также можем вызывать его всякий раз, когда меняем00:58:41
кошелек внутри ядра, потому что ядро дает00:58:44
нам возможность сделать это00:58:46
скажем, окно Dot Ethereum00:58:50
расставить точку00:58:52
учетные записи изменены00:58:55
там мы хотим назвать обновление текущим00:58:58
адрес кошелька тоже идеален, теперь мы00:59:02
установили два разных эффекта использования00:59:04
раз уж нас будет много, давайте00:59:06
правильно документировать их первый00:59:08
вот здесь, что на самом деле является функцией00:59:10
вызывается внутри эффекта использования00:59:12
давайте скажем так00:59:14
установите адрес кошелька в состояние00:59:18
вот что он делает, а потом это00:59:21
один прямо здесь, он будет использоваться для00:59:25
установка, а установка смарт-контракта00:59:30
и поставщик государству00:59:33
и теперь вы можете свернуть их,00:59:35
щелкните стрелку прямо здесь00:59:37
это облегчит нам00:59:40
продолжить разработку нашего приложения как00:59:42
у нас будет много функций00:59:43
и много эффектов использования, но отличная работа00:59:46
на данный момент наш кошелек действительно подключен00:59:49
этого само по себе должно быть достаточно, чтобы пройти00:59:52
эти данные в наш домашний компонент и00:59:55
начнем подключать нашего первого пользователя, так что давайте00:59:58
сделайте именно это, если мы перейдем к значению вправо01:00:01
здесь мы можем передать наш контракт как один из01:00:05
реквизит и адрес кошелька в качестве01:00:08
второй01:00:09
возвращаясь домой, мы теперь можем получить01:00:12
этот контракт и адрес кошелька01:00:15
прямо из контекста я думаю, что01:00:18
теперь ты можешь увидеть силу того, чем мы являемся01:00:20
Следующее, что нам нужно сделать, это01:00:23
создайте этот ввод, а также01:00:25
кнопку регистрации, чтобы мы могли успешно01:00:28
регистрируйте пользователей в нашей замечательной игре01:00:31
давайте начнем с того, что дадим этому разработчику01:00:34
имя класса01:00:35
равен гибкому и гибкому угольу Dash внутри01:00:40
здесь мы хотим отобразить два пользовательских01:00:42
компоненты, первый в списке01:00:45
будет индивидуальный многоразовый01:00:48
самозакрывающийся тег ввода, конечно, это01:00:52
компонент еще не существует, но мы01:00:54
собираюсь создать его прямо сейчас, поехали01:00:57
в наши компоненты давайте создадим новый01:01:00
обычай01:01:02
input.jsx и давайте запустим rafce внутри01:01:06
вот давайте перейдем к индексу01:01:08
компоненты теперь внутри компонентов01:01:11
index.js мы можем экспортировать только что созданный01:01:14
пользовательский компонент ввода, импортировав его01:01:16
здесь01:01:17
пользовательский ввод, и тогда, наконец, мы сможем01:01:21
экспортируйте его, поехали, давайте сохраним его.01:01:25
вернуться к домашнему компоненту01:01:27
и здесь мы можем импортировать пользовательские01:01:30
входной компонент из компонентов давайте01:01:34
сохраните его и вернитесь в наше приложение01:01:37
и если вы перезагрузите страницу, вы должны быть01:01:39
возможность видеть пользовательский ввод прямо здесь, в01:01:43
Черные буквы, теперь давайте создадим собственный01:01:46
штат прямо здесь, внутри дома01:01:48
назвал имя игрока01:01:50
здесь будет использоваться имя игрока штата01:01:54
и задайте имя игрока прямо здесь и01:01:57
наконец, он станет пустым01:01:59
строка в начале01:02:02
теперь на этот вход мы можем передать метку01:02:05
равно имени01:02:08
мы также можем передать заполнитель, равный01:02:11
чтобы ввести свое имя игрока01:02:14
мы также можем передать значение, равное01:02:17
изменение имени игрока и значения дескриптора01:02:21
равнозначно установке имени игрока в этом пользовательском режиме01:02:25
вход будет невероятно01:02:27
многоразовый компонент, поэтому мы сразу01:02:29
передавая все как реквизит и, наконец,01:02:32
нам, конечно, придется импортировать использование01:02:35
состояние от реакции вот и мы теперь можем01:02:39
перейдите в пользовательский компонент ввода и01:02:41
мы можем начать его развивать01:02:43
не волнуйся, это будет красиво01:02:45
простой01:02:46
обо всем по порядку, нам нужно импортировать01:02:49
стили из точечной косой черты Стили, которые мы собираемся01:02:54
чтобы также создать определенный регулярный01:02:56
выражение, так что назовем его регулярным выражением01:02:59
начинается с косой черты01:03:01
тогда у нас есть знак морковки01:03:04
внутри квадратных скобок у нас есть от А до Я01:03:08
все в верхнем регистре, тогда у нас есть от A до Z01:03:12
строчными буквами, а затем от 0 до 9, вот так, и01:03:17
тогда мы можем поставить плюс и знак доллара01:03:20
и мы можем закрыть его другим нападающим01:03:22
слэш вот это обычное дело01:03:25
выражение для всех символов, которые01:03:28
в пределах от А до Я заглавные от А до Я строчные буквы01:03:31
или цифры, это единственные действительные01:03:34
вместо этого символы для нашего имени игрока01:03:37
из наших пользовательских данных мы также принимаем01:03:39
некоторые реквизиты, которые мы отправили ранее, например01:03:42
Значение заполнителя метки и значение дескриптора01:03:46
меняемся, мы передаем их прямо из дома01:03:50
наш компонент будет пустым01:03:53
фрагмент реакции, внутри которого мы находимся01:03:55
будет лейбл, этот лейбл01:03:58
будет иметь свойство html4, равное01:04:01
имя в такой строке01:04:03
тогда мы дадим ему имя класса01:04:05
равно точечной метке стиля, и мы01:04:09
будет передан настоящий ярлык в01:04:12
как видите, у нас правильное имя01:04:14
вот, наконец, мы собираемся создать01:04:16
самозакрывающийся тег ввода ниже, давайте дадим01:04:19
это тип, равный тексту01:04:21
давайте дадим ему заполнитель, равный01:04:24
заполнитель01:04:25
прямо сейчас мы можем увидеть что-то01:04:27
но, конечно, это пока не выглядит хорошо01:04:30
давайте добавим значение, равное Value, давайте01:04:34
добавить свойство при изменении и это01:04:36
изменение будет равно обратному вызову01:04:39
функция, в которой мы получаем событие, но затем01:04:42
нам нужно проверить, есть ли точка e Target dot01:04:45
значение не пустое01:04:48
или если01:04:50
регулярное выражение.тест01:04:53
e.target.value означает, проходит ли оно наше01:04:55
тест на то, чтобы быть только персонажем или01:04:59
номер, только если это так, мы можем01:05:01
вызвать изменение значения дескриптора и предоставить01:05:04
целевое значение сейчас, если вы попытаетесь ввести01:05:06
буквы или цифры, это сработает01:05:09
но если вы попробуете использовать специальные символы01:05:11
оно не позволит тебе это01:05:13
именно то, что мы хотели, наконец, давайте01:05:15
дайте ему имя класса01:05:18
равно вводу точки в стилях01:05:22
отлично, это выглядит намного лучше01:05:25
Мне это нравится, конечно, это не так01:05:28
пока есть функциональность, но она скоро появится01:05:30
теперь, конечно, для каждого ввода также требуется01:05:34
кнопка, которая что-то с этим делает01:05:35
ввод, поэтому нашей следующей задачей будет01:05:38
иди домой и прямо здесь мы сможем творить01:05:41
компонент пользовательской кнопки, самозакрывающийся01:05:45
тег, он будет принимать заголовок в качестве01:05:48
реквизит, который будет говорить о регистрации01:05:50
он примет щелчок ручки01:05:54
который сейчас мы собираемся установить как01:05:56
пустая функция обратного вызова01:05:57
и он также примет отдых01:06:00
Стили, которые будут конкретными01:06:03
стили для этой конкретной кнопки и01:06:05
в качестве маржи будет установлено значение МТ601:06:08
наверх, конечно, если мы сохраним это, это01:06:11
не сработает, потому что кнопка01:06:12
не существует, но давайте продолжим и01:06:14
создать это01:06:15
внутри компонентов мы можем создать новый01:06:18
файл под названием01:06:20
button.jsx или, скорее, мы назвали его custom01:06:23
кнопка.jsx01:06:25
запустим rafce и давайте также экспортируем его из01:06:29
индекс01:06:30
это будет прямо здесь, по обычаю01:06:33
кнопка из пользовательской кнопки с точкой и косой чертой и01:06:37
мы добавили прямо здесь и сейчас, если вернемся назад01:06:41
и перезагрузить страницу нам, конечно, придется01:06:44
вернись домой и импортируй это отсюда01:06:48
обычай01:06:50
кнопка, и вот, написано: «Пользовательский»01:06:53
кнопка, но она еще не настроена, как мы01:06:56
не стилизовал его, поэтому давайте перейдем к01:06:59
папку компонентов и давайте откроем папку01:07:01
пользовательскую кнопку, и давайте сразу перейдем к01:07:04
кнопка будет четной01:07:06
проще, чем ввод внутри здесь, мы01:07:09
можно импортировать стили из стилей с косой чертой01:07:13
и мы можем сразу принять все01:07:16
реквизит, который мы передали, например, заголовок01:07:20
обработать щелчок01:07:22
и стили отдыха01:07:26
и мы можем ими воспользоваться01:07:28
мы собираемся вернуть простую кнопку01:07:31
компонент01:07:33
кнопка будет иметь тип равный01:07:36
застегивать01:07:38
у него будет имя класса, равное01:07:41
строка шаблона, в которой будет написано01:07:44
Styles.btn, а также остальные стили01:07:49
и, наконец, мы собираемся дать этому возможность01:07:51
щелкните равно, чтобы обработать щелчок и давайте01:07:54
передайте заголовок, как только мы это сделаем01:07:57
и сохраните, вы увидите кнопку регистрации01:08:00
прямо здесь и сейчас кажется, что мы отдыхаем01:08:03
стили не применяются, потому что мы01:08:06
не вижу этого верхнего края, так что пойдем01:08:08
вернуться домой01:08:09
и остальные стили выглядят так, как будто я набрал rest01:08:13
напишите вот это должно было быть01:08:15
остальные стили, и вот, теперь у нас есть01:08:19
красивая домашняя страница с вводом и01:08:22
кнопка регистрации, но, конечно, мы01:08:25
просто погружаемся в действие, как сейчас01:08:27
чтобы реализовать клик по дескриптору для нашего01:08:30
кнопку регистрации, чтобы фактически зарегистрировать наш01:08:34
пользователь в том, что дамы и господа01:08:37
будет нашим первым взаимодействием с умным01:08:40
контракт сегодня я показал вам, как01:08:42
установил приложение смарт-контракта и развернул01:08:45
Я показал вам, как создать более высокий порядок01:08:46
компоненты и инициализировать этот замечательный01:08:49
приложение, но теперь мы на самом деле01:08:51
взаимодействуя со смарт-контрактом, мы01:08:54
можем настроить себя на успех,01:08:57
создание новой функции щелчка по дескриптору01:08:59
константный дескриптор щелчка01:09:01
равно01:09:03
асинхронная функция, подобная этой, и теперь, наконец,01:09:07
конечно, мы можем вызвать его, когда нажмем01:09:10
кнопка, чтобы мы могли передать дескриптор01:09:12
щелкнуть01:09:13
Прямо здесь01:09:15
феноменально, давай сделаем наш первый01:09:17
взаимодействие со смарт-контрактом для01:09:20
начните взаимодействовать с нашим умным01:09:22
контракт мы собираемся создать попробовать и01:09:25
catch блок, потому что иногда01:09:28
запросы, которые мы пытаемся сделать спереди01:09:29
конец не будет успешным, поэтому мы01:09:32
должны правильно отловить эти ошибки для01:09:36
теперь давайте просто предупредим об ошибке правильно01:09:38
здесь и позже мы собираемся создать01:09:40
правильная обработка ошибок в модели01:09:43
это выскочит и скажет: «Эй, ты»01:09:46
есть ошибка, но что более важно01:09:47
что произойдет, если мы01:09:50
успешным, поэтому прямо здесь мы можем создать01:09:53
позвонить по новому контракту, сказав «жду»01:09:56
Контрактная точка - это игрок, которого мы называем01:10:00
функция, и мы предоставляем адрес кошелька01:10:04
в качестве параметра, и откуда я узнал01:10:07
откуда я узнал, что есть01:10:10
функция игрока и которую нам нужно передать01:10:12
адрес кошелька в качестве параметра01:10:14
наконец-то сейчас самое время, когда мы собираемся01:10:17
вернуться в нашу сеть 3 стороны дела01:10:19
мы собираемся открыть наши контракты и01:10:22
открой авакс gods.soul, здесь мы01:10:26
собираюсь использовать элемент управления или команду F01:10:28
и мы собираемся найти игрока01:10:32
функция, посмотрим, где она объявлена01:10:35
в данном случае это будет первое01:10:37
экземпляр его возникновения, и это01:10:39
будет в строке 66. Итак, давайте объясним01:10:43
Это функция-плеер, который принимает01:10:46
параметр типа адреса, который01:10:49
называется addr, это публичная функция01:10:52
это означает, что мы можем вызвать его из01:10:53
снаружи, и он вернет01:10:56
Логическое значение, поэтому мы это тоже знаем, если слой01:10:59
информация при доступе к этому конкретному01:11:02
адрес равен нулю, это означает, что01:11:04
игрок по этому адресу не01:11:06
существуют, поэтому мы собираемся вернуть false01:11:08
иначе мы вернем true01:11:10
окей, это довольно просто начать с01:11:13
так что теперь мы можем вернуться, мы знаем, что это01:11:16
функция возвращает логическое значение, поэтому мы01:11:18
могу сказать константа01:11:20
игрок существует равен весу01:11:24
Контракт Дот - отличный игрок, и я01:11:27
собираюсь сделать это немного больше, так что01:11:29
все умещается в одну строку01:11:31
и мы можем свернуть и это там01:11:34
мы идем, и теперь у нас есть переменная, которая01:11:37
сообщает нам, если игрок под этим01:11:39
адрес уже создал игрока01:11:42
аккаунт, чтобы мы могли сказать, нет ли игрока01:11:45
существует01:11:46
в этом случае мы можем вызвать новую функцию01:11:49
в этом случае второй пилот GitHub заполняется автоматически01:11:52
это для меня, но давай напишем это еще раз01:11:54
время, я подожду01:11:56
контрактный игрок с регистрацией точек01:12:00
мы собираемся передать имя игрока01:12:02
это имя игрока взято отсюда01:12:04
ввод, который мы создали прямо здесь, давайте01:12:07
посмотрим, что еще нам нужно передать01:12:09
функция, так что еще раз мы собираемся01:12:11
вернемся к контракту и мы поедем01:12:13
для поиска зарегистрированного игрока01:12:16
строка 150 принимает пару01:12:19
различные параметры, свойство, называемое01:12:22
имя, а также свойство под названием game01:12:25
имя токена, так что давайте передадим и его в01:12:28
в этом случае игровой жетон может быть одинаковым01:12:30
в качестве имени игрока это совершенно нормально и01:12:33
мы можем вернуться к смарт-контракту и01:12:35
сначала изучите, что делает эта функция01:12:38
все, когда видишь, требует солидности01:12:41
это своего рода проверка, заявление, которое01:12:43
может выбросить нас из вызова функции, поэтому01:12:46
в этом случае мы хотим потребовать, чтобы01:12:48
игрок еще не зарегистрирован, и мы01:12:51
можно сделать это, вызвав функцию, которую мы01:12:53
видел как раз перед функцией is player01:12:56
так что прямо здесь мы говорим, что если нет, то01:12:59
сообщение игрока, что отправитель означает01:13:01
тот, кто пытается позвонить, тогда01:13:04
мы уже собираемся сказать игрок01:13:06
зарегистрированный01:13:07
если это не так, мы можем продолжить01:13:09
с функцией, и здесь мы01:13:11
собираюсь дать ему идентификатор подчеркивания, где01:13:13
мы собираемся дать ему идентификатор, равный01:13:15
текущее количество игроков01:13:17
затем мы собираемся подтолкнуть игрока к01:13:20
массив игрока, создав экземпляр01:13:22
игрока с адресом игрока a01:13:26
имя, а затем значения 10 25 и01:13:29
ложь, что это за значения, давайте01:13:32
Control или Command нажмите на плеер и01:13:35
здесь мы видим, что это01:13:36
мана и здоровье игрока, а также01:13:40
Логическая переменная, которая говорит, мы01:13:42
сейчас в бою, поэтому возвращаюсь, Мана01:13:45
10, здоровье 25 и тогда нас нет01:13:49
сейчас в бою, как только мы это нажмем01:13:51
плеер, который мы собираемся просто создать01:13:53
отображение информации об игроке, и мы собираемся01:13:55
также автоматически создать случайную игру01:13:57
жетон и, самое главное, мы собираемся01:14:01
генерировать событие нового игрока, которое является наиболее01:14:05
важная часть этого регистра игрока01:14:07
функция, потому что мы сможем слушать01:14:09
к событию нового игрока на интерфейсе01:14:11
и тогда мы сможем получить его и01:14:14
затем сделай что-нибудь на основе этого события01:14:16
теперь идеально, когда мы знаем, что поехали01:14:19
вернемся домой и давай закончим это01:14:21
функция01:14:22
конечно, нам нужно что-то показать01:14:24
пользователь во время работы этой функции01:14:26
выполнено, так что сейчас, возможно, лучшее время01:14:28
для создания наших оповещений как об ошибках, так и01:14:32
за успешные сообщения, так что давайте вернемся01:14:35
в наш индекс, наш контекст и право01:14:38
здесь давайте создадим новое состояние использования01:14:41
это состояние использования будет называться01:14:44
показать оповещение01:14:46
а также установить оповещение о показе и в начале01:14:49
это будет объект, который собирается01:14:52
иметь статус, равный ложному значению01:14:55
в настоящее время он не показывает тип, равный01:14:58
информация, а также сообщение, равное01:15:02
пустая строка, теперь мы будем прокручивать01:15:04
вниз, и мы собираемся создать еще один01:15:07
использовать эффект01:15:08
так скажем, использовать эффект01:15:10
на этот раз работает функция обратного вызова01:15:13
иметь что-то в зависимости01:15:15
массив означает, что он будет меняться в зависимости от01:15:18
по одному параметру, и этот параметр01:15:20
здесь будет шоу Alert, мы можем01:15:23
проверьте, показывать ли оповещение01:15:27
статус точки вопросительного знака01:15:29
поэтому, если статус в настоящее время верен01:15:32
это означает, что отображается предупреждение, тогда мы01:15:34
хочу создать новый таймер, сказав01:15:37
constimer равен установленному таймауту01:15:41
это будет равно обратному вызову01:15:43
функция, и мы хотим установить show01:15:46
тревога01:15:48
быть равным статусу false01:15:51
введите информацию01:15:53
и сообщение представляет собой пустую строку, означающую01:15:57
мы отменяем это, и это произойдет01:16:00
произойдет в течение пяти секунд, так что прямо здесь01:16:03
чтобы выключить таймер или закрыть01:16:05
выключи таймаут можно сказать 5000. и что01:16:10
это означает, что мы собираемся показать01:16:12
предупреждение, конечно, но мы хотим его закрыть01:16:15
через пять секунд, поэтому мы01:16:17
использование таймера в реакции, когда вы используете01:16:20
таймер, который вы также хотите вернуть01:16:23
а затем вы хотите очистить тайм-аут01:16:25
мимо таймера это всегда хорошо01:16:28
чтобы очистить все таймеры, когда вы01:16:30
установка их внутри использования дает отличный эффект01:16:33
теперь, когда у нас есть оповещение о показе и настроено01:16:35
показать предупреждение, мы можем передать эти значения01:16:38
прямо в нашем контексте это будет01:16:41
показать оповещение01:16:42
и установите оповещение о показе, что означает, что мы01:16:46
можем использовать их внутри нашего дома01:16:48
компонент прямо сейчас, просто получив01:16:50
их сверху, в данном случае мы01:16:52
понадобится только установленное оповещение о показе01:16:56
и мы собираемся установить это прямо здесь01:16:58
после того, как наше ожидание закончится, мы прямо здесь01:17:02
можно сказать установить оповещение о показе01:17:05
мы собираемся передать объект01:17:07
давайте передадим статус true, как мы это делаем01:17:10
хочу показать это, давайте передадим тип01:17:12
равно информации, потому что у нас еще нет01:17:16
зарегистрировал игрока, мы просто01:17:17
регистрируем его, поэтому хотим показать некоторые01:17:19
информация и пока не успех01:17:21
сообщение01:17:22
и, наконец, давайте также предоставим сообщение01:17:25
это будет что-то вроде01:17:28
строка шаблона01:17:30
имя игрока01:17:32
нас вызывают, мы идем01:17:35
теперь это отлично подходит для сообщений об ошибках, которые я01:17:40
были некоторые проблемы с этой ошибкой01:17:42
сообщения будут приходить странные01:17:43
формате, и нам нужно проанализировать их перед01:17:46
показываю их на экране01:17:48
так что давайте попробуем, давайте попробуем01:17:50
я думаю, намеренно дошёл до ошибки01:17:53
мы сможем добиться этого01:17:55
вводим имя, например test, прямо здесь01:17:57
нажав зарегистрироваться01:18:00
и начнем контракт, точка — игрок01:18:03
не является функцией, поэтому в этом случае мы получаем01:18:06
ошибка, которой я не ожидал01:18:09
вот здесь написано, что нет01:18:11
функция игрока по нашему контракту, право01:18:14
вот так давай перезагрузим экран01:18:16
давай попробуем еще раз и да, все равно01:18:19
то же самое, так что давайте отладим это, я01:18:22
собираюсь добавить оператор console.log правильно01:18:25
вот и я попробую консольно логировать01:18:28
контракт, чтобы проверить, действительно ли он существует01:18:30
Я собираюсь открыть элемент проверки01:18:33
и я положу это внизу, чтобы мы01:18:36
может лучше это увидеть01:18:38
Я удалю это и перезагрузлю страницу01:18:40
кажется, мы уже получаем01:18:42
ошибка прямо здесь, и если мы продолжим01:18:45
тестирование01:18:46
да, все то же самое, новый провайдер01:18:49
точка-подписчик не является функцией, и это01:18:52
происходит внутри умного набора01:18:54
контракт и поставщик, так что давайте вернемся01:18:57
в наш индекс и давайте найдем01:19:00
установить смарт-контракт и обеспечить их использование01:19:02
эффект в данном случае я допустил опечатку01:19:05
здесь вместо подписывающего лица нам нужно поставить01:19:07
получи подпись, это будет хорошо01:19:10
давай сохраним это, ладно, мы все еще получим это01:19:13
ошибка, но теперь, если я наберу тест и нажму01:19:17
окей, поехали, теперь у нас будет другое01:19:19
ошибка прямо здесь, и это хорошо01:19:22
другая ошибка всегда означает, что вы01:19:23
сделал что-то01:19:24
пишет, что резольвер или адрес не являются01:19:27
настроено для имени аргумента имени ens01:19:30
значение недопустимый аргумент01:19:32
и в консоли мы получили01:19:35
контракт, и этот контракт, кажется, имеет01:19:38
все функции, которые мы можем вызвать одну01:19:40
из них должен быть игрок, и мы можем01:19:43
посмотрим, что оно там, давай тоже проверим01:19:46
нашу первоначальную функцию прямо здесь01:19:48
обновить текущий адрес кошелька01:19:53
window.ethereum.request и прямо здесь я01:19:56
метод с ошибкой, вот почему он01:19:58
не удалось запросить учетные записи, давайте просто01:20:00
продолжайте и переключите это на метод01:20:02
перезагрузи и вроде все отлично01:20:05
так что теперь давайте попробуем, давайте попробуем01:20:08
введите имя игрока клик-тест01:20:11
и снова мы хотим протестировать01:20:14
отказ прямо здесь, мы хотим проверить01:20:16
ошибки, поэтому я нажму «Отклонить»01:20:18
и мы получаем объектный объект как01:20:21
ошибка01:20:22
и как видите мы получаем код 4001 и01:20:26
есть сообщение, что пользователь отклонил01:20:29
ошибка, а также у нас есть исходные данные и01:20:33
исходный код есть сообщение, которое мы01:20:35
кажется, хочу извлечь это сообщение01:20:38
довольно просто, поэтому мы можем это сделать01:20:39
вручную, если мы вернемся домой и направо01:20:43
здесь мы можем использовать тот же набор оповещений о показе01:20:47
мы можем это принять, и в этом случае статус01:20:50
будет истинным типом будет01:20:52
ошибка, а затем мы можем поместить сообщение в01:20:56
быть равными, чтобы мы могли сделать, что это такое01:20:59
данные об ошибке или нет, просто error.message01:21:03
так вот здесь ошибка01:21:07
Точечное сообщение отлично, теперь мы в порядке01:21:11
установка оповещений прямо здесь, но мы01:21:14
еще нет компонента, который бы01:21:16
покажи их, чтобы это было наше01:21:18
следующее задание, давайте удалим этот журнал консоли01:21:21
и давайте создадим новый компонент внутри01:21:24
папки компонентов, назовем это01:21:27
alert Dot jsx внутри этого оповещения мы01:21:31
можем запустить refce и импортировать01:21:35
значок оповещения01:21:38
это исходит от01:21:40
ресурсы, которые мы собираемся также импортировать, стили01:21:45
исходит из точечной косой черты. Стилизует наше оповещение.01:21:50
собирается принять две вещи: тип01:21:53
информация об успехе или ошибке и, конечно же,01:21:56
он также примет сообщение01:21:59
наше оповещение будет элементом div, который01:22:02
имя класса будет равно текущему01:22:05
терпите, это будет шаблон01:22:07
строка с контейнером предупреждений о точках Styles01:22:12
а также Styles Dad Flex Center01:22:17
внутри этого div у нас также будет01:22:20
еще один div, у которого будет класс01:22:23
имя снова равно строке шаблона01:22:26
отключена оболочка предупреждения о точках стилей01:22:31
а также стили01:22:33
а затем внутри квадратных скобок введите01:22:36
потому что мы хотим показать старт для01:22:38
Информация об успехе и ошибке в зависимости от01:22:41
какой это, и наконец мы можем01:22:44
отобразить значок оповещения, к которому мы можем01:22:47
передать тип, равный типу и рядом с01:22:51
это мы сможем передать сообщение01:22:53
это будет наша тревога01:22:56
компонент, теперь мы можем его правильно экспортировать01:22:58
здесь из наших компонентов01:23:01
это будет настороже01:23:03
а также внизу01:23:07
наконец-то мы собираемся вернуться в наш01:23:09
страница hoc, потому что мы собираемся использовать01:23:12
это во всем нашем приложении и01:23:14
сюда мы хотим импортировать наше оповещение01:23:17
внутри здесь мы собираемся использовать01:23:19
что-то из контекста, чтобы мы могли сказать01:23:21
Импортировать01:23:22
использовать глобальный контекст01:23:26
из контекста точечной косой черты01:23:29
мы можем получить что-то от этого прямо здесь01:23:31
константа показать оповещение01:23:34
равнозначно использованию глобального контекста и на основе01:23:39
вот здесь, под внутренним01:23:41
открывая div, мы можем сказать01:23:44
если показать оповещение01:23:46
вопросительный знак точка статус: Труди01:23:49
смысл просто существует, тогда мы хотим показать01:23:52
самозакрывающийся компонент оповещения01:23:55
мы собираемся передать тип01:23:58
равно показу типа DOT оповещения01:24:02
а также передать сообщение, равное show01:24:06
предупреждающее точечное сообщение01:24:08
вот и все, если мы перезагрузим это01:24:11
он скажет, что мы должны импортировать01:24:13
компонент оповещений, так что давайте сделаем это01:24:16
это будет предупреждение об импорте из точки01:24:19
косая черта, и вот, кажется, пошло01:24:22
уже показывается, хотя нет01:24:25
сообщение01:24:26
так что теперь давайте вернемся01:24:29
пойдем обратно к нам домой01:24:32
страница или, скорее, контекст нашей01:24:34
приложение01:24:35
статус изначально ложный, так что01:24:38
должно быть хорошо01:24:40
и давайте проверим, установили ли мы его на01:24:42
Правда где-то здесь это тоже ложь01:24:44
поэтому оно не должно отображаться, если мы перезагрузим01:24:47
да, кажется, оно все еще там01:24:50
что, если мы попробуем еще раз инициировать это01:24:53
ошибка, поэтому я нажму прямо здесь01:24:55
и я собираюсь нажать «Отклонить», и мы01:24:58
идем, мы получаем ошибку и уведомление01:25:00
вроде бы здесь есть хотя бы иконка, но01:25:04
это едва видно01:25:05
так что у нас определенно что-то есть01:25:07
исправить это предупреждение, поскольку это не так01:25:10
будучи закрытым, пойдем туда, где мы01:25:12
инициализировал его, который будет в01:25:14
вверху, и похоже, что я установил статус01:25:17
быть строкой false вместо01:25:19
Логическое значение, если мы исправим это, поехали01:25:23
его больше нет, но теперь, если мы попытаемся это проверить01:25:25
избавьтесь от этой ошибки прямо здесь01:25:28
нажав «Зарегистрироваться», а затем отклонив01:25:31
мы еще не видим этого здесь, я имею в виду, я вижу01:25:35
темный значок, но потом это возвращается01:25:38
прямо здесь, так что, скорее всего, да01:25:41
Здесь присутствует логическое значение, а также значение false, поэтому мы01:25:44
просто нужно выразить это как логическое значение, а не как01:25:46
строка, но да, она все еще не отображается01:25:49
Стили такие, какими они должны быть, так что давайте вернемся01:25:52
туда, где мы это называем, то есть прямо здесь01:25:55
статус верен, похоже, это мой01:25:58
плохо, это должно было быть логическое значение01:26:00
ценность и в других местах, и, наконец,01:26:04
сообщение01:26:05
Я только что заметил здесь тип для01:26:07
ошибка должна быть неудачей, так как01:26:10
вот как я определил это внутри стилей01:26:13
так что провал прямо здесь, наконец, давай дадим01:26:16
это последний шанс исправить это сообщение об ошибке01:26:19
тестовый регистр01:26:22
Я откажусь от этого, и поехали01:26:25
хотя сообщение не появляется01:26:27
вот здесь, похоже, что это не так01:26:29
получаю сообщение об ошибке Dot, хотя01:26:32
это здесь, поэтому я сказал, что у меня есть немного01:26:34
проблемы с тем, как работали ошибки, давайте01:26:37
попробуй заблокировать ошибку еще раз01:26:39
время01:26:41
наряду с записью в консоль ошибки Dot01:26:44
сообщение, чтобы увидеть, куда оно исчезает01:26:47
и давайте повторим процесс еще раз01:26:49
время01:26:50
как видите, кажется, что это просто01:26:53
содержит код и ничего больше01:26:56
там мы не можем получить доступ к этим данным правильно01:26:58
вот и сейчас мы можем просто01:27:01
прямо здесь создайте наше собственное сообщение, говорящее01:27:05
что-то пошло не так, а потом позже01:27:07
мы собираемся углубиться в то, как01:27:09
обработать ошибки сейчас, если мы проверим это01:27:12
в последний раз я собираюсь зарегистрироваться01:27:15
и я нажму «Отклонить»01:27:18
и как видите у нас получается красивый01:27:20
сообщение об ошибке, говорящее, что что-то пошло01:27:22
неправильно, это пройдет через пять01:27:25
секунды идеальны, сейчас самое время, когда мы01:27:28
на самом деле проверьте, является ли успешный вызов01:27:31
работаем, поэтому хотим успешно01:27:33
зарегистрируем игрока, чтобы сделать это, давайте добавим01:27:37
настоящее имя, в этом случае я сделаю это01:27:39
JS Mastery и я собираюсь щелкнуть01:27:42
зарегистрируйся и наконец я нажму01:27:44
утвердить01:27:46
мы видим, что здесь вызывается JS Mastery01:27:49
процесс обычно занимает пару01:27:51
секунды01:27:52
и на данный момент нет возможности01:27:55
нам, чтобы проверить, был ли создан наш пользователь01:27:58
вот где события вступают в игру01:28:02
Потому что когда мы регистрируем игрока, мы01:28:06
выдаем событие нового игрока, поэтому у нас есть01:28:10
вернуться к нашему контексту, и теперь мы01:28:13
придется использовать прослушивание событий01:28:15
иметь возможность слушать, что представляют собой наши мероприятия01:28:18
говоря нам, чтобы мы начали работать с нашими01:28:21
события мы собираемся создать новый файл01:28:23
внутри контекстной папки давайте позвоним01:28:27
он создает прослушиватели событий.js01:28:32
внутри здесь мы можем импортировать01:28:35
эфиры, исходящие из эфиров, мы также можем01:28:39
импортировать API, полученный с помощью точечной косой черты01:28:44
контракт, это будет все, что мы01:28:46
нужно на данный момент, и мы можем создать специальный01:28:49
функция, называемая добавлением нового события, это01:28:53
функция собирается принять что-то01:28:55
известный как фильтр событий01:28:58
провайдер и обратный вызов или CB для01:29:02
короче, и что мы хотим с этим сделать?01:29:04
ну, мы хотим прежде всего сказать01:29:07
поставщик точка удаляет прослушиватель, и мы хотим01:29:11
передать в фильтр событий01:29:13
эта линия гарантирует, что не01:29:16
иметь несколько слушателей на одном и том же01:29:20
событие одновременно, поэтому прежде чем мы добавим01:29:24
новый, который мы собираемся удалить01:29:25
предыдущие, то как только мы удалим01:29:28
предыдущие мы можем назвать провайдером01:29:30
расставить точку01:29:32
фильтр событий01:29:33
мы собираемся получить журналы прямо здесь01:29:36
внутри функции обратного вызова мы хотим01:29:38
чтобы проанализировать эти журналы, сказав const01:29:40
журнал синтаксического анализа равен скобкам new01:29:45
интерфейс ethers dot utils dot01:29:49
с большой буквы и переходим в АБИ01:29:53
зайти внутрь обеих круглых скобок, а затем01:29:56
введите журнал синтаксического анализа, и мы, конечно, хотим01:29:59
передать логи, это встроенная функция01:30:01
функциональность эфиров, наконец, мы хотим01:30:04
передавать логи как первый и единственный01:30:06
параметр нашей функции обратного вызова I01:30:09
знаю, это было грязно, но поверь мне, это01:30:11
очень скоро обретет смысл, как только мы01:30:14
начните создавать все эти события01:30:15
слушатели, так что давайте сделаем это, давайте01:30:18
создать новую функцию экспорта константы01:30:22
создать прослушиватели событий01:30:26
это будет функция, которая будет работать01:30:28
чтобы позже принять несколько параметров для01:30:31
теперь нам не нужно ничего принимать01:30:34
и первое, что мы собираемся сделать, это01:30:36
мы собираемся вызвать здесь const01:30:38
фильтр событий нового игрока01:30:43
мы собираемся установить это равным01:30:44
контракт точечные фильтры точка новый игрок так01:30:50
когда вы создаете договор и указываете01:30:52
событие для этого контракта, такое как01:30:55
событие для нового игрока, которым ты сразу же станешь01:30:58
возможность фильтровать звонки для этого01:31:01
контракт, и это именно то, что мы01:31:03
делаю прямо здесь и сейчас, это не пойдет01:31:05
работать сразу же, потому что мы01:31:07
у вас еще нет доступа к01:31:09
контракт в этом файле, но давайте продолжим01:31:12
с логикой, а затем мы сможем импортировать01:31:13
контракт через реквизит01:31:16
и теперь, когда у нас есть фильтр, мы можем01:31:19
вызовите функцию добавления нового события, которую мы01:31:22
создано выше01:31:24
и мы собираемся передать новый01:31:26
фильтр событий игрока01:31:30
вот и все, наконец, нам нужно пройти01:31:33
провайдер в качестве второго реквизита, а затем мы01:31:36
иметь функцию обратного вызова внутри01:31:38
эта функция обратного вызова, помните, что мы01:31:40
передача журналов синтаксического анализа, чтобы мы могли01:31:43
деструктурируем это, и тогда мы получим дуги или01:31:46
аргументы, короче01:31:48
наконец-то мы можем вызвать журнал01:31:51
новый игрок01:31:53
созданный01:31:55
а затем мы также можем консольно записать01:31:57
дуги, пока мы здесь, почему бы тоже не показать01:32:00
уведомление или предупреждение, чтобы мы могли сказать01:32:03
если01:32:04
адрес кошелька01:32:06
втрое равно01:32:09
В этом случае мы можем установить владельца точки дуги01:32:13
показать оповещение01:32:16
мы собираемся сделать статус правдивых, мы01:32:19
собираюсь добиться определенного успеха01:32:22
и мы можем сделать сообщение01:32:24
равно01:32:26
игрок был01:32:29
успешно01:32:31
зарегистрированный01:32:33
начнем, и теперь мы добавили новое событие01:32:36
слушателей, но, как вы можете заметить, наши01:32:39
контракт не определен, наш провайдер01:32:42
не определен адрес нашего кошелька не01:32:45
определено, потому что эта функция не01:32:47
в нашем контексте нам еще предстоит назвать это01:32:50
вот и давайте сделаем это над нашим01:32:53
использовать эффект для оповещений, которые мы собираемся01:32:55
создать новый эффект использования01:32:59
эффект от использования будет иметь01:33:01
функция обратного вызова, и сейчас мы01:33:03
собираюсь оставить массив зависимостей01:33:05
пустой01:33:06
здесь мы проверим, есть ли01:33:08
контракт существует, и в этом случае мы01:33:12
собираюсь вызвать прослушиватели событий создания01:33:15
функция01:33:16
также вам нужно обязательно импортировать его01:33:18
вверху импортируйте создание прослушивателей событий01:33:21
из создания прослушивателей событий я просто01:33:24
заметил, что у меня здесь опечатка, так что01:33:26
это будет событие прямо здесь01:33:29
вот и все01:33:31
а также обновить его здесь01:33:34
теперь мы можем вызвать эту функцию и внутри01:33:37
объекта мы можем предоставить все01:33:39
реквизит, который нам нужно использовать внутри01:33:41
там будет один из реквизитов01:33:43
навигация, которую мы собираемся пройти01:33:45
контракт мы собираемся также передать01:33:47
провайдера, мы также можем передать кошелек01:33:51
адрес01:33:52
давайте также передадим установленное оповещение о показе01:33:57
и на этом пока всё01:33:59
теперь, если мы вернемся, мы получим все01:34:02
эти значения через реквизит, так что давайте сделаем01:34:04
используя их, мы попадаем внутрь01:34:07
объект, который вам нужно деструктурировать, перемещаться01:34:11
договор01:34:13
поставщик01:34:15
адрес кошелька01:34:17
и установите оповещение о показе01:34:20
здорово, это должно сделать наше мероприятие01:34:23
слушатели работают01:34:25
так что, надеюсь, мы сможем01:34:27
переинициализируем наш плеер точнее01:34:29
если они скажут, что мы не сможем01:34:31
инициализировать нового игрока, потому что под01:34:33
этот адрес, который мы зарегистрировали01:34:35
вот здесь мы уже создали плеер01:34:38
раньше, когда мы этого не слушали01:34:40
но все же оно было создано, так что давайте дадим01:34:43
это еще одна попытка, я собираюсь01:34:46
перезагрузить страницу01:34:47
введите мастерство JS01:34:50
и я собираюсь нажать кнопку «Зарегистрироваться», но как01:34:52
ты видишь, что ничего не происходит01:34:55
потому что мы уже дома01:34:57
проверка, существует ли плеер прямо здесь01:34:59
и похоже, что это так, но это не так01:35:02
позволяя нам делать то, что нам нужно, и01:35:06
ничего страшного, потому что позже нам понадобится01:35:08
в любом случае протестировать с несколькими игроками, так что01:35:10
что мы можем сделать, это зайти в ваш основной кошелек01:35:12
нажмите прямо здесь под своим именем и01:35:15
нажмите добавить аккаунт01:35:17
в данном случае это даст мне01:35:19
пара уведомлений01:35:21
я закрою кое-что01:35:25
и я собираюсь улучшить свой аккаунт01:35:29
теперь мы можем вернуться к нашему первому01:35:31
счет01:35:32
и мы можем нажать кнопку «плюс» на01:35:35
Нижний правый01:35:36
давайте отправим немного средств, в этом случае я01:35:39
собираюсь выбрать свою учетную запись я собираюсь01:35:41
выберите второй аккаунт01:35:42
и давайте отправим его около 0,401:35:46
авакса должно быть достаточно01:35:48
и давайте нажмем «Далее» и отправим сейчас01:35:52
вам нужен Avax, чтобы иметь возможность делать что-либо01:35:54
транзакции и зарегистрировать пользователя как01:35:57
хорошо01:35:58
так что перейдем ко счету 2 и сразу01:36:01
нам будет предложено подключиться к кошельку, чтобы01:36:04
сайт, который мы хотим сделать01:36:06
теперь, если мы перезагрузим страницу, мы должны быть01:36:09
можно создать нового игрока, так что давайте попробуем01:36:12
в моем случае со счетом 2 и я собираюсь01:36:14
чтобы нажать «Зарегистрироваться», мы получим01:36:17
уведомление, и мы можем нажать «Одобрить»01:36:20
но мы все равно этого не поняли01:36:22
уведомление, хотя мы знаем, что01:36:24
плеер создан, потому что теперь мы01:36:26
не могу нажать кнопку регистрации еще раз01:36:28
скорее всего, причина события01:36:31
прослушиватель не сработал, он снова внутри01:36:34
эффект использования, который мы забыли передать01:36:36
контракт как массив зависимостей здесь и01:36:40
возможно, что в то время как01:36:42
мы пытаемся выполнить это, пока мы01:36:44
пытаясь настроить прослушиватели событий, мы01:36:46
здесь не было контракта01:36:48
существует, потому что его только что установили01:36:51
в состояние, поэтому как только мы добавим это и01:36:54
сохранить, вы можете заметить, что мы получаем много01:36:57
Ошибки, говорящие, что навигация не01:36:59
определенный01:37:01
навигация — это функция, возникшая в результате использования01:37:03
перемещаться01:37:05
чтобы мы могли определить его вверху01:37:07
скажем, константная навигация равна использованию01:37:11
перемещайтесь и называйте это как крючок01:37:15
это решит проблему, и я думаю01:37:17
что в следующий раз мы создадим новый01:37:19
игрок, мы получим уведомление. Мы01:37:22
не буду проверять это сейчас, потому что мы01:37:24
придется создать еще одну учетную запись01:37:26
на данный момент мы довольны и этим01:37:29
конечно, нам придется создать много игроков01:37:30
пока мы тестируем полную функциональность игры01:37:33
Итак, теперь, когда у нас есть игрок, что это такое01:37:36
Следующее, что нам нужно сделать хорошо01:37:39
игроку нечего делать01:37:41
домашняя страница больше нам не нужна01:37:43
перенаправить их на страницу создания битвы01:37:46
так что давай сделаем это, давай вернемся к01:37:49
дома в последний раз и прямо здесь01:37:52
под ручкой нажмите, мы добавим01:37:55
еще один эффект от использования01:37:57
использовать эффект01:37:58
это произойдет, когда01:38:01
контракт меняется, так что мы здесь01:38:03
собираюсь добавить контракт в качестве зависимости01:38:05
массив, а затем мы собираемся создать01:38:08
новая функция проверки константы для игрока01:38:11
токен, и это будет01:38:14
асинхронная функция01:38:16
внутри здесь мы сначала хотим проверить, есть ли01:38:19
игрок существует, поэтому мы и собираемся01:38:22
для вызова той же функции, которую мы вызвали01:38:23
прямо здесь существует константный игрок, равный01:38:26
к весовому контракту точка - игрок01:38:30
и мы можем вставить это сюда01:38:32
затем мы хотим проверить, является ли токен игрока01:38:35
существует и помните, что токен игрока есть01:38:38
создаются одновременно с тем, как мы01:38:41
регистрируют их, чтобы мы могли проверить01:38:43
это, сказав const01:38:45
жетон игрока существует01:38:49
равно весовому контракту01:38:53
токен игрока и мы передаем его в кошелек01:38:56
адрес, который является еще одной функцией01:38:58
внутри нашего смарт-контракта01:39:01
наконец, если оба игрока существуют и01:39:06
токен игрока существует, то мы хотим использовать01:39:11
функция навигации01:39:13
перейти к косой черте, создать битву01:39:16
давай сохраним это01:39:18
в этом случае похоже, что эффект использования01:39:20
не определено, поэтому вверху мы можем импортировать01:39:23
использовать эффект01:39:25
сохрани это01:39:26
вот и мы вернулись01:39:29
и я перезагрузлю страницу01:39:32
мне не казалось, что мы были01:39:34
перенаправлено, поэтому мы можем01:39:37
отменить этот журнал01:39:39
игрок существует, а также токен игрока01:39:43
существует, но, конечно, этого не происходит01:39:45
потому что мы никогда не вызывали чек на01:39:47
функция токена игрока, давайте сделаем это01:39:50
прямо здесь, если контракт существует, то01:39:54
мы хотим вызвать чек для игрока01:39:58
функция токена, вот и все, вот это01:40:02
мне хорошо выглядит01:40:03
и мы получаем, что игрок существует, верно и01:40:07
токен игрока существует, это правда, что01:40:09
именно так, как мы ожидали, но похоже01:40:12
мы забыли определить навигацию, поэтому еще раз01:40:14
время наверху, мы можем импортировать01:40:18
используйте навигацию01:40:20
исходит от реагирующего маршрутизатора Dom01:40:24
мы можем определить это прямо здесь01:40:26
константа навигации равна использованию навигации01:40:30
назови это крючком и теперь оно у нас есть01:40:33
давайте перезагрузим страницу01:40:35
и вот привет от создания битвы01:40:40
это не так уж и здорово, а теперь классная вещь01:40:43
если вы попытаетесь вернуться вручную к01:40:46
косая черта01:40:48
он перенаправит вас обратно на01:40:51
создай битву, потому что у тебя есть01:40:53
подключили свою учетную запись, а также у вас есть01:40:56
феноменальный игрок, что означает01:41:00
что мы готовы к следующему этапу01:41:02
наше приложение, и это позволяет01:41:05
игрок для создания битвы01:41:07
для этого вы можете удерживать Ctrl или команду01:41:10
а затем нажмите w пару раз, чтобы сделать01:41:13
уверен, что вы находитесь внутри своего Visual01:41:15
Код студии, чтобы закрыть все вкладки, если01:41:18
вы нажимаете Ctrl W в Chrome, что01:41:20
закрыл бы вкладку Chrome, чтобы01:41:22
извини, что так случилось, сказал, что мы01:41:25
готовы продолжить работу над нашим приложением01:41:27
и мы продолжим прямо внутри01:41:30
создать битву, чтобы теперь мы могли войти внутрь01:41:33
страниц, и мы можем зайти в create01:41:37
битва, теперь ты видишь, насколько это просто01:41:39
что мы используем страницу более высокого порядка01:41:41
компонент01:41:43
но ты заметишь, что мы тоже01:41:45
создал еще парочку многоразовых01:41:46
компоненты, которые будут01:41:48
пользовательский ввод и пользовательская кнопка, поэтому01:41:51
теперь наша работа станет намного проще01:41:53
с учетом сказанного, давайте начнем работать над01:41:56
для начала создайте новую страницу битвы01:41:59
создадим нашу боевую страницу, давайте сначала01:42:02
импортируйте пару хуков из реакции и01:42:05
они будут использовать состояние01:42:08
а также использовать хакс с эффектами, мы также можем01:42:13
импортировать печально известную01:42:15
используйте навигацию, о которой мы забыли01:42:18
пару раз с роутера React Dash01:42:21
Дэш Дом01:42:22
мы также собираемся импортировать стили01:42:26
исходя из стилей точечной косой черты, мы можем01:42:30
импортируйте глобальный контекст или хук, который мы01:42:34
созданный для глобального контекста, называемого01:42:36
использовать глобальный контекст, полученный из точечной косой черты01:42:40
контекст и поскольку у нас уже есть01:42:43
пара встроенных компонентов, мы можем01:42:45
импортируйте пользовательскую кнопку, а также01:42:49
пользовательский компонент ввода01:42:51
и давайте инициализируем навигацию01:42:53
переменная, чтобы мы не забыли, так что это01:42:56
буду использовать навигацию01:42:59
большой01:43:00
наконец, давайте сосредоточимся на стороне jsx01:43:03
вещи, которые у нас будут пустыми01:43:05
фрагмент реакции прямо здесь и01:43:08
тогда внутри у нас будет01:43:10
div01:43:11
у этого div будет имя класса01:43:14
эквивалентен вызову Flex Flex Dash и mb-501:43:19
для нижнего поля внутри мы01:43:22
собираюсь отобразить пользовательский ввод01:43:24
самозакрывающийся компонент и ниже этого01:43:27
мы собираемся отобразить пользовательскую кнопку01:43:30
самозакрывающийся компонент, если мы сохраним это01:43:33
вы можете видеть, что мы получаем входные данные и01:43:34
кнопку и давайте добавим все01:43:37
необходимые реквизиты, такие как этикетка, которая01:43:40
будет битва, давайте добавим01:43:42
заполнитель, равный имени битвы01:43:46
наконец, нам придется добавить значение, но01:43:50
мы не собираемся инициализировать состояние01:43:51
за это значение внутри создания битвы01:43:54
потому что нам понадобится другое место в01:43:56
другие компоненты, а также то, что мы можем01:43:59
сделать, мы можем перейти к нашему индексу01:44:02
контекст и давайте создадим новое состояние использования01:44:05
поле вверху, поэтому прямо здесь используйте состояние01:44:10
это будет название и набор битв01:44:13
название битвы, равное пустой строке в01:44:16
начало01:44:17
теперь мы можем передать это значение прямо здесь01:44:19
через ценность контекстной битвы01:44:22
имя и установите название битвы01:44:25
теперь возвращаюсь, чтобы создать битву, которая01:44:27
собираемся позволить нам получить пару01:44:29
вещи из контекста01:44:31
такие вещи, как контракт, чтобы иметь возможность01:44:34
звонить по контракту, а также сражаться01:44:37
имя и установите название битвы01:44:42
это равнозначно использованию глобального контекста и01:44:46
мы называем это крючком, теперь мы можем добавить01:44:50
значение пользовательского ввода, равное01:44:53
название битвы, и мы можем добавить дескриптор01:44:56
изменение значения равно установленному названию битвы01:45:01
когда дело доходит до кнопки, мы можем пройти01:45:04
титул, равный созданию битвы, мы можем01:45:07
передать щелчок ручки, который будет01:45:10
быть равным функции щелчка по дескриптору, которую мы01:45:13
еще не создали, но можем прямо сейчас01:45:15
константный дескриптор щелчка равен01:45:19
стрелочная функция01:45:22
и, наконец, мы можем передать стили отдыха01:45:26
равно01:45:27
mt-6, чтобы разделить его на вход, если мы01:45:31
сохраните это, и вы увидите, насколько это просто01:45:33
считал, что у нас есть готовые01:45:35
компоненты и предварительно построенный более высокий порядок01:45:38
компонент теперь у нас есть домашний компонент01:45:40
и создайте боевой компонент сейчас, чтобы01:45:44
мы собираемся пойти еще дальше01:45:46
добавьте дополнительный тег P под этим div01:45:50
это скажет01:45:52
или присоединяйтесь к уже существующим битвам, которые01:45:57
еще одна из функций нашего приложения01:45:59
давай стилизуем это01:46:01
имя класса равно тексту информации о точках стилей01:46:06
и по клику мы хотим создать01:46:09
функция обратного вызова, куда мы собираемся01:46:11
перейдите к косой черте и присоединитесь к Dash01:46:15
боевой01:46:16
если мы сохраним это, вы увидите, что теперь мы01:46:18
есть и это01:46:20
но если мы нажмем на нее, присоединиться к панели не получится01:46:22
еще существуют, поэтому давайте создадим новую страницу01:46:25
называется вступить в бой01:46:29
.jsx01:46:30
и мы, конечно, можем запустить Raf Race01:46:34
и давайте также экспортируем его из нашего индекса01:46:38
так что это будет здесь и здесь01:46:40
и мы можем назвать это вступить в бой01:46:45
наконец, внутри основного мы можем импортировать01:46:48
вступить в бой01:46:51
и вместо этого мы можем дублировать маршрут01:46:54
создать битву, которая будет01:46:57
вступай в бой и прямо здесь вступай в бой01:47:02
если мы сохраним это, мы теперь сможем увидеть это соединение01:47:05
боевой текст, но он еще не просматривается01:47:08
хорошо, но ты уже знаешь, как это сделать01:47:11
мгновенно сделаем его намного лучше, мы01:47:14
просто буду использовать наш более высокий порядок01:47:16
компонент, поэтому давайте продолжим и импортируем01:47:19
пара вещей01:47:20
мы собираемся импортировать предстоящий эффект использования01:47:24
от реакции01:47:25
давайте также импортируем01:47:28
использование навигации01:47:30
исходит от реагирующего маршрутизатора Dom01:47:35
давайте также импортируем использование глобального контекста01:47:39
исходя из контекста01:47:43
давайте импортируем компонент пользовательской кнопки01:47:48
а также страница hoc01:47:53
и это происходит от точечной косой черты01:47:55
компоненты01:47:57
и, наконец, давайте импортируем стили01:47:59
исходя из стилей точечной косой черты01:48:02
отлично, теперь ты знаешь, что мы можем01:48:05
просто оберните сообщение о присоединении страницей01:48:08
hoc, первый параметр - это компонент01:48:11
сам второй - это заголовок, присоединяйтесь01:48:15
б б битва01:48:19
а потом мы создадим еще один01:48:22
для описания, которое будет присоединяться01:48:25
уже существующие сражения, и мы также можем01:48:29
добавьте запятую прямо здесь, если мы сохраним это01:48:33
и перезагрузка01:48:35
вот и мы присоединяемся к боевой странице прямо сейчас01:48:39
готово, и теперь это идеально, если мы нажмем01:48:42
значок в левом верхнем углу, который будет01:48:44
перенаправить нас обратно домой, но помните, что мы01:48:46
иметь мгновенное перенаправление на создание01:48:49
бой, так что теперь мы можем переключаться между01:48:51
эти двое сейчас здесь, давай01:48:54
создать подзаголовок, чтобы показать существующий01:48:57
сражения назовем это элементом H201:49:01
и скажем доступные бои01:49:06
так01:49:07
и давайте дадим ему имя класса01:49:11
равно01:49:13
Стили объединяют точки над текстом заголовка и сохраняют его.01:49:18
вот и все доступные бои, а также01:49:21
внизу давайте добавим тег P, который01:49:24
будет имя класса01:49:27
равен информационному тексту с точкой и стилями01:49:31
и этот тег B собирается сказать или создать01:49:36
новая битва, которую ждет эта кнопка01:49:40
перейдите на страницу создания битвы, чтобы01:49:43
наряду с импортом используйте навигацию, у нас есть01:49:45
чтобы инициализировать его, минусы навигации равны01:49:49
использовать навигацию, и мы можем включить ее01:49:52
щелкнуть01:49:55
равен функции обратного вызова01:49:57
где мы переходим к косой черте01:50:01
создайте Dash Battle и, наконец, мы сможем01:50:05
теперь переключись между ними, не так ли?01:50:09
красиво, и вы можете видеть, как просто01:50:12
это просто из-за того, что мы01:50:15
создал этот компонент более высокого порядка01:50:17
красивый01:50:19
отлично, теперь, конечно, один игрок будет01:50:22
уметь создать битву и другое01:50:25
можно будет присоединиться к существующему01:50:28
битва, поэтому сначала давайте сосредоточимся на01:50:31
создать боевой смарт-контракт01:50:33
функционал для этого мы можем закрыть01:50:36
большую часть файлов и вернитесь к01:50:38
создайте страницу битвы, там мы создали это01:50:42
обработать компонент щелчка, чтобы заполнить его01:50:45
будет нашей следующей задачей, первой01:50:48
нам нужно сделать это01:50:50
функция асинхронная, потому что контракт01:50:52
взаимодействие требует времени, тогда мы хотим01:50:55
убедитесь, что пользователь действительно заполнил01:50:58
в некоторых символах, чтобы мы могли сказать, если нет01:51:01
название битвы01:51:03
или без обрезки точек в названии боя, тогда мы хотим01:51:09
чтобы вернуть ноль, мы хотим выйти из01:51:11
обработать функцию щелчка, иначе мы сможем01:51:14
открыть блок try и catch01:51:17
и мы можем подождать прямо здесь01:51:21
контракт, точка, создай битву, и мы01:51:25
собираюсь передать название битвы, так что сейчас01:51:28
возможно, сейчас лучшее время, чтобы прыгнуть прямо01:51:31
в код смарт-контракта и увидеть01:51:33
как создать функционал боя01:51:35
работает, давайте сделаем это, перейдя в web301:51:39
контракты и давайте искать создавать01:51:42
линия боя01:51:44
218 функция создания битвы, которая принимает01:51:49
название битвы как первое и единственное01:51:51
параметр01:51:52
у нас есть два требования: первое, первое,01:51:56
все игроки должны быть зарегистрированы, мы01:51:58
уже сделал это и, во-вторых,01:52:00
битва будет с таким же названием, должно быть01:52:02
не существовать, окей, это хорошо, тогда что01:52:06
мы делаем, мы создаем специальный01:52:09
боевой хэш, давай погуглим, что это01:52:12
функция, я собираюсь ее вставить01:52:14
прямо здесь, и, как вы можете видеть, это01:52:17
онлайн-хэш-функция, которая будет01:52:20
генерировать конкретный хеш на основе некоторых01:52:22
входные данные, которые мы передаем, поэтому, если вы передаете01:52:25
название битвы, оно будет генерировать01:52:27
хеш этой строки отлично подходит в этом случае01:52:30
мы делаем только то, что передаем это01:52:32
имя, тогда мы создаем новую битву01:52:35
мы инициализируем его в первую очередь01:52:38
мы устанавливаем статус битвы как01:52:40
ожидается, потому что игрок еще не сделал01:52:42
присоединился к битве, мы предоставляем01:52:45
уникальный боевой хэш, который мы предоставляем01:52:47
имя панели и добавляем плеер01:52:50
адреса это адрес01:52:53
игрок, который создал битву, а затем01:52:55
второй игрок, которого мы устанавливаем как01:52:57
адрес 0 означает, что он не существует01:53:00
потому что игрок 2 пуст, пока он01:53:03
присоединиться к битве01:53:04
тогда мы предоставим ходы здесь, в этом01:53:07
будет логической переменной has01:53:10
игрок сделал ход или нет в момент01:53:12
старт оба игрока не добились своего01:53:15
движется, поэтому оно равно нулю, и, наконец, у нас есть01:53:17
адрес победителя в данном случае01:53:19
он пуст, пока битва не закончится01:53:23
затем мы получаем идентификатор битвы, которую мы нажимаем01:53:26
битву в массив битв и01:53:28
тогда мы вернем все отлично, вот и все01:53:31
функционал создания боя и01:53:34
наконец, когда дело доходит до ошибок на данный момент01:53:37
мы можем просто зарегистрировать ошибку в консоли01:53:39
пока мы не реализуем лучшую обработку ошибок01:53:42
теперь, прежде чем мы на самом деле проверим создание01:53:45
боевая функциональность Я хочу создать01:53:49
экран ожидания, потому что битвы нет01:53:52
мгновенно, ты не сразу прыгнешь01:53:54
на поле боя сначала вам нужно01:53:57
подождите, пока к вам присоединится другой игрок01:53:59
вот почему у нас будет особенный01:54:02
экран игры с весом01:54:04
так что прямо здесь мы можем создать новое использование01:54:07
Штат объявил весовую битву и установил01:54:11
весовая битва, и в начале это01:54:13
будет установлено значение false01:54:15
тогда прямо здесь, после того, как мы создадим битву01:54:18
мы хотим, чтобы битва за вес была верной и01:54:23
тогда, основываясь на этом, мы можем01:54:25
визуализировать компонент01:54:27
этот компонент будет называться01:54:30
игра загружена, так что давайте создадим новую01:54:33
компонент под компонентами загрузки игры Dot01:54:36
jsx01:54:38
давайте запустим Rafce внутри и01:54:41
давайте экспортируем этот компонент, как обычно01:54:44
сделай это, это будет загрузка игры01:54:50
отлично, теперь мы можем вернуться к созданию01:54:52
битва, и мы можем импортировать ее сверху01:54:55
мы импортируем другие компоненты01:54:57
уже так давайте добавим загрузку игры в01:55:01
список01:55:02
наконец-то прямо здесь, под этим пустым01:55:05
фрагмент, который мы можем сказать, если бой за вес01:55:08
означает весовую битву и конец, а затем шоу01:55:12
компонент загрузки игры01:55:15
если мы сохраним это и перезагрузим01:55:19
Мы этого не увидим, потому что Уэйд01:55:21
битва ложная, но сейчас давайте настроим ее01:55:24
в True в начале, чтобы мы могли на самом деле01:55:26
посмотрим, как будет проходить битва за вес01:55:28
выглядит как01:55:29
и начнем прямо сейчас, это просто01:55:32
строка с надписью «Загрузка игры, давайте прыгать»01:55:35
в него и давайте реализуем весь01:55:38
jsx нашего компонента загрузки игры, который нужно сделать01:55:41
что мы собираемся импортировать01:55:43
используйте навигацию01:55:46
от01:55:47
реакция-роутер Dash Dom01:55:50
мы также собираемся импортировать пользовательский01:55:52
кнопка, полученная из пользовательского точечного слэша01:55:55
кнопку, которую мы собираемся также импортировать, использовать01:55:59
Глобальный контекст, исходящий из01:56:02
Контекст, который мы также можем импортировать01:56:06
player01 и игрок ноль два, которые01:56:10
исходящие из ресурсов с косой чертой, если мы01:56:14
нажмите контрольную кнопку, чтобы проверить, вы можете01:56:17
увидим, что это первый игрок, если мы его найдем01:56:20
будет этот значок прямо здесь и01:56:24
наконец-то мы сможем импортировать стили, которые появятся в ближайшее время01:56:28
из стилей01:56:31
отлично, наш компонент загрузки игры работает01:56:34
чтобы сразу получить адрес кошелька01:56:38
из контекста, к счастью, он у нас есть01:56:41
вот это будет кошелек01:56:42
адрес01:56:43
равнозначно использованию глобального контекста, и мы01:56:48
также можно инициализировать навигацию, сказав01:56:51
const Navigation эквивалентен вызову01:56:53
использовать навигационный крючок01:56:55
отлично, теперь начнем с макета01:56:58
сначала у нас будет div и это01:57:01
div будет иметь имя класса, равное01:57:04
в строку шаблона, где у нас есть01:57:06
стили расставляют точки Flex между01:57:10
а также стили точечной загрузки игры01:57:15
контейнер, если мы сохраним его, вы сможете увидеть01:57:18
что все перевернется01:57:20
немного фиолетовый цвет, да, это01:57:23
потому что мы хотим показать что-то сверху01:57:25
экрана, потому что мы ждем01:57:27
другой игрок присоединится, а затем внутри01:57:30
там у нас может быть div, который будет01:57:33
иметь имя класса01:57:35
равен стилим, точкам, загрузке игры, коробке BTN01:57:41
и внутри него мы можем визуализировать наши01:57:44
многоразовая пользовательская кнопка с автоматическим закрыванием01:57:48
компоненту мы можем дать ему название, равное01:57:51
выбрать поле боя01:57:54
мы собираемся щелкнуть по нему ручкой01:57:56
равно01:57:59
перемещаться01:58:01
косая черта Поле боя обязательно01:58:05
поместить внутрь функции обратного вызова01:58:07
и мы собираемся дать этому отдохнуть Стили01:58:10
равнозначно пустому сексу Dash, и вот оно!01:58:15
не нажимай на нее сейчас, потому что ты собираешься01:58:16
перейти на страницу, которой еще нет01:58:18
существует, но мы скоро его создадим01:58:20
а сейчас давайте сосредоточимся на том, что важно01:58:23
давайте создадим div под этим div справа01:58:27
здесь01:58:29
у этого Дева будет имя класса01:58:31
равен строке шаблона flex-101:58:36
Стили расставляют точки по центру Flex внутри01:58:41
Динамический блок кода для завивки знака доллара01:58:43
брекеты и гибкий уголь Dash внутри01:58:46
там мы можем показать H1, который собирается01:58:49
иметь имя класса01:58:51
равно01:58:52
шаблонная строка стилей с точкой01:58:57
текст01:58:59
а также текст Dash Center01:59:02
и там будет написано: ожидание01:59:07
затем тег разрыва, а затем мы можем добавить01:59:10
достойный противник да да да вот и все01:59:14
это уже выглядит лучше, мы можем01:59:16
также добавьте тег P ниже01:59:19
и скажите, что имя класса равно Styles01:59:23
точка загрузки игры, и мы можем сказать Pro01:59:28
кончик01:59:30
пока ты ждешь01:59:34
выберите предпочитаемый01:59:37
Поле битвы, вот и все, это довольно01:59:40
круто, позже мы сможем выбрать01:59:43
Поле битвы, на котором мы собираемся01:59:44
битва не так уж и хороша, но сейчас01:59:48
давайте продолжим наш экран ожидания01:59:51
внутри этого div под тегом P мы01:59:54
собираюсь создать еще один div01:59:56
у этого div будет имя класса01:59:58
равно стилям, точка загрузки игры игроков02:00:03
коробка02:00:04
внутри там у нас будет02:00:06
еще один div, у которого будет класс02:00:09
имя02:00:10
знак равенства, фигурные скобки внутри02:00:14
строки шаблона02:00:15
Стили расставляются по центру Flex02:00:19
а также уголь Флекс баш02:00:22
и внутри мы хотим показать02:00:25
image самозакрывающийся тег изображения, который02:00:28
будет источник игрока 0 102:00:32
и имя класса стилей, точка загрузки игры02:00:36
плеер IMG нравится это02:00:40
если мы сохраним это, мы сможем увидеть этого игрока02:00:42
значок появится прямо здесь02:00:45
под ним давайте также добавим тег b с02:00:49
имя класса, равное загрузке игры в точку стилей02:00:53
текст плеера и внутри него давайте02:00:57
отобразить адрес кошелька02:00:59
точечный срез от 0 до 30, чтобы сделать его02:01:03
немного короче, и вот, у нас есть наш02:01:06
адрес кошелька, чтобы мы знали, что это действительно мы02:01:10
наконец, ниже этого div, содержащего P02:01:14
тег, мы можем создать H202:01:16
и там мы можем дать ему имя класса02:01:20
равно количеству точек загрузки игры по сравнению со всеми стилями02:01:25
в верхнем регистре, и там мы можем сказать vs02:01:28
наконец, мы можем продублировать этот div выше02:01:33
вставьте его под vs и теперь мы02:01:36
сделать то же самое для противника02:01:37
игрок, это будет игрок 0 2. и02:01:41
вместо адреса кошелька мы просто02:01:43
собираюсь показать много вопросительных знаков02:01:45
потому что мы еще не знаем, кто пойдет02:01:48
присоединиться02:01:49
так что что-то вроде этого должно сработать, давайте02:01:53
сохраните это и начнем, это выглядит02:01:56
большой02:01:57
вот и все, что касается загрузки игры02:02:00
компонент, теперь мы можем вернуться и можем02:02:03
изначально установите для него значение false, потому что мы02:02:05
еще не дождавшись боя мы02:02:08
еще не создал его, так что теперь будет02:02:11
прекрасное время, чтобы создать новую битву02:02:14
протестируйте функцию создания битвы02:02:16
Итак, давайте введем название битвы, я собираюсь02:02:20
сделай JSM Battle, и я нажму02:02:23
создать битву02:02:26
появляется новое основное уведомление, и я02:02:29
нажму «одобрить»02:02:32
и мы ждем всех02:02:34
противник прямо здесь, а это значит, что мы02:02:38
успешно создали битву сейчас02:02:41
если кто-то перезагрузит страницу, игра02:02:43
нагрузка исчезнет, но02:02:46
битва все еще существует02:02:48
и как вы можете видеть, это действительно так02:02:50
случай, так как бы вы это решили, как02:02:53
не мог бы ты проверить, идет ли уже битва?02:02:55
создано хорошо, нам понадобится02:02:58
объект, который будет отслеживать02:03:01
активный бой, так что давайте двигаться02:03:04
прямо в наш index.js внутри02:03:07
контекст, который мы собираемся создать02:03:09
хотите верьте, хотите нет, еще один эффект от использования02:03:12
этот будет использоваться для установки02:03:16
данные игры в состояние02:03:19
это когда-нибудь пригодится позже02:03:21
мы хотим сопоставить активные игры или02:03:24
если вы хотите проверить, является ли текущий02:03:25
игрок находится в игре, поэтому давайте создадим02:03:28
новый эффект использования02:03:32
и если вам интересно, почему у нас есть02:03:34
так много эффектов использования, если у них есть02:03:37
тот же массив зависимостей, тогда мы могли бы иметь02:03:39
поместите весь код в один и тот же эффект использования02:03:41
ну, всегда лучше остаться02:03:44
организовано, поэтому просто добавьте комментарий выше02:03:47
каждый и разделите их по назначению02:03:50
и не помещайте весь код в один02:03:52
место, где его вряд ли можно будет прочитать02:03:55
с учетом сказанного, это будет02:03:58
выполняется при каждом изменении контракта02:04:02
так что прямо сейчас давайте создадим новую функцию02:04:04
const fetch игровых данных равна02:04:09
асинхронная функция02:04:10
и просто чтобы я не забыл, позволь мне позвонить02:04:12
немедленно прямо здесь принеси игру02:04:15
данные внутри там, мы хотим проверить, если02:04:18
смарт-контракт существует, или мы даже можем02:04:21
сделайте это прямо здесь, не вызывая02:04:24
функция, если это не так, если контракт02:04:27
существует, затем вызовите команду получения игровых данных02:04:29
функция, а затем внутри нее мы02:04:32
хочу сначала получить все доступные бои02:04:36
поэтому const fetched Battles равен a02:04:41
весовой контракт, точка, все сражения02:04:45
опять же, откуда мы знаем, что это существует02:04:48
что ж, давайте вернемся к нашему смарт-контракту02:04:52
и давайте найдем все сражения как02:04:56
вы можете видеть, что это действительно просто02:04:58
функция-получатель, которая просто возвращает02:05:01
массив всех активных боев02:05:04
с учетом сказанного, давайте зарегистрируем это в консоли02:05:06
посмотрим, есть ли там ее бой02:05:09
Хана бревно принесло сражения, давайте спасем02:05:13
это, и давайте перейдем к консоли и проверим это02:05:16
кажется, что мы получаем массив02:05:18
из двух сражений, но первая всего лишь02:05:21
ноль всякий раз, когда вы получаете какие-то данные02:05:23
из смарт-контракта первый02:05:25
элемент всегда будет пустым02:05:28
так что имейте это в виду, мы начинаем с одного02:05:31
в этом случае и так, поверьте02:05:34
или нет Битва JSM уже здесь, и мы можем это увидеть02:05:37
адрес игрока, создавшего02:05:39
великую битву мы тоже можем увидеть02:05:43
статус боя нулевой, что означает02:05:45
что оно ожидается, еще никто не присоединился02:05:47
здорово, будут сражения, которые02:05:51
игроки уже присоединились, но02:05:53
мы также хотим отфильтровать их, чтобы показывать только02:05:55
зависимые, поэтому, если кто-то пойдет в02:05:58
присоединиться к существующим битвам мы только хотим02:06:01
чтобы показать те, к которым никто не присоединился02:06:03
раньше, поэтому давайте создадим фильтр const02:06:07
предстоящие сражения02:06:09
равен полученному точечному фильтру битв02:06:14
где мы получаем битву в качестве параметра и02:06:17
затем мы хотим проверить, есть ли боевая точка02:06:21
Статус боя02:06:23
тройное равно нулю, что означает, что02:06:26
сейчас он ожидает того, что мы хотим сделать, это02:06:29
мы хотим найти битву, которая будет нашей02:06:31
текущий игрок создал, потому что это02:06:34
идет активный бой, так что, скажем так, притянуто02:06:37
сражения02:06:39
точка за каждый бой02:06:43
мы хотим иметь оператор if if02:06:46
боевая точка, игроки, точка, поиск02:06:50
игрок02:06:51
а затем точку игрока в нижний регистр02:06:57
втрое равен адресу кошелька02:07:01
точка две строчные это означает, что наш02:07:05
игрок имеет тот же адрес, что и02:07:09
адрес кошелька в браузере в02:07:12
в этом случае мы можем что-нибудь сделать, так что давай02:07:14
откройте блок, и тогда мы сможем получить его02:07:17
еще проверьте, если02:07:20
Battle.winner точка начинается с равно02:07:24
до 0x00, это означает, что у нас нет02:07:28
победитель и что битва все еще продолжается02:07:30
активен, если это так, мы можем создать02:07:33
новая переменная прямо здесь, вверху, пусть02:07:36
активный бой установил его на ноль02:07:41
и прямо здесь мы можем переопределить это с помощью02:07:44
настоящая битва, поэтому активная битва02:07:47
равный битве, великолепно, наконец, мы можем установить02:07:50
всю эту информацию государству02:07:53
поэтому давайте создадим новое поле State в02:07:55
вершина02:07:57
это будет использовать состояние, давайте позвоним02:08:00
это данные игры02:08:03
установите игровые данные и в начале это02:08:05
будет равен объекту, который имеет02:08:08
массив игрока установлен в пустой массив02:08:11
массив ожидающих сражений02:08:14
конечно, вначале установлено пустое значение02:08:16
массив, а также и он имеет активный02:08:19
битва, для которой по умолчанию установлено значение null02:08:23
отлично, теперь мы можем обновить эти игровые данные02:08:26
прямо здесь, сказав установить игровые данные02:08:32
создать объект02:08:33
ожидающие битвы равны ожидающим02:08:36
битвы точка кусочек один помни, что мы хотим02:08:40
чтобы начать с одного, и мы также собираемся02:08:43
пройти активный бой который мы получили от02:08:46
надуманные сражения, это здорово02:08:49
теперь похоже, что у нас ошибка02:08:52
это, скорее всего, с этим, если02:08:54
заявление прямо здесь, так что давайте посмотрим, если02:08:56
мы соответствующим образом закрываем его02:09:01
кажется, мы02:09:03
но кажется, что-то еще не так02:09:06
так что давай посмотрим, что это такое02:09:08
или правильно закрыть это02:09:11
функция извлечения игры02:09:14
ошибка прямо здесь в ожидании боя02:09:17
на самом деле будет ожидать сражений02:09:19
этот кусочек, а затем еще один, и так02:09:23
теперь, если мы это исправим, мы будем в порядке02:09:25
обновляя состояние нашими игровыми данными, мы02:09:28
конечно, можно передать эти игровые данные правильно02:09:31
здесь через нашу ценность контекста02:09:34
и теперь мы можем вернуться к созданию02:09:37
сражаться и продолжать с тем, что имеем02:09:39
началось сейчас, основываясь на этих данных, мы можем02:09:42
узнать, вошедший в систему игрок02:09:44
создал битву или нет, так что давайте02:09:47
создать эффект использования внутри create02:09:49
боевой02:09:51
вот и все изменится, когда02:09:54
данные игры меняются, помните, что мы02:09:56
получение игровых данных из контекста02:10:01
и там мы хотим проверить, есть ли игровые данные02:10:05
вопросительный знак DOT активный бой02:10:08
вопросительный знак Статус Dot Battle02:10:11
тройное равно нулю, в этом случае мы02:10:14
хочу, чтобы битва за вес была верной и02:10:18
вот и все, это работает, и теперь, если вы02:10:20
перезагрузи, ты видишь, мы все еще ждем02:10:23
где противник, это здорово, мы02:10:26
успешно разместили один аккаунт02:10:29
держать02:10:30
теперь, чтобы правильно протестировать функциональность02:10:32
мы должны реализовать совместную битву как02:10:35
ну, мы можем сделать это, переключившись на02:10:39
наше разное количество ядер02:10:41
это будет аккаунт 2, и мы сможем02:10:44
перезагрузить страницу02:10:46
вот и все, этот игрок не создал02:10:49
битва, но теперь наша очередь присоединиться02:10:52
или существующие сражения02:10:54
и прямо здесь мы должны указать это как02:10:58
доступный бой, который мы еще не закончили02:11:00
вот и теперь мы можем закрыть все файлы02:11:03
и откройте файл join Battle.jsx.02:11:07
внутри здесь мы должны использовать это новое02:11:10
данные игры, чтобы фактически перечислить доступные02:11:13
сражения02:11:14
составить карту зависимых сражений, которые мы можем02:11:17
используйте наш контекст прямо здесь02:11:20
над нашей навигацией, скажем, const мы02:11:25
мы можем получить контракт, мы можем получить игру02:11:27
данные, мы также можем получить установленное оповещение о показе02:11:32
и нам нужно будет указать название битвы, как когда02:11:36
мы присоединяемся, нам также нужно это установить02:11:39
название битвы и, наконец, кошелек02:11:41
адрес, и это равносильно использованию02:11:44
Глобальный контекст теперь доступен ниже02:11:47
сражения, мы можем освободить немного места, и мы02:11:50
могу создать div02:11:52
у этого div будет имя класса02:11:55
равен контейнеру соединения точек стилей там02:12:00
мы можем открыть новый динамический блок кода02:12:02
и произнесите данные игры, ожидающие сражения.02:12:07
длина точки означает, существуют ли они в этом02:12:11
вопросительный знак в случае, если таковые имеются02:12:15
предстоящие сражения02:12:17
затем мы хотим перейти к точке игровых данных02:12:21
предстоящие сражения02:12:23
Dot, и мы хотим вызвать фильтр DOT.02:12:27
это02:12:28
прежде чем мы это сделаем, давайте также добавим02:12:30
случай, если нет незавершенных боев02:12:33
в этом случае мы можем показать тег A P02:12:37
так02:12:38
и мы можем дать ему имя класса02:12:41
равно загрузке стилей через точку02:12:46
и там мы можем сказать что-то вроде02:12:48
перезагрузите страницу, чтобы увидеть новые сражения02:12:53
отлично, если мы сохраним это, что-то будет02:12:57
ошибся, попробуем открыть консоль02:13:00
посмотреть, что именно02:13:02
кажется, что неопределенное - это не02:13:04
функция добавления фильтра, поэтому нам нужно02:13:07
предоставьте ему функцию обратного вызова02:13:11
и если сохраним все смотрим02:13:13
хорошо, но, конечно, мы еще этого не сделали02:13:15
отфильтровал ожидающие сражения, так как дела02:13:19
мы сделаем это хорошо, мы получим02:13:21
битва и здесь мы должны найти02:13:24
битвы, которые не соответствуют ни одному из02:13:27
текущий игрок уже создал, поэтому мы02:13:30
не могу сказать, что нет игроков в боевые точки, которые02:13:34
включает02:13:35
адрес кошелька02:13:38
так не те бои, что нынешние02:13:39
игрок создал, иначе он был бы02:13:42
играя самого себя02:13:43
отлично, теперь мы их отфильтровали и02:13:47
теперь нам нужно сопоставить их, чтобы мы02:13:49
собираюсь вызвать карту, где мы получим02:13:51
битва, а также индекс02:13:55
и для каждого боя мы хотим мгновенно02:13:57
верните что-нибудь, поэтому используйте здесь круглые скобки02:14:00
вместо фигурных скобок мы собираемся02:14:03
вернуть div для каждого сражения и это02:14:06
div будет иметь ключ, равный02:14:08
Battle.name плюс индекс, чтобы сделать его уникальным02:14:12
и дайте ему имя класса, равное Styles02:14:16
точка Flex между02:14:20
внутри у нас будет тег P02:14:23
это будет иметь имя класса, равное02:14:26
к стилю, точке, названию «Присоединиться к битве» и02:14:32
там мы можем визуализировать индекс плюс один02:14:36
вот и все, если мы сохраним это02:14:39
там ты можешь увидеть цифру один, означающую02:14:42
это одна битва, а также рядом с ней02:14:45
давайте отрисуем имя боевой точки02:14:49
и вот мы идем, JSM сражается за битву, которую мы02:14:53
действительно создал02:14:55
под этим названием битвы мы можем создать02:14:58
пользовательская кнопка, и мы можем дать ей название02:15:01
это будет сказать присоединяйся02:15:04
наконец-то мы можем дать ему ссылку на ручку02:15:08
у него будет функция обратного вызова02:15:10
он вызовет щелчок по дескриптору02:15:12
функция02:15:14
и мы хотим передать ему Battle.name02:15:18
чтобы узнать, к какой битве мы хотим присоединиться02:15:21
конечно, этот щелчок ручки - это02:15:24
функцию, которую мы еще не создали, так что давайте02:15:26
сделай это сразу, константный дескриптор, кликни02:15:29
это асинхронная функция02:15:33
и это, кажется, хорошо на данный момент, так что сейчас02:15:37
если мы сохраним это, у нас будет один доступный02:15:40
битва, которая именно такая, какой и должна быть02:15:42
и у нас есть кнопка присоединиться, теперь код02:15:46
функции щелчка ручки присоединения к бою02:15:48
будет похоже на создание02:15:51
боевой клик, но, конечно, дело идет02:15:53
быть одним важным отличием, и это02:15:55
будет вместо создания битвы02:15:57
мы собираемся присоединиться к нему02:15:59
сначала давайте установим название битвы02:16:02
состояние, равное названию битвы, которое02:16:05
мы передаем параметры, насколько это возможно02:16:07
смотри прямо здесь, тогда давай откроем новую попытку02:16:11
и поймать блок02:16:13
и скажи подожди02:16:16
договор02:16:17
точка, вступай в бой02:16:19
и мы передадим название битвы02:16:22
чтобы мы знали, в какой битве мы хотим участвовать02:16:24
присоединиться к02:16:25
теперь давайте узнаем больше о присоединении02:16:28
боевая функция внутри смарта02:16:30
контракт, давай поищем его в строке 24202:16:35
мы видим функцию присоединения к бою02:16:38
он принимает название битвы в качестве первого02:16:41
и только подпирать, тогда он выигрывает битву02:16:45
название битвы, которое мы должны уточнить02:16:48
что битва еще не началась02:16:50
и мы должны потребовать, чтобы второй02:16:53
игрок присоединяется к битве, мы не можем02:16:55
присоединяйтесь к битве, которую мы создали, наконец, мы хотим02:16:58
требовать, чтобы присоединяющийся игрок02:17:01
в настоящее время не в бою после того, как мы прошли02:17:04
все эти проверки, то мы можем установить02:17:07
статус битвы, чтобы начать его, и мы можем установить02:17:10
второй игрок тому игроку, который02:17:12
наконец-то присоединился к битве, мы обновляем02:17:15
статусы обоих этих игроков, чтобы02:17:18
правда быть в бою02:17:20
и, наконец, мы публикуем новое боевое событие02:17:24
который мы можем прослушивать на внешнем интерфейсе02:17:27
отлично, теперь мы знаем, как вступить в бой02:17:29
работает также, как только мы вступаем в битву02:17:31
давайте также покажем оповещение, поэтому установите показ02:17:35
оповещение со статусом, равным true02:17:39
тип равен успеху и, наконец,02:17:43
сообщение равносильно присоединению02:17:46
и это будет02:17:49
шаблонная строка названия боя02:17:52
конечно, нам придется использовать обратные кавычки02:17:55
вот и на данный момент ошибка02:17:59
давайте просто зарегистрируем это в консоли, чтобы записать Kanza02:18:01
ошибка02:18:03
отлично, это уже сделано, но давайте02:18:07
не совершить ошибку, которую мы сделали, когда02:18:10
создание битвы02:18:11
мы не хотим присоединяться время от времени что02:18:14
случается, что мы не знаем, что хотим настроить02:18:17
прослушиватель событий для вступления в бой02:18:19
событие, чтобы мы могли правильно прослушивать02:18:22
это, а затем перенаправить обоих игроков в02:18:25
Зона поля боя отлично подходит для этого, мы02:18:29
собираюсь пойти на наше мероприятие по созданию02:18:32
файл прослушивателей, и нам нужно добавить02:18:36
второе событие, которое будет новым02:18:39
игровой жетон02:18:41
так что прямо здесь мы можем скопировать первые два02:18:44
линии прямо здесь, все еще внутри02:18:47
создадим прослушиватели событий прямо здесь, давайте02:18:50
освободите немного места, я собираюсь вставить их02:18:52
две строки, но теперь вместо новой02:18:55
фильтр событий игрока, это будет что-то новое02:18:59
Фильтр боевых событий и фильтры точечно новые02:19:04
бой, обязательно измените это тоже02:19:07
и, конечно же, добавить новое событие, новую битву02:19:11
фильтр событий, и теперь мы получаем аргументы02:19:14
можно начать работать над кодом того, что есть02:19:16
произойдет, как только это событие произойдет02:19:19
отправлено, конечно, наша цель идет02:19:22
чтобы направить обоих игроков к02:19:25
Область поля боя, и похоже, что мы02:19:28
забыл закрывающие скобки, отлично02:19:30
с учетом сказанного, давайте начнем с02:19:33
новый прослушиватель событий битвы, который можно получить02:19:36
начали, мы можем, как и раньше, добавить02:19:40
журнал консоли прямо здесь, чтобы мы знали02:19:42
что событие произошло, так что давай сделаем02:19:44
console.log и давайте сделаем что-то вроде02:19:47
началась новая битва02:19:50
мы также можем консольно регистрировать дуги и в02:19:53
в этом случае мы собираемся записать в консоль журнал02:19:55
адрес кошелька, потому что их два02:19:58
игроки, мы получим одного от своих02:20:01
адрес кошелька, и мы его получим02:20:03
из аргументов другого игрока02:20:05
Итак, теперь, когда мы это знаем, давайте создадим02:20:08
if и здесь мы должны02:20:11
проверьте, есть ли адрес кошелька02:20:14
точка в нижнем регистре втрое равна аргументам02:20:19
игрок с точкой одна точка две строчные буквы02:20:24
или адрес кошелька02:20:27
точка в нижнем регистре втрое равна аргументам02:20:32
точка, игрок два, точка, две строчные буквы, поэтому мы02:20:36
хочу убедиться, что наш плеер02:20:38
либо игрок один, либо игрок 2. если02:20:42
это так, тогда мы хотим02:20:44
перейти к прямой косой черте, битва вперед02:20:47
косая черта аргументов02:20:50
Название Dot Battle идеально, так что мы готовы02:20:54
начать с битвы02:20:56
наконец, как только мы вступим в битву, которую хотим02:20:59
обновить данные игры, чтобы выполнить02:21:02
что мы можем вернуться к нашему контексту02:21:06
это будет файл index.js и02:21:09
в верхней части файла мы можем создать02:21:11
новое поле состояния использования, в котором указано состояние использования02:21:16
будет называться обновлением игровых данных и02:21:20
в начале будет установлено значение02:21:22
нуль02:21:23
теперь мы можем получить эти обновленные игровые данные02:21:26
функцию, и мы можем передать ее нашему02:21:29
создадим прослушиватели событий, что давайте02:21:33
Найди это02:21:34
прямо здесь, чтобы мы могли передать набор02:21:37
обновить данные игры02:21:40
и теперь то, что мы можем сделать, находится ниже02:21:43
перейдите, мы можем установить обновление игровых данных02:21:48
вот так, конечно, мы должны это сделать02:21:51
давайте получим это из параметров этого02:21:54
функция02:21:55
установить обновление данных игры02:21:58
и что мы хотим сделать, это получить02:22:00
доступ к предыдущему или предыдущему обновлению02:22:03
данные игры, а затем мы хотим вернуться02:22:06
предварительное обновление данных игры02:22:10
плюс один, который мы хотим увеличить02:22:12
переменная на основе этого состояния мы узнаем02:22:15
когда нам нужно перезагрузить экран боя02:22:18
чтобы показать новую и обновленную информацию, чтобы02:22:21
возвращаясь к индексу, теперь мы можем02:22:24
обновите данные игры прямо здесь, а это02:22:26
этот эффект использования02:22:27
точнее, мы можем обновить его один раз02:22:31
переменная данных обновления игры изменится так02:22:34
прямо здесь мы собираемся пройти02:22:36
обновить данные игры как второй02:22:38
параметр зависимости отлично подходит для этого02:22:41
сказал, что наш прослушиватель событий завершен и02:22:45
прежде чем мы попытаемся вступить в битву JSM02:22:47
давайте продолжим и создадим новую битву02:22:50
страница, поэтому давайте создадим новую страницу под названием02:22:53
боевой02:22:55
jsx02:22:57
давайте запустим там refce02:23:00
и этот не будет выше02:23:03
закажите обертку компонента, потому что это02:23:05
это будет страница нашей игровой битвы, это02:23:08
будет совершенно по-другому, так что для02:23:10
теперь давайте сначала сделаем импорт туда02:23:13
мы можем импортировать эффект использования02:23:17
а также состояние использования, исходящее из02:23:20
реагируя, мы также можем импортировать параметры использования02:23:25
а также используйте навигацию, которая скоро появится02:23:29
из реагирующего маршрутизатора Dom02:23:31
тогда мы сможем импортировать эти стили02:23:35
из стилей точечной косой черты02:23:37
мы можем импортировать пару компонентов, чтобы02:23:40
это будет нашим предупреждением, и это02:23:44
все, что нам нужно сейчас, из точки слэша02:23:46
компоненты02:23:49
мы также можем импортировать наш контекст или, скорее,02:23:51
использовать глобальный контекст из точечной косой черты02:23:55
контекст02:23:57
и мы можем импортировать пару активов02:23:59
например атака02:24:02
звук атаки02:24:03
защита02:24:06
Звук защиты02:24:08
Игрок ноль один как значок player0102:24:13
и игрок ноль два как игрок ноль два02:24:17
значок, и это происходит из ресурсов02:24:23
наконец-то мы собираемся импортировать пьесу02:24:26
аудио02:24:28
функция от точечной косой черты вперед02:24:32
слэш анимация точка Js02:24:36
отлично, теперь у нас есть весь импорт, давайте02:24:39
попробуйте использовать некоторые из них внутри02:24:41
верхнюю часть нашего компонента, давайте попробуем получить02:24:44
что-то из глобального контекста02:24:46
например, адрес кошелька с игровыми данными контракта02:24:51
показать оповещение02:24:54
поставь оповещение о показе и всё02:24:57
на данный момент это равносильно использованию Global02:25:00
контекст02:25:01
мы также хотим создать два новых использования02:25:04
Штаты, поэтому давайте создадим новое состояние использования02:25:07
это будет первый игрок, который02:25:11
в начале будет равен02:25:13
пустой объект, и мы также хотим получить02:25:15
игрок 2 и установите игрока 2, который находится в02:25:19
начало будет равно пустому02:25:21
объект, а затем мы собираемся02:25:23
повторно перейдите на страницу, которая выглядит как02:25:25
эта косая черта, битва вперед, косая черта02:25:28
и тогда прямо здесь это будет02:25:30
название битвы02:25:32
так как же нам получить имя, мы его поняли02:25:35
из параметров, чтобы мы могли сказать константную битву02:25:38
имя равно использованию параметров02:25:43
и, наконец, мы можем инициализировать02:25:45
функция навигации великолепна, теперь у нас есть02:25:49
весь импорт, я думаю, у нас нет02:25:51
перенаправлено на эту страницу, так что давайте перейдем к02:25:54
индекс для экспорта нашей боевой страницы02:25:58
мы можем сделать это, просто изменив имя02:26:00
прямо здесь и экспортируем это, так что это02:26:03
будет битва02:26:04
и теперь, вернувшись в главный раздел, мы можем импортировать02:26:08
страница битвы02:26:10
и тогда мы сможем продублировать этот маршрут02:26:12
здесь мы можем установить путь равным02:26:16
бой косой чертой, а затем Колином02:26:18
название боя, которое означает, что это02:26:21
параметр будет динамическим и02:26:23
тогда мы сможем визуализировать битву02:26:25
компонент02:26:27
отлично, теперь мы можем вернуться и давай просто02:26:31
стиль боевого компонента немного лучше02:26:33
так что как только мы получим повторную навигацию после02:26:35
присоединяясь, мы уже можем увидеть кое-что на02:26:38
экран, чтобы сделать это, мы можем создать02:26:40
новый div02:26:41
и у этого div будет класс02:26:44
имя, равное строке шаблона02:26:47
Стили Dot Flex между стилями Dot Game02:26:52
контейнер02:26:54
и здесь мы должны отобразить02:26:56
текущее поле боя вот оно02:26:59
это будет специальная переменная, которая02:27:01
собираюсь сказать, на каком поле боя02:27:03
мы в данный момент включены, поэтому, если мы проверим наш02:27:07
стили02:27:08
внутри Tailwind вы можете видеть, что мы02:27:10
иметь разные фоновые изображения на основе02:27:13
на разных названиях полей боя, так что давайте02:27:16
вернись, а пока давай постараемся изо всех сил02:27:18
закодируйте это прямо здесь02:27:20
в астрале это могло бы сработать, если бы не мы02:27:24
собираюсь переключить его позже и внутри здесь02:27:26
прямо сейчас я хочу отрендерить битву02:27:28
имя, поэтому я собираюсь создать H1, который02:27:30
собираюсь отобразить название битвы и02:27:33
давайте дадим ему имя класса, равное тексту02:27:37
Dash XL и текст Белый02:27:41
отлично, теперь давай сохраним это02:27:44
и я думаю, что мы готовы присоединиться к02:27:46
битва за тестирование функциональности02:27:49
Я нажму «Присоединиться» или «Существующий»02:27:52
битвы, я нажму «присоединиться», давай02:27:55
также откройте элемент проверки, чтобы увидеть02:27:57
что происходит, и давай присоединимся, мы получим02:28:01
новое уведомление, которое всегда хорошо02:28:03
подпиши, и я нажму «одобрить»02:28:06
присоединяюсь к битве JSM, это выглядит хорошо02:28:08
мне02:28:10
и произошло перенаправление, мы также получили02:28:14
уведомление от нашего прослушивателя событий, поэтому02:28:17
теперь, если мы вернемся к творчеству в02:28:19
слушатель, мы видим, что это тот самый02:28:21
это случилось, началась новая битва, мы получили02:28:24
аргументы, которые содержали битву02:28:27
назовите первого игрока и игрока 202:28:30
и это здорово, и адрес кошелька02:28:33
вот и теперь нас перенаправили на02:28:35
бой вперед, а затем вперед02:28:37
слэш JSM бой но экран просто02:28:41
кажется, белый02:28:43
так что давайте попробуем перезагрузить страницу и да02:28:47
кажется, там ничего нет, так что давай02:28:50
проверьте, правильно ли отображается страница битвы02:28:52
маршрутизировано, так что давайте посмотрим, поскольку у нас есть02:28:56
на белом фоне похоже на02:28:58
фон не был применен, и это нормально02:29:00
но если мы изменим цвет этого текста02:29:02
обратно в черное, возможно, мы сможем это увидеть02:29:05
и вот мы начнем битву JSM, что означает02:29:08
что он правильно читает02:29:09
параметры, так что это здорово, что у нас есть все02:29:12
данных, которые нам нужны на данный момент, и мы02:29:14
готовы закодировать внешний вид02:29:16
Страница поля боя02:29:18
обо всем по порядку, давайте сосредоточимся на02:29:20
Предыстория поля боя и что мы можем02:29:23
сделать, мы можем вернуться к index.js и02:29:26
мы можем создать новое состояние использования вверху02:29:29
да, еще один, так что мы здесь02:29:32
собирается создать новое государство использования и02:29:35
назовем это кишечником, вы можете использовать02:29:38
заглавная G или строчная G, неважно02:29:41
ты используешь, обязательно придерживайся этого, делай02:29:43
не иметь никаких проблем в дальнейшем и в02:29:46
начнем, назовем это BG Dash астрал, мы будем02:29:50
придется использовать этот префикс BG Dash и02:29:53
затем название поля битвы за02:29:55
сейчас это будет статично, но позже02:29:57
мы сможем обновить его, используя набор02:30:00
Страница поля боя, так что теперь давайте пройдем02:30:03
Поле боя, а также набор02:30:05
Поле боя вплоть до нашего02:30:08
контекст вот здесь02:30:10
Поле боя, а также02:30:14
установить поле боя02:30:16
вот и все02:30:18
отлично, теперь мы можем вернуться к нашей битве02:30:20
страницу, и мы сможем импортировать поле боя02:30:25
и мы можем просто отобразить эту строку02:30:28
прямо здесь, вместо Астрала02:30:31
теперь, если мы сохраним это, это действительно работает02:30:35
потому что мы ставим БГ впереди, и если вы02:30:38
посмотрите стили Tailwind, если поставите02:30:41
эти фоновые изображения, то вам придется02:30:43
поставьте BG Dash, а затем имя02:30:45
это поле битвы, так что это выглядит02:30:48
отлично, теперь давайте продолжим добавлять к нашему02:30:51
Поле боя, это даже выглядит великолепно02:30:53
на меньших экранах, но если мы расширим02:30:56
теперь оно выглядит еще лучше, пойдем02:30:59
немного назад02:31:00
и приступим к реализации02:31:03
сначала мы сосредоточимся на извлечении02:31:06
все важные данные игроков, потому что мы02:31:08
должны передать данные игрока всем02:31:10
путь к компонентам, которые собираются02:31:12
представьте это, так что давайте создадим новое использование02:31:15
эффект прямо здесь02:31:18
вот и все, эффект от использования будет02:31:21
происходит, когда договор меняет смысл02:31:23
когда оно впервые обновится, когда игра02:31:26
данные меняются и когда название боя02:31:29
изменения тоже отличные, как мы02:31:32
собираюсь принести всю важную игру02:31:34
данные, давайте создадим новую функцию с именем02:31:37
const получить информацию об игроке и все готово02:31:41
быть равным асинхронной функции, например02:31:44
этот02:31:45
давай не забудем сразу позвонить ему02:31:47
здесь, чтобы мы могли сказать, есть ли02:31:51
контракт и есть ли игровые данные DOT02:31:55
активный бой только если это правда то02:31:59
мы хотим вызвать функцию получения информации об игроке02:32:01
функция теперь внутри get player02:32:04
информация, мы собираемся создать новую попытку и02:32:07
поймать блок там, мы можем сказать, пусть02:32:11
адрес игрока0102:32:13
равно нулю, и пусть player0202:32:18
адрес02:32:19
также равно нулю, что означает, что02:32:22
мы просто устанавливаем переменные так02:32:25
мы сможем использовать их позже, как только02:32:27
инициализируем их, теперь мы должны проверить,02:32:30
получить данные02:32:32
ДОТ активный бой02:32:35
точка игроки ноль точка два строчные буквы02:32:40
втрое равен адресу кошелька02:32:44
точка в нижнем регистре, если это так02:32:49
это значит, что адрес нашего игрока 0 102:32:53
равно точке данных игры activebattle02:32:58
игроки ставят точки на ноль, потому что мы проверяем, что02:33:02
прямо здесь активный боевой игрок 002:33:05
равно адресу кошелька. От точки к нижнему регистру.02:33:08
и вот это должно было быть02:33:10
игроки во множественном числе, и на основании этого мы также02:33:14
знайте, что адрес игрока 2 равен02:33:16
к02:33:17
activepaddle.players, поехали02:33:21
еще02:33:22
если адрес кошелька не равен02:33:25
игрок 0, что должно означать, что это02:33:28
равен игроку 1. поэтому мы можем скопировать эти02:33:31
два значения, и мы можем просто изменить02:33:33
цифры, означающие, что адрес игрока 102:33:36
равно игрокам 1, а затем игроку 202:33:39
адрес там равен нулю игроков02:33:43
мы идем по этим адресам мы можем02:33:45
теперь сначала получим правильные данные игрока, мы02:33:49
нужно получить токен, и мы можем это сделать02:33:51
говоря, что данные токена const P1 равны02:33:55
к весовому контракту dot get player02:34:00
жетон02:34:01
и мы передаем адрес player01, который мы02:34:06
можете погрузиться в наш смарт-контракт, чтобы увидеть02:34:08
что делает функция получения токена игрока02:34:11
поэтому, если мы проверим это прямо здесь и найдем02:34:14
где он инициализируется, мы видим, что02:34:16
он просто возвращает конкретного игрока02:34:19
токен, тогда мы сможем получить первого игрока02:34:22
минусы игрока 0 1 равны весу02:34:26
контракт с игроком, и вот мы02:34:30
также необходимо передать адрес02:34:31
player, и мы можем дублировать это, и мы02:34:34
можно повторить процесс с player0202:34:37
и передайте адрес player0202:34:41
теперь давайте углубимся в этот смарт-контракт02:34:43
чтобы увидеть, что делает функция get player02:34:45
так что еще раз возвращаюсь и02:34:48
ищу его, возьми плеер, поехали02:34:51
он просто возвращает игрока02:34:54
это функция получения02:34:56
теперь на основе этих переменных мы можем сделать02:34:59
используйте их, чтобы получить полоски здоровья игрока02:35:02
Полоски маны, атака и защита, поэтому мы02:35:05
могу сказать константа02:35:07
P1 ATT как атака равна жетону P102:35:13
сила атаки точки данных02:35:16
точка вместо числа02:35:19
вот и мы можем это продублировать02:35:22
и тогда мы получим защиту P102:35:25
в качестве защиты, и это будет02:35:27
защита02:35:29
сила02:35:30
теперь мы хотим получить помощь P1 и P2 и02:35:33
Бары маны, и мы можем сделать это, сказав02:35:35
const p1h равен точке player0102:35:40
Точка здоровья игрока на число мы можем02:35:44
продублируйте это еще три раза02:35:47
второй будет P1 Мана, так что мы02:35:50
можно просто изменить здоровье игрока на02:35:52
игрок Мана02:35:54
у нас будет здоровье второго игрока и02:35:57
затем игрок 2 Мана02:35:59
Здоровье игрока 2 будет таким02:36:01
нам нужно изменить номер второго игрока02:36:04
второй игрок, и нам нужно изменить02:36:07
игрок Мана вот еще раз убедитесь02:36:10
что у тебя оно именно такое P102:36:12
атака P1 данные токена сила атаки P102:36:16
защита данных токена def P1 и надежность02:36:18
тогда здоровье P1 — это здоровье первого игрока P102:36:21
Мана игрока один Мана P2 Здоровье игрока02:36:24
2 здоровья, а затем P2 маны — игрок 2.02:36:27
Мана великолепна теперь, когда у нас есть эти ценности02:36:31
мы можем установить их в состояние, чтобы мы могли02:36:33
скажем, поставил первого игрока02:36:36
это точка точка точка мы хотим распространить все02:36:39
значения игрока 0 1, которые мы хотим установить02:36:42
ATT должен быть равен P1 ATT как02:36:46
смерть от атаки будет защитой P102:36:49
здоровье будет установлено на p1h и02:36:54
Мана будет установлена на p1m, мы можем02:36:57
продублируйте это02:36:59
установить плеер на02:37:01
распространить игрока 0 на02:37:03
установите атаку, равную X, просто02:37:07
строка X и Def равна строке02:37:09
X, потому что мы не знаем противоположного02:37:11
сильные стороны игроков в атаке и защите, но02:37:14
мы знаем их здоровье и ману, поэтому мы02:37:17
можно установить P на здоровье и P2 на ману отлично02:37:21
и, наконец, об ошибке, а сейчас мы можем02:37:24
просто console.login02:37:27
отлично, теперь мы получаем все02:37:29
данные игрока, и мы устанавливаем для них значение02:37:32
состояния игрока один и два это тоже выглядит02:37:35
как будто у меня опечатка вот здесь, адрес02:37:37
с одной D, так что это должно быть02:37:40
то же, что и эти переменные прямо здесь, чтобы02:37:43
убедитесь, что все работает отлично, теперь мы можем сделать02:37:45
использование этих переменных данных игрока, поэтому02:37:48
давайте прокрутим вниз и создадим много02:37:51
различных повторно используемых функций, поэтому мы02:37:53
можете сначала создать макет нашей игры02:37:56
давайте покажем оповещение вверху02:37:59
страница битвы так же, как мы сделали с02:38:01
компонент более высокого порядка страницы, чтобы мы могли перейти02:38:03
здесь, и мы можем скопировать это предупреждение02:38:06
потому что компонент более высокого порядка02:38:09
используется на всех домашних страницах, но это не так02:38:11
использовался в бою, поэтому нам придется вставить02:38:13
это тоже здесь, так что будь начеку02:38:17
статус и оповещение показывают тип оповещения и02:38:20
показать предупреждающее сообщение, отлично, теперь мы можем показать02:38:24
специальный компонент информации об игроке, так что верно02:38:27
здесь давайте создадим информацию об игроке02:38:29
компонент и к этому компоненту мы02:38:32
собираюсь пройти игрока, который будет02:38:34
равен игроку 2, потому что мы показываем02:38:37
они наверху, сначала мы наверху02:38:40
нижняя страница экрана, и мы также02:38:42
хочу показать значок, чтобы значок игрока был02:38:45
равен иконке игрока 0 202:38:50
и мы также можем передать пустое поле в качестве верхнего края02:38:55
теперь, конечно, если мы сохраним, это не так02:38:57
будет работать, потому что этот компонент02:38:59
еще не существует, поэтому в этом файле мы02:39:02
собираюсь использовать пару компонентов02:39:03
мы собираемся создать информацию об игроке02:39:05
компонент карты, компонент действия02:39:08
кнопка, а также информация об игре, и что делать02:39:12
ты говоришь, что теперь мы перейдем к компонентам02:39:14
папку и создайте базовую структуру для02:39:17
все эти компоненты мы будем использовать02:39:19
Итак, начнем с кнопки действия02:39:22
это будет действие02:39:25
button.jsx и мы можем создать рафик02:39:28
внутри там, тогда мы тоже собираемся02:39:31
создайте компонент карты, чтобы card.jsx и02:39:35
мы также можем запустить раф-рейс02:39:37
наконец-то мы собираемся использовать информацию об игре02:39:40
компонент02:39:41
.jsx, и мы можем запустить rafc e и, наконец,02:39:46
тот, кого мы уже назвали, это игрок02:39:48
информационный компонент Dot jsx, и мы также можем02:39:53
запустим rafce, теперь мы можем перейти к индексу и02:39:56
можно экспортировать все эти компоненты, чтобы02:39:59
у нас будет кнопка действия02:40:03
тогда у нас будет открытка02:40:05
компонент02:40:07
тогда у нас будет информация об игре02:40:10
компонент02:40:12
и, наконец, у нас будет плеер02:40:14
информационный компонент02:40:17
вот и все, теперь мы можем экспортировать все02:40:20
четыре из них прямо здесь02:40:22
и нам, конечно, нужно расставить запятые02:40:26
вот и мы наконец возвращаемся к R02:40:29
это будет страница битвы, мы можем02:40:33
теперь импортируйте все эти компоненты в02:40:35
верх, поэтому давайте импортируем вместе с02:40:38
оповещение, которое будет кнопкой действия02:40:42
карта02:40:44
Компоненты информации об игре и информации об игроке02:40:49
отлично, теперь мы можем продолжить создание02:40:52
базовая компоновка, учитывая, что все02:40:54
компоненты будут здесь, поэтому02:40:57
под информацией об игроке у нас будет02:41:00
div, и этот div будет иметь02:41:03
имя класса02:41:04
равен внутри фигурных скобок Стили02:41:08
точка Flex Center, а также вызов Flex Dash02:41:14
и мой 10. внутри этого разработчика мы хотим02:41:18
покажите компонент карты, поэтому прямо здесь мы02:41:21
может отображать компонент самозакрывающейся карты02:41:24
у этого компонента будет пара02:41:26
реквизита, такого как карта, равно игроку02:41:30
2. заголовок соответствует вопросу игрока 202:41:34
отметить точкой имя игрока02:41:36
здесь не кнопка действия02:41:38
мы также собираемся дать ему игрока 202:41:40
переменная, которую нужно знать, чтобы различать02:41:42
разные карты, и тогда нам придется02:41:45
предоставить ссылку на карту, которая будет02:41:47
равен рефу, который мы собираемся02:41:49
создадим позже, а сейчас давайте просто02:41:51
оставьте это как пустую строку ниже02:41:54
эту карту мы собираемся создать еще одну02:41:56
div02:41:57
и у этого div будет класс02:42:00
имя, равное гибким элементам Dash Center и02:42:04
гибкая тире-строка02:42:06
внутри него мы хотим отобразить02:42:08
кнопка действия02:42:11
так что это будет кнопка действия02:42:13
атаковать игрока, так что это02:42:16
самозакрывающийся компонент02:42:18
URL-адрес изображения будет равен02:42:21
Атаковать02:42:22
его ручка будет равна щелчку02:42:25
а пока мы оставим это как02:42:28
пустая функция обратного вызова, и мы02:42:29
собираюсь реализовать функционал02:42:30
позже, и мы сможем добавить остальные стили02:42:34
равно02:42:36
мр-2 для поля справа02:42:38
наведите курсор на желтую черту Dash 400. отлично02:42:45
теперь мы можем скопировать карту еще раз02:42:47
под кнопкой действия02:42:50
это будет карта игрока02:42:52
один, так что мы можем сказать, что автомобильный дисплей один02:42:54
название — это игрок номер один, имя этого игрока и02:42:57
прямо здесь нам не нужно ничего предоставлять02:43:00
переменная игрока 2, но мы можем предоставить02:43:03
остальные стили равны mt-3, чтобы разделить его02:43:07
с верхней карты и, наконец, мы можем02:43:09
скопируйте кнопку действия и поместите ее02:43:11
под карточкой, потому что на этот раз это02:43:14
это будет кнопка действия защиты02:43:16
вместо поля справа 2 мы собираемся02:43:19
иметь поле слева 6 и наведение02:43:23
будет бордюр Dash red Dash 600 за02:43:27
защита, наконец, ниже этого div и ниже02:43:31
еще один элемент управления, который мы хотим показать игроку02:43:33
Информация02:43:34
для другого игрока помните, что у нас есть02:43:37
уже создал его для того, что на02:43:39
вверху, но теперь мы можем скопировать это02:43:42
вставьте это сюда и это будет02:43:44
первый игрок, а также нулевой игрок I02:43:48
can и ниже, что мы хотим показать02:43:52
Информационный компонент игры просто02:43:55
самозакрывающийся компонент02:43:58
теперь, если мы сохраним это, вы увидите, что02:44:01
текст здесь, его едва видно, но все02:44:04
части находятся здесь, информация об игроке на02:44:07
переверните карты противоположных игроков, а затем мы02:44:11
есть своя карта, а также действие02:44:13
кнопки рядом с этой карточкой, то у нас есть02:44:16
наша собственная информация об игроке, и, наконец, у нас есть02:44:19
информация об игре, так что все ищет02:44:23
для меня это здорово, но сейчас самое время, чтобы мы02:44:25
погрузиться во все эти компоненты02:44:28
индивидуально и мы создаем их образ02:44:30
и чувствуй, так что давай продолжим и пойдем02:44:33
начал сверху вниз, первый02:44:36
в нашем списке будет игрок02:44:38
информационный компонент, это будет02:44:41
интересно, потому что у нас будет02:44:43
разные цвета на полосках здоровья02:44:45
в зависимости от того, сколько здоровья у02:44:47
у игрока есть, так что это определенно02:44:50
интересный функционал, стоит задуматься02:44:52
как реализовать, но я покажу02:44:54
как это сделать в этом видео, так что давай02:44:57
начать покупать импортировать всплывающую подсказку по реагированию02:45:01
исходя из всплывающей подсказки React Dash, мы02:45:05
также можно импортировать стили02:45:08
исходя из стилей точечной косой черты, тогда мы можем02:45:12
установить постоянную переменную const Health02:45:15
точек, это будет несколько02:45:18
точек помощи, которые будут общими02:45:20
из 25.02:45:22
тогда мы знаем, что проезжаем три02:45:24
разные вещи в информации об игроке02:45:26
компонент, который мы передаем игроку02:45:29
значок игрока02:45:31
и, наконец, свойство Mt или поля верхнего уровня.02:45:35
теперь на основе этого давайте визуализируем внешний вид02:45:38
и почувствовав это, мы можем сначала иметь div02:45:40
и этот div будет иметь имя класса02:45:43
равно02:45:45
Styles.flex Center и то, только если02:45:49
есть верхний край, и мы хотим добавить02:45:52
mt4, иначе мы добавим mb402:45:56
вот это здорово, поэтому для первой карты мы02:45:59
хочу отодвинуть его от вершины и02:46:01
для второго мы хотим его подтолкнуть02:46:02
далеко от дна02:46:04
тогда внутри у нас будет02:46:06
тег изображения, который будет иметь это изображение02:46:09
источник, равный значку игрока02:46:13
и у него будет тег ALT, равный02:46:15
игроку 2.02:46:18
наконец-то мы можем дать ему имя класса02:46:20
равно w-14 для ширины age-14 для02:46:24
Объект высоты Dash содержит02:46:27
и округлил Dash до конца, чтобы превратить его в02:46:30
обведите, если мы сохраним это, теперь мы можем видеть02:46:33
что у нас есть противник прямо здесь, на02:46:35
сверху, и мы получаем синий на02:46:38
внизу мы также можем добавить данные Dash 402:46:41
собственность прямо здесь, и это будет02:46:44
быть равным Dash игрока, если мы пусты02:46:49
это означает, что это первый игрок и02:46:52
тогда в противном случае это будет плеер02:46:54
2. и мы также можем передать ему данные02:46:57
Свойство Dash Tip, которое позволит нам02:47:01
узнать, какое изображение у этого игрока02:47:03
представляющий02:47:04
отлично, теперь под этим изображением мы собираемся02:47:06
иметь div, и этот div будет02:47:10
иметь другое свойство данных Dash 4 и02:47:14
это будет для здоровья02:47:17
и еще раз скопируем02:47:19
то, что у нас было выше, так и будет02:47:22
Тире, а затем, если там пусто, то это02:47:24
будет 1, иначе это будет02:47:27
2. так что мы собираемся вставить это правильно02:47:29
тут и тогда появится подсказка по данным Dash02:47:33
быть равным02:47:34
здоровье02:47:36
а затем здоровье игрока DOT вот так02:47:40
наконец, давайте дадим ему имя класса, равное02:47:42
чтобы стили поставили точку на здоровье игрока02:47:46
и вот мы идем, есть бар, где02:47:49
здоровье уйдет, но сейчас наше время02:47:51
на самом деле засунуть решетку внутрь02:47:54
этого отдела здоровья, поэтому для этого мы02:47:57
должны найти способ представить02:48:00
номер 25 как отдельные бары02:48:03
для этого мы собираемся открыть динамический02:48:06
блок кода, который мы собираемся сделать02:48:08
массив, а затем мы собираемся распространить02:48:11
массив player.health02:48:14
тогда мы собираемся вытащить ключи из02:48:17
это свойство, и мы хотим сопоставить его02:48:19
что мы собираемся нанести на карту каждый02:48:21
отдельный предмет, и мы собираемся также02:48:24
получить индекс02:48:26
теперь мы хотим вернуть что-то для каждого02:48:28
свойство, и мы собираемся вернуть div02:48:31
у этого div будет ключ, который02:48:35
будет равен02:48:36
давайте сделаем элемент Dash Dash, а затем02:48:40
мы можем отобразить предмет прямо здесь02:48:43
и давайте дадим ему имя класса02:48:46
в данном случае это будут Стили02:48:49
игрок в точки02:48:51
полоска здоровья02:48:53
если мы сохраним это, ничего не произойдет02:48:55
это произойдет, потому что мы должны02:48:57
подсчитать уровень здоровья, который нам предстоит02:49:00
знаю, он зеленый, красный или02:49:03
Апельсин02:49:04
для этого мы можем создать новую функцию02:49:06
на верхнем постоянном уровне здоровья02:49:10
это заберет очки здоровья02:49:12
и затем на основе этого мы можем проверить02:49:15
внутри круглых скобок, если точки02:49:19
больше или равно 12. в этом случае02:49:23
мы можем сделать BG Dash зеленым Dash 50002:49:27
круче, тогда у нас будет еще один02:49:30
и мы хотим проверить, есть ли точки02:49:32
больше или равно шести, то мы02:49:35
хочу сделать BG Dash оранжевым Dash02:49:38
500, а остальное мы хотим отрендерить фоновый рисунок.02:49:42
Dash red Dash 500 и теперь мы можем поставить02:49:46
вот эта шкала здоровья02:49:48
это будет уровень здоровья и02:49:51
мы собираемся передать player.health02:49:55
если мы сохраним это, вы сможете увидеть все02:49:57
батончики здоровья прямо здесь02:49:59
но ты видишь, что они довольно близки02:50:01
вместе, верно, нам придется их разделить02:50:03
как-то, но как мы узнаем, как02:50:06
их будет много, если мы поместим слишком большое02:50:09
поле что-то вроде поля справа02:50:11
ну, давай сделаем два, тогда они собираются02:50:14
распространение слишком тонкое, но если его не много02:50:17
из них, то нам придется увеличить02:50:19
ширину или опустите поля, поэтому мы собираемся02:50:22
создать еще одну функцию для расчета02:50:24
это также константная индексация маржи02:50:28
будет равна функции, которая02:50:29
собираюсь принять индекс в качестве02:50:31
параметр, а затем мы проверим02:50:34
если индекс не равен очкам здоровья02:50:38
минус 102:50:41
тогда мы собираемся вернуться02:50:43
мистер-1, иначе мы вернемся02:50:47
мр-0, и теперь мы можем преодолеть эту разницу02:50:51
индексирование прямо здесь как функция и02:50:54
также передать индекс, как только мы это вызовем02:50:57
это будет выглядеть намного лучше02:51:00
идеально, мне это нравится02:51:02
теперь нам нужно сделать то же самое для02:51:05
Мана, но мы просто собираемся провести02:51:07
кружок, в котором будет указано количество02:51:09
Мана, которая у нас есть, и что мы можем сделать02:51:12
теперь мы можем закрыть этот div как есть02:51:16
самозакрывающийся элемент div, поэтому я просто собираюсь02:51:17
закрой это прямо здесь02:51:19
а затем под этим блоком кода и02:51:22
под элементом div, который его обертывает, мы можем02:51:24
создать новый div02:51:26
и этот div будет для маны02:51:30
и у него также будут данные для02:51:32
свойство, причина, по которой мы добавляем02:51:34
это потому, что пакет реагирования02:51:37
собираемся использовать его позже, так что как только мы02:51:39
наведите на него курсор, и мы сможем получить больше02:51:41
информация02:51:42
Итак, данные для Mana Dash, если они пусты, то02:51:47
это один, иначе можно сказать, что два02:51:50
data Dash подсказка, это будет просто сказано02:51:53
Мана02:51:55
и имя класса будет02:51:58
строка шаблона02:52:01
стилей dot Flex Center02:52:05
Стили с эффектом точечного стекла02:52:08
и стили точечного игрока Мана02:52:12
внутри мы можем визуализировать динамический02:52:15
строка точки игрока Мана или ноль сейчас, если02:52:20
мы сохраняем, чтобы вы могли видеть, что игра идет медленно02:52:23
начинаем обретать смысл, потому что мы можем02:52:25
увидеть, чтобы у обоих игроков было полное здоровье02:52:28
так как игра только началась 25 здоровья и02:52:31
у них обоих по 10 маны, это ровно02:52:33
как и должно быть, это наконец-то здорово02:52:36
давайте добавим подсказки, чтобы сделать еще больше02:52:39
смысл игровых данных02:52:41
сначала мы добавим всплывающую подсказку02:52:44
компонент02:52:45
и у этого должен быть идентификатор, чтобы02:52:49
ID будет равен шаблону02:52:51
строка игрока Dash и мы собираемся02:52:54
сделай то же самое еще раз, если это02:52:56
пусто, тогда мы скажем одно02:52:59
иначе это будет 2. это будет02:53:02
также иметь эффект, который будет02:53:04
установите твердый, и он будет иметь02:53:07
цвет фона, который мы можем установить02:53:09
что-то вроде хеша 7f02:53:13
4 6 Ж 0 Мне было холоднее работать02:53:17
действительно хорошо02:53:19
и внутри мы можем визуализировать два02:53:21
разные теги P, первый тег P02:53:24
собираюсь отобразить имя игрока02:53:26
поэтому мы можем визуализировать диапазон внутри него02:53:30
и этот диапазон будет отображать02:53:33
имя или, скорее, оно будет называть имя02:53:36
Прямо здесь02:53:37
и после промежутка мы можем визуализировать02:53:40
игрок02:53:41
вопросительный знак точка имя игрока теперь буква P02:53:44
тег будет иметь имя класса, равное02:53:47
для стилей расставьте информацию об игроке и диапазон02:53:50
будет иметь имя класса, равное02:53:54
Стили точечно отображают информацию об игроке.02:53:59
теперь мы можем продублировать тег скорости ниже02:54:02
и во второй раз мы хотим отрендерить02:54:04
адрес игрока, поэтому здесь мы02:54:07
могу сказать игроку точку, адрес игрока02:54:11
вопросительный знак, точечный срез от 0 до 1002:54:13
только первые 10 символов02:54:16
теперь давайте сохраним это, мы получим ошибку02:54:19
потому что здесь нам не хватает точки02:54:22
но если мы сохраним это, мы получим ошибку02:54:25
еще раз, давайте откроем проверку02:54:28
элемент, перейдем к консоли02:54:31
похоже, что этот фрагмент не определен02:54:33
потому что информация об игроке введена неправильно02:54:36
здесь этого вообще не должно было быть02:54:38
иногда автозамена все портит02:54:41
но проверь это, если сейчас наведешь курсор02:54:44
имя игрока, которого вы видите, аккаунт 202:54:46
назвать учетную запись 2, которая, похоже, не является02:54:49
прямо сейчас нам придется это исправить02:54:52
а затем мы также можем увидеть адрес02:54:54
тот аккаунт, который великолепен02:54:57
Теперь мне интересно, почему этот аккаунт02:55:00
то же самое для обоих или, по крайней мере, для имени и02:55:03
адрес тоже вроде тот же02:55:05
для обоих, так что если ты вернешься в бой02:55:07
Это информация об игроке02:55:09
первым должен быть игрок 2, а02:55:11
второй должен быть первым игроком02:55:14
вроде бы здесь все хорошо, но02:55:17
тогда если мы пойдем выше02:55:20
давайте проверим, где мы их устанавливаем02:55:22
Игрок 1 поставил игрока 2, который смотрит02:55:25
хорошо, что мы распространили плеер, который мы02:55:29
Распределить защиту от атаки игрока 202:55:32
здоровье02:55:34
все выглядит хорошо02:55:36
это интересно Игрок 1, игрок второй02:55:39
да, это выглядит хорошо для меня и в02:55:42
здесь ошибка могла быть здесь, если02:55:44
активных игроков 0 — адрес кошелька02:55:47
тогда мы знаем, что нулевой игрок — это02:55:50
первый игрок, и тогда мы знаем, что02:55:52
игрок 2 — второй индекс, иначе игрок02:55:56
один - второй игрок, а игрок 2 -02:55:58
Индекс 0. Мне это кажется хорошим, так как02:56:01
ну, сейчас я не могу найти02:56:03
проблема с этим, поэтому мы собираемся02:56:05
обязательно вернемся к этому позже, если02:56:08
проблема сохраняется, но теперь мы можем вернуться02:56:10
и мы также можем добавить всплывающие подсказки для02:56:13
здоровья и маны, так что давайте создадим02:56:15
еще одна подсказка по реагированию02:56:18
этот будет самозакрывающимся02:56:21
мы собираемся дать ему идентификатор, равный02:56:24
нить Health Dash Mt02:56:28
в таком случае один02:56:31
и тогда здесь у нас будет два02:56:33
давайте добавим ему эффект твердости и02:56:36
давайте зададим ему цвет фона02:56:39
так же, как и раньше, чтобы мы могли скопировать02:56:43
это прямо отсюда, это для здоровья02:56:46
так что если вы сейчас наведете курсор на полоску здоровья02:56:48
вы можете увидеть Здоровье 25, это здорово02:56:50
это гораздо проще, чем читать все02:56:52
линии индивидуально02:56:53
и мы можем повторить это, скажем, Мана, верно02:56:56
здесь и сохрани это, и теперь оно скажет02:57:00
что это Мана, это красиво02:57:02
способ добавить интерактивности в ваш02:57:04
приложение, как видите, это было так просто02:57:07
добавить эти всплывающие подсказки, но они помогают02:57:09
много02:57:10
так что мне сейчас это кажется великолепным02:57:13
мы просто придали игре гораздо больше смысла02:57:16
поскольку теперь у нас есть значки, у нас есть02:57:18
полоски здоровья и полоски маны теперь02:57:21
время, когда мы реализуем следующий шаг02:57:24
страница битвы, которая в данном случае02:57:27
будут сами карты02:57:30
главная звезда шоу, так что давайте перейдем к02:57:33
открытка и давай начнем02:57:36
реализуя наш карточный компонент, мы можем02:57:39
импортировать что-то, известное как наклон, из02:57:42
реагировать02:57:43
косая черта02:57:45
Дэш-параллакс02:57:47
Наклони черту, ты быстро увидишь, что02:57:51
этот пакет делает это довольно круто и02:57:53
тогда мы сможем импортировать эти стили02:57:56
из стилей точечной косой черты02:57:59
мы также можем импортировать что-то, известное как02:58:01
все карты взяты из ресурсов с косой чертой02:58:06
это массив всех карточных активов, которые02:58:09
мы уже подготовили то, что хотим сделать02:58:12
принести случайную карточную кислоту из The02:58:15
Коллекция, поэтому давайте создадим функцию02:58:18
генерировать02:58:20
случайное изображение карты02:58:23
это будет функция02:58:25
там мы сможем использовать все карты02:58:29
получить доступ к math.floor, а затем выполнить математику02:58:34
случайным образом, а затем мы можем умножить это на02:58:37
длина всех карточек минус одна эта02:58:41
функция прямо здесь нам поможет02:58:42
сгенерируем случайную карту, как только мы это сделаем02:58:45
мы можем сказать, что const IMG равен02:58:48
Сгенерируйте случайное изображение карты, а также мы02:58:51
могу сделать то же самое для изображения 2. это02:58:54
мы заботимся о том, чтобы каждый игрок02:58:56
имеет уникальную карту02:58:58
теперь наша функция принимает некоторые02:59:01
такие параметры, как заголовок карты02:59:03
судья и второй игрок, давайте возьмем их02:59:06
Прямо здесь02:59:07
карта02:59:09
стили остальных титулов02:59:12
судья карты и второй игрок02:59:16
внутри здесь давайте создадим div, который02:59:20
будет ссылка на эту карту02:59:22
и ссылкой будет ссылка на карту02:59:25
если мы сохраним это, это может сломать02:59:27
приложение, как я и думал, если мы представим его как02:59:30
пустая строка, она все равно будет02:59:32
сломаться, потому что это не позволяет нам02:59:34
передавать ошибочные ссылки, а пока давайте02:59:36
удали эту часть, мы собираемся ее перенести02:59:38
вернемся позже, когда нам нужно будет добавить02:59:40
эти анимации взрывов02:59:42
а пока давайте добавим имя класса, равное02:59:45
шаблонная строка стилей Dot card02:59:48
контейнер, а также стили отдыха02:59:53
теперь внутри мы хотим отрендерить02:59:55
Изображение02:59:56
у этого изображения будет источник02:59:58
равно игроку 2. если это игрок 203:00:02
тогда это будет изображение 2, иначе это03:00:05
это будет изображение 1. там будет03:00:08
ALT, равный карте03:00:10
и у него будет имя класса03:00:12
эквивалентно карте Styles Dot IMG03:00:17
как только мы это сохраним, вы увидите одну карточку03:00:20
хотя второй похоже сломан03:00:22
так что что-то здесь не так03:00:26
в этом случае, кажется, я забыл добавить03:00:29
скобка, чтобы обернуть точку всех карт03:00:32
длина минус один, потому что это было03:00:34
до сих пор это было умножение математических вычислений03:00:36
в случайное время все автомобили такой длины и03:00:39
затем уменьшив единицу, мы хотим сделать это03:00:42
вместе, а затем умножим их, как только сделаем03:00:44
что мы можем увидеть две великие карты и03:00:47
каждый раз, когда вы сохраняете файл, вы03:00:48
собираюсь получить два новых, что03:00:51
феноменальная игра уже выглядит03:00:54
намного лучше, теперь вы можете видеть, что03:00:57
значения атаки и защиты в настоящее время03:00:59
пусто, поэтому теперь нам нужно добавить их и вас03:01:02
также можно увидеть, что кнопки действий03:01:04
в настоящее время не используется, так что достаточно скоро мы03:01:07
тоже собираюсь их реализовать, но03:01:09
это пока в отдельном компоненте03:01:11
давайте сосредоточимся на значениях атаки и защиты03:01:13
под нашим изображением давайте создадим div и03:01:17
у этого div будет имя класса03:01:20
равен шаблонной строке стилей Dot03:01:23
Контейнер Card Point на небольших устройствах03:01:27
у него будет левое свойство03:01:30
21,2 процента Я нашел это значение таким, какое оно есть03:01:34
очень специфично, но работать лучше и03:01:37
тогда левых будет 22 процента03:01:40
Прямо здесь03:01:42
и, наконец, мы можем поставить ему точку стилей03:01:44
Флекс Центр03:01:46
внутри этого div мы хотим отобразить P03:01:49
отметьте, что этот тег P будет иметь класс03:01:52
имя снова равно строке шаблона03:01:56
стили03:01:58
Точка карты03:02:00
и отправьте текстовое сообщение Dash Yellow Dash 400.03:02:04
и он может отображать динамическое свойство03:02:07
card.att03:02:09
если мы сохраним это, вы увидите цифру 903:02:12
здесь и X тут же, если мы запутаемся03:02:15
проценты немного похожи на давайте сделаем 1003:02:18
вы можете заметить, что это немного не так, но с03:02:20
эти ценности, мы гарантируем, что это03:02:22
всегда будет посередине03:02:24
с учетом сказанного, теперь мы можем дублировать это03:02:27
div ниже03:02:29
Здесь нам нужно изменить03:02:31
проценты, так что давайте сделаем03:02:33
14,2 здесь03:02:35
для левого в данном случае не пойдет03:02:38
быть левым, это будет правым и03:02:40
давайте сделаем что-то вроде 15 процентов03:02:43
и мы собираемся изменить цвет на03:02:46
текст Дэш красный Дэш 700.03:02:50
и вот мы и противостоящие игроки03:02:53
значения скрыты прямо здесь и затем в03:02:56
вот у нас есть 9 и 9 и теперь мы знаем наши03:02:59
значения атаки и защиты, которые не03:03:01
кажется, пока правы, но мы надеемся03:03:03
скоро это исправлю03:03:05
наконец, нам нужен титул нашего игрока03:03:08
Итак, под этим div мы можем создать еще один03:03:11
div03:03:12
у этого div будет имя класса03:03:15
равен шаблонной строке стилей Dot03:03:18
текстовый контейнер карточки и стили dot Flex03:03:24
Центр03:03:25
внутри мы можем отобразить тег P03:03:29
и этот тег P будет отображать03:03:31
заголовок03:03:33
если мы сохраним это, мы сможем увидеть учетную запись 2 и03:03:36
JS Mastery ох как интересно это так03:03:38
освоить JS Mastery прямо здесь, это03:03:40
хороший03:03:41
и затем мы хотим дать этому класс03:03:44
имя, равное карточке Styles Dot03:03:48
текст03:03:49
если мы сохраним это, это выглядит03:03:51
феноменально, если мы расширим наш браузер03:03:55
игра больше похожа на игру03:03:58
теперь это так красиво03:04:00
Поле битвы, у нас есть наши изображения, но большинство03:04:03
главное, что наши данные находятся здесь03:04:05
хотя эти проценты, кажется, не03:04:08
будь прямо сейчас, нам придется посмотретьОписание:
Web 3.0 has the power to change the internet as we know it forever. You're still early in catching the trend right now and building your first blockchain application. Create your characters, create and join live battles, choose your battleground, and battle other players in real-time! This video is a collaboration between Avalanche and JS Mastery. ⭐ Avalanche - https://www.avax.network/ ⭐ Download Core - https://chromewebstore.google.com/detail/core-crypto-wallet-nft-ex/agoakfejjabomempkjlepdflaleeobhb ⭐ Learn more about the latest Avalanche News - https://medium.com/avalancheavax ⭐ Follow Avalanche on Twitter for the latest updates - https://twitter.com/avalancheavax Avalanche is an open, programmable smart contracts platform for decentralized applications. It allows you to build fast, low-cost, Solidity-compatible dApps, and launch customized blockchain networks via Subnets. Create without limits - Build anything you want, any way you want. Avalanche has the tooling and composability you need to speed from concept to launch. Learn more about building on Avalanche with the below developer resources: 📙Developer Documentation - https://docs.avax.network/ 📙Avalanche-Cli - https://github.com/ava-labs/avalanche-cli 📙Avalanche Network Runner - https://github.com/ava-labs/avalanche-network-runner 📙AvalancheJS - https://github.com/ava-labs/avalanchejs 📙Postman Collection - https://github.com/ava-labs/avalanche-postman-collection Become a Web3.0 Pioneer by Building an Advanced NFT Marketplace App: 💻 JS Mastery Pro - https://www.jsmastery.pro/ ✅ A special YOUTUBE discount code is automatically applied! 📙 The Web 3.0 Developer Roadmap : https://resource.jsmastery.pro/web3.0-roadmap 📙 The Ultimate Solidity CheatSheet : https://resource.jsmastery.pro/solidity-cheatsheet 🐛Got stuck? Get your bugs resolved immediately - https://discord.com/servers/javascript-mastery-programming-coding-community-710138849350647871 📚 Materials/References: GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_web3_battle_game/tree/main Starter Code - https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/project_web3_battle_game/tree/main/client-starter GitHub Gist Code Snippets: https://gist.github.com/adrianhajdin/cc3befc6cc1ed69f59334edacbcdb91e Deployment - https://hostinger.com/javascriptmastery With a stunning design, interactive gameplay, smart wallet pairing, live interaction with smart contracts, and, most importantly, the ability to battle other players in real-time, AvaxGods is the best and the only Web3 battle-style online multiplayer card game that you can currently find on YouTube. In this course, you'll learn the following: - How to connect a regular React.js application to the blockchain and pair it to your wallet - You’ll also learn about the solidity programming language and how smart contracts written in Solidity work - You’ll learn how to create smart contracts and decentralized applications on the Avalanche platform 💻 Join JSM on Discord - https://discord.com/invite/n6EdbFJ 🐦 Follow JSM on Twitter - https://twitter.com/jsmasterypro 🖼️ Follow JSM on Instagram - https://www.facebook.com/unsupportedbrowser 💼 Business Inquiries: [email protected] 👇 Time Stamps 00:00:00 Intro 00:05:27 Web3 Setup 00:23:41 Client-side Setup 00:29:25 Higher Order Components 00:44:52 React Web3 Context 01:09:15 Smart Contract Interaction 01:27:52 Smart Contract Event Listeners 01:41:59 New Battle and Join Battle Page 02:22:47 Battle Page 03:07:42 Game Info 03:17:02 Change Battleground 03:29:04 Web3 Modal 03:39:47 Battle Functionality 03:47:58 Custom Error Handling 03:59:04 Explosion Animation 04:22:46 Exit Battle Functionality 04:27:38 Bug Fixes 04:39:28 Code Overview 04:41:27 Deployment
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Build and Deploy an Online Multiplayer Web 3 NFT Card Game | Full Course"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Build and Deploy an Online Multiplayer Web 3 NFT Card Game | Full Course" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Build and Deploy an Online Multiplayer Web 3 NFT Card Game | Full Course"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Build and Deploy an Online Multiplayer Web 3 NFT Card Game | Full Course" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Build and Deploy an Online Multiplayer Web 3 NFT Card Game | Full Course"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Build and Deploy an Online Multiplayer Web 3 NFT Card Game | Full Course"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.