# عنوان
# پروژه اولیه
پروژه اولیه را از [این لینک](/contest/assignments/44747/download_problem_initial_project/150242/) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.
<details class="blue">
<summary>
ساختار فایل‌های پروژه
</summary>
```
fifa22-quera
├── App.js
├── app.json
├── assets
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash.png
├── babel.config.js
├── package.json
├── package-lock.json
└── src
├── Components
│ ├── <mark>Player.jsx</mark>
│ └── <mark>Row.jsx</mark>
└── __tests__
└── App.sample.test.js
```
</details>
<details class="green">
<summary>
راه‌اندازی پروژه
</summary>
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `fifa22-quera` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- سپس بسته به سلیقه برنامه را درون مرورگر یا به وسیله برنامه *Expo* درون تلفن همراه خود اجر نمایید.
</details>
# جزئیات
مهیار و سلیب به تازگی تصمیم گرفته اند که برای افزایش در آمدشان *React Native* را برای توسعه برنامه‌های موبایلی فرا بگیرند. اما از آنجا که این دو تجربه چندانی با این کتابخانه ندارند بعضی از مسائل آن برای آن‌ها عجبیب است من جمله شیوه استایل دهی و عدم امکان استفاده از *CSS*.
آن ها میخواهند برنامه‌ای را توسعه دهند که نتایج بازی‌های *FIFA 22* که درون کوئرا برگزار می‌شود را نمایش دهد. همواره دو فردی که باید با یکدیگر مسابقه دهند یا پرسپولیسی هستند یا استقلالی.
## کامپوننت `<Player />`
برای نمایش اطلاعات هر فرد نیاز است که یک کامپوننت تحت عنوان `<Player />` طراحی و استایل دهی شود که موارد زیر را نمایش دهد:
+ نام فرد مسابقه دهنده در قالب رشته که بوسیله پراپسی تحت عنوان `name` دریافت می‌شود.
+ تعداد گلهای زده شده که در قالب عدد صحیح بوسیله پراپسی تحت عنوان `goal` دریافت می‌شود.
+ پرسپولیسی/استقلالی بودن که با رنگ `red` یا `blue` نمایش داده خواهد شد و در قالب یک پراپس با مقدار بولین تحت عنوان `isRed` پاس داده خواهد شد در صورتی که این مقدار برابر `true` بود به این معنا است که فرد مسابقه دهنده پرسپولیسی است و در صورتی که `false` بود و یا مقدار آن تنظیم نشده بود به این معنا است که فرد مسابقه دهنده استقلالی است.
همچنین این کامپوننت باید عرضی معادل `350px` داشته باشد و نباید بیشتر از `40%` از عرض صفحه را در حالت حداکثر اشغال نماید و باید ارتفاعی معادل `600px` و حداکثر `70%` ارتفاع صفحه را داشته باشد. همچنین باید حاشیه‌ای به عرض `5px` و رنگ `#eebc1d` و انحنای `20px` ای داشته باشد. موارد مذکور موارد باید درون کلاسی تحت عنوان `player` نوشته شوند. همچنین باید به اندازه یک واحد *Grid* را اشغال کند.
همچنین دو کلاس با نام‌های `red` و `blue` که به ترتیب رنگ پس زمینه قرمز و آبی با کد `#cc0000` و `#0000cc` هستند را اعمال نمایند.
هر دو تگی که برای نمایش اسم و گل استفاده میشوند باید کلاسی تحت عنوان `text` که رنگ `white` را به همراه فاصله از المان بالایی به اندازه `50px` و وسط چین نمودن متن اعمال نماید،. و همچنین برای تگ مربوطه به نمایش گل کلاس دیکری با نام `goal` که اندازه .متن آن برابر `50px` و به صورت *italic* و __ـBold__ باشد.
## کامپوننت `<Row />`
همچنین کامپوننت دیگری نیاز است که وظیفه آن قرار دادن المان‌های فرزندش به صورت افقی و با فاصله بین همدیگر با استفاده از مفاهیم *Flex* می‌باشد و همچنین باید المانهایش را در وسط خود با استفاده از `alignItems` قرار دهد. همچنین باید حداقل نصف ارتفاع صفحه و `80%` عرض صفحه را اشغال کند و به اندازه `50px` نسبت به المان بالایی فاصله داشته باشد و در نهایت باید خود را با `alignSelf` در وسط صفحه قرار دهد. نام استایل این کلاس باید `row` باشد.
از آنجایی که مهیار و سلیب در این امر تازه کار هستند و تصمیم گرفته اند خود نیز در این رقابلت جذاب شرکت کنند از شما درخواست کمک کرده اند تا این بخش برنامه را تکمیل نمایید.
# نکات
- شما تنها مجاز به اعمال تغییرات درون فایل‌های فولدر `src/Components` هستید.
- پس از تمکیل پوشه `src` را زیپ و ارسال کرده