Web Studio & SaaS · 7–8-sinf · 5-hafta

FUT Card Studio: File API, Dinamik Formalar va Jonli Reyting

O'yin dasturlashdan real veb-mahsulotlar va SaaS vositalari yaratishga o'tamiz: EA Sports FC uslubidagi interaktiv o'yinchi kartochkalari generatori, serverga yubormasdan FileReader API orqali fotosurat yuklash va pozitsiyaga asoslangan OVR reyting algoritmi!

⚽ EA FC / FUT Uslubi 📸 FileReader API 📊 OVR Reyting Matematikasi ⏱️ 40 Daqiqalik Aniq G'alaba
Muhandislik Bosqichi

O'yinchilikdan Ijodiy Dasturlar (SaaS Tools) Muhandisligiga!

🎮 Oddiy Foydalanuvchi (Consumer):
  • Faqat tayyor kartochkalarni ochadi va do'stlariga maqtana oladi.
  • Tizim orqasida qanday ma'lumotlar oqimi yotganini tushunmaydi.
  • O'ziga xos shaxsiy profil yoki yangi kartochka yarata olmaydi.
🛠️ Veb-Asbob Yaratuvchisi (Tool Engineer):
  • Figma, Canva yoki EA FC kabi boshqaruv studiyasini noldan kodlaydi.
  • Foydalanuvchi ma'lumotlarini jonli qabul qiladi va real-vaqtda kartochkaga chizadi.
  • Matematik algoritmlar bilan o'yinchi kuchini mustaqil baholaydi.

💡 Bugungi dars yakunida har biringiz o'z fotosuratingiz qo'yilgan, shaxsiy statlaringiz kiritilgan va OVR reytingi hisoblangan ishlaydigan FUT kartochkasi studiyasiga ega bo'lasiz!

Interfeys Arxitekturasi

SaaS Tizimlarining Oltin Qoidasi: Split-View Pattern

Chap Ustun

🎛️ Boshqaruv Konsoli (Control Panel)

Barcha kiritish maydonlari (HTML5 inputs) jamlangan hudud: Ism, pozitsiya, bayroq, fayl yuklash va 6 ta stat slayderi.

<div class="panel"> <input type="text" id="inpName"> <input type="file" id="fileInput"> <input type="range" id="rngPac"> </div>
O'ng Ustun

✨ Jonli Kartochka (Live Card Preview)

Haqiqiy FUT kartochka dizayni: Oltin jilo, o'yinchi fotosurati, OVR reytingi va 6 ta stat badge'lari.

// Bir tomon o'zgarsa, ikkinchi tomon oniy yangilanadi inpName.addEventListener('input', () => { cardName.textContent = inpName.value.toUpperCase(); });
Dinamik Formalar

HTML5 Elementlari: Text, Select va Range Slayderlar

1. Matn va Emojilar

O'yinchi ismi va davlat bayrog'i (Emoji). Maxlength orqali kartochka kengligidan chiqib ketmaslik ta'minlanadi.

<input type="text" id="inpName" maxlength="16">

2. Tanlov (Dropdown)

Pozitsiyani belgilash: ST, LW, RW, CAM, CM, CB, GK. Tanlov OVR hisoblash formulasini o'zgartiradi!

<select id="inpPos"> <option value="ST">ST</option> <option value="CB">CB</option> </select>

3. Range Slayderlar

Sichqoncha bilan 40 dan 99 gacha surish imkoniyati. Har bir siljish oniy hodisa (input event) qo'zg'atadi.

<input type="range" min="40" max="99" id="rngPac">
FileReader Texnologiyasi

Serverga Yubormasdan Brauzerda Rasm O'qish Siri

❌ Eski va og'ir yo'l (Serverga yuklash):
  • Faylni internet orqali serverga yuborish (HTTP POST).
  • Serverda saqlab, yangi URL manzilini kutish.
  • Internet sekin bo'lsa yoki server o'chsa dastur ishlamaydi.
⚡ Zamonaviy FileReader API (0 ms, Mahalliy):
  • Brauzer to'g'ridan-to'g'ri foydalanuvchi kompyuteridan rasmni xotiraga o'qiydi.
  • Rasmni Base64 Data URL formatiga aylantirib, <img> manziliga qo'yadi.
  • Internet shart emas — 100% oflayn va chaqmoqdek tez ishlaydi!
Kod Tahlili

FileReader JavaScript Mexanizmi

const fileInput = document.getElementById('fileInput'); const cardPhoto = document.getElementById('cardPhotoImg'); fileInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; // 1. Yangi FileReader obyektini yaratamiz const reader = new FileReader(); // 2. O'qish tugagach nima qilishni aytamiz reader.onload = (event) => { cardPhoto.src = event.target.result; // Data URL! }; // 3. Faylni Data URL ko'rinishida o'qishni boshlaymiz reader.readAsDataURL(file); });

Algoritmning 3 ta Qadami:

  • 1. Obyekt yaratish: new FileReader() brauzer xotirasida yangi o'qish oqimini ochadi.
  • 2. Hodisa eshituvchi: onload xuddi eshik qo'ng'irog'i kabi fayl to'liq o'qib bo'lingan soniyada chaqiriladi.
  • 3. Data URL kodi: Rasm data:image/png;base64,... matnli kodga aylanib to'g'ridan-to'g'ri src ga birikadi.
