Game Catur Statis (Static Chess)

 (val.town)
1 poin oleh GN⁺ 2024-05-14 | 1 komentar | Bagikan ke WhatsApp

Implementasi Static Chess

  • Implementasi catur yang biasa saja, hanya dengan fitur-fitur yang esensial
  • Semua halaman disusun hanya dengan HTML dan CSS
  • Semua langkah catur dilakukan dengan mengklik tautan
  • Permainan berjalan dengan cara mengirim tautan ke teman, lalu lawan melakukan langkah dan mengirimkan tautan kembali
  • Animasi yang tidak perlu atau elemen interaktif yang mencolok tidak mengganggu gameplay
  • Menarik untuk bertanya-tanya apakah Google bisa menghitung semua kemungkinan langkah catur saat mengindeks situs ini

Batasan fitur dan bug

  • Fiturnya sangat terbatas dan mungkin tidak berfungsi
  • Jika menemukan bug, mohon laporkan

Ide yang menginspirasi

  • Terinspirasi dari diskusi Hacker News tentang situs yang menampilkan semua kemungkinan status permainan tic-tac-toe

Rencana ke depan

  • Berencana memperluasnya agar mendukung gameplay yang sesungguhnya
  • Sepertinya ini bisa menjadi antarmuka sederhana untuk bermain catur jarak jauh dengan teman-teman
  • Menambahkan fitur bertanding melawan AI statis juga terdengar menarik
  • Jika ada fitur yang ingin ditambahkan, PR sangat diterima

Kode utama

class StaticChess { 
  // 생략...
  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>
          {/* 생략... */}
          <div className="board">
            {this.rows.map(row => (
              <div key={row} className="row">{this.squares.map(square => game.squareContent(row, square))}</div>
            ))}
          </div>
          {/* 생략... */}
        </html>
      ),
      { headers: { "content-type": "text/html", "cache-control": "max-age=86400, public" } },
    );
  }
}

class Game {
  // 생략... 
  squareContent(row: number, square: number) {
    // 생략...
    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>;
    })();
    // 생략...
  }
}

Opini GN⁺

  • Mengimplementasikan game catur web hanya dengan HTML/CSS adalah percobaan yang menarik. Namun, menjadikan semua status sebagai halaman statis masih terasa dipertanyakan dari sisi kepraktisan.
  • Jika mempertimbangkan kegunaan yang realistis, sepertinya pada akhirnya perlu bentuk yang mengelola status di backend dan memanggil API dari frontend.
  • Menghitung lebih dulu semua status sebagai halaman statis memang ide yang menyenangkan, tetapi tampaknya tidak terlalu bermakna bagi pengguna nyata.
  • Melakukan SSR dengan React adalah pendekatan yang cukup baik, tetapi masih terlihat banyak ruang untuk meningkatkan performa melalui caching, prefetching, dan sebagainya.
  • Proyek open source serupa yang bisa dijadikan referensi adalah lichess. Proyek ini menyediakan fitur yang kaya dan UI yang bagus.
  • Jika ingin mendukung mode AI dengan menghubungkannya ke engine catur, memanfaatkan WASM juga bisa dipertimbangkan.

Bacaan terkait

1 komentar

 
GN⁺ 2024-05-14
Komentar Hacker News
  • Anda bisa menambahkan FEN ke URL untuk memainkan Chess960 (Fischer Random Chess) atau varian lain dengan "posisi awal kustom". Spasi harus diganti dengan garis bawah.
  • Gerakan yang valid terdeteksi, tetapi skakmat tidak dikenali.
    • Pada URL contoh, seharusnya ditandai sebagai skakmat.
  • Pada contoh URL lain, permainan berhasil berlanjut hingga skakmat.
  • Disarankan untuk menggunakan CDN (misalnya Cloudflare) untuk melihat rasio cache hit.
  • Candaan bahwa yang diharapkan adalah varian catur di mana bidaknya sama sekali tidak bisa digerakkan.
  • Meski ini adalah halaman web statis dan implementasi catur yang sangat minimal, anehnya tetap ada latensi.
  • Pada 2006, seseorang mengimplementasikan sesuatu yang nyaris sama dengan board game Reversi untuk belajar Python. Lawannya adalah AI sederhana berbasis pencarian minimax. Saat itu, memasukkan semua state ke dalam URL tanpa JavaScript merupakan pendekatan yang terasa lebih jelas.
  • Selain FEN, akan lebih baik jika riwayat langkah juga dimasukkan dalam bentuk potongan URL. URL contoh disertakan.
  • Karena tidak ada sitemap, semua daftar state catur yang mungkin tidak dapat ditemukan.
  • Melalui proyek ini, diketahui dua sumber daya yang berguna: https://fav.farm dan https://val.town.