مهارت‌های لازم:

• آشنایی با React و استفاده از استیت

ظاهر کلی برنامه بدین صورت است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

card-memory-game
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── __tests__
│   │   └── sample.test.js
│   ├── assets
│   │   ├── css
│   │   │   └── index.css
│   │   └── images
│   │       ├── angular.svg
│   │       ├── aurelia.svg
│   │       ├── backbone.svg
│   │       ├── ember.svg
│   │       ├── js-badge.svg
│   │       ├── react.svg
│   │       └── vue.svg
│   ├── components
│   │   ├── Card.js
│   │   └── Game.js
│   ├── cards.js
│   └── index.js
├── package-lock.json
└── package.json

جزئیات

در این سوال میخواهیم منطق بازی کارت و حافظه رو اضافه کنیم.

تایپ دیتای هر کارت (فقط برای توضیح بیشتر و نیازی به استفاده از typescript نیست):

type Card = {
  id: number;
  name: string;
  image: string;
  order: number;
  isFlipped: boolean;
}

موارد خواسته شده:

• کارت‌ها باید با استفاده از کامپوننت Card در صفحه نمایش داده شوند.
• وقتی رو کارتی کلیک شد، باید flip شود‌ ( isFlipped آن برابر true شود).
• وقتی رو دومین کارت برای مقایسه کلیک شد، بعد از اینکه کارت flip شد، اگر این دو کارت شبیه هم باشند باید flip بمانند.
• اگر دو کارت شبیه هم نباشند، بورد بازی باید قفل شود: یعنی برای 1500 میلی ثانیه هیچ کلیکی نمیتواند انجام شود و بعد از آن این دو کارت به حالت اولیه برمی‌گردنند (isFlipped آن‌ها برابر false میشود).

نکات

• شما تنها مجاز به اعمال تغییرات در فایل src/components/Game.js هستید.
• برای ارسال پاسخ میتوانید فقط فایل Game.js را بدون zip کردن ارسال کنید یا کل پروژه را zip کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.