**مهارت‌های لازم:**
- آشنایی با `JS`
--------------------------------------------------
در این سوال قصد داریم بخشی از بازی نقطه خط را با استفاده از `js` و بدون استفاده از کتابخانه جانبی پیاده سازی کنیم.ظاهر کلی برنامه بدین صورت است:
# پروژه اولیه
پروژه اولیه را از [این لینک](/problemset/assignments/4367/download_problem_initial_project/98447/) دانلود کنید.
<details class="green">
<summary>
ساختار فایل‌های این پروژه به این صورت است
</summary>
```
dots-and-boxes-master
├── cypress
│ ├── fixtures
│ │ └── example.json
│ ├── integration
│ │ └── sample.spec.js
│ ├── plugins
│ │ └── index.js
│ └── support
│ ├── commands.js
│ └── index.js
├── .qsampletest
├── cypress.json
├── index.html
├── index.js
├── package.json
└── style.css
```
</details>
<details class="brown">
<summary>
راه اندازی پروژه
</summary>
+ ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
# جزئیات
ظاهر این سوال به شکل کامل پیاده سازی شده است. شما باید عملکرد های زیر را با استفاده از جاوا اسکرپیت به بازی اضافه کنید:
- با کلیک کردن بر روی هر کدام از خط ها، با در نظر گرفتن نوبت بازیکن ها، رنگ خط مورد نظر به آبی یا قرمز تغییر پیدا می کند.
- وضیعت نوبت بازیکن ها را یک عنصر با شناسه `game_status` نمایش دهید.
- در صورت اینکه نوبت بازیکن قرمز باشد، متن مورد نظر باید _Player red's turn_ و در صورت اینکه نوبت بازیکن آبی باشد متن مورد نظر باید _Player blue's turn_ باشد.
- همچنین در صورت اینکه نشانگر ماوس رو یکی از خط ها برده شود(رویداد _mouseenter_)، رنگ خط باید مطابق با نوبت بازیکن ها تغییر کند و هنگامی که نشانگر ماوس از روی خط ها به بیرون برده شود(رویداد _mouseleave_) رنگ خطوط به حالت عادی بر میگردد.
توضیحات فایل _index.html_ و _style.css_ :
- هر کدام از خطوط بازی به عنوان یک عنصر `div` در نظر گرفته شده اند. خطوط بازی یا _horizontal_ (افقی) هستند یا _vertical_(عمودی) هستند. برای خطوط افقی کلاس `horizontal_line` در نظر گرفته شده است و برای خطوط عمودی کلاس `vertical_line` در نظر گرفته شده است.
- در فایل _style.css_ نیز استایل دهی های لازم جهت قرار گیری المان ها آورده شده است.
- شما نیازی به ایجاد تغییر در فایل های بالا ندارید.
# نکات
- رنگ های آبی و قرمز به ترتیب `#87ceeb` و `#fa8072` هستند.
- همچنین کلاس های مربوط به این رنگ ها `blue` و `red` هستند.
- تغییرات را تنها در فایل `index.js` اعمال کنید. تغییرات در بقیه فایل ها نادیده گرفته می شوند.
- توجه کنید که داوری خودکار بر مبنای نام کلاس های انجام می‌شود.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── index.js
```