**مهارت‌های لازم:** - آشنایی با `React` و استفاده از استیت -------------------------------------------------- ظاهر کلی برنامه بدین صورت است:  # پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/32012/download_problem_initial_project/107347/) دانلود کنید. <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_ در فایل ارسالی نباشد.