WAG
World Airsoft Games
Site İçi Görüntüler
Müşteri & Bağlam
WAG — World Airsoft Games, Orta Doğu'nun en büyük airsoft turnuva organizasyonunu dijitale taşımak için kurgulanmış bir platform konsepti. Turnuva yönetimi, takım sıralamaları, harita keşfi, maç sonuçları ve medya arşivini tek çatı altında toplayan bir esport platformu.
Hedef kitlenin iki farklı yarışma modu var: titiz, taktik odaklı 'Tactical Championship' ve refleks-hız gerektiren 'Speedsoft League'. Platform bu iki dünyanın farklı enerjisini aynı arayüzde — ama birbirinden net biçimde ayrı — yansıtmak zorundaydı.
İki Mod, Tek Platform
Tasarımın en çok düşündürdüğü kısım buydu. Tactical ve Speedsoft oyuncularının beklentileri, estetiği, hızı — hepsi farklı. Ancak ayrı site yapmak marka bütünlüğünü bozardı.
Çözüm: aynı sayfa, geçişli arka plan. Toggle ile mod seçilince arka plan 1s CSS opacity ile değişiyor, başlık dönüşüyor, aksan rengi kayıyor. Aynı grid, farklı kimlik.
Tasarım Sistemi
WAG'ın görsel dili military-esport kesişiminde duruyor. Counter-Strike'ın HUD estetiğini gerçek askeri temalarla harmanlayan bir tasarım dili. Köşeli formlar, taktik köşe aksan çizgileri, siyah zemin.
Tipografi: Rajdhani — büyük harf, eğik, sıkı. Gövde: Inter. Hiyerarşi renk değil font ağırlığıyla kuruldu.
Platform Özellikleri
Canlı Maç Ticker
Hero altında durmaksızın kayan canlı skor şeridi. CSS marquee ile sonsuz döngü — sayfaya girdiğin andan turnuvanın nabzını hissediyorsun.
Hero Mod Geçişi
İki modu tek sayfada yönetme. useState + CSS opacity transition — arka plan, başlık, renk, CTA butonu hepsi 1s'de dönüşüyor.
Global Sıralama Tablosu
Puan, W/L, K/D bazlı canlı sıralama tablosu. Trend okları ile anlık momentum görünümü. Tactical / Speedsoft ayrı sekmeler.
Turnuva Braketi
Eleme turnuvasını görselleştiren interaktif braketi. Kazanan otomatik ilerliyor, büyük ekranda yatay — mobilde dikey liste.
Neden Next.js?
Procars'ta Vanilla JS yeterliydi — statik tanıtım sitesiydi. WAG farklı: 6 bağımsız sayfa, dinamik state, filtre, ileride gerçek API. Bu ölçek React + routing gerektiriyor.
Next.js App Router ile her bölümün kendi route'u ve layout'u var. TypeScript ile tip güvenli veri yapıları. Tailwind CSS 4 ile bileşen içi stiller — geliştirme hızı katlandı.
Teknik Zorluklar
Dual-Mode Hero Geçişi
⚡ Sorun
Tactical ve Speedsoft modları arasında geçişte hem hero görseli hem de renk sistemi (sarı/kırmızı) değişmeli — ancak layout shift olmadan. useState ile iki farklı hero render etmek CLS skorunu bozuyordu.
✓ Çözüm
Her iki hero aynı anda DOM'da tutuluyor, CSS opacity ve transition ile biri görünür diğeri gizli. Mod değişince JS sadece class toggle yapıyor — hiçbir element yeniden render edilmiyor.
Tailwind CSS 4 Breaking Changes
⚡ Sorun
Proje Tailwind CSS 4 (alpha) üzerine kuruldu. v3'ten çok farklı bir konfigürasyon yapısı — @theme direktifi, CSS-first config, JIT farklılıkları. Topluluk dökümanı yetersizdi.
✓ Çözüm
Tailwind 4'ün kaynak kodunu ve changelog'larını inceleyerek @theme direktifini öğrendim. v3 eşdeğerlerini bulup tek tek geçiş yaptım. Bu süreç projeyi v4'ün early adopter örneği haline getirdi.
Tournament Bracket Responsive Layout
⚡ Sorun
Turnuva braketi yapısı genişliğe göre değişen bağlantı çizgileri gerektiriyordu. CSS grid ve flexbox yaklaşımları mobilde bozuldu; SVG çizgiler ise veri değiştiğinde pozisyon hesabı gerektiriyordu.
✓ Çözüm
Braket, her tur için ayrı sütun mantığıyla CSS grid üzerine kuruldu. Bağlantı çizgileri pseudo-element ile yapıldı — hiçbir pozisyon hesabı yok, tamamen CSS kontrolünde, responsive.