lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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:
<code html>
<body>
    <div class="menu topleft"></div>
    <div id="gridcontainer"></div>
    <div class="menu bottomright"></div>
</body>
</code>
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:
<code html>
  <button id="startknopf">Start</button>
</code>
In JavaScript, den Knopf via ID auslesen und mit einem eventListener versehen:
<code javascript>
    let startKnopf = this.document.getElementById('startknopf');
    startKnopf.addEventListener('click', function() {
        console.log("Hat Start gedrückt");
    });
</code>


===== Bilder speichern und laden =====

HTML-Knopf
<code html>
  <button id="speichernknopf">Speichern</button>
  <input type="text" id="bildtext">
  <button id="ladenknopf">Laden</button>
</code>

JavaScript:
<code javascript>
   let speichernKnopf = this.document.getElementById('speichernknopf');
    speichernKnopf.addEventListener('click', speichern);

    function speichern() {
        let bild = "";
        for (let y=0; y<meinRaster.height; y++) {
            for (let x=0; x<meinRaster.width; x++) {
                let wert = meinRaster.getValue(x,y);
                bild += String(wert);
            }
        }
        console.log(bild);
        document.getElementById('bildtext').value = bild;
    }
    
    
      let ladenKnopf = this.document.getElementById('ladenknopf');
    ladenKnopf.addEventListener('click', laden);

    function laden() {
        let bild = document.getElementById('bildtext').value;
        console.log(bild);
        for (let i=0; i<bild.length; i++) {
            let wert = Number(bild[i]);
            let x = i % meinRaster.width;
            let y = Math.floor(i/meinRaster.width);
            meinRaster.setValue(x,y, wert)
        }
    }
</code>


Schachbrettmuster:
<code javascript>
    function schach() {
        for (let y=0; y<meinRaster.height; y++) {
            for (let x=0; x<meinRaster.width; x++) {
                let wert = (x+y)%2+1; // Hier geheime Formel einfügen
                meinRaster.setValue(x,y,wert);
            }
        }
    }
</code>