refactoring and cleanup

src/App.vue

@@ -1,18 +1,18 @@
 <template>
-  <DIV>
+  <div>
   <img
     id="kein_bild"
-    v-bind:src="require('./assets/weiss_pixel.png')"
+    src="./assets/img/weiss_pixel.png"
     style="width: 0px; height: 0px"
   />
   <img
-    id="stadtplan_dortmund"
-    v-bind:src="require('./assets/stadtplan_dortmund.png')"
+    id="stadtplan"
+    src="./assets/img/stadtplan.png"
     style="width: 0px; height: 0px"
   />
   <img
     id="gold_rush"
-    v-bind:src="require('./assets/karte_gold_rush.png')"
+    src="./assets/img/desert_landscape.png"
     style="width: 0px; height: 0px"
   />
 
@@ -25,7 +25,7 @@
   <canvas
     id="c"
     STYLE="border: 1px black solid;"
-    height="400"
+    height="450"
     width="800"
   ></canvas>
   <br />
@@ -63,18 +63,18 @@
       <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
+          <button class="btn btn-primary" @click="voriges_datenpunkt">-</button>
+          &nbsp;<b style="font-size: x-large">{{ aktueller_datenpunkt }}</b
           >&nbsp;
-          <button class="btn btn-primary" @click="naechste_goldstueck">
+          <button class="btn btn-primary" @click="naechstes_datenpunkt">
             +
           </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> -->
+          {{ this.r }}:
+          <!-- <button @click="voriger_prototyp">-</button> -->
+          <b style="font-size: x-large">{{ aktueller_prototyp }}</b>
+          <!-- <button @click="naechster_prototyp">+</button> -->
         </div>
       </div>
 
@@ -97,16 +97,16 @@
 
           <button
             class="btn btn-primary"
-            @click="update_anzahl_goldstuecke(--this.anzahl_goldstuecke)"
+            @click="update_anzahl_datenpunkte(--this.anzahl_datenpunkte)"
           >
             -
           </button>
           &nbsp;
-          <b style="font-size: xx-large">{{ this.anzahl_goldstuecke }}</b
+          <b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b
           >&nbsp;
           <button
             class="btn btn-primary"
-            @click="update_anzahl_goldstuecke(++this.anzahl_goldstuecke)"
+            @click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)"
           >
             +
           </button>
@@ -138,16 +138,16 @@
 
           <button
             class="btn btn-primary"
-            @click="update_anzahl_goldminen(--this.anzahl_goldminen)"
+            @click="update_anzahl_prototypen(--this.anzahl_prototypen)"
           >
             -
           </button>
           &nbsp;
-          <b style="font-size: xx-large">{{ this.anzahl_goldminen }}</b>
+          <b style="font-size: xx-large">{{ this.anzahl_prototypen }}</b>
           &nbsp;
           <button
             class="btn btn-primary"
-            @click="update_anzahl_goldminen(++this.anzahl_goldminen)"
+            @click="update_anzahl_prototypen(++this.anzahl_prototypen)"
           >
             +</button
           ><br />
@@ -157,29 +157,30 @@
 
       <hr />
 
-      <DIV style="text-align: center">
+      <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 value="stadtplan">
+            Stadtplan (Haushalte und U-Bahn-Stationen)
           </option>
           <option value="kein_bild">reine Datenansicht</option>
         </select>
-      </DIV>
+      </div>>
       <br />
     </div>
   </div>
   <br />
   <br />
-</DIV>
+</div>
 </template>
 
 <script>
