Statisches Schachspiel

 (val.town)
1 Punkte von GN⁺ 2024-05-14 | 1 Kommentare | Auf WhatsApp teilen

Implementierung von Static Chess

  • Eine Schachimplementierung, die gewöhnlich ist und nur die wesentlichen Funktionen bietet
  • Alle Seiten bestehen ausschließlich aus HTML und CSS
  • Alle Schachzüge erfolgen durch das Anklicken von Links
  • Das Spiel läuft so ab, dass man einem Freund einen Link schickt, dieser zieht und dann wieder einen Link zurückschickt
  • Unnötige Animationen oder auffällige interaktive Elemente stören das Gameplay nicht
  • Es stellt sich die Frage, ob Google beim Indexieren dieser Website alle möglichen Schachzüge berechnen kann

Funktionseinschränkungen und Bugs

  • Der Funktionsumfang ist sehr eingeschränkt und es kann sein, dass es nicht funktioniert
  • Wenn du einen Bug findest, melde ihn bitte

Idee und Inspiration

  • Inspiriert durch eine Hacker-News-Diskussion über eine Website, die alle möglichen Zustände eines Tic-Tac-Toe-Spiels zeigt

Zukünftige Pläne

  • Geplant ist eine Erweiterung zur Unterstützung von echtem Gameplay
  • Es könnte eine einfache Oberfläche werden, mit der man lange Partien mit Freunden spielen kann
  • Es wäre auch interessant, eine Funktion für Partien gegen eine statische KI hinzuzufügen
  • Wenn du Funktionen hast, die ergänzt werden sollten, sind PRs willkommen

Wichtiger Code

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

Meinung von GN⁺

  • Die Umsetzung eines Web-Schachspiels nur mit HTML/CSS ist ein interessanter Versuch. Ob es jedoch praktisch ist, alle Zustände als statische Seiten zu erzeugen, ist fraglich.
  • Wenn man an realistische Nutzbarkeit denkt, müsste der Zustand am Ende wohl doch im Backend verwaltet werden, während das Frontend eine API aufruft.
  • Alle Zustände vorab als statische Seiten zu berechnen, ist als Idee unterhaltsam, scheint für echte Nutzer aber wenig Bedeutung zu haben.
  • SSR mit React ist ein vernünftiger Ansatz, aber bei Performance-Optimierungen wie Caching oder Prefetching scheint es noch Spielraum zu geben.
  • Ein ähnliches Open-Source-Projekt ist lichess. Es bietet umfangreiche Funktionen und eine ansprechende UI und könnte als Referenz dienen.
  • Wenn ein KI-Modus durch Anbindung an eine Schach-Engine unterstützt werden soll, könnte man auch den Einsatz von WASM in Betracht ziehen.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-05-14
Hacker-News-Kommentare
  • Man kann Chess960 (Fischer-Random-Schach) oder andere Varianten mit „benutzerdefinierter Startaufstellung“ spielen, indem man FEN zur URL hinzufügt. Leerzeichen müssen durch Unterstriche ersetzt werden.
  • Gültige Züge werden erkannt, aber Schachmatt wird nicht erkannt.
    • In der Beispiel-URL sollte Schachmatt angezeigt werden.
  • In einem weiteren URL-Beispiel wurde erfolgreich bis zum Schachmatt gespielt.
  • Es wird vorgeschlagen, ein CDN (z. B. Cloudflare) zu verwenden, um die Cache-Trefferquote zu prüfen.
  • Ein Scherz darüber, dass eine Schachvariante erwartet wurde, bei der man die Figuren überhaupt nicht bewegen kann.
  • Obwohl es sich um eine statische Webseite und eine minimale Schachimplementierung handelt, gibt es überraschenderweise Latenz.
  • 2006 wurde fast genau dasselbe als Reversi-Brettspiel implementiert, um Python zu lernen. Der Gegner war eine einfache KI auf Basis einer Minimax-Suche. Damals war es ohne JavaScript der naheliegendere Ansatz, den gesamten Zustand in die URL zu packen.
  • Zusätzlich zu FEN wäre es gut, die Zughistorie in kompakter Form einzubeziehen. Beispiel-URL angegeben.
  • Da es keine Sitemap gibt, konnte keine Liste aller möglichen Schachzustände gefunden werden.
  • Durch dieses Projekt wurden die nützlichen Ressourcen https://fav.farm und https://val.town entdeckt.