Statik Satranç (Static Chess) oyunu

 (val.town)
1 puan yazan GN⁺ 2024-05-14 | 1 yorum | WhatsApp'ta paylaş

Statik Satranç implementasyonu

  • Sıradan, yalnızca temel özelliklere sahip bir satranç implementasyonu
  • Tüm sayfalar yalnızca HTML ve CSS ile oluşturuluyor
  • Tüm satranç hamleleri bağlantılara tıklanarak yapılıyor
  • Bir arkadaşınıza bağlantıyı gönderiyorsunuz, karşı taraf hamleyi yapıp bağlantıyı yeniden size gönderiyor
  • Gereksiz animasyonlar veya gösterişli etkileşimli öğeler oynanışı engellemiyor
  • Google bu siteyi indekslerken tüm olası satranç hamlelerini hesaplayıp hesaplayamayacağını merak ediyorum

Özellik kısıtları ve hatalar

  • Özellikler oldukça sınırlı ve çalışmayabilir
  • Hata bulursanız lütfen bildirin

İlham veren fikir

  • Tic-tac-toe oyununun tüm olası durumlarını gösteren bir site hakkındaki Hacker News tartışmasından ilham alındı

Gelecek planları

  • Gerçek oynanışı destekleyecek şekilde genişletmeyi planlıyorum
  • Arkadaşlarla uzun süreli oyunlar oynanabilecek sade bir arayüz olabilir gibi görünüyor
  • Statik bir yapay zekaya karşı oynama özelliği eklemek de eğlenceli olabilir
  • Eklenmesini istediğiniz özellikler varsa PR'lar memnuniyetle karşılanır

Öne çıkan kod

class StaticChess { 
  // atlandı...
  async fetch(req: Request): Promise<Response> {
    const gameInfo = parseURL(req.url); 
    if (gameInfo === undefined) {
      return new Response("Not Found", { status: 404, headers: { "cache-control": "max-age=86400, public" } }); 
    }
    const game = new Game(gameInfo.game, gameInfo.selected);
    return new Response(
      renderToString(
        <html>
          {/* atlandı... */}
          <div className="board">
            {this.rows.map(row => (
              <div key={row} className="row">{this.squares.map(square => game.squareContent(row, square))}</div>
            ))}
          </div>
          {/* atlandı... */}
        </html>
      ),
      { headers: { "content-type": "text/html", "cache-control": "max-age=86400, public" } },
    );
  }
}

class Game {
  // atlandı... 
  squareContent(row: number, square: number) {
    // atlandı...
    const squareContent = (() => {
      if (this.selectable.includes(pos)) { 
        return <a href={`/${this.fen}/${pos}`}>{pieces[this.board[row][square]?.type]}</a>;
      }
      const nextMove = this.nextMoves[pos];
      if (nextMove !== undefined) {
        return (
          <a href={`/${nextMove.after.replaceAll(" ", "_")}/`}>
            {pieces[this.board[row][square]?.type]} 
          </a>
        );
      }
      return <span>{pieces[this.board[row][square]?.type]}</span>;
    })();
    // atlandı...
  }
}

GN⁺ görüşü

  • Bir web satranç oyununu yalnızca HTML/CSS ile hayata geçirmek ilginç bir deneme. Ancak tüm durumları statik sayfalara dönüştürmek pratiklik açısından soru işareti yaratıyor.
  • Gerçekçi kullanılabilirlik düşünüldüğünde, sonunda durumun backend tarafında yönetildiği ve frontend'in API çağırdığı bir yapıya dönüşmesi gerekecek gibi görünüyor.
  • Tüm durumları önceden statik sayfalar olarak hesaplamak fikir olarak eğlenceli olsa da, gerçek kullanıcı için çok büyük bir anlam taşımıyor gibi görünüyor.
  • React ile SSR yapmak makul bir yaklaşım, ancak önbellekleme veya prefetching gibi performans iyileştirmeleri için hâlâ alan var gibi görünüyor.
  • Benzer bir açık kaynak proje olarak lichess var. Zengin özellikler ve hoş bir UI sunduğu için göz atmaya değer.
  • Satranç motoruyla entegre edilip AI modu desteklenecekse, WASM kullanımı da değerlendirilebilir.

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-14
Hacker News yorumları
  • URL'ye FEN ekleyerek Chess960 (Fischer Random Chess) veya diğer "özel başlangıç konumu" varyantları oynanabiliyor. Boşluklar alt çizgi ile değiştirilmelidir.
  • Geçerli hamleleri algılıyor, ancak şah matı tanımıyor.
    • Örnek URL'de şah mat olarak gösterilmesi gerekir.
  • Başka bir URL örneğinde şah mata kadar başarıyla ilerleniyor.
  • Önbellek isabet oranını görmek için bir CDN (ör. Cloudflare) kullanılmasını öneriyor.
  • Hiç taş oynatılamayan bir satranç varyantı beklediğine dair bir şaka.
  • Statik bir web sayfası ve satrancın asgari bir uygulaması olmasına rağmen şaşırtıcı biçimde gecikme var.
  • 2006'da Python öğrenmek için Reversi masa oyunuyla neredeyse aynı şeyi uygulamıştı. Rakip, basit bir minimax aramasına dayalı bir yapay zeka idi. O dönemde JavaScript olmadan tüm durumu URL'ye koymak daha anlaşılır bir yaklaşımdı.
  • FEN'e ek olarak, parça olarak hamle geçmişini de dahil etmek iyi olabilir. Örnek URL verilmiş.
  • Site haritası olmadığı için mümkün olan tüm satranç durumlarının listesini bulamamış.
  • Bu proje sayesinde https://fav.farm ve https://val.town gibi faydalı kaynakları öğrenmiş.