AFU · Console

Bu, tarayıcıda açılan ve bir oyun konsolunun ana ekranı gibi davranan bir portfolyo. Açılış animasyonu bitince seni "Kumandayı kim kullanıyor?" ekranı karşılıyor. Misafir ya da Sahip olarak girersen karşına bir oyun konsolu çıkıyor: gerçek PS5 oyunları, çalışan bir demo mağaza, kupalar, kontrol merkezi, ayarlar ve arama. "İşe alım" kullanıcısını seçersen konsol bir kenara çekiliyor ve seni doğrudan hakkımda, teknolojiler, CV ve GitHub projelerinin olduğu profile götürüyor. Gerçek bir konsoldaki gibi dinlenme modu, kapatma ve yeniden başlatma da var.

Her yeri klavyeyle, fareyle, dokunmatik ekranla ya da oyun kumandasıyla (DualSense, Xbox ve diğerleri) aynı rahatlıkla gezebilirsin. Next.js, React ve TypeScript ile yazdım; arayüz Türkçe ve İngilizce. Projede tek bir ses, logo ya da ikon dosyası bile yok. Sesleri ve müziği tarayıcı Web Audio ile kendisi sentezliyor, oyun görselleri IGDB'den, depo kartları da GitHub'dan geliyor.

Ana ekrandan mağazaya

Ana ekranda iki sekme var: Oyunlar ve Medya. Oyunlar sırasında PlayStation Store, sahip olunan oyunlar (en son alınan başta), Kupalar ve Oyun Kütüphanesi duruyor. Medya sekmesi ise Instagram, GitHub, LinkedIn, e-posta ve web sitesine açılıyor. Bir kutucuğu seçince kutucuk büyüyor, arka plan yumuşakça değişiyor ve oyunun türü, yılı, puanı, kısa tanıtımı ve künyesi beliriyor. Üzerinde birkaç saniye beklersen oyunun fragmanı arka planda sesi kapalı oynamaya başlıyor. Oyunun sayfasına girdiğinde fragman bu kez konsolun içindeki oynatıcıda sesiyle açılıyor; yanında PlayStation Store bağlantısı, aktiviteler, hakkında, etiketler ve galeri var.

Mağazada IGDB'nin en yüksek puanlı ve en çok beklenen PS5 oyunları var. Oyunları ad, tür, etiket ya da stüdyoya göre arayabilir, türe göre filtreleyebilirsin; bir de kendiliğinden dönen bir öne çıkanlar bandı ve yakında çıkacaklar var. IGDB fiyat bilgisi vermiyor, o yüzden fiyatlar temsili: çıkış tarihine göre 29,99, 49,99 ya da 69,99 dolar atanıyor. Senden hiçbir ödeme bilgisi istenmiyor. Satın almayı bir onay penceresiyle tamamlıyorsun ve oyun ana ekranın başına, kütüphaneye ve depolama listesine ekleniyor.

PS tuşuna bastığında kontrol merkezi açılıyor. Son açılan oyunlar, bildirimler, iletişim, müzik, erişilebilirlik, ses ve güç simgelerinin her biri üstünde kendi kartını açıyor. Create tuşu ise bağlantıyı kopyalama, Web Share ile paylaşma ve tam ekran seçeneklerini getiriyor. Gezinirken 10 konsol kupası kazanabilirsin; her biri açılır bir bildirim ve kupa sesiyle geliyor. Ayarlarda dört sistem teması var (Kozmik, Kuzey ışığı, Kor, Gece). Yazı boyutunu değiştirebilir, yüksek kontrastı ve hareketi azaltmayı açabilir, gecikmeyi ölçen internet testini çalıştırabilirsin. Bir de bastığın tuşların canlı olarak yandığı bir kumanda şeması var.

Dört girdi, tek model

Klavye, fare, dokunmatik ve kumandayı lib/input.tsx içinde tek bir modelde topladım. Her ekran ve açılır pencere bir katman kaydediyor; tuşları yalnızca en üstteki katman alıyor. Arama ekranının katmanı yazı da kabul ediyor, bu yüzden orada hem kumandayla ekran klavyesini hem fiziksel klavyeyi kullanabilirsin. Izgarada bir sonraki odağın nereye gideceğine lib/nav.ts karar veriyor.

Kumanda tarafı Gamepad API'nin üzerinde duruyor. Yön tuşları, çubuklar, L1/R1, Options, Create ve PS tuşu okunuyor; destekleyen kumandalarda titreşim de çalışıyor. Bazı Xbox kumandaları gibi PS tuşunu tarayıcıya iletmeyen kumandalar da var. Onlarda, kendi menüsü olmayan ekranlarda kontrol merkezini Options tuşu açıyor. Farede dikey kaydırma seni kartlara indiriyor, yatay kaydırma ya da Shift'e basarak tekerleği çevirmek kutucuklar arasında gezdiriyor. Telefonu dikey tutarsan kaydırma hareketleriyle çalışan ayrı bir yerleşim açılıyor ve kontrol merkezi alt sayfa (bottom sheet) olarak geliyor.

Tek bir birimle ölçek, osilatörle ses

Bütün boyutları, 16:9'a göre ayarlanan tek bir birimle (--u) verdim. Bu yüzden arayüz bir televizyon ekranı gibi ölçekleniyor; "Büyük yazı" ayarı da bu birimi büyütüyor. Telefonlar için ayrı ölçüler tanımlı.

Gezinme, seçim, açılış ve kupa sesleri de, arka plan müziği de tamamen osilatörlerle ve üretilmiş bir yankıyla çalıyor. Oyun temalarında oyunun kimliğinden türetilen bir akor çalıyorum; böylece her oyun her açıldığında aynı tınlıyor. Projede en sevdiğim ayrıntılardan biri bu.

Veri nereden geliyor

Oyunlar ve depolar, betiklerin ürettiği iki dosyada duruyor. İki senkron betiği var: biri IGDB'den sahip olunan oyunları ve mağaza kataloğunu, diğeri GitHub'daki herkese açık depoları (fork ve arşivler hariç) çekip TypeScript dosyası olarak yazıyor. Bu dosyalar tip denetiminden geçiyor ve onlara elle dokunmuyorum. Elle yazdığım tek içerik, CV'yi, medya ve sosyal bağlantıları tutan dosya.

Katalogda olmayan bir oyun ararsan mağaza ve arama ekranı, sunucuda çalışan /api/games?q= rotası üzerinden IGDB'deki PS5 ve PS4 oyunlarına (remake, remaster ve port'lar dahil) bakıyor. IGDB anahtarları tarayıcıya hiç gitmiyor; senkron betiği ile bu rota aynı lib/igdb.ts kodunu paylaşıyor. Ayarların, kazandığın kupalar, son açtığın ve satın aldığın oyunlar localStorage'da tutuluyor. Tarayıcında depolama kapalıysa da uygulama çalışmaya devam ediyor. Oyun verilerinin IGDB'den geldiğini de Ayarlar'daki Sistem bölümünde belirtiyorum.