unsupervised_learning_simulation/src/App.vue

<template>
  <DIV>
  <img
    id="kein_bild"
    v-bind:src="require('./assets/weiss_pixel.png')"
    style="width: 0px; height: 0px"
  />
  <img
    id="stadtplan_dortmund"
    v-bind:src="require('./assets/stadtplan_dortmund.png')"
    style="width: 0px; height: 0px"
  />
  <img
    id="gold_rush"
    v-bind:src="require('./assets/karte_gold_rush.png')"
    style="width: 0px; height: 0px"
  />

  <h2>
    Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
    die {{ this.bezeichnung_datenpunkte }} angepasst werden.
  </h2>
  <br />

  <canvas
    id="c"
    STYLE="border: 1px black solid;"
    height="400"
    width="800"
  ></canvas>
  <br />
  Die <b>Punkte</b> auf der Karte sind die
  <b>{{ this.bezeichnung_datenpunkte }}</b
  >.<br />
  Die <b>x-Markierungen</b> auf der Karte entsprechen den
  <b>{{ this.bezeichnung_prototypen }}</b
  >
  <br />
  <br />
  <div>
    <button class="btn btn-primary" @click="starte_animation_alle">
      starte Animation für alles
    </button>

    <input
      type="range"
      v-model="animation_speed_range"
      min="0"
      max="2000"
      step="1"
    />

    {{ animation_speed }} ms
  </div>

  <br />

  <div style="width: 800px; margin: auto">
    <button class="btn btn-primary collapsible" style="background: grey">
      Hilfekarte: Animation im Einzelschritt
    </button>
    <div class="content" id="content2">
      <div class="row">
        <div class="column">
          {{ this.bezeichnung_aktueller_datenpunkt }}:
          <button class="btn btn-primary" @click="voriges_goldstueck">-</button>
          &nbsp;<b style="font-size: x-large">{{ aktuelles_goldstueck }}</b
          >&nbsp;
          <button class="btn btn-primary" @click="naechste_goldstueck">
            +
          </button>
        </div>
        <div class="column">
          {{ this.bezeichnung_aktuelle_goldmine }}:
          <!-- <button @click="goldmine_previous">-</button> -->
          <b style="font-size: x-large">{{ aktuelle_goldmine }}</b>
          <!-- <button @click="goldmine_next">+</button> -->
        </div>
      </div>

      <button class="btn btn-primary" @click="starte_animation">
        starte Animation nur für {{ this.bezeichnung_aktueller_datenpunkt }}
      </button>
    </div>
  </div>
  <br />
  <div style="width: 800px; margin: auto">
    <button class="btn btn-primary collapsible" style="background: grey">
      Vertiefung: weitere Einstellungsmöglichkeiten
    </button>
    <div class="content" id="content0" style="text-align: center">
      <br>
      Verändere die Zahl der {{ this.bezeichnung_datenpunkte }} und {{ this.bezeichnung_prototypen }}.
      <div class="row">
        <div class="column" style="text-align: center">
          <h3>{{ this.bezeichnung_datenpunkte }}</h3>

          <button
            class="btn btn-primary"
            @click="update_anzahl_goldstuecke(--this.anzahl_goldstuecke)"
          >
            -
          </button>
          &nbsp;
          <b style="font-size: xx-large">{{ this.anzahl_goldstuecke }}</b
          >&nbsp;
          <button
            class="btn btn-primary"
            @click="update_anzahl_goldstuecke(++this.anzahl_goldstuecke)"
          >
            +
          </button>

          <br />
          <br />

          <button class="btn btn-primary collapsible" style="background: grey">
            manuell verändern
          </button>
          <div class="content" id="content1" style="text-align: left">
            In jeder Zeile wird ein Datenpunkt mit den zugehörigen Werten
            dargestellt:<br /><br />
            <b>&nbsp;&nbsp;&nbsp; x; y</b><br />
            <textarea
              v-model="txt_datensatz"
              placeholder="add multiple lines"
              rows="10"
            ></textarea>
            <br />
            <button class="btn btn-primary" @click="textarea_2_datensatz">
              Datenpunkte verändern
            </button>
          </div>
        </div>

        <div class="column" style="text-align: center">
          <h3>{{ this.bezeichnung_prototypen }}</h3>

          <button
            class="btn btn-primary"
            @click="update_anzahl_goldminen(--this.anzahl_goldminen)"
          >
            -
          </button>
          &nbsp;
          <b style="font-size: xx-large">{{ this.anzahl_goldminen }}</b>
          &nbsp;
          <button
            class="btn btn-primary"
            @click="update_anzahl_goldminen(++this.anzahl_goldminen)"
          >
            +</button
          ><br />
          <br />
        </div>
      </div>

      <hr />

      <DIV style="text-align: center">
        <h3>Szenario auswählen</h3>
        <select v-model="szenario" @change="szenario_aendern">
          <option value="gold_rush">
            Karte Gold Rush (Goldstücke und Ausgrabungsteams)
          </option>
          <option value="stadtplan_dortmund">
            Stadtplan Dortmund (Haushalte und U-Bahn-Stationen)
          </option>
          <option value="kein_bild">reine Datenansicht</option>
        </select>
      </DIV>
      <br />
    </div>
  </div>
  <br />
  <br />
