ظاهر کلی برنامه بدین صورت است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

graph
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.js
│   ├── Graph.js
│   ├── index.css
│   └── index.js
├── package-lock.json
└── package.json

توضیحات

در این سوال شما باید الگوریتم‌های BFS و DFS که را طوری تغییر دهید مسیری که این الگوریتم‌ها سرچ را انجام میدهند تا هدف نمایش داده شود.

پراپرتی‌های کامپوننت Graph:

• highlightNode: ایدی گره برای highlight کردن که برای نمایش مسیر استفاده میشود.
• startNode: ایدی گره شروع که با اولین کلیک روی گره مشخص میشود.
• goalNode: ایدی گره‌ای که برای ‌آن جستجو انجام میدهیم که با دومین کلیک روی گره مشخص میشود.
• onNodeClick: تابعی که هنگام کلیک شدن گره با ایدی ان گره صدا زده میشود.
• graph: گراف برای نمایش

اولین کلیک روی هر گرهی، گره شروع و دومین کلیک روی هر گرهی گره پایان را مشخص میکند. وقتی دکمه "Clear" کلیک شد باید این دو گره پاک شوند.

زمانی که بین هر بار highlight کردن مسیر 500 میلی‌ثانیه است. بعداز کلیک شدن روی "DFS" یا "BFS" الگورتیم مربوطه از گره شروع، شروع به نمایش میشود و بعداز اینکه گره هدف را پیدا کرد یا بعداز جستجوی تمام گره‌ها به هدف نرسید، 500 میلی‌ثانیه بعد از highlight اخرین گره، از highlight خارج میشود.

نکات

• شما تنها مجاز به اعمال تغییرات درون فایل App.js هستید.
• برای آشنایی بیشتر با الگوریتم Depth-first search می‌توانید به این لینک و برای الگوریتم Breadth-first search به این لینک مراجعه کنید.
• به هنگام ثبت پاسخ، فقط فایل App.js یا پروژه را با ساختار زیر ارسال کنید:

[your-zip-file-name].zip
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.js
│   ├── Graph.js
│   ├── index.css
│   └── index.js
├── package-lock.json
└── package.json