Gerçek zamanlı çok oyunculu oyun
Okey 101 — Çevrimiçi Masa
Tarayıcıda çalışan, 2–4 kişilik, Türk usulü tam kurallı Okey 101. Davetli oyuncular aynı masada gerçek zamanlı oynar; tek başına oynamak isteyen bilgisayara karşı oynar. Telefonda yatay ve dikey, masaüstünde tam ekran çalışır.
- Durum
- Canlıda
- Araçlar
- Next.js 16 · React 19 · TypeScript · Supabase Realtime · Web Crypto · WebAudio · Playwright
Problem
Tarayıcıda çok oyunculu bir taş oyunu kurmanın iki zor tarafı var: hile (başkasının elini ya da desteyi görmek) ve telefonun cebe girip bağlantının kopması. Hedef, ayrı bir oyun sunucusu işletmeden ikisini de çözmekti.
Rolüm
Tek geliştirici: kural motoru, bot, çok oyunculu altyapı, şifreleme, arayüz, ses ve testler.
Yaklaşım
- 01
Kurucu yetkili mimari
Oyun kuralları saf bir reducer. Oyunu kuran oyuncunun tarayıcısı durumu yürütür, Supabase Realtime yalnızca mesajları taşır. Ayrı bir oyun sunucusu yok; kural motoru sunucusuz, doğrudan test edilebilir.
- 02
Uçtan uca şifreli eller
Her oyuncu bir ECDH P-256 anahtar çifti üretir; kurucu her oyuncunun elini ortak anahtarla AES-GCM ile ayrı şifreler. Herkese giden yayında deste, başkalarının eli ve yığınların alt taşları hiç bulunmaz.
- 03
Herkese açık, hilesiz
Oynamak için giriş gerekmez; oda kodunu bilen masaya katılır. Kanal herkese açık olsa da eller şifreli olduğu için kimse başkasının taşlarını ya da desteyi göremez; kurallar ve sıra yalnız kurucunun tarayıcısında uygulanır.
- 04
Kopmaya dayanıklılık
Oturum cihazda saklanır, bağlantı artan aralıklarla yeniden kurulur. Misafirin hamlesi bir kimlikle gönderilir ve kurucu onaylayana kadar tekrarlanır; kopan oyuncunun yerine 25 saniye sonra bot oynar.
- 05
Bot, ipucu ve his
En iyi seri/per dizilişini bulan önbellekli bir arama, botu ve ipucu butonunu besler. Taş sesleri WebAudio ile fiziksel olarak sentezlenir; taşlar kavisli uçar, iPhone’da dokunsal geri bildirim vardır.
Zorlu an
Yenilenen sayfada boş ıstaka
Misafir sayfayı yenileyince bazen ıstakası boş kalıyordu. Kayıtlar iki sebep gösterdi: eski bağlantının varlık kaydı bir süre yaşıyor ve kurucu eli eski anahtarla şifreliyordu; ayrıca aynı durumun eski ve yeni anahtarlı iki kopyası karışık sırayla işleniyordu. En yeni varlık kaydını seçmek ve gelen durumları sırayla işlemek sorunu tamamen çözdü.
Kalite
360’tan fazla birim testi (Vitest) ve gerçek Supabase’e karşı iki tarayıcıyla oynanan uçtan uca test (Playwright): erişim kapısı, RLS, şifreli eller, yeniden bağlanma. Uçtan uca test her gece GitHub Actions’ta çalışır.