**مهارت‌های لازم:** + آشنایی با `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` در فایل ارسالی نباشد.