گروهی از جویندگان گنج در اعماق یک هزارتوی باستانی و جادویی قرار گرفته‌اند. این هزارتو یک شیء قدرتمند را در خود پنهان کرده، اما برای رسیدن به آن، باید پیام‌های مخفی که روی دیوارهای سنگی هزارتو حک شده‌اند را رمزگشایی کنند. هر دیوار از کاشی‌های سنگی تشکیل شده که به شکل یک جدول مرتب شده و برخی از این کاشی‌ها حروفی را نمایش می‌دهند که کلماتی را تشکیل می‌دهند.
شکارچیان یک طلسم جادویی دارند که می‌تواند کلمات را برجسته کند، اما تنها زمانی کار می‌کند که کلمات را در جهت‌های خاص جستجو کنند. وظیفه شما این است که به آن‌ها کمک کنید تا دیوارهای هزارتو را رمزگشایی کنند. شما باید تابعی بنویسید که از طریق شبکه‌ای از حروف جستجو کند و تشخیص دهد که آیا کلمه مشخص شده را می‌توان در هر ردیف یا ستون پیدا کرد یا خیر.
اگر بتوانید این معما را حل کنید، شکارچیان را به سمت گنج هدایت کرده و قبل از اینکه هزارتو برای همیشه مهر و موم شود از آن فرار می‌کنید.
ظاهر کلی برنامه به شکل زیر است:
# پروژه اولیه
پروژه اولیه را از
[این لینک](/problemset/assignments/4367/download_problem_initial_project/254941/)
دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.
```
initial-project.zip
├── index.html
├── styles.css
└── script.js
```
# جزئیات
در این تمرین شما باید موارد مورد نیاز را در فایل `script.js` پیاده‌سازی کنید.
<details class="violet">
<summary>
**تابع updateGrid**
</summary>
در این تابع، شما باید جدول کلمات را از ورودی (`textarea`) طبق تصویر پروژه اولیه دریافت کنید و یک بازی *Word Search* جدید ایجاد کنید. تضمین می‌شود تعداد حروف موجود در هر سطر با سایر سطرها برابر است.
سپس آن را به‌شکل یک شبکه گرید از حروف در صفحه نمایش دهید. این جدول در قالب یک آرایه دوبعدی از رشته‌ها است که هر سطر و ستون آن یک حرف از جدول کلمات است. همچنین باید تعداد ستون‌های گرید را بر اساس طول هر سطر تنظیم کنید. (مقدار `grid-template-columns` باید به تعداد حروف موجود در هر سطر تنظیم شود.)
</details>
<details class="brown">
<summary>
**تابع findWord**
</summary>
این تابع مسئول جستجوی کلمات در جدول است. وظیفه‌ی شما این است که کلمه‌ای که کاربر وارد کرده را در جهات مختلف (هم افقی، هم عمودی) جستجو کنید.
+ اگر آن کلمه را پیدا کردید، عبارت `Result for "${word}": Found` در قسمت `result` نوشته شده و به حروف پیدا شده در جدول، کلاس `highlight` داده می‌شود تا برجسته شوند.
+ اگر کلمه پیدا نشد، عبارت `Result for "${word}": Not found` در قسمت `result` نوشته می‌شود و هیچ حرفی از جدول برجسته نمی‌شود.
</details>
# خواسته مسئله
شما باید پروژه را طوری پیاده‌سازی کنید که توابع `updateGrid` و `findWord` به درستی عمل کنند. برای این کار، پیشنهاد می‌شود از کلاسی به نام `WordSearch` استفاده کنید که به مدیریت بهتر جستجوی کلمات در جدول کمک می‌کند.
### کلاس `WordSearch`
+ در هنگام ایجاد یک شیء از کلاس `WordSearch`، یک شبکه دوبعدی از حروف (یک آرایه دوبعدی) به عنوان ورودی به سازنده داده می‌شود و این جدول به‌عنوان یک خصوصیت در شیء ذخیره می‌شود.
+ تابع `find` هم مسئول جستجوی کلمه وارد شده در جدول است.
# نکات
+ کلمات می‌توانند در تمام حالات **افقی** و **عمودی** (**بالا به پایین**، **پایین به بالا**، **راست به چپ** و **چپ به راست**) مخفی شده باشند و شما باید تمام حالت‌ها را در نظر بگیرید.
# نحوه‌ی ارسال پاسخ
پس از اعمال تغییرات در `script.js`، فایل‌های پروژه را به صورت یک فایل *ZIP* با ساختار زیر ارسال نمایید.
```
[your-zip-file-name].zip
├── index.html
├── styles.css
└── <mark class="violet">script.js</mark>
```