ادغام گرافیک ها موجود در کد فرانت اند یک بازی تحت وب

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