Jogo de xadrez estático (Static Chess)

 (val.town)
1 pontos por GN⁺ 2024-05-14 | 1 comentários | Compartilhar no WhatsApp

Implementação do Static Chess

  • Implementação de xadrez comum, com apenas os recursos essenciais
  • Todas as páginas são compostas apenas por HTML e CSS
  • Todos os movimentos de xadrez são feitos clicando em links
  • O jogo funciona enviando um link para um amigo, a outra pessoa faz a jogada e envia o link de volta
  • Animações desnecessárias ou elementos interativos chamativos não atrapalham a jogabilidade
  • Fico curioso se o Google conseguiria calcular todos os movimentos possíveis de xadrez ao indexar este site

Limitações de recursos e bugs

  • Os recursos são bem limitados e pode ser que não funcione direito
  • Se encontrar algum bug, por favor avise

Ideia que inspirou o projeto

  • Inspirado por uma discussão no Hacker News sobre um site que mostra todos os estados possíveis de um jogo da velha

Planos futuros

  • Há planos de expandir para dar suporte a partidas reais
  • Parece que isso poderia virar uma interface simples para jogar partidas longas com amigos
  • Também parece que seria divertido adicionar um modo para enfrentar uma IA estática
  • Se houver algum recurso que você gostaria de ver adicionado, PRs são bem-vindos

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ão do GN⁺

  • Implementar um jogo de xadrez na web usando apenas HTML/CSS é uma tentativa interessante. Mas transformar todos os estados em páginas estáticas levanta dúvidas sobre a praticidade.
  • Pensando na usabilidade real, no fim das contas isso provavelmente teria que virar um modelo em que o backend gerencia o estado e o frontend chama uma API.
  • Pré-calcular todos os estados em páginas estáticas é uma ideia divertida, mas não parece ter grande utilidade para usuários reais.
  • Fazer SSR com React é uma abordagem válida, mas parece haver bastante espaço para melhorar o desempenho com cache, prefetching e afins.
  • Um projeto open source semelhante é o lichess. Vale a pena usar como referência, já que oferece muitos recursos e uma UI excelente.
  • Se quiser dar suporte a um modo com IA integrado ao engine de xadrez, usar WASM também pode ser uma opção a considerar.

Leituras relacionadas

1 comentários

 
GN⁺ 2024-05-14
Comentários do Hacker News
  • É possível adicionar FEN à URL para jogar Chess960 (xadrez aleatório de Fischer) ou outras variantes com "posição inicial personalizada". Os espaços devem ser substituídos por sublinhados.
  • Detecta movimentos válidos, mas não reconhece xeque-mate.
    • Na URL de exemplo, deveria aparecer como xeque-mate.
  • Em outro exemplo de URL, a partida avança com sucesso até o xeque-mate.
  • Sugestão de usar uma CDN (por exemplo, Cloudflare) para verificar a taxa de acerto do cache.
  • Uma piada dizendo que esperava uma variante de xadrez em que não fosse possível mover nenhuma peça.
  • Apesar de ser uma página web estática e uma implementação mínima de xadrez, surpreendentemente há latência.
  • Em 2006, alguém implementou algo quase idêntico com o jogo de tabuleiro Reversi para aprender Python. O oponente era uma IA simples baseada em busca minimax. Na época, colocar todo o estado na URL sem JavaScript parecia uma abordagem mais clara.
  • Além do FEN, seria bom incluir o histórico de movimentos em notação compacta. URL de exemplo fornecida.
  • Como não há sitemap, não foi possível encontrar uma lista de todos os estados de xadrez possíveis.
  • Este projeto apresentou recursos úteis como https://fav.farm e https://val.town.