**مهارت‌های لازم**:
+ آشنایی با `ReactJS`
+ کدخوانی
--------------------------------------------------
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/3BuUXtya3j/guess-word.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
guess-word-master
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── components
│ │ ├── Congrats.js
│ │ └── GuessedWords.js
│ ├── containers
│ │ ├── App.js
│ │ └── Input.js
│ ├── index.css
│ └── index.js
├── README.md
├── package.json
└── yarn.lock
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `guess-word` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید.
# جزئیات
همان‌طور که مشاهده می‌کنید در این پروژه چهار `Component` موجود است. ابتدا آنها را مطالعه کنید تا با نحوه‌ی کارکرد پروژه آشنا شوید. شما باید چهار فایل زیر را طبق توضیحات تکمیل کنید.
- کامپوننت `App.js`: در این کامپوننت سه تابع ناقص وجود دارد. طبق توضیحات آنها را پیاده‌سازی کنید.
- تابع `getLetterMatchCount(guessedWord, secretWord)`: این تابع وظیفه این را دارد که با قرار دادن `guessedWord` به عنوان کلمه مبنا، تعداد حروف مشترک بین دو کلمه را بازگرداند.
- تابع `setSecretWord(secretWord)`: این تابع یک کلمه را به عنوان آرگومان دریافت می کند و آن را در `state` ذخیره می‌کند.
- تابع `guessWord(guessedWord)`: این تابع چک می‌کند که آیا کلمه حدس زده شده همان کلمه مخفی می‌باشد یا خیر. در صورتی که کلمه مخفی باشد متغیر `this.state.success` به `true` تغییر می‌کند. در صورتی که کلمه حدس زده شده کلمه مخفی نباشد آن را در لیست `guessedWords` اضافه می‌کند. هر عضو این لیست ساختار زیر را دارد:
```js
{
guessedWord : string,
letterMatchCount : integer
}
```
`letterMatchCount` همان تعداد حروف مشترک بین دو کلمه می‌باشد.
- کامپوننت`Input.js`: در این کامپوننت یک تابع ناقص برای پیاده‌سازی وجود دارد.
- تابع `onSubmitGuessedWord(e)`: این تابع کلمه وارد شده در فرم را به لیست `this.state.guessedWords` اضافه می‌کند.طول کلمه اضافه شده حتما باید غیر صفر باشد.
- کامپوننت `Congrats`: این کامپوننت در صورتی که کلمه درست حدس زده شده باشد پیغام `Congratulations! You guessed the word!` را نمایش می دهد.
- کامپوننت `GuessedWords` : این تابع لیست کلمات حدس زده شده را نمایش می‌دهد.در صورتی که هیچ کلمه حدس زده شده‌ای وجود نداشته باشد، این تابع پیغام `Try to guess the secret word!` را نمایش می‌دهد. در غیر این صورت این تابع کلمات را در یک جدول رندر می‌کند.
# نکات
- طبیعتا پس از حدس درست کلمه مخفی کلمه دیگری قابل حدس نمی باشد.
- تگی که پیغام `Congratulations! You guessed the word!` را نمایش می‌دهد حتما می‌بایست دارای `id={"congrats-alert"}` و تگی که پیغام `Try to guess the secret word!` را نمایش می‌دهد می بایست دارای `id={"guess-instruction"}` باشد.
- همچنین کلمات حدس زده شده باید در تگ با `id={"guessed-word"}` رندر شوند.
- شما تنها مجاز به اعمال تغییر در فایل‌های `containers/*`، `components/*` هستید.
پس از اعمال تغییرات، پروژه را *zip* کرده و ارسال کنید.
- دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد.
- تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آنها می‌توانید کد خود را تست کنید.