Seçenek A ya da Ölüm: 32 Kum Havuzunda Büyük Brutalist HUD ve Tam Ekran Standardizasyonu

Gece saat 03:00’te 4. derece Runge-Kutta çekicilerinden kuantum Hadamard rastgele yürüyüşlerine ve Jos Stam Navier-Stokes akışkanlar dinamiğine kadar otuz iki karmaşık etkileşimli kum havuzunu tek tek inşa ederken entropi sizin varsayılan ortağınızdır.

Her kum havuzu kendi acil ihtiyaçlarıyla doğar. Akışkan çözücü beş farklı viskozite ve girdap kaydırıcısına ihtiyaç duyar. 808 Öklid ritim çarkı kanal başına sessize alma ve Bjorklund adım girdileri talep eder. Optik Theremin hassasiyet düğmeleri isterken, Befunge-93 sanal makinesi kartuş seçiciler ve bellek matrisi denetleyicileri gerektirir.

Acımasız bir mimari disiplin işletilmezse, tuval laboratuvarınız adım adım ergonomik anarşiye sürüklenir:

• Üç kum havuzu kontrollerini sağ üst köşedeki cam efektli (glassmorphism) panellere koyar.
• Sekiz kum havuzu kontrolleri tuvalin altındaki ağır gri bir altbilgiye iter ve mobil cihazlarda görselleştirmeyi ekranın tamamen dışına taşır.
• Kum havuzlarının yarısı HUD’ı gizlemek için H tuşunu dinlerken, diğer yarısı klavye girdilerini tamamen yok sayar.
• Bazı kum havuzlarında tam ekrana geçildiğinde tuval en-boy oranları çöker; çünkü 60 FPS requestAnimationFrame döngülerinin tam ortasında getBoundingClientRect() çağrılır.
• Mobil cihazlarda devasa kontrol panelleri ekranın %80’ini kaplayarak asıl fizik simülasyonunu boğar.

Dün kokpitten kesin direktif geldi: “Bazı parçaları standartlaştıralım. HUD tasarımı ve kapatılabilirliği tutarlı olmalı. Tuval alanı ve tam ekran desteği tutarlı olmalı. Projeye uygulamadan önce 32 deneyi gözden geçirin.”

İşte hiçbir fizik çözücüyü bozmadan Seçenek A’yı nasıl formüle ettiğimizin, stres testine tabi tuttuğumuzun ve tüm 32 kum havuzuna nasıl dağıttığımızın hikayesi.

Üç Doktrin: Neden Seçenek A?

Farklı grafik simülasyonlarında kontrolleri standartlaştırırken ön yüz mimarları genellikle üç arketip arasında kalır:

Seçenek B: Saf Dış Tepsi

Tüm HUD kontrollerini tuvalin dışına, alttaki HTML belge alanına kalıcı olarak taşımak.

• Neden başarısız oldu: İmmersiyonu öldürür. Masaüstü monitörlerde hareket eden bir Lenia solitonundan veya göreliliksel N-cisim yörüngesinden 700 piksel aşağıya bakmak zorunda kalmak dokunsal geri bildirim döngüsünü koparır. Ayrıca yerel Tam Ekran modunda simülasyonu tamamen kontrolsüz bırakır.

Seçenek C: Kaybolan Hayalet Katman

Kontroller tuvalin üzerinde sıfır opaklıkla durur, sadece fare kenar tetikleyicisine geldiğinde görünür.

• Neden başarısız oldu: Mobil cihazlarda dokunmatik etkileşim sırasında sürekli görsel titremeye neden olur ve nereye dokunacağını bilmeyen ziyaretçiler için keşfedilebilirliği yok eder.

Seçenek A: Duyarlı Neo-Brutalist Yüzen Kapsül ve Tepsi

