در این سوال از شما میخواهیم، آدرس ```url``` یک تصویر را از کاربر، در ``input`` موجود برروی صفحه دریافت کنید و با لمس دکمهی ```Crop Image```، تصویر موردنظر را دریافت و ``crop`` کنید. همچنین با لمس دکمهی ``Get base64``، عکسی که در مرحله قبل ``crop`` شده، با فرمت ``base64`` در صفحهای دیگر نشان دادهمیشود.
[فایل اولیه را از اینجا دانلود کنید](https://blog.quera.ir/wp-content/uploads/2018/10/imageEdit-contestant.zip)
![](https://blog.quera.ir/wp-content/uploads/2018/10/ss.png)
## لیست وظایف
+ پیادهسازی رابط کاربری مطابق با عکسهای بالا
+ دریافت عکس از آدرس وارد شده
+ ``crop`` کردن عکس
+ نمایش عکس ``crop`` شده در فرمت ``Base64``
برای ``crop`` کردن عکسها، **حتما** مقادیر ``cropData`` را **دقیقا** برابر با مقادیر زیر قرار دهید:
```
cropData = {
offset: { x: 0, y: 0 },
size: { width: 100, height: 100 },
resizeMode: 'contain'
};
```
## راهنمایی:
درصورتی که برای ``crop`` کردن عکس به راهنمایی نیاز دارید، به [ این صفحه ](https://facebook.github.io/react-native/docs/imageeditor) رجوع کنید.
## نکات حیاتی:
+ برای جلوگیری از بروز خطای حجم فایل ارسالی، فقط پوشه `src` و محتویات آن را در فایل `zip` ارسالی قرار دهید. (خود پوشه `src` را**حتما** ارسال کنید)
+ تایپ کردن دقیق متنهای خواسته شده و مطابقت کامل آنها با شکلهای داده شده در صورت سوال از اهمیت بالایی برخوردار است. بنابراین توصیه میکنیم به جای تایپ کردن این رشتهها بصورت دستی، از آدرسدهی به مواردی که در فایل `strings.json` وجود دارند استفاده کنید.
+ برای تکمیل خواستههای پروژه، `component` تعریف شده در فایل ```Root.js`` موجود در پوشه `src` را بعنوان `component` ریشهای درنظر بگیرید و تغییری در فایل `index.js` موجود در ریشه پروژه اولیه ایجاد نکنید.
+ ارسالهای شما توسط داور آنلاین امتیازدهی میشود و برای انجام کارهایی که در صورت سوال گفته نشده، **(مثلا اضافه کردن `style`)**امتیاز اضافهای درنظر گرفته نمیشود.
+ برای پیادهسازی خواستههای سوال، مجاز به استفاده از کتابخانه نیستید.
ساختار بخشی از فایل پایه بصورت زیر است. میتوانید فایلها و فولدرهای موردنیاز خود را به پوشه `src` اضافه کنید. همچنین مجازید **فقط** به فایلهایی که با علامت (---->) مشخص شدهاند کدهای خودتان را اضافه کنید (اما مجاز به تغییر یا حذف کدهای موجود در این فایلها نیستید). درنهایت پوشه `src` را همراه با محتویات آن، در قالب یک فایل فشرده ارسال کنید.
```
zipFile
│ .babelrc
│ .buckconfig
│ .DS_Store
│ .flowconfig
│ .gitattributes
│ .gitignore
│ .watchmanconfig
│ app.json
│ index.js
│ package.json
│ strings.json
│ yarn.lock
│
├───android
├───ios
├───src
│ Root.js <-------
│
└───__tests__
App.js
```
در این سوال قرار است یک دکمهی شناور همانند تصویر اول از سمت چپ پیادهسازی کنید.
[فایل پایه را از اینجا دریافت کنید](https://blog.quera.ir/wp-content/uploads/2018/10/buttons-contestant.zip)
![](https://blog.quera.ir/wp-content/uploads/2018/10/ss-1.png)
با فشردن این دکمه، همانند تصویر وسط، دو دکمهی دیگر باز خواهند شد و با فشردن مجدد این دکمه، دو دکمهی گفتهشده، ناپدید خواهندشد. با فشردن هر یک از دکمههای یک یا دو، (همانند تصویر سمت راست) متنی مناسب بر روی صفحه، نمایش داده خواهد شد.متنهای متناظر با هر دکمه و متنهایی که باید با فشردن هر دکمه نمایش دادهشوند، در فایل ```strings.json```، قرار دادهشدهاند.
## نکات حیاتی:
+ برای جلوگیری از بروز خطای حجم فایل ارسالی، فقط پوشه `src` و محتویات آن را در فایل `zip` ارسالی قرار دهید. (خود پوشه `src` را **حتما** ارسال کنید)
+ تایپ کردن دقیق متنهای خواسته شده و مطابقت کامل آنها با شکلهای داده شده در صورت سوال از اهمیت بالایی برخوردار است. بنابراین توصیه میکنیم به جای تایپ کردن این رشتهها بصورت دستی، از آدرسدهی به مواردی که در فایل`strings.json` وجود دارند استفاده کنید.
+ برای تکمیل خواستههای پروژه، `component` تعریف شده در فایل ```Root.js```موجود در پوشه `src` را بعنوان `component` ریشهای درنظر بگیرید و تغییری در فایل ```index.js``` یا ```App.js```موجود در ریشه پروژه اولیه ایجاد نکنید.
+ ارسالهای شما توسط داور آنلاین امتیازدهی میشود و برای انجام کارهایی که در صورت سوال گفته نشده، **(مثلا اضافه کردن `style`)** امتیاز اضافهای درنظر گرفته نمیشود.
+ برای پیادهسازی خواستههای سوال، مجاز به استفاده از کتابخانه نیستید.
ساختار بخشی از فایل پایه بصورت زیر است. میتوانید فایلها و فولدرهای موردنیاز خود را به پوشه `src` اضافه کنید. همچنین مجازید **فقط** به فایلهایی که با علامت (---->) مشخص شدهاند کدهای خودتان را اضافه کنید (اما مجاز به تغییر یا حذف کدهای موجود در این فایلها نیستید). درنهایت پوشه `src` را همراه با محتویات آن، در قالب یک فایل فشرده ارسال کنید.
```
zipFile
│ .babelrc
│ .buckconfig
│ .DS_Store
│ .flowconfig
│ .gitattributes
│ .gitignore
│ .watchmanconfig
│ app.json
│ index.js
│ package.json
│ strings.json
│ yarn.lock
│
├───android
│
├───src
│ Root.js <-------
│
└───__tests__
App.js
```
در این سوال قرار است یک بازی ساده تقویت حافظه پیادهسازی کنید. این بازی به صورت تکنفره است. در این بازی یک جدول ۴ در ۴ وجود دارد. بر روی خانههای این جدول اعداد ۰ تا ۱۵ به صورت مبنای ۱۶ (0, 1, 2, …, d, e, f) وجود دارد (مطابق شکل سمت راست). در اول بازی اعداد خانهها دیده نمیشوند و فقط ۱۶ تا خانهی رنگی مشخص است (مطابق شکل سمت چپ).
[فایل اولیه را از اینجا دانلود کنید](http://uplod.ir/a59ml9218cto/memo_initial_new.zip.htm)
![توضیح تصویر](https://blog.quera.ir/wp-content/uploads/2018/10/ss1.jpg)
![آرایه تستی](https://blog.quera.ir/wp-content/uploads/2018/10/ezgif.com-resize-1.gif)
در ابتدا برنامه یک آرایه به طول n از اعداد از ۱ تا ۱۶ را از فایل ``constants.json`` میخواند. با زدن دکمهی ``start`` بازی شروع میشود. در هر مرحله، بازی به صورت زیر انجام میشود:
آرایهی فرضی: [3, 6, 11, 1, 8]
مرحلهی اول:
اولین عدد از آرایه سه است. پس عدد خانهی سوم از جدول (یعنی عدد دو) باید دیده شود. این عدد برای ۵ ثانیه معلوم است و بعد مجددا ناپدید میشود. سپس کاربر باید خانهی معلوم شده (خانهی سوم) را فشار دهد تا عدد آن معلوم شود و بعد دکمهی submit را بزند. در صورتی که کاربر خانهی اشتباه را بزند، پیغام ``You Lose!`` بر روی صفحه نمایش داده خواهد شد و در غیر این صورت به مرحلهی بعد میرود.
مرحلهی دوم:
دو عدد اول از آرایه، ۳ و ۶ هستند پس به ترتیب خانههای سوم و ششم جدول، یعنی اعداد دو و پنج معلوم خواهند شد. هر کدام برای ۵ ثانیه معلوم است و بعد مجددا عدد روی آن ناپدید خواهد شد. کابر باید به ترتیب خانههای سوم و ششم را کلیک کند و سپس Submit را بزند.
مرحلهی ``n``ام (آخر):
تمامی اعداد آرایه به ترتیب روشن خواهند شد و کابر باید به همان ترتیب اعداد دنباله را بر روی جدول یافته و کلیک کند. سپس با زدن ``Submit`` جواب خود را تایید کند. در صورتی که اعداد و ترتیب آنها درست باشند، پیغام ``You Win!`` نمایش داده خواهد شد و در غیر اینصورت پیغام ``You Lose!`` نشان داده خواهد شد.
## نکات حیاتی:
+ برای جلوگیری از بروز خطای حجم فایل ارسالی، فقط پوشه `src` و محتویات آن را در فایل `zip` ارسالی قرار دهید. (خود پوشه `src` را**حتما** ارسال کنید)
+ تایپ کردن دقیق متنهای خواسته شده و مطابقت کامل آنها با شکلهای داده شده در صورت سوال از اهمیت بالایی برخوردار است. بنابراین توصیه میکنیم به جای تایپ کردن این رشتهها بصورت دستی، از آدرسدهی به مواردی که در فایل `constants.json` وجود دارند استفاده کنید.
+ برای تکمیل خواستههای پروژه، `component` تعریف شده در فایل ```Root.js`` موجود در پوشه `src` را بعنوان `component` ریشهای درنظر بگیرید و تغییری در فایل `index.js` موجود در ریشه پروژه اولیه ایجاد نکنید.
+ ارسالهای شما توسط داور آنلاین امتیازدهی میشود و برای انجام کارهایی که در صورت سوال گفته نشده، **(مثلا اضافه کردن `style`)**امتیاز اضافهای درنظر گرفته نمیشود.
+ برای پیادهسازی خواستههای سوال، مجاز به استفاده از کتابخانه نیستید.
+ زمانی که هر عدد معلوم است، حتما باید ۵ ثانیه باشد.
+
ساختار بخشی از فایل پایه بصورت زیر است. میتوانید فایلها و فولدرهای موردنیاز خود را به پوشه `src` اضافه کنید. همچنین مجازید **فقط** به فایلهایی که با علامت (---->) مشخص شدهاند کدهای خودتان را اضافه کنید (اما مجاز به تغییر یا حذف کدهای موجود در این فایلها نیستید). درنهایت پوشه `src` را همراه با محتویات آن، در قالب یک فایل فشرده ارسال کنید.
```
zipFile
│ .babelrc
│ .buckconfig
│ .DS_Store
│ .flowconfig
│ .gitattributes
│ .gitignore
│ .watchmanconfig
│ app.json
│ index.js
│ package.json
│ strings.json
│ yarn.lock
│
├───android
├───ios
├───src
│ Root.js <-------
│
└───__tests__
App.js
```