Kontrolcü Tasarımı (Controller)

RemoteNex ekosisteminde oyun kontrolcüleri, oyuncuların mobil cihazlarında çalışan web tabanlı (HTML/CSS/JS) arayüzlerdir.

Bu arayüzlerin (Master ve Normal HTML dosyaları) sistemle sağlıklı iletişim kurabilmesi için aşağıda belirtilen kod yapılarını ve mantığını içermesi gerekmektedir.

1. İletişim Köprüsü (Zorunlu)

Web sayfası ile mobil uygulama (veya simülatör) arasındaki iletişimi sağlayan temel fonksiyon send fonksiyonudur. Tüm veri gönderim işlemleri bu fonksiyon üzerinden yapılmalıdır.

Bu fonksiyon, tarayıcının bir React Native WebView içinde çalışıp çalışmadığını kontrol eder ve mesajı ona göre iletir.

function send(msg) {
    // Mobil uygulama (WebView) ile iletişim kuran standart köprü
    // 'window.ReactNativeWebView' nesnesi, uygulamanın (veya simülatörün) kendisidir.
    if (window.ReactNativeWebView) {
        window.ReactNativeWebView.postMessage(msg);
    }
}

---

2. Buton Yapısı (HTML)

Sunucu ve Unity tarafı, hareket verilerini işlerken MOVE:AKSİYON:DURUM formatını bekler. Her buton için ayrı ayrı fonksiyon yazmak yerine, HTML tarafında data-dir (data-direction) özelliği kullanarak butonun ne işe yaradığını belirtiriz.

<div id="btn-up" class="btn top-btn" data-dir="UP">
    <div class="icon">▲</div>
    <span>YUKARI</span>
</div>

---

3. Dokunmatik Olay Yönetimi (JavaScript)

Mobil cihazlarda "tıklama" (onclick) olayları bazen gecikmeli çalışabilir. Bu nedenle oyun kontrolcülerinde touchstart (dokunma başladı) ve touchend (dokunma bitti) olaylarını kullanmak, tepki süresini iyileştirir ve gecikmeyi (latency) düşürür.

Aşağıdaki kod, sayfadaki tüm .btn sınıfına sahip elementleri bulur ve onlara dokunmatik özellik kazandırır.

// Tüm '.btn' sınıfına sahip elementleri seçiyoruz
const buttons = document.querySelectorAll('.btn');

buttons.forEach(btn => {
    // HTML'deki 'data-dir' özelliğinden yön bilgisini (örn: UP, DOWN) alıyoruz
    let dir = btn.getAttribute('data-dir');
    
    // Eğer HTML'de data-dir yazılmamışsa, ID'ye göre manuel atama yapabiliriz (Opsiyonel)
    if(!dir) {
        if(btn.id === 'btn-up') dir = 'UP';
        if(btn.id === 'btn-down') dir = 'DOWN';
    }

    // --- BASMA ANI (PRESS) ---
    // Kullanıcı butona parmağını dokundurduğunda çalışır
    btn.addEventListener('touchstart', (e) => {
        e.preventDefault(); // Sayfanın kaymasını/zoom yapmasını engelle
        
        // Görsel Geri Bildirim (Opsiyonel)
        btn.style.backgroundColor = "#222"; 
        btn.style.color = "#fff";

        // Sunucuya Veri Gönder: MOVE:YÖN:PRESS
        // Örnek Çıktı: "MOVE:UP:PRESS"
        send(`MOVE:${dir}:PRESS`);

    }, {passive: false});

    // --- BIRAKMA ANI (RELEASE) ---
    // Kullanıcı parmağını çektiğinde çalışır
    btn.addEventListener('touchend', (e) => {
        e.preventDefault();
        
        // Görseli eski haline getir
        btn.style.backgroundColor = "transparent";
        btn.style.color = "#555";

        // Sunucuya Veri Gönder: MOVE:YÖN:RELEASE
        // Örnek Çıktı: "MOVE:UP:RELEASE"
        send(`MOVE:${dir}:RELEASE`);

    }, {passive: false});
});

---

Özet Akış

Bir kontrolcü tasarlarken şu adımları izleyin:

1. HTML: Butonlarınızı oluşturun ve data-dir="KOMUT_ADI" etiketini ekleyin.
2. JS (Send): send(msg) fonksiyonunu sayfanıza ekleyin.
3. JS (Events): touchstart ile PRESS, touchend ile RELEASE komutlarını send fonksiyonuna iletin.

Tebrikler! Hem Unity (Host) hem de Web (Controller) tarafını hazırladınız. Artık sisteminiz çalışmaya hazır.