مهارت‌های لازم:

• آشنایی با ReactJS
• کدخوانی

---

در این سوال شما باید الگوریتم مرتب سازی insertion-sort را بصورت تصویری پیاده سازی کنید.ظاهر کلی برنامه بدین صورت است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

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

راه‌اندازی پروژه

برای اجرای پروژه، بایدNodeJS و npm را از قبل نصب کرده باشید.

• ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
• در پوشه‌ی sort-vis ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
• در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
• پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

در این پروژه تعدادی ‍‍Component و دو Container وجود دارد. شما می توانید از Container های دلخواه خودتان استفاده کنید اما نباید در Component ها تغییری ایجاد کنید.توضیحات Component ها در زیر آمده است.

• SortVisualizer : در این Container تابع insertionSort قرار داده شده است که شما می توانید از این الگوریتم استفاده کنید.همچنین می توانید الگوریتم دلخواه خود را پیاده سازی نمائید. این الگوریتم را طوری تغییر دهید که موارد زیر را پیاده سازی کنید :
• عددی که از آن به بعد لیست به صورت مرتب نشده قرار دارد را به رنگ blue نمایش دهید.
• همچنین عددی که در حال جا به جا شدن می باشد را به رنگ green نمایش دهید.
• برای درک بهتر از مثال زیر را مشاهده کنید :

• Bar : از این مولفه برای ایجاد یک ستون یا همان Bar استفاده کنید.این مولفه یک عدد که بیانگر ارتفاع ستون و یک رنگ پس زمینه دریافت می کند.
• Input : از این کامپوننت برای دریافت ورودی استفاده می شود.ورودی رشته ای از اعداد می باشد که با فاصله از هم جدا شده اند.
• در پروژه دو بار از این مولفه استفاده شده است.یکبار برای دریافت دنباله ای از اعداد و بار دیگر برای دریافت بازه زمانی که شما می بایست الگوریتم خود را اجرا کنید و خروجی رو نمایش دهید.

نکات زیر را مد نظر داشته باشید :

• پس از پایان مرتب سازی یک پیغام در یک عنصر با شناسه ‍end-message نمایش دهید.
• مقدار پیش فرض بازه زمانی اجرای الگوریتم 50ms در نظر گرفته شده است.

نکات

• شما تنها مجاز به اعمال تغییر در فایل‌های Containers/* هستید.
• پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.