دانیال که پسر درس‌خوانی است، می‌خواهد برای اوقات فراقت خود در سال تحصیلی جدید برنامه‌ریزی کند. شما به عنوان دوست خوب دانیال تصمیم گرفته‌اید برای او بازی دوز (`X-O`) را پیاده‌سازی کنید.
ما هم به عنوان دوست خوب شما، قسمتی از این پروژه را از قبل پیاده‌سازی کرده‌ایم که آن را در اختیار شما قرار می‌دهیم.
برای مدیریت `state` این برنامه، از `Redux` استفاده شده است. حال شما باید قسمت‌های ناتمام این پروژه را که شامل ارتباط برنامه با `store` است، تکمیل کنید.
شمای کلی برنامه بدین صورت است:
# فایل‌های اولیه
فایل‌های اولیه‌ی پروژه را از [اینجا](http://bayanbox.ir/download/8304645354837412849/tic-tac-toe.zip) دانلود کنید. ساختار این فایل‌ها به شرح زیر است (مواردی که نیاز به تغییر دارند با `*` مشخص شده‌اند):
```
tic-tac-toe.zip
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── App.js
│ │ ├── Board.js
│ │ ├── Board.css
│ │ ├── Cell.js
│ │ ├── Cell.css
│ │ ├── XOApp.js *
│ │ └── XOApp.css
│ ├── store
│ │ ├── actions.js *
│ │ ├── index.js
│ │ └── reducer.js *
│ ├── index.js
│ └── index.css
├── package.json
└── package-lock.json
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا فایل‌های اولیه را دانلود و از حالت فشرده خارج کنید.
- سپس در پوشه‌ی `tic-tac-toe` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- سپس در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه‌ی کد را ببینید.
# جزئیات
شمای `state` این برنامه بدین صورت است:
``` js
{
board: Array(9),
turn: String,
winner: String,
}
```
- `board` : آرایه‌ای نُه‌تایی از رشته است که اطلاعات صفحه‌ی بازی در آن ذخیره می‌شود. خانه‌های این آرایه سه حالت `x`، `o` ، و ` ` (رشته‌ی خالی) را دارند که مشخص‌کننده‌ی حالت آن خانه از جدول هستند. شماره‌ی هر خانه در تصویر زیر مشخص شده است:
- `turn` : مشخص‌کننده‌ی نوبت است که می‌تواند مقادیر `x` ، و `o` داشته باشد. مقدار آن پس از هر انجام نوبت تغییر می‌کند.
- `winner` : ابتدا رشته‌ای با طول صفر است که پس از برنده‌شدن یکی از بازیکن‌ها یکی از دو مقدار `x` ، یا `o` را می‌گیرد. اگر بازی مساوی شود، باید کاراکتر `-` داخل این رشته قرار گیرد.
در این پروژه سه `component` موجود است:
- `XOApp` : این فایل کلی برنامه است. شما باید `state` و `action` های مربوط را به این `component` متصل کنید.
- `Board` : این فایل دربردارنده‌ی صفحه‌ی بازی است.
- `Cell` : هر خانه از جدول نُه‌تایی بازی، از این `component` ساخته شده است.
داخل فایل `actions.js` اطلاعات مربوط به `action` های شما قرار خواهند گرفت. در این پروژه دو نوع `action` (عملیات) وجود دارد:
- `MOVE` : همراه این عملیات یک ورودی `index` ، بین `0` تا `8` ، نیز داده می‌شود که نشان‌دهنده‌ی شماره‌ی خانه‌ای است که بازیکن آنجا با کلیک‌کردن حرکت انجام داده است.
- `RESTART` : این اکشن نیز بازی را به حالت اولیه برمی‌گرداند.
سپس شما باید `state` و `action` های خود را به `XOApp` متصل کرده و متدهای این کلاس را تکمیل کنید.
# نکات
- شما تنها مجاز به اعمال تغییر در فایل‌های `XOApp.js`، `reducer.js` و `actions.js` هستید.
- بازیکن‌ها فقط مجاز به تغییر خانه‌های خالی هستند؛ بنابراین با کلیک بر روی خانه‌های پر هیچ نوبتی انجام نمی‌شود.
- پس از اتمام بازی هیچ خانه‌ای تغییر نخواهد کرد.
- پس از اعمال تغییرات، کل پروژه را طبق ساختار زیر _zip_ کرده و ارسال کنید. دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد.
```
[your-zip-file-name].zip
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── App.js
│ │ ├── Board.js
│ │ ├── Board.css
│ │ ├── Cell.js
│ │ ├── Cell.css
│ │ ├── XOApp.js
│ │ └── XOApp.css
│ ├── store
│ │ ├── actions.js
│ │ ├── index.js
│ │ └── reducer.js
│ ├── index.js
│ └── index.css
├── package.json
└── package-lock.json
```