OPCENTER
Gerçek Zamanlı Taktik Harita Uygulaması
Site İçi Görüntüler
Proje & Bağlam
OPCENTER, airsoft oyunları için geliştirilmiş gerçek zamanlı taktik harita ve oyun yönetim uygulaması. Firebase Firestore üzerinden anlık konum senkronizasyonu ve Leaflet.js ile interaktif harita sunan React + TypeScript projesi.
Dört ana görünüm: menu → lobby-browser → lobby-room → map. Oyuncular lobby oluşturur veya katılır, moderatör oyunu yönetir.
Uygulama Mimarisi
React custom hook mimarisi: useGeoLocation hook GPS koordinatlarını alıp Firebase Firestore'a yazıyor, diğer oyuncular anlık okuyor. Leaflet.js marker'lar gerçek zamanlı güncelleniyor.
useAuth kimlik + profil + takımID. MissionService + GameLoopService oyun döngüsü ve görevler. TypeScript strict mode ile tip güvenli veri yapıları.
Platform Özellikleri
Gerçek Zamanlı Taktik Harita
Firebase + Leaflet.js gerçek zamanlı konum senkronizasyonu. Her oyuncu farklı renk marker, useGeoLocation sürekli GPS takibi.
Lobby Sistemi
lobby-browser → filtreler + oda listesi. lobby-room → takım üyeleri, oyun ayarları, başlatma. Firebase gerçek zamanlı senkronizasyon.
Moderator Panel
Moderatör oyunu başlatır/durdurur, konumları izler, görev atar, takım yönetimi. Team control modülü ile anlık üye yönetimi.
Mission Sistemi
MissionService + GameLoopService ile görev tanımı ve atama. Tamamlanınca oyun durumu güncelleniyor. Takım bazlı hedef ve görev zinciri desteği.
Neden Bu Stack?
Firebase Firestore gerçek zamanlı çok oyunculu için ideal — WebSocket altyapısı gerekmeden anlık senkronizasyon. React + TypeScript ile karmaşık state tip güvenli.
Leaflet.js açık kaynak ve esnek harita katmanı — marker, taktik katman, özel ikonlar. Vite ile HMR destekli ultra hızlı geliştirme ortamı.
Neden Firebase + Leaflet?
Gerçek zamanlı konum takibi için WebSocket kurulumu ve sunucu yönetimi yerine Firebase Firestore tercih edildi — oyun başladığında 8-10 oyuncunun konumu saniyede birden fazla güncelleniyor. Google Maps API kullanmak ücretli ve gizlilik sorunları yaratıyor; Leaflet.js + OpenStreetMap ile sıfır maliyetli, açık kaynaklı harita altyapısı kuruldu.
Teknik Zorluklar
Firebase Rate Limit — Saniyede 1000+ Konum Yazması
⚡ Sorun
10 oyuncu sürekli konum güncellemesi → saniyede 50+ Firebase yazma, kota bitti, maliyet patladı.
✓ Çözüm
2s debounce + 5m hareket eşiği → yazma %80 düştü. Büyük lobiler için Realtime Database'e geçildi.
Leaflet Marker Titremesi — Anlık Konum Atlamaları
⚡ Sorun
Her konum güncellemesinde marker silindi + yeniden oluşturuldu — haritada görünür titreme, FPS düştü.
✓ Çözüm
marker.setLatLng() ile güncelleme, yeniden oluşturma yok. CSS transition ile akıcı hareket. Titreme bitti.
Lobby Senkronizasyonu — Kullanıcı Yarış Koşulları
⚡ Sorun
İki oyuncu aynı anda katılmaya çalışınca onSnapshot gecikmeli tetiklendi — yanlış lobby durumu gösterildi.
✓ Çözüm
Optimistic update ile anlık UI güncelleme, onSnapshot geldiğinde ground truth override. Sıfır gecikme hissi.