توسعه دهندهٔ فرانت اند

به یک توسعه‌دهندهٔ فرانت‌اند نیاز داریم تا گرافیک‌ها و انیمیشن‌های جدید را در بازی تحت وب ما ادغام کندیک بازی تحت وب داریم که از گرافیک‌های ساده استفاده می‌کند. حالا می‌خواهیم یک توسعه‌دهندهٔ فرانت‌اند، گرافیک‌ها و انیمیشن‌هایی که یک طراح برایمان طراحی کرده است را در HTML/CSS/JS موجود ادغام کند. سپس کد های جاوا اسکریپت را در به react.js یا solid.js تبدیل کند ،در نهایت، بازی باید ظاهری جذاب و سازگار با موبایل داشته باشد.:بک‌اند با FastAPI/Python نوشته شده و منطق بازی، ذخیرهٔ داده‌ها، APIها و وب‌سوکت‌ها را مدیریت می‌کند.فرانت‌اند با HTML، CSS و JavaScript ساخته شده، اما فقط گرافیک‌های ساده (مثل مربع‌های خاکستری و متن) دارد.اخیراً یک طراح برای ما گرافیک‌ها و انیمیشن‌های جدید (مثل آیکن، پس‌زمینه، انیمیشن‌ها) درست کرده و می‌خواهیم آن‌ها را در همین کد فرانت‌اند اضافه کنیم تا بازی ظاهری حرفه‌ای‌تر پیدا کند.( می‌خواهیم آن‌ها را در کد فعلی فرانت‌اند ادغام کنیم)چه چیزهایی داریم؟کد فعلی فرانت‌اندشامل HTML/CSS ساده برای «خانه‌های بازی» (مربع‌ها) و متن‌های کوتاه برای قابلیت‌هاکد جاوااسکریپت داریم که پیام‌ها را در فرمت جیسون از طریق وب‌سوکت از سرور می‌گیرد و صفحه را به‌روزرسانی می‌کند.دارایی‌های گرافیکی و انیمیشنبا Cinema 4D (Arnold) و Adobe After Effects طراحی شده‌اند.خروجی‌هایی در قالب‌های مناسب وب (PNG، SVG، GIF، MP4، شیت‌های اسپرایت یا شاید Lottie JSON) داریم.اگر لازم شد، می‌توانیم فایل‌های اصلی (C4D، AE) را هم بدهیم تا اصلاحات جزئی انجام شود.از توسعه‌دهنده چه می‌خواهیم؟جایگزین/بهبود گرافیک‌هامربع‌های خاکستری و متن‌های ساده را با گرافیک‌های جدید (آیکن‌ها، پس‌زمینه‌ها، انیمیشن‌ها) عوض کنید. جذاب‌تر کردن صفحهٔ بازی، خانه‌ها و رابط کاربری مربوط به قابلیت‌ها با استفاده از این دارایی‌ها.همه چیز روی موبایل هم به‌خوبی نمایش داده شود (ریسپانسیو).اتصال انیمیشن‌ها به رویدادهای بازیوقتی بازیکن روی یک خانه کلیک می‌کند یا سرور می‌گوید یک قابلیتی فعال شده، انیمیشن مناسب اجرا شود.با استفاده از رویدادها/توابعی که در جاوااسکریپت داریم، این انیمیشن‌ها را وصل کنید تا در زمان درست اتفاق بیفتند. ممکن است بعضی انیمیشن‌ها با CSS حل شوند یا برای بعضی دیگر از جاوااسکریپت پیشرفته استفاده کنید.حفظ منطق فعلی بازیما نمی‌خواهیم کد بازی (جاوااسکریپت) عوض شود، چون همین حالا هم دارد با وب‌سوکت کار می‌کند.شما فقط باید در همان رویدادها/توابعی که داریم، گرافیک جدید بگذارید یا بهبود دهید، بدون اینکه ساختار کلی بازی به‌هم بخورد.حفظ ارتباط وب‌سوکتباید مطمئن شویم بعد از تغییر ظاهر، هنوز هم پیام‌های وب‌سوکت به‌درستی خوانده و به‌روزرسانی می‌شود. منطق وب‌سوکت را تغییری ندهید مگر کاملاً لازم باشد. اگر تغییرات UI باعث شد لازم باشد هندلرهای رویداد عوض شوند، با دقت انجام دهید تا همه چیز خراب نشود.کد CSS/JS تمیز و ماژولاربهتر است CSS را طوری بنویسید که نگه‌داری آن راحت باشد (مثلاً ایجاد کلاس‌های جداگانه، نام‌گذاری منسجم).اگر انیمیشن‌ها پیچیده‌ترند، ممکن است بخشی از جاوااسکریپت هم لازم باشد تا کی‌فریم بسازید یا تغییرات بازی را رصد کند.تبدیل کد های موجود جاوا اسکریپت به react.js یا solid.jsمهارت‌های موردنیازHTML/CSS: ساخت طرح‌های واکنش‌گرا، اعمال طرح جدید، و مدیریت انیمیشن‌ها/ترنزیشن‌های CSS.JavaScript & WebSockets: بتوانید المان‌های جدید رابط کاربری را به رویدادهای JS موجود وصل کنید ، و UI را آپدیت کنید.نحوهٔ استفاده از دارایی‌های جدید: بدانید چطور تصاویر، آیکن‌ها، یا انیمیشن‌های ساده (مثل شیت‌های اسپرایت، GIF) را در کد جای دهید.React.js یا solid.js (solid.js برایمان مهم تر است)مهارت‌های تکمیلی (بد نیست داشته باشید)تجربه بیشتر در جاوااسکریپت: اگر منطق انیمیشن پیچیده‌تر شود یا لازم باشد بخشی از کد را بازنویسی کنید.آشنایی با ابزارهای طراح مثل Cinema 4D (Arnold) و Adobe After Effects: برای تغییر رنگ یا فریم‌های کوچک اگر نیاز شد.کار با Lottie/Bodymovin: اگر فایل‌های انیمیشن به صورت Lottie JSON تحویل شد، بتوانید آن را به شکلی برداری و روان ادغام کنید.اصول UI/UX: درک چیدمان، رنگ، و طراحی متمرکز بر کاربر، مخصوصاً در موبایل.زبان اینگلیسیپروژه در حال توسعهاین بازی قرار است بیشتر گسترش پیدا کند. بعد از این که دارایی‌های جدید را جاگذاری و ظاهر بازی را تکمیل کردیم، می‌خواهیم قابلیت‌های بیشتری اضافه کنیم؛ مثلاً:ساخت صفحه پروفایل کاربر یا دیگر صفحات مربوط به UI،افزودن حالت‌ها یا قابلیت‌های تازه به گیم‌پلی،بنابراین ما به یک توسعه‌دهنده فرانت‌اند نیاز داریم که صرفاً یک‌بار همکاری نکند، بلکه در طولانی‌مدت هم کنارمان باشد.نکته مهم: وب‌اپلیکیشن متمرکز بر موبایلبیشتر کاربران ما از گوشی وارد می‌شوند، پس باید تمام این تغییرات برای گوشی هم به‌خوبی جواب دهد.نتیجهدر پایان کار ما می‌خواهیم:یک فرانت‌اند زیبا داشته باشیم که تمام دارایی‌های گرافیکی جدید (آیکن‌ها، پس‌زمینه‌ها و انیمیشن‌ها) را استفاده کند و برای موبایل هم بهینه باشد.انیمیشن‌ها دقیقاً در لحظات درست اجرا شوند (مثلاً وقتی بازیکن کلیک می‌کند یا سرور پیامی می‌فرستد).اتصال وب‌سوکت و منطق اصلی بازی خراب نشود، بلکه فقط رابط کاربری بهتر شود.کد HTML/CSS/JS شفاف و مرتب باشد تا در آینده بتوانیم به‌سادگی تغییرش دهیم.اگر دربارهٔ هریک از این موارد (مثلاً روش رویدادهای جاوااسکریپت، فرمت گرافیک‌ها، داده‌های سرور) پرسشی دارید، بگویید تا برایتان توضیح دهیم یا مستندات بدهیم.