Juego de ajedrez estático (Static Chess)

 (val.town)
1 puntos por GN⁺ 2024-05-14 | 1 comentarios | Compartir por WhatsApp

Implementación de Static Chess

  • Una implementación de ajedrez sencilla, con solo las funciones esenciales
  • Todas las páginas están compuestas únicamente de HTML y CSS
  • Todos los movimientos de ajedrez se realizan haciendo clic en enlaces
  • La partida avanza enviándole un enlace a un amigo, para que haga su movimiento y luego te devuelva otro enlace
  • Las animaciones innecesarias o los elementos interactivos vistosos no interfieren con la jugabilidad
  • Da curiosidad si Google podrá calcular todos los movimientos posibles de ajedrez cuando indexe este sitio

Limitaciones y errores

  • Las funciones son muy limitadas y puede que no funcione correctamente
  • Si encuentras un error, por favor repórtalo

Idea que lo inspiró

  • Está inspirado en una discusión en Hacker News sobre un sitio que muestra todos los estados posibles de un juego de tres en raya

Planes a futuro

  • Planea ampliarlo para que soporte partidas reales
  • Parece que podría convertirse en una interfaz simple para jugar partidas largas con amigos
  • También podría ser divertido agregar una función para enfrentarse a una IA estática
  • Si hay alguna función que te gustaría ver añadida, los PR son bienvenidos

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

Opinión de GN⁺

  • Implementar un juego de ajedrez web solo con HTML/CSS es un intento interesante. Sin embargo, convertir todos los estados en páginas estáticas deja dudas sobre su practicidad.
  • Pensando en una usabilidad realista, al final probablemente tendría que adoptar una forma donde el backend gestione el estado y el frontend llame a una API.
  • Precalcular todos los estados en páginas estáticas es una idea divertida, pero no parece tener mucho significado para los usuarios reales.
  • Hacer SSR con React es un enfoque razonable, aunque parece haber bastante margen para mejorar el rendimiento con caché, prefetching y similares.
  • Un proyecto open source parecido es lichess. Vale la pena revisarlo porque ofrece muchas funciones y una interfaz muy buena.
  • Si se quiere añadir un modo de IA conectándolo con un motor de ajedrez, también podría considerarse usar WASM.

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-05-14
Comentarios en Hacker News
  • Se puede agregar FEN a la URL para jugar Chess960 (ajedrez aleatorio de Fischer) u otras variantes con "posición inicial personalizada". Los espacios deben reemplazarse con guiones bajos.
  • Detecta movimientos válidos, pero no reconoce el jaque mate.
    • En la URL de ejemplo, debería mostrarse como jaque mate.
  • En otro ejemplo de URL, sí avanza correctamente hasta el jaque mate.
  • Sugieren usar un CDN (por ejemplo, Cloudflare) para comprobar la tasa de aciertos de caché.
  • Broma sobre que esperaban una variante de ajedrez en la que no se pudiera mover ninguna pieza.
  • Sorprendentemente, hay latencia a pesar de que es una página web estática y una implementación mínima de ajedrez.
  • En 2006, alguien implementó casi exactamente lo mismo con el juego de mesa Reversi para aprender Python. El oponente era una IA simple basada en búsqueda minimax. En ese entonces, poner todo el estado en la URL sin JavaScript era un enfoque más claro.
  • Además de FEN, estaría bien incluir el historial de movimientos en notación de piezas. Se proporciona una URL de ejemplo.
  • Como no hay mapa del sitio, no fue posible encontrar una lista de todos los estados de ajedrez posibles.
  • Gracias a este proyecto, conocieron recursos útiles como https://fav.farm y https://val.town.