Interaktive Schach-Elemente für HTML-Seiten: Schach-Programm und Live-Übertragung von Schach-Turnieren

Für das Schach-Programm Fritz von ChessBase wird gezeigt, wie es in eine HTML-Seiten integriert werden kann. Der pgn-Viewer von ChessBase kann verwendet werden, um Live-Übertragungen von Schach-Turnieren in einer HTML-Seite anzuzeigen.

walter
pgn-Viewer ChessBase Schach Schach-Turnier Schach-Programm Live-Übertragung Fritz
Inhaltsverzeichnis

Einordnung des Artikels

Einführung

In Interaktive Schach-Elemente für HTML-Seiten: pgn-Viewer wurde schon der pgn-Viewer von ChessBase vorgestellt, der als Analyse-Werkzeug schon mit einem vollwertigen Schach-Programm konkurrieren kann. Um eine Partie Schach zu spielen, ist er aber ungeeignet. Dafür gibt es von ChessBase ein komplettes Schach-Programm, namens Fritz, gegen das man bei unterschiedlichen Spielstufen antreten kann. Seine Funktionalität und wie man es in eine HTML-Seite einbinden kann, wird unten erklärt.

Der pgn-Viewer von ChessBase kann dazu verwendet werden, Live-Übertragungen von Schach-Turnieren anzuzeigen. Wie man den pgn-Viewer dazu konfiguriert, wird ebenso gezeigt.

Das Schach-Programm Fritz

Auf der Seite

https://www.schach.de/HowTo/EmbedFritz

wird gezeigt, wie man das Schach-Programm Fritz in eine HTML-Seite integriert. Was auf dieser Seite nicht ganz klar zum Ausdruck kommt, ist welche Funktionalität die frei verfügbare Version besitzt und welche Funktionalitäten hinzukommen, wenn man sich registriert.

Integration in eine HTML-Seite

Die Integration von Fritz erfolgt mit einer einzigen Zeile im Quelltext (an der Stelle, an der sich das Programm befinden soll):

<iframe src="https://fritz.chessbase.com" style="width:960px;height:680px"></iframe>

Höhe und Breite des Programm-Fensters kann man nach Belieben anpassen. Mehr ist nicht nötig: Es sind keine weiteren javascript- und css-Dateien zu laden und man kann sofort zu spielen beginnen.

Eine komplette HTML-Seite könnte daher wie folgt aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ChessBase: Fritz</title>

    </head>
    <body>
    
        <h1>Schach-Programm Fritz von ChessBase</h1>
        
        <iframe src="https://fritz.chessbase.com" style="width:960px;height:680px"></iframe>

</body>
</html>

Funktionalität des Schach-Programms

Mit einem echten Programm (wie die Original-Version von Fritz) ist die HTML-Version natürlich nicht vergleichbar, die grundlegenden Funktionalitäten eines Schach-Programms sind aber enthalten:

Das Eröffnungs-Buch (Live-Buch) ist nur sehr eingeschränkt nutzbar; um den vollen Leistungsumfang zu nutzen, muss man einen ChessBase Account anlegen.

Ohne Account sieht man zumindest, ob man sich noch "im Buch" befindet und wie viele Züge zur Auswahl stehen – welche es sind und die üblichen statistischen Auswertungen sind nicht sichtbar.

Man kann dies auch als Vorteil sehen: Durch die Information, ob man noch "im Buch" ist, kann man gezielt Eröffnungs-Varianten trainieren.

Es gibt noch zwei weitere Funktionalitäten, die man erwähnen sollte:

Die beiden Möglichkeiten werden in den folgenden Abschnitten erklärt.

Eingabe einer Anfangsposition

Oben wurde gezeigt, dass Fritz lediglich dadurch geladen wird, dass ein iframe-Element in die HTML-Seite integriert wird, dessen Quelle durch src="https://fritz.chessbase.com" gegeben ist.

Qd7Abbildung 1: Stellung nach 9...Qd7??

Möchte man eine Partie aus einer speziellen Anfangsposition starten, wird der Quelle eine Variable namens fen übergeben, die als Wert den FEN-Code erhält. Der Quelltext lautet dann:

<iframe src="https://fritz.chessbase.com?fen=r4rk1/pppq1ppp/3p1n2/2bNp1B1/2BnP1b1/3P1N2/PPPQ1PPP/R4RK1 w - - 0 10" style="width:960px;height:680px">
</iframe>

Die Anfangsposition stammt aus der Italienisch-Partie, die bei der Besprechung der pgn-Viewer vorkam (siehe Abbildung 1).

EndspieltrainingAbbildung 2: Ausgangsstellung im Endspieltraining mit Weiß am Zug

Sind nur noch wenige Steine auf dem Brett, kann man anstelle des FEN-Codes auch die Position – mit der Variable pos – eingeben, wie man am folgenden Beispiel sieht (mit der Stellung aus Abbildung 2):

<iframe src="https://fritz.chessbase.com?pos=wKc6Pd5/bKe8" style="width:960px;height:680px">
</iframe>

Live-Übertragung von Schach-Turnieren

ChessBase

Die Erklärung, wie man Live-Übertragungen in eine eigene HTML-Seite einbindet, findet man unter dem ersten Link:

https://www.schach.de/HowTo/EmbedLiveChess
https://live.chessbase.com/

Unter der zweiten Adresse kann man sehen, welche Turniere aktuell übertragen werden.

Man kann sich jetzt

Zur Auswahl eines Turnieres reicht es meist, den Veranstaltungsort (zum Beispiel Wijk) anzugeben; dieser wird dann in einem <div> -Element gesetzt:

<div class="cblive" data-event="Wijk" data-date="*">
</div>

Um alle Turniere zu laden, wird anstelle von Wijk die wildcard gesetzt:

<div class="cblive" data-event="*" data-date="*">
</div>

Das <div> -Element füllt den pgn-Viewer von ChessBase mit Inhalt; dieser muss dann wie in Interaktive Schach-Elemente für HTML-Seiten: pgn-Viewer beschrieben mit Hilfe von drei Dateien im Kopf der HTML-Datei geladen werden:

<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css"/>
<script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script>
<script src="https://pgn.chessbase.com/cbreplay.js" type="text/javascript"></script>

Eine komplette HTML-Datei könnte dann wie folgt aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ChessBase Live-Turnier</title>
        
        <link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css"/>
        <script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script>
        <script src="https://pgn.chessbase.com/cbreplay.js" type="text/javascript"></script>
        
    </head>
    <body>

        <h1>Live-Turnier</h1>

        <div class="cblive" data-event="*" data-date="*"></div>

</body>
</html>

chess24

Ein beliebter Anbieter von Live-Übertragungen ist chess24. Auf einer Erklärung der Nutzung der Homepage unter dem Link

https://support.chess24.com/hc/de/categories/200103517-chess24-nutzen-Die-Website

wird zwar gesagt, dass ein Einbinden der Übertragung erwünscht ist und durch einen sharebutton ermöglicht wird (Anklicken des sharebutton öffnet ein Popup, in dem sich der Quelltext zum Einbinden befindet), der sharebutton ist aber nirgends zu sehen. Hinweise werden gerne entgegengenommen.