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

• آشنایی با ReactJS
• آشنایی با Redux
• کدخوانی

---

پروژه اولیه

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

ساختار فایل‌های این پروژه به صورت زیر است.

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 برنامه بدین صورت است:

{
    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 باشد.

{
    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 در فایل ارسالی نباشد.