**مهارت‌های لازم:**
+ آشنایی با `ReactJS`
+ آشنایی با `Redux`
+ کدخوانی
--------------------------------------------------
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/Mpx6d9am2D/Conway-Game-of-Life.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
Conway-Game-of-Life
├── public
│ ├── index.html
│ └── manifest.json
├── src
│ ├── actions
│ │ └── index.js
│ ├── components
│ │ ├── Button.js
│ │ └── Cell.js
│ ├── constants
│ │ └── index.js
│ ├── containers
│ │ ├── Control.js
│ │ ├── Counter.js
│ │ └── Grid.js
│ ├── helpers
│ │ └── grid.js
│ ├── reducers
│ │ ├── counter.js
│ │ ├── grid.js
│ │ ├── index.js
│ │ └── status.js
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ └── store.js
├── README.md
├── package.json
└── yarn.lock
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `Conway-game-of-life`، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید.
# جزئیات
طراحی *state* برنامه بدین صورت است:
``` js
{
counter: 0,
grid: [Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10)],
status: {
timerId: null, isRunning: false
}
}
```
- عناصر هر یک از آرایه‌های `grid` به صورت زیر می‌باشد.`value` می‌تواند `true` یا `false` باشد.
``` js
{
status: value,
}
```
- `counter`: نشان‌دهنده تعداد نسل‌ها می‌باشد.
- `grid`: یک آرایه دو بعدی (ماتریس) که به فواصل زمانی معین می‌بایست رندر شود. هم‌چنین الگوریتم شما روی این آرایه دو بعدی می‌بایست اجرا شود.
- `status.timerId`: نشان‌دهنده `id` تایمری است که شما می‌بایست آن را بوجود بیاورید و `id` آنرا ذخیره کنید.
- `status.isRunning`: وضعیت بازی را مشخص می‌کند که آیا در حال اجرا می‌باشد یا خیر.
داخل فایل `actions/index.js` اطلاعات مربوط به *action*(عملیات)های شما قرار دارد.
در این پروژه هشت نوع *action* وجود دارد:
- `START_GAME`: با گرفتن `id` تایمر بازی را آغاز می‌کند. هم‌چنین می‌بایست وضعیت بازی از `false` به `true` تغییر کرده و هم‌چنین `status.timerId` مقدار دهی شود. هم‌چنین الگوریتم شما باید هر ۵۰ میلی‌ثانیه یک‌بار بر روی ماتریس اجرا شود.
- `STOP_GAME`: وضعیت بازی را تغییر می‌دهد. دقیقا برعکس عملیات `START_GAME` می‌باشد. هم‌چنین `status.timerId` می‌بایست `null` شود.
- `TICK`: با فراخوانی این *action* یک‌بار الگوریتم شما می‌بایست روی ماتریس اجرا شود. هم‌چنین یک واحد می‌بایست به `counter` اضافه شود.
- `TOGGLE_ALIVE`: این *action* `(x,y)` به عنوان ورودی می‌گیرد. این مختصات یک سلول در ماتریس می‌باشد که باید وضعیت آن با کلیک بر روی آن عوض شود.
- `RESET_GAME`: این *action* ماتریس را خالی می‌کند و تمام سلول‌های ماتریس به وضعیت مرده تبدیل می‌شوند.
- `RANDOM_MAP`: این *action* وضعیت سلول‌های ماتریس را به صورت رندم تغییر می‌دهد.
- `SET_GRID_HEIGHT`: این *action* ارتفاع ماتریس را تغییر می‌دهد.
- `SET_GRID_WIDTH`: این *action* طول ماتریس را تغییر می‌دهد.
هم‌چنین در مورد فایل `helpers/grid.js` باید موارد زیر را در کلاس `Grid` تکمیل نمایید.
- تابع `makeGrid`: این تابع وظیفه ساختن ماتریس را دارد.
- تابع `countNeighbors` : این تابع با دریافت کردن مختصات یک سلول تعداد همسایه‌های زنده آنرا برمی‌گرداند.
- تابع `nextGeneration`: وظیفه این تابع تولید کردن ماتریس نسل بعدی از روی ماتریس فعلی می‌باشد.
- تابع `setGridWidth`: این تابع طول ماتریس را تنظیم می‌کند.
- تابع `setGridHeight`: این تابع ارتفاع ماتریس را تنظیم می‌کند.
# نکات
- دو سلول را مجاور می‌نامیم اگر حداکثر یک ستون و یک سطر با هم فاصله داشته‌باشند. (فرض می‌شود که سطر اول و آخر و هم‌چنین ستون اول و آخر با هم مجاور هستند.) بنابراین هر خانه دقیقا ۸ همسایه دارد.
- شما تنها مجاز به اعمال تغییر در فایل‌های `components/Cell.js` و `containers/*`، `help/grid.js`، `reducers/status.js` ، `reducers/counter.js` ،`reducers/grid.js` هستید.
- پس از اعمال تغییرات، پروژه را _zip_ کرده و ارسال کنید.
- تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد.