Jeu d’échecs statique (Static Chess)

 (val.town)
1 points par GN⁺ 2024-05-14 | 1 commentaires | Partager sur WhatsApp

Implémentation de Static Chess

  • Une implémentation d’échecs ordinaire, avec uniquement les fonctionnalités essentielles
  • Toutes les pages sont composées uniquement de HTML et de CSS
  • Tous les déplacements aux échecs se font en cliquant sur des liens
  • La partie se déroule en envoyant un lien à un ami, qui joue ensuite un coup et renvoie à son tour le lien
  • Les animations inutiles ou les éléments d’interaction tape-à-l’œil ne perturbent pas le gameplay
  • Je me demande si Google pourrait calculer tous les coups d’échecs possibles lorsqu’il indexe ce site

Limites de fonctionnalités et bugs

  • Les fonctionnalités sont très limitées et il se peut que cela ne fonctionne pas
  • Si vous trouvez un bug, merci de le signaler

Idée d’origine

  • Inspiré par une discussion sur Hacker News à propos d’un site montrant tous les états possibles d’une partie de morpion

Plans futurs

  • Prévu pour être étendu afin de prendre en charge de vraies parties
  • Cela pourrait devenir une interface simple pour jouer à des parties longues avec des amis
  • Ajouter une fonctionnalité pour affronter une IA statique pourrait aussi être amusant
  • Si vous souhaitez voir une fonctionnalité ajoutée, les PR sont les bienvenues

Code principal

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>;
    })();
    // 생략...
  }
}

Avis de GN⁺

  • Implémenter un jeu d’échecs web uniquement en HTML/CSS est une tentative intéressante. En revanche, faire de tous les états des pages statiques semble discutable sur le plan pratique.
  • En tenant compte d’un usage réaliste, il faudrait sans doute au final une architecture où l’état est géré côté back-end et où le front-end appelle une API.
  • Pré-calculer tous les états sous forme de pages statiques est une idée amusante, mais cela ne semble pas apporter beaucoup à de vrais utilisateurs.
  • Faire du SSR avec React est une approche correcte, mais il semble y avoir encore de la marge pour améliorer les performances, notamment avec le caching ou le prefetching.
  • Parmi les projets open source similaires, on peut citer lichess. Avec ses nombreuses fonctionnalités et son excellente UI, il peut servir de référence.
  • Pour proposer un mode IA relié à un moteur d’échecs, il pourrait aussi être intéressant d’envisager l’usage de WASM.

À lire aussi

1 commentaires

 
GN⁺ 2024-05-14
Commentaires sur Hacker News
  • Il est possible de jouer aux échecs960 (échecs de Fischer aléatoires) ou à d'autres variantes avec une « position de départ personnalisée » en ajoutant un FEN à l’URL. Les espaces doivent être remplacés par des tirets bas.
  • Les coups valides sont détectés, mais le mat n’est pas reconnu.
    • Dans l’URL d’exemple, cela devrait être indiqué comme un mat.
  • Dans un autre exemple d’URL, la partie va bien jusqu’au mat.
  • Suggestion d’utiliser un CDN (par exemple Cloudflare) pour vérifier le taux de cache hit.
  • Une plaisanterie dit qu’on s’attendait à une variante des échecs où il est impossible de déplacer la moindre pièce.
  • Bien qu’il s’agisse d’une page web statique et d’une implémentation minimale des échecs, il y a étonnamment de la latence.
  • En 2006, quelqu’un a implémenté presque exactement la même chose avec le jeu de plateau Reversi pour apprendre Python. L’adversaire était une IA simple basée sur une recherche minimax. À l’époque, mettre tout l’état dans l’URL sans JavaScript paraissait une approche plus claire.
  • En plus du FEN, il serait bon d’inclure l’historique des coups sous forme compacte. Un exemple d’URL est fourni.
  • Comme il n’y a pas de sitemap, il a été impossible de trouver la liste de tous les états d’échecs possibles.
  • Ce projet a permis de découvrir des ressources utiles : https://fav.farm et https://val.town.