Spider Solitaire

Klasik Spider Solitaire'i React, TypeScript ve Vite ile tarayıcıya taşıdım. Amaç, Papaz'dan As'a kadar 8 tam seri oluşturmak. Kartları azalan sırayla diziyorsun ve yalnızca yüzü açık olanları taşıyabiliyorsun. 13 kartlık bir seri tamamlandığında kendiliğinden masadan kalkıyor; hamle kalmadığında da desteden yeni kart açılıyor. Süre sayacı, geri alma ve ipucu da var. Kartları sürükleyerek ya da dokunarak oynayabilirsin: bir karta dokunduğunda kart, gidebileceği en uygun yere kendisi gidiyor.

Kartların hareketi ve sesi

Kartlar desteden animasyonla dağıtılıyor, sütunlar arasında kayıyor, ters yüzden çevrilerek açılıyor; tamamlanan seriler de temel alana uçuyor. Ses efektleri için tek bir ses dosyası bile kullanmadım, hepsi Web Audio API ile sentezleniyor. İstersen sesi bir düğmeyle kapatabilirsin. Oyunu kazandığında bir kutlama efekti oynuyor; açılır pencereleri de SweetAlert2 ile yaptım.

Arayüz telefondan masaüstüne kadar her ekrana uyacak şekilde ölçekleniyor ve safe-area'yı hesaba katıyor. Telefonda oynayacaksan yatay tutmanı öneririm.

Kurallar arayüzden ayrı

Oyun kurallarını ve yardımcı fonksiyonları React bileşenlerinden ayırıp src/utils altına koydum. Bileşenler src/ui altında, tipler ayrı bir klasörde duruyor; stilleri CSS Modules ile yazdım. Bu sayede kuralları, hiçbir bileşen açmadan doğrudan birim testleriyle sınayabiliyorum. Yönlendirme ise React Router ile istemci tarafında yapılıyor.