diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..4f69547
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,1100 @@
+<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>
+
diff --git a/src/App_Backup.vue b/src/App_Backup.vue
new file mode 100644
index 0000000..591a031
--- /dev/null
+++ b/src/App_Backup.vue
@@ -0,0 +1,26 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png">
+  <HelloWorld msg="Welcome to Your Vue.js App"/>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</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;
+}
+</style>
diff --git a/src/assets/base.css b/src/assets/base.css
new file mode 100644
index 0000000..8816868
--- /dev/null
+++ b/src/assets/base.css
@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/assets/colors_generation.js b/src/assets/colors_generation.js
new file mode 100644
index 0000000..5f0dfc8
--- /dev/null
+++ b/src/assets/colors_generation.js
@@ -0,0 +1,60 @@
+/* eslint-disable no-unused-vars */
+
+
+function generateDifferentColors(x) {
+    const colors = [];
+    const step = 360 / x; // Calculate the step size for hue
+  
+    for (let i = 0; i < x; i++) {
+      const hue = i * step;
+      const saturation = 50; // You can adjust saturation and lightness as needed
+      const lightness = 50; // for your desired color appearance
+  
+      // Convert HSL to RGB
+      const rgbColor = hslToRgb(hue / 360, saturation / 100, lightness / 100);
+  
+      // Convert RGB to HEX
+      const hexColor = rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2]);
+  
+      colors.push(hexColor);
+    }
+  
+    return colors;
+  }
+  
+  function hslToRgb(h, s, l) {
+    let r, g, b;
+  
+    if (s === 0) {
+      r = g = b = l; // Achromatic
+    } else {
+      const hueToRgb = (p, q, t) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      };
+  
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+  
+      r = hueToRgb(p, q, h + 1 / 3);
+      g = hueToRgb(p, q, h);
+      b = hueToRgb(p, q, h - 1 / 3);
+    }
+  
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+  }
+  
+  function rgbToHex(r, g, b) {
+    return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase()}`;
+  }
+  
+  //const numberOfColors = 10; // Change this to the number of colors you want
+  //const differentColors = generateDifferentColors(numberOfColors);
+  //console.log(differentColors);
+  
+  
+  module.exports = generateDifferentColors;
\ No newline at end of file
diff --git a/src/assets/datensatz_gold_rush_koordinaten.csv b/src/assets/datensatz_gold_rush_koordinaten.csv
new file mode 100644
index 0000000..7f468fe
--- /dev/null
+++ b/src/assets/datensatz_gold_rush_koordinaten.csv
@@ -0,0 +1,21 @@
+x;y
+2;3
+3;6
+4;7
+5;6
+6;5
+9;8
+2;15
+10;17
+11;16
+12;15
+13;18
+16;3
+21;1
+18;15
+19;12
+20;14
+22;13
+22;15
+23;12
+24;14
diff --git a/src/assets/karte_gold_rush (Kopie).png b/src/assets/karte_gold_rush (Kopie).png
new file mode 100644
index 0000000..b3e2e30
Binary files /dev/null and b/src/assets/karte_gold_rush (Kopie).png differ
diff --git a/src/assets/karte_gold_rush.png b/src/assets/karte_gold_rush.png
new file mode 100644
index 0000000..22fce85
Binary files /dev/null and b/src/assets/karte_gold_rush.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..7565660
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/assets/main.css b/src/assets/main.css
new file mode 100644
index 0000000..e8667cd
--- /dev/null
+++ b/src/assets/main.css
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git a/src/assets/stadtplan_dortmund.png b/src/assets/stadtplan_dortmund.png
new file mode 100644
index 0000000..328aaed
Binary files /dev/null and b/src/assets/stadtplan_dortmund.png differ
diff --git a/src/assets/transparent_pixel.png b/src/assets/transparent_pixel.png
new file mode 100644
index 0000000..399a8b5
Binary files /dev/null and b/src/assets/transparent_pixel.png differ
diff --git a/src/assets/weiss_pixel.png b/src/assets/weiss_pixel.png
new file mode 100644
index 0000000..ebaa59a
Binary files /dev/null and b/src/assets/weiss_pixel.png differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..879051a
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..01433bc
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')