دانیال که پسر درس‌خوانی است، می‌خواهد برای اوقات فراغت خود در سال تحصیلی جدید برنامه‌ریزی کند. شما به عنوان دوست خوب دانیال تصمیم گرفته‌اید برای او بازی دوز (`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 ```