• Masaüstü ($\ge$ 768px): HUD tuval sınırları içinde top-4 left-4 konumunda zarifçe yüzer. İmza niteliğindeki brutalist estetiğimizi sergiler: yüksek kontrastlı 2px kalın siyah kenarlıklar, net 4px sert gölgeler (shadow-[4px_4px_0px_0px_#000]) ve arka plan bulanıklığı. Animasyonlu durum göstergesine ve açık bir [ − ] daraltma butonuna sahip kompakt bir başlık sunar.
• Mobil (< 768px): HUD tuvalin altındaki yapılandırılmış bir alt tepsiye dönüşür ve varsayılan olarak kapalı başlar. Ziyaretçi sayfayı açtığı anda tuvalin %100’ünü görür; altında ihtiyaç duyulduğunda açılabilen 36 piksellik düzenli bir başlık yer alır.
• Klavye Navigasyonu: Tab tuşuna basmak her kum havuzunda HUD görünürlüğünü pürüzsüzce açıp kapatır. (Bir kaydırıcı, metin alanı veya giriş öğesi odaklanmışsa, Tab tuşu tarayıcının standart erişilebilir odak geçişine saygı duyar).
• Tam Ekran Uyumu: HUD kapsayıcısı data-sandbox-container ile göreli bağlandığından, SandboxActionBar üzerinden tam ekrana geçildiğinde HUD tam ekran çerçevesinin içinde mükemmel şekilde sabit kalır.

Kullanıcı kararı netti: “Seçenek A harika, öyle yapalım.”

Seçenek A Sözleşmesinin Anatomisi

Binlerce satırlık bir monorepoda standartlaştırma iyi niyetlere veya kopyala-yapıştır umuduna dayanamaz. Makine tarafından doğrulanabilir bir sözleşme gerektirir. Her .astro kum havuzunda Seçenek A şablonunu kanunlaştırdık:

<div 
  class="relative w-full brutal-border-thick bg-[#08090c] select-none flex flex-col md:block" 
  id="sandbox-container" 
  data-sandbox-container="quantum-walk"
>
  <!-- Etkileşimli Tuval Kapsayıcısı -->
  <div class="sandbox-canvas-wrapper relative w-full h-[450px] sm:h-[550px] md:h-[650px] overflow-hidden flex-1">
    <canvas id="sandbox-canvas" class="w-full h-full block cursor-crosshair touch-none"></canvas>
  </div>

  <!-- Brutalist Yüzen HUD Kontrol Paneli (Seçenek A) -->
  <div 
    id="sandbox-hud" 
    class="sandbox-hud w-full border-t-2 border-black bg-white/95 text-black p-3 sm:p-4 font-mono text-xs z-20 md:absolute md:top-4 md:left-4 md:w-auto md:max-w-sm md:max-h-[85%] md:overflow-y-auto no-scrollbar md:border-2 md:shadow-[4px_4px_0px_0px_#000] md:backdrop-blur transition-all"
  >
    <div id="sandbox-hud-header" class="flex items-center justify-between border-b-2 border-black pb-2 mb-3 cursor-pointer select-none">
      <div class="font-black text-sm uppercase flex items-center space-x-1.5 truncate">
        <span class="w-2.5 h-2.5 bg-[#ffe600] inline-block border border-black animate-pulse flex-shrink-0"></span>
        <span class="truncate">QUANTUM WALK HUD</span>
      </div>
      <div class="flex items-center space-x-1.5 flex-shrink-0 ml-2">
        <button 
          type="button" 
          id="btn-toggle-hud" 
          class="brutal-btn px-1.5 py-0.5 text-[10px] font-black bg-[#ffe600] text-black hover:bg-black hover:text-[#ffe600]"
          title="Toggle HUD (Tab)"
          aria-label="Toggle HUD"
        >
          [ − ]
        </button>
      </div>
    </div>

    <!-- Katlanabilir Kontroller Gövdesi -->
    <div id="sandbox-hud-body" class="space-y-3">
      <!-- Kaydırıcılar, ön ayar butonları, matematiksel anahtarlar -->
    </div>
  </div>
</div>

Tailwind’deki duyarlılık hilesine dikkat edin: Dış kapsayıcıda flex flex-col md:block. Mobil ekranlarda flex-col, HUD’ı doğal olarak tuval sarmalayıcısının altına dizer ve parmak dokunuşlarının engellenmesini önler. Masaüstünde (md:), HUD absolute top-4 left-4 konumuna zıplayarak sayfa akışını bozmadan doğrudan tuvalin üzerinde yüzer!

Zamansal Ölü Bölge (TDZ) ve Kapsam Tuzaklarını Yok Etmek

Aynı anda 32 bileşeni standartlaştırmak, dikkatsiz ajanların kod tabanlarını enkaza çevirdiği yerdir. 32 ayrı simülasyon betiğini birleşik bir kontrol mekanizmasıyla yeniden düzenlerken:

function toggleHud(forceState?: boolean) {
  isHudCollapsed = forceState !== undefined ? forceState : !isHudCollapsed;
  if (hudBody) hudBody.classList.toggle('hidden', isHudCollapsed);
  if (btnToggleHud) btnToggleHud.textContent = isHudCollapsed ? '[ ＋ ]' : '[ − ]';
}

Betiğin en üstünde henüz tanımlanmamış bir işleve başvuran bir değişken bildirirseniz veya init() içinde yanlışlıkla dıştaki bir audioCtx ya da isPaused bayrağını gölgelerseniz (shadowing), JavaScript sessiz bir çalışma zamanı hatası fırlatır: ReferenceError: Cannot access 'X' before initialization (Temporal Dead Zone - TDZ).

Astro bileşenleri istemci hidrasyonunda ayağa kalktığı için, 7 numaralı kum havuzundaki bir TDZ hatası statik inşayı düşürmez; sadece o kum havuzunun olay dinleyicilerinin bağlanmasını engelleyerek butonları ölü, tuvalleri donmuş halde bırakır.

Bunu matematiksel olarak imkansız kılmak için test paketimize iki özel statik AST analizcisi yazdık:

1. tests/verify-sandbox-hud-standardization.mjs: 32 kum havuzunu tarar, her bileşenin data-sandbox-container, #btn-toggle-hud, #*-hud-body ve Tab klavye kancasını uyguladığını doğrular.
2. tests/audit-tdz-and-scope.mjs: 32 kum havuzunun <script> bloklarını Acorn/Babel AST ile ayrıştırarak, hiçbir değişkenin bildiriminden önce çalıştırılmadığını doğrulayan topolojik bir kapsam grafiği çıkarır.

Makineyle Doğrulanabilir Değişmezler: 28 Batarya Yeşil

Bu sistematik dönüşümün sonucu mutlak bir tutarlılıktır:

• Kusursuz Kas Hafızası: İster particle-physics kum havuzunda yerçekimini ayarlıyor olun, ister cellular-automata içinde kural dizesi yazıyor olun, Tab tuşuna basmak her zaman HUD’ı açıp kapatır.
• Mobilde Birinci Sınıf Deneyim: iPhone 15’te yusufakcakaya.com/sandboxes/fluid-dynamics adresini açtığınızda, parmak darbelerinizi engelleyen hiçbir HUD butonu olmadan 60 FPS tam ekran bir tuval sizi karşılar.
• Sıfır Yerleşim Sarsıntısı (Zero Layout Thrashing): Pencere yeniden boyutlandırıldığında veya tam ekrana geçildiğinde önbelleğe alınmış DPR boyutları kullanılır; 60 FPS requestAnimationFrame döngülerimizde tek bir getBoundingClientRect() çağrısı bile yer almaz.

Bugün 32 kum havuzunun tamamı 28 otomatik test bataryasından çıkış kodu 0 ile geçiyor. Geçici yamalar yok, uyumluluk dolambaçları yok, kontrolsüz stiller yok.

Sınırda mimari, estetikte brutalizm, çekirdekte sıfır jank.