**مهارت‌های لازم:**
- آشنایی با `React` و استفاده از استیت
--------------------------------------------------
ظاهر کلی برنامه بدین صورت است:
# پروژه اولیه
پروژه اولیه را از
[این لینک](/problemset/assignments/4367/download_problem_initial_project/109569/)
دانلود کنید.
<details class="green">
<summary>
ساختار پروژه
</summary>
```
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
```
</details>
<details class="brown">
<summary>
راه‌اندازی پروژه
</summary>
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `card-memory-game` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/`
میتوانید نتیجه را ببینید.
</details>
# جزئیات
در این سوال میخواهیم منطق بازی کارت و حافظه رو اضافه کنیم.
تایپ دیتای هر کارت (فقط برای توضیح بیشتر و نیازی به استفاده از *typescript* نیست):
```typescript
type Card = {
<mark title="برای هر کارت متفاوت است">id</mark>: number;
<mark title="دو کارت مشابه نام یکسانی دارند">name</mark>: string;
image: string;
order: number;
<mark title="پیش فرض false است اگر true شود کارت flip میکند">isFlipped</mark>: boolean;
}
```
موارد خواسته شده:
- کارت‌ها باید با استفاده از کامپوننت `Card` در صفحه نمایش داده شوند.
- وقتی رو کارتی کلیک شد، باید *flip* شود ( `isFlipped` آن برابر *true* شود).
- وقتی رو دومین کارت برای مقایسه کلیک شد، بعد از اینکه کارت *flip* شد، اگر این دو کارت شبیه هم باشند باید *flip* بمانند.
- اگر دو کارت شبیه هم نباشند، بورد بازی باید قفل شود: یعنی برای 1500 میلی ثانیه هیچ کلیکی نمیتواند انجام شود و بعد از آن این دو کارت به حالت اولیه برمی‌گردنند (`isFlipped` آن‌ها برابر *false* میشود).
# نکات
- شما تنها مجاز به اعمال تغییرات در فایل `src/components/Game.js` هستید.
- برای ارسال پاسخ میتوانید فقط فایل `Game.js` را بدون _zip_ کردن ارسال کنید یا کل پروژه را _zip_ کرده و ارسال کنید. دقت کنید که پوشه‌ی
_node_modules_ در فایل ارسالی نباشد.