====== Die Raster-Klasse ====== Download: {{lehrkraefte:blc:informatik:ffprg1-2024:raster-minimal.zip}}. **Achtung** Das zip-Archiv muss entpackt werden, bevor damit gearbeitet wird. Wenn nicht 100% klar ist, was damit gemeint ist, unbedingt nachfragen. You have been warned! Die Rasterklasse beinhaltet: * Eine HTML-Datei mit einigen HTML-Elementen, die mit bestimmten Klassen und/oder IDs versehen sind. * Eine CSS-Datei, die das Layout definiert * Eine JS-Datei, die das Raster als Objekt initialisiert und womit dann interagiert werden kann. ===== Wichtigste HTML-Elemente ===== Folgende Elemente werden erwartet:

Wobei die ''div''s mit Klasse ''menu'' je nach Fensterverhältnis darüber und darunter, oder links und rechts angegezeigt werden und für Kontroll-Elemente gedacht sind. Das ''div'' mit id ''gridcontainer'' wird von der ''Raster''-Klasse mit den Raster-Elementen (ebenfalls ''div''s befüllt). ===== Wichtigste CSS-Einträge ===== Die ganze Seite sowie die Menüs werden mit ''display:flex'' formatiert, siehe https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Das Raster selbst ist mir ''display:grid'' formatiert, wobei die Anzahl Spalten in einer CSS-Variablen mit Namen ''--spalten'' festgelegt wird, siehe https://css-tricks.com/snippets/css/complete-guide-grid/ ===== JavaScript ===== * Der ''constructor'' wird beim Anlegen eines Rasters (z.B. mit ''meinRaster = new Raster(3,3)'') aufgerufen und generiert alle Einträge. * Die Methoden (Funktionen) ''getValue(x,y)'' und ''setValue(x,y,v)'' um Werte (Zahlen) der einzelnen Rasterfelder zu erfahren, bzw. zu setzen. * Die Methode ''isOn(x,y)'' ergibt ''true'' oder ''false'', je nachdem, ob die Korrdinaten $(x,y)$ auf dem Spielfeld liegen oder nicht. * Die Klassen-Methode ''Raster.addColorRules'', die für ein Array von Farben entsprechende CSS-Klassen anlegt. * Das Attribut ''clickCallback'' kann auf eine Funktion gesetzt werden, die mit den Koordinaten eines geklickten Felds aufgerufen werden soll. ===== Einbinden von Knöpfen ===== In HTML, den Knopf mit einer ID versehen:

In JavaScript, den Knopf via ID auslesen und mit einem eventListener versehen:


    let startKnopf = this.document.getElementById('startknopf');
    startKnopf.addEventListener('click', function() {
        console.log("Hat Start gedrückt");
    });

===== Bilder speichern und laden ===== HTML-Knopf

JavaScript:


   let speichernKnopf = this.document.getElementById('speichernknopf');
    speichernKnopf.addEventListener('click', speichern);

    function speichern() {
        let bild = "";
        for (let y=0; y


Schachbrettmuster:

    function schach() {
        for (let y=0; y