O'yinchi Statlari

Jahon Futbolidagi 6 Asosiy Ko'rsatkich

Abbreviatura Nomlanishi (Inglizcha / O'zbekcha) Kim uchun eng muhim? Diapazon
PAC Pace — Yugurish tezligi va chaqqonlik Qanot hujumchilari (LW, RW) 40 – 99
SHO Shooting — Zarba kuchi va aniqligi Markaziy hujumchilar (ST, CF) 40 – 99
PAS Passing — Qisqa va uzun paslar, ko'rish Pley-meykerlar (CAM, CM) 40 – 99
DRI Dribbling — To'p nazorati va dribling Hujumkor o'yinchilar (LW, RW, CAM) 40 – 99
DEF Defense — Himoyalanish, to'pni tortib olish Markaziy himoyachilar (CB, CDM) 40 – 99
PHY Physical — Jismoniy kuch, chidamlilik Himoyachilar va baquvvat o'yinchilar 40 – 99
Reyting Matematikasi

Vaznli O'rtacha: OVR Reytingini Hisoblash Formulasi

🎯 ST (Hujumchi) Formulasi

Hujumchi uchun zarba (SHO) va tezlik (PAC) 57% vaznga ega, himoya esa deyarli ta'sir qilmaydi!

OVR = round( PAC * 0.22 + SHO * 0.35 + PAS * 0.10 + DRI * 0.20 + DEF * 0.03 + PHY * 0.10 );

🛡️ CB (Himoyachi) Formulasi

Himoyachi uchun DEF (45%) va PHY (25%) hal qiluvchi kuch — zarbasi past bo'lsa ham OVR 90+ bo'la oladi!

OVR = round( PAC * 0.15 + SHO * 0.02 + PAS * 0.08 + DRI * 0.05 + DEF * 0.45 + PHY * 0.25 );

📐 Matematik qoida: barcha koeffitsiyentlar yig'indisi har doim roppa-rosa 1.00 (100%) bo'lishi shart!

Vizual Estetika

Oltin Gradient, Soya va Shimmer Teksturasi

1. Oltin Gradient

Kartochka foni qorong'i oltin ranglardan tashkil topgan ko'p qatlamli burchakli gradient bilan boyitiladi.

background: linear-gradient( 145deg, #1C1504 0%, #3B2A06 35%, #181203 100% );

2. Drop Shadow

O'yinchi fotosurati tagiga chuqur soya berilib, rasm kartochka ichidan bo'rtib chiqib turganday ko'rinadi.

filter: drop-shadow( 0 8px 16px rgba(0,0,0,0.7) );

3. OVR Tipografikasi

Manrope 900 qalin shrifti, -1px harflar orasi va oltin matn nuri yordamida haybatli ko'rinish.

font-family: "Manrope"; font-size: 42px; font-weight: 900; color: #FFE58F;
Amaliy Topshiriq

12 Daqiqalik Missiya: O'zingizning Shaxsiy FUT Kartangizni Yaratish!

🎯 Majburiy Vazifalar Ro'yxati:

  • 1. Shaxsiy foto yuklash: O'z rasmingizni yoki do'stingiz fotosuratini tanlang va FileReader orqali kartaga joylang.
  • 2. Profil ma'lumotlari: O'z familiyangiz, sevimli pozitsiyangiz (masalan ST yoki CB), davlat bayrog'i va jamoangiz nomini kiriting.
  • 3. Statlarni sozlash: 6 ta slayderni o'zingizga moslab suring va OVR reytingi qanday o'zgarishini kuzating.
  • 4. Ishchi varaqani to'ldirish: Yakuniy OVR formulangiz hisobini A4 varaqasiga yozib, o'qituvchiga ko'rsating.

⚡ Boshlash Manzili:

Brauzerda tayyor studiya shablonini oching:

studio/index.html

💡 Eslatma: Chorshanba kungi qo'shaloq darsda ushbu kartochkaga 3D Hologram Tilt va PNG yuklab olish tugmasini ulaymiz!

Amaliy Sprint

Sprint: 12 Daqiqa Mustaqil Yaratish Vaqti

12:00

⏱️ Savollar bo'lsa qo'lingizni ko'taring. Rasmingiz formati PNG yoki JPG bo'lishini tekshiring!

Baholash Mezoni

Dars Xulosasi va 10 Ballik Baholash Mezoni

📊 10 Ballik Mezon:

  • [4 ball] File API orqali shaxsiy foto muvaffaqiyatli yuklangan.
  • [3 ball] 6 ta stat slayderi va jonli OVR reyting kalkulyatori ishlaydi.
  • [2 ball] O'yinchi ismi, pozitsiyasi va bayrog'i to'g'ri sozlangan.
  • [1 ball] A4 ishchi varaqasi to'liq to'ldirib topshirilgan.

🚀 Chorshanba kungi 22-dars Anonsi:

Keyingi qo'shaloq darsimizda (Chorshanba, 80 daqiqa):
• Kartochkani sichqoncha bilan 3D burish (CSS Perspective & Mouse Tilt)
• Ko'z qamashtiruvchi Neon Hologram Glare nuri
• Kartochkani toza PNG formatida yuklab olish tugmasi!