**مهارت‌های لازم**:
- آشنایی با `ReactJS`
- کدخوانی
--------------------------------------------------
در این سوال شما باید الگوریتم مرتب سازی `insertion-sort` را بصورت تصویری پیاده سازی کنید.ظاهر کلی برنامه بدین صورت است:
# پروژه اولیه
پروژه اولیه را از
[این لینک](/contest/assignments/20701/download_problem_initial_project/67917/) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
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* در فایل ارسالی نباشد.
# قسمت آموزشی
در این قسمت راهنمایی‌های سوال، به مرور اضافه می‌شود. مشکلات‌تان در راستای حل سوال را می‌توانید از بخش ["سوال بپرسید"](https://quera.ir/contest/clarification/20701/) مطرح کنید.
<details class="blue">
<summary>
راهنمایی شماره ۱
</summary>
- در این سوال شما می توانید از الگوریتم خودتان یا الگوریتمی که به صورت پیش فرض در پروژه اولیه نوشته شده است استفاده کنید.
- برای پیاده سازی این سوال ممکن است راه حل های متنوعی باشد. اما ساده ترین راه حل این است که شما با گرفتن آرایه ورودی ابتدا الگوریتم *Inserstion Sort* را بر روی آرایه ورودی اجرا کنید و در هر مرحله از مرتب سازی عناصری که دیده می شوند و یا جابه جا می شوند را در یک یا چند آرایه ذخیره کنید. در نهایت آرایه حاصل را به فواصل زمانی معین رندر کنید.
- برای اینکه نحوه مرتب سازی را دنبال کنید می توانید در هر مرحله از حلقه *for* ، آرایه مرتب شده را در یک آرایه دو بعدی نگهداری کنید. سپس آرایه دو بعدی را به فاصله زمانی معین رندر کنید.
- همچنین برای اینکه در هر مرحله بدانید تا کدام عنصر لیست به صورت مرتب شده قرار دارد و کدام عنصر در حال جا به جا شدن هست می توانید از یک آرایه دو بعدی دیگر استفاده کنید. با استفاده از این آرایه می توانید متوجه شوید که کدام عنصر در هر مرحله از مرتب سازی باید چه رنگی داشته باشند.
</details>
<details class="blue">
<summary>
راهنمایی شماره ۲
</summary>
- یک کد برای نحوه ذخیره کردن مراحل مرتب سازی لیست آورده شده است. لیست `actions` عنصری که در حال جا به جا شدن هست و عنصری که تا به حال دیده شده است را ذخیره می کند و لیست `steps` در هر مرحله آرایه مرتب سازی شده را ذخیره می کند.
```js
insertionSort = () => {
let steps = [];
let actions = [];
let copy = [34, 54, 12, 65, 67];
for (let i = 1; i <= copy.length; i++) {
for (let j = i - 1; j >= 0; j--) {
if (copy[j + 1] < copy[j]) {
const temp = copy[j];
copy[j] = copy[j + 1];
copy[j + 1] = temp;
actions.push([j, i]);
steps.push([...copy]);
} else {
actions.push([j, i]);
steps.push([...copy]);
break;
}
}
}
};
```
</details>