**مهارت‌های لازم:** - آشنایی با `React` و استفاده از استیت -------------------------------------------------- ظاهر کلی برنامه بدین صورت است: ![ظاهر برنامه](https://quera.ir/qbox/view/tUcRqU3Mwg/memory_game_ss.gif) # پروژه اولیه پروژه اولیه را از [این لینک](/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 = { 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_ در فایل ارسالی نباشد.

بازی کارت و حافظه

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

آشنایی با 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

راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.

ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
در پوشه‌ی card-memory-game ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات🔗

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

تایپ دیتای هر کارت (فقط برای توضیح بیشتر و نیازی به استفاده از 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 در فایل ارسالی نباشد.