**مهارت‌های لازم**:
- آشنایی با `ReactJS`
- کدخوانی
--------------------------------------------------
در این سوال شما باید الگوریتم مرتب سازی `insertion-sort` را بصورت تصویری پیاده سازی کنید.ظاهر کلی برنامه بدین صورت است:
# پروژه اولیه
پروژه اولیه را از
[این لینک](/problemset/assignments/4367/download_problem_initial_project/68278/) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
sort-visualizer
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── Components
│ │ ├── Bar.js
│ │ ├── Button.js
│ │ └── Input.js
│ ├── Containers
│ │ └── SortVisualizer.js
│ ├── __tests__
│ │ ├── __snapshots__
│ │ │ └── sample.test.js.snap
│ │ └── sample.test.js
│ ├── App.js
│ ├── index.css
│ └── index.js
├── .qsampletest
├── README.md
├── package.json
└── pnpm-lock.yaml
```
<details class="brown">
<summary>
راه‌اندازی پروژه
</summary>
برای اجرای پروژه، باید`NodeJS` و `npm` را از قبل نصب کرده باشید.
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `sort-vis` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید.
</details>
# جزئیات
در این پروژه تعدادی `Component` و دو `Container` وجود دارد. شما می توانید از `Container` های دلخواه خودتان استفاده کنید اما نباید در `Component` ها تغییری ایجاد کنید.توضیحات `Component` ها در زیر آمده است.
- `SortVisualizer` : در این `Container` تابع *insertionSort* قرار داده شده است که شما می توانید از این الگوریتم استفاده کنید.همچنین می توانید الگوریتم دلخواه خود را پیاده سازی نمائید. این الگوریتم را طوری تغییر دهید که موارد زیر را پیاده سازی کنید :
- عددی که از آن به بعد لیست به صورت مرتب نشده قرار دارد را به رنگ `blue` نمایش دهید.
- همچنین عددی که در حال جا به جا شدن می باشد را به رنگ `green` نمایش دهید.
- برای درک بهتر از مثال زیر را مشاهده کنید :
- `Bar` : از این مولفه برای ایجاد یک ستون یا همان `Bar` استفاده کنید.این مولفه یک عدد که بیانگر ارتفاع ستون و یک رنگ پس زمینه دریافت می کند.
- `Input` : از این کامپوننت برای دریافت ورودی استفاده می شود.ورودی رشته ای از اعداد می باشد که با فاصله از هم جدا شده اند.
- در پروژه دو بار از این مولفه استفاده شده است.یکبار برای دریافت دنباله ای از اعداد و بار دیگر برای دریافت بازه زمانی که شما می بایست الگوریتم خود را اجرا کنید و خروجی رو نمایش دهید.
نکات زیر را مد نظر داشته باشید :
- پس از پایان مرتب سازی یک پیغام در یک عنصر با شناسه `end-message` نمایش دهید.
- مقدار پیش فرض بازه زمانی اجرای الگوریتم `50ms` در نظر گرفته شده است.
# نکات
- شما تنها مجاز به اعمال تغییر در فایل‌های `Containers/*` هستید.
- پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.دقت کنید که پوشه‌ی *node_modules* در فایل ارسالی نباشد.