Dijkstra.html

<!-- 
    Datei: index_final.html
    Beschreibung: Implementierung des Dijkstra-Algorithmus zur Findung des kürzesten Pfades 
    in einer Webapplikation
    Autor: Ramo Agic
    Erstellungsdatum: [05.10.2024 letzte Version]
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shortest path Dijkstra algorithm by Ramo</title>

    <style>
        body {
            height: 100%;
            margin: 0;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            /* Verhindert das Scrollen */
        }

        #canvasContainer {
            position: absolute;
            display: flex;
            border: 1px solid #000000;
            justify-content: flex-start;
            /* Stellt sicher, dass die Elemente oben beginnen */
            align-items: flex-start;
            width: fit-content;
            height: fit-content;
            cursor: grab;
            top: 2%;
            /* Position Viewport */
            left: 2%;
            /* Position Viewport */
        }

        #canvasContainer.dragging {
            cursor: grabbing;
            /* Cursor während des Dragging */
        }

        #canvas1,
        #canvas2 {
            display: flex;
            border: 1px solid #000000;
        }

        #canvas1 {
            background-color: #f0f0f0;
            /* Setzt die Hintergrundfarbe des ersten Canvas auf hellgrau */
        }

        #canvas2 {
            background-color: #fafafa;
            cursor: pointer;
            /* Setzt die Hintergrundfarbe des zweiten Canvas auf sehr helles Grau */
        }

        #distanceTable {
            flex-basis: auto;
            margin-left: 2px;
            border: 1px solid #000000;
            cursor: pointer;
        }

        input[id="inputf"] {
            position: relative;
            font-size: 38px;
            top: 8px;
            margin-left: -1px;
            align-self: start;
            width: 958px;
            text-align: center;
            padding: 6px;
            resize: none;
        }

        #A0 {
            font-size: 28px;
        }

        input[id^="Element"] {
            font-size: 28px;
            width: 100px;
        }

        /* ^gillt dann für alle Felder PQ */
        input[id^="priorityQueue"] {
            font-size: 26px;
            width: 580px;
        }

        #nodeCount {
            font-size: 22px;
            top: -20px;
            margin-left: 10px;
        }

        #ownGraph,
        #connectNodesButton,
        #createGraph {
            background-color: #4CAF50;
            /* Setzt die Hintergrundfarbe auf grün */
            color: white;
            /* Setzt die Textfarbe auf weiß */
            padding: 8px 13px;
            /* Setzt das Padding um den Text */
            text-align: center;
            /* Zentriert den Text */
            text-decoration: none;
            /* Entfernt die Unterstreichung */
            border: none;
            border-radius: 8px;
            /* Setzt den Rand um den Button */
            cursor: pointer;
            /* Ändert den Cursor zu einem Zeiger, wenn er über den Button fährt */
        }

        #resetButton,
        #expectedStateButton {
            background-color: #f44336;
            border: none;
            color: white;
            padding: 8px 13px;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            cursor: pointer;
        }

        #saveRndButton {
            margin: 0 10px;
            margin-top: 5px;
            /* Abstand zwischen den unteren Schaltflächen */
            background-color: #A9A9A9;
            font-size: 26px;
            border: none;
            color: white;
            padding: 8px 13px;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            cursor: pointer;

        }

        #saveOwnButton,
        #loadGraphButton {
            position: relative;
            margin: 0 10px;
            margin-top: 5px;
            top: -20px;
            /* Abstand zwischen den unteren Schaltflächen */
            background-color: #A9A9A9;
            font-size: 26px;
            border: none;
            color: white;
            padding: 8px 13px;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .bottom-buttons {
            display: flex;
            justify-content: center;
            margin-bottom: 50px;
            /* Abstand zu den oberen Schaltflächen */
        }

        .bottom-buttons button {
            margin: 0 10px;
            margin-top: 5px;
            /* Abstand zwischen den unteren Schaltflächen */
            background-color: #A9A9A9;
            font-size: 26px;
            border: none;
            color: white;
            padding: 8px 13px;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            cursor: pointer;
        }

        td,
        th {
            border: 1px solid #ddd;
            font-size: 28px;
            /* Fügt einen dünnen Rand um jede Zelle hinzu */
            padding: 8px;
            /* Fügt Polsterung innerhalb der Zellen hinzu */
        }

        th {
            background-color: #f2f2f2;
            /* Hintergrundfarbe für Kopfzeilen */
            text-align: center;
            /* Ausrichtung des Textes in Kopfzeilen */
        }

        .tabContent {
            display: none;
            padding: 0px;
        }

        /* Optional: Stil für aktive/inaktive Tabs */
        .tab {
            backface-visibility: hidden;
            flex: 0 0 auto;
            flex-direction: row;
            align-items: normal;
            background-color: #e8e6e6;
            /* Setzt die Hintergrundfarbe der Tab-Elemente auf ein helles Grau. */
            color: #1d1c1c;
            /*Textfarbe der Tabs*/
            border: 2px solid #ccc;
            /* Entfernt die Standardgrenze der Tab-Elemente. */
            outline: #000000;
            /* Entfernt den Umriss, der normalerweise beim Fokussieren (z.B. durch Klicken) erscheint. */
            cursor: pointer;
            /* Ändert den Mauszeiger in einen Zeiger, wenn er über das Tab-Element bewegt wird, was anzeigt, dass es anklickbar ist. */
            margin-left: 8px;
            margin-top: 5px;
            width: 300px;
            /* Setzt die Breite der Tab-Elemente auf 300 Pixel. */
            height: 100px;
            /* Setzt die Höhe der Tab-Elemente auf 140 Pixel. */
            padding: 5px;
            /* Setzt den Innenabstand (Padding) der Tab-Elemente auf 40 Pixel, was den Inhalt von den Rändern wegrückt. */
            margin-right: 15px;
            /* Setzt den Außenabstand (Margin) auf der rechten Seite der Tab-Elemente auf 15 Pixel, was sie voneinander trennt. */
            font-family: Arial, sans-serif;
            /* Setzt die Schriftart der Tab-Elemente auf Arial, und falls diese nicht verfügbar ist, auf eine beliebige serifenlose Schriftart. */
            font-size: 24px;
            /* Schriftgröße  */
            font-weight: bold;
            /* Macht den Text in den Tab-Elementen fett. */
            color: #333;
            /* Setzt die Textfarbe der Tab-Elemente auf ein dunkles Grau. */
            text-align: center;
            /* Zentriert den Text innerhalb der Tab-Elemente. */
            background-image: linear-gradient(to right, #f1f1f1, #e7e7e7);
            /* Erstellt einen linearen Gradienten als Hintergrund, der von links (hellgrau) nach rechts (etwas dunkleres Grau) verläuft. */
            border: 1px solid #ccc;
            /* Fügt eine 1 Pixel dicke, solide Grenze um die Tab-Elemente mit einer hellgrauen Farbe hinzu. */
            border-radius: 10px;
            /* Rundet die Ecken der Tab-Elemente mit einem Radius von 5 Pixeln ab. */

        }

        #tab1,
        #tab2,
        #tab3 {
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        #tab1>*,
        #tab2>*,
        #tab3>* {
            /* Wählt alle direkten Kinder von #tab1 aus */
            font-size: 26px;
            padding: 10px;
            margin-top: 30px;
            margin-left: 30px;
            gap: 0px;
            margin-inline-start: 5px;
        }

        .tab:hover {
            background-color: #ddd;
            /* Ändert die Hintergrundfarbe der Tab-Elemente zu einem mittleren Grau, wenn der Benutzer mit der Maus darüber fährt. */
            color: #423636;
            /*Textfarbe der Tabs*/
            background-color: #ddd;
            transform: scale(1.05);
            transition: all 0.3s;
        }

        .tab.active {
            background-color: #afb1b4;
            color: white;
            border-bottom: none;
        }

        .disabled {
            opacity: 0.5;
            pointer-events: none;
        }
    </style>

</head>

