ساخت صفحه انتخاب کاراکتر در React (بخش دوم) – از صفر تا صد

در بخش قبلی این آموزش با مقدمات طراحی یک صفحه انتخاب کاراکتر در React آشنا شدیم. و اینک بخش دوم تقدیم شما می‌شود.

تابع onMorph کنونی حالت morphed را در زمان کلیک شدن به true تنظیم می‌کند و از این رو می‌توانیم کلاس کاراکتر مخفی را که بازیکن انتخاب کرده است به محض true شدن morphed نمایش دهیم. ما آن را درست زیر عنصر div شامل دکمه morph نمایش می‌دهیم.

فایل src/App.js

فایل src/styles.module.css

کلاس مخفی که بازیکن به آن تبدیل می‌شود، یک Sage است که به صورت زیر نمایش می‌یابد:

گرچه این وضعیت می‌تواند مناسب تلقی شود، اما به نظر می‌رسد همچنان می‌توان بهبودهایی روی آن اعمال کرد. به بیان دیگر به نظر می‌رسد که بازیکن به مقداری عمل اسکرول کردن نیاز دارد و از این رو باید با رابط کاربری سر و کله بزند.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت + گواهینامه در فرادرس

کلیک کنید

در این مرحله یک کتابخانه کوچک به نام react-scroll-to-component نصب می‌کنیم که به ما امکان اسکرول کردن به صفحه بازیکن و اساساً به هر عنصر را با ارسال ارجاع آن عنصر می‌دهد:

npm install --save react-scroll-to-component

آن را در فایل src/App.js ایمپورت می‌کنیم:

import scrollToComponent from 'react-scroll-to-component'

اکنون یک ref ایجاد کرده و آن را به عنصر الصاق می‌کنیم:

از آنجا که می‌خواهیم جلوه اسکرول کردن، روان به نظر برسد، باید مقداری به ارتفاع صفحه اضافه کنیم تا فضای بیشتری پدید آید. این کار در عمل با افزودن یک div خالی با مقداری ارتفاع در زمان true شدن morphed ممکن خواهد بود:

اما اینک یک مشکل داریم. این ارتفاع اضافی در زمانی که ناحیه sega هنوز نمایان نشده است، ایجاد نمی‌شود. به بیان دیگر کارکرد اسکرول شدن کار نمی‌کند، زیرا در زمان فراخوانی هنوز فضای اضافی وجود ندارد. به منظور رفع این اشکال باید یک حالت دیگر به نام morphing اضافه کنیم که مقداری زمان به ما بدهد تا بتوانیم true شدن morphed بازیکن را در رابط کاربری معطل بکنیم:

اما اکنون با مشکل جدیدی مواجه شده‌ایم. به نظرمی رسد که morphed عناصر درون خود را از رندر شدن بازمی‌دارد و این مسدود شدن از به‌کارگیری منطق درون قاب زمانی 1.5 ثانیه‌ای ناشی می‌شود:

برای حل این مشکل باید گزاره شرطی && morphed  را برداریم و به جای آن از پکیج classnames برای ادغام استایل‌های اضافی استفاده کنیم. این استایل‌ها آن رفتار را شبیه‌سازی می‌کنند و عناصر را در درخت react حفظ می‌کنند. بدین ترتیب می‌توانیم از قابلیت‌هایی مانند انیمیشن نیز استفاده کنیم:

همچنین باید ref دیگر را نیز روی دکمه morph اعمال کنیم تا زمانی که کاربر یک کلاس کاراکتر را انتخاب می‌کند نیز صفحه اسکرول شود.

فایل src/App.js

در مثال فوق زمانی که morph انجام شد، استایل زیر را اعمال کردیم:

style={{ opacity: morphed? '0.4': 1 }}

تا به بازیکن نشان دهیم که دکمه دیگر در دسترس نیست. یک خصوصیت غیر فعال‌سازی نیز برای غیر فعال کردن رویدادهای کلیک به صورت زیر اعمال کردیم:

disabled={morphed{

همچنین متن را بر اساس به‌روزرسانی حالت morph با کد زیر تغییر دادیم:

{morphing? 'Morphing...': morphed? 'Morphed': 'Morph'}

تا کاربر به طور مداوم با نگاه کردن به چیزهایی که در حال تغییر هستند، مشغول باشد. همچنین بخش ) && selected.length !!} را حذف کردیم چون انیمیشن را مسدود می‌کرد و یک ref به نام morphRef چنان که در بخش قبلی دیدیم روی آن اعمال کردیم.

در نهایت در قلاب سفارشی، پیاده‌سازی scrollToComponent را نیز در انتهای تابع onSelect اعمال کردیم تا اسکرول را روی دکمه morph نیز انیمیت کنیم.

ویرایش نهایی

زمانی که morphing کامل شد نوعی انیمیشن بارگذاری را شبیه‌سازی می‌کنیم تا کاربر بد‌اند که می‌خواهیم به بخش بعدی برویم:

استایل‌های آن چنین است:

می‌توانید ببینید که یک حالت جدید به نام ready نیز وجود دارد، بنابراین باید آن را در قلاب سفارشی پیاده‌سازی کنیم:

در نهایت قصد داریم کل صفحه را فید کنیم تا با پایان یافتن بخش کنونی صفحه‌های بعدی را نمایش دهیم. این بدان معنی است که باید حالت دیگری به نام shutdown به قلاب سفارشی اضافه کنیم که فراخوانی می‌شود و یک نام کلاس جدید به عنصر div مربوط به root اعمال می‌کند. حالت shutdown تنها زمانی که ready به صورت true درآید مورد استفاده قرار می‌گیرد.

نتیجه نهایی چنین است:

اینک کد کامل به صورت زیر باید باشد.

فایل src/App.js

فایل src/components.js

فایل src/styles.module.css

ممکن است متوجه شده باشید که در سراسر این راهنما برخی کدهای تکراری وجود داشتند. فرض کنید مجبور باشید یک تغییر ناگهانی روی کادرهای انتخاب کاراکتر داشته باشید، مثلاً اندازه آن‌ها را تغییر دهید. بدین ترتیب اگر یکی از آن‌ها را عوض کنید، باید کل فایل را اسکن کنید و کادر انتخاب دیگر را پیدا کنید تا آن را نیز تغییر دهید تا رابط کاربری یک دست بماند.

در حال حاضر، کادرهای انتخاب Sorceress و Knight یکسان هستند و باید به صورت یکسانی نیز بمانند. اما اگر دو کاراکتر tier2 دیگر به بازی اضافه کنیم چطور؟ بدین ترتیب باید کلی کد تکراری داشته باشیم. از این رو ایده بهتر این است که آن را به صورت یک کامپوننت مستقل تجرید کنیم. این کار مزیت عمده‌ای به صورت امکان سفارشی‌سازی بهتر نیز فراهم می‌آورد.

در صورتی که کادرهای انتخاب کاراکتر را تجرید کنیم، کد به صورت زیر در می‌آید:

فایل src/App.js

فایل src/components.js

سخن پایانی

بدین ترتیب به انتهای این مقاله‌ی دو بخشی می‌رسیم. امیدواریم از این راهنما بهره لازم را برده باشید و توانسته باشیم به دانش شما در این زمینه بیافزاییم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• واکشی (Fetch) کردن داده ها در اپلیکیشن های React — به زبان ساده
• ۲۲ ابزار مهم برای توسعه دهندگان React — فهرست کاربردی
• آموزش ری اکت (React) — مجموعه مقالات مجله فرادرس

==