</DIV>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'
//import Zeichnung from "./components/Zeichnung.vue";

export default {
  name: "App",
  components: {
    // Zeichnung,
    //HelloWorld
  },
  data() {
    return {
      goldstuecke_zufall: false,
      txt_datensatz: null,

      anzahl_goldstuecke: 8,
      anzahl_goldminen: 3,
      szenario: "gold_rush",

      gold_rush_goldstuecke: [
        { x: 2, y: 3, color: "black" },
        { x: 3, y: 6, color: "black" },
        { x: 4, y: 7, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
        { x: 300, y: 300, color: "black" },
      ],

      goldstuecke: [
        { x: 300, y: 300, color: "black" },
        { x: 202, y: 70, color: "black" },
        { x: 162, y: 250, color: "black" },
        { x: 82, y: 20, color: "black" },
        { x: 500, y: 350, color: "black" },
        { x: 630, y: 170, color: "black" },
        { x: 430, y: 270, color: "black" },
        { x: 570, y: 30, color: "black" },
      ],

      goldminen: [
        { x: 540, y: 50, color: "blue" },
        { x: 380, y: 370, color: "blue" },
        { x: 120, y: 150, color: "blue" },
      ],

      canvas: null,
      vueCanvas: null,
      aktuelles_goldstueck: 0,
      aktuelle_goldmine: 0,
      animation_speed_range: 750,
      paused: false,
      animationsphase: null,
      naechste_goldmine: null,
      letzte_goldmine: null,
      naechste_goldmine_distanz: null,
    };
  },

  computed: {
    aktuelles_hintergrundbild: function () {
      return this.szenario;
    },
    bezeichnung_datenpunkte: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "Goldstücke";
        case "stadtplan_dortmund":
          return "Haushalte";
      }
      return "Datenpunkte";
    },
    bezeichnung_prototypen: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "Grabungsteams";
        case "stadtplan_dortmund":
          return "U-Bahn-Stationen";
      }
      return "Prototypen";
    },

    bezeichnung_aktueller_datenpunkt: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "aktuelles Goldstück";
        case "stadtplan_dortmund":
          return "aktueller Haushalt";
      }
      return "aktueller Datenpunkt";
    },
    bezeichnung_aktuelle_goldmine: function () {
      switch (this.szenario) {
        case "gold_rush":
          return "aktuelles Grabungsteam";
        case "stadtplan_dortmund":
          return "aktuelle U-Bahn-Station";
      }
      return "aktueller Prototyp";
    },

    animation_speed: function () {
      return this.animation_speed_range * 1;
    },
    akt_goldstueck: function () {
      if (this.aktuelles_goldstueck < this.goldstuecke.length) {
        return this.goldstuecke[this.aktuelles_goldstueck];
      } else {
        return null;
      }
    },

    akt_goldmine: function () {
      if (this.aktuelle_goldmine < this.goldminen.length) {
        return this.goldminen[this.aktuelle_goldmine];
      } else {
        return null;
      }
    },
  },

  methods: {
    lade() {
      this.datensatz_2_textarea();
      /*
      this.txt_datensatz =
        "x;y\n\
2;3\n\
3;6\n\
4;7\n\
5;6\n\
6;5\n\
9;8\n\
2;15\n\
10;17\n\
11;16\n\
12;15\n\
13;18\n\
16;3\n\
21;1\n\
18;15\n\
19;12\n\
20;14\n\
22;13\n\
22;15\n\
23;12\n\
24;14";
*/
    },

    datensatz_2_textarea() {
      let text_ausgabe = "";

      for (let i = 0; i < this.goldstuecke.length; i++) {
        text_ausgabe +=
          this.goldstuecke[i].x + "; " + this.goldstuecke[i].y + "\n";
      }

      this.txt_datensatz = text_ausgabe;
    },

    textarea_2_datensatz() {
      let text = this.txt_datensatz.replaceAll(" ", "");
      text = text.replaceAll("\n", "#");
      while (text.includes("##")) {
        text = text.replaceAll("##", "#");
      }

      console.log(text);
      let regex_korrekt = text.match("^((\\d)*;(\\d)*(#))*((\\d)*;(\\d)*)?$");

      if (!regex_korrekt) {
        console.log("regex nicht korrekt");
      } else {
        console.log("regex korrekt");
        let zeilen = text.split("#");
        let neuer_ds = [];

        for (let i = 0; i < zeilen.length; i++) {
          if (zeilen[i].includes(";")) {
            let zeile = zeilen[i].split(";");
            let ds = { x: zeile[0], y: zeile[1], color: "blue" };

            neuer_ds.push(ds);
          }
        }
        this.goldstuecke = neuer_ds;
        this.anzahl_goldstuecke = this.goldstuecke.length;
        this.update_anzahl_goldstuecke(this.anzahl_goldstuecke);
      }
    },

    szenario_aendern() {
      this.loesche_zeichenflaeche();
      this.refresh();
    },

    update_anzahl_goldstuecke(new_value) {
      if (new_value >= 0) {
        console.log("angekommen." + new_value);
        this.anzahl_goldstuecke = new_value;

        while (this.goldstuecke.length > this.anzahl_goldstuecke) {
          this.goldstuecke.pop();
        }

        while (this.goldstuecke.length < this.anzahl_goldstuecke) {
          let neues_goldstueck = this.generiere_goldstueck_zufaellig();
          this.goldstuecke.push(neues_goldstueck);
        }
        //this.update_zeichnung_child_component();
        this.datensatz_2_textarea();
        this.refresh();
      } else {
        this.anzahl_goldstuecke = 0;
      }
    },
    update_anzahl_goldminen(new_value) {
      if (new_value >= 0) {
        console.log("angekommen." + new_value);
        this.anzahl_goldminen = new_value;

        while (this.goldminen.length > this.anzahl_goldminen) {
          this.goldminen.pop();
        }

        while (this.goldminen.length < this.anzahl_goldminen) {
          let neue_goldmine = this.generiere_goldmine_zufaellig();
          this.goldminen.push(neue_goldmine);
        }
        //this.update_zeichnung_child_component();
        //        this.datensatz_2_textarea();
        this.refresh();
      } else {
        this.anzahl_goldminen = 0;
      }
    },
    /*
    update_zeichnung_child_component() {
      //this.$refs.component_zeichnung.update_anzahlen(this.goldstuecke, this.goldminen)
      this.$refs.component_zeichnung.refresh();
      console.log("update child sent" + this.goldstuecke.length);
    },
    */
    generiere_goldstueck_zufaellig() {
      let max_x = 800;
      let max_y = 400;
      let goldstueck = {};

      goldstueck.x = Math.floor(Math.random() * max_x);
      goldstueck.y = Math.floor(Math.random() * max_y);
      goldstueck.color = "black";

      console.log(goldstueck);
      return goldstueck;
    },
    generiere_goldmine_zufaellig() {
      let max_x = 800;
      let max_y = 400;
      let goldmine = {};

      goldmine.x = Math.floor(Math.random() * max_x);
      goldmine.y = Math.floor(Math.random() * max_y);
      goldmine.color = "blue";

      console.log(goldmine);
      return goldmine;
    },

    zeichne_hintergrund() {
      const bild = document.getElementById(this.aktuelles_hintergrundbild);
      console.log("background bild: " + this.aktuelles_hintergrundbild);

      let bildX = 0;
      let bildY = 0;
      let breite = 800;
      let hoehe = 400;
      this.vueCanvas.drawImage(bild, bildX, bildY, breite, hoehe);
    },

    faerbe_goldminen() {
      // Import the generateDifferentColors function from generateColors.js
      const generateDifferentColors = require("./assets/colors_generation.js");
      let anzahl = this.goldminen.length;
      let farben = generateDifferentColors(anzahl);
      //colors_generation;
      console.log(anzahl + farben);

      for (let i = 0; i < this.goldminen.length; i++) {
        this.goldminen[i].color = farben[i];
        console.log(this.goldminen[i].color);
      }
    },

    farben_anpassen(alle) {
      for (let i = 0; i < this.goldstuecke.length; i++) {
        if (alle || i < this.aktuelles_goldstueck) {
          let next_goldmine = this.gib_naechste_goldmine(this.goldstuecke[i]);
          let farbe = next_goldmine.color;
          this.goldstuecke[i].color = farbe;
          console.log(farbe);
        }
      }
    },

    async refresh() {
      return new Promise((resolve) => {
        this.faerbe_goldminen();
        this.loesche_zeichenflaeche();
        this.zeichne_hintergrund();
        this.zeichne_goldstuecke(false, true);
        this.zeichne_goldminen(false);

        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, this.animation_speed); // 1-second delay
      });
    },

    loesche_zeichenflaeche() {
      this.vueCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    zeichne_kreis(x, y, radius, fuellFarbe, randFarbe) {
      let randDicke;

      //randFarbe = 'black'
      randDicke = 5;

      this.vueCanvas.strokeStyle = randFarbe;
      this.vueCanvas.beginPath();
      this.vueCanvas.lineWidth = randDicke;
      this.vueCanvas.arc(x, y, radius, 0, 2 * Math.PI);
      this.vueCanvas.fillStyle = fuellFarbe;
      this.vueCanvas.fill();
      this.vueCanvas.stroke();
    },
    zeichne_x(x, y, color) {
      let staerke = 4;
      let groesse = 6;

      //ctxBaum.fillStyle = color
      this.vueCanvas.beginPath();

      this.vueCanvas.moveTo(x + groesse, y + groesse);
      this.vueCanvas.lineWidth = staerke;
      // set line color
      this.vueCanvas.strokeStyle = color;
      this.vueCanvas.lineTo(x - groesse, y - groesse);

      this.vueCanvas.moveTo(x - groesse, y + groesse);
      this.vueCanvas.lineWidth = staerke;
      // set line color
      this.vueCanvas.strokeStyle = color;
      this.vueCanvas.lineTo(x + groesse, y - groesse);

      this.vueCanvas.stroke();
    },

    zeichne_linie(x1, y1, x2, y2, farbe, staerke) {
      //ctxBaum.fillStyle = color
      this.vueCanvas.beginPath();

      this.vueCanvas.moveTo(x1, y1);
      this.vueCanvas.lineWidth = staerke;
      // set line color
      this.vueCanvas.strokeStyle = farbe;
      this.vueCanvas.lineTo(x2, y2);

      this.vueCanvas.stroke();
    },

    zeichne_linie_goldstueck_naechste_goldmine(goldstueck) {
      let farbe = "red";
      let staerke = 2;
      let goldmine = this.gib_naechste_goldmine(goldstueck);

      if (goldstueck != null && goldmine != null) {
        this.zeichne_linie(
          goldstueck.x,
          goldstueck.y,
          goldmine.x,
          goldmine.y,
          farbe,
          staerke
        );
      }
    },

    zeichne_linie_goldstueck_goldmine(goldstueck, goldmine, farbe, staerke) {
      if (goldstueck != null && goldmine != null) {
        this.zeichne_linie(
          goldstueck.x,
          goldstueck.y,
          goldmine.x,
          goldmine.y,
          farbe,
          staerke
        );
      }
    },

    zeige_line_an() {
      this.zeichne_linie_goldstueck_goldmine(
        this.goldstuecke[this.aktuelles_goldstueck],
        this.goldminen[this.aktuelle_goldmine]
      );
    },

    zeichne_goldstuecke(markierung, zeichne_alle) {
      let radius = 8;
      let i = 0;
      let hightlight_farbe = "lightgreen";

      this.goldstuecke.forEach((element) => {
        if (markierung && i == this.aktuelles_goldstueck) {
          this.zeichne_kreis(
            element.x,
            element.y,
            radius * 1.5,
            hightlight_farbe,
            hightlight_farbe
          );
        }

        let kreis_farbe = element.color; //"black";
        /*
        if (i < this.aktuelles_goldstueck) {
          kreis_farbe = element.color;
        }
        */

        if (zeichne_alle || i < this.aktuelles_goldstueck) {
          this.zeichne_kreis(
            element.x,
            element.y,
            radius,
            kreis_farbe,
            kreis_farbe
          );
        }

        i++;
      });
    },

    zeichne_goldminen(markierung) {
      let i = 0;
      let hightlight_farbe;
      let radius;

      this.goldminen.forEach((element) => {
        hightlight_farbe = "white";
        radius = 14;

        if (markierung && i == this.aktuelle_goldmine) {
          hightlight_farbe = "lightgreen";
          let radius_markierung = radius + 5;
          this.zeichne_kreis(
            element.x,
            element.y,
            radius_markierung,
            "white",
            hightlight_farbe
          );
        }

        this.zeichne_kreis(element.x, element.y, radius, "white", "black");

        this.zeichne_x(element.x, element.y, element.color);
        console.log(element.color);

        i++;
      });
    },
    naechste_goldstueck() {
      if (this.aktuelles_goldstueck < this.goldstuecke.length - 1) {
        this.aktuelles_goldstueck++;
        this.refresh();
        this.zeichne_goldstuecke(true, true);
      }
    },
    voriges_goldstueck() {
      if (this.aktuelles_goldstueck > 0) {
        this.aktuelles_goldstueck--;
        this.refresh();
        this.zeichne_goldstuecke(true, true);
      }
    },
    goldmine_next() {
      this.aktuelle_goldmine++;
      this.refresh();
      this.zeichne_goldminen(true);
    },
    goldmine_previous() {
      this.aktuelle_goldmine--;
      this.refresh();
      this.zeichne_goldminen(true);
    },
    gib_distanz(goldstueck, goldmine) {
      let x1 = goldstueck.x;
      let y1 = goldstueck.y;
      let x2 = goldmine.x;
      let y2 = goldmine.y;
      return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
    },
    gib_naechste_goldmine(goldstueck) {
      if (goldstueck == null) {
        return null;
      }
      let naechste_goldmine = null;
      let min_distanz = null;
      // pruefe alle Goldminen und merke die naechste
      for (let i = 0; i < this.goldminen.length; i++) {
        let akt_goldmine = this.goldminen[i];
        let akt_distanz = this.gib_distanz(goldstueck, akt_goldmine);
        if (naechste_goldmine == null || akt_distanz < min_distanz) {
          naechste_goldmine = akt_goldmine;
          min_distanz = akt_distanz;
        }
      }
      return naechste_goldmine;
    },

    berechne_neue_pos_haelfte(x1, y1, x2, y2) {
      /* let x1 = pos1.x;
      let y1 = pos1.y;
      let x2 = pos2.x;
      let y2 = pos2.y;*/

      let neue_pos = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      };
      return neue_pos;
    },

    //////////////////////////////////////////
    pausiere_animation() {
      this.paused = true;
    },
    kurz_zeichne_linie_goldstueck_goldmine() {
      // pruefe_aktuelle
      this.zeichne_linie_goldstueck_goldmine(
        this.akt_goldstueck,
        this.akt_goldmine,
        "lightgreen",
        4
      );
    },

    existiert_kuerzere_Distanz() {
      // bisher naechste Goldmine
      let akt_distanz = this.gib_distanz(
        this.akt_goldstueck,
        this.akt_goldmine
      );

      // naechsten aktualisieren
      if (
        this.naechste_goldmine == null ||
        akt_distanz < this.naechste_goldmine_distanz
      ) {
        this.naechste_goldmine = this.akt_goldmine;
        this.naechste_goldmine_distanz = akt_distanz;
        return true;
      } else {
        return false;
      }
    },

    verarbeite_kuerzere_distanz() {
      if (this.existiert_kuerzere_Distanz()) {
        this.zeichne_kuerzeste_Distanz();
      }
    },

    kurz_zeichne_linie_goldstueck_naechste_goldmine() {
      this.zeichne_linie_goldstueck_goldmine(
        this.akt_goldstueck,
        this.naechste_goldmine,
        "red",
        3
      );
    },
    async starte_animation_alle() {
      this.loesche_zeichenflaeche();
      this.aktuelles_goldstueck = 0;

      for (let i = 0; i < this.goldstuecke.length; i++) {
        this.aktuelles_goldstueck = i;
        await this.starte_animation();
      }

      this.farben_anpassen(true);

      this.loesche_zeichenflaeche();
      this.zeichne_hintergrund();
      this.zeichne_goldstuecke(false, true);
      this.zeichne_goldminen(false);

      //this.zeige_naechste_bekannte_goldmine();
    },

    async starte_animation() {
      this.aktuelle_goldmine = 0;
      this.naechste_goldmine = null;
      this.naechste_goldmine_distanz = null;
      this.paused = false;

      await this.mainAnimationLoop();
    },

    async mainAnimationLoop() {
      // Call the first animation and wait for it to finish

      let alle_goldminen_verarbeitet = false;
      while (!alle_goldminen_verarbeitet) {
        this.zeichne_hintergrund();
        this.farben_anpassen(false);

        if (this.aktuelle_goldmine == 0) {
          this.zeichne_goldstuecke(false, true);
          await this.zeichne_goldminen(false);
        }

        await this.zeige_goldmine();
        await this.zeige_naechste_bekannte_goldmine();

        if (this.existiert_kuerzere_Distanz()) {
          this.loesche_zeichenflaeche();
          this.zeichne_hintergrund();
          this.zeichne_goldstuecke(false, true);
          this.zeichne_goldminen(false);
          await this.zeige_naechste_bekannte_goldmine();
        }

        if (this.aktuelle_goldmine < this.goldminen.length) {
          if (this.aktuelle_goldmine == this.goldminen.length - 1) {
            alle_goldminen_verarbeitet = true;
          } else {
            this.aktuelle_goldmine++;
          }
        }
      }

      // Schlussbild
      this.loesche_zeichenflaeche();
      this.farben_anpassen(false);
      this.zeichne_goldstuecke(false, true);
      this.zeichne_goldminen(false);

      this.zeige_naechste_bekannte_goldmine();

      // Goldmine verschieben
      await this.aktualisiere_pos_goldmine();
    },

    async pausiere(zeitspanne) {
      return new Promise((resolve) => {
        // nichts tun

        // Simulate some delay (you can replace this with actual animation code)
        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, zeitspanne); // 1-second delay
      });
    },

    zeige_goldmine() {
      return new Promise((resolve) => {
        // Your animation code here
        //this.loesche_zeichenflaeche();

        this.kurz_zeichne_linie_goldstueck_goldmine();
        this.zeige_naechste_bekannte_goldmine();
        this.zeichne_goldstuecke(true, true);
        this.zeichne_goldminen(true);

        // Simulate some delay (you can replace this with actual animation code)
        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, this.animation_speed); // 1-second delay
      });
    },

    zeige_naechste_bekannte_goldmine() {
      return new Promise((resolve) => {
        // Your animation code here
        if (this.naechste_goldmine != null && this.akt_goldstueck != null) {
          this.kurz_zeichne_linie_goldstueck_naechste_goldmine();
          this.zeichne_goldstuecke(true, true);
          this.zeichne_goldminen(true);
        }

        // Simulate some delay (you can replace this with actual animation code)
        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, this.animation_speed); // 1-second delay
      });
    },

    aktualisiere_pos_goldmine() {
      return new Promise((resolve) => {
        this.farben_anpassen(false);
        this.animate();

        setTimeout(() => {
          resolve(); // Resolve the promise when the animation is done
        }, this.animation_speed * 2);
      });
    },
    async animate() {
      this.letzte_goldmine = this.naechste_goldmine;
      let schritte = 50;
      if (this.animation_speed < 10) {
        schritte = 1;
      }
      let i = 0;

      let x_neu = (this.akt_goldstueck.x + this.naechste_goldmine.x) / 2;
      let y_neu = (this.akt_goldstueck.y + this.naechste_goldmine.y) / 2;

      let delta_x =
        (this.akt_goldstueck.x - this.naechste_goldmine.x) / 2 / schritte;
      let delta_y =
        (this.akt_goldstueck.y - this.naechste_goldmine.y) / 2 / schritte;

      // zeichnen definieren
      var draw = () => {
        try {
          this.naechste_goldmine.x += delta_x;
          this.naechste_goldmine.y += delta_y;

          this.loesche_zeichenflaeche();
          this.zeichne_hintergrund();

          this.kurz_zeichne_linie_goldstueck_naechste_goldmine();

          this.zeichne_goldstuecke(true, true);
          this.zeichne_goldminen(true);

          i++;

          if (i < schritte) {
            //timestamp = Date.now();
            requestAnimationFrame(draw);
          } else {
            this.naechste_goldmine.x = x_neu;
            this.naechste_goldmine.y = y_neu;
            this.refresh();
          }
        } catch (error) {
          //console.error("Caught custom exception:", error.message);
          this.letzte_goldmine.x = x_neu;
          this.letzte_goldmine.y = y_neu;
          this.refresh();
        }
      };
      // Zeichnen aufrufen
      draw();
    },
  },

  mounted() {
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    this.canvas = c;
    this.vueCanvas = ctx;
    this.aktuelle_goldmine = 0;

    this.lade();
    this.update_anzahl_goldstuecke(this.anzahl_goldstuecke);
    this.update_anzahl_goldminen(this.anzahl_goldminen);

    document.onreadystatechange = () => {
      if (document.readyState == "complete") {
        this.refresh();
        this.zeichne_hintergrund();
        this.zeichne_goldminen(false);
        this.zeichne_goldstuecke(false, true);
        console.log("Page completed with image and files!");
        // fetch to next page or some code

        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;

            if (content.style.maxHeight) {
              content.style.maxHeight = null;
            } else {
              content.style.maxHeight = content.scrollHeight + "px";
              let content0 = document.getElementById("content0");
              let content1 = document.getElementById("content1");
              if (content == content1) {
                console.log("gefunden");
                content0.style.maxHeight =
                  content0.scrollHeight + content.scrollHeight + "px";
              }
            }
          });
        }
      }
    };
  },
};

//------------------------------------------------------------
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  /* border: solid black 1px;
  /*height: 300px; /* Should be removed. Only for demonstration */
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: "\002B";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
</style>