<body>

    <div id="canvasContainer">
        <div>
            <canvas id="canvas1" width="968" height="568"></canvas>
            <canvas id="canvas2" width="968" height="468"></canvas>

            <div id="tabs">
                <button class="tab" onclick="showTab('tab1');resetGraph() ">Vorgefertigte
                    Graphen</button>
                <button class="tab" id="RndNodes" onclick="showTab('tab2')">Zufällige Graphen</button>
                <button class="tab" id="OwnNodesNew" onclick="showTab('tab3')">Gestalte eigene Graphen</button>
            </div>

            <div><input type="text" id="inputf" placeholder="Eingabefeld" autocomplete="off"></div>

            <div id="tab1" class="tabContent">

                <label for="nodeCount"></label>
                <select id="nodeCount">
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>

                </select>
                <button id="expectedStateButton" onclick="showExpectedState()">Hilf mir</button>
                <button id="resetButton" onclick="reloadPage()">Hauptmenü</button>
            </div>

            <div id="tab2" class="tabContent">
                <button id="expectedStateButton" onclick="showExpectedState()">Hilf mir</button>
                <button id="resetButton" onclick="reloadPage()">Hauptmenü</button>
                <button id="saveRndButton" onclick="saveGraph()">Speichern</button>
            </div>
            <div id="tab3" class="tabContent">
                <button id="connectNodesButton">Knoten verbinden</button>
                <button id="ownGraph">Spiel beginnen</button>
                <button id="expectedStateButton" onclick="showExpectedState()">Hilf mir</button>
                <button id="resetButton" onclick="reloadPage()">Hauptmenü</button>
                <div class="bottom-buttons">
                    <button id="saveOwnButton" onclick="saveGraph()">Speichern</button>
                    <button id="loadGraphButton">Laden</button>
                </div>
            </div>
        </div>

        <div>
            <table id="distanceTable">

                <tr>
                    <th> Knoten <br>(Distanz)</th>
                    <th>Priority Queue</th>
                </tr>

                <tr>
                    <td id="A0"> A(0)</td>
                    <td>
                        <input type="text" id="priorityQueue1" placeholder="...">
                    </td>
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element1" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue2" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element2" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue3" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element3" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue4" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element4" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue5" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element5" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue6" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element6" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue7" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element7" placeholder="..."></td>

                    <td>
                        <input type="text" id="priorityQueue8" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element8" placeholder="..."></td>

                    <td>
                        <input type="text" id="priorityQueue9" placeholder="...">
                    </td>
                </tr>

                <tr>
                    <td><input type="text" id="Element9" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue10" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element10" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue11" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element11" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue12" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element12" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue13" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element13" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue14" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element14" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue15" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element15" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue16" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element16" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue17" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element17" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue18" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element18" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue19" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element19" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue20" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element20" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue21" placeholder="...">
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="Element21" placeholder="..."></td>
                    <td>
                        <input type="text" id="priorityQueue22" placeholder="...">
                    </td>
                </tr>
            </table>

        </div>
    </div>


    <script>
        /*** Dijkstras Algorithmus Javascript Hauptprogramm */

        /** Variablen */

        /* zeichnen Graph */
        const canvas = document.getElementById('canvas1');
        const ctx = canvas.getContext('2d');

        /* zeichnen Text */
        const canvas2 = document.getElementById('canvas2');
        const ctx2 = canvas2.getContext('2d');

        /* UI */
        const canvasContainer = document.getElementById('canvasContainer');

        /* HSHL Startimage */
        window.onload = function () {
            var canvas = document.getElementById('canvas1');
            var ctx = canvas.getContext('2d');
            var img = new Image();

            img.onload = function () {
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            }
            /* Base64-String HSHL Logo */
            img.src = 'data:image/jpeg;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAgMB/9oACAECEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANgADFAABYAAAAAAAAAAAAAAAAANgADFAABYAAAAAAAAAAAAAAAAANgADFAABYAAAAAAAAAAAAAAAAANgADFAABYAAAAAAAAAAAAAAAAANgADFAABYAAAAAAAAAAAAAAAAANgADFAABYAAAAAAAAAAAAAAAAANgE8BDgOcAWAAAAAAAAAAAAAAAAADYBEAAOSAsAAAAAAAAAAAAAAAAAGwCIAAckBYAAAAAAAAAAAAAAAAANgEQAA5ICwAAAAAAAAAAAAAAAAAbAAGKAACwAAAAAAAAAAAAAAAAAbAAGKAACwAAAAAAAAAAAAAAAAAbAAGKAACwAAAAAAAAAAAAAAAAAbAAGKAACwAAAAAAAAAAAAAAAAAbAAGKAACwAAAAAAAAAAAAAAAAAbAAGKAACwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//EABgBAQEBAQEAAAAAAAAAAAAAAAADBAIB/9oACAEDEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIgAFmsAAyAAAAAAAAAAAAAAAAAAiAAWawADIAAAAAAAAAAAAAAAAACIABZrAAMgAAAAAAAAAAAAAAAAAIgAFmsA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';
        }

        const graphConfigurations = {

            7: {
                nodes: {
                    A: { x: 350, y: 280 },
                    B: { x: 300, y: 155 },
                    C: { x: 500, y: 155 },
                    D: { x: 525, y: 280 },
                    E: { x: 300, y: 405 },
                    F: { x: 500, y: 405 },
                    G: { x: 675, y: 280 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'C' }, { from: 'C', to: 'A' },
                    { from: 'A', to: 'D' }, { from: 'D', to: 'A' },
                    { from: 'A', to: 'E' }, { from: 'E', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'C', to: 'G' }, { from: 'G', to: 'C' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'L', to: 'B' }, { from: 'B', to: 'L' },
                    { from: 'L', to: 'C' }, { from: 'C', to: 'L' },
                    { from: 'L', to: 'D' }, { from: 'D', to: 'L' }
                ]
            },

            8: {
                nodes: {
                    A: { x: 350, y: 280 },
                    B: { x: 300, y: 125 },
                    C: { x: 500, y: 125 },
                    D: { x: 525, y: 280 },
                    E: { x: 300, y: 425 },
                    F: { x: 500, y: 425 },
                    G: { x: 650, y: 280 },
                    H: { x: 220, y: 280 },

                },
                edges: [
                    { from: 'L', to: 'B' }, { from: 'B', to: 'L' },
                    { from: 'L', to: 'C' }, { from: 'C', to: 'L' },
                    { from: 'L', to: 'D' }, { from: 'D', to: 'L' },
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'C' }, { from: 'C', to: 'A' },
                    { from: 'A', to: 'E' }, { from: 'E', to: 'A' },
                    { from: 'A', to: 'D' }, { from: 'D', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'C', to: 'G' }, { from: 'G', to: 'C' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'H', to: 'B' }, { from: 'B', to: 'H' },
                    { from: 'H', to: 'E' }, { from: 'E', to: 'H' },
                ]
            },
            9: {
                nodes: {
                    A: { x: 350, y: 280 },
                    B: { x: 300, y: 140 },
                    C: { x: 500, y: 140 },
                    D: { x: 525, y: 280 },
                    E: { x: 300, y: 420 },
                    F: { x: 500, y: 420 },
                    G: { x: 655, y: 200 },
                    H: { x: 220, y: 280 },
                    I: { x: 655, y: 360 },
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'C' }, { from: 'C', to: 'A' },
                    { from: 'A', to: 'F' }, { from: 'F', to: 'A' },
                    { from: 'A', to: 'E' }, { from: 'E', to: 'A' },
                    { from: 'A', to: 'D' }, { from: 'D', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'C', to: 'G' }, { from: 'G', to: 'C' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'D', to: 'I' }, { from: 'I', to: 'D' },
                    { from: 'F', to: 'I' }, { from: 'I', to: 'F' },
                    { from: 'H', to: 'B' }, { from: 'B', to: 'H' },
                    { from: 'H', to: 'E' }, { from: 'E', to: 'H' },
                    { from: 'I', to: 'G' }, { from: 'G', to: 'I' },

                ]
            },
            10: {
                nodes: {
                    A: { x: 380, y: 280 },
                    B: { x: 330, y: 140 },
                    C: { x: 530, y: 140 },
                    D: { x: 555, y: 280 },
                    E: { x: 330, y: 420 },
                    F: { x: 530, y: 420 },
                    G: { x: 655, y: 140 },
                    H: { x: 220, y: 280 },
                    I: { x: 655, y: 420 },
                    J: { x: 760, y: 280 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'H' }, { from: 'H', to: 'A' },
                    { from: 'A', to: 'C' }, { from: 'C', to: 'A' },
                    { from: 'A', to: 'F' }, { from: 'F', to: 'A' },
                    { from: 'A', to: 'E' }, { from: 'E', to: 'A' },
                    { from: 'A', to: 'D' }, { from: 'D', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'C', to: 'G' }, { from: 'G', to: 'C' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'D', to: 'I' }, { from: 'I', to: 'D' },
                    { from: 'F', to: 'I' }, { from: 'I', to: 'F' },
                    { from: 'H', to: 'B' }, { from: 'B', to: 'H' },
                    { from: 'H', to: 'E' }, { from: 'E', to: 'H' },
                    { from: 'I', to: 'G' }, { from: 'G', to: 'I' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'J', to: 'G' }, { from: 'G', to: 'J' }

                ]
            },

            11: {
                nodes: {
                    A: { x: 417, y: 423 },
                    B: { x: 254, y: 302 },
                    C: { x: 558, y: 308 },
                    D: { x: 414, y: 167 },
                    E: { x: 674, y: 174 },
                    F: { x: 878, y: 175 },
                    G: { x: 769, y: 322 },
                    H: { x: 644, y: 441 },
                    I: { x: 167, y: 433 },
                    J: { x: 62, y: 294 },
                    K: { x: 162, y: 177 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'C' }, { from: 'C', to: 'A' },
                    { from: 'A', to: 'I' }, { from: 'I', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'B', to: 'D' }, { from: 'D', to: 'B' },
                    { from: 'B', to: 'I' }, { from: 'I', to: 'B' },
                    { from: 'B', to: 'K' }, { from: 'K', to: 'B' },
                    { from: 'B', to: 'J' }, { from: 'J', to: 'B' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'C', to: 'E' }, { from: 'E', to: 'C' },
                    { from: 'C', to: 'H' }, { from: 'H', to: 'C' },
                    { from: 'D', to: 'E' }, { from: 'E', to: 'D' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'E', to: 'G' }, { from: 'G', to: 'E' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'H', to: 'G' }, { from: 'G', to: 'H' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'K', to: 'D' }, { from: 'D', to: 'K' },
                    { from: 'K', to: 'J' }, { from: 'J', to: 'K' }

                ]
            },
            12: {
                nodes: {
                    A: { x: 100, y: 284 },
                    B: { x: 242, y: 100 },
                    C: { x: 484, y: 100 },
                    D: { x: 726, y: 100 },
                    E: { x: 868, y: 284 },
                    F: { x: 726, y: 468 },
                    G: { x: 484, y: 468 },
                    H: { x: 242, y: 468 },
                    I: { x: 363, y: 284 },
                    J: { x: 484, y: 284 },
                    K: { x: 605, y: 284 },
                    L: { x: 726, y: 284 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'D', to: 'E' }, { from: 'E', to: 'D' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'G', to: 'H' }, { from: 'H', to: 'G' },
                    { from: 'H', to: 'A' }, { from: 'A', to: 'H' },
                    { from: 'A', to: 'I' }, { from: 'I', to: 'A' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'I', to: 'C' }, { from: 'C', to: 'I' },
                    { from: 'J', to: 'G' }, { from: 'G', to: 'J' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'K', to: 'L' }, { from: 'L', to: 'K' },
                    { from: 'L', to: 'E' }, { from: 'E', to: 'L' },
                    { from: 'B', to: 'I' }, { from: 'I', to: 'B' },
                    { from: 'C', to: 'J' }, { from: 'J', to: 'C' },
                    { from: 'D', to: 'L' }, { from: 'L', to: 'D' },
                    { from: 'F', to: 'L' }, { from: 'L', to: 'F' },
                    { from: 'G', to: 'K' }, { from: 'K', to: 'G' },
                    { from: 'H', to: 'I' }, { from: 'I', to: 'H' }
                ]
            },
            13: {
                nodes: {
                    A: { x: 230, y: 470 },
                    B: { x: 225, y: 320 },
                    C: { x: 118, y: 225 },
                    D: { x: 345, y: 241 },
                    E: { x: 347, y: 115 },
                    F: { x: 192, y: 72 },
                    G: { x: 497, y: 73 },
                    H: { x: 592, y: 143 },
                    I: { x: 601, y: 251 },
                    J: { x: 470, y: 310 },
                    K: { x: 460, y: 468 },
                    L: { x: 745, y: 254 },
                    M: { x: 763, y: 59 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'J' }, { from: 'J', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'B', to: 'D' }, { from: 'D', to: 'B' },
                    { from: 'B', to: 'F' }, { from: 'F', to: 'B' },
                    { from: 'C', to: 'F' }, { from: 'F', to: 'C' },
                    { from: 'D', to: 'E' }, { from: 'E', to: 'D' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'E', to: 'G' }, { from: 'G', to: 'E' },
                    { from: 'H', to: 'M' }, { from: 'M', to: 'H' },
                    { from: 'D', to: 'H' }, { from: 'H', to: 'D' },
                    { from: 'D', to: 'J' }, { from: 'J', to: 'D' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'G', to: 'H' }, { from: 'H', to: 'G' },
                    { from: 'G', to: 'M' }, { from: 'M', to: 'G' },
                    { from: 'H', to: 'I' }, { from: 'I', to: 'H' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'I', to: 'L' }, { from: 'L', to: 'I' },
                    { from: 'I', to: 'M' }, { from: 'M', to: 'I' },
                    { from: 'L', to: 'M' }, { from: 'M', to: 'L' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'K', to: 'L' }, { from: 'L', to: 'K' }
                ]
            },

            14: {
                nodes: {
                    A: { x: 484, y: 50 },
                    B: { x: 242, y: 184 },
                    C: { x: 726, y: 184 },
                    D: { x: 814, y: 500 },
                    E: { x: 100, y: 284 },
                    F: { x: 868, y: 284 },
                    G: { x: 242, y: 384 },
                    H: { x: 726, y: 364 },
                    I: { x: 484, y: 518 },
                    J: { x: 393, y: 184 },
                    K: { x: 575, y: 184 },
                    L: { x: 383, y: 394 },
                    M: { x: 595, y: 404 },
                    N: { x: 484, y: 284 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'K' }, { from: 'K', to: 'A' },
                    { from: 'B', to: 'E' }, { from: 'E', to: 'B' },
                    { from: 'B', to: 'G' }, { from: 'G', to: 'B' },
                    { from: 'B', to: 'J' }, { from: 'J', to: 'B' },
                    { from: 'C', to: 'F' }, { from: 'F', to: 'C' },
                    { from: 'C', to: 'H' }, { from: 'H', to: 'C' },
                    { from: 'C', to: 'K' }, { from: 'K', to: 'C' },
                    { from: 'E', to: 'G' }, { from: 'G', to: 'E' },
                    { from: 'G', to: 'J' }, { from: 'J', to: 'G' },
                    { from: 'G', to: 'L' }, { from: 'L', to: 'G' },
                    { from: 'L', to: 'I' }, { from: 'I', to: 'L' },
                    { from: 'L', to: 'N' }, { from: 'N', to: 'L' },
                    { from: 'N', to: 'M' }, { from: 'M', to: 'N' },
                    { from: 'I', to: 'M' }, { from: 'M', to: 'I' },
                    { from: 'J', to: 'N' }, { from: 'N', to: 'J' },
                    { from: 'N', to: 'K' }, { from: 'K', to: 'N' },
                    { from: 'K', to: 'H' }, { from: 'H', to: 'K' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'H', to: 'M' }, { from: 'M', to: 'H' },
                    { from: 'M', to: 'D' }, { from: 'D', to: 'M' },
                    { from: 'I', to: 'D' }, { from: 'D', to: 'I' },
                    { from: 'D', to: 'H' }, { from: 'H', to: 'D' },
                    { from: 'J', to: 'L' }, { from: 'L', to: 'J' }

                ]
            },
            15: {
                nodes: {
                    A: { x: 130, y: 371 },
                    B: { x: 232, y: 493 },
                    C: { x: 374, y: 427 },
                    D: { x: 368, y: 269 },
                    E: { x: 368, y: 121 },
                    F: { x: 512, y: 493 },
                    G: { x: 520, y: 341 },
                    H: { x: 514, y: 183 },
                    I: { x: 644, y: 93 },
                    J: { x: 638, y: 239 },
                    K: { x: 626, y: 397 },
                    L: { x: 738, y: 495 },
                    M: { x: 774, y: 337 },
                    N: { x: 780, y: 175 },
                    O: { x: 880, y: 85 }

                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'C', to: 'F' }, { from: 'F', to: 'C' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'D', to: 'E' }, { from: 'E', to: 'D' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'D', to: 'H' }, { from: 'H', to: 'D' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'F', to: 'K' }, { from: 'K', to: 'F' },
                    { from: 'K', to: 'M' }, { from: 'M', to: 'K' },
                    { from: 'G', to: 'H' }, { from: 'H', to: 'G' },
                    { from: 'G', to: 'J' }, { from: 'J', to: 'G' },
                    { from: 'J', to: 'N' }, { from: 'N', to: 'J' },
                    { from: 'H', to: 'I' }, { from: 'I', to: 'H' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'K', to: 'L' }, { from: 'L', to: 'K' },
                    { from: 'K', to: 'N' }, { from: 'N', to: 'K' },
                    { from: 'L', to: 'M' }, { from: 'M', to: 'L' },
                    { from: 'M', to: 'N' }, { from: 'N', to: 'M' },
                    { from: 'N', to: 'O' }, { from: 'O', to: 'N' }

                ]
            },
            16: {
                nodes: {
                    A: { x: 121, y: 71 },
                    B: { x: 121, y: 213 },
                    C: { x: 121, y: 355 },
                    D: { x: 121, y: 497 },
                    E: { x: 263, y: 142 },
                    F: { x: 263, y: 284 },
                    G: { x: 263, y: 426 },
                    H: { x: 405, y: 71 },
                    I: { x: 405, y: 213 },
                    J: { x: 405, y: 355 },
                    K: { x: 405, y: 497 },
                    L: { x: 547, y: 142 },
                    M: { x: 547, y: 284 },
                    N: { x: 547, y: 426 },
                    O: { x: 689, y: 71 },
                    P: { x: 689, y: 213 }

                }, edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'B', to: 'E' }, { from: 'E', to: 'B' },
                    { from: 'C', to: 'F' }, { from: 'F', to: 'C' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'F', to: 'I' }, { from: 'I', to: 'F' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'H', to: 'L' }, { from: 'L', to: 'H' },
                    { from: 'I', to: 'L' }, { from: 'L', to: 'I' },
                    { from: 'I', to: 'M' }, { from: 'M', to: 'I' },
                    { from: 'J', to: 'M' }, { from: 'M', to: 'J' },
                    { from: 'G', to: 'J' }, { from: 'J', to: 'G' },
                    { from: 'G', to: 'K' }, { from: 'K', to: 'G' },
                    { from: 'J', to: 'N' }, { from: 'N', to: 'J' },
                    { from: 'H', to: 'I' }, { from: 'I', to: 'H' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'M', to: 'P' }, { from: 'P', to: 'M' },
                    { from: 'K', to: 'N' }, { from: 'N', to: 'K' },
                    { from: 'L', to: 'M' }, { from: 'M', to: 'L' },
                    { from: 'M', to: 'N' }, { from: 'N', to: 'M' },
                    { from: 'L', to: 'P' }, { from: 'P', to: 'L' },
                    { from: 'L', to: 'O' }, { from: 'O', to: 'L' },
                    { from: 'O', to: 'P' }, { from: 'P', to: 'O' },
                    { from: 'O', to: 'H' }, { from: 'H', to: 'O' }

                ]
            },
            17: {
                nodes: {
                    A: { x: 121, y: 71 },
                    B: { x: 121, y: 213 },
                    C: { x: 121, y: 355 },
                    D: { x: 121, y: 497 },
                    E: { x: 263, y: 142 },
                    F: { x: 263, y: 284 },
                    G: { x: 263, y: 426 },
                    H: { x: 405, y: 71 },
                    I: { x: 405, y: 213 },
                    J: { x: 405, y: 355 },
                    K: { x: 405, y: 497 },
                    L: { x: 547, y: 142 },
                    M: { x: 547, y: 284 },
                    N: { x: 547, y: 426 },
                    O: { x: 689, y: 71 },
                    P: { x: 689, y: 213 },
                    Q: { x: 729, y: 385 }


                }, edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'E' }, { from: 'E', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'B', to: 'E' }, { from: 'E', to: 'B' },
                    { from: 'C', to: 'F' }, { from: 'F', to: 'C' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'F', to: 'I' }, { from: 'I', to: 'F' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'G', to: 'K' }, { from: 'K', to: 'G' },
                    { from: 'H', to: 'L' }, { from: 'L', to: 'H' },
                    { from: 'I', to: 'L' }, { from: 'L', to: 'I' },
                    { from: 'I', to: 'M' }, { from: 'M', to: 'I' },
                    { from: 'J', to: 'M' }, { from: 'M', to: 'J' },
                    { from: 'G', to: 'J' }, { from: 'J', to: 'G' },
                    { from: 'J', to: 'N' }, { from: 'N', to: 'J' },
                    { from: 'H', to: 'I' }, { from: 'I', to: 'H' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'M', to: 'P' }, { from: 'P', to: 'M' },
                    { from: 'K', to: 'N' }, { from: 'N', to: 'K' },
                    { from: 'L', to: 'M' }, { from: 'M', to: 'L' },
                    { from: 'M', to: 'N' }, { from: 'N', to: 'M' },
                    { from: 'L', to: 'P' }, { from: 'P', to: 'L' },
                    { from: 'L', to: 'O' }, { from: 'O', to: 'L' },
                    { from: 'N', to: 'Q' }, { from: 'Q', to: 'N' },
                    { from: 'O', to: 'P' }, { from: 'P', to: 'O' },
                    { from: 'P', to: 'Q' }, { from: 'Q', to: 'P' },
                    { from: 'O', to: 'H' }, { from: 'H', to: 'O' },
                    { from: 'Q', to: 'M' }, { from: 'M', to: 'Q' }

                ]
            },
            18: {
                nodes: {
                    A: { x: 51, y: 355 },
                    B: { x: 201, y: 213 },
                    C: { x: 201, y: 355 },
                    D: { x: 201, y: 515 },
                    E: { x: 343, y: 142 },
                    F: { x: 343, y: 284 },
                    G: { x: 343, y: 426 },
                    H: { x: 485, y: 71 },
                    I: { x: 485, y: 213 },
                    J: { x: 485, y: 355 },
                    K: { x: 485, y: 515 },
                    L: { x: 627, y: 142 },
                    M: { x: 627, y: 284 },
                    N: { x: 627, y: 426 },
                    O: { x: 769, y: 71 },
                    P: { x: 769, y: 283 },
                    Q: { x: 809, y: 515 },
                    R: { x: 909, y: 283 }


                }, edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'C' }, { from: 'C', to: 'A' },
                    { from: 'A', to: 'D' }, { from: 'D', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'B', to: 'E' }, { from: 'E', to: 'B' },
                    { from: 'B', to: 'F' }, { from: 'F', to: 'B' },
                    { from: 'C', to: 'F' }, { from: 'F', to: 'C' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'K' }, { from: 'K', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'E', to: 'I' }, { from: 'I', to: 'E' },
                    { from: 'F', to: 'I' }, { from: 'I', to: 'F' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'F', to: 'J' }, { from: 'J', to: 'F' },
                    { from: 'G', to: 'K' }, { from: 'K', to: 'G' },
                    { from: 'H', to: 'L' }, { from: 'L', to: 'H' },
                    { from: 'I', to: 'L' }, { from: 'L', to: 'I' },
                    { from: 'I', to: 'M' }, { from: 'M', to: 'I' },
                    { from: 'J', to: 'M' }, { from: 'M', to: 'J' },
                    { from: 'G', to: 'J' }, { from: 'J', to: 'G' },
                    { from: 'J', to: 'N' }, { from: 'N', to: 'J' },
                    { from: 'H', to: 'I' }, { from: 'I', to: 'H' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'M', to: 'P' }, { from: 'P', to: 'M' },
                    { from: 'K', to: 'N' }, { from: 'N', to: 'K' },
                    { from: 'K', to: 'Q' }, { from: 'Q', to: 'K' },
                    { from: 'L', to: 'M' }, { from: 'M', to: 'L' },
                    { from: 'M', to: 'N' }, { from: 'N', to: 'M' },
                    { from: 'L', to: 'P' }, { from: 'P', to: 'L' },
                    { from: 'L', to: 'O' }, { from: 'O', to: 'L' },
                    { from: 'N', to: 'Q' }, { from: 'Q', to: 'N' },
                    { from: 'O', to: 'P' }, { from: 'P', to: 'O' },
                    { from: 'P', to: 'Q' }, { from: 'Q', to: 'P' },
                    { from: 'O', to: 'H' }, { from: 'H', to: 'O' },
                    { from: 'Q', to: 'M' }, { from: 'M', to: 'Q' },
                    { from: 'P', to: 'R' }, { from: 'R', to: 'P' },
                    { from: 'R', to: 'Q' }, { from: 'Q', to: 'R' },
                    { from: 'R', to: 'O' }, { from: 'O', to: 'R' }

                ]
            },
            19: {
                nodes: {
                    A: { x: 422, y: 291 },
                    B: { x: 303, y: 198 },
                    C: { x: 180, y: 97 },
                    D: { x: 543, y: 217 },
                    E: { x: 663, y: 118 },
                    F: { x: 654, y: 321 },
                    G: { x: 532, y: 414 },
                    H: { x: 649, y: 488 },
                    I: { x: 399, y: 492 },
                    J: { x: 274, y: 395 },
                    K: { x: 156, y: 457 },
                    L: { x: 170, y: 302 },
                    M: { x: 425, y: 100 },
                    N: { x: 753, y: 219 },
                    O: { x: 738, y: 412 },
                    P: { x: 92, y: 192 },
                    Q: { x: 860, y: 316 },
                    R: { x: 799, y: 86 },
                    S: { x: 844, y: 473 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'D' }, { from: 'D', to: 'A' },
                    { from: 'A', to: 'G' }, { from: 'G', to: 'A' },
                    { from: 'A', to: 'J' }, { from: 'J', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'B', to: 'L' }, { from: 'L', to: 'B' },
                    { from: 'B', to: 'M' }, { from: 'M', to: 'B' },
                    { from: 'C', to: 'P' }, { from: 'P', to: 'C' },
                    { from: 'D', to: 'E' }, { from: 'E', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'D', to: 'M' }, { from: 'M', to: 'D' },
                    { from: 'E', to: 'N' }, { from: 'N', to: 'E' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'G', to: 'H' }, { from: 'H', to: 'G' },
                    { from: 'H', to: 'O' }, { from: 'O', to: 'H' },
                    { from: 'H', to: 'S' }, { from: 'S', to: 'H' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'K', to: 'L' }, { from: 'L', to: 'K' },
                    { from: 'J', to: 'L' }, { from: 'L', to: 'J' },
                    { from: 'L', to: 'P' }, { from: 'P', to: 'L' },
                    { from: 'N', to: 'O' }, { from: 'O', to: 'N' },
                    { from: 'N', to: 'Q' }, { from: 'Q', to: 'N' },
                    { from: 'N', to: 'R' }, { from: 'R', to: 'N' },
                    { from: 'O', to: 'Q' }, { from: 'Q', to: 'O' },
                    { from: 'O', to: 'S' }, { from: 'S', to: 'O' },
                    { from: 'Q', to: 'R' }, { from: 'R', to: 'Q' }
                ]
            },
            20: {
                nodes: {
                    A: { x: 51, y: 355 },
                    B: { x: 201, y: 213 },
                    C: { x: 201, y: 355 },
                    D: { x: 201, y: 515 },
                    E: { x: 343, y: 142 },
                    F: { x: 343, y: 284 },
                    G: { x: 343, y: 426 },
                    H: { x: 485, y: 71 },
                    I: { x: 485, y: 213 },
                    J: { x: 485, y: 355 },
                    K: { x: 485, y: 515 },
                    L: { x: 627, y: 142 },
                    M: { x: 627, y: 284 },
                    N: { x: 627, y: 426 },
                    O: { x: 769, y: 71 },
                    P: { x: 769, y: 283 },
                    Q: { x: 809, y: 515 },
                    R: { x: 909, y: 283 },
                    S: { x: 181, y: 83 },
                    T: { x: 61, y: 175 }
                },
                edges: [
                    { from: 'A', to: 'B' }, { from: 'B', to: 'A' },
                    { from: 'A', to: 'C' }, { from: 'C', to: 'A' },
                    { from: 'A', to: 'D' }, { from: 'D', to: 'A' },
                    { from: 'B', to: 'C' }, { from: 'C', to: 'B' },
                    { from: 'B', to: 'E' }, { from: 'E', to: 'B' },
                    { from: 'B', to: 'F' }, { from: 'F', to: 'B' },
                    { from: 'C', to: 'F' }, { from: 'F', to: 'C' },
                    { from: 'C', to: 'D' }, { from: 'D', to: 'C' },
                    { from: 'D', to: 'G' }, { from: 'G', to: 'D' },
                    { from: 'D', to: 'K' }, { from: 'K', to: 'D' },
                    { from: 'D', to: 'F' }, { from: 'F', to: 'D' },
                    { from: 'E', to: 'F' }, { from: 'F', to: 'E' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'E', to: 'I' }, { from: 'I', to: 'E' },
                    { from: 'F', to: 'I' }, { from: 'I', to: 'F' },
                    { from: 'E', to: 'H' }, { from: 'H', to: 'E' },
                    { from: 'F', to: 'G' }, { from: 'G', to: 'F' },
                    { from: 'F', to: 'J' }, { from: 'J', to: 'F' },
                    { from: 'G', to: 'K' }, { from: 'K', to: 'G' },
                    { from: 'H', to: 'L' }, { from: 'L', to: 'H' },
                    { from: 'I', to: 'L' }, { from: 'L', to: 'I' },
                    { from: 'I', to: 'M' }, { from: 'M', to: 'I' },
                    { from: 'J', to: 'M' }, { from: 'M', to: 'J' },
                    { from: 'G', to: 'J' }, { from: 'J', to: 'G' },
                    { from: 'J', to: 'N' }, { from: 'N', to: 'J' },
                    { from: 'H', to: 'I' }, { from: 'I', to: 'H' },
                    { from: 'I', to: 'J' }, { from: 'J', to: 'I' },
                    { from: 'J', to: 'K' }, { from: 'K', to: 'J' },
                    { from: 'M', to: 'P' }, { from: 'P', to: 'M' },
                    { from: 'K', to: 'N' }, { from: 'N', to: 'K' },
                    { from: 'K', to: 'Q' }, { from: 'Q', to: 'K' },
                    { from: 'L', to: 'M' }, { from: 'M', to: 'L' },
                    { from: 'M', to: 'N' }, { from: 'N', to: 'M' },
                    { from: 'L', to: 'P' }, { from: 'P', to: 'L' },
                    { from: 'L', to: 'O' }, { from: 'O', to: 'L' },
                    { from: 'N', to: 'Q' }, { from: 'Q', to: 'N' },
                    { from: 'O', to: 'P' }, { from: 'P', to: 'O' },
                    { from: 'P', to: 'Q' }, { from: 'Q', to: 'P' },
                    { from: 'O', to: 'H' }, { from: 'H', to: 'O' },
                    { from: 'Q', to: 'M' }, { from: 'M', to: 'Q' },
                    { from: 'P', to: 'R' }, { from: 'R', to: 'P' },
                    { from: 'R', to: 'Q' }, { from: 'Q', to: 'R' },
                    { from: 'R', to: 'O' }, { from: 'O', to: 'R' },
                    { from: 'S', to: 'B' }, { from: 'B', to: 'S' },
                    { from: 'S', to: 'E' }, { from: 'E', to: 'S' },
                    { from: 'T', to: 'B' }, { from: 'B', to: 'T' },
                    { from: 'T', to: 'S' }, { from: 'S', to: 'T' }
                ]
            }

        };
        /* Index für Pfad der kürzesten Knoten zeichnen */
        let currentPathIndex = 1;

        /* Index um Fortschritt der Benutzereingabe zu verfolgen */
        let currentIndex = 0;

        /* Anzahl der Verwendungen des "Hilf mir"-Buttons */
        let showExpectedStateCount = 0;

        /* Nachbarknoten drawneighbours */
        let nearNodes = [];

        /* Array der NK der Adjl. graph */
        let neighborNodes = [];

        /* Boolescher Wert, /De)Aktiviert event.Listener zum erstellen eigener/zufälliger Knoten */
        isRndNodesActive = false;
        isOwnNodesNewActive = false;

        /* validateInput deaktiviert nach Glückw. Message */
        let algorithmCompleted = false;

        /* Hilfe nur einmal anzeigen */
        let lastExpectedState = null;

        /* Flagge für Laden Fkt das nur 1 mal initialisieren da Aufruf bei jedem Event Eig. Graphen */
        let isLoadGraphInitialized = false;

        /* Willkommenstext und StartAnweisungen */
        const textStart = "Unten siehst du verschiedene Tabs mit den jeweiligen Spielformen.\nDIE REGELN:\n- Startknoten ist immer A, von diesem werden die kürzesten Strecken zu\n  allen anderen Knoten bestimmt, indem du die Priority Queue der jeweils\n  nächsten Knoten zu A in das Eingabefeld unten eingibst.\n\n- Die Eingabe muss im Format B11,c12,g4 ... erfolgen, Groß- und Klein-\n  schreibung und auch Reihenfolge der Eingabe sind egal und werden\n  automatisch erkannt, ebenso Leerzeichen.\n\n- Mit der mittleren MT kannst du das Spiel im Browser verschieben! \n\n- Starte das Spiel mit klick auf einen der Tabs. Viel Spass! :-)";

        /* Event listener + FUnktionen */

        /* Array für Screenshots */
        let screenshots = [];
        let currentScreenshotIndex = 0;

        /* UI bewegen*/
        let isDragging = false;
        let offsetX = 0, offsetY = 0;

        /* Stoppuhr */
        let startTime;

        function startTimer() {
            startTime = Date.now();
        }

        function endTimer() {
            const endTime = Date.now();
            const elapsedTime = (endTime - startTime) / 1000; // Zeit in Sekunden
            return elapsedTime;
        }

        /* Starte den Timer, wenn ein Button/Tab gedrückt wird */
        document.querySelector('.tab').addEventListener('click', startTimer);
        document.getElementById('ownGraph').addEventListener('click', startTimer);
        document.getElementById('tab1').addEventListener('click', startTimer);
        document.getElementById('RndNodes').addEventListener('click', startTimer);

        /* Starte den Timer, wenn nodeCount geändert wird */
        document.getElementById('nodeCount').addEventListener('change', startTimer);

        function formatTime(seconds) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = Math.floor(seconds % 60);

            const formattedHours = String(hours).padStart(2, '0');
            const formattedMinutes = String(minutes).padStart(2, '0');
            const formattedSeconds = String(remainingSeconds).padStart(2, '0');

            return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        }

        function saveGraph() {
            const graphData = {
                nodes: nodes.map(node => ({ x: node.x, y: node.y, label: node.label })),
                edges: Object.keys(weights).map(key => ({
                    nodes: key.split('-'),
                    weight: weights[key]

                })),
            };

            const graphName = prompt("Bitte gib einen Namen für die Datei ein:");
            if (graphName) {
                const json = JSON.stringify(graphData);
                const blob = new Blob([json], { type: 'application/json' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${graphName}.json`;
                a.click();
                URL.revokeObjectURL(url);
            }
        }

        /*** Dijkstra Algorithmus  */

        class PriorityQueue {
            constructor() {
                this.heap = [];
            }

            enqueue(node, distance) {
                const element = { node, distance };
                this.heap.push(element);
                this.heapifyUp();
            }

            dequeue() {
                const root = this.heap[0];
                if (this.heap.length > 1) {
                    this.heap[0] = this.heap.pop();
                    this.heapifyDown();
                } else {
                    this.heap.pop();
                }
                return root;
            }

            isEmpty() {
                return this.heap.length === 0;
            }

            heapifyUp() {
                let index = this.heap.length - 1;
                while (index > 0) {
                    const parentIndex = Math.floor((index - 1) / 2);
                    if (this.heap[index].distance < this.heap[parentIndex].distance) {
                        this.swap(index, parentIndex);
                        index = parentIndex;
                    } else {
                        break;
                    }
                }
            }

            heapifyDown() {
                let index = 0;
                while (index < this.heap.length) {
                    const leftChildIndex = 2 * index + 1;
                    const rightChildIndex = 2 * index + 2;
                    let smallestChildIndex = index;
                    if (leftChildIndex < this.heap.length &&
                        this.heap[leftChildIndex].distance < this.heap[smallestChildIndex].distance) {
                        smallestChildIndex = leftChildIndex;
                    }
                    if (rightChildIndex < this.heap.length &&
                        this.heap[rightChildIndex].distance < this.heap[smallestChildIndex].distance) {
                        smallestChildIndex = rightChildIndex;
                    }
                    if (smallestChildIndex !== index) {
                        this.swap(index, smallestChildIndex);
                        index = smallestChildIndex;
                    } else {
                        break;
                    }
                }
            }

            swap(index1, index2) {
                const temp = this.heap[index1];
                this.heap[index1] = this.heap[index2];
                this.heap[index2] = temp;
            }


            decreaseKey(node, newDistance) {
                let index = this.heap.findIndex(element => element.node === node);
                if (index === -1) return;
                this.heap[index].distance = newDistance;
                this.heapifyUp();
            }

            getQueueContents() {
                return this.heap.map(element => ({ node: element.node, distance: element.distance }));
            }
        }

        function dijkstra(nodes, startNode, selectedNodeCount) {
            let distances = {};
            const visited = {};
            const pq = new PriorityQueue();
            pqStates = {};
            shortestPaths = [];
            shortestPathDraw = [];
            for (let node in nodes) {
                if (node.charCodeAt(0) - 65 < selectedNodeCount) {
                    distances[node] = Infinity;
                    visited[node] = false;
                }
            }

            distances[startNode] = 0;
            visited[startNode] = false;
            pq.enqueue(startNode, 0);


            while (!pq.isEmpty()) {

                let { node, distance } = pq.dequeue();

                for (let neighbor in nodes[node]) {
                    if (neighbor.charCodeAt(0) - 65 < selectedNodeCount) {
                        let newDistance = distance + nodes[node][neighbor];
                        if (!visited[neighbor] && newDistance < distances[neighbor]) {
                            distances[neighbor] = newDistance;
                            if (pq.heap.some(element => element.node === neighbor)) {
                                pq.decreaseKey(neighbor, newDistance);
                            } else {
                                pq.enqueue(neighbor, newDistance);
                            }
                        }
                    }
                }

                pq.heap.sort((a, b) => {
                    if (a.distance !== b.distance) {
                        return a.distance - b.distance;
                    }
                    return a.node.localeCompare(b.node);
                });


                visited[node] = true;

                shortestPaths.push({ node, distance, pq: [...pq.heap] });
                pqStates[node] = pq.getQueueContents();
                path = [];

                let currentNode = node;

                while (currentNode !== startNode) {
                    path.unshift({ node: currentNode, distance: distances[currentNode] });
                    currentNode = Object.keys(nodes[currentNode]).find(neighbor =>
                        distances[currentNode] - nodes[currentNode][neighbor] === distances[neighbor]
                    );

                    if (!currentNode) {
                        break;
                    }
                }

                path.unshift({ node: startNode, distance: 0 });
                shortestPathDraw.push(path);
            }

        }

        /*** Graph / UI / Canvas / Zeichenfunktionen */

        function showTab(tabName) {
            var i, tabcontent;
            tabcontent = document.getElementsByClassName("tabContent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            document.getElementById(tabName).style.display = "block";
        }

        function drawNode(node, color, label) {
            let position = nodes[node];
            if (!position) return;
            ctx.beginPath();
            ctx.arc(position.x, position.y, 32, 0, 2 * Math.PI, false);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.stroke();
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(label, position.x, position.y);
        }

        function drawConnection(node1, node2, color, thickness) {
            if (tab3.active) return;
            if (tab2.active) return;

            const position1 = nodes[node1];
            const position2 = nodes[node2];
            const directionX = position2.x - position1.x;
            const directionY = position2.y - position1.y;
            const distance = Math.sqrt(directionX * directionX + directionY * directionY);
            const unitDirectionX = directionX / distance;
            const unitDirectionY = directionY / distance;

            /** Knotenränder verbundener Knoten */
            const radius = 32;
            const borderPosition1 = {
                x: position1.x + unitDirectionX * radius,
                y: position1.y + unitDirectionY * radius
            };
            const borderPosition2 = {
                x: position2.x - unitDirectionX * radius,
                y: position2.y - unitDirectionY * radius
            };

            ctx.beginPath();
            ctx.moveTo(borderPosition1.x, borderPosition1.y);
            ctx.lineTo(borderPosition2.x, borderPosition2.y);
            ctx.strokeStyle = color;
            ctx.lineWidth = thickness;
            ctx.stroke();
        }
        /** Zeichnet das Gewicht einer Kante zwischen zwei Knoten */
        function drawWeight(node1, node2, weight) {
            const { x: x1, y: y1 } = nodes[node1];
            const { x: x2, y: y2 } = nodes[node2];
            const midX = ({ x: x1, y: y1 }.x + { x: x2, y: y2 }.x) / 2;
            const midY = ({ x: x1, y: y1 }.y + { x: x2, y: y2 }.y) / 2;
            /** Berechne die Orientierung der Kante */
            const horizontal = Math.abs(x1 - x2) > Math.abs(y1 - y2);

            ctx.fillStyle = 'black';
            ctx.font = '28px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            if (horizontal) {
                /** Für eher horizontale Kanten, leicht über der Kante zeichnen */
                ctx.fillText(weight, midX, midY - 14);
            } else {
                /** Für eher vertikale Kanten, links von der Kante zeichnen */
                ctx.fillText(weight, midX - 14, midY);
            }
        }
        /** Fkt modifiziert um Dopllungen und Konsistenz  */
        function drawGraph(selectedNodeCount) {
            let drawnEdges = {};
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            edges.forEach(edge => {
                if (edge.from.charCodeAt(0) - 65 < selectedNodeCount && edge.to.charCodeAt(0) - 65 < selectedNodeCount) {
                    let sortedEdge = [edge.from, edge.to].sort().join('-');
                    if (!drawnEdges[sortedEdge]) {
                        drawConnection(edge.from, edge.to, '#8a8a8a', 1);
                        drawWeight(edge.from, edge.to, edge.weight);
                        drawnEdges[sortedEdge] = true;
                    }
                }
            });

            /** Zeichnet Knoten von ASCII 65 (A) an bis selectedNodeCount */
            Object.keys(nodes).forEach(node => {
                if (node.charCodeAt(0) - 65 < selectedNodeCount) {
                    drawNode(node, 'white', node);
                }
            });
        }

        /** Führt Knoten und Kanten in ein gemeinsames globales Array zusammen */
        function createGraph() {
            const selectedNodeCount = parseInt(document.getElementById('nodeCount').value, 10);
            graph = {};
            for (const node of Object.keys(nodes)) {
                if (node.charCodeAt(0) - 65 < selectedNodeCount) {
                    graph[node] = {};

                    for (const edge of edges) {
                        if (node === edge.from && edge.to.charCodeAt(0) - 65 < selectedNodeCount) {
                            graph[node][edge.to] = edge.weight;
                            if (!graph[edge.to]) {
                                graph[edge.to] = {};
                            }
                        }
                    }
                }
            }
        }

        function updateGraph() {
            const selectedNodeCount = parseInt(document.getElementById('nodeCount').value, 10);
            const selectedConfiguration = graphConfigurations[selectedNodeCount];

            nodes = selectedConfiguration.nodes;
            edges = selectedConfiguration.edges;

            const weights = {};

            /** Zuweisung gleiche key und gleiche Werte Kanten zwischen 2 nodes */
            edges.forEach(edge => {
                let key = [edge.from, edge.to].sort().join('-');
                if (!weights[key]) {
                    weights[key] = Math.floor(Math.random() * 12) + 1;
                }

                edge.weight = weights[key];

            });

            drawNode('A', 'lightgreen', 'A(0)');
            drawGraph(selectedNodeCount);
            createGraph(selectedNodeCount);
            drawNeighbors('A');
        }

        /** Ausgabe benötigte Zeit */
        function drawMessage(message, color, fontSize = 28) {
            ctx2.clearRect(0, 0, canvas.width, canvas.height);
            if (message === 'Glückwunsch! Dies war der letzte Knoten in der Priority Queue und du hast\nalle kürzesten Distanzen bestimmt!\n\nDijkstras Algorithmus wurde erfolgreich gelöst! :-)') {
                const elapsedTime = endTimer();
                const formattedTime = formatTime(elapsedTime);
                message += `\n\nBenötigte Zeit: ${formattedTime}\n\nMit PFEILTASTE Links und Rechts kannst du dir die einzelnen\nkürzesten Pfade noch einmal ansehen.`;
            }

            ctx2.fillStyle = color;
            ctx2.font = `${fontSize}px Arial`; // Verwende die übergebene Schriftgröße

            const lines = message.split('\n');
            let yOffset = 30;
            const lineHeight = fontSize + 6;

            lines.forEach((line) => {
                ctx2.fillText(line, 10, yOffset);
                yOffset += lineHeight;
            });
        }

        /** NK Vorgefertigter Graph */
        function drawNeighbors(node) {

            /** Initialisierung der NK zu A */
            if (node === 'A') {
                for (let nearNode of nearNodes) {
                    const label = graph[nearNode].label ? graph[nearNode].label : nearNode;
                    drawNode(nearNode, 'lightgray', label);
                }
            }

            /** zeichnet alte NK wieder weiß */
            for (let nearNode of nearNodes) {
                const label = graph[nearNode].label ? graph[nearNode].label : nearNode;
                drawNode(nearNode, 'white', label);
            }

            nearNodes = [];
            let neighborNodes = Object.keys(graph[node]);

            /** Schleife zum zeichnen der NK */
            for (let neighbor of neighborNodes) {
                const label = graph[neighbor].label ? graph[neighbor].label : neighbor;
                drawNode(neighbor, 'lightgray', label);
                nearNodes.push(neighbor);
            }
        }

        /** NK Zufälliger Graph */
        function drawRndNode(position, color, label) {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.arc(position.x, position.y, 30, 0, 2 * Math.PI, false);

            if (label === 'A') {
                ctx.fillStyle = 'lightgreen';
            } else {
                ctx.fillStyle = label === 'node' ? 'lightgrey' : color;
            }

            ctx.fill();
            ctx.lineWidth = 1;
            ctx.stroke();
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(label === 'A' ? 'A(0)' : label, position.x, position.y);
        }


        function drawRndNeighbors(currentNode, isStartNode = false) {

            /** A immer gruen und Startknoten */
            if (currentNode.node === 'A') {
                let startNode = nodes.find(n => n.label === 'A');
                if (startNode) {
                    drawRndNode({ x: startNode.x, y: startNode.y }, 'lightgreen', 'A');
                }
            } else {
                /** Zeichne den aktuellen Knoten weiß */
                drawRndNode({ x: currentNode.x, y: currentNode.y }, 'white', currentNode.node);
            }

            /** Reset vorherige NK */
            for (let nearNode of nearNodes) {
                let node = nodes.find(n => n.label === nearNode);
                if (node) {
                    drawRndNode({ x: node.x, y: node.y }, 'white', nearNode);
                }
            }

            nearNodes = [];

            /** NK aus graph des aktuellen Knotens und filtert alle K die nur undef. NK haben */
            let neighborNodes = Object.entries(graph[currentNode.node])
                .filter(([node, value]) => value !== undefined)
                .map(([node, value]) => node);

            /** Schelife zum zeichnen der NK */
            for (let neighbor of neighborNodes) {
                let node = nodes.find(n => n.label === neighbor);
                if (node) {
                    drawRndNode({ x: node.x, y: node.y }, 'lightgray', neighbor);
                    nearNodes.push(neighbor);
                }
            }

            if (!isStartNode) {
                drawRndShortestPath();
            }
        }

        /** NK Eigener Graph */
        function drawOwnNeighNode(x, y, label, color) {
            ctx.strokeStyle = 'black';
            ctx.beginPath();
            ctx.arc(x, y, 30, 0, 2 * Math.PI, false);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.stroke();
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(label, x, y);
        }

        function drawOwnNeighbors(currentNode) {
            const radius = 30;
            const nodeLabel = currentNode.node;

            /** Initialisierung der NK zu A */
            if (nodeLabel === 'A') {
                for (let nearNode of nearNodes) {
                    let node = nodes.find(n => n.label === nearNode);
                    if (node) {
                        drawOwnNeighNode(node.x, node.y, nearNode, 'lightgray');
                    }
                }
            }

            /** zeichnet alte NK wieder weiß */
            for (let nearNode of nearNodes) {
                let node = nodes.find(n => n.label === nearNode);
                if (node) {
                    drawOwnNeighNode(node.x, node.y, nearNode, 'white');
                }
            }

            nearNodes = [];
            let neighborNodes = graph[nodeLabel];
            /** Schleife zum zeichnen der NK */
            for (let neighbor in neighborNodes) {
                let node = nodes.find(n => n.label === neighbor);
                if (node) {
                    drawOwnNeighNode(node.x, node.y, neighbor, 'lightgray');
                    nearNodes.push(neighbor);

                    /** Zeichne die Verbindungslinie zwischen dem aktuellen Knoten und dem Nachbarknoten */
                    let currentNodeObj = nodes.find(n => n.label === nodeLabel);
                    let position1 = { x: currentNodeObj.x, y: currentNodeObj.y };
                    let position2 = { x: node.x, y: node.y };

                    /** Berechnet die Richtung und Distanz zwischen den Knoten */
                    const directionX = position2.x - position1.x;
                    const directionY = position2.y - position1.y;
                    const distance = Math.sqrt(directionX * directionX + directionY * directionY);
                    const unitDirectionX = directionX / distance;
                    const unitDirectionY = directionY / distance;

                    /** Berechnet die Positionen der Knotenränder */
                    const borderPosition1 = {
                        x: position1.x + unitDirectionX * radius,
                        y: position1.y + unitDirectionY * radius
                    };
                    const borderPosition2 = {
                        x: position2.x - unitDirectionX * radius,
                        y: position2.y - unitDirectionY * radius
                    };

                    /** Zeichnet die Linie zwischen den Knoten */
                    ctx.beginPath();
                    ctx.moveTo(borderPosition1.x, borderPosition1.y);
                    ctx.lineTo(borderPosition2.x, borderPosition2.y);
                    ctx.strokeStyle = 'black';
                    ctx.lineWidth = 1;
                    ctx.stroke();
                }
            }
        }

        /** Zeichnet den kürzesten Pfad vorgefertigt */
        function drawShortestPath() {
            if (currentPathIndex < shortestPathDraw.length) {
                let path = shortestPathDraw[currentPathIndex];

                /** Kanten Knoten kürzester Pfades zeichnen */
                for (let i = 0; i < path.length - 1; i++) {
                    const node1 = path[i].node;
                    const node2 = path[i + 1].node;
                    drawConnection(node1, node2, 'red', 3);

                    ctx.strokeStyle = 'black'; // Setze die Linienfarbe auf Schwarz zurück
                }

                if (path.length && path.slice(-1)[0].node) {
                    drawNeighbors(path.slice(-1)[0].node);
                }

                /** Alle bisher grün markierten Knoten und den aktuellen Pfad zeichnen */
                for (let i = 0; i <= currentPathIndex; i++) {
                    let currentPath = shortestPathDraw[i];
                    currentPath.forEach((pathNode, index) => {
                        let position = nodes[pathNode.node];
                        ctx.beginPath();
                        ctx.arc(position.x, position.y, 32, 0, 2 * Math.PI, false);

                        /* Helles Orange  */
                        if (i === currentPathIndex && index === currentPath.length - 1) {
                            ctx.fillStyle = '#FFD580';
                        } else {
                            ctx.fillStyle = 'lightgreen';
                        }

                        ctx.strokeStyle = 'red';
                        ctx.fill();
                        ctx.lineWidth = 1;
                        ctx.stroke();
                        ctx.fillStyle = 'black';
                        ctx.font = '25px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${pathNode.node}(${pathNode.distance})`, position.x, position.y);
                    });
                }
            }
        }

        function drawRndShortestPath() {
            if (currentPathIndex < shortestPathDraw.length) {
                const radius = 30;

                for (let idx = 0; idx <= currentPathIndex; idx++) {
                    let path = shortestPathDraw[idx];

                    for (let i = 0; i < path.length - 1; i++) {
                        let node1 = path[i].node;
                        let node2 = path[i + 1].node;
                        let pos1 = nodes.find(n => n.label === node1);
                        let pos2 = nodes.find(n => n.label === node2);

                        if (pos1 && pos2) {
                            const angle = Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
                            const startX = pos1.x + radius * Math.cos(angle);
                            const startY = pos1.y + radius * Math.sin(angle);
                            const endX = pos2.x - radius * Math.cos(angle);
                            const endY = pos2.y - radius * Math.sin(angle);

                            ctx.beginPath();
                            ctx.moveTo(startX, startY);
                            ctx.lineTo(endX, endY);
                            ctx.strokeStyle = 'red';
                            ctx.lineWidth = 3;
                            ctx.stroke();
                        }
                    }

                    path.forEach((pathNode, index) => {
                        let node = nodes.find(n => n.label === pathNode.node);

                        ctx.beginPath();
                        ctx.arc(node.x, node.y, 30, 0, 2 * Math.PI, false);

                        if (index === path.length - 1 && idx === currentPathIndex) {

                            ctx.fillStyle = '#FFD580';
                        } else {
                            ctx.fillStyle = 'lightgreen';
                        }

                        ctx.strokeStyle = 'red';
                        ctx.fill();
                        ctx.lineWidth = 1;
                        ctx.stroke();
                        ctx.fillStyle = 'black';
                        ctx.font = '23px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${pathNode.node}(${pathNode.distance})`, node.x, node.y);
                    });
                }
            }
        }

        function drawOwnShortestPath() {
            const radius = 30;
            if (currentPathIndex < shortestPathDraw.length) {
                let path = shortestPathDraw[currentPathIndex];

                /** Kanten Knoten kürzester Pfade */
                for (let i = 0; i < path.length - 1; i++) {
                    let node1Label = path[i].node;
                    let node2Label = path[i + 1].node;
                    let node1 = nodes.find(n => n.label === node1Label);
                    let node2 = nodes.find(n => n.label === node2Label);

                    if (node1 && node2) {
                        let position1 = { x: node1.x, y: node1.y };
                        let position2 = { x: node2.x, y: node2.y };

                        /** Berechnet die Richtung und Distanz zwischen den Knoten */
                        const directionX = position2.x - position1.x;
                        const directionY = position2.y - position1.y;
                        const distance = Math.sqrt(directionX * directionX + directionY * directionY);
                        const unitDirectionX = directionX / distance;
                        const unitDirectionY = directionY / distance;

                        /** Berechnet die Positionen der Knotenränder */
                        const borderPosition1 = {
                            x: position1.x + unitDirectionX * radius,
                            y: position1.y + unitDirectionY * radius
                        };
                        const borderPosition2 = {
                            x: position2.x - unitDirectionX * radius,
                            y: position2.y - unitDirectionY * radius
                        };

                        /** kürzeste Kante mit Knotenrand beachten */
                        ctx.beginPath();
                        ctx.moveTo(borderPosition1.x, borderPosition1.y);
                        ctx.lineTo(borderPosition2.x, borderPosition2.y);
                        ctx.strokeStyle = 'red';
                        ctx.lineWidth = 3;
                        ctx.stroke();
                    }
                }

                /** Zeichne aktuellen Knoten und die Nachbarknoten */
                let currentNode = path[path.length - 1];
                drawOwnNeighbors(currentNode);

                for (let i = 0; i <= currentPathIndex; i++) {
                    let currentPath = shortestPathDraw[i];
                    currentPath.forEach((pathNode, index) => {
                        let node = nodes.find(n => n.label === pathNode.node);
                        ctx.beginPath();
                        ctx.arc(node.x, node.y, 30, 0, 2 * Math.PI, false);

                        if (i === currentPathIndex && index === currentPath.length - 1) {
                            ctx.fillStyle = '#FFD580';
                        } else {
                            ctx.fillStyle = 'lightgreen';
                        }

                        ctx.strokeStyle = 'red';
                        ctx.fill();
                        ctx.lineWidth = 1;
                        ctx.stroke();
                        ctx.fillStyle = 'black';
                        ctx.font = '23px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${pathNode.node}(${pathNode.distance})`, node.x, node.y);
                    });
                }

            }
        }

        /** scrrenshots kürzeste Pfade durchschalten  */
        document.addEventListener('keydown', function (event) {
            if (algorithmCompleted) {
                if (event.key === 'ArrowLeft') {
                    if (currentScreenshotIndex > 0) {
                        currentScreenshotIndex--;
                        displayScreenshot();
                    }
                } else if (event.key === 'ArrowRight') {
                    if (currentScreenshotIndex < screenshots.length - 1) {
                        currentScreenshotIndex++;
                        displayScreenshot();
                    }
                }
            }
        });

        function displayScreenshot() {
            let screenshotImage = new Image();
            screenshotImage.onload = function () {
                ctx.clearRect(0, 0, canvas1.width, canvas1.height);
                ctx.drawImage(screenshotImage, 0, 0);
            };
            screenshotImage.src = screenshots[currentScreenshotIndex];
        }

        /*** Validierung */
        function validateInput() {
            if (algorithmCompleted) {
                return;
            }
            /** Index der PQStates über Schlüssel Methode Object */
            let sortedKeys = Object.keys(pqStates);

            if (currentIndex >= sortedKeys.length) {
                currentIndex = sortedKeys.indexOf('A');
            }

            let key = sortedKeys[currentIndex];
            let userInput, userEntries, expectedState;

            /** Canvas1 Screens nach jedem validateInp*/
            let screenshot = canvas.toDataURL();
            screenshots.push(screenshot);

            userInput = document.getElementById('inputf').value.toUpperCase().replace(/\s+/g, '');

            /** Eingabe User Formatierung */
            userEntries = userInput
                .toLowerCase()
                .replace(/\s+/g, '')
                .split(',')
                .sort()
                .join(',');

            expectedState = pqStates[key]
                .map(element => `${element.node.toLowerCase()}${element.distance}`)
                .sort()
                .join(',');

            if (userEntries === expectedState) {
                userInput = userInput.split(',')
                    .sort((a, b) => {
                        let numA = parseInt(a.slice(1));
                        let numB = parseInt(b.slice(1));

                        if (numA === numB) {
                            return a[0].localeCompare(b[0]);
                        }
                        return numA - numB;
                    }).join(',');


                let userInputArray = userInput.split(',');
                let formattedUserInput = userInputArray.map(element => {
                    let letter = element.charAt(0);
                    let number = element.slice(1);
                    return `${letter}(${number})`;
                }).join(',');

                /** Ausgabe Knoten(Kosten) und PQ in Tabelle */
                let shortestDistanceNode = userInputArray[0];
                let letter = shortestDistanceNode.charAt(0);
                let number = shortestDistanceNode.slice(1);
                let output = `${letter}(${number})`;

                document.getElementById('Element' + (currentIndex + 1)).value = output;
                document.getElementById('priorityQueue' + (currentIndex + 1)).value = formattedUserInput;

                /** Ausgabe eingefuegte udn akt. Knoten canvas2 */
                let previousState = currentIndex > 0 ? pqStates[sortedKeys[currentIndex - 1]] : [];
                let currentState = pqStates[key];

                let newNodes = currentState.filter(node => !previousState.some(prevNode => prevNode.node === node.node));
                let updatedNodes = currentState.filter(node => previousState.some(prevNode => prevNode.node === node.node && prevNode.distance !== node.distance));


                if (isOwnNodesNewActive) {
                    drawOwnShortestPath(shortestPathDraw[currentPathIndex]);
                } else if (isRndNodesActive) {
                    drawRndShortestPath(shortestPathDraw[currentPathIndex]);
                    let currentNode = shortestPaths[currentIndex + 1];
                    drawRndNeighbors(currentNode);
                } else {
                    drawShortestPath(shortestPathDraw[currentPathIndex]);
                }

                currentIndex++;
                currentPathIndex++;

                /** letzte Element PQ Ausgabe Abbruchbed. */
                if (currentIndex === sortedKeys.length - 1) {
                    drawMessage('Glückwunsch! Dies war der letzte Knoten in der Priority Queue und du hast\nalle kürzesten Distanzen bestimmt!\n\nDijkstras Algorithmus wurde erfolgreich gelöst! :-)', 'green');
                    algorithmCompleted = true;

                    let finalScreenshot = canvas.toDataURL();
                    screenshots.push(finalScreenshot);

                    currentScreenshotIndex = screenshots.length - 1;

                } else {
                    /** AUsgabe canvas2 neu eingef. und akt. Knoten */
                    if (newNodes.length > 0 || updatedNodes.length > 0) {
                        let message = '';

                        if (newNodes.length > 0) {
                            message += "Neue Knoten:\n" + newNodes.map(node => `${node.node}(${node.distance})`).join(', ') + "\n\n";
                        }

                        if (updatedNodes.length > 0) {
                            message += "Aktualisierte Knoten:\n" + updatedNodes.map(node => `${node.node}(${node.distance})`).join(', ');
                        }

                        drawMessage(message, 'blue', 32);
                    } else {
                        drawMessage("Nur Ausgabe, kein Update!", 'blue', 32);
                    }

                    let remainingElements = formattedUserInput.split(',').slice(1);
                    let nextInput = remainingElements.map(element => element.replace(/\(|\)/g, '')).join(',');

                    document.getElementById('inputf').value = nextInput;
                }

                /** ROutine für zusätzliche Tabellenzeilen */
                if (document.getElementById('Element21').value !== '' && !document.getElementById('Element22')) {

                    let table = document.getElementById('distanceTable');

                    /** 5 zusätzliche Zeilen */
                    for (let i = 22; i <= 26; i++) {
                        let newRow = table.insertRow();
                        let cell1 = newRow.insertCell();
                        let cell2 = newRow.insertCell();

                        cell1.innerHTML = `<input type="text" id="Element${i}" placeholder="...">`;
                        cell2.innerHTML = `<input type="text" id="priorityQueue${i + 1}" placeholder="...">`;
                    }
                }
            } else {
                drawMessage('Die Eingabe ist nicht korrekt!\nDu kannst dir per "Hilf mir" Button die korrekte Antwort anzeigen lassen!\n\nDies geht aber nur 3 mal pro Spiel!\nBitte versuche es noch einmal!', 'red');
            }
        }

        function showExpectedState() {
            event.stopPropagation();

            if (showExpectedStateCount >= 3) {
                const message = "Alle Hilfen wurden aufgebraucht. Versuche es nun selbst!";
                drawMessage(message, 'red');
                return;
            }

            let remainingUses = 3 - showExpectedStateCount;

            let sortedKeys = Object.keys(pqStates);
            if (currentIndex >= sortedKeys.length) {
                currentIndex = sortedKeys.indexOf('A');
            }

            let key = sortedKeys[currentIndex];
            let expectedState = pqStates[key]
                .map(element => `${element.node}${element.distance}`)
                .sort()
                .join(', ');

            if (expectedState === lastExpectedState) {
                const message = `Der erwartete Zustand wurde bereits angezeigt für Knoten ${key} mit:\n\n ${expectedState}!`;
                drawMessage(message, 'red');
                return;
            }

            const message = `Die P.Q. für Knoten ${key} lautet: ${expectedState} \n\nVerbleibende Nutzungen: ${remainingUses - 1}`;

            if (remainingUses === 0) {
                message += `\nAlle Hilfen wurden aufgebraucht.\n\n Knoten ${key} mit:\n\n ${expectedState}!`;
            }

            drawMessage(message, 'red');
            showExpectedStateCount++;
            lastExpectedState = expectedState;
        }

        /*** Event listener der 3 Spielmodi */

        /** Event UI im Webbrowser bewegen */
        canvasContainer.addEventListener('mousedown', (e) => {
            if (e.button === 1) { // Mittlere Maustaste
                isDragging = true;
                offsetX = e.clientX - canvasContainer.offsetLeft;
                offsetY = e.clientY - canvasContainer.offsetTop;
                canvasContainer.classList.add('dragging'); // Cursor ändern
            }
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                canvasContainer.style.left = (e.clientX - offsetX) + 'px';
                canvasContainer.style.top = (e.clientY - offsetY) + 'px';
            }
        });

        document.addEventListener('mouseup', () => {
            if (isDragging) {
                isDragging = false;
                canvasContainer.classList.remove('dragging'); // Cursor zurücksetzen
            }
        });

        /** Enter Taste */
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Enter') {
                if (document.getElementById('inputf') === document.activeElement) {
                    validateInput();
                }
            }
        });

        /*** Event Auswahl Knotenanzahl */
        document.getElementById('nodeCount').addEventListener('change', function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

            /** Leeren aller Eingabefelder */
            document.querySelectorAll('input[placeholder]').forEach(input => {
                input.value = '';
            });
            const selectedNodeCount = parseInt(document.getElementById('nodeCount').value, 10);

            isRndNodesActive = false;
            isOwnNodesNewActive = false;

            const messages = {
                7: "Im Modus 'Vorgefertigte Graphen' sind Knoten und Kanten vorgegeben\nund nur die Distanz der Kanten werden zufällig zwischen 1 und 12 verteilt.\n\n Unter dem Eingabefeld siehst du von links nach rechts:\n\n- Dropdwon-Menü: Hier kannst du die Anzahl der dargestellten Knoten\n  festlegen. Natürlich steigt die Schwierigkeit je mehr Knoten/Kanten.\n\n- Hilf mir: Zeigt die erwartete Priority Queue für den nächsten Knoten an.\n\n- Hauptmenü: Setzt das Spiel komplett zurück!\n\n Viel Spass :-)",
                8: "Mit 8 Knoten wird es schon etwas anspruchsvoller, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                9: "Mit 9 Knoten wird es schon etwas anspruchsvoller, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                10: "Mit 10 Knoten wird es schon etwas anspruchsvoller, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                11: "Mit 11 Knoten wird es schon etwas anspruchsvoller, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                12: "Mit  12 Knoten ist es schon eine echte Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                13: "Mit  13 Knoten ist es schon eine echte  Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                14: "Mit  14 Knoten ist es schon eine echte Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                15: "Mit 15 Knoten ist es schon eine große Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                16: "Mit 16 Knoten ist es schon eine große Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                17: "Mit 17 Knoten ist es schon eine große Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)",
                18: "Mit 18 Knoten ist es nun die größte Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)\n\n P.S Auf der Github Seite https://github.com/BrowserGameDijkstra findet ihr\n\n den Quellcode der Applikation samt zusätzlicher Inhalte ;-) ",
                19: "Mit 19 Knoten ist es nun die größte Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)\n\n P.S Auf der Github Seite https://github.com/BrowserGameDijkstra findet ihr\n\n den Quellcode der Applikation samt zusätzlicher Inhalte ;-) ",
                20: "Mit 20 Knoten ist es nun die größte Herausforderung, aber keine Angst,\nDijkstras Algorithmus ist lösbar und du wirst es schaffen!\n\nViel Spass und gutes Gelingen :-)\n\n P.S Auf der Github Seite https://github.com/BrowserGameDijkstra findet ihr\n\n den Quellcode der Applikation samt zusätzlicher Inhalte ;-) ",
            };

            /** Zeigt die entsprechende Nachricht an */
            drawMessage(messages[selectedNodeCount], "black");

            showExpectedStateCount = 0;
            currentIndex = 0;
            currentPathIndex = 1;
            weights = {};
            graph = {};
            let currentNode = 'A';
            const startNode = 'A';


            updateGraph(selectedNodeCount);
            drawNode('A', 'lightgreen', 'A(0)');
            dijkstra(graph, 'A', selectedNodeCount);

            algorithmCompleted = false;
        });

        /*** Zufällige Graphen Event */
        document.getElementById('RndNodes').addEventListener('click', function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

            /** Leeren aller Eingabefelder */
            document.querySelectorAll('input[placeholder]').forEach(input => {
                input.value = '';
            });

            isOwnNodesNewActive = false;
            isRndNodesActive = true;

            const textRndNode = "In diesem Modus wird ein zufälliger Graph mit 9 bis 25 Knoten erzeugt.\n\nWenn dir der Graph nicht gefällt, kannst du durch erneuten click auf das\nTab 'Zufällige Graphen' immer wieder neue, zufällige Graphen erzeugen!\n\nHilf mir/Hauptmenü: Wie gehabt Anzeige der nächsten erwarteten Eingabe\nbzw. zurück ins Hauptmenü.\n\n - Speichern des zufällig erzeugten Graphen! \n\n - Laden der Datei geht über den Modus 'Gestalte eigene Graphen'! \n\nViel Spass beim austüfteln der Priority Queue :-)\n\n";
            drawMessage(textRndNode, "black");

            /**      Setup Routine zur Erstellung zufälliger Graphen      */

            const fieldWidth = canvas.width / 6;
            const fieldHeight = canvas.height / 6;

            /* Startknoten für den Algo */
            const startNode = 'A';

            /* ID Start der Schnittpunkte + Array Schnittp. */
            let id = 0;
            let intersections = [];

            /* rücksetzen Validierung */
            let selectedNode = null;
            let secondSelectedNode = null;

            showExpectedStateCount = 0;
            currentIndex = 0;
            currentPathIndex = 1;
            let removedLabels = [];
            nodes = [];
            weights = {};
            graph = {};

            /* Basis IDs */
            const baseNodes = [
                { id: 22 },
                { id: 23 },
                { id: 24 },
                { id: 25 },
                { id: 16 },
                { id: 17 },
                { id: 30 },
                { id: 31 },
            ];

            nodes = [...baseNodes];
            /* Basis Labels */
            let baseLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];

            /** Zufällige Anzahl zusätzlicher Knoten 1 bis 17 */
            let additionalNodeCount = Math.floor(Math.random() * 17) + 1;
            let additionalLabels = ['I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y'];
            const selectedNodeCount = baseNodes.length + additionalNodeCount;

            /* Zeichnen der horizontalen und vertikalen Linien */
            for (let i = 0; i <= 6; i++) {
                for (let j = 0; j <= 6; j++) {

                    // zeichnen h/v Schnittgeraden
                    /*
                                        ctx.beginPath();
                                        ctx.moveTo(j * fieldWidth, 0);
                                        ctx.lineTo(j * fieldWidth, canvas.height);
                                        ctx.stroke();
                    
                                        ctx.beginPath();
                                        ctx.moveTo(0, i * fieldHeight);
                                        ctx.lineTo(canvas.width, i * fieldHeight);
                                        ctx.stroke();
                    */

                    /* Schnittpunkt-IDs nur bei tatsächlichen Schnittpunkten zeichnen */
                    if (i < 6 && j < 7) {
                        {/* zeichnen Schnittp Ids */
                            /* ctx.fillText(id.toString(), j * fieldWidth + 10, i * fieldHeight + 15); */
                            intersections.push({ x: j * fieldWidth, y: i * fieldHeight, id });
                            id++;
                        }
                    }
                }
            }

            /** Label der Basis nodes zufällig auf Basis IDs verteilen*/
            for (let i = 0; i < baseNodes.length; i++) {
                let randomIndex = Math.floor(Math.random() * baseLabels.length);
                let label = baseLabels[randomIndex];

                removedLabels.push(baseLabels.splice(randomIndex, 1)[0]);
                baseNodes[i].label = label;

                let intersection = intersections.find(inter => inter.id === baseNodes[i].id);

                if (intersection) {
                    drawNode(intersection, 'white', baseNodes[i].label);
                }
            }

            /** Entfernte Labels wieder zu baseLabels hinzufügen */
            baseLabels.push(...removedLabels);

            /** Zufällige Anzahl zusätzlicher Knoten und deren Verteilung auf zugewiesene Schnittpunkte */
            if (additionalNodeCount <= 3) {
                additionalNodeIds = [15, 18, 19].slice(0, additionalNodeCount);
            } else if (additionalNodeCount <= 6) {
                additionalNodeIds = [15, 18, 19, 29, 32, 33].slice(0, additionalNodeCount);
            } else if (additionalNodeCount <= 10) {
                additionalNodeIds = [15, 18, 19, 26, 29, 32, 33, 8, 9, 10, 11, 12].slice(0, additionalNodeCount);
            } else {
                additionalNodeIds = [15, 18, 19, 26, 29, 32, 33, 8, 9, 10, 11, 12, 36, 37, 38, 39, 40].slice(0, additionalNodeCount);
            }

            /** Methode Erstellung nodes array für zusätliche Knoten{ id: 22, label: 'F' } */
            for (let i = 0; i < additionalNodeCount; i++) {
                nodeId = additionalNodeIds[i];
                label = additionalLabels[i];
                nodes.push({ id: nodeId, label });
            }

            /** Zeichnen der Knoten */
            nodes.forEach(node => {
                const intersection = intersections.find(inter => inter.id === node.id);
                if (intersection) {
                    drawNode(intersection, 'white', node.label);
                }
            });

            /** Buchstaben den zusätzlichen Knoten in alphabetischer Reihenfolge zuweisen */
            for (let i = 0; i < additionalNodeCount; i++) {
                label = additionalLabels[i];
                let intersection = intersections.find(inter => inter.id === additionalNodeIds[i]);
                if (intersection) {
                    drawNode(intersection, 'white', label);
                }
            }

            /** Füge die x- und y-Koordinaten zu den Knoten im nodes Array hinzu */
            nodes.forEach(node => {
                const intersection = intersections.find(inter => inter.id === node.id);
                if (intersection) {
                    node.x = intersection.x;
                    node.y = intersection.y;
                }
            });

            function drawNode(position, color, label) {
                ctx.beginPath();
                ctx.strokeStyle = 'black';
                ctx.arc(position.x, position.y, 30, 0, 2 * Math.PI, false);
                ctx.fillStyle = label === 'A' ? 'lightgreen' : color;
                ctx.fill();
                ctx.lineWidth = 1;
                ctx.stroke();
                ctx.fillStyle = 'black';
                ctx.font = '25px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(label === 'A' ? 'A(0)' : label, position.x, position.y);
            }

            /** Nachbarn für zufällige Knoten */
            function getNeighbors(id) {
                /* array nachbarknoten */
                let neighbors = [];

                /* array Richtungen mit Knoten */
                let directions = [
                    { dx: 0, dy: -1 }, // oben
                    { dx: 0, dy: 1 },  // unten
                    { dx: -1, dy: 0 }, // links
                    { dx: 1, dy: 0 },  // rechts
                    // { dx: -1, dy: 1 } // unten links
                    { dx: 1, dy: 1 } // unten rechts
                ];

                /** finde Schnittpunkt für id mit Knoten */
                let pos = intersections.find(inter => inter.id === id);

                /** verknüpft Richtungen mit Nachbarn mit id */
                directions.forEach(dir => {
                    const neighbor = intersections.find(inter =>
                        inter.x === pos.x + dir.dx * fieldWidth &&
                        inter.y === pos.y + dir.dy * fieldHeight
                    );

                    /** wenn Nachbar gefunden nodes array und nicht schon im array, dann hinzufügen neighbor.id */
                    if (neighbor && nodes.some(node => node.id === neighbor.id)) {
                        neighbors.push(neighbor.id);
                    }
                });

                /** wenn kein Nachbar gefunden, dann alle Knoten durchgehen und Nachbarn hinzufügen */
                if (neighbors.length === 0) {
                    nodes.forEach(node => {
                        if (node.id !== id && !neighbors.includes(node.id)) {
                            neighbors.push(node.id);

                        }
                    });
                } else {

                }

                return neighbors;
            }

            /** Kanten, Gewicht zeichnen + graph Erzeugung */
            function drawEdges() {
                const radius = 28;
                let visited = {};

                /** Anzahl entfernter Kanten basierend auf der Anzahl der Knoten */
                if (nodes.length < 10) {
                    edgesToRemove = 4;
                } else if (nodes.length < 15) {
                    edgesToRemove = 8;
                } else if (nodes.length < 20) {
                    edgesToRemove = 10;
                } else {
                    edgesToRemove = 16;
                }

                /** Schlüsselpaare der entfernten Kanten zB B-G,D-H, ... */
                let edgesToRemoveSet = new Set();

                /** neuer graph anhand NachbarId, Schlüsselzuweisung Knoten-Nachbarpaare und Distanz neu zuweisen */
                nodes.forEach(node => {
                    graph[node.label] = {};
                    let neighbors = getNeighbors(node.id);
                    neighbors.forEach(neighborId => {
                        let neighbor = nodes.find(n => n.id === neighborId);
                        if (neighbor) {

                            const key = `${node.id}-${neighborId}`;
                            const weight = weights[`${node.id}-${neighborId}`] || weights[`${neighborId}-${node.id}`];
                            graph[node.label][neighbor.label] = weight;

                        }
                    });
                });

                /** Ermittlung und Erstellung Labels der Nachbarn über iterieren von nodes */
                nodes.forEach(node => {
                    let neighbors = getNeighbors(node.id);
                    let neighborLabels = neighbors.map(neighborId => {
                        let neighbor = nodes.find(n => n.id === neighborId);
                        return neighbor ? neighbor.label : '';
                    }).filter(label => label !== '');

                    /** Schleife die zufälligen Knoten aus nodes auswählt und Nachbarn ermittelt und entsprechend Anzahl löscht. array neighbors  > Zuweisung Schlüssel > graph > zufälliger Knoten > Label : wenn noch nicht edgesToRemoveSet, wird key hinzugefügt */
                    while (edgesToRemoveSet.size < edgesToRemove) {
                        let randomNode = nodes[Math.floor(Math.random() * nodes.length)];

                        /** Überspringen Startknoten A */
                        if (randomNode.label === 'A') {
                            continue;
                        }

                        let neighbors = Object.keys(graph[randomNode.label]);

                        /** XY-Koord ganze Zahlen */
                        nodes.forEach(node => {
                            node.x = Math.round(node.x);
                            node.y = Math.round(node.y);
                        });

                        /** Überprüfe die Anzahl der Nachbarn und entferne Kanten entsprechend */
                        if (neighbors.length > 3) {
                            let randomNeighbor = neighbors[Math.floor(Math.random() * neighbors.length)];
                            let key = randomNode.label < randomNeighbor ? `${randomNode.label}-${randomNeighbor}` : `${randomNeighbor}-${randomNode.label}`;
                            if (!edgesToRemoveSet.has(key)) {
                                edgesToRemoveSet.add(key);
                            }
                        } else if (neighbors.length > 2) {
                            let randomNeighbor = neighbors[Math.floor(Math.random() * neighbors.length)];
                            let key = randomNode.label < randomNeighbor ? `${randomNode.label}-${randomNeighbor}` : `${randomNeighbor}-${randomNode.label}`;
                            if (!edgesToRemoveSet.has(key)) {
                                edgesToRemoveSet.add(key);
                            }
                        } else if (neighbors.length > 1) {
                            let randomNeighbor = neighbors[Math.floor(Math.random() * neighbors.length)];
                            let key = randomNode.label < randomNeighbor ? `${randomNode.label}-${randomNeighbor}` : `${randomNeighbor}-${randomNode.label}`;
                            if (!edgesToRemoveSet.has(key)) {
                                edgesToRemoveSet.add(key);
                            }
                        } else if (neighbors.length === 0) {
                            /** Wenn ein Knoten mit 0 Nachbarn gefunden wird, gib das Ergebnis aus und beende die Schleife */
                            break;
                        }

                    }

                    neighbors.forEach(neighborId => {
                        let neighbor = nodes.find(n => n.id === neighborId);

                        if (neighbor) {
                            let pos1 = intersections.find(inter => inter.id === node.id);
                            let pos2 = intersections.find(inter => inter.id === neighborId);

                            /** Methode der horizontalen, vertikalen, diagonalen Kanten entsprechend angle/Position der Nachbarn */
                            if (pos1 && pos2) {
                                const angle = Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
                                const startX = pos1.x + radius * Math.cos(angle);
                                const startY = pos1.y + radius * Math.sin(angle);
                                const endX = pos2.x - radius * Math.cos(angle);
                                const endY = pos2.y - radius * Math.sin(angle);

                                /** Überprüfen, ob die Kante gelöscht werden soll */
                                let key = node.label < neighbor.label ? `${node.label}-${neighbor.label}` : `${neighbor.label}-${node.label}`;
                                if (!edgesToRemoveSet.has(key)) {
                                    if (!visited[node.label]) {
                                        ctx.beginPath();
                                        ctx.moveTo(startX, startY);
                                        ctx.lineTo(endX, endY);
                                        ctx.strokeStyle = 'black';
                                        ctx.lineWidth = 1;
                                        ctx.stroke();

                                        /** Schlüssel Nachbarknotenpaare zuweisung Distanz */
                                        if (!weights[key]) {
                                            weights[key] = Math.floor(Math.random() * 12) + 1;
                                        }

                                        /** Gewicht an der richtigen Position zeichnen */
                                        const midX = (startX + endX) / 2;
                                        const midY = (startY + endY) / 2;
                                        const weightText = weights[key].toString();

                                        ctx.font = '27px Arial';
                                        ctx.textBaseline = 'middle';

                                        if (Math.abs(startX - endX) > Math.abs(startY - endY)) {
                                            /** Horizontale Kante */
                                            ctx.textAlign = 'center';
                                            ctx.fillText(weightText, midX, midY - 12); // Über der Kante
                                        } else {
                                            /** Vertikale Kante */
                                            ctx.textAlign = 'right';
                                            ctx.fillText(weightText, midX - 12, midY); // Links neben der Kante
                                        }

                                        /** Distanz zum graph-Objekt (Adjazenzliste) hinzufügen und per key abrufbar */
                                        graph[node.label][neighbor.label] = weights[key];
                                        graph[neighbor.label][node.label] = weights[key];

                                    } else {

                                        /** Kante aus dem graph-Objekt entfernen */
                                        delete graph[node.label][neighbor.label];
                                        delete graph[neighbor.label][node.label];

                                    }
                                }
                            }
                        }
                    })
                })
            }

            /** Neu Initialisierung samt Aufruf NK*/
            drawEdges();
            dijkstra(graph, 'A', selectedNodeCount)

            let currentNode;
            let startNodeRnd = Object.keys(graph).find(node => node === 'A');

            if (startNodeRnd) {
                currentNode = {
                    node: 'A',
                    distance: 0
                };
                drawRndNeighbors(currentNode, true);
            }

            algorithmCompleted = false;

        });


        /*** Event eigene Graphen */

        document.getElementById('OwnNodesNew').addEventListener('click', function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

            canvas.style.cursor = 'default';

            document.querySelectorAll('input[placeholder]').forEach(input => {
                input.value = '';
            });

            isRndNodesActive = false;
            isOwnNodesNewActive = true;
            algorithmCompleted = false;

            document.getElementById('ownGraph').classList.remove('disabled');
            document.getElementById('connectNodesButton').classList.remove('disabled');


            const textOwnNode = "In diesem Modus kannst du per click ins Feld Knoten A bis Z selber\nplatzieren. Hier noch einmal eine kurze Beschreibung der Buttons:\n\n- Knoten verbinden: Erstellt die Kanten zwischen den Knoten, indem immer\n  erst ein Startknoten, dann der Zielknoten Gecklickt wird.\n\n- Spiel beginnen: Wenn alle Knoten und Kanten wie gewünscht platziert\n  sind, startet der Button Spiel und Algorithmus.\n\n- Speichern / Laden: Selbst erstellte und zufällige Graphen\n\n können gespeichert und geladen werden im .json Format.";
            drawMessage(textOwnNode, "black");

            let selectedNode = null;
            let secondSelectedNode = null;
            nodes = [];
            weights = {};
            graph = {};
            let userNodeCount = 0;
            showExpectedStateCount = 0;
            currentIndex = 0;
            currentPathIndex = 1;
            let currentNode = 'A';

            /** verhindert mehrfaches aufrufen Laden Menue durch neu AUfruf Event eig. Graphen */
            if (!isLoadGraphInitialized) {
                document.getElementById('loadGraphButton').addEventListener('click', loadGraph);
                isLoadGraphInitialized = true;
            }


            function loadGraph() {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = '.json';

                input.onchange = function () {
                    const file = input.files[0];
                    const reader = new FileReader();

                    nodes.length = 0;
                    weights = {};
                    showExpectedStateCount = 0;
                    currentIndex = 0;
                    currentPathIndex = 1;
                    graph = {};

                    reader.onload = function (e) {
                        startTimer();
                        const graphData = JSON.parse(e.target.result);

                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

                        document.querySelectorAll('input[placeholder]').forEach(input => {
                            input.value = '';
                        });

                        /** Rekonstruktion des Graphen aus den geladenen Daten */
                        graphData.nodes.forEach(node => {
                            nodes.push({ x: node.x, y: node.y, label: node.label });
                            drawOwnNode(node.x, node.y, node.label, 'white');
                        });

                        graphData.edges.forEach(edge => {
                            const nodeLabel1 = edge.nodes[0];
                            const nodeLabel2 = edge.nodes[1];
                            weights[[nodeLabel1, nodeLabel2].sort().join('-')] = edge.weight;
                            drawOwnConnection(nodeLabel1, nodeLabel2, 'black', edge.weight);

                            /** Aktualisiere das graph-Objekt */
                            if (!graph[nodeLabel1]) graph[nodeLabel1] = {};
                            if (!graph[nodeLabel2]) graph[nodeLabel2] = {};
                            graph[nodeLabel1][nodeLabel2] = edge.weight;
                            graph[nodeLabel2][nodeLabel1] = edge.weight;
                        });

                        const selectedNodeCount = nodes.length;
                        const graphName = file.name.split('.')[0];
                        const textLoadGraph = ` Graph   * ${graphName} *     erfolgreich geladen!\n\n Du kannst loslegen!\n\n Viel Spass! :-)`;
                        canvas.style.cursor = 'pointer';

                        document.querySelectorAll('input[placeholder]').forEach(input => {
                            input.value = '';
                        });

                        drawMessage(textLoadGraph, "black");

                        /** Routine zur NK Bestimmung nach Laden eines Graphen */
                        const startNode = nodes.find(n => n.label === 'A');
                        if (startNode) {
                            if (isRndNodesActive) {
                                drawRndNeighbors({ node: 'A', x: startNode.x, y: startNode.y }, true);
                            } else if (isOwnNodesNewActive) {
                                drawOwnNeighbors({ node: 'A' });
                            }
                        }
                        dijkstra(graph, 'A', selectedNodeCount);

                        nodes.forEach(node => {
                            if (node.label === 'A') {
                                drawOwnNode(node.x, node.y, 'A(0)', 'lightgreen');
                            }
                        });

                        document.getElementById('ownGraph').classList.add('disabled');
                        document.getElementById('connectNodesButton').classList.add('disabled');

                        canvas.removeEventListener('click', selectNode);
                        canvas.removeEventListener('click', handleCanvasClick);

                        algorithmCompleted = false;
                    };
                    reader.readAsText(file);
                };
                input.click();
            }

            /*** Event Spiel beginnen eig. gRaphen */

            document.getElementById('ownGraph').addEventListener('click', function () {

                const selectedNodeCount = userNodeCount;

                const textOwnGraph = "Ok, der Algorithmus hat für den von dir erstellten Graphen die kürzesten\nDistanzen zum Startknoten A bestimmt und du kannst nun loslegen!\n\nViel Spass! :-)";
                canvas.style.cursor = 'pointer';
                document.querySelectorAll('input[placeholder]').forEach(input => {
                    input.value = '';
                });

                /** Routine ob 2 Knoten bereits gesetzt */
                let connectedNodes = 0;
                let startNodeConnected = false;
                nodes.forEach(node => {
                    if (graph[node.label] && Object.keys(graph[node.label]).length > 0) {
                        connectedNodes++;
                        if (node.label === 'A') {
                            startNodeConnected = true;
                        }
                    }
                });

                if (connectedNodes < 2 || !startNodeConnected) {
                    drawMessage("Es müssen mindestens zwei Knoten inklusive Startknoten verbunden\nsein um das Spiel zu starten!", 'red');
                    return;
                }

                drawMessage(textOwnGraph, "black");

                nodes.forEach(node => {
                    drawOwnNode(node.x, node.y, node.label === 'A' ? 'A(0)' : node.label, node.label === 'A' ? 'lightgreen' : 'white');
                });

                dijkstra(graph, 'A', selectedNodeCount);
                drawOwnNeighbors({ node: 'A' });

                /** Deaktiviert die Bedienelemente für eigene Graphen */
                this.classList.add('disabled');
                document.getElementById('connectNodesButton').classList.add('disabled');
                canvas.removeEventListener('click', selectNode);
                canvas.removeEventListener('click', handleCanvasClick);
            });

            function drawOwnNode(x, y, label, color) {
                ctx.strokeStyle = 'black';
                ctx.beginPath();
                ctx.arc(x, y, 30, 0, 2 * Math.PI, false);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.lineWidth = 1;
                ctx.stroke();
                ctx.fillStyle = 'black';
                ctx.font = '26px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(label, x, y);
            }

            /** Event Listener Knoten in canvas */
            canvas.addEventListener('click', handleCanvasClick);

            function handleCanvasClick(event) {
                ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

                if (currentNode > 'Z') {
                    drawMessage("Maximale Anzahl an Knoten erreicht", "red");
                    return;
                }

                /** nodes-Array nur aus ganzen Zahlen besteht */
                nodes.forEach(node => {
                    node.x = Math.round(node.x);
                    node.y = Math.round(node.y);
                });

                const rect = canvas.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;

                nodes.push({ x, y, label: currentNode });

                if (currentNode === 'A') {
                    ctx.strokeStyle = 'black';
                    ctx.beginPath();
                    ctx.arc(x, y, 30, 0, 2 * Math.PI);
                    ctx.fillStyle = 'lightgreen';
                    ctx.fill();
                    ctx.lineWidth = 1;
                    ctx.stroke();
                    ctx.fillStyle = 'black';
                    ctx.font = '26px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('A(0)', x, y);
                    userNodeCount++;
                    drawMessage("Knoten A hinzugefügt", "black");
                } else {

                    drawOwnNode(x, y, currentNode, 'white');
                    userNodeCount++;
                    drawMessage("Knoten " + currentNode + " hinzugefügt. Wenn du alle Knoten platziert hast Klicke auf\n\n 'Knoten verbinden'\n\nund dann auf die Knoten die du verbinden möchtest!", "black");
                }
                currentNode = String.fromCharCode(currentNode.charCodeAt(0) + 1);
            }

            /** Eventlistener Kanten verbinden */
            document.getElementById('connectNodesButton').addEventListener('click', function () {
                canvas.removeEventListener('click', handleCanvasClick);
                canvas.removeEventListener('click', selectNode);
                canvas.style.cursor = 'crosshair';
                selectedNode = null;
                secondSelectedNode = null;
                canvas.addEventListener('click', selectNode);
            });

            function selectNode(event) {

                /** nodes-Array nur aus ganzen Zahlen besteht */
                nodes.forEach(node => {
                    node.x = Math.round(node.x);
                    node.y = Math.round(node.y);
                });
                const rect = canvas.getBoundingClientRect();
                const clickX = event.clientX - rect.left;
                const clickY = event.clientY - rect.top;
                for (const node of nodes) {
                    const distance = Math.sqrt(Math.pow(clickX - node.x, 2) + Math.pow(clickY - node.y, 2));
                    if (distance <= 32) {
                        if (!selectedNode) {
                            selectedNode = node;
                            drawOwnNode(node.x, node.y, node.label, 'lightgray');
                            drawMessage("Verbinde 2 Knoten per Klick auf die jeweiligen Knoten!\n\nHast du alle deine Verbindungen nach Wunsch erstellt,\n\nKlicke auf 'Spiel beginnen'!", "black");
                        } else {
                            secondSelectedNode = node;
                            drawOwnConnection(selectedNode.label, node.label, 'black', 1);
                            drawOwnNode(selectedNode.x, selectedNode.y, selectedNode.label, 'white');
                            drawOwnNode(node.x, node.y, node.label, 'darkgray');
                            selectedNode = null;
                            secondSelectedNode = null;
                        }
                        break;
                    }
                }
            }

            function drawOwnConnection(nodeLabel1, nodeLabel2, color) {
                key = [nodeLabel1, nodeLabel2].sort().join('-');

                /** Überprüft, ob das Gewicht bereits im weights-Objekt vorhanden ist */
                if (!weights[key]) {

                    /** Prompt für die Eingabe des Kantengewichts durch den Benutzer */
                    let weight = parseInt(prompt(`Bitte gib einen Wert 1-15 für die Kante ${nodeLabel1}-${nodeLabel2} ein:`, ''));

                    /** Überprüft, ob das eingegebene Gewicht gültig ist */
                    while (isNaN(weight) || weight < 1 || weight > 15) {
                        weight = parseInt(prompt(`Ungültiger Wert. Bitte nur einen Wert zwischen 1 und 15 fuer ${nodeLabel1}-${nodeLabel2}:`, ''));
                    }
                    weights[key] = weight;
                }

                let weight = weights[key];

                /** Aktualisiert das graph-Array mit den Nachbarknoten und Gewichten */
                if (!graph[nodeLabel1]) {
                    graph[nodeLabel1] = {};
                }
                if (!graph[nodeLabel2]) {
                    graph[nodeLabel2] = {};
                }

                graph[nodeLabel1][nodeLabel2] = weight;
                graph[nodeLabel2][nodeLabel1] = weight;

                /** Findet die Knotenobjekte basierend auf den Labels */
                let node1 = nodes.find(node => node.label === nodeLabel1);
                let node2 = nodes.find(node => node.label === nodeLabel2);

                if (!node1 || !node2) return;

                let position1 = { x: node1.x, y: node1.y };
                let position2 = { x: node2.x, y: node2.y };

                /** Berechnet die Richtung und Distanz zwischen den Knoten */
                const directionX = position2.x - position1.x;
                const directionY = position2.y - position1.y;
                const distance = Math.sqrt(directionX * directionX + directionY * directionY);
                const unitDirectionX = directionX / distance;
                const unitDirectionY = directionY / distance;

                /** Berechnet die Positionen der Knotenränder */
                const radius = 30;
                const borderPosition1 = {
                    x: position1.x + unitDirectionX * radius,
                    y: position1.y + unitDirectionY * radius
                };
                const borderPosition2 = {
                    x: position2.x - unitDirectionX * radius,
                    y: position2.y - unitDirectionY * radius
                };

                /** Kanten zeichnen */
                ctx.beginPath();
                ctx.moveTo(borderPosition1.x, borderPosition1.y);
                ctx.lineTo(borderPosition2.x, borderPosition2.y);
                ctx.strokeStyle = color;
                ctx.lineWidth = 1;
                ctx.stroke();

                /** Beschriftung der Kante mit dem Gewicht */
                const midPointX = (borderPosition1.x + borderPosition2.x) / 2;
                const midPointY = (borderPosition1.y + borderPosition2.y) / 2;

                /** Berechnet die Versetzung basierend auf der Orientierung der Kante */
                const offset = 16;  // Die Höhe des Versatzes
                let labelX = midPointX;
                let labelY = midPointY;

                if (Math.abs(directionX) > Math.abs(directionY)) {

                    /* Eher horizontale Kante */
                    labelY -= offset;
                } else {
                    /* Eher vertikale Kante */
                    labelX -= offset;
                }

                ctx.strokeStyle = 'black';
                ctx.fillStyle = 'black';
                ctx.font = '27px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(weight.toString(), labelX, labelY);
            }
        })

        /*** Neu Initialisieren Vorgefertigte Graphen  */
        function resetGraph() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

            const selectedNodeCount = parseInt(document.getElementById('nodeCount').value, 10);

            isRndNodesActive = false;
            isOwnNodesNewActive = false;
            algorithmCompleted = false;

            document.querySelectorAll('input[placeholder]').forEach(input => {
                input.value = '';
            });

            const textReset = "Im Modus 'Vorgefertigte Graphen' sind Knoten und Kanten vorgegeben\nund nur die Distanz der Kanten werden zufällig zwischen 1 und 12 verteilt.\n\n Unter dem Eingabefeld siehst du von links nach rechts: \n\n - Dropdwon - Menü: Hier kannst du die Anzahl der dargestellten Knoten\n  festlegen.Natürlich steigt die Schwierigkeit je mehr Knoten / Kanten.\n\n - Hilf mir: Zeigt die erwartete Priority Queue für den nächsten Knoten an.\n\n - Hauptmenü: Setzt das Spiel komplett zurück!\n\n Viel Spass: -)";
            drawMessage(textReset, "black");

            nodes = [];
            weights = {};
            graph = {};
            pqStates = {};
            nearNodes = [];
            let userNodeCount = 0;
            showExpectedStateCount = 0;
            currentIndex = 0;
            currentPathIndex = 1;

            updateGraph(selectedNodeCount);
            drawNode('A', 'lightgreen', 'A(0)');

            /** Sicherstellen, dass graph[node] für jeden Knoten existiert */
            Object.keys(graph).forEach(node => {
                if (!graph[node]) graph[node] = {};
            });

            dijkstra(graph, 'A', selectedNodeCount);

        }

        /** Hauptmenue Event */
        function reloadPage() {
            location.reload();
        }

        drawMessage(textStart, "black");

    </script>
</body>

</html>