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

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

---

پروژه اولیه

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

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 اضافه می‌کند. هر عضو این لیست ساختار زیر را دارد:

{
        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 در فایل ارسالی نباشد.
• تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.