-//import HelloWorld from './components/HelloWorld.vue'
-//import Zeichnung from "./components/Zeichnung.vue";
+
+// Import the generateDifferentColors function from generateColors.js
+import { generateDifferentColors } from './generateColors.js'
 
 export default {
   name: "App",
@@ -189,14 +190,14 @@ export default {
   },
   data() {
     return {
-      goldstuecke_zufall: false,
+      datenpunkte_zufall: false,
       txt_datensatz: null,
 
-      anzahl_goldstuecke: 8,
-      anzahl_goldminen: 3,
+      anzahl_datenpunkte: 8,
+      anzahl_prototypen: 3,
       szenario: "gold_rush",
 
-      gold_rush_goldstuecke: [
+      gold_rush_datenpunkte: [
         { x: 2, y: 3, color: "black" },
         { x: 3, y: 6, color: "black" },
         { x: 4, y: 7, color: "black" },
@@ -219,7 +220,7 @@ export default {
         { x: 300, y: 300, color: "black" },
       ],
 
-      goldstuecke: [
+      datenpunkte: [
         { x: 300, y: 300, color: "black" },
         { x: 202, y: 70, color: "black" },
         { x: 162, y: 250, color: "black" },
@@ -230,7 +231,7 @@ export default {
         { x: 570, y: 30, color: "black" },
       ],
 
-      goldminen: [
+      prototypen: [
         { x: 540, y: 50, color: "blue" },
         { x: 380, y: 370, color: "blue" },
         { x: 120, y: 150, color: "blue" },
@@ -238,14 +239,14 @@ export default {
 
       canvas: null,
       vueCanvas: null,
-      aktuelles_goldstueck: 0,
-      aktuelle_goldmine: 0,
+      aktueller_datenpunkt: 0,
+      aktueller_prototyp: 0,
       animation_speed_range: 750,
       paused: false,
       animationsphase: null,
-      naechste_goldmine: null,
-      letzte_goldmine: null,
-      naechste_goldmine_distanz: null,
+      naechstgelegener_prototyp: null,
+      letzte_prototyp: null,
+      naechstgelegener_prototyp_distanz: null,
     };
   },
 
@@ -257,7 +258,7 @@ export default {
       switch (this.szenario) {
         case "gold_rush":
           return "Goldstücke";
-        case "stadtplan_dortmund":
+        case "stadtplan":
           return "Haushalte";
       }
       return "Datenpunkte";
@@ -266,7 +267,7 @@ export default {
       switch (this.szenario) {
         case "gold_rush":
           return "Grabungsteams";
-        case "stadtplan_dortmund":
+        case "stadtplan":
           return "U-Bahn-Stationen";
       }
       return "Prototypen";
@@ -276,16 +277,16 @@ export default {
       switch (this.szenario) {
         case "gold_rush":
           return "aktuelles Goldstück";
-        case "stadtplan_dortmund":
+        case "stadtplan":
           return "aktueller Haushalt";
       }
       return "aktueller Datenpunkt";
     },
-    bezeichnung_aktuelle_goldmine: function () {
+    bezeichnung_aktueller_prototyp: function () {
       switch (this.szenario) {
         case "gold_rush":
           return "aktuelles Grabungsteam";
-        case "stadtplan_dortmund":
+        case "stadtplan":
           return "aktuelle U-Bahn-Station";
       }
       return "aktueller Prototyp";
@@ -294,17 +295,17 @@ export default {
     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];
+    akt_datenpunkt: function () {
+      if (this.aktueller_datenpunkt < this.datenpunkte.length) {
+        return this.datenpunkte[this.aktueller_datenpunkt];
       } else {
         return null;
       }
     },
 
-    akt_goldmine: function () {
-      if (this.aktuelle_goldmine < this.goldminen.length) {
-        return this.goldminen[this.aktuelle_goldmine];
+    akt_prototyp: function () {
+      if (this.aktueller_prototyp < this.prototypen.length) {
+        return this.prototypen[this.aktueller_prototyp];
       } else {
         return null;
       }
@@ -343,9 +344,9 @@ export default {
     datensatz_2_textarea() {
       let text_ausgabe = "";
 
-      for (let i = 0; i < this.goldstuecke.length; i++) {
+      for (let i = 0; i < this.datenpunkte.length; i++) {
         text_ausgabe +=
-          this.goldstuecke[i].x + "; " + this.goldstuecke[i].y + "\n";
+          this.datenpunkte[i].x + "; " + this.datenpunkte[i].y + "\n";
       }
 
       this.txt_datensatz = text_ausgabe;
@@ -376,9 +377,9 @@ export default {
             neuer_ds.push(ds);
           }
         }
-        this.goldstuecke = neuer_ds;
-        this.anzahl_goldstuecke = this.goldstuecke.length;
-        this.update_anzahl_goldstuecke(this.anzahl_goldstuecke);
+        this.datenpunkte = neuer_ds;
+        this.anzahl_datenpunkte = this.datenpunkte.length;
+        this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
       }
     },
 
@@ -387,109 +388,107 @@ export default {
       this.refresh();
     },
 
-    update_anzahl_goldstuecke(new_value) {
+    update_anzahl_datenpunkte(new_value) {
       if (new_value >= 0) {
         console.log("angekommen." + new_value);
-        this.anzahl_goldstuecke = new_value;
+        this.anzahl_datenpunkte = new_value;
 
-        while (this.goldstuecke.length > this.anzahl_goldstuecke) {
-          this.goldstuecke.pop();
+        while (this.datenpunkte.length > this.anzahl_datenpunkte) {
+          this.datenpunkte.pop();
         }
 
-        while (this.goldstuecke.length < this.anzahl_goldstuecke) {
-          let neues_goldstueck = this.generiere_goldstueck_zufaellig();
-          this.goldstuecke.push(neues_goldstueck);
+        while (this.datenpunkte.length < this.anzahl_datenpunkte) {
+          let neues_datenpunkt = this.generiere_datenpunkt_zufaellig();
+          this.datenpunkte.push(neues_datenpunkt);
         }
         //this.update_zeichnung_child_component();
         this.datensatz_2_textarea();
         this.refresh();
       } else {
-        this.anzahl_goldstuecke = 0;
+        this.anzahl_datenpunkte = 0;
       }
     },
-    update_anzahl_goldminen(new_value) {
+    update_anzahl_prototypen(new_value) {
       if (new_value >= 0) {
         console.log("angekommen." + new_value);
-        this.anzahl_goldminen = new_value;
+        this.anzahl_prototypen = new_value;
 
-        while (this.goldminen.length > this.anzahl_goldminen) {
-          this.goldminen.pop();
+        while (this.prototypen.length > this.anzahl_prototypen) {
+          this.prototypen.pop();
         }
 
-        while (this.goldminen.length < this.anzahl_goldminen) {
-          let neue_goldmine = this.generiere_goldmine_zufaellig();
-          this.goldminen.push(neue_goldmine);
+        while (this.prototypen.length < this.anzahl_prototypen) {
+          let neue_prototyp = this.generiere_prototyp_zufaellig();
+          this.prototypen.push(neue_prototyp);
         }
         //this.update_zeichnung_child_component();
         //        this.datensatz_2_textarea();
         this.refresh();
       } else {
-        this.anzahl_goldminen = 0;
+        this.anzahl_prototypen = 0;
       }
     },
     /*
     update_zeichnung_child_component() {
-      //this.$refs.component_zeichnung.update_anzahlen(this.goldstuecke, this.goldminen)
+      //this.$refs.component_zeichnung.update_anzahlen(this.datenpunkte, this.prototypen)
       this.$refs.component_zeichnung.refresh();
-      console.log("update child sent" + this.goldstuecke.length);
+      console.log("update child sent" + this.datenpunkte.length);
     },
     */
-    generiere_goldstueck_zufaellig() {
+    generiere_datenpunkt_zufaellig() {
       let max_x = 800;
-      let max_y = 400;
-      let goldstueck = {};
+      let max_y = 450;
+      let datenpunkt = {};
 
-      goldstueck.x = Math.floor(Math.random() * max_x);
-      goldstueck.y = Math.floor(Math.random() * max_y);
-      goldstueck.color = "black";
+      datenpunkt.x = Math.floor(Math.random() * max_x);
+      datenpunkt.y = Math.floor(Math.random() * max_y);
+      datenpunkt.color = "black";
 
-      console.log(goldstueck);
-      return goldstueck;
+      console.log(datenpunkt);
+      return datenpunkt;
     },
-    generiere_goldmine_zufaellig() {
+    generiere_prototyp_zufaellig() {
       let max_x = 800;
-      let max_y = 400;
-      let goldmine = {};
+      let max_y = 450;
+      let prototyp = {};
 
-      goldmine.x = Math.floor(Math.random() * max_x);
-      goldmine.y = Math.floor(Math.random() * max_y);
-      goldmine.color = "blue";
+      prototyp.x = Math.floor(Math.random() * max_x);
+      prototyp.y = Math.floor(Math.random() * max_y);
+      prototyp.color = "blue";
 
-      console.log(goldmine);
-      return goldmine;
+      console.log(prototyp);
+      return prototyp;
     },
 
     zeichne_hintergrund() {
       const bild = document.getElementById(this.aktuelles_hintergrundbild);
-      console.log("background bild: " + this.aktuelles_hintergrundbild);
+      console.log("background image: " + this.aktuelles_hintergrundbild);
 
       let bildX = 0;
       let bildY = 0;
       let breite = 800;
-      let hoehe = 400;
+      let hoehe = 450;
       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;
+    faerbe_prototypen() {
+      let anzahl = this.prototypen.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);
+      for (let i = 0; i < this.prototypen.length; i++) {
+        this.prototypen[i].color = farben[i];
+        console.log(this.prototypen[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;
+      for (let i = 0; i < this.datenpunkte.length; i++) {
+        if (alle || i < this.aktueller_datenpunkt) {
+          let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]);
+          let farbe = next_prototyp.color;
+          this.datenpunkte[i].color = farbe;
           console.log(farbe);
         }
       }
@@ -497,11 +496,11 @@ export default {
 
     async refresh() {
       return new Promise((resolve) => {
-        this.faerbe_goldminen();
+        this.faerbe_prototypen();
         this.loesche_zeichenflaeche();
         this.zeichne_hintergrund();
-        this.zeichne_goldstuecke(false, true);
-        this.zeichne_goldminen(false);
+        this.zeichne_datenpunkte(false, true);
+        this.zeichne_prototypen(false);
 
         setTimeout(() => {
           resolve(); // Resolve the promise when the animation is done
@@ -516,7 +515,7 @@ export default {
       let randDicke;
 
       //randFarbe = 'black'
-      randDicke = 5;
+      randDicke = Math.ceil(radius / 3);
 
       this.vueCanvas.strokeStyle = randFarbe;
       this.vueCanvas.beginPath();
@@ -561,30 +560,30 @@ export default {
       this.vueCanvas.stroke();
     },
 
-    zeichne_linie_goldstueck_naechste_goldmine(goldstueck) {
+    zeichne_linie_datenpunkt_naechstgelegene_prototyp(datenpunkt) {
       let farbe = "red";
       let staerke = 2;
-      let goldmine = this.gib_naechste_goldmine(goldstueck);
+      let prototyp = this.gib_naechstgelegener_prototyp(datenpunkt);
 
-      if (goldstueck != null && goldmine != null) {
+      if (datenpunkt != null && prototyp != null) {
         this.zeichne_linie(
-          goldstueck.x,
-          goldstueck.y,
-          goldmine.x,
-          goldmine.y,
+          datenpunkt.x,
+          datenpunkt.y,
+          prototyp.x,
+          prototyp.y,
           farbe,
           staerke
         );
       }
     },
 
-    zeichne_linie_goldstueck_goldmine(goldstueck, goldmine, farbe, staerke) {
-      if (goldstueck != null && goldmine != null) {
+    zeichne_linie_datenpunkt_prototyp(datenpunkt, prototyp, farbe, staerke) {
+      if (datenpunkt != null && prototyp != null) {
         this.zeichne_linie(
-          goldstueck.x,
-          goldstueck.y,
-          goldmine.x,
-          goldmine.y,
+          datenpunkt.x,
+          datenpunkt.y,
+          prototyp.x,
+          prototyp.y,
           farbe,
           staerke
         );
@@ -592,19 +591,19 @@ export default {
     },
 
     zeige_line_an() {
-      this.zeichne_linie_goldstueck_goldmine(
-        this.goldstuecke[this.aktuelles_goldstueck],
-        this.goldminen[this.aktuelle_goldmine]
+      this.zeichne_linie_datenpunkt_prototyp(
+        this.datenpunkte[this.aktueller_datenpunkt],
+        this.prototypen[this.aktueller_prototyp]
       );
     },
 
-    zeichne_goldstuecke(markierung, zeichne_alle) {
+    zeichne_datenpunkte(markierung, zeichne_alle) {
       let radius = 8;
       let i = 0;
       let hightlight_farbe = "lightgreen";
 
-      this.goldstuecke.forEach((element) => {
-        if (markierung && i == this.aktuelles_goldstueck) {
+      this.datenpunkte.forEach((element) => {
+        if (markierung && i == this.aktueller_datenpunkt) {
           this.zeichne_kreis(
             element.x,
             element.y,
@@ -616,18 +615,18 @@ export default {
 
         let kreis_farbe = element.color; //"black";
         /*
-        if (i < this.aktuelles_goldstueck) {
+        if (i < this.aktueller_datenpunkt) {
           kreis_farbe = element.color;
         }
         */
 
-        if (zeichne_alle || i < this.aktuelles_goldstueck) {
+        if (zeichne_alle || i < this.aktueller_datenpunkt) {
           this.zeichne_kreis(
             element.x,
             element.y,
             radius,
             kreis_farbe,
-            kreis_farbe
+            "white"
           );
         }
 
@@ -635,16 +634,16 @@ export default {
       });
     },
 
-    zeichne_goldminen(markierung) {
+    zeichne_prototypen(markierung) {
       let i = 0;
       let hightlight_farbe;
       let radius;
 
-      this.goldminen.forEach((element) => {
+      this.prototypen.forEach((element) => {
         hightlight_farbe = "white";
         radius = 14;
 
-        if (markierung && i == this.aktuelle_goldmine) {
+        if (markierung && i == this.aktueller_prototyp) {
           hightlight_farbe = "lightgreen";
           let radius_markierung = radius + 5;
           this.zeichne_kreis(
@@ -656,7 +655,7 @@ export default {
           );
         }
 
-        this.zeichne_kreis(element.x, element.y, radius, "white", "black");
+        this.zeichne_kreis(element.x, element.y, radius, "white", element.color);
 
         this.zeichne_x(element.x, element.y, element.color);
         console.log(element.color);
@@ -664,60 +663,56 @@ export default {
         i++;
       });
     },
-    naechste_goldstueck() {
-      if (this.aktuelles_goldstueck < this.goldstuecke.length - 1) {
-        this.aktuelles_goldstueck++;
+    naechstes_datenpunkt() {
+      if (this.aktueller_datenpunkt < this.datenpunkte.length - 1) {
+        this.aktueller_datenpunkt++;
         this.refresh();
-        this.zeichne_goldstuecke(true, true);
+        this.zeichne_datenpunkte(true, true);
       }
     },
-    voriges_goldstueck() {
-      if (this.aktuelles_goldstueck > 0) {
-        this.aktuelles_goldstueck--;
+    voriges_datenpunkt() {
+      if (this.aktueller_datenpunkt > 0) {
+        this.aktueller_datenpunkt--;
         this.refresh();
-        this.zeichne_goldstuecke(true, true);
+        this.zeichne_datenpunkte(true, true);
       }
     },
-    goldmine_next() {
-      this.aktuelle_goldmine++;
+    naechster_prototyp() {
+      this.aktueller_prototyp++;
       this.refresh();
-      this.zeichne_goldminen(true);
+      this.zeichne_prototypen(true);
     },
-    goldmine_previous() {
-      this.aktuelle_goldmine--;
+    voriger_prototyp() {
+      this.aktueller_prototyp--;
       this.refresh();
-      this.zeichne_goldminen(true);
+      this.zeichne_prototypen(true);
     },
-    gib_distanz(goldstueck, goldmine) {
-      let x1 = goldstueck.x;
-      let y1 = goldstueck.y;
-      let x2 = goldmine.x;
-      let y2 = goldmine.y;
+    gib_distanz(datenpunkt, prototyp) {
+      let x1 = datenpunkt.x;
+      let y1 = datenpunkt.y;
+      let x2 = prototyp.x;
+      let y2 = prototyp.y;
       return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
     },
-    gib_naechste_goldmine(goldstueck) {
-      if (goldstueck == null) {
+    gib_naechstgelegener_prototyp(datenpunkt) {
+      if (datenpunkt == null) {
         return null;
       }
-      let naechste_goldmine = null;
+      let naechstgelegener_prototyp = 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;
+      // pruefe alle prototypen und merke die naechste
+      for (let i = 0; i < this.prototypen.length; i++) {
+        let akt_prototyp = this.prototypen[i];
+        let akt_distanz = this.gib_distanz(datenpunkt, akt_prototyp);
+        if (naechstgelegener_prototyp == null || akt_distanz < min_distanz) {
+          naechstgelegener_prototyp = akt_prototyp;
           min_distanz = akt_distanz;
         }
       }
-      return naechste_goldmine;
+      return naechstgelegener_prototyp;
     },
 
     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,
@@ -730,30 +725,30 @@ export default {
     pausiere_animation() {
       this.paused = true;
     },
-    kurz_zeichne_linie_goldstueck_goldmine() {
+    kurz_zeichne_linie_datenpunkt_prototyp() {
       // pruefe_aktuelle
-      this.zeichne_linie_goldstueck_goldmine(
-        this.akt_goldstueck,
-        this.akt_goldmine,
+      this.zeichne_linie_datenpunkt_prototyp(
+        this.akt_datenpunkt,
+        this.akt_prototyp,
         "lightgreen",
         4
       );
     },
 
     existiert_kuerzere_Distanz() {
-      // bisher naechste Goldmine
+      // bisher naechstgelegener Prototyp
       let akt_distanz = this.gib_distanz(
-        this.akt_goldstueck,
-        this.akt_goldmine
+        this.akt_datenpunkt,
+        this.akt_prototyp
       );
 
       // naechsten aktualisieren
       if (
-        this.naechste_goldmine == null ||
-        akt_distanz < this.naechste_goldmine_distanz
+        this.naechstgelegener_prototyp == null ||
+        akt_distanz < this.naechstgelegener_prototyp_distanz
       ) {
-        this.naechste_goldmine = this.akt_goldmine;
-        this.naechste_goldmine_distanz = akt_distanz;
+        this.naechstgelegener_prototyp = this.akt_prototyp;
+        this.naechstgelegener_prototyp_distanz = akt_distanz;
         return true;
       } else {
         return false;
@@ -766,20 +761,20 @@ export default {
       }
     },
 
-    kurz_zeichne_linie_goldstueck_naechste_goldmine() {
-      this.zeichne_linie_goldstueck_goldmine(
-        this.akt_goldstueck,
-        this.naechste_goldmine,
+    kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp() {
+      this.zeichne_linie_datenpunkt_prototyp(
+        this.akt_datenpunkt,
+        this.naechstgelegener_prototyp,
         "red",
         3
       );
     },
     async starte_animation_alle() {
       this.loesche_zeichenflaeche();
-      this.aktuelles_goldstueck = 0;
+      this.aktueller_datenpunkt = 0;
 
-      for (let i = 0; i < this.goldstuecke.length; i++) {
-        this.aktuelles_goldstueck = i;
+      for (let i = 0; i < this.datenpunkte.length; i++) {
+        this.aktueller_datenpunkt = i;
         await this.starte_animation();
       }
 
@@ -787,16 +782,16 @@ export default {
 
       this.loesche_zeichenflaeche();
       this.zeichne_hintergrund();
-      this.zeichne_goldstuecke(false, true);
-      this.zeichne_goldminen(false);
+      this.zeichne_datenpunkte(false, true);
+      this.zeichne_prototypen(false);
 
-      //this.zeige_naechste_bekannte_goldmine();
+      //this.zeige_naechsten_bekannten_prototyp();
     },
 
     async starte_animation() {
-      this.aktuelle_goldmine = 0;
-      this.naechste_goldmine = null;
-      this.naechste_goldmine_distanz = null;
+      this.aktueller_prototyp = 0;
+      this.naechstgelegener_prototyp = null;
+      this.naechstgelegener_prototyp_distanz = null;
       this.paused = false;
 
       await this.mainAnimationLoop();
@@ -805,32 +800,32 @@ export default {
     async mainAnimationLoop() {
       // Call the first animation and wait for it to finish
 
-      let alle_goldminen_verarbeitet = false;
-      while (!alle_goldminen_verarbeitet) {
+      let alle_prototypen_verarbeitet = false;
+      while (!alle_prototypen_verarbeitet) {
         this.zeichne_hintergrund();
         this.farben_anpassen(false);
 
-        if (this.aktuelle_goldmine == 0) {
-          this.zeichne_goldstuecke(false, true);
-          await this.zeichne_goldminen(false);
+        if (this.aktueller_prototyp == 0) {
+          this.zeichne_datenpunkte(false, true);
+          await this.zeichne_prototypen(false);
         }
 
-        await this.zeige_goldmine();
-        await this.zeige_naechste_bekannte_goldmine();
+        await this.zeige_prototyp();
+        await this.zeige_naechsten_bekannten_prototyp();
 
         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();
+          this.zeichne_datenpunkte(false, true);
+          this.zeichne_prototypen(false);
+          await this.zeige_naechsten_bekannten_prototyp();
         }
 
-        if (this.aktuelle_goldmine < this.goldminen.length) {
-          if (this.aktuelle_goldmine == this.goldminen.length - 1) {
-            alle_goldminen_verarbeitet = true;
+        if (this.aktueller_prototyp < this.prototypen.length) {
+          if (this.aktueller_prototyp == this.prototypen.length - 1) {
+            alle_prototypen_verarbeitet = true;
           } else {
-            this.aktuelle_goldmine++;
+            this.aktueller_prototyp++;
           }
         }
       }
@@ -838,13 +833,13 @@ export default {
       // Schlussbild
       this.loesche_zeichenflaeche();
       this.farben_anpassen(false);
-      this.zeichne_goldstuecke(false, true);
-      this.zeichne_goldminen(false);
+      this.zeichne_datenpunkte(false, true);
+      this.zeichne_prototypen(false);
 
-      this.zeige_naechste_bekannte_goldmine();
+      this.zeige_naechsten_bekannten_prototyp();
 
-      // Goldmine verschieben
-      await this.aktualisiere_pos_goldmine();
+      // prototyp verschieben
+      await this.aktualisiere_pos_prototyp();
     },
 
     async pausiere(zeitspanne) {
@@ -858,15 +853,15 @@ export default {
       });
     },
 
-    zeige_goldmine() {
+    zeige_prototyp() {
       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);
+        this.kurz_zeichne_linie_datenpunkt_prototyp();
+        this.zeige_naechsten_bekannten_prototyp();
+        this.zeichne_datenpunkte(true, true);
+        this.zeichne_prototypen(true);
 
         // Simulate some delay (you can replace this with actual animation code)
         setTimeout(() => {
@@ -875,13 +870,13 @@ export default {
       });
     },
 
-    zeige_naechste_bekannte_goldmine() {
+    zeige_naechsten_bekannten_prototyp() {
       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);
+        if (this.naechstgelegener_prototyp != null && this.akt_datenpunkt != null) {
+          this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
+          this.zeichne_datenpunkte(true, true);
+          this.zeichne_prototypen(true);
         }
 
         // Simulate some delay (you can replace this with actual animation code)
@@ -891,45 +886,45 @@ export default {
       });
     },
 
-    aktualisiere_pos_goldmine() {
+    aktualisiere_pos_prototyp() {
       return new Promise((resolve) => {
         this.farben_anpassen(false);
-        this.animate();
+        this.animieren();
 
         setTimeout(() => {
           resolve(); // Resolve the promise when the animation is done
         }, this.animation_speed * 2);
       });
     },
-    async animate() {
-      this.letzte_goldmine = this.naechste_goldmine;
+    async animieren() {
+      this.letzte_prototyp = this.naechstgelegener_prototyp;
       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 x_neu = (this.akt_datenpunkt.x + this.naechstgelegener_prototyp.x) / 2;
+      let y_neu = (this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
 
       let delta_x =
-        (this.akt_goldstueck.x - this.naechste_goldmine.x) / 2 / schritte;
+        (this.akt_datenpunkt.x - this.naechstgelegener_prototyp.x) / 2 / schritte;
       let delta_y =
-        (this.akt_goldstueck.y - this.naechste_goldmine.y) / 2 / schritte;
+        (this.akt_datenpunkt.y - this.naechstgelegener_prototyp.y) / 2 / schritte;
 
       // zeichnen definieren
       var draw = () => {
         try {
-          this.naechste_goldmine.x += delta_x;
-          this.naechste_goldmine.y += delta_y;
+          this.naechstgelegener_prototyp.x += delta_x;
+          this.naechstgelegener_prototyp.y += delta_y;
 
           this.loesche_zeichenflaeche();
           this.zeichne_hintergrund();
 
-          this.kurz_zeichne_linie_goldstueck_naechste_goldmine();
+          this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
 
-          this.zeichne_goldstuecke(true, true);
-          this.zeichne_goldminen(true);
+          this.zeichne_datenpunkte(true, true);
+          this.zeichne_prototypen(true);
 
           i++;
 
@@ -937,14 +932,14 @@ export default {
             //timestamp = Date.now();
             requestAnimationFrame(draw);
           } else {
-            this.naechste_goldmine.x = x_neu;
-            this.naechste_goldmine.y = y_neu;
+            this.naechstgelegener_prototyp.x = x_neu;
+            this.naechstgelegener_prototyp.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.letzte_prototyp.x = x_neu;
+          this.letzte_prototyp.y = y_neu;
           this.refresh();
         }
       };
@@ -958,18 +953,18 @@ export default {
     var ctx = c.getContext("2d");
     this.canvas = c;
     this.vueCanvas = ctx;
-    this.aktuelle_goldmine = 0;
+    this.aktueller_prototyp = 0;
 
     this.lade();
-    this.update_anzahl_goldstuecke(this.anzahl_goldstuecke);
-    this.update_anzahl_goldminen(this.anzahl_goldminen);
+    this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
+    this.update_anzahl_prototypen(this.anzahl_prototypen);
 
     document.onreadystatechange = () => {
       if (document.readyState == "complete") {
         this.refresh();
         this.zeichne_hintergrund();
-        this.zeichne_goldminen(false);
-        this.zeichne_goldstuecke(false, true);
+        this.zeichne_prototypen(false);
+        this.zeichne_datenpunkte(false, true);
         console.log("Page completed with image and files!");
         // fetch to next page or some code
 

src/App_Backup.vue

@@ -1,26 +0,0 @@
-<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>

src/assets/base.css

@@ -1,86 +0,0 @@
-/* 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;
-}

src/assets/datensatz_gold_rush_koordinaten.csv

@@ -1,21 +0,0 @@
-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

src/assets/logo.svg

@@ -1 +0,0 @@
-<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>

src/assets/main.css

@@ -1,35 +0,0 @@
-@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;
-  }
-}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<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>

src/generateColors.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 
 
-function generateDifferentColors(x) {
+  export function generateDifferentColors(x) {
     const colors = [];
     const step = 360 / x; // Calculate the step size for hue
   
@@ -56,5 +56,8 @@ function generateDifferentColors(x) {
   //const differentColors = generateDifferentColors(numberOfColors);
   //console.log(differentColors);
   
-  
-  module.exports = generateDifferentColors;
+  export default {
+    name: 'generateColors',
+    props: {
+    }
+  }