From 73a1ffa3675b2e08c9a61553f826840c19b02ab1 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Fri, 21 Feb 2025 16:15:55 +0100
Subject: [PATCH 01/26] added files for uml game

currently still as placeholder/with missing or wrong contents
---
 .../EditUmlGameConfigurationModal.vue         | 375 ++++++++++++++++++
 src/config.ts                                 |   1 +
 src/ts/models/umlgame-models.ts               |  13 +
 src/ts/rest-clients/umlgame-rest-client.ts    |  17 +
 4 files changed, 406 insertions(+)
 create mode 100644 src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
 create mode 100644 src/ts/models/umlgame-models.ts
 create mode 100644 src/ts/rest-clients/umlgame-rest-client.ts

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
new file mode 100644
index 0000000..fa18e6c
--- /dev/null
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -0,0 +1,375 @@
+<script setup lang="ts">
+import { saveAs } from "file-saver";
+import { arrayOf, object, string, optional, int, nullable } from "checkeasy";
+import { importConfiguration } from "@/ts/import-configuration";
+import { defineEmits, defineProps, ref, watch } from "vue";
+import {
+  TowerDefenseConfiguration,
+  ITowerDefenseQuestion,
+} from "@/ts/models/towerdefense-models";
+import {
+  getTowerDefenseConfig,
+  postTowerDefenseConfig,
+} from "@/ts/rest-clients/towerdefense-rest-client";
+import { useToast } from "vue-toastification";
+import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
+import { useRoute } from "vue-router";
+import { ITask } from "@/ts/models/overworld-models";
+import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
+
+const props = defineProps<{
+  minigame: ITask;
+  showModal: boolean;
+}>();
+
+const fields = [
+  {
+    key: "text",
+    label: "Question",
+  },
+  {
+    key: "correctAnswer",
+    label: "Correct Answer",
+  },
+  {
+    key: "wrongAnswers",
+    label: "Wrong Answers",
+  },
+  {
+    key: "remove",
+    label: "Remove",
+  },
+];
+
+const route = useRoute();
+const courseId = ref(route.params.courseId as string);
+const worldIndex = ref(route.params.worldIndex as string);
+const dungeonIndex = ref(route.params.dungeonIndex as string);
+const toast = useToast();
+const minigame = ref(props.minigame);
+const form = ref();
+const showModal = ref(props.showModal);
+let configuration = ref();
+const question = ref();
+const correctAnswer = ref();
+const showQuestionModal = ref();
+const oldMinigame = ref();
+const wrongAnswers = ref(Array<string>());
+const wrongAnswer = ref();
+
+watch(
+  () => props.minigame,
+  (newMinigame) => {
+    minigame.value = newMinigame;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.showModal,
+  (newBoolean) => {
+    showModal.value = newBoolean;
+  },
+  { deep: true }
+);
+
+watch(
+  () => [
+    route.params.courseId,
+    route.params.worldIndex,
+    route.params.dungeonIndex,
+  ],
+  (newVal) => {
+    courseId.value = newVal[0] as string;
+    worldIndex.value = newVal[1] as string;
+    dungeonIndex.value = newVal[2] as string;
+  },
+  { deep: true }
+);
+
+const emit = defineEmits<{
+  (e: "updateMinigameConfiguration", minigame: ITask): void;
+  (e: "closedModal"): void;
+}>();
+
+function checkFormValidity(): boolean {
+  return form.value.checkValidity();
+}
+
+function resetModal() {
+  if (minigame.value.configurationId != undefined) {
+    /*getTowerDefenseConfig(minigame.value.configurationId)
+      .then((response) => {
+        configuration.value = response.data;
+      })
+      .catch((error) => {
+        console.log(error);
+        if (error.response.status == 404) {
+          minigame.value.configurationId = undefined;
+          configuration.value.questions = [];
+        }
+      });*/
+    oldMinigame.value = minigame.value;
+  } else {
+    configuration.value.id = undefined;
+    configuration.value.questions = [];
+    oldMinigame.value = minigame.value;
+  }
+  console.log("Reset Modal");
+}
+
+function handleOk() {
+  /*postTowerDefenseConfig(configuration.value)
+    .then((response) => {
+      minigame.value.configurationId = response.data.id;
+      console.log("Submit Modal");
+      console.log("id:" + response.data.id);
+      console.log("minigameId" + minigame.value.configurationId);
+      oldMinigame.value = minigame.value;
+      handleSubmit();
+    })
+    .then(() => {
+      putMinigame(
+        parseInt(courseId.value),
+        parseInt(worldIndex.value),
+        parseInt(dungeonIndex.value),
+        minigame.value
+      );
+    })
+    .catch((error) => {
+      const statusCode = error.response.status;
+      const errorMessages = error.response.data.errors;
+      if (statusCode == 400) {
+        for (let errorMessage of errorMessages) {
+          toast.error("Error while saving configuration: " + errorMessage);
+        }
+      } else {
+        toast.error("There was an error saving the configuration!");
+      }
+    });*/
+}
+
+function handleSubmit() {
+  // Exit when the form isn't valid
+  if (!checkFormValidity()) {
+    return;
+  }
+  emit("updateMinigameConfiguration", minigame.value);
+}
+
+function hiddenModal() {
+  if (!showQuestionModal.value) {
+    oldMinigame.value = null;
+    console.log("Test");
+  }
+  console.log("Modal hidden");
+  emit("closedModal");
+}
+
+function loadModal() {
+  if (oldMinigame.value != null) {
+    if (oldMinigame.value.id != minigame.value.id) {
+      resetModal();
+    }
+  } else {
+    resetModal();
+  }
+}
+
+function removeQuestion(text: string) {
+  /*let filteredQuestions: ITowerDefenseQuestion[] = [];
+  configuration.value.questions.forEach((innerQuestion) => {
+    if (innerQuestion.text != text) {
+      filteredQuestions.push(innerQuestion);
+    }
+  });
+  console.log(filteredQuestions);
+  configuration.value.questions = filteredQuestions;*/
+}
+
+function handleQuestionOk() {
+  //removes the need to press add
+  if (wrongAnswer.value != "") {
+    wrongAnswers.value.push(wrongAnswer.value);
+  }
+  let contains = false;
+  configuration.value.questions.forEach((pQuestion) => {
+    if (pQuestion.text == question.value) {
+      contains = true;
+    }
+  });
+  if (!contains) {
+    configuration.value.questions.push({
+      text: question.value,
+      correctAnswer: correctAnswer.value,
+      wrongAnswers: wrongAnswers.value,
+    });
+  } else {
+    toast.error("Question already exists.");
+  }
+  showModal.value = true;
+}
+
+function handleQuestionAbort() {
+  showModal.value = true;
+}
+
+function resetQuestionModal() {
+  question.value = "";
+  correctAnswer.value = "";
+  wrongAnswers.value = [];
+  wrongAnswer.value = "";
+}
+
+function addWrongAnswer() {
+  wrongAnswers.value.push(wrongAnswer.value);
+  wrongAnswer.value = "";
+}
+
+function downloadConfiguration() {
+  /*const { ["id"]: unused, ...clonedConfiguration } = configuration.value;
+  const clonedQuestions = Array<ITowerDefenseQuestion>();
+  for (let innerQuestion of configuration.value.questions) {
+    const { ["id"]: unused, ...clonedQuestion } = innerQuestion;
+    clonedQuestions.push(clonedQuestion);
+  }
+  clonedConfiguration.questions = clonedQuestions;
+  const blob = new Blob([JSON.stringify(clonedConfiguration)], {
+    type: "text/json",
+  });
+  saveAs(blob, "towerdefense-configuration.json");*/
+}
+async function importFile(event: any) {
+  /*const file = event.target.files[0];
+  const validator = object({
+    questions: arrayOf(
+      object({
+        text: string(),
+        correctAnswer: string(),
+        wrongAnswers: arrayOf(string()),
+      })
+    ),
+    volumeLevel: optional(nullable(int())),
+  });
+  try {
+    const result: TowerDefenseConfiguration = await importConfiguration(
+      file,
+      validator,
+      toast
+    );
+    configuration.value = result;
+  } catch (e) {
+    console.log("Import was not successful");
+  }*/
+}
+</script>
+<template>
+  <b-modal
+    title="Edit UML-Game configuration"
+    id="edit-modal"
+    v-model="showModal"
+    @hidden="hiddenModal"
+    @ok="handleOk"
+    @cancel="resetModal"
+    @show="loadModal"
+    @abort="resetModal"
+  >
+    <form
+      ref="form"
+      @submit.stop.prevent="handleSubmit"
+      v-if="minigame !== undefined"
+    >
+      <b-form-group>
+        <b-button
+          variant="success"
+          id="add-question-button"
+          v-b-modal.add-question-towerdefense
+        >
+          Add question
+        </b-button>
+      </b-form-group>
+      <b-form-group>
+        <b-table
+          :fields="fields"
+          :items="configuration.questions"
+          class="questionTable"
+        >
+          <template #cell(text)="data">
+            <div class="questionTable">
+              <span>{{ data.value }}</span>
+            </div>
+          </template>
+
+          <template #cell(rightAnswer)="data">
+            <div class="questionTable">
+              <span>{{ data.value }}</span>
+            </div>
+          </template>
+
+          <template #cell(wrongAnswers)="data">
+            <div
+              v-for="answer in data.value"
+              :key="answer"
+              class="questionTable"
+            >
+              <span>{{ answer }}</span>
+            </div>
+          </template>
+
+          <template #cell(remove)="row">
+            <b-button
+              size="sm"
+              variant="danger"
+              @click="removeQuestion(row.item.text)"
+            >
+              <em class="bi bi-trash"></em>
+            </b-button>
+          </template>
+        </b-table>
+      </b-form-group>
+    </form>
+    <ImportExportConfiguration
+      @export="downloadConfiguration"
+      @importFile="importFile"
+    />
+  </b-modal>
+  <b-modal
+    id="add-question-uml-game"
+    title="Add Question to UML-Game configuration"
+    v-model="showQuestionModal"
+    @hidden="resetQuestionModal"
+    @show="resetQuestionModal"
+    @ok="handleQuestionOk"
+    @cancel="handleQuestionAbort"
+  >
+    <b-form-group label="Question" label-for="question-input">
+      <b-form-textarea id="question-input" v-model="question" required />
+    </b-form-group>
+    <b-form-group label="Correct Answer" label-for="correct-answer">
+      <b-form-textarea id="correct-answer" v-model="correctAnswer" required />
+    </b-form-group>
+    <b-form-group label="Wrong Answers">
+      <div v-for="answer in wrongAnswers" :key="answer" class="questionTable">
+        {{ answer }}
+      </div>
+      <div>
+        <b-form-textarea
+          @keydown.enter="addWrongAnswer"
+          id="wrong-answer"
+          v-model="wrongAnswer"
+        ></b-form-textarea>
+        <b-button
+          @click="addWrongAnswer"
+          variant="success"
+          id="button-wrong-answer"
+          >Add</b-button
+        >
+      </div>
+    </b-form-group>
+  </b-modal>
+</template>
+<style scoped>
+.questionTable {
+  word-wrap: anywhere;
+}
+</style>
diff --git a/src/config.ts b/src/config.ts
index 5b1dd97..1c83726 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,4 +10,5 @@ export default {
   memoryApiUrl: "/minigames/memory/api/v1",
   regexgameApiUrl: "/minigames/regexgame/api/v1",
   towerdefenseApiUrl: "/minigames/towerdefense/api/v1",
+  umlGameApiUrl: "/minigames/umlgame/api/v1",
 };
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
new file mode 100644
index 0000000..556c8b4
--- /dev/null
+++ b/src/ts/models/umlgame-models.ts
@@ -0,0 +1,13 @@
+// TODO: implement, currently placeholders
+export interface IUmlGameConfiguration {
+  id?: string;
+  graph: {};
+}
+
+export class UmlGameConfiguration implements IUmlGameConfiguration {
+  id?: string;
+  graph: {};
+  public constructor(graph: {}) {
+    this.graph = graph;
+  }
+}
\ No newline at end of file
diff --git a/src/ts/rest-clients/umlgame-rest-client.ts b/src/ts/rest-clients/umlgame-rest-client.ts
new file mode 100644
index 0000000..9282996
--- /dev/null
+++ b/src/ts/rest-clients/umlgame-rest-client.ts
@@ -0,0 +1,17 @@
+import axios, { AxiosResponse } from "axios";
+
+import config from "@/config";
+
+import { IUmlGameConfiguration } from "@/ts/models/umlgame-models";
+
+export async function postUmlGameConfig(umlGameConfig: IUmlGameConfiguration
+): Promise<AxiosResponse> {
+  return axios.post(
+    `${config.umlGameApiUrl}/configurations`,
+    umlGameConfig
+  );
+}
+
+export async function getUmlGameConfig(id: string): Promise<AxiosResponse> {
+  return axios.get(`${config.umlGameApiUrl}/configurations/${id}`);
+}

From da848f6836fca1a67d47a514e662c60a146ce537 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Mon, 17 Mar 2025 19:15:31 +0100
Subject: [PATCH 02/26] enabled uml game selection

---
 docker-compose-dev.yaml                            |  8 --------
 .../EditUmlGameConfigurationModal.vue              |  2 +-
 src/ts/models/overworld-models.ts                  |  1 +
 src/views/MinigameTasksView.vue                    | 14 +++++++++++++-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index 758309c..4ca2529 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -369,14 +369,6 @@ services:
     expose:
       - "80" 
     
-  towerdefense:
-    container_name: towerdefense
-    image: ghcr.io/gamify-it/towerdefense:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80" 
-
   towerdefense:
     container_name: towerdefense
     image: ghcr.io/gamify-it/towerdefense:main
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index fa18e6c..a4778ea 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -283,7 +283,7 @@ async function importFile(event: any) {
         <b-button
           variant="success"
           id="add-question-button"
-          v-b-modal.add-question-towerdefense
+          v-b-modal.add-question-uml-game
         >
           Add question
         </b-button>
diff --git a/src/ts/models/overworld-models.ts b/src/ts/models/overworld-models.ts
index e2785b6..9af7dd9 100644
--- a/src/ts/models/overworld-models.ts
+++ b/src/ts/models/overworld-models.ts
@@ -109,6 +109,7 @@ export enum Minigame {
   REGEXGAME = "REGEXGAME",
   TOWERCRUSH = "TOWERCRUSH",
   TOWERDEFENSE = "TOWERDEFENSE",
+  UMLGAME = "UMLGAME",
 }
 
 export class Course implements ICourse {
diff --git a/src/views/MinigameTasksView.vue b/src/views/MinigameTasksView.vue
index 1755989..47abac3 100644
--- a/src/views/MinigameTasksView.vue
+++ b/src/views/MinigameTasksView.vue
@@ -20,6 +20,7 @@ import MapImageModal from "@/components/MapImageModal.vue";
 import EditBugfinderConifgurationModal from "@/components/EditMinigameModals/EditBugfinderConfigurationModal.vue";
 import router from "@/router";
 import { getCourse } from "@/ts/rest-clients/course-rest-client";
+import EditUmlGameConfigurationModal from "@/components/EditMinigameModals/EditUmlGameConfigurationModal.vue";
 
 const availableMinigames = Object.values(Minigame);
 
@@ -47,6 +48,7 @@ const showBugfinderModal = ref(false);
 const showMemoryModal = ref(false);
 const showRegexGameModal = ref(false);
 const showTowerDefenseModal = ref(false);
+const showUMLGameModal = ref(false);
 const courseName = ref<string>("");
 
 watch(
@@ -330,7 +332,7 @@ function changedMinigame(task: ITask) {
   ).then((response) => {
     task = response.data;
     toast.success(
-      `Minigame in ${courseName.value} was updated to ${task.game}! )`
+      `Minigame in ${courseName.value} was updated to ${task.game}!`
     );
     console.log(
       "Changed minigame to " + task.game + " in course " + courseName.value
@@ -369,6 +371,9 @@ function editMinigameConfiguration(task: ITask) {
     case Minigame.TOWERDEFENSE:
       showTowerDefenseModal.value = true;
       break;
+    case Minigame.UMLGAME:
+      showUMLGameModal.value = true;
+      break;
     default:
       console.log(
         "This minigame is currently not supported to be edited here."
@@ -411,6 +416,7 @@ function closedEditModal() {
   showMemoryModal.value = false;
   showRegexGameModal.value = false;
   showTowerDefenseModal.value = false;
+  showUMLGameModal.value = false;
 }
 
 function redirectToStatisticView(task: ITask) {
@@ -568,4 +574,10 @@ function redirectToStatisticView(task: ITask) {
     @updateMinigameConfiguration="updateMinigameConfiguration"
     @closedModal="closedEditModal"
   />
+  <EditUmlGameConfigurationModal
+    :showModal="showUMLGameModal"
+    :minigame="editedMinigame"
+    @updateMinigameConfiguration="updateMinigameConfiguration"
+    @closedModal="closedEditModal"
+  />
 </template>

From 5fe23c28bdd1cd6937959d15f58e7e6b39509790 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Wed, 2 Apr 2025 14:53:51 +0200
Subject: [PATCH 03/26] added uml game to docker files

---
 .nginx/compose/nginx-dev.conf |  8 ++++++++
 .nginx/compose/nginx.conf     |  8 ++++++++
 docker-compose-dev.yaml       | 34 ++++++++++++++++++++++++++++++++++
 docker-compose.yaml           | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+)

diff --git a/.nginx/compose/nginx-dev.conf b/.nginx/compose/nginx-dev.conf
index 4f79692..2eb8853 100644
--- a/.nginx/compose/nginx-dev.conf
+++ b/.nginx/compose/nginx-dev.conf
@@ -44,6 +44,10 @@ server {
         proxy_pass      http://towercrush-backend/api/;
     }
 
+    location /minigames/umlgame/api/ {
+        proxy_pass      http://umlgame-backend/api;
+    }
+
     location /minigames/towerdefense/api/ {
         proxy_pass      http://towerdefense-backend/api/;
     }
@@ -84,6 +88,10 @@ server {
         proxy_pass      http://towercrush/;
     }
 
+    location /minigames/umlgame/ {
+        proxy_pass      http://umlgame/;
+    }
+
     location /minigames/towerdefense/ {
         proxy_pass      http://towerdefense/;
     }
diff --git a/.nginx/compose/nginx.conf b/.nginx/compose/nginx.conf
index 69cd48f..2dfbdc4 100644
--- a/.nginx/compose/nginx.conf
+++ b/.nginx/compose/nginx.conf
@@ -48,6 +48,10 @@ server {
         proxy_pass      http://towercrush-backend/api/;
     }
 
+    location /minigames/umlgame/api/ {
+        proxy_pass      http://umlgame-backend/api;
+    }
+
     location /minigames/towerdefense/api/ {
         proxy_pass      http://towerdefense-backend/api/;
     }
@@ -84,6 +88,10 @@ server {
         proxy_pass      http://towercrush/;
     }
 
+    location /minigames/umlgame/ {
+        proxy_pass      http://umlgame/;
+    }
+
     location /minigames/towerdefense/ {
         proxy_pass      http://towerdefense/;
     }
diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index 4ca2529..1daba8a 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -115,6 +115,16 @@ services:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
 
+  umlgame-db:
+    container_name: umlgame-db
+    image: postgres:14-alpine
+    restart: always
+    ports:
+      - "5432:5432"
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+
   #backends
   keycloak:
     container_name: keycloak
@@ -296,6 +306,22 @@ services:
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
+  umlgame-backend:
+    container_name: umlgame-backend
+    image: ghcr.io/gamify-it/umlgame-backend:main
+    restart: always
+    expose:
+      - "80"
+    depends_on:
+      - umlgame-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+
   #frontends
   landing-page:
     container_name: landing-page
@@ -377,6 +403,14 @@ services:
     expose:
       - "80"
 
+  umlgame:
+    container_name: umlgame
+    image: ghcr.io/gamify-it/umlgame:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+
   # reverse-proxy
   reverse-proxy:
     container_name: reverse-proxy
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 024e52b..62c89a9 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -96,6 +96,16 @@ services:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
 
+  umlgame-db:
+    container_name: umlgame-db
+    image: postgres:14-alpine
+    restart: always
+    ports:
+      - "5432:5432"
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+
   #backends
   keycloak:
     container_name: keycloak
@@ -241,6 +251,22 @@ services:
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
+  umlgame-backend:
+    container_name: umlgame-backend
+    image: ghcr.io/gamify-it/umlgame-backend:main
+    restart: always
+    expose:
+      - "80"
+    depends_on:
+      - umlgame-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+
   #frontends
   landing-page:
     container_name: landing-page
@@ -312,6 +338,14 @@ services:
     expose:
       - "80"
 
+  umlgame:
+    container_name: umlgame
+    image: ghcr.io/gamify-it/umlgame:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+
   # reverse-proxy
   reverse-proxy:
     container_name: reverse-proxy

From cafcd955d7cefe71420aea5cbf8642c67b23a753 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Wed, 2 Apr 2025 21:12:43 +0200
Subject: [PATCH 04/26] selection mock

---
 .gitignore                                    |   1 +
 .nginx/compose/nginx-dev.conf                 | 140 +++---
 docker-compose-dev.yaml                       | 452 +++++++++---------
 .../EditUmlGameConfigurationModal.vue         |  50 +-
 src/config.ts                                 |   2 +-
 src/ts/models/umlgame-models.ts               |   4 +-
 src/ts/rest-clients/umlgame-rest-client.ts    |  10 +-
 7 files changed, 316 insertions(+), 343 deletions(-)

diff --git a/.gitignore b/.gitignore
index f37f3ea..435cd2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 /coverage
+.prettierignore
 
 # local env files
 .env.local
diff --git a/.nginx/compose/nginx-dev.conf b/.nginx/compose/nginx-dev.conf
index 2eb8853..625ef82 100644
--- a/.nginx/compose/nginx-dev.conf
+++ b/.nginx/compose/nginx-dev.conf
@@ -16,41 +16,41 @@ server {
         proxy_pass      http://keycloak/keycloak/;
     }
 
-    location /minigames/bugfinder/api/ {
-        proxy_pass      http://bugfinder-backend/api/;
-    }
-
-    location /minigames/chickenshock/api/ {
-        proxy_pass      http://chickenshock-backend/api/;
-    }
-    
-    location /minigames/finitequiz/api/ {
-        proxy_pass      http://finitequiz-backend/api/;
-    }
-
-    location /minigames/crosswordpuzzle/api/ {
-        proxy_pass      http://crosswordpuzzle-backend/api/;
-    }
-
-    location /minigames/memory/api/ {
-        proxy_pass      http://memory-backend/api/;
-    }
-
-    location /minigames/regexgame/api/ {
-        proxy_pass      http://regexgame-backend/api/;
-    }
-
-    location /minigames/towercrush/api/ {
-        proxy_pass      http://towercrush-backend/api/;
-    }
-
-    location /minigames/umlgame/api/ {
-        proxy_pass      http://umlgame-backend/api;
-    }
-
-    location /minigames/towerdefense/api/ {
-        proxy_pass      http://towerdefense-backend/api/;
-    }
+    #location /minigames/bugfinder/api/ {
+    #    proxy_pass      http://bugfinder-backend/api/;
+    #}
+    #
+    #location /minigames/chickenshock/api/ {
+    #    proxy_pass      http://chickenshock-backend/api/;
+    #}
+    #
+    #location /minigames/finitequiz/api/ {
+    #    proxy_pass      http://finitequiz-backend/api/;
+    #}
+    #
+    #location /minigames/crosswordpuzzle/api/ {
+    #    proxy_pass      http://crosswordpuzzle-backend/api/;
+    #}
+    #
+    #location /minigames/memory/api/ {
+    #    proxy_pass      http://memory-backend/api/;
+    #}
+    #
+    #location /minigames/regexgame/api/ {
+    #    proxy_pass      http://regexgame-backend/api/;
+    #}
+    #
+    #location /minigames/towercrush/api/ {
+    #    proxy_pass      http://towercrush-backend/api/;
+    #}
+    #
+    #location /minigames/umlgame/api/ {
+    #    proxy_pass      http://umlgame-backend/api;
+    #}
+    #
+    #location /minigames/towerdefense/api/ {
+    #    proxy_pass      http://towerdefense-backend/api/;
+    #}
 
     location /overworld/api/ {
         proxy_pass      http://overworld-backend/api/;
@@ -60,41 +60,41 @@ server {
         proxy_pass      http://overworld/;
     }
 
-    location /minigames/chickenshock/ {
-        proxy_pass      http://chickenshock/;
-    }
-
-    location /minigames/bugfinder/ {
-        proxy_pass      http://bugfinder/;
-    }
-
-    location /minigames/finitequiz/ {
-        proxy_pass      http://finitequiz/;
-    }
-
-    location /minigames/crosswordpuzzle/ {
-        proxy_pass      http://crosswordpuzzle/;
-    }
-
-    location /minigames/memory/ {
-        proxy_pass      http://memory/;
-    }
-
-    location /minigames/regexgame/ {
-        proxy_pass      http://regexgame/;
-    }
-
-    location /minigames/towercrush/ {
-        proxy_pass      http://towercrush/;
-    }
-
-    location /minigames/umlgame/ {
-        proxy_pass      http://umlgame/;
-    }
-
-    location /minigames/towerdefense/ {
-        proxy_pass      http://towerdefense/;
-    }
+    #location /minigames/chickenshock/ {
+    #    proxy_pass      http://chickenshock/;
+    #}
+    #
+    #location /minigames/bugfinder/ {
+    #    proxy_pass      http://bugfinder/;
+    #}
+    #
+    #location /minigames/finitequiz/ {
+    #    proxy_pass      http://finitequiz/;
+    #}
+    #
+    #location /minigames/crosswordpuzzle/ {
+    #    proxy_pass      http://crosswordpuzzle/;
+    #}
+    #
+    #location /minigames/memory/ {
+    #    proxy_pass      http://memory/;
+    #}
+    #
+    #location /minigames/regexgame/ {
+    #    proxy_pass      http://regexgame/;
+    #}
+    #
+    #location /minigames/towercrush/ {
+    #    proxy_pass      http://towercrush/;
+    #}
+    #
+    #location /minigames/umlgame/ {
+    #    proxy_pass      http://umlgame/;
+    #}
+    #
+    #location /minigames/towerdefense/ {
+    #    proxy_pass      http://towerdefense/;
+    #}
 
     location /lecturer-interface/ {
         proxy_pass      http://host.docker.internal:8000/lecturer-interface/;
diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index 1daba8a..6d6847b 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -89,8 +89,8 @@ services:
     container_name: regexgame-db
     image: postgres:14-alpine
     restart: always
-    ports:
-      - "5432:5432"
+    expose:
+      - "5432"
     environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
@@ -119,8 +119,8 @@ services:
     container_name: umlgame-db
     image: postgres:14-alpine
     restart: always
-    ports:
-      - "5432:5432"
+    expose:
+      - "5432"
     environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
@@ -170,157 +170,157 @@ services:
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
-  chickenshock-backend:
-    container_name: chickenshock-backend
-    image: ghcr.io/gamify-it/chickenshock-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - chickenshock-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  bugfinder-backend:
-    container_name: bugfinder-backend
-    image: ghcr.io/gamify-it/bugfinder-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - bugfinder-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  finitequiz-backend:
-    container_name: finitequiz-backend
-    image: ghcr.io/gamify-it/finitequiz-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - chickenshock-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  crosswordpuzzle-backend:
-    container_name: crosswordpuzzle-backend
-    image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - crosswordpuzzle-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  memory-backend:
-    container_name: memory-backend
-    image: ghcr.io/gamify-it/memory-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - memory-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://memory-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  regexgame-backend:
-    container_name: regexgame-backend
-    image: ghcr.io/gamify-it/regexgame-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - regexgame-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  towercrush-backend:
-    container_name: towercrush-backend
-    image: ghcr.io/gamify-it/towercrush-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - towercrush-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  towerdefense-backend:
-    container_name: towerdefense-backend
-    image: ghcr.io/gamify-it/towerdefense-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - towerdefense-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-
-  umlgame-backend:
-    container_name: umlgame-backend
-    image: ghcr.io/gamify-it/umlgame-backend:main
-    restart: always
-    expose:
-      - "80"
-    depends_on:
-      - umlgame-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#chickenshock-backend:
+#  container_name: chickenshock-backend
+#  image: ghcr.io/gamify-it/chickenshock-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - chickenshock-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+#bugfinder-backend:
+#  container_name: bugfinder-backend
+#  image: ghcr.io/gamify-it/bugfinder-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - bugfinder-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+#finitequiz-backend:
+#  container_name: finitequiz-backend
+#  image: ghcr.io/gamify-it/finitequiz-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - chickenshock-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+#crosswordpuzzle-backend:
+#  container_name: crosswordpuzzle-backend
+#  image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - crosswordpuzzle-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+#memory-backend:
+#  container_name: memory-backend
+#  image: ghcr.io/gamify-it/memory-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - memory-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://memory-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+#regexgame-backend:
+#  container_name: regexgame-backend
+#  image: ghcr.io/gamify-it/regexgame-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - regexgame-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+#towercrush-backend:
+#  container_name: towercrush-backend
+#  image: ghcr.io/gamify-it/towercrush-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - towercrush-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+#towerdefense-backend:
+#  container_name: towerdefense-backend
+#  image: ghcr.io/gamify-it/towerdefense-backend:main
+#  restart: always
+#  pull_policy: always
+#  expose:
+#    - "80"
+#  depends_on:
+#    - towerdefense-db
+#  environment:
+#    - POSTGRES_USER=postgres
+#    - POSTGRES_PASSWORD=postgres
+#    - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
+#    - OVERWORLD_URL=http://overworld-backend/api/v1
+#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+#
+  #umlgame-backend:
+  #  container_name: umlgame-backend
+  #  image: ghcr.io/gamify-it/umlgame-backend:main
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - umlgame-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
   #frontends
   landing-page:
@@ -339,77 +339,77 @@ services:
     expose:
       - "80"
 
-  chickenshock:
-    container_name: chickenshock
-    image: ghcr.io/gamify-it/chickenshock:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  finitequiz:
-    container_name: finitequiz
-    image: ghcr.io/gamify-it/finitequiz:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  crosswordpuzzle:
-    container_name: crosswordpuzzle
-    image: ghcr.io/gamify-it/crosswordpuzzle:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  bugfinder:
-    container_name: bugfinder
-    image: ghcr.io/gamify-it/bugfinder:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  memory:
-    container_name: memory
-    image: ghcr.io/gamify-it/memory:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  regexgame:
-    container_name: regexgame
-    image: ghcr.io/gamify-it/regexgame:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-    
-  towercrush:
-    container_name: towercrush
-    image: ghcr.io/gamify-it/towercrush:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80" 
-    
-  towerdefense:
-    container_name: towerdefense
-    image: ghcr.io/gamify-it/towerdefense:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  umlgame:
-    container_name: umlgame
-    image: ghcr.io/gamify-it/umlgame:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
+  #chickenshock:
+  #  container_name: chickenshock
+  #  image: ghcr.io/gamify-it/chickenshock:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #finitequiz:
+  #  container_name: finitequiz
+  #  image: ghcr.io/gamify-it/finitequiz:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #crosswordpuzzle:
+  #  container_name: crosswordpuzzle
+  #  image: ghcr.io/gamify-it/crosswordpuzzle:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #bugfinder:
+  #  container_name: bugfinder
+  #  image: ghcr.io/gamify-it/bugfinder:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #memory:
+  #  container_name: memory
+  #  image: ghcr.io/gamify-it/memory:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #regexgame:
+  #  container_name: regexgame
+  #  image: ghcr.io/gamify-it/regexgame:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #towercrush:
+  #  container_name: towercrush
+  #  image: ghcr.io/gamify-it/towercrush:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #towerdefense:
+  #  container_name: towerdefense
+  #  image: ghcr.io/gamify-it/towerdefense:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+
+  #umlgame:
+   # container_name: umlgame
+    #image: ghcr.io/gamify-it/umlgame:main
+   # restart: always
+    #pull_policy: always
+    #expose:
+     # - "80"
 
   # reverse-proxy
   reverse-proxy:
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index a4778ea..3611d10 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -16,6 +16,7 @@ import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
 import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
+import { BFormRow, BTable } from "bootstrap-vue-3";
 
 const props = defineProps<{
   minigame: ITask;
@@ -280,51 +281,21 @@ async function importFile(event: any) {
       v-if="minigame !== undefined"
     >
       <b-form-group>
-        <b-button
-          variant="success"
-          id="add-question-button"
-          v-b-modal.add-question-uml-game
-        >
-          Add question
-        </b-button>
-      </b-form-group>
-      <b-form-group>
-        <b-table
-          :fields="fields"
-          :items="configuration.questions"
-          class="questionTable"
-        >
-          <template #cell(text)="data">
-            <div class="questionTable">
-              <span>{{ data.value }}</span>
-            </div>
-          </template>
-
-          <template #cell(rightAnswer)="data">
-            <div class="questionTable">
-              <span>{{ data.value }}</span>
-            </div>
+        <b-table :fields="['name', 'select', 'edit']" :items="['1', '2', '3', '4', '5', '6', '7', '8']">
+          <template #cell(name)="data">
+            Task {{ data.item }}:
           </template>
 
-          <template #cell(wrongAnswers)="data">
-            <div
-              v-for="answer in data.value"
-              :key="answer"
-              class="questionTable"
-            >
-              <span>{{ answer }}</span>
-            </div>
+          <template #cell(select)="">
+            <b-form-select :options="['Completion', 'Error hunt', 'Code -> UML', 'UML -> Code']" required/>
           </template>
 
-          <template #cell(remove)="row">
-            <b-button
-              size="sm"
-              variant="danger"
-              @click="removeQuestion(row.item.text)"
-            >
-              <em class="bi bi-trash"></em>
+          <template #cell(edit)="">
+            <b-button variant="outline-primary" @click="console.log('open edit modal' + num)">
+              Edit Task
             </b-button>
           </template>
+
         </b-table>
       </b-form-group>
     </form>
@@ -333,6 +304,7 @@ async function importFile(event: any) {
       @importFile="importFile"
     />
   </b-modal>
+
   <b-modal
     id="add-question-uml-game"
     title="Add Question to UML-Game configuration"
diff --git a/src/config.ts b/src/config.ts
index 1c83726..8b27aea 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,5 +10,5 @@ export default {
   memoryApiUrl: "/minigames/memory/api/v1",
   regexgameApiUrl: "/minigames/regexgame/api/v1",
   towerdefenseApiUrl: "/minigames/towerdefense/api/v1",
-  umlGameApiUrl: "/minigames/umlgame/api/v1",
+  umlgameApiUrl: "/minigames/umlgame/api/v1",
 };
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 556c8b4..14df024 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -1,10 +1,10 @@
 // TODO: implement, currently placeholders
-export interface IUmlGameConfiguration {
+export interface IUmlgameConfiguration {
   id?: string;
   graph: {};
 }
 
-export class UmlGameConfiguration implements IUmlGameConfiguration {
+export class UmlgameConfiguration implements IUmlgameConfiguration {
   id?: string;
   graph: {};
   public constructor(graph: {}) {
diff --git a/src/ts/rest-clients/umlgame-rest-client.ts b/src/ts/rest-clients/umlgame-rest-client.ts
index 9282996..91fb509 100644
--- a/src/ts/rest-clients/umlgame-rest-client.ts
+++ b/src/ts/rest-clients/umlgame-rest-client.ts
@@ -2,16 +2,16 @@ import axios, { AxiosResponse } from "axios";
 
 import config from "@/config";
 
-import { IUmlGameConfiguration } from "@/ts/models/umlgame-models";
+import { IUmlgameConfiguration } from "@/ts/models/umlgame-models";
 
-export async function postUmlGameConfig(umlGameConfig: IUmlGameConfiguration
+export async function postUmlgameConfig(umlGameConfig: IUmlgameConfiguration
 ): Promise<AxiosResponse> {
   return axios.post(
-    `${config.umlGameApiUrl}/configurations`,
+    `${config.umlgameApiUrl}/configurations`,
     umlGameConfig
   );
 }
 
-export async function getUmlGameConfig(id: string): Promise<AxiosResponse> {
-  return axios.get(`${config.umlGameApiUrl}/configurations/${id}`);
+export async function getUmlgameConfig(id: string): Promise<AxiosResponse> {
+  return axios.get(`${config.umlgameApiUrl}/configurations/${id}`);
 }

From 09dc707811038daefa2655759e968b83b5cf778b Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 3 Apr 2025 18:39:45 +0200
Subject: [PATCH 05/26] expanded edit modal

---
 package-lock.json                             |  11 +
 package.json                                  |   1 +
 .../EditUmlGameConfigurationModal.vue         | 190 ++++++++----------
 src/ts/models/umlgame-models.ts               |  26 ++-
 src/ts/rest-clients/umlgame-rest-client.ts    |   4 +-
 5 files changed, 117 insertions(+), 115 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4fc985e..953eb05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "lecturer-interface",
       "version": "0.1.0",
       "dependencies": {
+        "@joint/core": "^4.1.3",
         "@popperjs/core": "^2.11.5",
         "axios": "^0.27.2",
         "bootstrap": "^5.2.0",
@@ -1104,6 +1105,11 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/@joint/core": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@joint/core/-/core-4.1.3.tgz",
+      "integrity": "sha512-X769blCoVxtx6NNm/cbHDXDOa+Gt7eZwrJMLnqJw8c5NkjmcYWCY1kA3ep8RfRRVG76f3QLNd9a8Q/aItI/WWw=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -13955,6 +13961,11 @@
         "chalk": "^4.0.0"
       }
     },
+    "@joint/core": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@joint/core/-/core-4.1.3.tgz",
+      "integrity": "sha512-X769blCoVxtx6NNm/cbHDXDOa+Gt7eZwrJMLnqJw8c5NkjmcYWCY1kA3ep8RfRRVG76f3QLNd9a8Q/aItI/WWw=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
diff --git a/package.json b/package.json
index 349403d..ade0b1c 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@joint/core": "^4.1.3",
     "@popperjs/core": "^2.11.5",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 3611d10..38715dd 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -1,22 +1,13 @@
 <script setup lang="ts">
-import { saveAs } from "file-saver";
-import { arrayOf, object, string, optional, int, nullable } from "checkeasy";
-import { importConfiguration } from "@/ts/import-configuration";
 import { defineEmits, defineProps, ref, watch } from "vue";
-import {
-  TowerDefenseConfiguration,
-  ITowerDefenseQuestion,
-} from "@/ts/models/towerdefense-models";
-import {
-  getTowerDefenseConfig,
-  postTowerDefenseConfig,
-} from "@/ts/rest-clients/towerdefense-rest-client";
+import { TaskType, UmlgameConfiguration, UmlTask } from "@/ts/models/umlgame-models";
 import { useToast } from "vue-toastification";
-import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
 import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
-import { BFormRow, BTable } from "bootstrap-vue-3";
+import { BFormSelect, BFormTextarea, BTable } from "bootstrap-vue-3";
+import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
+import { putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
 
 const props = defineProps<{
   minigame: ITask;
@@ -25,20 +16,16 @@ const props = defineProps<{
 
 const fields = [
   {
-    key: "text",
-    label: "Question",
-  },
-  {
-    key: "correctAnswer",
-    label: "Correct Answer",
+    key: "task",
+    label: "Task",
   },
   {
-    key: "wrongAnswers",
-    label: "Wrong Answers",
+    key: "selection",
+    label: "Tasktype",
   },
   {
-    key: "remove",
-    label: "Remove",
+    key: "edit",
+    label: "Edit",
   },
 ];
 
@@ -50,13 +37,17 @@ const toast = useToast();
 const minigame = ref(props.minigame);
 const form = ref();
 const showModal = ref(props.showModal);
-let configuration = ref();
-const question = ref();
-const correctAnswer = ref();
-const showQuestionModal = ref();
+let configuration = ref(new UmlgameConfiguration([]));
+const showCompletionTaskModal = ref(false);
+const showErrorhuntTaskModal = ref(false);
 const oldMinigame = ref();
-const wrongAnswers = ref(Array<string>());
-const wrongAnswer = ref();
+// TODO: adapt to available modes
+const taskText = ref();
+const selected = null;
+// Here are the parameters you need to adapt when expanding the game
+const selectionOptions = [{value: TaskType.COMPLETION, text:'Completion'}, {value: TaskType.ERRORHUNT, text:'Error hunt'},
+  {value: TaskType.CODETOUML, text:'Code -> UML'}, {value: TaskType.UMLTOCODE, text:'UML -> Code'}];
+const numberOfQuestions = 42;
 
 watch(
   () => props.minigame,
@@ -98,6 +89,7 @@ function checkFormValidity(): boolean {
 }
 
 function resetModal() {
+  //TODO
   if (minigame.value.configurationId != undefined) {
     /*getTowerDefenseConfig(minigame.value.configurationId)
       .then((response) => {
@@ -112,15 +104,24 @@ function resetModal() {
       });*/
     oldMinigame.value = minigame.value;
   } else {
-    configuration.value.id = undefined;
-    configuration.value.questions = [];
     oldMinigame.value = minigame.value;
   }
   console.log("Reset Modal");
 }
+const openedIndex = ref();
+function onEditClick(type: TaskType, index: number) {
+  // TODO: editObject.value = edit;
+  openedIndex.value = index;
+  switch (type) {
+    case TaskType.COMPLETION: showCompletionTaskModal.value = true; break;
+    case TaskType.ERRORHUNT: showErrorhuntTaskModal.value = true; break;
+  }
+}
 
 function handleOk() {
-  /*postTowerDefenseConfig(configuration.value)
+  //TODO
+  console.log("putting")
+  putUmlgameConfig(configuration.value)
     .then((response) => {
       minigame.value.configurationId = response.data.id;
       console.log("Submit Modal");
@@ -147,7 +148,7 @@ function handleOk() {
       } else {
         toast.error("There was an error saving the configuration!");
       }
-    });*/
+    });
 }
 
 function handleSubmit() {
@@ -159,7 +160,7 @@ function handleSubmit() {
 }
 
 function hiddenModal() {
-  if (!showQuestionModal.value) {
+  if (!showCompletionTaskModal.value) {
     oldMinigame.value = null;
     console.log("Test");
   }
@@ -177,55 +178,30 @@ function loadModal() {
   }
 }
 
-function removeQuestion(text: string) {
-  /*let filteredQuestions: ITowerDefenseQuestion[] = [];
-  configuration.value.questions.forEach((innerQuestion) => {
-    if (innerQuestion.text != text) {
-      filteredQuestions.push(innerQuestion);
-    }
-  });
-  console.log(filteredQuestions);
-  configuration.value.questions = filteredQuestions;*/
+function handleCompletionTaskOk() {
+  //TODO id
+  configuration.value.taskList.push(new UmlTask(openedIndex.value, null, taskText.value, TaskType.COMPLETION))
+  toast.info(taskText.value);
+  showModal.value = true;
 }
 
-function handleQuestionOk() {
-  //removes the need to press add
-  if (wrongAnswer.value != "") {
-    wrongAnswers.value.push(wrongAnswer.value);
-  }
-  let contains = false;
-  configuration.value.questions.forEach((pQuestion) => {
-    if (pQuestion.text == question.value) {
-      contains = true;
-    }
-  });
-  if (!contains) {
-    configuration.value.questions.push({
-      text: question.value,
-      correctAnswer: correctAnswer.value,
-      wrongAnswers: wrongAnswers.value,
-    });
-  } else {
-    toast.error("Question already exists.");
-  }
+function handleErrorhuntTaskOk() {
+  //TODO
+  configuration.value.taskList.push(new UmlTask(openedIndex.value, null, taskText.value, TaskType.COMPLETION))
+  toast.warning(taskText.value);
   showModal.value = true;
 }
 
-function handleQuestionAbort() {
+function handleTaskModalAbort() {
   showModal.value = true;
 }
 
-function resetQuestionModal() {
-  question.value = "";
-  correctAnswer.value = "";
-  wrongAnswers.value = [];
-  wrongAnswer.value = "";
+function resetTaskModal() {
+  // TODO
+  //configuration.value.taskList = [];
+  taskText.value = "";
 }
 
-function addWrongAnswer() {
-  wrongAnswers.value.push(wrongAnswer.value);
-  wrongAnswer.value = "";
-}
 
 function downloadConfiguration() {
   /*const { ["id"]: unused, ...clonedConfiguration } = configuration.value;
@@ -281,17 +257,17 @@ async function importFile(event: any) {
       v-if="minigame !== undefined"
     >
       <b-form-group>
-        <b-table :fields="['name', 'select', 'edit']" :items="['1', '2', '3', '4', '5', '6', '7', '8']">
-          <template #cell(name)="data">
+        <b-table :fields="fields"  :items="['1', '2', '3', '4', '5', '6', '7', '8']">
+          <template #cell(task)="data" >
             Task {{ data.item }}:
           </template>
 
-          <template #cell(select)="">
-            <b-form-select :options="['Completion', 'Error hunt', 'Code -> UML', 'UML -> Code']" required/>
+          <template #cell(selection)="">
+            <b-form-select v-model="selected" :options="selectionOptions" text="Select an option"  required/>
           </template>
 
-          <template #cell(edit)="">
-            <b-button variant="outline-primary" @click="console.log('open edit modal' + num)">
+          <template #cell(edit)="data">
+            <b-button variant="outline-primary" :key="data.index" @click="onEditClick(selected, data.item)">
               Edit Task
             </b-button>
           </template>
@@ -306,39 +282,37 @@ async function importFile(event: any) {
   </b-modal>
 
   <b-modal
-    id="add-question-uml-game"
-    title="Add Question to UML-Game configuration"
-    v-model="showQuestionModal"
-    @hidden="resetQuestionModal"
-    @show="resetQuestionModal"
-    @ok="handleQuestionOk"
-    @cancel="handleQuestionAbort"
+    id="uml-completion-add"
+    title="Configure the completion task"
+    v-model="showCompletionTaskModal"
+    @hidden="resetTaskModal"
+    @show="resetTaskModal"
+    @ok="handleCompletionTaskOk"
+    @cancel="handleTaskModalAbort"
   >
-    <b-form-group label="Question" label-for="question-input">
-      <b-form-textarea id="question-input" v-model="question" required />
-    </b-form-group>
-    <b-form-group label="Correct Answer" label-for="correct-answer">
-      <b-form-textarea id="correct-answer" v-model="correctAnswer" required />
+    <b-form-group>
+      Hier könnte ihre Werbung stehen! <br><br>
+      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
     </b-form-group>
-    <b-form-group label="Wrong Answers">
-      <div v-for="answer in wrongAnswers" :key="answer" class="questionTable">
-        {{ answer }}
-      </div>
-      <div>
-        <b-form-textarea
-          @keydown.enter="addWrongAnswer"
-          id="wrong-answer"
-          v-model="wrongAnswer"
-        ></b-form-textarea>
-        <b-button
-          @click="addWrongAnswer"
-          variant="success"
-          id="button-wrong-answer"
-          >Add</b-button
-        >
-      </div>
+  </b-modal>
+
+  <b-modal
+    id="uml-errorhunt-add"
+    title="Configure the error-hunt task"
+    v-model="showErrorhuntTaskModal"
+    @hidden="resetTaskModal"
+    @show="resetTaskModal"
+    @ok="handleErrorhuntTaskOk"
+    @cancel="handleTaskModalAbort"
+  >
+    <b-form-group>
+      Hier könnte auch ihre Werbung stehen! <br>
+      Nur 9,99€ pro Stunde.
+      <br><br>
+      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
     </b-form-group>
   </b-modal>
+
 </template>
 <style scoped>
 .questionTable {
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 14df024..670503b 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -1,13 +1,29 @@
 // TODO: implement, currently placeholders
 export interface IUmlgameConfiguration {
-  id?: string;
-  graph: {};
+  taskList: UmlTask[];
 }
 
 export class UmlgameConfiguration implements IUmlgameConfiguration {
-  id?: string;
-  graph: {};
-  public constructor(graph: {}) {
+  taskList: UmlTask[];
+  public constructor(taskList: UmlTask[]) {
+    this.taskList = taskList;
+  }
+}
+
+export class UmlTask {
+  id: string;
+  graph: unknown;
+  text: string;
+  taskType: TaskType;
+
+  public constructor(id: string, graph: unknown, text: string, taskType: TaskType) {
+    this.id = id;
     this.graph = graph;
+    this.text = text;
+    this.taskType = taskType;
   }
+}
+
+export enum TaskType {
+  COMPLETION, ERRORHUNT, CODETOUML, UMLTOCODE
 }
\ No newline at end of file
diff --git a/src/ts/rest-clients/umlgame-rest-client.ts b/src/ts/rest-clients/umlgame-rest-client.ts
index 91fb509..63b5176 100644
--- a/src/ts/rest-clients/umlgame-rest-client.ts
+++ b/src/ts/rest-clients/umlgame-rest-client.ts
@@ -4,9 +4,9 @@ import config from "@/config";
 
 import { IUmlgameConfiguration } from "@/ts/models/umlgame-models";
 
-export async function postUmlgameConfig(umlGameConfig: IUmlgameConfiguration
+export async function putUmlgameConfig(umlGameConfig: IUmlgameConfiguration
 ): Promise<AxiosResponse> {
-  return axios.post(
+  return axios.put(
     `${config.umlgameApiUrl}/configurations`,
     umlGameConfig
   );

From 7a5f8144763f5d7bc46ae08712b7c3b55f5d8549 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Wed, 16 Apr 2025 13:26:16 +0200
Subject: [PATCH 06/26] added uml editor modal

---
 .../EditUmlGameConfigurationModal.vue         |  31 +-
 .../SubModals/UmlGraphEditorModal.vue         | 660 ++++++++++++++++++
 2 files changed, 671 insertions(+), 20 deletions(-)
 create mode 100644 src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 38715dd..1d2407e 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -8,6 +8,7 @@ import ImportExportConfiguration from "@/components/ImportExportConfiguration.vu
 import { BFormSelect, BFormTextarea, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import { putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
+import UmlGraphEditorModal from "@/components/EditMinigameModals/SubModals/UmlGraphEditorModal"
 
 const props = defineProps<{
   minigame: ITask;
@@ -281,37 +282,27 @@ async function importFile(event: any) {
     />
   </b-modal>
 
-  <b-modal
+  <UmlGraphEditorModal
     id="uml-completion-add"
-    title="Configure the completion task"
-    v-model="showCompletionTaskModal"
+    modalTitle="Configure the completion task"
+    :showModal="showCompletionTaskModal"
+
     @hidden="resetTaskModal"
     @show="resetTaskModal"
     @ok="handleCompletionTaskOk"
     @cancel="handleTaskModalAbort"
-  >
-    <b-form-group>
-      Hier könnte ihre Werbung stehen! <br><br>
-      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
-    </b-form-group>
-  </b-modal>
+  />
 
-  <b-modal
+  <UmlGraphEditorModal
     id="uml-errorhunt-add"
-    title="Configure the error-hunt task"
-    v-model="showErrorhuntTaskModal"
+    modalTitle="Configure the error-hunt task"
+    :showModal="showErrorhuntTaskModal"
+
     @hidden="resetTaskModal"
     @show="resetTaskModal"
     @ok="handleErrorhuntTaskOk"
     @cancel="handleTaskModalAbort"
-  >
-    <b-form-group>
-      Hier könnte auch ihre Werbung stehen! <br>
-      Nur 9,99€ pro Stunde.
-      <br><br>
-      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
-    </b-form-group>
-  </b-modal>
+   />
 
 </template>
 <style scoped>
diff --git a/src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue b/src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue
new file mode 100644
index 0000000..c30202d
--- /dev/null
+++ b/src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue
@@ -0,0 +1,660 @@
+<template>
+  <b-modal
+    id="uml-completion-add"
+    :title="props.modalTitle"
+    :v-model="showModal"
+    size="xl"
+  >
+      <div class="uml-wrapper" style="position: relative">
+          <div class="uml-container">
+            <div ref="paletteContainer" class="palette">
+
+              <div class="palette-group">
+                <div class="palette-title">Objects</div>
+                <div class="palette-item" data-type="class" draggable="true" :style="{ backgroundColor: classColors.class }">
+                  Class
+                </div>
+                <div class="palette-item" data-type="interface" draggable="true"
+                     :style="{ backgroundColor: classColors.interface }">
+                  Interface
+                </div>
+                <div class="palette-item" data-type="abstract" draggable="true"
+                     :style="{ backgroundColor: classColors.abstract }">
+                  Abstract
+                </div>
+                <div class="palette-item" data-type="enum" draggable="true" :style="{ backgroundColor: classColors.enum }">
+                  Enum
+                </div>
+
+                <div class="palette-item" data-type="circle" draggable="true"
+                     :style="{ backgroundColor: classColors.circle }">
+                  Circle
+                </div>
+              </div>
+
+              <div class="palette-group">
+                <div class="palette-title">Relations</div>
+                <div class="palette-item" data-type="dependency" draggable="true">⇢ </div>
+                <div class="palette-item" data-type="association" draggable="true">→</div>
+                <div class="palette-item" data-type="aggregation" draggable="true">◇</div>
+                <div class="palette-item" data-type="composition" draggable="true">◆</div>
+                <div class="palette-item" data-type="generalization" draggable="true">△</div>
+              </div>
+            </div>
+            <div ref="paperContainer" class="paper-container"></div>
+            <div class="right" v-if="selectedElement">
+              <b-input-group>
+              <b-button size="sm" variant="warning" @click="deleteAllRelations">
+                Delete All Relations
+              </b-button>
+              <b-button size="sm" variant="danger" @click="deleteSelectedElement">
+                Delete Object
+              </b-button>
+              <b-form-group label="Classname:">
+                <b-form-input v-model="labelText" @input="updateLabel" />
+              </b-form-group>
+              <b-form-group label="Attributes:">
+                <b-form-textarea v-model="stuff" @input="updateAttributes" />
+              </b-form-group>
+              <b-form-group label="Methods">
+                <b-form-textarea v-model="stuff2" @input="updateMethods" />
+              </b-form-group>
+              </b-input-group>
+            </div>
+            <div class="right" v-if="selectedLink">
+              <b-button size="sm" variant="danger" @click="deleteRelation">
+                Delete Relation
+              </b-button>
+            </div>
+          </div>
+      </div>
+      <div>
+        <b-form-textarea v-model="content" placeholder="Enter UML-diagram description" rows="4"/>
+      </div>
+  </b-modal>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref, onMounted, nextTick } from "vue";
+import { dia, shapes, util } from '@joint/core';
+import { BButtonGroup, BFormGroup, BFormInput, BFormRow, BFormTextarea } from "bootstrap-vue-3";
+
+const props = defineProps<{
+  modalTitle: string;
+  showModal: boolean;
+  }>();
+
+const emit = defineEmits<{
+  (e: "content"): void;
+}>();
+const content =  ref("");
+const showModal = ref(props.showModal);
+
+// UML BEGIN
+
+const namespace = shapes;
+const graph = new dia.Graph({}, { cellNamespace: namespace });
+const paperContainer = ref<HTMLElement | null>(null);
+const paletteContainer = ref<HTMLElement | null>(null);
+const selectedElement = ref<dia.Element | null>(null);
+const selectedLink = ref<dia.Link | null>(null);
+const labelText = ref('');
+const stuff = ref('');
+const stuff2 = ref('');
+const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
+let currentLinkType = ref<'dependency' | 'association' | 'aggregation' | 'composition' | 'generalization' | null>(null);
+type LinkType = "dependency" | "association" | "aggregation" | "composition" | "generalization";
+const classColors = {
+  class: 'white',
+  interface: '#cce5ff',
+  abstract: '#ffe6cc',
+  circle: 'lightgray',
+  enum: '#d3f3d3',
+};
+
+function isLinkType(type: string): type is LinkType {
+  return ["dependency", "association", "aggregation", "composition", "generalization"].includes(type);
+}
+
+function handleLinkClick(linkView: dia.LinkView) {
+  selectedLink.value = linkView.model;
+  selectedElement.value = null;
+}
+
+function deleteRelation() {
+  if (selectedLink.value) {
+    selectedLink.value.remove();
+    selectedLink.value = null;
+  }
+}
+
+function handleElementClick(elementView: dia.ElementView) {
+  const clickedElement = elementView.model;
+  if (!isDependencyMode.value) {
+    selectedElement.value = clickedElement;
+    labelText.value = clickedElement.attr('label/text');
+    stuff.value = clickedElement.attr('secondaryLabel/text');
+    stuff2.value = clickedElement.attr('thirdLabel/text');
+    selectedLink.value = null;
+  }
+}
+
+function updateLabel() {
+  if (selectedElement.value) {
+    selectedElement.value.attr('label/text', labelText.value);
+  }
+}
+
+function deleteSelectedElement() {
+  if (selectedElement.value) {
+    selectedElement.value.remove();
+    selectedElement.value = null;
+    deleteButtonPos.value = null;
+  }
+}
+
+function adjustElementHeight() {
+  if (!selectedElement.value) return;
+
+  const attrLines = stuff.value.split('\n').length;
+  const methodLines = stuff2.value.split('\n').length;
+
+  const extraHeightPerLine = 15;
+  const totalHeight = 30 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine;
+
+  selectedElement.value.resize(100, totalHeight);
+
+  selectedElement.value.attr('line1/y1', 25);
+  selectedElement.value.attr('line1/y2', 25);
+  selectedElement.value.attr('line2/y1', 25 + attrLines * extraHeightPerLine);
+  selectedElement.value.attr('line2/y2', 25 + attrLines * extraHeightPerLine);
+  selectedElement.value.attr('label/y', 12);
+  selectedElement.value.attr('secondaryLabel/y', 25 + attrLines * extraHeightPerLine / 2);
+  selectedElement.value.attr('thirdLabel/y', 25 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine / 2);
+}
+
+function updateAttributes() {
+  if (selectedElement.value) {
+    selectedElement.value.attr('secondaryLabel/text', stuff.value);
+    adjustElementHeight();
+  }
+}
+
+function updateMethods() {
+  if (selectedElement.value) {
+    selectedElement.value.attr('thirdLabel/text', stuff2.value);
+    adjustElementHeight();
+  }
+}
+
+function deleteAllRelations() {
+  if (!selectedElement.value) return;
+  const links = graph.getConnectedLinks(selectedElement.value as unknown as dia.Cell);
+  links.forEach(link => {
+    link.remove();
+  });
+}
+
+let linkSourceElement: dia.Element | null = null;
+let link: dia.Link | null = null;
+let isDependencyMode = ref(false);
+let hoveredElement: dia.Element | null = null;
+
+class custRect extends shapes.standard.Rectangle {
+  defaults() {
+    return {
+      ...super.defaults,
+      type: 'Rect',
+      size: {
+        width: 100,
+        height: 80
+      },
+      attrs: {
+        body: {
+          width: 'calc(w)',
+          height: 'calc(h)',
+          fill: 'white',
+          strokeWidth: 2,
+          stroke: 'black'
+        },
+        line1: {
+          x1: 0,
+          y1: 25,
+          x2: 'calc(w)',
+          y2: 25,
+          stroke: 'black',
+          strokeWidth: 1
+        },
+        line2: {
+          x1: 0,
+          y1: 50,
+          x2: 'calc(w)',
+          y2: 50,
+          stroke: 'black',
+          strokeWidth: 1
+        },
+        typeLabel: {
+          text: '',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 8,
+          fontStyle: 'italic',
+          x: 'calc(w/2)',
+          y: 4
+        },
+        label: {
+          text: 'Classname',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 12,
+          x: 'calc(w/2)',
+          y: 17
+        },
+        secondaryLabel: {
+          text: 'Attributes',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 12,
+          x: 'calc(w/2)',
+          y: 37
+        },
+        thirdLabel: {
+          text: 'Methods',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 12,
+          x: 'calc(w/2)',
+          y: 65
+        }
+      }
+    };
+  }
+
+  preinitialize() {
+    this.markup = util.svg/* xml */ `
+    <rect @selector='body' />
+    <line @selector='line1' />
+    <line @selector='line2' />
+    <text @selector='typeLabel' />
+    <text @selector='label' />
+    <text @selector='secondaryLabel' />
+    <text @selector='thirdLabel' />
+  `;
+  }
+
+}
+
+class InterfaceRect extends custRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: 'InterfaceRect',
+      attrs: {
+        ...super.defaults().attrs,
+        body: {
+          ...super.defaults().attrs.body,
+          fill: '#cce5ff'
+        },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: '«interface»',
+          fontSize: 10,
+          y: 5
+        }
+      }
+    };
+  }
+}
+
+class AbstractRect extends custRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: 'AbstractRect',
+      attrs: {
+        ...super.defaults().attrs,
+        body: {
+          ...super.defaults().attrs.body,
+          fill: '#ffe6cc'
+        },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: '«abstract»',
+          fontSize: 10,
+          y: 5
+        }
+      }
+
+    };
+  }
+}
+
+class EnumRect extends custRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: 'EnumRect',
+      attrs: {
+        ...super.defaults().attrs,
+        body: {
+          ...super.defaults().attrs.body,
+          fill: '#d3f3d3'
+        },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: '«enum»',
+          fontSize: 10,
+          y: 5
+        }
+      }
+    };
+  }
+}
+
+let paper: dia.Paper;
+
+onMounted(() => {
+  nextTick(() => {
+    if (paperContainer.value) {
+      paper = new dia.Paper({
+        el: paperContainer.value,
+        model: graph,
+        width: 700,
+        height: 600,
+        background: { color: '#F5F5F5' },
+        cellViewNamespace: namespace
+      });
+
+      paper.on('element:pointerclick', (elementView) => {
+        handleElementClick(elementView);
+      });
+
+      paper.on('element:mouseenter', (elementView) => {
+        if (!isDependencyMode.value) {
+          elementView.model.attr('body/stroke', 'blue');
+        }
+      });
+      paper.on('element:mouseleave', (elementView) => {
+        if (!isDependencyMode.value) {
+          elementView.model.attr('body/stroke', 'black');
+        }
+      });
+
+      if (paletteContainer.value) {
+        paletteContainer.value.querySelectorAll('.palette-item').forEach((item) => {
+          item.addEventListener('dragstart', (event) => {
+            (event as DragEvent).dataTransfer?.setData('type', item.getAttribute('data-type') || '');
+          });
+        });
+      }
+
+      paper.on('link:pointerclick', (linkView) => {
+        handleLinkClick(linkView);
+      });
+
+      paperContainer.value.addEventListener('dragover', (event) => {
+        event.preventDefault();
+      });
+
+      const updateLinkTarget = (event: MouseEvent) => {
+        if (isDependencyMode.value && link) {
+          const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
+          link.target({ x: paperPoint.x, y: paperPoint.y });
+
+          const elementViews = paper.findViewsFromPoint(paperPoint);
+          const candidate = elementViews.find(view => view.model.isElement())?.model;
+          if (candidate) {
+            if (hoveredElement && hoveredElement.id !== candidate.id) {
+              hoveredElement.attr('body/stroke', 'black');
+            }
+            candidate.attr('body/stroke', 'blue');
+            hoveredElement = candidate;
+          } else {
+            if (hoveredElement) {
+              hoveredElement.attr('body/stroke', 'black');
+              hoveredElement = null;
+            }
+          }
+        }
+      };
+
+      const finalizeLink = (event: MouseEvent) => {
+        if (isDependencyMode.value && link) {
+          const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
+          const elementViews = paper.findViewsFromPoint(paperPoint);
+          const targetElementView = elementViews.find(view => view.model.isElement());
+
+          if (targetElementView) {
+            link.target(targetElementView.model);
+            targetElementView.model.attr('body/stroke', 'blue');
+            setTimeout(() => {
+              targetElementView.model.attr('body/stroke', 'black');
+            }, 2000);
+          } else {
+            link.remove();
+          }
+
+          isDependencyMode.value = false;
+          currentLinkType.value = null;
+          linkSourceElement = null;
+          link = null;
+
+          if (hoveredElement) {
+            hoveredElement.attr('body/stroke', 'black');
+            hoveredElement = null;
+          }
+          paperContainer.value?.removeEventListener('mousemove', updateLinkTarget);
+          paperContainer.value?.removeEventListener('mouseup', finalizeLink);
+        }
+      };
+
+      paperContainer.value.addEventListener('drop', (event) => {
+        event.preventDefault();
+        const rawType = (event as DragEvent).dataTransfer?.getData('type') ?? '';
+        const position = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
+        const elementViews = paper.findViewsFromPoint(position);
+        const targetElement = elementViews.find(view => view.model.isElement());
+
+        if (isLinkType(rawType)) {
+          if (targetElement) {
+            linkSourceElement = targetElement.model;
+            isDependencyMode.value = true;
+            currentLinkType.value = rawType;
+            link = new shapes.standard.Link({
+              source: { id: linkSourceElement.id },
+              target: { x: position.x, y: position.y }
+            });
+
+            switch (currentLinkType.value) {
+              case 'dependency':
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: 'black',
+                    strokeDasharray: '5,5',
+                    targetMarker: {
+                      type: 'path',
+                      d: 'M 10 -5 0 0 10 5 z',
+                      fill: 'white',
+                      stroke: 'black'
+                    }
+                  }
+                });
+                break;
+              case 'association':
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: 'black',
+                    targetMarker: undefined
+                  }
+                });
+                break;
+              case 'aggregation':
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: 'black',
+                    targetMarker: {
+                      type: 'path',
+                      d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
+                      fill: 'white',
+                      stroke: 'black'
+                    }
+                  }
+                });
+                break;
+              case 'composition':
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: 'black',
+                    targetMarker: {
+                      type: 'path',
+                      d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
+                      fill: 'black',
+                      stroke: 'black'
+                    }
+                  }
+                });
+                break;
+              case 'generalization':
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: 'black',
+                    targetMarker: {
+                      type: 'path',
+                      d: 'M 10 -5 0 0 10 5 z',
+                      fill: 'white',
+                      stroke: 'black'
+                    }
+                  }
+                });
+                break;
+            }
+
+            graph.addCell(link);
+            //console.log(`Relation '${rawType}' gestartet mit`, linkSourceElement);
+
+            paperContainer.value?.addEventListener('mousemove', updateLinkTarget);
+            paperContainer.value?.addEventListener('mouseup', finalizeLink);
+          } else {
+            //console.log(`Relation '${rawType}' gezogen, aber kein Startobjekt getroffen.`);
+          }
+        } else {
+          let element;
+          if (rawType === 'class') {
+            element = new custRect({ position });
+          } else if (rawType === 'interface') {
+            element = new InterfaceRect({ position });
+          } else if (rawType === 'abstract') {
+            element = new AbstractRect({ position });
+          } else if (rawType === 'circle') {
+            element = new shapes.standard.Circle({
+              position,
+              size: { width: 50, height: 50 },
+              attrs: { label: { text: 'Circle' } }
+            });
+          } else if (rawType === 'enum') {
+            element = new EnumRect({ position });
+          }
+
+          if (element) {
+            graph.addCell(element);
+          }
+        }
+      });
+    }
+  });
+});
+
+// UML END
+</script>
+
+<style scoped>
+.uml-container {
+  display: flex;
+  gap: 20px;
+}
+
+.uml-wrapper {
+  position: relative;
+}
+
+.palette {
+  width: 150px;
+  background: rgb(226, 220, 201);
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.palette-item {
+  padding: 10px;
+  margin-bottom: 5px;
+  background: #f3f0f0;
+  text-align: center;
+  cursor: grab;
+  border: 1px solid #aaa;
+  color: black;
+}
+
+.palette-group {
+  margin-bottom: 20px;
+}
+
+.palette-title {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 8px;
+  color: #333;
+  text-transform: uppercase;
+}
+
+
+.paper-container {
+  width: 400px;
+  height: 400px;
+  border: 2px solid rgb(226, 220, 201);
+  background: #f5f5f5;
+}
+
+.delete-button {
+  background-color: rgb(208, 50, 50);
+  color: white;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 10px;
+  margin-bottom: 10px;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.label {
+  color: black;
+}
+
+.selected {
+  stroke: #ff6600 !important;
+  stroke-width: 3;
+  filter: drop-shadow(0px 0px 5px rgba(255, 102, 0, 0.7));
+}
+
+.highlight {
+  fill: rgba(255, 102, 0, 0.2) !important;
+  stroke: #ff6600 !important;
+  stroke-width: 3;
+}
+
+.highlight-hover {
+  stroke: #ff6600;
+  stroke-width: 2;
+  fill: rgba(255, 102, 0, 0.1);
+}
+</style>
\ No newline at end of file

From 876d5143ddee86f375c8bf8d7cb70c4593af2de4 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Fri, 18 Apr 2025 15:34:15 +0200
Subject: [PATCH 07/26] Revert "added uml editor modal"

This reverts commit 7a5f8144763f5d7bc46ae08712b7c3b55f5d8549.
---
 .../EditUmlGameConfigurationModal.vue         |  31 +-
 .../SubModals/UmlGraphEditorModal.vue         | 660 ------------------
 2 files changed, 20 insertions(+), 671 deletions(-)
 delete mode 100644 src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 1d2407e..38715dd 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -8,7 +8,6 @@ import ImportExportConfiguration from "@/components/ImportExportConfiguration.vu
 import { BFormSelect, BFormTextarea, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import { putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
-import UmlGraphEditorModal from "@/components/EditMinigameModals/SubModals/UmlGraphEditorModal"
 
 const props = defineProps<{
   minigame: ITask;
@@ -282,27 +281,37 @@ async function importFile(event: any) {
     />
   </b-modal>
 
-  <UmlGraphEditorModal
+  <b-modal
     id="uml-completion-add"
-    modalTitle="Configure the completion task"
-    :showModal="showCompletionTaskModal"
-
+    title="Configure the completion task"
+    v-model="showCompletionTaskModal"
     @hidden="resetTaskModal"
     @show="resetTaskModal"
     @ok="handleCompletionTaskOk"
     @cancel="handleTaskModalAbort"
-  />
+  >
+    <b-form-group>
+      Hier könnte ihre Werbung stehen! <br><br>
+      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
+    </b-form-group>
+  </b-modal>
 
-  <UmlGraphEditorModal
+  <b-modal
     id="uml-errorhunt-add"
-    modalTitle="Configure the error-hunt task"
-    :showModal="showErrorhuntTaskModal"
-
+    title="Configure the error-hunt task"
+    v-model="showErrorhuntTaskModal"
     @hidden="resetTaskModal"
     @show="resetTaskModal"
     @ok="handleErrorhuntTaskOk"
     @cancel="handleTaskModalAbort"
-   />
+  >
+    <b-form-group>
+      Hier könnte auch ihre Werbung stehen! <br>
+      Nur 9,99€ pro Stunde.
+      <br><br>
+      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
+    </b-form-group>
+  </b-modal>
 
 </template>
 <style scoped>
diff --git a/src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue b/src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue
deleted file mode 100644
index c30202d..0000000
--- a/src/components/EditMinigameModals/SubModals/UmlGraphEditorModal.vue
+++ /dev/null
@@ -1,660 +0,0 @@
-<template>
-  <b-modal
-    id="uml-completion-add"
-    :title="props.modalTitle"
-    :v-model="showModal"
-    size="xl"
-  >
-      <div class="uml-wrapper" style="position: relative">
-          <div class="uml-container">
-            <div ref="paletteContainer" class="palette">
-
-              <div class="palette-group">
-                <div class="palette-title">Objects</div>
-                <div class="palette-item" data-type="class" draggable="true" :style="{ backgroundColor: classColors.class }">
-                  Class
-                </div>
-                <div class="palette-item" data-type="interface" draggable="true"
-                     :style="{ backgroundColor: classColors.interface }">
-                  Interface
-                </div>
-                <div class="palette-item" data-type="abstract" draggable="true"
-                     :style="{ backgroundColor: classColors.abstract }">
-                  Abstract
-                </div>
-                <div class="palette-item" data-type="enum" draggable="true" :style="{ backgroundColor: classColors.enum }">
-                  Enum
-                </div>
-
-                <div class="palette-item" data-type="circle" draggable="true"
-                     :style="{ backgroundColor: classColors.circle }">
-                  Circle
-                </div>
-              </div>
-
-              <div class="palette-group">
-                <div class="palette-title">Relations</div>
-                <div class="palette-item" data-type="dependency" draggable="true">⇢ </div>
-                <div class="palette-item" data-type="association" draggable="true">→</div>
-                <div class="palette-item" data-type="aggregation" draggable="true">◇</div>
-                <div class="palette-item" data-type="composition" draggable="true">◆</div>
-                <div class="palette-item" data-type="generalization" draggable="true">△</div>
-              </div>
-            </div>
-            <div ref="paperContainer" class="paper-container"></div>
-            <div class="right" v-if="selectedElement">
-              <b-input-group>
-              <b-button size="sm" variant="warning" @click="deleteAllRelations">
-                Delete All Relations
-              </b-button>
-              <b-button size="sm" variant="danger" @click="deleteSelectedElement">
-                Delete Object
-              </b-button>
-              <b-form-group label="Classname:">
-                <b-form-input v-model="labelText" @input="updateLabel" />
-              </b-form-group>
-              <b-form-group label="Attributes:">
-                <b-form-textarea v-model="stuff" @input="updateAttributes" />
-              </b-form-group>
-              <b-form-group label="Methods">
-                <b-form-textarea v-model="stuff2" @input="updateMethods" />
-              </b-form-group>
-              </b-input-group>
-            </div>
-            <div class="right" v-if="selectedLink">
-              <b-button size="sm" variant="danger" @click="deleteRelation">
-                Delete Relation
-              </b-button>
-            </div>
-          </div>
-      </div>
-      <div>
-        <b-form-textarea v-model="content" placeholder="Enter UML-diagram description" rows="4"/>
-      </div>
-  </b-modal>
-</template>
-
-<script setup lang="ts">
-import { defineProps, ref, onMounted, nextTick } from "vue";
-import { dia, shapes, util } from '@joint/core';
-import { BButtonGroup, BFormGroup, BFormInput, BFormRow, BFormTextarea } from "bootstrap-vue-3";
-
-const props = defineProps<{
-  modalTitle: string;
-  showModal: boolean;
-  }>();
-
-const emit = defineEmits<{
-  (e: "content"): void;
-}>();
-const content =  ref("");
-const showModal = ref(props.showModal);
-
-// UML BEGIN
-
-const namespace = shapes;
-const graph = new dia.Graph({}, { cellNamespace: namespace });
-const paperContainer = ref<HTMLElement | null>(null);
-const paletteContainer = ref<HTMLElement | null>(null);
-const selectedElement = ref<dia.Element | null>(null);
-const selectedLink = ref<dia.Link | null>(null);
-const labelText = ref('');
-const stuff = ref('');
-const stuff2 = ref('');
-const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
-let currentLinkType = ref<'dependency' | 'association' | 'aggregation' | 'composition' | 'generalization' | null>(null);
-type LinkType = "dependency" | "association" | "aggregation" | "composition" | "generalization";
-const classColors = {
-  class: 'white',
-  interface: '#cce5ff',
-  abstract: '#ffe6cc',
-  circle: 'lightgray',
-  enum: '#d3f3d3',
-};
-
-function isLinkType(type: string): type is LinkType {
-  return ["dependency", "association", "aggregation", "composition", "generalization"].includes(type);
-}
-
-function handleLinkClick(linkView: dia.LinkView) {
-  selectedLink.value = linkView.model;
-  selectedElement.value = null;
-}
-
-function deleteRelation() {
-  if (selectedLink.value) {
-    selectedLink.value.remove();
-    selectedLink.value = null;
-  }
-}
-
-function handleElementClick(elementView: dia.ElementView) {
-  const clickedElement = elementView.model;
-  if (!isDependencyMode.value) {
-    selectedElement.value = clickedElement;
-    labelText.value = clickedElement.attr('label/text');
-    stuff.value = clickedElement.attr('secondaryLabel/text');
-    stuff2.value = clickedElement.attr('thirdLabel/text');
-    selectedLink.value = null;
-  }
-}
-
-function updateLabel() {
-  if (selectedElement.value) {
-    selectedElement.value.attr('label/text', labelText.value);
-  }
-}
-
-function deleteSelectedElement() {
-  if (selectedElement.value) {
-    selectedElement.value.remove();
-    selectedElement.value = null;
-    deleteButtonPos.value = null;
-  }
-}
-
-function adjustElementHeight() {
-  if (!selectedElement.value) return;
-
-  const attrLines = stuff.value.split('\n').length;
-  const methodLines = stuff2.value.split('\n').length;
-
-  const extraHeightPerLine = 15;
-  const totalHeight = 30 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine;
-
-  selectedElement.value.resize(100, totalHeight);
-
-  selectedElement.value.attr('line1/y1', 25);
-  selectedElement.value.attr('line1/y2', 25);
-  selectedElement.value.attr('line2/y1', 25 + attrLines * extraHeightPerLine);
-  selectedElement.value.attr('line2/y2', 25 + attrLines * extraHeightPerLine);
-  selectedElement.value.attr('label/y', 12);
-  selectedElement.value.attr('secondaryLabel/y', 25 + attrLines * extraHeightPerLine / 2);
-  selectedElement.value.attr('thirdLabel/y', 25 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine / 2);
-}
-
-function updateAttributes() {
-  if (selectedElement.value) {
-    selectedElement.value.attr('secondaryLabel/text', stuff.value);
-    adjustElementHeight();
-  }
-}
-
-function updateMethods() {
-  if (selectedElement.value) {
-    selectedElement.value.attr('thirdLabel/text', stuff2.value);
-    adjustElementHeight();
-  }
-}
-
-function deleteAllRelations() {
-  if (!selectedElement.value) return;
-  const links = graph.getConnectedLinks(selectedElement.value as unknown as dia.Cell);
-  links.forEach(link => {
-    link.remove();
-  });
-}
-
-let linkSourceElement: dia.Element | null = null;
-let link: dia.Link | null = null;
-let isDependencyMode = ref(false);
-let hoveredElement: dia.Element | null = null;
-
-class custRect extends shapes.standard.Rectangle {
-  defaults() {
-    return {
-      ...super.defaults,
-      type: 'Rect',
-      size: {
-        width: 100,
-        height: 80
-      },
-      attrs: {
-        body: {
-          width: 'calc(w)',
-          height: 'calc(h)',
-          fill: 'white',
-          strokeWidth: 2,
-          stroke: 'black'
-        },
-        line1: {
-          x1: 0,
-          y1: 25,
-          x2: 'calc(w)',
-          y2: 25,
-          stroke: 'black',
-          strokeWidth: 1
-        },
-        line2: {
-          x1: 0,
-          y1: 50,
-          x2: 'calc(w)',
-          y2: 50,
-          stroke: 'black',
-          strokeWidth: 1
-        },
-        typeLabel: {
-          text: '',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
-          fontSize: 8,
-          fontStyle: 'italic',
-          x: 'calc(w/2)',
-          y: 4
-        },
-        label: {
-          text: 'Classname',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
-          fontSize: 12,
-          x: 'calc(w/2)',
-          y: 17
-        },
-        secondaryLabel: {
-          text: 'Attributes',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
-          fontSize: 12,
-          x: 'calc(w/2)',
-          y: 37
-        },
-        thirdLabel: {
-          text: 'Methods',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
-          fontSize: 12,
-          x: 'calc(w/2)',
-          y: 65
-        }
-      }
-    };
-  }
-
-  preinitialize() {
-    this.markup = util.svg/* xml */ `
-    <rect @selector='body' />
-    <line @selector='line1' />
-    <line @selector='line2' />
-    <text @selector='typeLabel' />
-    <text @selector='label' />
-    <text @selector='secondaryLabel' />
-    <text @selector='thirdLabel' />
-  `;
-  }
-
-}
-
-class InterfaceRect extends custRect {
-  override defaults() {
-    return {
-      ...super.defaults(),
-      type: 'InterfaceRect',
-      attrs: {
-        ...super.defaults().attrs,
-        body: {
-          ...super.defaults().attrs.body,
-          fill: '#cce5ff'
-        },
-        typeLabel: {
-          ...super.defaults().attrs.typeLabel,
-          text: '«interface»',
-          fontSize: 10,
-          y: 5
-        }
-      }
-    };
-  }
-}
-
-class AbstractRect extends custRect {
-  override defaults() {
-    return {
-      ...super.defaults(),
-      type: 'AbstractRect',
-      attrs: {
-        ...super.defaults().attrs,
-        body: {
-          ...super.defaults().attrs.body,
-          fill: '#ffe6cc'
-        },
-        typeLabel: {
-          ...super.defaults().attrs.typeLabel,
-          text: '«abstract»',
-          fontSize: 10,
-          y: 5
-        }
-      }
-
-    };
-  }
-}
-
-class EnumRect extends custRect {
-  override defaults() {
-    return {
-      ...super.defaults(),
-      type: 'EnumRect',
-      attrs: {
-        ...super.defaults().attrs,
-        body: {
-          ...super.defaults().attrs.body,
-          fill: '#d3f3d3'
-        },
-        typeLabel: {
-          ...super.defaults().attrs.typeLabel,
-          text: '«enum»',
-          fontSize: 10,
-          y: 5
-        }
-      }
-    };
-  }
-}
-
-let paper: dia.Paper;
-
-onMounted(() => {
-  nextTick(() => {
-    if (paperContainer.value) {
-      paper = new dia.Paper({
-        el: paperContainer.value,
-        model: graph,
-        width: 700,
-        height: 600,
-        background: { color: '#F5F5F5' },
-        cellViewNamespace: namespace
-      });
-
-      paper.on('element:pointerclick', (elementView) => {
-        handleElementClick(elementView);
-      });
-
-      paper.on('element:mouseenter', (elementView) => {
-        if (!isDependencyMode.value) {
-          elementView.model.attr('body/stroke', 'blue');
-        }
-      });
-      paper.on('element:mouseleave', (elementView) => {
-        if (!isDependencyMode.value) {
-          elementView.model.attr('body/stroke', 'black');
-        }
-      });
-
-      if (paletteContainer.value) {
-        paletteContainer.value.querySelectorAll('.palette-item').forEach((item) => {
-          item.addEventListener('dragstart', (event) => {
-            (event as DragEvent).dataTransfer?.setData('type', item.getAttribute('data-type') || '');
-          });
-        });
-      }
-
-      paper.on('link:pointerclick', (linkView) => {
-        handleLinkClick(linkView);
-      });
-
-      paperContainer.value.addEventListener('dragover', (event) => {
-        event.preventDefault();
-      });
-
-      const updateLinkTarget = (event: MouseEvent) => {
-        if (isDependencyMode.value && link) {
-          const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
-          link.target({ x: paperPoint.x, y: paperPoint.y });
-
-          const elementViews = paper.findViewsFromPoint(paperPoint);
-          const candidate = elementViews.find(view => view.model.isElement())?.model;
-          if (candidate) {
-            if (hoveredElement && hoveredElement.id !== candidate.id) {
-              hoveredElement.attr('body/stroke', 'black');
-            }
-            candidate.attr('body/stroke', 'blue');
-            hoveredElement = candidate;
-          } else {
-            if (hoveredElement) {
-              hoveredElement.attr('body/stroke', 'black');
-              hoveredElement = null;
-            }
-          }
-        }
-      };
-
-      const finalizeLink = (event: MouseEvent) => {
-        if (isDependencyMode.value && link) {
-          const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
-          const elementViews = paper.findViewsFromPoint(paperPoint);
-          const targetElementView = elementViews.find(view => view.model.isElement());
-
-          if (targetElementView) {
-            link.target(targetElementView.model);
-            targetElementView.model.attr('body/stroke', 'blue');
-            setTimeout(() => {
-              targetElementView.model.attr('body/stroke', 'black');
-            }, 2000);
-          } else {
-            link.remove();
-          }
-
-          isDependencyMode.value = false;
-          currentLinkType.value = null;
-          linkSourceElement = null;
-          link = null;
-
-          if (hoveredElement) {
-            hoveredElement.attr('body/stroke', 'black');
-            hoveredElement = null;
-          }
-          paperContainer.value?.removeEventListener('mousemove', updateLinkTarget);
-          paperContainer.value?.removeEventListener('mouseup', finalizeLink);
-        }
-      };
-
-      paperContainer.value.addEventListener('drop', (event) => {
-        event.preventDefault();
-        const rawType = (event as DragEvent).dataTransfer?.getData('type') ?? '';
-        const position = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
-        const elementViews = paper.findViewsFromPoint(position);
-        const targetElement = elementViews.find(view => view.model.isElement());
-
-        if (isLinkType(rawType)) {
-          if (targetElement) {
-            linkSourceElement = targetElement.model;
-            isDependencyMode.value = true;
-            currentLinkType.value = rawType;
-            link = new shapes.standard.Link({
-              source: { id: linkSourceElement.id },
-              target: { x: position.x, y: position.y }
-            });
-
-            switch (currentLinkType.value) {
-              case 'dependency':
-                link.attr({
-                  line: {
-                    strokeWidth: 2,
-                    stroke: 'black',
-                    strokeDasharray: '5,5',
-                    targetMarker: {
-                      type: 'path',
-                      d: 'M 10 -5 0 0 10 5 z',
-                      fill: 'white',
-                      stroke: 'black'
-                    }
-                  }
-                });
-                break;
-              case 'association':
-                link.attr({
-                  line: {
-                    strokeWidth: 2,
-                    stroke: 'black',
-                    targetMarker: undefined
-                  }
-                });
-                break;
-              case 'aggregation':
-                link.attr({
-                  line: {
-                    strokeWidth: 2,
-                    stroke: 'black',
-                    targetMarker: {
-                      type: 'path',
-                      d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
-                      fill: 'white',
-                      stroke: 'black'
-                    }
-                  }
-                });
-                break;
-              case 'composition':
-                link.attr({
-                  line: {
-                    strokeWidth: 2,
-                    stroke: 'black',
-                    targetMarker: {
-                      type: 'path',
-                      d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
-                      fill: 'black',
-                      stroke: 'black'
-                    }
-                  }
-                });
-                break;
-              case 'generalization':
-                link.attr({
-                  line: {
-                    strokeWidth: 2,
-                    stroke: 'black',
-                    targetMarker: {
-                      type: 'path',
-                      d: 'M 10 -5 0 0 10 5 z',
-                      fill: 'white',
-                      stroke: 'black'
-                    }
-                  }
-                });
-                break;
-            }
-
-            graph.addCell(link);
-            //console.log(`Relation '${rawType}' gestartet mit`, linkSourceElement);
-
-            paperContainer.value?.addEventListener('mousemove', updateLinkTarget);
-            paperContainer.value?.addEventListener('mouseup', finalizeLink);
-          } else {
-            //console.log(`Relation '${rawType}' gezogen, aber kein Startobjekt getroffen.`);
-          }
-        } else {
-          let element;
-          if (rawType === 'class') {
-            element = new custRect({ position });
-          } else if (rawType === 'interface') {
-            element = new InterfaceRect({ position });
-          } else if (rawType === 'abstract') {
-            element = new AbstractRect({ position });
-          } else if (rawType === 'circle') {
-            element = new shapes.standard.Circle({
-              position,
-              size: { width: 50, height: 50 },
-              attrs: { label: { text: 'Circle' } }
-            });
-          } else if (rawType === 'enum') {
-            element = new EnumRect({ position });
-          }
-
-          if (element) {
-            graph.addCell(element);
-          }
-        }
-      });
-    }
-  });
-});
-
-// UML END
-</script>
-
-<style scoped>
-.uml-container {
-  display: flex;
-  gap: 20px;
-}
-
-.uml-wrapper {
-  position: relative;
-}
-
-.palette {
-  width: 150px;
-  background: rgb(226, 220, 201);
-  padding: 10px;
-  border-radius: 5px;
-}
-
-.palette-item {
-  padding: 10px;
-  margin-bottom: 5px;
-  background: #f3f0f0;
-  text-align: center;
-  cursor: grab;
-  border: 1px solid #aaa;
-  color: black;
-}
-
-.palette-group {
-  margin-bottom: 20px;
-}
-
-.palette-title {
-  font-weight: bold;
-  font-size: 14px;
-  margin-bottom: 8px;
-  color: #333;
-  text-transform: uppercase;
-}
-
-
-.paper-container {
-  width: 400px;
-  height: 400px;
-  border: 2px solid rgb(226, 220, 201);
-  background: #f5f5f5;
-}
-
-.delete-button {
-  background-color: rgb(208, 50, 50);
-  color: white;
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 10px;
-  margin-bottom: 10px;
-}
-
-.right {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.label {
-  color: black;
-}
-
-.selected {
-  stroke: #ff6600 !important;
-  stroke-width: 3;
-  filter: drop-shadow(0px 0px 5px rgba(255, 102, 0, 0.7));
-}
-
-.highlight {
-  fill: rgba(255, 102, 0, 0.2) !important;
-  stroke: #ff6600 !important;
-  stroke-width: 3;
-}
-
-.highlight-hover {
-  stroke: #ff6600;
-  stroke-width: 2;
-  fill: rgba(255, 102, 0, 0.1);
-}
-</style>
\ No newline at end of file

From e4892c962c24f940a1d609fabe939f4302326176 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Fri, 18 Apr 2025 16:02:30 +0200
Subject: [PATCH 08/26] Extracted editor modal to own component

---
 .../EditUmlGameConfigurationModal.vue         | 41 ++++----------
 .../UmlModals/UmlEditorModal.vue              | 55 +++++++++++++++++++
 2 files changed, 66 insertions(+), 30 deletions(-)
 create mode 100644 src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 38715dd..3e51972 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -8,6 +8,7 @@ import ImportExportConfiguration from "@/components/ImportExportConfiguration.vu
 import { BFormSelect, BFormTextarea, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import { putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
+import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
 
 const props = defineProps<{
   minigame: ITask;
@@ -281,37 +282,17 @@ async function importFile(event: any) {
     />
   </b-modal>
 
-  <b-modal
-    id="uml-completion-add"
-    title="Configure the completion task"
-    v-model="showCompletionTaskModal"
-    @hidden="resetTaskModal"
-    @show="resetTaskModal"
-    @ok="handleCompletionTaskOk"
-    @cancel="handleTaskModalAbort"
-  >
-    <b-form-group>
-      Hier könnte ihre Werbung stehen! <br><br>
-      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
-    </b-form-group>
-  </b-modal>
+  <UmlEditorModal
+    :showModal="showCompletionTaskModal"
+    modalTitle="Configure the completion task"
+    @closedModal="showCompletionTaskModal = false"
+  />
 
-  <b-modal
-    id="uml-errorhunt-add"
-    title="Configure the error-hunt task"
-    v-model="showErrorhuntTaskModal"
-    @hidden="resetTaskModal"
-    @show="resetTaskModal"
-    @ok="handleErrorhuntTaskOk"
-    @cancel="handleTaskModalAbort"
-  >
-    <b-form-group>
-      Hier könnte auch ihre Werbung stehen! <br>
-      Nur 9,99€ pro Stunde.
-      <br><br>
-      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
-    </b-form-group>
-  </b-modal>
+  <UmlEditorModal
+    :showModal="showErrorhuntTaskModal"
+    modalTitle="Configure the error-hunt task"
+    @closedModal="showErrorhuntTaskModal = false"
+  />
 
 </template>
 <style scoped>
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
new file mode 100644
index 0000000..e3825d5
--- /dev/null
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -0,0 +1,55 @@
+<template>
+  <b-modal
+  :title="props.modalTitle"
+  size="xl"
+  v-model="showModal"
+  @hidden="hiddenModal"
+  >
+    <b-form-group>
+      Hier könnte ihre Werbung stehen lol! <br><br>
+      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
+    </b-form-group>
+  </b-modal>
+</template>
+<script setup lang="ts">
+import { defineEmits, defineProps, ref, watch } from "vue";
+  import { useToast } from "vue-toastification";
+
+  const props = defineProps<{
+    modalTitle: string;
+    showModal: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: "closedModal"): void;
+  }>();
+
+  const toast = useToast();
+  const taskText = ref();
+  const showModal = ref(props.showModal);
+  const modalTitle = ref(props.modalTitle);
+
+  watch(
+    () => props.showModal,
+    (newBoolean) => {
+      showModal.value = newBoolean;
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => props.modalTitle,
+    (newModalTitle) => {
+      modalTitle.value = newModalTitle;
+    },
+    { deep: true }
+  );
+
+  function hiddenModal() {
+    console.log("Editor hidden");
+    emit("closedModal");
+  }
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file

From 65f77d658af1cedeb0502e5653c66ab5c52f8c4b Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Fri, 18 Apr 2025 18:30:38 +0200
Subject: [PATCH 09/26] added uml editor into modal

---
 .../UmlModals/UmlEditorModal.vue              | 520 +++++++++++++++++-
 src/ts/models/links.ts                        | 115 ++++
 2 files changed, 632 insertions(+), 3 deletions(-)
 create mode 100644 src/ts/models/links.ts

diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index e3825d5..96ac780 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -5,16 +5,86 @@
   v-model="showModal"
   @hidden="hiddenModal"
   >
+    <!-- uml -->
+
+    <div class="uml-wrapper" style="position: relative">
+      <div class="uml-container">
+        <div ref="paletteContainer" class="palette">
+
+          <div class="palette-group">
+            <div class="palette-title">Objects</div>
+            <div class="palette-item" data-type="class" draggable="true" :style="{ backgroundColor: classColors.class }">
+              Class
+            </div>
+            <div class="palette-item" data-type="interface" draggable="true"
+                 :style="{ backgroundColor: classColors.interface }">
+              Interface
+            </div>
+            <div class="palette-item" data-type="abstract" draggable="true"
+                 :style="{ backgroundColor: classColors.abstract }">
+              Abstract
+            </div>
+            <div class="palette-item" data-type="enum" draggable="true" :style="{ backgroundColor: classColors.enum }">
+              Enum
+            </div>
+
+            <div class="palette-item" data-type="circle" draggable="true"
+                 :style="{ backgroundColor: classColors.circle }">
+              Circle
+            </div>
+          </div>
+
+          <div class="palette-group">
+            <div class="palette-title">Relations</div>
+            <div class="palette-item" data-type="dependency" draggable="true">⇢ </div>
+            <div class="palette-item" data-type="association" draggable="true">→</div>
+            <div class="palette-item" data-type="aggregation" draggable="true">◇</div>
+            <div class="palette-item" data-type="composition" draggable="true">◆</div>
+            <div class="palette-item" data-type="generalization" draggable="true">△</div>
+          </div>
+        </div>
+        <div ref="paperContainer" class="paper-container"></div>
+        <div class="right" v-if="selectedElement">
+          <b-button size="sm" variant="warning" @click="deleteAllRelations">
+            Delete All Relations
+          </b-button>
+
+          <b-button size="sm" variant="danger" @click="deleteSelectedElement">
+            Delete Object
+          </b-button>
+          <b-label class="label">
+            Classname:
+            <b-form-input v-model="labelText" @input="updateLabel" />
+          </b-label>
+          <label class="label">
+            Attributes:
+            <b-form-textarea v-model="stuff" @input="updateAttributes" />
+          </label>
+          <label class="label">
+            Methods:
+            <b-form-textarea v-model="stuff2" @input="updateMethods" />
+          </label>
+        </div>
+        <div class="right" v-if="selectedLink">
+          <b-button size="sm" variant="danger" @click="deleteRelation">
+            Delete Relation
+          </b-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- uml end -->
     <b-form-group>
-      Hier könnte ihre Werbung stehen lol! <br><br>
       <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
     </b-form-group>
   </b-modal>
 </template>
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, watch } from "vue";
   import { useToast } from "vue-toastification";
-
+  import { dia, shapes, util } from '@joint/core';
+  import { onMounted, ref, defineProps, nextTick, defineEmits, watch } from "vue";
+  import { BFormInput, BFormTextarea } from "bootstrap-vue-3";
+  import { CustRect, InterfaceRect, AbstractRect, EnumRect } from "@/ts/models/links";
   const props = defineProps<{
     modalTitle: string;
     showModal: boolean;
@@ -29,6 +99,26 @@ import { defineEmits, defineProps, ref, watch } from "vue";
   const showModal = ref(props.showModal);
   const modalTitle = ref(props.modalTitle);
 
+  const classColors = {
+    class: 'white',
+    interface: '#cce5ff',
+    abstract: '#ffe6cc',
+    circle: 'lightgray',
+    enum: '#d3f3d3',
+  };
+  const namespace = shapes;
+  const graph = new dia.Graph({}, { cellNamespace: namespace });
+  const paperContainer = ref<HTMLElement | null>(null);
+  const paletteContainer = ref<HTMLElement | null>(null);
+  const selectedElement = ref<dia.Element | null>(null);
+  const selectedLink = ref<dia.Link | null>(null);
+  const labelText = ref('');
+  const stuff = ref('');
+  const stuff2 = ref('');
+  const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
+  let currentLinkType = ref<'dependency' | 'association' | 'aggregation' | 'composition' | 'generalization' | null>(null);
+  type LinkType = "dependency" | "association" | "aggregation" | "composition" | "generalization";
+
   watch(
     () => props.showModal,
     (newBoolean) => {
@@ -49,7 +139,431 @@ import { defineEmits, defineProps, ref, watch } from "vue";
     console.log("Editor hidden");
     emit("closedModal");
   }
+
+  // uml
+  function resetElementStyle(element: dia.Element) {
+    const elementType = element.get('type');
+    let originalFill: string;
+    switch (elementType) {
+      case 'InterfaceRect':
+        originalFill = '#cce5ff';
+        break;
+      case 'AbstractRect':
+        originalFill = '#ffe6cc';
+        break;
+      case 'EnumRect':
+        originalFill = '#d3f3d3';
+        break;
+      default:
+        originalFill = 'white';
+        break;
+    }
+
+    element.attr({
+      body: {
+        stroke: 'black',
+        strokeWidth: 2,
+        fill: originalFill
+      }
+    });
+  }
+
+  function isLinkType(type: string): type is LinkType {
+    return ["dependency", "association", "aggregation", "composition", "generalization"].includes(type);
+  }
+
+  function handleLinkClick(linkView: dia.LinkView) {
+    selectedLink.value = linkView.model;
+    selectedElement.value = null;
+  }
+
+  function deleteRelation() {
+    if (selectedLink.value) {
+      selectedLink.value.remove();
+      selectedLink.value = null;
+    }
+  }
+
+  function handleElementClick(elementView: dia.ElementView) {
+    const clickedElement = elementView.model;
+
+    if (selectedElement.value && selectedElement.value.id !== clickedElement.id) {
+      resetElementStyle(selectedElement.value as dia.Element);
+    }
+
+    selectedElement.value = clickedElement;
+
+    labelText.value = clickedElement.attr('label/text');
+    stuff.value = clickedElement.attr('secondaryLabel/text');
+    stuff2.value = clickedElement.attr('thirdLabel/text');
+    selectedLink.value = null;
+
+    clickedElement.attr('body/stroke', '#f1c40f');
+    clickedElement.attr('body/fill', 'rgba(241, 196, 15, 0.3)');
+  }
+
+  function updateLabel() {
+    if (selectedElement.value) {
+      selectedElement.value.attr('label/text', labelText.value);
+    }
+  }
+
+  function deleteSelectedElement() {
+    if (selectedElement.value) {
+      selectedElement.value.remove();
+      selectedElement.value = null;
+      deleteButtonPos.value = null;
+    }
+  }
+
+  function adjustElementHeight() {
+    if (!selectedElement.value) return;
+
+    const attrLines = stuff.value.split('\n').length;
+    const methodLines = stuff2.value.split('\n').length;
+
+    const extraHeightPerLine = 15;
+    const totalHeight = 30 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine;
+
+    selectedElement.value.resize(100, totalHeight);
+
+    selectedElement.value.attr('line1/y1', 25);
+    selectedElement.value.attr('line1/y2', 25);
+    selectedElement.value.attr('line2/y1', 25 + attrLines * extraHeightPerLine);
+    selectedElement.value.attr('line2/y2', 25 + attrLines * extraHeightPerLine);
+    selectedElement.value.attr('label/y', 12);
+    selectedElement.value.attr('secondaryLabel/y', 25 + attrLines * extraHeightPerLine / 2);
+    selectedElement.value.attr('thirdLabel/y', 25 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine / 2);
+  }
+
+  function updateAttributes() {
+    if (selectedElement.value) {
+      selectedElement.value.attr('secondaryLabel/text', stuff.value);
+      adjustElementHeight();
+    }
+  }
+
+  function updateMethods() {
+    if (selectedElement.value) {
+      selectedElement.value.attr('thirdLabel/text', stuff2.value);
+      adjustElementHeight();
+    }
+  }
+
+  function deleteAllRelations() {
+    if (!selectedElement.value) return;
+    const links = graph.getConnectedLinks(selectedElement.value as unknown as dia.Cell);
+    links.forEach(link => {
+      link.remove();
+    });
+  }
+
+  let linkSourceElement: dia.Element | null = null;
+  let link: dia.Link | null = null;
+  let isDependencyMode = ref(false);
+  let hoveredElement: dia.Element | null = null;
+  let paper: dia.Paper;
+
+  onMounted(() => {
+    nextTick(() => {
+      if (paperContainer.value) {
+        paper = new dia.Paper({
+          el: paperContainer.value,
+          model: graph,
+          width: 700,
+          height: 600,
+          background: { color: '#F5F5F5' },
+          cellViewNamespace: namespace
+        });
+
+        paper.on('element:pointerclick', (elementView) => {
+          handleElementClick(elementView);
+        });
+
+        paper.on('element:mouseenter', (elementView) => {
+          if (!isDependencyMode.value) {
+            elementView.model.attr('body/stroke', 'blue');
+          }
+        });
+        paper.on('element:mouseleave', (elementView) => {
+          if (!isDependencyMode.value) {
+            elementView.model.attr('body/stroke', 'black');
+          }
+        });
+
+        if (paletteContainer.value) {
+          paletteContainer.value.querySelectorAll('.palette-item').forEach((item) => {
+            item.addEventListener('dragstart', (event) => {
+              (event as DragEvent).dataTransfer?.setData('type', item.getAttribute('data-type') || '');
+            });
+          });
+        }
+
+        paper.on('link:pointerclick', (linkView) => {
+          handleLinkClick(linkView);
+        });
+
+        paperContainer.value.addEventListener('dragover', (event) => {
+          event.preventDefault();
+        });
+
+        const updateLinkTarget = (event: MouseEvent) => {
+          if (isDependencyMode.value && link) {
+            const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
+            link.target({ x: paperPoint.x, y: paperPoint.y });
+
+            const elementViews = paper.findViewsFromPoint(paperPoint);
+            const candidate = elementViews.find(view => view.model.isElement())?.model;
+            if (candidate) {
+              if (hoveredElement && hoveredElement.id !== candidate.id) {
+                hoveredElement.attr('body/stroke', 'black');
+              }
+              candidate.attr('body/stroke', 'blue');
+              hoveredElement = candidate;
+            } else {
+              if (hoveredElement) {
+                hoveredElement.attr('body/stroke', 'black');
+                hoveredElement = null;
+              }
+            }
+          }
+        };
+
+        const finalizeLink = (event: MouseEvent) => {
+          if (isDependencyMode.value && link) {
+            const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
+            const elementViews = paper.findViewsFromPoint(paperPoint);
+            const targetElementView = elementViews.find(view => view.model.isElement());
+
+            if (targetElementView) {
+              link.target(targetElementView.model);
+              targetElementView.model.attr('body/stroke', 'blue');
+              setTimeout(() => {
+                targetElementView.model.attr('body/stroke', 'black');
+              }, 2000);
+            } else {
+              link.remove();
+            }
+
+            isDependencyMode.value = false;
+            currentLinkType.value = null;
+            linkSourceElement = null;
+            link = null;
+
+            if (hoveredElement) {
+              hoveredElement.attr('body/stroke', 'black');
+              hoveredElement = null;
+            }
+            paperContainer.value?.removeEventListener('mousemove', updateLinkTarget);
+            paperContainer.value?.removeEventListener('mouseup', finalizeLink);
+          }
+        };
+
+        paperContainer.value.addEventListener('drop', (event) => {
+          event.preventDefault();
+          const rawType = (event as DragEvent).dataTransfer?.getData('type') ?? '';
+          const position = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
+          const elementViews = paper.findViewsFromPoint(position);
+          const targetElement = elementViews.find(view => view.model.isElement());
+
+          if (isLinkType(rawType)) {
+            if (targetElement) {
+              linkSourceElement = targetElement.model;
+              isDependencyMode.value = true;
+              currentLinkType.value = rawType;
+              link = new shapes.standard.Link({
+                source: { id: linkSourceElement.id },
+                target: { x: position.x, y: position.y }
+              });
+
+              switch (currentLinkType.value) {
+                case 'dependency':
+                  link.attr({
+                    line: {
+                      strokeWidth: 2,
+                      stroke: 'black',
+                      strokeDasharray: '5,5',
+                      targetMarker: {
+                        type: 'path',
+                        d: 'M 10 -5 0 0 10 5 z',
+                        fill: 'white',
+                        stroke: 'black'
+                      }
+                    }
+                  });
+                  break;
+                case 'association':
+                  link.attr({
+                    line: {
+                      strokeWidth: 2,
+                      stroke: 'black',
+                      targetMarker: undefined
+                    }
+                  });
+                  break;
+                case 'aggregation':
+                  link.attr({
+                    line: {
+                      strokeWidth: 2,
+                      stroke: 'black',
+                      targetMarker: {
+                        type: 'path',
+                        d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
+                        fill: 'white',
+                        stroke: 'black'
+                      }
+                    }
+                  });
+                  break;
+                case 'composition':
+                  link.attr({
+                    line: {
+                      strokeWidth: 2,
+                      stroke: 'black',
+                      targetMarker: {
+                        type: 'path',
+                        d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
+                        fill: 'black',
+                        stroke: 'black'
+                      }
+                    }
+                  });
+                  break;
+                case 'generalization':
+                  link.attr({
+                    line: {
+                      strokeWidth: 2,
+                      stroke: 'black',
+                      targetMarker: {
+                        type: 'path',
+                        d: 'M 10 -5 0 0 10 5 z',
+                        fill: 'white',
+                        stroke: 'black'
+                      }
+                    }
+                  });
+                  break;
+              }
+
+              graph.addCell(link);
+              console.log(`Relation '${rawType}' gestartet mit`, linkSourceElement);
+
+              paperContainer.value?.addEventListener('mousemove', updateLinkTarget);
+              paperContainer.value?.addEventListener('mouseup', finalizeLink);
+            } else {
+              console.log(`Relation '${rawType}' gezogen, aber kein Startobjekt getroffen.`);
+            }
+          } else {
+            let element;
+            if (rawType === 'class') {
+              element = new CustRect({ position });
+            } else if (rawType === 'interface') {
+              element = new InterfaceRect({ position });
+            } else if (rawType === 'abstract') {
+              element = new AbstractRect({ position });
+            } else if (rawType === 'circle') {
+              element = new shapes.standard.Circle({
+                position,
+                size: { width: 50, height: 50 },
+                attrs: { label: { text: 'Circle' } }
+              });
+            } else if (rawType === 'enum') {
+              element = new EnumRect({ position });
+            }
+
+            if (element) {
+              graph.addCell(element);
+            }
+          }
+        });
+      }
+    });
+  });
+
 </script>
 <style scoped>
+.uml-container {
+  display: flex;
+  gap: 20px;
+}
+
+.uml-wrapper {
+  position: relative;
+}
+
+.palette {
+  width: 150px;
+  background: rgb(226, 220, 201);
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.palette-item {
+  padding: 10px;
+  margin-bottom: 5px;
+  background: #f3f0f0;
+  text-align: center;
+  cursor: grab;
+  border: 1px solid #aaa;
+  color: black;
+}
+
+.palette-group {
+  margin-bottom: 20px;
+}
+
+.palette-title {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 8px;
+  color: #333;
+  text-transform: uppercase;
+}
+
+
+.paper-container {
+  width: 400px;
+  height: 400px;
+  border: 2px solid rgb(226, 220, 201);
+  background: #f5f5f5;
+}
+
+.delete-button {
+  background-color: rgb(208, 50, 50);
+  color: white;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 10px;
+  margin-bottom: 10px;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.label {
+  color: black;
+}
+
+.selected {
+  stroke: #ff6600 !important;
+  stroke-width: 3;
+  filter: drop-shadow(0px 0px 5px rgba(255, 102, 0, 0.7));
+}
+
+.highlight {
+  fill: rgba(255, 102, 0, 0.2) !important;
+  stroke: #ff6600 !important;
+  stroke-width: 3;
+}
 
+.highlight-hover {
+  stroke: #ff6600;
+  stroke-width: 2;
+  fill: rgba(255, 102, 0, 0.1);
+}
 </style>
\ No newline at end of file
diff --git a/src/ts/models/links.ts b/src/ts/models/links.ts
new file mode 100644
index 0000000..5aee31e
--- /dev/null
+++ b/src/ts/models/links.ts
@@ -0,0 +1,115 @@
+import { shapes, util } from '@joint/core';
+
+export class CustRect extends shapes.standard.Rectangle {
+  override defaults() {
+    return {
+      ...super.defaults,
+      type: 'Rect',
+      size: { width: 100, height: 80 },
+      attrs: {
+        body: {
+          width: 'calc(w)',
+          height: 'calc(h)',
+          fill: 'white',
+          strokeWidth: 2,
+          stroke: 'black'
+        },
+        line1: {
+          x1: 0, y1: 25, x2: 'calc(w)', y2: 25,
+          stroke: 'black', strokeWidth: 1
+        },
+        line2: {
+          x1: 0, y1: 50, x2: 'calc(w)', y2: 50,
+          stroke: 'black', strokeWidth: 1
+        },
+        typeLabel: {
+          text: '',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 8,
+          fontStyle: 'italic',
+          x: 'calc(w/2)',
+          y: 4
+        },
+        label: {
+          text: 'Classname',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 12,
+          x: 'calc(w/2)',
+          y: 17
+        },
+        secondaryLabel: {
+          text: 'Attributes',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 12,
+          x: 'calc(w/2)',
+          y: 37
+        },
+        thirdLabel: {
+          text: 'Methods',
+          textVerticalAnchor: 'middle',
+          textAnchor: 'middle',
+          fontSize: 12,
+          x: 'calc(w/2)',
+          y: 65
+        }
+      }
+    };
+  }
+
+  override preinitialize() {
+    this.markup = util.svg/* xml */ `
+      <rect @selector='body' />
+      <line @selector='line1' />
+      <line @selector='line2' />
+      <text @selector='typeLabel' />
+      <text @selector='label' />
+      <text @selector='secondaryLabel' />
+      <text @selector='thirdLabel' />
+    `;
+  }
+}
+
+export class InterfaceRect extends CustRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: 'InterfaceRect',
+      attrs: {
+        ...super.defaults().attrs,
+        body: { ...super.defaults().attrs.body, fill: '#cce5ff' },
+        typeLabel: { ...super.defaults().attrs.typeLabel, text: '«interface»', fontSize: 10, y: 5 }
+      }
+    };
+  }
+}
+
+export class AbstractRect extends CustRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: 'AbstractRect',
+      attrs: {
+        ...super.defaults().attrs,
+        body: { ...super.defaults().attrs.body, fill: '#ffe6cc' },
+        typeLabel: { ...super.defaults().attrs.typeLabel, text: '«abstract»', fontSize: 10, y: 5 }
+      }
+    };
+  }
+}
+
+export class EnumRect extends CustRect {
+  override defaults() {
+    return {
+      ...super.defaults(),
+      type: 'EnumRect',
+      attrs: {
+        ...super.defaults().attrs,
+        body: { ...super.defaults().attrs.body, fill: '#d3f3d3' },
+        typeLabel: { ...super.defaults().attrs.typeLabel, text: '«enum»', fontSize: 10, y: 5 }
+      }
+    };
+  }
+}

From ff78d08fb13edd61ececac083581ef096a9f4dfc Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 24 Apr 2025 17:56:50 +0200
Subject: [PATCH 10/26] modal emits

---
 .../EditUmlGameConfigurationModal.vue         | 13 +++--
 .../UmlModals/UmlEditorModal.vue              | 48 ++++++++++++++++---
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 3e51972..fd11c4b 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, watch } from "vue";
+import { defineEmits, defineProps, ref, watch, useAttrs } from "vue";
 import { TaskType, UmlgameConfiguration, UmlTask } from "@/ts/models/umlgame-models";
 import { useToast } from "vue-toastification";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
 import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
-import { BFormSelect, BFormTextarea, BTable } from "bootstrap-vue-3";
+import { BFormSelect, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import { putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
 import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
@@ -183,6 +183,8 @@ function handleCompletionTaskOk() {
   //TODO id
   configuration.value.taskList.push(new UmlTask(openedIndex.value, null, taskText.value, TaskType.COMPLETION))
   toast.info(taskText.value);
+  showCompletionTaskModal.value = false;
+  console.log(configuration.value.taskList);
   showModal.value = true;
 }
 
@@ -203,7 +205,6 @@ function resetTaskModal() {
   taskText.value = "";
 }
 
-
 function downloadConfiguration() {
   /*const { ["id"]: unused, ...clonedConfiguration } = configuration.value;
   const clonedQuestions = Array<ITowerDefenseQuestion>();
@@ -217,6 +218,7 @@ function downloadConfiguration() {
   });
   saveAs(blob, "towerdefense-configuration.json");*/
 }
+
 async function importFile(event: any) {
   /*const file = event.target.files[0];
   const validator = object({
@@ -285,13 +287,14 @@ async function importFile(event: any) {
   <UmlEditorModal
     :showModal="showCompletionTaskModal"
     modalTitle="Configure the completion task"
-    @closedModal="showCompletionTaskModal = false"
+    @okModal="handleCompletionTaskOk"
+    @cancelModal="handleTaskModalAbort"
   />
 
   <UmlEditorModal
     :showModal="showErrorhuntTaskModal"
     modalTitle="Configure the error-hunt task"
-    @closedModal="showErrorhuntTaskModal = false"
+    @okModal="showErrorhuntTaskModal = false"
   />
 
 </template>
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 96ac780..7de71e0 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -3,10 +3,11 @@
   :title="props.modalTitle"
   size="xl"
   v-model="showModal"
-  @hidden="hiddenModal"
+  @cancel="hideModalCancel"
+  @ok="hideModalOk"
+  @hidden="resetModal"
   >
     <!-- uml -->
-
     <div class="uml-wrapper" style="position: relative">
       <div class="uml-container">
         <div ref="paletteContainer" class="palette">
@@ -75,7 +76,7 @@
 
     <!-- uml end -->
     <b-form-group>
-      <b-form-textarea v-model="taskText" placeholder="Enter UML-diagram description" rows="4"/>
+      <b-form-textarea v-model="diagramDescription" placeholder="Enter UML-diagram description" rows="4"/>
     </b-form-group>
   </b-modal>
 </template>
@@ -88,16 +89,21 @@
   const props = defineProps<{
     modalTitle: string;
     showModal: boolean;
+    diagramDescription: string;
+    diagramJSON: string;
   }>();
 
   const emit = defineEmits<{
-    (e: "closedModal"): void;
+    (e: "okModal", {json: string, text: string}): void;
+    (e: "cancelModal"): void;
   }>();
 
   const toast = useToast();
   const taskText = ref();
   const showModal = ref(props.showModal);
   const modalTitle = ref(props.modalTitle);
+  const diagramDescription = ref(props.diagramDescription);
+  const diagramJSON = ref(props.diagramJSON);
 
   const classColors = {
     class: 'white',
@@ -135,9 +141,37 @@
     { deep: true }
   );
 
-  function hiddenModal() {
-    console.log("Editor hidden");
-    emit("closedModal");
+  watch(
+    () => props.diagramDescription,
+    (description) => {
+      diagramDescription.value = description;
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => props.diagramJSON,
+    (json) => {
+      diagramJSON.value = json;
+    },
+    { deep: true }
+  );
+
+  function hideModalOk() {
+    diagramJSON.value = graph.toJSON();
+
+    console.log("Editor ok");
+    emit("okModal", {json:diagramJSON.value, text:diagramDescription.value});
+  }
+
+  function hideModalCancel() {
+    // TODO
+    console.log("Editor cancel");
+    emit("cancelModal");
+  }
+
+  function resetModal() {
+    // TODO
   }
 
   // uml

From 6d2e7cede56f33bfe4520cb7d972005e6f678261 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 24 Apr 2025 20:42:16 +0200
Subject: [PATCH 11/26] Update umlgame-models.ts

---
 src/ts/models/umlgame-models.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 670503b..a1aef20 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -26,4 +26,14 @@ export class UmlTask {
 
 export enum TaskType {
   COMPLETION, ERRORHUNT, CODETOUML, UMLTOCODE
+}
+
+export class GraphData {
+  graphAsJson: string;
+  graphDescription: string;
+
+  public constructor(json: string, text: string) {
+    this.graphAsJson = json;
+    this.graphDescription = text;
+  }
 }
\ No newline at end of file

From 79ae47c05c9f50fc72638b5565c61397cb674be3 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 24 Apr 2025 20:45:52 +0200
Subject: [PATCH 12/26] data transmission object

---
 .../EditUmlGameConfigurationModal.vue         | 10 +++--
 .../UmlModals/UmlEditorModal.vue              | 37 ++++++++-----------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index fd11c4b..1287f44 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, watch, useAttrs } from "vue";
-import { TaskType, UmlgameConfiguration, UmlTask } from "@/ts/models/umlgame-models";
+import { defineEmits, defineProps, ref, watch, Ref } from "vue";
+import { TaskType, UmlgameConfiguration, UmlTask, GraphData } from "@/ts/models/umlgame-models";
 import { useToast } from "vue-toastification";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
@@ -45,6 +45,7 @@ const oldMinigame = ref();
 // TODO: adapt to available modes
 const taskText = ref();
 const selected = null;
+const editorData = ref() as Ref<GraphData>;
 // Here are the parameters you need to adapt when expanding the game
 const selectionOptions = [{value: TaskType.COMPLETION, text:'Completion'}, {value: TaskType.ERRORHUNT, text:'Error hunt'},
   {value: TaskType.CODETOUML, text:'Code -> UML'}, {value: TaskType.UMLTOCODE, text:'UML -> Code'}];
@@ -181,8 +182,8 @@ function loadModal() {
 
 function handleCompletionTaskOk() {
   //TODO id
-  configuration.value.taskList.push(new UmlTask(openedIndex.value, null, taskText.value, TaskType.COMPLETION))
-  toast.info(taskText.value);
+  configuration.value.taskList.push(new UmlTask(openedIndex.value, editorData.value.graphAsJson, editorData.value.graphDescription, TaskType.COMPLETION))
+  toast.info(editorData.value.graphDescription);
   showCompletionTaskModal.value = false;
   console.log(configuration.value.taskList);
   showModal.value = true;
@@ -289,6 +290,7 @@ async function importFile(event: any) {
     modalTitle="Configure the completion task"
     @okModal="handleCompletionTaskOk"
     @cancelModal="handleTaskModalAbort"
+    :graphData="editorData"
   />
 
   <UmlEditorModal
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 7de71e0..b4079dc 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -76,34 +76,34 @@
 
     <!-- uml end -->
     <b-form-group>
-      <b-form-textarea v-model="diagramDescription" placeholder="Enter UML-diagram description" rows="4"/>
+      <b-form-textarea v-model="text" placeholder="Enter UML-diagram description" rows="4"/>
     </b-form-group>
   </b-modal>
 </template>
 <script setup lang="ts">
   import { useToast } from "vue-toastification";
   import { dia, shapes, util } from '@joint/core';
-  import { onMounted, ref, defineProps, nextTick, defineEmits, watch } from "vue";
+  import { onMounted, ref, defineProps, nextTick, defineEmits, watch, Ref } from "vue";
   import { BFormInput, BFormTextarea } from "bootstrap-vue-3";
   import { CustRect, InterfaceRect, AbstractRect, EnumRect } from "@/ts/models/links";
+  import { GraphData } from "@/ts/models/umlgame-models";
   const props = defineProps<{
     modalTitle: string;
     showModal: boolean;
-    diagramDescription: string;
-    diagramJSON: string;
+    graphData: GraphData;
   }>();
 
   const emit = defineEmits<{
-    (e: "okModal", {json: string, text: string}): void;
+    (e: "okModal", data: GraphData): void;
     (e: "cancelModal"): void;
   }>();
 
   const toast = useToast();
-  const taskText = ref();
+  const graphData = ref();
+  const text = ref();
+  const json = ref();
   const showModal = ref(props.showModal);
   const modalTitle = ref(props.modalTitle);
-  const diagramDescription = ref(props.diagramDescription);
-  const diagramJSON = ref(props.diagramJSON);
 
   const classColors = {
     class: 'white',
@@ -142,26 +142,19 @@
   );
 
   watch(
-    () => props.diagramDescription,
-    (description) => {
-      diagramDescription.value = description;
-    },
-    { deep: true }
-  );
-
-  watch(
-    () => props.diagramJSON,
-    (json) => {
-      diagramJSON.value = json;
+    () => props.graphData,
+    (data) => {
+      graphData.value = data;
     },
     { deep: true }
   );
 
   function hideModalOk() {
-    diagramJSON.value = graph.toJSON();
-
+    json.value = graph.toJSON();
+    graphData.value.graphAsJson = json.value; // error graphData.value is undef
+    graphData.value.graphDescription = text.value;
     console.log("Editor ok");
-    emit("okModal", {json:diagramJSON.value, text:diagramDescription.value});
+    emit("okModal", graphData.value);
   }
 
   function hideModalCancel() {

From b5193bba70750571901cd59777ab439d27d3b80b Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 24 Apr 2025 21:53:35 +0200
Subject: [PATCH 13/26] Update UmlEditorModal.vue

---
 .../EditMinigameModals/UmlModals/UmlEditorModal.vue           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index b4079dc..2f18abd 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -150,9 +150,13 @@
   );
 
   function hideModalOk() {
+    console.log(graph.toJSON());
+    console.log(text.value);
+    // until here correct content
     json.value = graph.toJSON();
     graphData.value.graphAsJson = json.value; // error graphData.value is undef
     graphData.value.graphDescription = text.value;
+
     console.log("Editor ok");
     emit("okModal", graphData.value);
   }

From f819b76aad6f06797b781fbaab08e30ca5c89458 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Fri, 25 Apr 2025 17:45:13 +0200
Subject: [PATCH 14/26] data retrieval from editor working

---
 .../EditUmlGameConfigurationModal.vue             |  7 ++++---
 .../UmlModals/UmlEditorModal.vue                  | 15 +++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 1287f44..f3d3f94 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -180,10 +180,11 @@ function loadModal() {
   }
 }
 
-function handleCompletionTaskOk() {
+function handleCompletionTaskOk(data: GraphData) {
   //TODO id
-  configuration.value.taskList.push(new UmlTask(openedIndex.value, editorData.value.graphAsJson, editorData.value.graphDescription, TaskType.COMPLETION))
-  toast.info(editorData.value.graphDescription);
+  //console.log(editorData) // TODO no data
+  configuration.value.taskList.push(new UmlTask(openedIndex.value, data.graphAsJson, data.graphDescription, TaskType.COMPLETION))
+  //toast.info(.value.graphDescription);
   showCompletionTaskModal.value = false;
   console.log(configuration.value.taskList);
   showModal.value = true;
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 2f18abd..1c15a35 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -5,7 +5,7 @@
   v-model="showModal"
   @cancel="hideModalCancel"
   @ok="hideModalOk"
-  @hidden="resetModal"
+  @show="resetModal"
   >
     <!-- uml -->
     <div class="uml-wrapper" style="position: relative">
@@ -150,13 +150,9 @@
   );
 
   function hideModalOk() {
-    console.log(graph.toJSON());
-    console.log(text.value);
-    // until here correct content
-    json.value = graph.toJSON();
-    graphData.value.graphAsJson = json.value; // error graphData.value is undef
-    graphData.value.graphDescription = text.value;
-
+    let data = new GraphData(graph.toJSON(), text.value);
+    console.log(data);
+    graphData.value = data;
     console.log("Editor ok");
     emit("okModal", graphData.value);
   }
@@ -169,6 +165,9 @@
 
   function resetModal() {
     // TODO
+    console.log("Reset editor")
+    text.value = graphData.value.graphDescription;
+    json.value = graphData.value.graphAsJson;
   }
 
   // uml

From e8cef7e206b60f6937ffabbe9f20a368b23b72c3 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Sat, 26 Apr 2025 16:23:01 +0200
Subject: [PATCH 15/26] started setup and reset of modal

---
 .../EditMemoryConfigurationModal.vue          |   2 +-
 .../EditUmlGameConfigurationModal.vue         | 154 +++++++++++-------
 .../UmlModals/UmlEditorModal.vue              |   9 +-
 src/ts/models/umlgame-models.ts               |   5 +-
 src/ts/rest-clients/umlgame-rest-client.ts    |  10 +-
 5 files changed, 113 insertions(+), 67 deletions(-)

diff --git a/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue b/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue
index cdd221f..6a1868a 100644
--- a/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue
@@ -159,7 +159,7 @@ function handleOk() {
   // based if configuration id is present or not send post or put request
   const updateConfigurationRequest = configuration.value.id
     ? putMemoryConfig(
-        configuration.value.id,
+      configuration.value.id,
         new MemoryConfiguration(cardPairs.value)
       )
     : postMemoryConfig(new MemoryConfiguration(cardPairs.value));
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index f3d3f94..77ec8c9 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, watch, Ref } from "vue";
-import { TaskType, UmlgameConfiguration, UmlTask, GraphData } from "@/ts/models/umlgame-models";
+import { defineEmits, defineProps, ref, Ref, watch } from "vue";
+import { GraphData, TaskType, UmlgameConfiguration, UmlTask } from "@/ts/models/umlgame-models";
 import { useToast } from "vue-toastification";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
 import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
 import { BFormSelect, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
-import { putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
+import { getUmlgameConfig, postUmlgameConfig, putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
 import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
 
 const props = defineProps<{
@@ -38,18 +38,25 @@ const toast = useToast();
 const minigame = ref(props.minigame);
 const form = ref();
 const showModal = ref(props.showModal);
+
 let configuration = ref(new UmlgameConfiguration([]));
 const showCompletionTaskModal = ref(false);
 const showErrorhuntTaskModal = ref(false);
-const oldMinigame = ref();
+const isEditorOpen = ref(false);
+
+const taskList = ref([]) as Ref<UmlTask[]>;
+initializeTasks();
+
 // TODO: adapt to available modes
 const taskText = ref();
 const selected = null;
 const editorData = ref() as Ref<GraphData>;
+const editObject = ref();
+
 // Here are the parameters you need to adapt when expanding the game
 const selectionOptions = [{value: TaskType.COMPLETION, text:'Completion'}, {value: TaskType.ERRORHUNT, text:'Error hunt'},
   {value: TaskType.CODETOUML, text:'Code -> UML'}, {value: TaskType.UMLTOCODE, text:'UML -> Code'}];
-const numberOfQuestions = 42;
+const numberOfQuestions = 10;
 
 watch(
   () => props.minigame,
@@ -86,50 +93,81 @@ const emit = defineEmits<{
   (e: "closedModal"): void;
 }>();
 
+// FERTIG
 function checkFormValidity(): boolean {
   return form.value.checkValidity();
 }
 
-function resetModal() {
-  //TODO
+// FERTIG
+function loadConfig() {
+  console.log("loadConfig()")
   if (minigame.value.configurationId != undefined) {
-    /*getTowerDefenseConfig(minigame.value.configurationId)
+    getUmlgameConfig(minigame.value.configurationId)
       .then((response) => {
+        taskList.value = response.data.taskList;
         configuration.value = response.data;
       })
       .catch((error) => {
         console.log(error);
         if (error.response.status == 404) {
-          minigame.value.configurationId = undefined;
-          configuration.value.questions = [];
+          resetConfig();
         }
-      });*/
-    oldMinigame.value = minigame.value;
+      });
   } else {
-    oldMinigame.value = minigame.value;
+    resetConfig()
   }
   console.log("Reset Modal");
 }
+
+// FERTIG
+function resetConfig() {
+  console.log("resetConfig()")
+  configuration.value.id = ""; // undefined
+  configuration.value.taskList = [];
+  initializeTasks();
+}
+
+function initializeTasks() {
+  console.log("initializeTasks()")
+  taskList.value = [];
+  for(let index = 0; index < numberOfQuestions; index++) {
+    taskList.value.push(new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION))
+  }
+}
+
 const openedIndex = ref();
-function onEditClick(type: TaskType, index: number) {
-  // TODO: editObject.value = edit;
-  openedIndex.value = index;
+function onEditClick(type: TaskType, edit: any) {
+  console.log("onEditClick")
+  editObject.value = edit;
+  editorData.value = new GraphData(editObject.value.graphAsJson, editObject.value.graphDescription);
+  openedIndex.value = edit.id;
   switch (type) {
-    case TaskType.COMPLETION: showCompletionTaskModal.value = true; break;
-    case TaskType.ERRORHUNT: showErrorhuntTaskModal.value = true; break;
+    case TaskType.COMPLETION: {
+      showCompletionTaskModal.value = true;
+      break;
+    }
+    case TaskType.ERRORHUNT: {
+      showErrorhuntTaskModal.value = true;
+      break;
+    }
   }
 }
 
+// FERTIG
 function handleOk() {
-  //TODO
-  console.log("putting")
-  putUmlgameConfig(configuration.value)
+  console.log("@ok")
+  const updateConfigurationRequest = configuration.value.id
+    ? putUmlgameConfig(
+      configuration.value.id,
+      new UmlgameConfiguration(taskList.value)
+    )
+    : postUmlgameConfig(new UmlgameConfiguration(taskList.value));
+  updateConfigurationRequest
     .then((response) => {
       minigame.value.configurationId = response.data.id;
       console.log("Submit Modal");
       console.log("id:" + response.data.id);
       console.log("minigameId" + minigame.value.configurationId);
-      oldMinigame.value = minigame.value;
       handleSubmit();
     })
     .then(() => {
@@ -150,63 +188,63 @@ function handleOk() {
       } else {
         toast.error("There was an error saving the configuration!");
       }
-    });
+    })
+    .finally(() => resetConfig());
 }
 
+// FERTIG
 function handleSubmit() {
   // Exit when the form isn't valid
+  console.log("handleSubmit")
   if (!checkFormValidity()) {
     return;
   }
   emit("updateMinigameConfiguration", minigame.value);
 }
 
+// FERTIG
 function hiddenModal() {
-  if (!showCompletionTaskModal.value) {
-    oldMinigame.value = null;
-    console.log("Test");
-  }
   console.log("Modal hidden");
   emit("closedModal");
 }
 
+// FERTIG
 function loadModal() {
-  if (oldMinigame.value != null) {
-    if (oldMinigame.value.id != minigame.value.id) {
-      resetModal();
-    }
-  } else {
-    resetModal();
+  if (!isEditorOpen.value) {
+    loadConfig();
   }
+  isEditorOpen.value = false;
+  console.log("Modal shown");
 }
 
+// TODO analog zu handlePairOk from memory
 function handleCompletionTaskOk(data: GraphData) {
-  //TODO id
-  //console.log(editorData) // TODO no data
   configuration.value.taskList.push(new UmlTask(openedIndex.value, data.graphAsJson, data.graphDescription, TaskType.COMPLETION))
-  //toast.info(.value.graphDescription);
   showCompletionTaskModal.value = false;
   console.log(configuration.value.taskList);
   showModal.value = true;
 }
 
-function handleErrorhuntTaskOk() {
-  //TODO
-  configuration.value.taskList.push(new UmlTask(openedIndex.value, null, taskText.value, TaskType.COMPLETION))
-  toast.warning(taskText.value);
+// FERTIG
+function handleEditorModalAbort() {
   showModal.value = true;
 }
 
-function handleTaskModalAbort() {
-  showModal.value = true;
+// FERTIG
+function resetEditorModal() {
+  console.log("Resetting editor modal (@hidden)");
+  editObject.value = null;
 }
 
-function resetTaskModal() {
-  // TODO
-  //configuration.value.taskList = [];
-  taskText.value = "";
+// FERTIG
+function setupEditorModal() {
+  console.log("setting up editor");
+  showModal.value = false;
+  isEditorOpen.value = true;
+  editorData.value = new GraphData(editObject.value.graphAsJson, editObject.value.graphDescription);
 }
 
+// DNF
 function downloadConfiguration() {
   /*const { ["id"]: unused, ...clonedConfiguration } = configuration.value;
   const clonedQuestions = Array<ITowerDefenseQuestion>();
@@ -221,6 +259,7 @@ function downloadConfiguration() {
   saveAs(blob, "towerdefense-configuration.json");*/
 }
 
+// DNF
 async function importFile(event: any) {
   /*const file = event.target.files[0];
   const validator = object({
@@ -244,6 +283,10 @@ async function importFile(event: any) {
     console.log("Import was not successful");
   }*/
 }
+
+function testSend() {
+  postUmlgameConfig(new UmlgameConfiguration([new UmlTask("1", "", "test", "COMPLETION")]));
+}
 </script>
 <template>
   <b-modal
@@ -252,19 +295,19 @@ async function importFile(event: any) {
     v-model="showModal"
     @hidden="hiddenModal"
     @ok="handleOk"
-    @cancel="resetModal"
     @show="loadModal"
-    @abort="resetModal"
+    @cancel="resetConfig"
   >
     <form
       ref="form"
       @submit.stop.prevent="handleSubmit"
       v-if="minigame !== undefined"
     >
+      <b-button @click="testSend"> TEST </b-button>
       <b-form-group>
-        <b-table :fields="fields"  :items="['1', '2', '3', '4', '5', '6', '7', '8']">
+        <b-table :fields="fields"  :items="taskList">
           <template #cell(task)="data" >
-            Task {{ data.item }}:
+            Task {{ data.item.id }}:
           </template>
 
           <template #cell(selection)="">
@@ -290,16 +333,11 @@ async function importFile(event: any) {
     :showModal="showCompletionTaskModal"
     modalTitle="Configure the completion task"
     @okModal="handleCompletionTaskOk"
-    @cancelModal="handleTaskModalAbort"
+    @cancelModal="handleEditorModalAbort"
     :graphData="editorData"
+    @hidden="resetEditorModal"
+    @show="setupEditorModal"
   />
-
-  <UmlEditorModal
-    :showModal="showErrorhuntTaskModal"
-    modalTitle="Configure the error-hunt task"
-    @okModal="showErrorhuntTaskModal = false"
-  />
-
 </template>
 <style scoped>
 .questionTable {
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 1c15a35..2a7b4c5 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -99,7 +99,7 @@
   }>();
 
   const toast = useToast();
-  const graphData = ref();
+  const graphData = ref(new GraphData("", ""));
   const text = ref();
   const json = ref();
   const showModal = ref(props.showModal);
@@ -165,9 +165,10 @@
 
   function resetModal() {
     // TODO
-    console.log("Reset editor")
-    text.value = graphData.value.graphDescription;
-    json.value = graphData.value.graphAsJson;
+    console.log("Reset editor");
+    let data = graphData.value;
+    text.value = data.graphDescription;
+    json.value = data.graphAsJson;
   }
 
   // uml
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index a1aef20..1c95185 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -4,6 +4,7 @@ export interface IUmlgameConfiguration {
 }
 
 export class UmlgameConfiguration implements IUmlgameConfiguration {
+  id?: string;
   taskList: UmlTask[];
   public constructor(taskList: UmlTask[]) {
     this.taskList = taskList;
@@ -12,11 +13,11 @@ export class UmlgameConfiguration implements IUmlgameConfiguration {
 
 export class UmlTask {
   id: string;
-  graph: unknown;
+  graph: string;
   text: string;
   taskType: TaskType;
 
-  public constructor(id: string, graph: unknown, text: string, taskType: TaskType) {
+  public constructor(id: string, graph: string, text: string, taskType: TaskType) {
     this.id = id;
     this.graph = graph;
     this.text = text;
diff --git a/src/ts/rest-clients/umlgame-rest-client.ts b/src/ts/rest-clients/umlgame-rest-client.ts
index 63b5176..967bbd5 100644
--- a/src/ts/rest-clients/umlgame-rest-client.ts
+++ b/src/ts/rest-clients/umlgame-rest-client.ts
@@ -4,10 +4,10 @@ import config from "@/config";
 
 import { IUmlgameConfiguration } from "@/ts/models/umlgame-models";
 
-export async function putUmlgameConfig(umlGameConfig: IUmlgameConfiguration
+export async function putUmlgameConfig(id: string, umlGameConfig: IUmlgameConfiguration
 ): Promise<AxiosResponse> {
   return axios.put(
-    `${config.umlgameApiUrl}/configurations`,
+    `${config.umlgameApiUrl}/configurations/${id}`,
     umlGameConfig
   );
 }
@@ -15,3 +15,9 @@ export async function putUmlgameConfig(umlGameConfig: IUmlgameConfiguration
 export async function getUmlgameConfig(id: string): Promise<AxiosResponse> {
   return axios.get(`${config.umlgameApiUrl}/configurations/${id}`);
 }
+
+export async function postUmlgameConfig(umlGameConfig: IUmlgameConfiguration): Promise<AxiosResponse> {
+  return axios.post(`${config.umlgameApiUrl}/configurations`,
+    umlGameConfig
+  );
+}

From 675a124f3a55ba3443905a5696d37bfdcf0bfa1d Mon Sep 17 00:00:00 2001
From: Fa8Bit <61206845+Fa8Bit@users.noreply.github.com>
Date: Wed, 30 Apr 2025 15:49:23 +0200
Subject: [PATCH 16/26] prettier

---
 .../EditMemoryConfigurationModal.vue          |   2 +-
 .../EditUmlGameConfigurationModal.vue         |  90 +-
 .../UmlModals/UmlEditorModal.vue              | 923 ++++++++++--------
 src/ts/models/links.ts                        | 113 ++-
 src/ts/models/umlgame-models.ts               |  14 +-
 src/ts/rest-clients/umlgame-rest-client.ts    |  12 +-
 6 files changed, 666 insertions(+), 488 deletions(-)

diff --git a/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue b/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue
index 6a1868a..cdd221f 100644
--- a/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditMemoryConfigurationModal.vue
@@ -159,7 +159,7 @@ function handleOk() {
   // based if configuration id is present or not send post or put request
   const updateConfigurationRequest = configuration.value.id
     ? putMemoryConfig(
-      configuration.value.id,
+        configuration.value.id,
         new MemoryConfiguration(cardPairs.value)
       )
     : postMemoryConfig(new MemoryConfiguration(cardPairs.value));
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 77ec8c9..ce50dce 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -1,13 +1,22 @@
 <script setup lang="ts">
 import { defineEmits, defineProps, ref, Ref, watch } from "vue";
-import { GraphData, TaskType, UmlgameConfiguration, UmlTask } from "@/ts/models/umlgame-models";
+import {
+  GraphData,
+  TaskType,
+  UmlgameConfiguration,
+  UmlTask,
+} from "@/ts/models/umlgame-models";
 import { useToast } from "vue-toastification";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
 import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
 import { BFormSelect, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
-import { getUmlgameConfig, postUmlgameConfig, putUmlgameConfig } from "@/ts/rest-clients/umlgame-rest-client";
+import {
+  getUmlgameConfig,
+  postUmlgameConfig,
+  putUmlgameConfig,
+} from "@/ts/rest-clients/umlgame-rest-client";
 import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
 
 const props = defineProps<{
@@ -54,8 +63,12 @@ const editorData = ref() as Ref<GraphData>;
 const editObject = ref();
 
 // Here are the parameters you need to adapt when expanding the game
-const selectionOptions = [{value: TaskType.COMPLETION, text:'Completion'}, {value: TaskType.ERRORHUNT, text:'Error hunt'},
-  {value: TaskType.CODETOUML, text:'Code -> UML'}, {value: TaskType.UMLTOCODE, text:'UML -> Code'}];
+const selectionOptions = [
+  { value: TaskType.COMPLETION, text: "Completion" },
+  { value: TaskType.ERRORHUNT, text: "Error hunt" },
+  { value: TaskType.CODETOUML, text: "Code -> UML" },
+  { value: TaskType.UMLTOCODE, text: "UML -> Code" },
+];
 const numberOfQuestions = 10;
 
 watch(
@@ -100,7 +113,7 @@ function checkFormValidity(): boolean {
 
 // FERTIG
 function loadConfig() {
-  console.log("loadConfig()")
+  console.log("loadConfig()");
   if (minigame.value.configurationId != undefined) {
     getUmlgameConfig(minigame.value.configurationId)
       .then((response) => {
@@ -114,32 +127,37 @@ function loadConfig() {
         }
       });
   } else {
-    resetConfig()
+    resetConfig();
   }
   console.log("Reset Modal");
 }
 
 // FERTIG
 function resetConfig() {
-  console.log("resetConfig()")
+  console.log("resetConfig()");
   configuration.value.id = ""; // undefined
   configuration.value.taskList = [];
   initializeTasks();
 }
 
 function initializeTasks() {
-  console.log("initializeTasks()")
+  console.log("initializeTasks()");
   taskList.value = [];
-  for(let index = 0; index < numberOfQuestions; index++) {
-    taskList.value.push(new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION))
+  for (let index = 0; index < numberOfQuestions; index++) {
+    taskList.value.push(
+      new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION)
+    );
   }
 }
 
 const openedIndex = ref();
 function onEditClick(type: TaskType, edit: any) {
-  console.log("onEditClick")
+  console.log("onEditClick");
   editObject.value = edit;
-  editorData.value = new GraphData(editObject.value.graphAsJson, editObject.value.graphDescription);
+  editorData.value = new GraphData(
+    editObject.value.graphAsJson,
+    editObject.value.graphDescription
+  );
   openedIndex.value = edit.id;
   switch (type) {
     case TaskType.COMPLETION: {
@@ -155,12 +173,12 @@ function onEditClick(type: TaskType, edit: any) {
 
 // FERTIG
 function handleOk() {
-  console.log("@ok")
+  console.log("@ok");
   const updateConfigurationRequest = configuration.value.id
     ? putUmlgameConfig(
-      configuration.value.id,
-      new UmlgameConfiguration(taskList.value)
-    )
+        configuration.value.id,
+        new UmlgameConfiguration(taskList.value)
+      )
     : postUmlgameConfig(new UmlgameConfiguration(taskList.value));
   updateConfigurationRequest
     .then((response) => {
@@ -195,7 +213,7 @@ function handleOk() {
 // FERTIG
 function handleSubmit() {
   // Exit when the form isn't valid
-  console.log("handleSubmit")
+  console.log("handleSubmit");
   if (!checkFormValidity()) {
     return;
   }
@@ -219,7 +237,14 @@ function loadModal() {
 
 // TODO analog zu handlePairOk from memory
 function handleCompletionTaskOk(data: GraphData) {
-  configuration.value.taskList.push(new UmlTask(openedIndex.value, data.graphAsJson, data.graphDescription, TaskType.COMPLETION))
+  configuration.value.taskList.push(
+    new UmlTask(
+      openedIndex.value,
+      data.graphAsJson,
+      data.graphDescription,
+      TaskType.COMPLETION
+    )
+  );
   showCompletionTaskModal.value = false;
   console.log(configuration.value.taskList);
   showModal.value = true;
@@ -241,7 +266,10 @@ function setupEditorModal() {
   console.log("setting up editor");
   showModal.value = false;
   isEditorOpen.value = true;
-  editorData.value = new GraphData(editObject.value.graphAsJson, editObject.value.graphDescription);
+  editorData.value = new GraphData(
+    editObject.value.graphAsJson,
+    editObject.value.graphDescription
+  );
 }
 
 // DNF
@@ -285,7 +313,9 @@ async function importFile(event: any) {
 }
 
 function testSend() {
-  postUmlgameConfig(new UmlgameConfiguration([new UmlTask("1", "", "test", "COMPLETION")]));
+  postUmlgameConfig(
+    new UmlgameConfiguration([new UmlTask("1", "", "test", "COMPLETION")])
+  );
 }
 </script>
 <template>
@@ -305,21 +335,27 @@ function testSend() {
     >
       <b-button @click="testSend"> TEST </b-button>
       <b-form-group>
-        <b-table :fields="fields"  :items="taskList">
-          <template #cell(task)="data" >
-            Task {{ data.item.id }}:
-          </template>
+        <b-table :fields="fields" :items="taskList">
+          <template #cell(task)="data"> Task {{ data.item.id }}: </template>
 
           <template #cell(selection)="">
-            <b-form-select v-model="selected" :options="selectionOptions" text="Select an option"  required/>
+            <b-form-select
+              v-model="selected"
+              :options="selectionOptions"
+              text="Select an option"
+              required
+            />
           </template>
 
           <template #cell(edit)="data">
-            <b-button variant="outline-primary" :key="data.index" @click="onEditClick(selected, data.item)">
+            <b-button
+              variant="outline-primary"
+              :key="data.index"
+              @click="onEditClick(selected, data.item)"
+            >
               Edit Task
             </b-button>
           </template>
-
         </b-table>
       </b-form-group>
     </form>
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 2a7b4c5..5cd95fa 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -1,47 +1,82 @@
 <template>
   <b-modal
-  :title="props.modalTitle"
-  size="xl"
-  v-model="showModal"
-  @cancel="hideModalCancel"
-  @ok="hideModalOk"
-  @show="resetModal"
+    :title="props.modalTitle"
+    size="xl"
+    v-model="showModal"
+    @cancel="hideModalCancel"
+    @ok="hideModalOk"
+    @show="resetModal"
   >
     <!-- uml -->
     <div class="uml-wrapper" style="position: relative">
       <div class="uml-container">
         <div ref="paletteContainer" class="palette">
-
           <div class="palette-group">
             <div class="palette-title">Objects</div>
-            <div class="palette-item" data-type="class" draggable="true" :style="{ backgroundColor: classColors.class }">
+            <div
+              class="palette-item"
+              data-type="class"
+              draggable="true"
+              :style="{ backgroundColor: classColors.class }"
+            >
               Class
             </div>
-            <div class="palette-item" data-type="interface" draggable="true"
-                 :style="{ backgroundColor: classColors.interface }">
+            <div
+              class="palette-item"
+              data-type="interface"
+              draggable="true"
+              :style="{ backgroundColor: classColors.interface }"
+            >
               Interface
             </div>
-            <div class="palette-item" data-type="abstract" draggable="true"
-                 :style="{ backgroundColor: classColors.abstract }">
+            <div
+              class="palette-item"
+              data-type="abstract"
+              draggable="true"
+              :style="{ backgroundColor: classColors.abstract }"
+            >
               Abstract
             </div>
-            <div class="palette-item" data-type="enum" draggable="true" :style="{ backgroundColor: classColors.enum }">
+            <div
+              class="palette-item"
+              data-type="enum"
+              draggable="true"
+              :style="{ backgroundColor: classColors.enum }"
+            >
               Enum
             </div>
 
-            <div class="palette-item" data-type="circle" draggable="true"
-                 :style="{ backgroundColor: classColors.circle }">
+            <div
+              class="palette-item"
+              data-type="circle"
+              draggable="true"
+              :style="{ backgroundColor: classColors.circle }"
+            >
               Circle
             </div>
           </div>
 
           <div class="palette-group">
             <div class="palette-title">Relations</div>
-            <div class="palette-item" data-type="dependency" draggable="true">⇢ </div>
-            <div class="palette-item" data-type="association" draggable="true">→</div>
-            <div class="palette-item" data-type="aggregation" draggable="true">◇</div>
-            <div class="palette-item" data-type="composition" draggable="true">◆</div>
-            <div class="palette-item" data-type="generalization" draggable="true">△</div>
+            <div class="palette-item" data-type="dependency" draggable="true">
+              ⇢
+            </div>
+            <div class="palette-item" data-type="association" draggable="true">
+              →
+            </div>
+            <div class="palette-item" data-type="aggregation" draggable="true">
+              ◇
+            </div>
+            <div class="palette-item" data-type="composition" draggable="true">
+              ◆
+            </div>
+            <div
+              class="palette-item"
+              data-type="generalization"
+              draggable="true"
+            >
+              △
+            </div>
           </div>
         </div>
         <div ref="paperContainer" class="paper-container"></div>
@@ -76,441 +111,516 @@
 
     <!-- uml end -->
     <b-form-group>
-      <b-form-textarea v-model="text" placeholder="Enter UML-diagram description" rows="4"/>
+      <b-form-textarea
+        v-model="text"
+        placeholder="Enter UML-diagram description"
+        rows="4"
+      />
     </b-form-group>
   </b-modal>
 </template>
 <script setup lang="ts">
-  import { useToast } from "vue-toastification";
-  import { dia, shapes, util } from '@joint/core';
-  import { onMounted, ref, defineProps, nextTick, defineEmits, watch, Ref } from "vue";
-  import { BFormInput, BFormTextarea } from "bootstrap-vue-3";
-  import { CustRect, InterfaceRect, AbstractRect, EnumRect } from "@/ts/models/links";
-  import { GraphData } from "@/ts/models/umlgame-models";
-  const props = defineProps<{
-    modalTitle: string;
-    showModal: boolean;
-    graphData: GraphData;
-  }>();
-
-  const emit = defineEmits<{
-    (e: "okModal", data: GraphData): void;
-    (e: "cancelModal"): void;
-  }>();
-
-  const toast = useToast();
-  const graphData = ref(new GraphData("", ""));
-  const text = ref();
-  const json = ref();
-  const showModal = ref(props.showModal);
-  const modalTitle = ref(props.modalTitle);
-
-  const classColors = {
-    class: 'white',
-    interface: '#cce5ff',
-    abstract: '#ffe6cc',
-    circle: 'lightgray',
-    enum: '#d3f3d3',
-  };
-  const namespace = shapes;
-  const graph = new dia.Graph({}, { cellNamespace: namespace });
-  const paperContainer = ref<HTMLElement | null>(null);
-  const paletteContainer = ref<HTMLElement | null>(null);
-  const selectedElement = ref<dia.Element | null>(null);
-  const selectedLink = ref<dia.Link | null>(null);
-  const labelText = ref('');
-  const stuff = ref('');
-  const stuff2 = ref('');
-  const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
-  let currentLinkType = ref<'dependency' | 'association' | 'aggregation' | 'composition' | 'generalization' | null>(null);
-  type LinkType = "dependency" | "association" | "aggregation" | "composition" | "generalization";
-
-  watch(
-    () => props.showModal,
-    (newBoolean) => {
-      showModal.value = newBoolean;
-    },
-    { deep: true }
-  );
-
-  watch(
-    () => props.modalTitle,
-    (newModalTitle) => {
-      modalTitle.value = newModalTitle;
-    },
-    { deep: true }
-  );
+import { useToast } from "vue-toastification";
+import { dia, shapes, util } from "@joint/core";
+import {
+  onMounted,
+  ref,
+  defineProps,
+  nextTick,
+  defineEmits,
+  watch,
+  Ref,
+} from "vue";
+import { BFormInput, BFormTextarea } from "bootstrap-vue-3";
+import {
+  CustRect,
+  InterfaceRect,
+  AbstractRect,
+  EnumRect,
+} from "@/ts/models/links";
+import { GraphData } from "@/ts/models/umlgame-models";
+const props = defineProps<{
+  modalTitle: string;
+  showModal: boolean;
+  graphData: GraphData;
+}>();
+
+const emit = defineEmits<{
+  (e: "okModal", data: GraphData): void;
+  (e: "cancelModal"): void;
+}>();
+
+const toast = useToast();
+const graphData = ref(new GraphData("", ""));
+const text = ref();
+const json = ref();
+const showModal = ref(props.showModal);
+const modalTitle = ref(props.modalTitle);
+
+const classColors = {
+  class: "white",
+  interface: "#cce5ff",
+  abstract: "#ffe6cc",
+  circle: "lightgray",
+  enum: "#d3f3d3",
+};
+const namespace = shapes;
+const graph = new dia.Graph({}, { cellNamespace: namespace });
+const paperContainer = ref<HTMLElement | null>(null);
+const paletteContainer = ref<HTMLElement | null>(null);
+const selectedElement = ref<dia.Element | null>(null);
+const selectedLink = ref<dia.Link | null>(null);
+const labelText = ref("");
+const stuff = ref("");
+const stuff2 = ref("");
+const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
+let currentLinkType = ref<
+  | "dependency"
+  | "association"
+  | "aggregation"
+  | "composition"
+  | "generalization"
+  | null
+>(null);
+type LinkType =
+  | "dependency"
+  | "association"
+  | "aggregation"
+  | "composition"
+  | "generalization";
+
+watch(
+  () => props.showModal,
+  (newBoolean) => {
+    showModal.value = newBoolean;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.modalTitle,
+  (newModalTitle) => {
+    modalTitle.value = newModalTitle;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.graphData,
+  (data) => {
+    graphData.value = data;
+  },
+  { deep: true }
+);
+
+function hideModalOk() {
+  let data = new GraphData(graph.toJSON(), text.value);
+  console.log(data);
+  graphData.value = data;
+  console.log("Editor ok");
+  emit("okModal", graphData.value);
+}
 
-  watch(
-    () => props.graphData,
-    (data) => {
-      graphData.value = data;
-    },
-    { deep: true }
-  );
+function hideModalCancel() {
+  // TODO
+  console.log("Editor cancel");
+  emit("cancelModal");
+}
 
-  function hideModalOk() {
-    let data = new GraphData(graph.toJSON(), text.value);
-    console.log(data);
-    graphData.value = data;
-    console.log("Editor ok");
-    emit("okModal", graphData.value);
-  }
+function resetModal() {
+  // TODO
+  console.log("Reset editor");
+  let data = graphData.value;
+  text.value = data.graphDescription;
+  json.value = data.graphAsJson;
+}
 
-  function hideModalCancel() {
-    // TODO
-    console.log("Editor cancel");
-    emit("cancelModal");
+// uml
+function resetElementStyle(element: dia.Element) {
+  const elementType = element.get("type");
+  let originalFill: string;
+  switch (elementType) {
+    case "InterfaceRect":
+      originalFill = "#cce5ff";
+      break;
+    case "AbstractRect":
+      originalFill = "#ffe6cc";
+      break;
+    case "EnumRect":
+      originalFill = "#d3f3d3";
+      break;
+    default:
+      originalFill = "white";
+      break;
   }
 
-  function resetModal() {
-    // TODO
-    console.log("Reset editor");
-    let data = graphData.value;
-    text.value = data.graphDescription;
-    json.value = data.graphAsJson;
-  }
+  element.attr({
+    body: {
+      stroke: "black",
+      strokeWidth: 2,
+      fill: originalFill,
+    },
+  });
+}
 
-  // uml
-  function resetElementStyle(element: dia.Element) {
-    const elementType = element.get('type');
-    let originalFill: string;
-    switch (elementType) {
-      case 'InterfaceRect':
-        originalFill = '#cce5ff';
-        break;
-      case 'AbstractRect':
-        originalFill = '#ffe6cc';
-        break;
-      case 'EnumRect':
-        originalFill = '#d3f3d3';
-        break;
-      default:
-        originalFill = 'white';
-        break;
-    }
+function isLinkType(type: string): type is LinkType {
+  return [
+    "dependency",
+    "association",
+    "aggregation",
+    "composition",
+    "generalization",
+  ].includes(type);
+}
 
-    element.attr({
-      body: {
-        stroke: 'black',
-        strokeWidth: 2,
-        fill: originalFill
-      }
-    });
-  }
+function handleLinkClick(linkView: dia.LinkView) {
+  selectedLink.value = linkView.model;
+  selectedElement.value = null;
+}
 
-  function isLinkType(type: string): type is LinkType {
-    return ["dependency", "association", "aggregation", "composition", "generalization"].includes(type);
+function deleteRelation() {
+  if (selectedLink.value) {
+    selectedLink.value.remove();
+    selectedLink.value = null;
   }
+}
 
-  function handleLinkClick(linkView: dia.LinkView) {
-    selectedLink.value = linkView.model;
-    selectedElement.value = null;
-  }
+function handleElementClick(elementView: dia.ElementView) {
+  const clickedElement = elementView.model;
 
-  function deleteRelation() {
-    if (selectedLink.value) {
-      selectedLink.value.remove();
-      selectedLink.value = null;
-    }
+  if (selectedElement.value && selectedElement.value.id !== clickedElement.id) {
+    resetElementStyle(selectedElement.value as dia.Element);
   }
 
-  function handleElementClick(elementView: dia.ElementView) {
-    const clickedElement = elementView.model;
-
-    if (selectedElement.value && selectedElement.value.id !== clickedElement.id) {
-      resetElementStyle(selectedElement.value as dia.Element);
-    }
+  selectedElement.value = clickedElement;
 
-    selectedElement.value = clickedElement;
+  labelText.value = clickedElement.attr("label/text");
+  stuff.value = clickedElement.attr("secondaryLabel/text");
+  stuff2.value = clickedElement.attr("thirdLabel/text");
+  selectedLink.value = null;
 
-    labelText.value = clickedElement.attr('label/text');
-    stuff.value = clickedElement.attr('secondaryLabel/text');
-    stuff2.value = clickedElement.attr('thirdLabel/text');
-    selectedLink.value = null;
+  clickedElement.attr("body/stroke", "#f1c40f");
+  clickedElement.attr("body/fill", "rgba(241, 196, 15, 0.3)");
+}
 
-    clickedElement.attr('body/stroke', '#f1c40f');
-    clickedElement.attr('body/fill', 'rgba(241, 196, 15, 0.3)');
+function updateLabel() {
+  if (selectedElement.value) {
+    selectedElement.value.attr("label/text", labelText.value);
   }
+}
 
-  function updateLabel() {
-    if (selectedElement.value) {
-      selectedElement.value.attr('label/text', labelText.value);
-    }
+function deleteSelectedElement() {
+  if (selectedElement.value) {
+    selectedElement.value.remove();
+    selectedElement.value = null;
+    deleteButtonPos.value = null;
   }
+}
 
-  function deleteSelectedElement() {
-    if (selectedElement.value) {
-      selectedElement.value.remove();
-      selectedElement.value = null;
-      deleteButtonPos.value = null;
-    }
-  }
+function adjustElementHeight() {
+  if (!selectedElement.value) return;
 
-  function adjustElementHeight() {
-    if (!selectedElement.value) return;
+  const attrLines = stuff.value.split("\n").length;
+  const methodLines = stuff2.value.split("\n").length;
 
-    const attrLines = stuff.value.split('\n').length;
-    const methodLines = stuff2.value.split('\n').length;
+  const extraHeightPerLine = 15;
+  const totalHeight =
+    30 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine;
 
-    const extraHeightPerLine = 15;
-    const totalHeight = 30 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine;
+  selectedElement.value.resize(100, totalHeight);
 
-    selectedElement.value.resize(100, totalHeight);
+  selectedElement.value.attr("line1/y1", 25);
+  selectedElement.value.attr("line1/y2", 25);
+  selectedElement.value.attr("line2/y1", 25 + attrLines * extraHeightPerLine);
+  selectedElement.value.attr("line2/y2", 25 + attrLines * extraHeightPerLine);
+  selectedElement.value.attr("label/y", 12);
+  selectedElement.value.attr(
+    "secondaryLabel/y",
+    25 + (attrLines * extraHeightPerLine) / 2
+  );
+  selectedElement.value.attr(
+    "thirdLabel/y",
+    25 + attrLines * extraHeightPerLine + (methodLines * extraHeightPerLine) / 2
+  );
+}
 
-    selectedElement.value.attr('line1/y1', 25);
-    selectedElement.value.attr('line1/y2', 25);
-    selectedElement.value.attr('line2/y1', 25 + attrLines * extraHeightPerLine);
-    selectedElement.value.attr('line2/y2', 25 + attrLines * extraHeightPerLine);
-    selectedElement.value.attr('label/y', 12);
-    selectedElement.value.attr('secondaryLabel/y', 25 + attrLines * extraHeightPerLine / 2);
-    selectedElement.value.attr('thirdLabel/y', 25 + attrLines * extraHeightPerLine + methodLines * extraHeightPerLine / 2);
+function updateAttributes() {
+  if (selectedElement.value) {
+    selectedElement.value.attr("secondaryLabel/text", stuff.value);
+    adjustElementHeight();
   }
+}
 
-  function updateAttributes() {
-    if (selectedElement.value) {
-      selectedElement.value.attr('secondaryLabel/text', stuff.value);
-      adjustElementHeight();
-    }
+function updateMethods() {
+  if (selectedElement.value) {
+    selectedElement.value.attr("thirdLabel/text", stuff2.value);
+    adjustElementHeight();
   }
+}
 
-  function updateMethods() {
-    if (selectedElement.value) {
-      selectedElement.value.attr('thirdLabel/text', stuff2.value);
-      adjustElementHeight();
-    }
-  }
+function deleteAllRelations() {
+  if (!selectedElement.value) return;
+  const links = graph.getConnectedLinks(
+    selectedElement.value as unknown as dia.Cell
+  );
+  links.forEach((link) => {
+    link.remove();
+  });
+}
 
-  function deleteAllRelations() {
-    if (!selectedElement.value) return;
-    const links = graph.getConnectedLinks(selectedElement.value as unknown as dia.Cell);
-    links.forEach(link => {
-      link.remove();
-    });
-  }
+let linkSourceElement: dia.Element | null = null;
+let link: dia.Link | null = null;
+let isDependencyMode = ref(false);
+let hoveredElement: dia.Element | null = null;
+let paper: dia.Paper;
+
+onMounted(() => {
+  nextTick(() => {
+    if (paperContainer.value) {
+      paper = new dia.Paper({
+        el: paperContainer.value,
+        model: graph,
+        width: 700,
+        height: 600,
+        background: { color: "#F5F5F5" },
+        cellViewNamespace: namespace,
+      });
+
+      paper.on("element:pointerclick", (elementView) => {
+        handleElementClick(elementView);
+      });
+
+      paper.on("element:mouseenter", (elementView) => {
+        if (!isDependencyMode.value) {
+          elementView.model.attr("body/stroke", "blue");
+        }
+      });
+      paper.on("element:mouseleave", (elementView) => {
+        if (!isDependencyMode.value) {
+          elementView.model.attr("body/stroke", "black");
+        }
+      });
+
+      if (paletteContainer.value) {
+        paletteContainer.value
+          .querySelectorAll(".palette-item")
+          .forEach((item) => {
+            item.addEventListener("dragstart", (event) => {
+              (event as DragEvent).dataTransfer?.setData(
+                "type",
+                item.getAttribute("data-type") || ""
+              );
+            });
+          });
+      }
 
-  let linkSourceElement: dia.Element | null = null;
-  let link: dia.Link | null = null;
-  let isDependencyMode = ref(false);
-  let hoveredElement: dia.Element | null = null;
-  let paper: dia.Paper;
-
-  onMounted(() => {
-    nextTick(() => {
-      if (paperContainer.value) {
-        paper = new dia.Paper({
-          el: paperContainer.value,
-          model: graph,
-          width: 700,
-          height: 600,
-          background: { color: '#F5F5F5' },
-          cellViewNamespace: namespace
-        });
+      paper.on("link:pointerclick", (linkView) => {
+        handleLinkClick(linkView);
+      });
 
-        paper.on('element:pointerclick', (elementView) => {
-          handleElementClick(elementView);
-        });
+      paperContainer.value.addEventListener("dragover", (event) => {
+        event.preventDefault();
+      });
 
-        paper.on('element:mouseenter', (elementView) => {
-          if (!isDependencyMode.value) {
-            elementView.model.attr('body/stroke', 'blue');
-          }
-        });
-        paper.on('element:mouseleave', (elementView) => {
-          if (!isDependencyMode.value) {
-            elementView.model.attr('body/stroke', 'black');
+      const updateLinkTarget = (event: MouseEvent) => {
+        if (isDependencyMode.value && link) {
+          const paperPoint = paper.pageToLocalPoint({
+            x: event.clientX,
+            y: event.clientY,
+          });
+          link.target({ x: paperPoint.x, y: paperPoint.y });
+
+          const elementViews = paper.findViewsFromPoint(paperPoint);
+          const candidate = elementViews.find((view) =>
+            view.model.isElement()
+          )?.model;
+          if (candidate) {
+            if (hoveredElement && hoveredElement.id !== candidate.id) {
+              hoveredElement.attr("body/stroke", "black");
+            }
+            candidate.attr("body/stroke", "blue");
+            hoveredElement = candidate;
+          } else {
+            if (hoveredElement) {
+              hoveredElement.attr("body/stroke", "black");
+              hoveredElement = null;
+            }
           }
-        });
+        }
+      };
 
-        if (paletteContainer.value) {
-          paletteContainer.value.querySelectorAll('.palette-item').forEach((item) => {
-            item.addEventListener('dragstart', (event) => {
-              (event as DragEvent).dataTransfer?.setData('type', item.getAttribute('data-type') || '');
-            });
+      const finalizeLink = (event: MouseEvent) => {
+        if (isDependencyMode.value && link) {
+          const paperPoint = paper.pageToLocalPoint({
+            x: event.clientX,
+            y: event.clientY,
           });
-        }
+          const elementViews = paper.findViewsFromPoint(paperPoint);
+          const targetElementView = elementViews.find((view) =>
+            view.model.isElement()
+          );
+
+          if (targetElementView) {
+            link.target(targetElementView.model);
+            targetElementView.model.attr("body/stroke", "blue");
+            setTimeout(() => {
+              targetElementView.model.attr("body/stroke", "black");
+            }, 2000);
+          } else {
+            link.remove();
+          }
 
-        paper.on('link:pointerclick', (linkView) => {
-          handleLinkClick(linkView);
-        });
+          isDependencyMode.value = false;
+          currentLinkType.value = null;
+          linkSourceElement = null;
+          link = null;
 
-        paperContainer.value.addEventListener('dragover', (event) => {
-          event.preventDefault();
+          if (hoveredElement) {
+            hoveredElement.attr("body/stroke", "black");
+            hoveredElement = null;
+          }
+          paperContainer.value?.removeEventListener(
+            "mousemove",
+            updateLinkTarget
+          );
+          paperContainer.value?.removeEventListener("mouseup", finalizeLink);
+        }
+      };
+
+      paperContainer.value.addEventListener("drop", (event) => {
+        event.preventDefault();
+        const rawType =
+          (event as DragEvent).dataTransfer?.getData("type") ?? "";
+        const position = paper.pageToLocalPoint({
+          x: event.clientX,
+          y: event.clientY,
         });
+        const elementViews = paper.findViewsFromPoint(position);
+        const targetElement = elementViews.find((view) =>
+          view.model.isElement()
+        );
+
+        if (isLinkType(rawType)) {
+          if (targetElement) {
+            linkSourceElement = targetElement.model;
+            isDependencyMode.value = true;
+            currentLinkType.value = rawType;
+            link = new shapes.standard.Link({
+              source: { id: linkSourceElement.id },
+              target: { x: position.x, y: position.y },
+            });
 
-        const updateLinkTarget = (event: MouseEvent) => {
-          if (isDependencyMode.value && link) {
-            const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
-            link.target({ x: paperPoint.x, y: paperPoint.y });
-
-            const elementViews = paper.findViewsFromPoint(paperPoint);
-            const candidate = elementViews.find(view => view.model.isElement())?.model;
-            if (candidate) {
-              if (hoveredElement && hoveredElement.id !== candidate.id) {
-                hoveredElement.attr('body/stroke', 'black');
-              }
-              candidate.attr('body/stroke', 'blue');
-              hoveredElement = candidate;
-            } else {
-              if (hoveredElement) {
-                hoveredElement.attr('body/stroke', 'black');
-                hoveredElement = null;
-              }
-            }
-          }
-        };
-
-        const finalizeLink = (event: MouseEvent) => {
-          if (isDependencyMode.value && link) {
-            const paperPoint = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
-            const elementViews = paper.findViewsFromPoint(paperPoint);
-            const targetElementView = elementViews.find(view => view.model.isElement());
-
-            if (targetElementView) {
-              link.target(targetElementView.model);
-              targetElementView.model.attr('body/stroke', 'blue');
-              setTimeout(() => {
-                targetElementView.model.attr('body/stroke', 'black');
-              }, 2000);
-            } else {
-              link.remove();
+            switch (currentLinkType.value) {
+              case "dependency":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    strokeDasharray: "5,5",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 10 -5 0 0 10 5 z",
+                      fill: "white",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
+              case "association":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: undefined,
+                  },
+                });
+                break;
+              case "aggregation":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 20 0 L 10 5 L 0 0 L 10 -5 Z",
+                      fill: "white",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
+              case "composition":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 20 0 L 10 5 L 0 0 L 10 -5 Z",
+                      fill: "black",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
+              case "generalization":
+                link.attr({
+                  line: {
+                    strokeWidth: 2,
+                    stroke: "black",
+                    targetMarker: {
+                      type: "path",
+                      d: "M 10 -5 0 0 10 5 z",
+                      fill: "white",
+                      stroke: "black",
+                    },
+                  },
+                });
+                break;
             }
 
-            isDependencyMode.value = false;
-            currentLinkType.value = null;
-            linkSourceElement = null;
-            link = null;
-
-            if (hoveredElement) {
-              hoveredElement.attr('body/stroke', 'black');
-              hoveredElement = null;
-            }
-            paperContainer.value?.removeEventListener('mousemove', updateLinkTarget);
-            paperContainer.value?.removeEventListener('mouseup', finalizeLink);
-          }
-        };
-
-        paperContainer.value.addEventListener('drop', (event) => {
-          event.preventDefault();
-          const rawType = (event as DragEvent).dataTransfer?.getData('type') ?? '';
-          const position = paper.pageToLocalPoint({ x: event.clientX, y: event.clientY });
-          const elementViews = paper.findViewsFromPoint(position);
-          const targetElement = elementViews.find(view => view.model.isElement());
-
-          if (isLinkType(rawType)) {
-            if (targetElement) {
-              linkSourceElement = targetElement.model;
-              isDependencyMode.value = true;
-              currentLinkType.value = rawType;
-              link = new shapes.standard.Link({
-                source: { id: linkSourceElement.id },
-                target: { x: position.x, y: position.y }
-              });
-
-              switch (currentLinkType.value) {
-                case 'dependency':
-                  link.attr({
-                    line: {
-                      strokeWidth: 2,
-                      stroke: 'black',
-                      strokeDasharray: '5,5',
-                      targetMarker: {
-                        type: 'path',
-                        d: 'M 10 -5 0 0 10 5 z',
-                        fill: 'white',
-                        stroke: 'black'
-                      }
-                    }
-                  });
-                  break;
-                case 'association':
-                  link.attr({
-                    line: {
-                      strokeWidth: 2,
-                      stroke: 'black',
-                      targetMarker: undefined
-                    }
-                  });
-                  break;
-                case 'aggregation':
-                  link.attr({
-                    line: {
-                      strokeWidth: 2,
-                      stroke: 'black',
-                      targetMarker: {
-                        type: 'path',
-                        d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
-                        fill: 'white',
-                        stroke: 'black'
-                      }
-                    }
-                  });
-                  break;
-                case 'composition':
-                  link.attr({
-                    line: {
-                      strokeWidth: 2,
-                      stroke: 'black',
-                      targetMarker: {
-                        type: 'path',
-                        d: 'M 20 0 L 10 5 L 0 0 L 10 -5 Z',
-                        fill: 'black',
-                        stroke: 'black'
-                      }
-                    }
-                  });
-                  break;
-                case 'generalization':
-                  link.attr({
-                    line: {
-                      strokeWidth: 2,
-                      stroke: 'black',
-                      targetMarker: {
-                        type: 'path',
-                        d: 'M 10 -5 0 0 10 5 z',
-                        fill: 'white',
-                        stroke: 'black'
-                      }
-                    }
-                  });
-                  break;
-              }
-
-              graph.addCell(link);
-              console.log(`Relation '${rawType}' gestartet mit`, linkSourceElement);
-
-              paperContainer.value?.addEventListener('mousemove', updateLinkTarget);
-              paperContainer.value?.addEventListener('mouseup', finalizeLink);
-            } else {
-              console.log(`Relation '${rawType}' gezogen, aber kein Startobjekt getroffen.`);
-            }
+            graph.addCell(link);
+            console.log(
+              `Relation '${rawType}' gestartet mit`,
+              linkSourceElement
+            );
+
+            paperContainer.value?.addEventListener(
+              "mousemove",
+              updateLinkTarget
+            );
+            paperContainer.value?.addEventListener("mouseup", finalizeLink);
           } else {
-            let element;
-            if (rawType === 'class') {
-              element = new CustRect({ position });
-            } else if (rawType === 'interface') {
-              element = new InterfaceRect({ position });
-            } else if (rawType === 'abstract') {
-              element = new AbstractRect({ position });
-            } else if (rawType === 'circle') {
-              element = new shapes.standard.Circle({
-                position,
-                size: { width: 50, height: 50 },
-                attrs: { label: { text: 'Circle' } }
-              });
-            } else if (rawType === 'enum') {
-              element = new EnumRect({ position });
-            }
+            console.log(
+              `Relation '${rawType}' gezogen, aber kein Startobjekt getroffen.`
+            );
+          }
+        } else {
+          let element;
+          if (rawType === "class") {
+            element = new CustRect({ position });
+          } else if (rawType === "interface") {
+            element = new InterfaceRect({ position });
+          } else if (rawType === "abstract") {
+            element = new AbstractRect({ position });
+          } else if (rawType === "circle") {
+            element = new shapes.standard.Circle({
+              position,
+              size: { width: 50, height: 50 },
+              attrs: { label: { text: "Circle" } },
+            });
+          } else if (rawType === "enum") {
+            element = new EnumRect({ position });
+          }
 
-            if (element) {
-              graph.addCell(element);
-            }
+          if (element) {
+            graph.addCell(element);
           }
-        });
-      }
-    });
+        }
+      });
+    }
   });
-
+});
 </script>
 <style scoped>
 .uml-container {
@@ -551,7 +661,6 @@
   text-transform: uppercase;
 }
 
-
 .paper-container {
   width: 400px;
   height: 400px;
@@ -597,4 +706,4 @@
   stroke-width: 2;
   fill: rgba(255, 102, 0, 0.1);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/ts/models/links.ts b/src/ts/models/links.ts
index 5aee31e..bacc634 100644
--- a/src/ts/models/links.ts
+++ b/src/ts/models/links.ts
@@ -1,61 +1,69 @@
-import { shapes, util } from '@joint/core';
+import { shapes, util } from "@joint/core";
 
 export class CustRect extends shapes.standard.Rectangle {
   override defaults() {
     return {
       ...super.defaults,
-      type: 'Rect',
+      type: "Rect",
       size: { width: 100, height: 80 },
       attrs: {
         body: {
-          width: 'calc(w)',
-          height: 'calc(h)',
-          fill: 'white',
+          width: "calc(w)",
+          height: "calc(h)",
+          fill: "white",
           strokeWidth: 2,
-          stroke: 'black'
+          stroke: "black",
         },
         line1: {
-          x1: 0, y1: 25, x2: 'calc(w)', y2: 25,
-          stroke: 'black', strokeWidth: 1
+          x1: 0,
+          y1: 25,
+          x2: "calc(w)",
+          y2: 25,
+          stroke: "black",
+          strokeWidth: 1,
         },
         line2: {
-          x1: 0, y1: 50, x2: 'calc(w)', y2: 50,
-          stroke: 'black', strokeWidth: 1
+          x1: 0,
+          y1: 50,
+          x2: "calc(w)",
+          y2: 50,
+          stroke: "black",
+          strokeWidth: 1,
         },
         typeLabel: {
-          text: '',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
+          text: "",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
           fontSize: 8,
-          fontStyle: 'italic',
-          x: 'calc(w/2)',
-          y: 4
+          fontStyle: "italic",
+          x: "calc(w/2)",
+          y: 4,
         },
         label: {
-          text: 'Classname',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
+          text: "Classname",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
           fontSize: 12,
-          x: 'calc(w/2)',
-          y: 17
+          x: "calc(w/2)",
+          y: 17,
         },
         secondaryLabel: {
-          text: 'Attributes',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
+          text: "Attributes",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
           fontSize: 12,
-          x: 'calc(w/2)',
-          y: 37
+          x: "calc(w/2)",
+          y: 37,
         },
         thirdLabel: {
-          text: 'Methods',
-          textVerticalAnchor: 'middle',
-          textAnchor: 'middle',
+          text: "Methods",
+          textVerticalAnchor: "middle",
+          textAnchor: "middle",
           fontSize: 12,
-          x: 'calc(w/2)',
-          y: 65
-        }
-      }
+          x: "calc(w/2)",
+          y: 65,
+        },
+      },
     };
   }
 
@@ -76,12 +84,17 @@ export class InterfaceRect extends CustRect {
   override defaults() {
     return {
       ...super.defaults(),
-      type: 'InterfaceRect',
+      type: "InterfaceRect",
       attrs: {
         ...super.defaults().attrs,
-        body: { ...super.defaults().attrs.body, fill: '#cce5ff' },
-        typeLabel: { ...super.defaults().attrs.typeLabel, text: '«interface»', fontSize: 10, y: 5 }
-      }
+        body: { ...super.defaults().attrs.body, fill: "#cce5ff" },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: "«interface»",
+          fontSize: 10,
+          y: 5,
+        },
+      },
     };
   }
 }
@@ -90,12 +103,17 @@ export class AbstractRect extends CustRect {
   override defaults() {
     return {
       ...super.defaults(),
-      type: 'AbstractRect',
+      type: "AbstractRect",
       attrs: {
         ...super.defaults().attrs,
-        body: { ...super.defaults().attrs.body, fill: '#ffe6cc' },
-        typeLabel: { ...super.defaults().attrs.typeLabel, text: '«abstract»', fontSize: 10, y: 5 }
-      }
+        body: { ...super.defaults().attrs.body, fill: "#ffe6cc" },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: "«abstract»",
+          fontSize: 10,
+          y: 5,
+        },
+      },
     };
   }
 }
@@ -104,12 +122,17 @@ export class EnumRect extends CustRect {
   override defaults() {
     return {
       ...super.defaults(),
-      type: 'EnumRect',
+      type: "EnumRect",
       attrs: {
         ...super.defaults().attrs,
-        body: { ...super.defaults().attrs.body, fill: '#d3f3d3' },
-        typeLabel: { ...super.defaults().attrs.typeLabel, text: '«enum»', fontSize: 10, y: 5 }
-      }
+        body: { ...super.defaults().attrs.body, fill: "#d3f3d3" },
+        typeLabel: {
+          ...super.defaults().attrs.typeLabel,
+          text: "«enum»",
+          fontSize: 10,
+          y: 5,
+        },
+      },
     };
   }
 }
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 1c95185..9f264e6 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -17,7 +17,12 @@ export class UmlTask {
   text: string;
   taskType: TaskType;
 
-  public constructor(id: string, graph: string, text: string, taskType: TaskType) {
+  public constructor(
+    id: string,
+    graph: string,
+    text: string,
+    taskType: TaskType
+  ) {
     this.id = id;
     this.graph = graph;
     this.text = text;
@@ -26,7 +31,10 @@ export class UmlTask {
 }
 
 export enum TaskType {
-  COMPLETION, ERRORHUNT, CODETOUML, UMLTOCODE
+  COMPLETION,
+  ERRORHUNT,
+  CODETOUML,
+  UMLTOCODE,
 }
 
 export class GraphData {
@@ -37,4 +45,4 @@ export class GraphData {
     this.graphAsJson = json;
     this.graphDescription = text;
   }
-}
\ No newline at end of file
+}
diff --git a/src/ts/rest-clients/umlgame-rest-client.ts b/src/ts/rest-clients/umlgame-rest-client.ts
index 967bbd5..563412e 100644
--- a/src/ts/rest-clients/umlgame-rest-client.ts
+++ b/src/ts/rest-clients/umlgame-rest-client.ts
@@ -4,7 +4,9 @@ import config from "@/config";
 
 import { IUmlgameConfiguration } from "@/ts/models/umlgame-models";
 
-export async function putUmlgameConfig(id: string, umlGameConfig: IUmlgameConfiguration
+export async function putUmlgameConfig(
+  id: string,
+  umlGameConfig: IUmlgameConfiguration
 ): Promise<AxiosResponse> {
   return axios.put(
     `${config.umlgameApiUrl}/configurations/${id}`,
@@ -16,8 +18,8 @@ export async function getUmlgameConfig(id: string): Promise<AxiosResponse> {
   return axios.get(`${config.umlgameApiUrl}/configurations/${id}`);
 }
 
-export async function postUmlgameConfig(umlGameConfig: IUmlgameConfiguration): Promise<AxiosResponse> {
-  return axios.post(`${config.umlgameApiUrl}/configurations`,
-    umlGameConfig
-  );
+export async function postUmlgameConfig(
+  umlGameConfig: IUmlgameConfiguration
+): Promise<AxiosResponse> {
+  return axios.post(`${config.umlgameApiUrl}/configurations`, umlGameConfig);
 }

From d5138e3dd00f875b76df9374fe4898242e990106 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Sat, 3 May 2025 17:03:55 +0200
Subject: [PATCH 17/26] adjusted reset and docker

---
 .nginx/compose/nginx-dev.conf                 | 140 +++---
 docker-compose-dev.yaml                       | 444 +++++++++---------
 .../EditUmlGameConfigurationModal.vue         | 193 +++-----
 src/ts/models/umlgame-models.ts               |   9 +-
 src/ts/rest-clients/umlgame-rest-client.ts    |   2 -
 5 files changed, 362 insertions(+), 426 deletions(-)

diff --git a/.nginx/compose/nginx-dev.conf b/.nginx/compose/nginx-dev.conf
index 625ef82..46fceda 100644
--- a/.nginx/compose/nginx-dev.conf
+++ b/.nginx/compose/nginx-dev.conf
@@ -16,41 +16,41 @@ server {
         proxy_pass      http://keycloak/keycloak/;
     }
 
-    #location /minigames/bugfinder/api/ {
-    #    proxy_pass      http://bugfinder-backend/api/;
-    #}
-    #
-    #location /minigames/chickenshock/api/ {
-    #    proxy_pass      http://chickenshock-backend/api/;
-    #}
-    #
-    #location /minigames/finitequiz/api/ {
-    #    proxy_pass      http://finitequiz-backend/api/;
-    #}
-    #
-    #location /minigames/crosswordpuzzle/api/ {
-    #    proxy_pass      http://crosswordpuzzle-backend/api/;
-    #}
-    #
-    #location /minigames/memory/api/ {
-    #    proxy_pass      http://memory-backend/api/;
-    #}
-    #
-    #location /minigames/regexgame/api/ {
-    #    proxy_pass      http://regexgame-backend/api/;
-    #}
-    #
-    #location /minigames/towercrush/api/ {
-    #    proxy_pass      http://towercrush-backend/api/;
-    #}
-    #
-    #location /minigames/umlgame/api/ {
-    #    proxy_pass      http://umlgame-backend/api;
-    #}
-    #
-    #location /minigames/towerdefense/api/ {
-    #    proxy_pass      http://towerdefense-backend/api/;
-    #}
+    location /minigames/bugfinder/api/ {
+        proxy_pass      http://bugfinder-backend/api/;
+    }
+
+    location /minigames/chickenshock/api/ {
+        proxy_pass      http://chickenshock-backend/api/;
+    }
+
+    location /minigames/finitequiz/api/ {
+        proxy_pass      http://finitequiz-backend/api/;
+    }
+
+    location /minigames/crosswordpuzzle/api/ {
+        proxy_pass      http://crosswordpuzzle-backend/api/;
+    }
+
+    location /minigames/memory/api/ {
+        proxy_pass      http://memory-backend/api/;
+    }
+
+    location /minigames/regexgame/api/ {
+        proxy_pass      http://regexgame-backend/api/;
+    }
+
+    location /minigames/towercrush/api/ {
+        proxy_pass      http://towercrush-backend/api/;
+    }
+
+    location /minigames/umlgame/api/ {
+        proxy_pass      http://umlgame-backend/api;
+    }
+
+    location /minigames/towerdefense/api/ {
+        proxy_pass      http://towerdefense-backend/api/;
+    }
 
     location /overworld/api/ {
         proxy_pass      http://overworld-backend/api/;
@@ -60,41 +60,41 @@ server {
         proxy_pass      http://overworld/;
     }
 
-    #location /minigames/chickenshock/ {
-    #    proxy_pass      http://chickenshock/;
-    #}
-    #
-    #location /minigames/bugfinder/ {
-    #    proxy_pass      http://bugfinder/;
-    #}
-    #
-    #location /minigames/finitequiz/ {
-    #    proxy_pass      http://finitequiz/;
-    #}
-    #
-    #location /minigames/crosswordpuzzle/ {
-    #    proxy_pass      http://crosswordpuzzle/;
-    #}
-    #
-    #location /minigames/memory/ {
-    #    proxy_pass      http://memory/;
-    #}
-    #
-    #location /minigames/regexgame/ {
-    #    proxy_pass      http://regexgame/;
-    #}
-    #
-    #location /minigames/towercrush/ {
-    #    proxy_pass      http://towercrush/;
-    #}
-    #
-    #location /minigames/umlgame/ {
-    #    proxy_pass      http://umlgame/;
-    #}
-    #
-    #location /minigames/towerdefense/ {
-    #    proxy_pass      http://towerdefense/;
-    #}
+    location /minigames/chickenshock/ {
+        proxy_pass      http://chickenshock/;
+    }
+
+    location /minigames/bugfinder/ {
+        proxy_pass      http://bugfinder/;
+    }
+
+    location /minigames/finitequiz/ {
+        proxy_pass      http://finitequiz/;
+    }
+
+    location /minigames/crosswordpuzzle/ {
+        proxy_pass      http://crosswordpuzzle/;
+    }
+
+    location /minigames/memory/ {
+        proxy_pass      http://memory/;
+    }
+
+    location /minigames/regexgame/ {
+        proxy_pass      http://regexgame/;
+    }
+
+    location /minigames/towercrush/ {
+        proxy_pass      http://towercrush/;
+    }
+
+    location /minigames/umlgame/ {
+        proxy_pass      http://umlgame/;
+    }
+
+    location /minigames/towerdefense/ {
+        proxy_pass      http://towerdefense/;
+    }
 
     location /lecturer-interface/ {
         proxy_pass      http://host.docker.internal:8000/lecturer-interface/;
diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index 6d6847b..f83bd33 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -149,7 +149,6 @@ services:
 
   overworld-backend:
     container_name: overworld-backend
-    image: ghcr.io/gamify-it/overworld-backend:main
     restart: always
     pull_policy: always
     expose:
@@ -170,157 +169,158 @@ services:
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
-#chickenshock-backend:
-#  container_name: chickenshock-backend
-#  image: ghcr.io/gamify-it/chickenshock-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - chickenshock-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-#bugfinder-backend:
-#  container_name: bugfinder-backend
-#  image: ghcr.io/gamify-it/bugfinder-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - bugfinder-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-#finitequiz-backend:
-#  container_name: finitequiz-backend
-#  image: ghcr.io/gamify-it/finitequiz-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - chickenshock-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-#crosswordpuzzle-backend:
-#  container_name: crosswordpuzzle-backend
-#  image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - crosswordpuzzle-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-#memory-backend:
-#  container_name: memory-backend
-#  image: ghcr.io/gamify-it/memory-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - memory-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://memory-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-#regexgame-backend:
-#  container_name: regexgame-backend
-#  image: ghcr.io/gamify-it/regexgame-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - regexgame-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-#towercrush-backend:
-#  container_name: towercrush-backend
-#  image: ghcr.io/gamify-it/towercrush-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - towercrush-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-#towerdefense-backend:
-#  container_name: towerdefense-backend
-#  image: ghcr.io/gamify-it/towerdefense-backend:main
-#  restart: always
-#  pull_policy: always
-#  expose:
-#    - "80"
-#  depends_on:
-#    - towerdefense-db
-#  environment:
-#    - POSTGRES_USER=postgres
-#    - POSTGRES_PASSWORD=postgres
-#    - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
-#    - OVERWORLD_URL=http://overworld-backend/api/v1
-#    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-#    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-#
-  #umlgame-backend:
-  #  container_name: umlgame-backend
-  #  image: ghcr.io/gamify-it/umlgame-backend:main
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #  depends_on:
-  #    - umlgame-db
-  #  environment:
-  #    - POSTGRES_USER=postgres
-  #    - POSTGRES_PASSWORD=postgres
-  #    - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
-  #    - OVERWORLD_URL=http://overworld-backend/api/v1
-  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  chickenshock-backend:
+    container_name: chickenshock-backend
+    image: ghcr.io/gamify-it/chickenshock-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - chickenshock-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  bugfinder-backend:
+    container_name: bugfinder-backend
+    image: ghcr.io/gamify-it/bugfinder-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - bugfinder-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  finitequiz-backend:
+    container_name: finitequiz-backend
+    image: ghcr.io/gamify-it/finitequiz-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - chickenshock-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  crosswordpuzzle-backend:
+    container_name: crosswordpuzzle-backend
+    image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - crosswordpuzzle-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  memory-backend:
+    container_name: memory-backend
+    image: ghcr.io/gamify-it/memory-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - memory-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://memory-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  regexgame-backend:
+    container_name: regexgame-backend
+    image: ghcr.io/gamify-it/regexgame-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - regexgame-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  towercrush-backend:
+    container_name: towercrush-backend
+    image: ghcr.io/gamify-it/towercrush-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - towercrush-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  towerdefense-backend:
+    container_name: towerdefense-backend
+    image: ghcr.io/gamify-it/towerdefense-backend:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
+    depends_on:
+      - towerdefense-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  
+  umlgame-backend:
+    container_name: umlgame-backend
+    #image: ghcr.io/gamify-it/umlgame-backend:main
+    build: ../umlgame-backend
+    restart: always
+    expose:
+      - "80"
+    depends_on:
+      - umlgame-db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_URL=postgresql://umlgame-db:5432/postgres
+      - OVERWORLD_URL=http://overworld-backend/api/v1
+      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
   #frontends
   landing-page:
@@ -339,77 +339,77 @@ services:
     expose:
       - "80"
 
-  #chickenshock:
-  #  container_name: chickenshock
-  #  image: ghcr.io/gamify-it/chickenshock:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #
-  #finitequiz:
-  #  container_name: finitequiz
-  #  image: ghcr.io/gamify-it/finitequiz:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #
-  #crosswordpuzzle:
-  #  container_name: crosswordpuzzle
-  #  image: ghcr.io/gamify-it/crosswordpuzzle:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #
-  #bugfinder:
-  #  container_name: bugfinder
-  #  image: ghcr.io/gamify-it/bugfinder:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #
-  #memory:
-  #  container_name: memory
-  #  image: ghcr.io/gamify-it/memory:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #
-  #regexgame:
-  #  container_name: regexgame
-  #  image: ghcr.io/gamify-it/regexgame:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #
-  #towercrush:
-  #  container_name: towercrush
-  #  image: ghcr.io/gamify-it/towercrush:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
-  #
-  #towerdefense:
-  #  container_name: towerdefense
-  #  image: ghcr.io/gamify-it/towerdefense:main
-  #  pull_policy: always
-  #  restart: always
-  #  expose:
-  #    - "80"
+  chickenshock:
+    container_name: chickenshock
+    image: ghcr.io/gamify-it/chickenshock:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
+
+  finitequiz:
+    container_name: finitequiz
+    image: ghcr.io/gamify-it/finitequiz:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
+
+  crosswordpuzzle:
+    container_name: crosswordpuzzle
+    image: ghcr.io/gamify-it/crosswordpuzzle:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
+
+  bugfinder:
+    container_name: bugfinder
+    image: ghcr.io/gamify-it/bugfinder:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
 
-  #umlgame:
-   # container_name: umlgame
-    #image: ghcr.io/gamify-it/umlgame:main
-   # restart: always
-    #pull_policy: always
-    #expose:
-     # - "80"
+  memory:
+    container_name: memory
+    image: ghcr.io/gamify-it/memory:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
+
+  regexgame:
+    container_name: regexgame
+    image: ghcr.io/gamify-it/regexgame:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
+
+  towercrush:
+    container_name: towercrush
+    image: ghcr.io/gamify-it/towercrush:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
+
+  towerdefense:
+    container_name: towerdefense
+    image: ghcr.io/gamify-it/towerdefense:main
+    pull_policy: always
+    restart: always
+    expose:
+      - "80"
+
+  umlgame:
+    container_name: umlgame
+    image: ghcr.io/gamify-it/umlgame:main
+    restart: always
+    pull_policy: always
+    expose:
+      - "80"
 
   # reverse-proxy
   reverse-proxy:
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index ce50dce..21941fe 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -18,6 +18,7 @@ import {
   putUmlgameConfig,
 } from "@/ts/rest-clients/umlgame-rest-client";
 import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
+import { getTowerDefenseConfig } from "@/ts/rest-clients/towerdefense-rest-client";
 
 const props = defineProps<{
   minigame: ITask;
@@ -47,8 +48,9 @@ const toast = useToast();
 const minigame = ref(props.minigame);
 const form = ref();
 const showModal = ref(props.showModal);
-
 let configuration = ref(new UmlgameConfiguration([]));
+const oldMinigame = ref();
+// v models for different task edit modals
 const showCompletionTaskModal = ref(false);
 const showErrorhuntTaskModal = ref(false);
 const isEditorOpen = ref(false);
@@ -57,8 +59,8 @@ const taskList = ref([]) as Ref<UmlTask[]>;
 initializeTasks();
 
 // TODO: adapt to available modes
-const taskText = ref();
 const selected = null;
+const openedIndex = ref();
 const editorData = ref() as Ref<GraphData>;
 const editObject = ref();
 
@@ -106,97 +108,54 @@ const emit = defineEmits<{
   (e: "closedModal"): void;
 }>();
 
-// FERTIG
+
 function checkFormValidity(): boolean {
   return form.value.checkValidity();
 }
 
-// FERTIG
-function loadConfig() {
-  console.log("loadConfig()");
+function resetModal() {
   if (minigame.value.configurationId != undefined) {
     getUmlgameConfig(minigame.value.configurationId)
       .then((response) => {
-        taskList.value = response.data.taskList;
         configuration.value = response.data;
       })
       .catch((error) => {
         console.log(error);
         if (error.response.status == 404) {
-          resetConfig();
+          minigame.value.configurationId = undefined;
+          configuration.value.taskList = [];
+          initializeTasks();
         }
       });
+    oldMinigame.value = minigame.value;
   } else {
-    resetConfig();
+    configuration.value.id = undefined;
+    configuration.value.taskList = [];
+    oldMinigame.value = minigame.value;
+    initializeTasks();
   }
   console.log("Reset Modal");
 }
 
-// FERTIG
-function resetConfig() {
-  console.log("resetConfig()");
-  configuration.value.id = ""; // undefined
-  configuration.value.taskList = [];
-  initializeTasks();
-}
-
-function initializeTasks() {
-  console.log("initializeTasks()");
-  taskList.value = [];
-  for (let index = 0; index < numberOfQuestions; index++) {
-    taskList.value.push(
-      new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION)
-    );
-  }
-}
-
-const openedIndex = ref();
-function onEditClick(type: TaskType, edit: any) {
-  console.log("onEditClick");
-  editObject.value = edit;
-  editorData.value = new GraphData(
-    editObject.value.graphAsJson,
-    editObject.value.graphDescription
-  );
-  openedIndex.value = edit.id;
-  switch (type) {
-    case TaskType.COMPLETION: {
-      showCompletionTaskModal.value = true;
-      break;
-    }
-    case TaskType.ERRORHUNT: {
-      showErrorhuntTaskModal.value = true;
-      break;
-    }
-  }
-}
-
-// FERTIG
 function handleOk() {
   console.log("@ok");
-  const updateConfigurationRequest = configuration.value.id
-    ? putUmlgameConfig(
-        configuration.value.id,
-        new UmlgameConfiguration(taskList.value)
-      )
-    : postUmlgameConfig(new UmlgameConfiguration(taskList.value));
-  updateConfigurationRequest
-    .then((response) => {
+  const updateConfigurationRequest = configuration.value.id ?
+    putUmlgameConfig(configuration.value.id, new UmlgameConfiguration(taskList.value)) :
+    postUmlgameConfig(new UmlgameConfiguration(taskList.value));
+  updateConfigurationRequest.then((response) => {
       minigame.value.configurationId = response.data.id;
       console.log("Submit Modal");
       console.log("id:" + response.data.id);
       console.log("minigameId" + minigame.value.configurationId);
+      oldMinigame.value = minigame.value;
       handleSubmit();
-    })
-    .then(() => {
+    }).then(() => {
       putMinigame(
         parseInt(courseId.value),
         parseInt(worldIndex.value),
         parseInt(dungeonIndex.value),
         minigame.value
-      );
-    })
-    .catch((error) => {
+      );}).catch((error) => {
       const statusCode = error.response.status;
       const errorMessages = error.response.data.errors;
       if (statusCode == 400) {
@@ -206,11 +165,11 @@ function handleOk() {
       } else {
         toast.error("There was an error saving the configuration!");
       }
-    })
-    .finally(() => resetConfig());
+    }).finally(() => {
+    initializeTasks();
+    });
 }
 
-// FERTIG
 function handleSubmit() {
   // Exit when the form isn't valid
   console.log("handleSubmit");
@@ -220,22 +179,52 @@ function handleSubmit() {
   emit("updateMinigameConfiguration", minigame.value);
 }
 
-// FERTIG
 function hiddenModal() {
+  if (!isEditorOpen.value) {
+    oldMinigame.value = null;
+    console.log("Test");
+  }
   console.log("Modal hidden");
   emit("closedModal");
 }
 
-// FERTIG
 function loadModal() {
-  if (!isEditorOpen.value) {
-    loadConfig();
+  if (oldMinigame.value != null) {
+    if (oldMinigame.value.id != minigame.value.id) {
+      resetModal();
+    }
+  } else {
+    resetModal();
+  }
+}
+
+function initializeTasks() {
+  console.log("initializeTasks()");
+  taskList.value = [];
+  for (let index = 0; index < numberOfQuestions; index++) {
+    taskList.value.push(
+      new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION)
+    );
+  }
+}
+
+
+function onEditClick(type: TaskType, edit: any) {
+  console.log("onEditClick");
+  editObject.value = edit;
+  openedIndex.value = edit.id;
+  switch (type) {
+    case TaskType.COMPLETION: {
+      showCompletionTaskModal.value = true;
+      break;
+    }
+    case TaskType.ERRORHUNT: {
+      showErrorhuntTaskModal.value = true;
+      break;
+    }
   }
-  isEditorOpen.value = false;
-  console.log("Modal shown");
 }
 
-// TODO analog zu handlePairOk from memory
 function handleCompletionTaskOk(data: GraphData) {
   configuration.value.taskList.push(
     new UmlTask(
@@ -250,18 +239,15 @@ function handleCompletionTaskOk(data: GraphData) {
   showModal.value = true;
 }
 
-// FERTIG
 function handleEditorModalAbort() {
   showModal.value = true;
 }
 
-// FERTIG
 function resetEditorModal() {
   console.log("Resetting editor modal (@hidden)");
   editObject.value = null;
 }
 
-// FERTIG
 function setupEditorModal() {
   console.log("setting up editor");
   showModal.value = false;
@@ -272,51 +258,6 @@ function setupEditorModal() {
   );
 }
 
-// DNF
-function downloadConfiguration() {
-  /*const { ["id"]: unused, ...clonedConfiguration } = configuration.value;
-  const clonedQuestions = Array<ITowerDefenseQuestion>();
-  for (let innerQuestion of configuration.value.questions) {
-    const { ["id"]: unused, ...clonedQuestion } = innerQuestion;
-    clonedQuestions.push(clonedQuestion);
-  }
-  clonedConfiguration.questions = clonedQuestions;
-  const blob = new Blob([JSON.stringify(clonedConfiguration)], {
-    type: "text/json",
-  });
-  saveAs(blob, "towerdefense-configuration.json");*/
-}
-
-// DNF
-async function importFile(event: any) {
-  /*const file = event.target.files[0];
-  const validator = object({
-    questions: arrayOf(
-      object({
-        text: string(),
-        correctAnswer: string(),
-        wrongAnswers: arrayOf(string()),
-      })
-    ),
-    volumeLevel: optional(nullable(int())),
-  });
-  try {
-    const result: TowerDefenseConfiguration = await importConfiguration(
-      file,
-      validator,
-      toast
-    );
-    configuration.value = result;
-  } catch (e) {
-    console.log("Import was not successful");
-  }*/
-}
-
-function testSend() {
-  postUmlgameConfig(
-    new UmlgameConfiguration([new UmlTask("1", "", "test", "COMPLETION")])
-  );
-}
 </script>
 <template>
   <b-modal
@@ -325,15 +266,15 @@ function testSend() {
     v-model="showModal"
     @hidden="hiddenModal"
     @ok="handleOk"
+    @cancel="resetModal"
     @show="loadModal"
-    @cancel="resetConfig"
+    @abort="resetModal"
   >
     <form
       ref="form"
       @submit.stop.prevent="handleSubmit"
       v-if="minigame !== undefined"
     >
-      <b-button @click="testSend"> TEST </b-button>
       <b-form-group>
         <b-table :fields="fields" :items="taskList">
           <template #cell(task)="data"> Task {{ data.item.id }}: </template>
@@ -359,20 +300,16 @@ function testSend() {
         </b-table>
       </b-form-group>
     </form>
-    <ImportExportConfiguration
-      @export="downloadConfiguration"
-      @importFile="importFile"
-    />
   </b-modal>
 
   <UmlEditorModal
     :showModal="showCompletionTaskModal"
     modalTitle="Configure the completion task"
+    @hidden="resetEditorModal"
+    @show="setupEditorModal"
     @okModal="handleCompletionTaskOk"
     @cancelModal="handleEditorModalAbort"
     :graphData="editorData"
-    @hidden="resetEditorModal"
-    @show="setupEditorModal"
   />
 </template>
 <style scoped>
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 9f264e6..7991b8a 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -1,5 +1,5 @@
-// TODO: implement, currently placeholders
 export interface IUmlgameConfiguration {
+  id?: string;
   taskList: UmlTask[];
 }
 
@@ -12,18 +12,19 @@ export class UmlgameConfiguration implements IUmlgameConfiguration {
 }
 
 export class UmlTask {
-  id: string;
+  id?: string;
+  taskNumber: string;
   graph: string;
   text: string;
   taskType: TaskType;
 
   public constructor(
-    id: string,
+    taskNumber: string,
     graph: string,
     text: string,
     taskType: TaskType
   ) {
-    this.id = id;
+    this.taskNumber = taskNumber;
     this.graph = graph;
     this.text = text;
     this.taskType = taskType;
diff --git a/src/ts/rest-clients/umlgame-rest-client.ts b/src/ts/rest-clients/umlgame-rest-client.ts
index 563412e..3174cec 100644
--- a/src/ts/rest-clients/umlgame-rest-client.ts
+++ b/src/ts/rest-clients/umlgame-rest-client.ts
@@ -1,7 +1,5 @@
 import axios, { AxiosResponse } from "axios";
-
 import config from "@/config";
-
 import { IUmlgameConfiguration } from "@/ts/models/umlgame-models";
 
 export async function putUmlgameConfig(

From 8cd04296803f0271cd0b807d386a5eff9ddadd26 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Sat, 3 May 2025 17:05:32 +0200
Subject: [PATCH 18/26] Update docker-compose-dev.yaml

---
 docker-compose-dev.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index f83bd33..de88403 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -149,6 +149,7 @@ services:
 
   overworld-backend:
     container_name: overworld-backend
+    image: ghcr.io/gamify-it/overworld-backend:main
     restart: always
     pull_policy: always
     expose:
@@ -307,8 +308,7 @@ services:
   
   umlgame-backend:
     container_name: umlgame-backend
-    #image: ghcr.io/gamify-it/umlgame-backend:main
-    build: ../umlgame-backend
+    image: ghcr.io/gamify-it/umlgame-backend:main
     restart: always
     expose:
       - "80"

From 0b15b6870e6f7291f235a33a28dbb75360de6ba2 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Sun, 4 May 2025 20:54:12 +0200
Subject: [PATCH 19/26] added new changes to the editor

---
 .../UmlModals/UmlEditorModal.vue              | 353 ++++++++++++++----
 1 file changed, 275 insertions(+), 78 deletions(-)

diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 5cd95fa..466d322 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -13,45 +13,19 @@
         <div ref="paletteContainer" class="palette">
           <div class="palette-group">
             <div class="palette-title">Objects</div>
-            <div
-              class="palette-item"
-              data-type="class"
-              draggable="true"
-              :style="{ backgroundColor: classColors.class }"
-            >
+            <div class="palette-item" data-type="class" draggable="true" :style="{ backgroundColor: classColors.class }">
               Class
             </div>
-            <div
-              class="palette-item"
-              data-type="interface"
-              draggable="true"
-              :style="{ backgroundColor: classColors.interface }"
-            >
+            <div class="palette-item" data-type="interface" draggable="true" :style="{ backgroundColor: classColors.interface }">
               Interface
             </div>
-            <div
-              class="palette-item"
-              data-type="abstract"
-              draggable="true"
-              :style="{ backgroundColor: classColors.abstract }"
-            >
+            <div class="palette-item" data-type="abstract" draggable="true" :style="{ backgroundColor: classColors.abstract }">
               Abstract
             </div>
-            <div
-              class="palette-item"
-              data-type="enum"
-              draggable="true"
-              :style="{ backgroundColor: classColors.enum }"
-            >
+            <div class="palette-item" data-type="enum" draggable="true" :style="{ backgroundColor: classColors.enum }">
               Enum
             </div>
-
-            <div
-              class="palette-item"
-              data-type="circle"
-              draggable="true"
-              :style="{ backgroundColor: classColors.circle }"
-            >
+            <div class="palette-item" data-type="circle" draggable="true" :style="{ backgroundColor: classColors.circle }">
               Circle
             </div>
           </div>
@@ -70,16 +44,18 @@
             <div class="palette-item" data-type="composition" draggable="true">
               ◆
             </div>
-            <div
-              class="palette-item"
-              data-type="generalization"
-              draggable="true"
-            >
+            <div class="palette-item" data-type="generalization" draggable="true">
               △
             </div>
+            <div class="submit-reset-buttons">
+              <button class="reset-button" @click="resetGraph">Reset</button>
+            </div>
           </div>
         </div>
-        <div ref="paperContainer" class="paper-container"></div>
+        <div ref="paperContainer" class="paper-container">
+          <div ref="paperContainer" class="paper-inner"/>
+        </div>
+      </div>
         <div class="right" v-if="selectedElement">
           <b-button size="sm" variant="warning" @click="deleteAllRelations">
             Delete All Relations
@@ -105,9 +81,28 @@
           <b-button size="sm" variant="danger" @click="deleteRelation">
             Delete Relation
           </b-button>
+          <label>
+            Source Multiplicity:
+            <b-form-input v-model="linkSourceMultiplicity" @input="updateLinkLabels" />
+          </label>
+          <label>
+            Source Role:
+            <b-form-input v-model="linkSourceRole" @input="updateLinkLabels" />
+          </label>
+          <label>
+            Target Multiplicity:
+            <b-form-input v-model="linkTargetMultiplicity" @input="updateLinkLabels" />
+          </label>
+          <label>
+            Target Role:
+            <b-form-input v-model="linkTargetRole" @input="updateLinkLabels" />
+          </label>
+          <label>
+            Description:
+            <b-form-input v-model="linkArrowLabel" @input="updateLinkLabels" />
+          </label>
         </div>
       </div>
-    </div>
 
     <!-- uml end -->
     <b-form-group>
@@ -121,7 +116,7 @@
 </template>
 <script setup lang="ts">
 import { useToast } from "vue-toastification";
-import { dia, shapes, util } from "@joint/core";
+import { dia, shapes } from "@joint/core";
 import {
   onMounted,
   ref,
@@ -174,6 +169,12 @@ const labelText = ref("");
 const stuff = ref("");
 const stuff2 = ref("");
 const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
+const linkSourceMultiplicity = ref('');
+const linkSourceRole = ref('');
+const linkTargetMultiplicity = ref('');
+const linkTargetRole = ref('');
+const linkArrowLabel = ref('');
+
 let currentLinkType = ref<
   | "dependency"
   | "association"
@@ -236,32 +237,7 @@ function resetModal() {
 }
 
 // uml
-function resetElementStyle(element: dia.Element) {
-  const elementType = element.get("type");
-  let originalFill: string;
-  switch (elementType) {
-    case "InterfaceRect":
-      originalFill = "#cce5ff";
-      break;
-    case "AbstractRect":
-      originalFill = "#ffe6cc";
-      break;
-    case "EnumRect":
-      originalFill = "#d3f3d3";
-      break;
-    default:
-      originalFill = "white";
-      break;
-  }
 
-  element.attr({
-    body: {
-      stroke: "black",
-      strokeWidth: 2,
-      fill: originalFill,
-    },
-  });
-}
 
 function isLinkType(type: string): type is LinkType {
   return [
@@ -276,6 +252,11 @@ function isLinkType(type: string): type is LinkType {
 function handleLinkClick(linkView: dia.LinkView) {
   selectedLink.value = linkView.model;
   selectedElement.value = null;
+  const labels = linkView.model.get('labels') || [];
+  linkSourceMultiplicity.value = labels[0]?.attrs?.text?.text || '';
+  linkSourceRole.value = labels[1]?.attrs?.text?.text || '';
+  linkTargetMultiplicity.value = labels[3]?.attrs?.text?.text || '';
+  linkTargetRole.value = labels[4]?.attrs?.text?.text || '';
 }
 
 function deleteRelation() {
@@ -287,20 +268,11 @@ function deleteRelation() {
 
 function handleElementClick(elementView: dia.ElementView) {
   const clickedElement = elementView.model;
-
-  if (selectedElement.value && selectedElement.value.id !== clickedElement.id) {
-    resetElementStyle(selectedElement.value as dia.Element);
-  }
-
   selectedElement.value = clickedElement;
-
   labelText.value = clickedElement.attr("label/text");
   stuff.value = clickedElement.attr("secondaryLabel/text");
   stuff2.value = clickedElement.attr("thirdLabel/text");
   selectedLink.value = null;
-
-  clickedElement.attr("body/stroke", "#f1c40f");
-  clickedElement.attr("body/fill", "rgba(241, 196, 15, 0.3)");
 }
 
 function updateLabel() {
@@ -358,6 +330,25 @@ function updateMethods() {
   }
 }
 
+function updateLinkLabels() {
+  if (!selectedLink.value) return;
+  selectedLink.value.label(0, {
+    attrs: { text: { text: linkSourceMultiplicity.value } }
+  });
+  selectedLink.value.label(1, {
+    attrs: { text: { text: linkSourceRole.value } }
+  });
+  selectedLink.value.label(2, {
+    attrs: { text: { text: linkTargetMultiplicity.value } }
+  });
+  selectedLink.value.label(3, {
+    attrs: { text: { text: linkTargetRole.value } }
+  });
+  selectedLink.value.label(4, {
+    attrs: { text: { text: linkArrowLabel.value } }
+  });
+}
+
 function deleteAllRelations() {
   if (!selectedElement.value) return;
   const links = graph.getConnectedLinks(
@@ -380,8 +371,8 @@ onMounted(() => {
       paper = new dia.Paper({
         el: paperContainer.value,
         model: graph,
-        width: 700,
-        height: 600,
+        width: 2000,
+        height: 700,
         background: { color: "#F5F5F5" },
         cellViewNamespace: namespace,
       });
@@ -461,7 +452,78 @@ onMounted(() => {
           );
 
           if (targetElementView) {
-            link.target(targetElementView.model);
+            const targetElement = targetElementView.model;
+            if (linkSourceElement && linkSourceElement.id === targetElement.id) {
+              const loopLink = new shapes.standard.Link({
+                source: { id: targetElement.id },
+                target: { id: targetElement.id },
+                router: { name: 'manhattan' },
+                connector: { name: 'rounded' },
+                attrs: {
+                  line: {
+                    stroke: 'black',
+                    strokeWidth: 2,
+                    fill: 'none',
+                  },
+                },
+                labels: [
+                  {
+                    position: 0.05,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: 'black',
+                      },
+                    },
+                  },
+                  {
+                    position: 0.2,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: 'black',
+                      },
+                    },
+                  },
+                  {
+                    position: 0.8,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: 'black',
+                        dx: 20,
+                      },
+                    },
+                  },
+                  {
+                    position: 0.7,
+                    attrs: {
+                      text: {
+                        fontSize: 14,
+                        fill: 'black',
+                        dx: 20,
+                      },
+                    },
+                  },
+                ],
+              });
+              loopLink.attr({
+                line: {
+                  stroke: 'black',
+                  strokeWidth: 2,
+                  targetMarker: {
+                    type: 'path',
+                    d: 'M 10 -5 0 0 10 5 z',
+                    fill: 'white',
+                    stroke: 'black'
+                  }
+                }
+              });
+              graph.addCell(loopLink);
+              link.remove();
+            } else {
+              link.target(targetElement);
+            }
             targetElementView.model.attr("body/stroke", "blue");
             setTimeout(() => {
               targetElementView.model.attr("body/stroke", "black");
@@ -580,6 +642,77 @@ onMounted(() => {
             }
 
             graph.addCell(link);
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: 'black',
+                  fontSize: 12
+                }
+              },
+              position: {
+                distance: 0.2,
+                offset: { x: 0, y: -15 },
+                args: { keepDirection: true, keepAngle: true }
+              }
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: 'black',
+                  fontSize: 12
+                }
+              },
+              position: {
+                distance: 0.2,
+                offset: { x: 0, y: 10 },
+                args: { keepDirection: true, keepAngle: true }
+              }
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: 'black',
+                  fontSize: 12
+                }
+              },
+              position: {
+                distance: 0.8,
+                offset: { x: 0, y: -15 },
+                args: { keepDirection: true, keepAngle: true }
+              }
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: 'black',
+                  fontSize: 12
+                }
+              },
+              position: {
+                distance: 0.8,
+                offset: { x: 0, y: 10 },
+                args: { keepDirection: true, keepAngle: true }
+              }
+            });
+
+            link.appendLabel({
+              attrs: {
+                text: {
+                  fill: 'black',
+                  fontSize: 14,
+                },
+              },
+              position: {
+                distance: 0.5,
+                offset: { x: 0, y: 10 },
+                args: { keepDirection: true, keepAngle: true }
+              }
+            });
+
             console.log(
               `Relation '${rawType}' gestartet mit`,
               linkSourceElement
@@ -630,6 +763,8 @@ onMounted(() => {
 
 .uml-wrapper {
   position: relative;
+  display: flex;
+  gap: 20px;
 }
 
 .palette {
@@ -662,10 +797,16 @@ onMounted(() => {
 }
 
 .paper-container {
-  width: 400px;
-  height: 400px;
+  flex: 1;
+  width: 800px;
+  height: 730px;
   border: 2px solid rgb(226, 220, 201);
   background: #f5f5f5;
+  overflow: auto;
+}
+
+.paper-inner {
+  width: 10000px;
 }
 
 .delete-button {
@@ -677,12 +818,14 @@ onMounted(() => {
   cursor: pointer;
   font-size: 10px;
   margin-bottom: 10px;
+  width: 300px;
 }
 
 .right {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  font-size: 11px;
 }
 
 .label {
@@ -706,4 +849,58 @@ onMounted(() => {
   stroke-width: 2;
   fill: rgba(255, 102, 0, 0.1);
 }
+
+.relation-links {
+  display: flex;
+  flex-direction: column;
+  padding-right: 20px;
+}
+
+.relation-links a {
+  text-decoration: none;
+  color: #333;
+  padding: 10px 0;
+  position: relative;
+}
+
+.relation-links a:last-child {
+  border-bottom: 2px solid #ccc;
+}
+
+.submit-reset-buttons {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+.submit-button {
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  font-size: 16px;
+  color: white;
+  cursor: pointer;
+  width: 100%;
+  background-color: #007bff;
+  margin-bottom: 10px;
+}
+
+.submit-button:hover {
+  background-color: #0056b3;
+}
+
+.reset-button {
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  font-size: 16px;
+  color: white;
+  cursor: pointer;
+  width: 100%;
+  background-color: #f0ad4e;
+}
+
+.reset-button:hover {
+  background-color: #ec971f;
+}
 </style>

From 921bfdecfbe7c6ef101f65213571a4554bd4cc66 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 8 May 2025 16:02:50 +0200
Subject: [PATCH 20/26] Update UmlEditorModal.vue

---
 .../EditMinigameModals/UmlModals/UmlEditorModal.vue       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 466d322..b1e0816 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -371,8 +371,8 @@ onMounted(() => {
       paper = new dia.Paper({
         el: paperContainer.value,
         model: graph,
-        width: 2000,
-        height: 700,
+        width: 700,
+        height: 600,
         background: { color: "#F5F5F5" },
         cellViewNamespace: namespace,
       });
@@ -798,8 +798,8 @@ onMounted(() => {
 
 .paper-container {
   flex: 1;
-  width: 800px;
-  height: 730px;
+  width: 400px;
+  height: 400px;
   border: 2px solid rgb(226, 220, 201);
   background: #f5f5f5;
   overflow: auto;

From 72118765bbd72680d325155ff030b1b7ada9bb83 Mon Sep 17 00:00:00 2001
From: Fabian <61206845+Fa8Bit@users.noreply.github.com>
Date: Sun, 25 May 2025 19:01:05 +0200
Subject: [PATCH 21/26] Test (#68)

merge test into feature branch
---
 .nginx/compose/nginx-dev.conf                 | 108 ++---
 docker-compose-dev.yaml                       | 400 +++++++++---------
 .../EditUmlGameConfigurationModal.vue         | 106 ++---
 .../UmlModals/UmlEditorModal.vue              | 269 +++++++-----
 src/ts/models/umlgame-models.ts               |   7 +-
 5 files changed, 467 insertions(+), 423 deletions(-)

diff --git a/.nginx/compose/nginx-dev.conf b/.nginx/compose/nginx-dev.conf
index 46fceda..ca51e31 100644
--- a/.nginx/compose/nginx-dev.conf
+++ b/.nginx/compose/nginx-dev.conf
@@ -16,41 +16,41 @@ server {
         proxy_pass      http://keycloak/keycloak/;
     }
 
-    location /minigames/bugfinder/api/ {
-        proxy_pass      http://bugfinder-backend/api/;
-    }
+    #location /minigames/bugfinder/api/ {
+    #    proxy_pass      http://bugfinder-backend/api/;
+    #}
 
-    location /minigames/chickenshock/api/ {
-        proxy_pass      http://chickenshock-backend/api/;
-    }
+    #location /minigames/chickenshock/api/ {
+    #    proxy_pass      http://chickenshock-backend/api/;
+    #}
 
-    location /minigames/finitequiz/api/ {
-        proxy_pass      http://finitequiz-backend/api/;
-    }
+    #location /minigames/finitequiz/api/ {
+    #    proxy_pass      http://finitequiz-backend/api/;
+    #}
 
-    location /minigames/crosswordpuzzle/api/ {
-        proxy_pass      http://crosswordpuzzle-backend/api/;
-    }
+    #location /minigames/crosswordpuzzle/api/ {
+    #    proxy_pass      http://crosswordpuzzle-backend/api/;
+    #}
 
-    location /minigames/memory/api/ {
-        proxy_pass      http://memory-backend/api/;
-    }
+    #location /minigames/memory/api/ {
+    #    proxy_pass      http://memory-backend/api/;
+    #}
 
-    location /minigames/regexgame/api/ {
-        proxy_pass      http://regexgame-backend/api/;
-    }
+    #location /minigames/regexgame/api/ {
+    #    proxy_pass      http://regexgame-backend/api/;
+    #}
 
-    location /minigames/towercrush/api/ {
-        proxy_pass      http://towercrush-backend/api/;
-    }
+    #location /minigames/towercrush/api/ {
+    #    proxy_pass      http://towercrush-backend/api/;
+    #}
 
     location /minigames/umlgame/api/ {
         proxy_pass      http://umlgame-backend/api;
     }
 
-    location /minigames/towerdefense/api/ {
-        proxy_pass      http://towerdefense-backend/api/;
-    }
+    #location /minigames/towerdefense/api/ {
+    #    proxy_pass      http://towerdefense-backend/api/;
+    #}
 
     location /overworld/api/ {
         proxy_pass      http://overworld-backend/api/;
@@ -60,41 +60,41 @@ server {
         proxy_pass      http://overworld/;
     }
 
-    location /minigames/chickenshock/ {
-        proxy_pass      http://chickenshock/;
-    }
-
-    location /minigames/bugfinder/ {
-        proxy_pass      http://bugfinder/;
-    }
-
-    location /minigames/finitequiz/ {
-        proxy_pass      http://finitequiz/;
-    }
-
-    location /minigames/crosswordpuzzle/ {
-        proxy_pass      http://crosswordpuzzle/;
-    }
-
-    location /minigames/memory/ {
-        proxy_pass      http://memory/;
-    }
-
-    location /minigames/regexgame/ {
-        proxy_pass      http://regexgame/;
-    }
-
-    location /minigames/towercrush/ {
-        proxy_pass      http://towercrush/;
-    }
+    #location /minigames/chickenshock/ {
+    #    proxy_pass      http://chickenshock/;
+    #}
+    #
+    #location /minigames/bugfinder/ {
+    #    proxy_pass      http://bugfinder/;
+    #}
+    #
+    #location /minigames/finitequiz/ {
+    #    proxy_pass      http://finitequiz/;
+    #}
+    #
+    #location /minigames/crosswordpuzzle/ {
+    #    proxy_pass      http://crosswordpuzzle/;
+    #}
+    #
+    #location /minigames/memory/ {
+    #    proxy_pass      http://memory/;
+    #}
+    #
+    #location /minigames/regexgame/ {
+    #    proxy_pass      http://regexgame/;
+    #}
+    #
+    #location /minigames/towercrush/ {
+    #    proxy_pass      http://towercrush/;
+    #}
 
     location /minigames/umlgame/ {
         proxy_pass      http://umlgame/;
     }
 
-    location /minigames/towerdefense/ {
-        proxy_pass      http://towerdefense/;
-    }
+    #location /minigames/towerdefense/ {
+    #    proxy_pass      http://towerdefense/;
+    #}
 
     location /lecturer-interface/ {
         proxy_pass      http://host.docker.internal:8000/lecturer-interface/;
diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index de88403..361fe03 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -149,7 +149,7 @@ services:
 
   overworld-backend:
     container_name: overworld-backend
-    image: ghcr.io/gamify-it/overworld-backend:main
+    image: ghcr.io/gamify-it/overworld-backend:umlgame-integration
     restart: always
     pull_policy: always
     expose:
@@ -170,145 +170,145 @@ services:
       - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
       - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
 
-  chickenshock-backend:
-    container_name: chickenshock-backend
-    image: ghcr.io/gamify-it/chickenshock-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - chickenshock-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  bugfinder-backend:
-    container_name: bugfinder-backend
-    image: ghcr.io/gamify-it/bugfinder-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - bugfinder-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  finitequiz-backend:
-    container_name: finitequiz-backend
-    image: ghcr.io/gamify-it/finitequiz-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - chickenshock-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  crosswordpuzzle-backend:
-    container_name: crosswordpuzzle-backend
-    image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - crosswordpuzzle-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  memory-backend:
-    container_name: memory-backend
-    image: ghcr.io/gamify-it/memory-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - memory-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://memory-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  regexgame-backend:
-    container_name: regexgame-backend
-    image: ghcr.io/gamify-it/regexgame-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - regexgame-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  towercrush-backend:
-    container_name: towercrush-backend
-    image: ghcr.io/gamify-it/towercrush-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - towercrush-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
-  
-  towerdefense-backend:
-    container_name: towerdefense-backend
-    image: ghcr.io/gamify-it/towerdefense-backend:main
-    restart: always
-    pull_policy: always
-    expose:
-      - "80"
-    depends_on:
-      - towerdefense-db
-    environment:
-      - POSTGRES_USER=postgres
-      - POSTGRES_PASSWORD=postgres
-      - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
-      - OVERWORLD_URL=http://overworld-backend/api/v1
-      - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
-      - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #chickenshock-backend:
+  #  container_name: chickenshock-backend
+  #  image: ghcr.io/gamify-it/chickenshock-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - chickenshock-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://chickenshock-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #bugfinder-backend:
+  #  container_name: bugfinder-backend
+  #  image: ghcr.io/gamify-it/bugfinder-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - bugfinder-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://bugfinder-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #finitequiz-backend:
+  #  container_name: finitequiz-backend
+  #  image: ghcr.io/gamify-it/finitequiz-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - chickenshock-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://finitequiz-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #crosswordpuzzle-backend:
+  #  container_name: crosswordpuzzle-backend
+  #  image: ghcr.io/gamify-it/crosswordpuzzle-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - crosswordpuzzle-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://crosswordpuzzle-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #memory-backend:
+  #  container_name: memory-backend
+  #  image: ghcr.io/gamify-it/memory-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - memory-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://memory-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #regexgame-backend:
+  #  container_name: regexgame-backend
+  #  image: ghcr.io/gamify-it/regexgame-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - regexgame-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://regexgame-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #towercrush-backend:
+  #  container_name: towercrush-backend
+  #  image: ghcr.io/gamify-it/towercrush-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - towercrush-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://towercrush-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
+  #
+  #towerdefense-backend:
+  #  container_name: towerdefense-backend
+  #  image: ghcr.io/gamify-it/towerdefense-backend:main
+  #  restart: always
+  #  pull_policy: always
+  #  expose:
+  #    - "80"
+  #  depends_on:
+  #    - towerdefense-db
+  #  environment:
+  #    - POSTGRES_USER=postgres
+  #    - POSTGRES_PASSWORD=postgres
+  #    - POSTGRES_URL=postgresql://towerdefense-db:5432/postgres
+  #    - OVERWORLD_URL=http://overworld-backend/api/v1
+  #    - KEYCLOAK_ISSUER=http://localhost/keycloak/realms/Gamify-IT
+  #    - KEYCLOAK_URL=http://keycloak/keycloak/realms/Gamify-IT
   
   umlgame-backend:
     container_name: umlgame-backend
-    image: ghcr.io/gamify-it/umlgame-backend:main
+    image: ghcr.io/gamify-it/umlgame-backend:development
     restart: always
     expose:
       - "80"
@@ -339,69 +339,69 @@ services:
     expose:
       - "80"
 
-  chickenshock:
-    container_name: chickenshock
-    image: ghcr.io/gamify-it/chickenshock:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  finitequiz:
-    container_name: finitequiz
-    image: ghcr.io/gamify-it/finitequiz:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  crosswordpuzzle:
-    container_name: crosswordpuzzle
-    image: ghcr.io/gamify-it/crosswordpuzzle:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  bugfinder:
-    container_name: bugfinder
-    image: ghcr.io/gamify-it/bugfinder:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  memory:
-    container_name: memory
-    image: ghcr.io/gamify-it/memory:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  regexgame:
-    container_name: regexgame
-    image: ghcr.io/gamify-it/regexgame:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  towercrush:
-    container_name: towercrush
-    image: ghcr.io/gamify-it/towercrush:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
-
-  towerdefense:
-    container_name: towerdefense
-    image: ghcr.io/gamify-it/towerdefense:main
-    pull_policy: always
-    restart: always
-    expose:
-      - "80"
+  #chickenshock:
+  #  container_name: chickenshock
+  #  image: ghcr.io/gamify-it/chickenshock:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #finitequiz:
+  #  container_name: finitequiz
+  #  image: ghcr.io/gamify-it/finitequiz:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #crosswordpuzzle:
+  #  container_name: crosswordpuzzle
+  #  image: ghcr.io/gamify-it/crosswordpuzzle:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #bugfinder:
+  #  container_name: bugfinder
+  #  image: ghcr.io/gamify-it/bugfinder:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #memory:
+  #  container_name: memory
+  #  image: ghcr.io/gamify-it/memory:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #regexgame:
+  #  container_name: regexgame
+  #  image: ghcr.io/gamify-it/regexgame:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #towercrush:
+  #  container_name: towercrush
+  #  image: ghcr.io/gamify-it/towercrush:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
+  #
+  #towerdefense:
+  #  container_name: towerdefense
+  #  image: ghcr.io/gamify-it/towerdefense:main
+  #  pull_policy: always
+  #  restart: always
+  #  expose:
+  #    - "80"
 
   umlgame:
     container_name: umlgame
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 21941fe..cd0e1cc 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, Ref, watch } from "vue";
+import { defineEmits, defineProps, ref, Ref, watch, nextTick } from "vue";
 import {
   GraphData,
   TaskType,
@@ -9,7 +9,6 @@ import {
 import { useToast } from "vue-toastification";
 import { useRoute } from "vue-router";
 import { ITask } from "@/ts/models/overworld-models";
-import ImportExportConfiguration from "@/components/ImportExportConfiguration.vue";
 import { BFormSelect, BTable } from "bootstrap-vue-3";
 import { putMinigame } from "@/ts/rest-clients/minigame-rest-client";
 import {
@@ -18,7 +17,6 @@ import {
   putUmlgameConfig,
 } from "@/ts/rest-clients/umlgame-rest-client";
 import UmlEditorModal from "@/components/EditMinigameModals/UmlModals/UmlEditorModal.vue";
-import { getTowerDefenseConfig } from "@/ts/rest-clients/towerdefense-rest-client";
 
 const props = defineProps<{
   minigame: ITask;
@@ -48,7 +46,6 @@ const toast = useToast();
 const minigame = ref(props.minigame);
 const form = ref();
 const showModal = ref(props.showModal);
-let configuration = ref(new UmlgameConfiguration([]));
 const oldMinigame = ref();
 // v models for different task edit modals
 const showCompletionTaskModal = ref(false);
@@ -57,11 +54,9 @@ const isEditorOpen = ref(false);
 
 const taskList = ref([]) as Ref<UmlTask[]>;
 initializeTasks();
-
-// TODO: adapt to available modes
-const selected = null;
+const configuration = ref(new UmlgameConfiguration(taskList.value));
 const openedIndex = ref();
-const editorData = ref() as Ref<GraphData>;
+const editorData = ref(new GraphData("", "")) as Ref<GraphData>;
 const editObject = ref();
 
 // Here are the parameters you need to adapt when expanding the game
@@ -108,7 +103,6 @@ const emit = defineEmits<{
   (e: "closedModal"): void;
 }>();
 
-
 function checkFormValidity(): boolean {
   return form.value.checkValidity();
 }
@@ -123,10 +117,12 @@ function resetModal() {
         console.log(error);
         if (error.response.status == 404) {
           minigame.value.configurationId = undefined;
+          configuration.value.id = undefined;
           configuration.value.taskList = [];
           initializeTasks();
         }
       });
+    console.log("GETTING UML CONFIG:" + minigame.value.configurationId);
     oldMinigame.value = minigame.value;
   } else {
     configuration.value.id = undefined;
@@ -139,23 +135,30 @@ function resetModal() {
 
 function handleOk() {
   console.log("@ok");
-  const updateConfigurationRequest = configuration.value.id ?
-    putUmlgameConfig(configuration.value.id, new UmlgameConfiguration(taskList.value)) :
-    postUmlgameConfig(new UmlgameConfiguration(taskList.value));
-  updateConfigurationRequest.then((response) => {
+  const updateConfigurationRequest = configuration.value.id
+    ? putUmlgameConfig(
+        configuration.value.id,
+        new UmlgameConfiguration(taskList.value)
+      )
+    : postUmlgameConfig(new UmlgameConfiguration(taskList.value));
+  updateConfigurationRequest
+    .then((response) => {
       minigame.value.configurationId = response.data.id;
       console.log("Submit Modal");
       console.log("id:" + response.data.id);
       console.log("minigameId" + minigame.value.configurationId);
       oldMinigame.value = minigame.value;
       handleSubmit();
-    }).then(() => {
+    })
+    .then(() => {
       putMinigame(
         parseInt(courseId.value),
         parseInt(worldIndex.value),
         parseInt(dungeonIndex.value),
         minigame.value
-      );}).catch((error) => {
+      );
+    })
+    .catch((error) => {
       const statusCode = error.response.status;
       const errorMessages = error.response.data.errors;
       if (statusCode == 400) {
@@ -165,8 +168,9 @@ function handleOk() {
       } else {
         toast.error("There was an error saving the configuration!");
       }
-    }).finally(() => {
-    initializeTasks();
+    })
+    .finally(() => {
+      initializeTasks();
     });
 }
 
@@ -202,40 +206,47 @@ function initializeTasks() {
   console.log("initializeTasks()");
   taskList.value = [];
   for (let index = 0; index < numberOfQuestions; index++) {
-    taskList.value.push(
-      new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION)
-    );
+    if (index == 0) {
+      taskList.value.push(
+        new UmlTask((index + 1).toString(), "", "blabla", TaskType.COMPLETION)
+      );
+    } else {
+      taskList.value.push(
+        new UmlTask((index + 1).toString(), "", "", TaskType.COMPLETION)
+      );
+    }
   }
+  console.log(taskList);
 }
 
-
-function onEditClick(type: TaskType, edit: any) {
+function onEditClick(task: UmlTask) {
   console.log("onEditClick");
-  editObject.value = edit;
-  openedIndex.value = edit.id;
-  switch (type) {
-    case TaskType.COMPLETION: {
-      showCompletionTaskModal.value = true;
-      break;
-    }
-    case TaskType.ERRORHUNT: {
-      showErrorhuntTaskModal.value = true;
-      break;
+  let type = task.taskType;
+  editObject.value = task;
+  editorData.value.graphAsJson = task.graph;
+  editorData.value.graphDescription = task.text;
+  openedIndex.value = task.id;
+  console.log(editorData.value.graphAsJson);
+  showCompletionTaskModal.value = false;
+  nextTick(() => {
+    switch (type) {
+      case TaskType.COMPLETION: {
+        showCompletionTaskModal.value = true;
+        break;
+      }
+      case TaskType.ERRORHUNT: {
+        showErrorhuntTaskModal.value = true;
+        break;
+      }
     }
-  }
+  });
 }
 
 function handleCompletionTaskOk(data: GraphData) {
-  configuration.value.taskList.push(
-    new UmlTask(
-      openedIndex.value,
-      data.graphAsJson,
-      data.graphDescription,
-      TaskType.COMPLETION
-    )
-  );
+  console.log(data);
+  editObject.value.graph = data.graphAsJson;
+  editObject.value.text = data.graphDescription;
   showCompletionTaskModal.value = false;
-  console.log(configuration.value.taskList);
   showModal.value = true;
 }
 
@@ -252,12 +263,7 @@ function setupEditorModal() {
   console.log("setting up editor");
   showModal.value = false;
   isEditorOpen.value = true;
-  editorData.value = new GraphData(
-    editObject.value.graphAsJson,
-    editObject.value.graphDescription
-  );
 }
-
 </script>
 <template>
   <b-modal
@@ -279,9 +285,9 @@ function setupEditorModal() {
         <b-table :fields="fields" :items="taskList">
           <template #cell(task)="data"> Task {{ data.item.id }}: </template>
 
-          <template #cell(selection)="">
+          <template #cell(selection)="data">
             <b-form-select
-              v-model="selected"
+              v-model="data.item.taskType"
               :options="selectionOptions"
               text="Select an option"
               required
@@ -292,7 +298,7 @@ function setupEditorModal() {
             <b-button
               variant="outline-primary"
               :key="data.index"
-              @click="onEditClick(selected, data.item)"
+              @click="onEditClick(data.item)"
             >
               Edit Task
             </b-button>
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index b1e0816..6b24146 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -13,19 +13,44 @@
         <div ref="paletteContainer" class="palette">
           <div class="palette-group">
             <div class="palette-title">Objects</div>
-            <div class="palette-item" data-type="class" draggable="true" :style="{ backgroundColor: classColors.class }">
+            <div
+              class="palette-item"
+              data-type="class"
+              draggable="true"
+              :style="{ backgroundColor: classColors.class }"
+            >
               Class
             </div>
-            <div class="palette-item" data-type="interface" draggable="true" :style="{ backgroundColor: classColors.interface }">
+            <div
+              class="palette-item"
+              data-type="interface"
+              draggable="true"
+              :style="{ backgroundColor: classColors.interface }"
+            >
               Interface
             </div>
-            <div class="palette-item" data-type="abstract" draggable="true" :style="{ backgroundColor: classColors.abstract }">
+            <div
+              class="palette-item"
+              data-type="abstract"
+              draggable="true"
+              :style="{ backgroundColor: classColors.abstract }"
+            >
               Abstract
             </div>
-            <div class="palette-item" data-type="enum" draggable="true" :style="{ backgroundColor: classColors.enum }">
+            <div
+              class="palette-item"
+              data-type="enum"
+              draggable="true"
+              :style="{ backgroundColor: classColors.enum }"
+            >
               Enum
             </div>
-            <div class="palette-item" data-type="circle" draggable="true" :style="{ backgroundColor: classColors.circle }">
+            <div
+              class="palette-item"
+              data-type="circle"
+              draggable="true"
+              :style="{ backgroundColor: classColors.circle }"
+            >
               Circle
             </div>
           </div>
@@ -44,7 +69,11 @@
             <div class="palette-item" data-type="composition" draggable="true">
               ◆
             </div>
-            <div class="palette-item" data-type="generalization" draggable="true">
+            <div
+              class="palette-item"
+              data-type="generalization"
+              draggable="true"
+            >
               △
             </div>
             <div class="submit-reset-buttons">
@@ -53,57 +82,62 @@
           </div>
         </div>
         <div ref="paperContainer" class="paper-container">
-          <div ref="paperContainer" class="paper-inner"/>
+          <div ref="paperContainer" class="paper-inner" />
         </div>
       </div>
-        <div class="right" v-if="selectedElement">
-          <b-button size="sm" variant="warning" @click="deleteAllRelations">
-            Delete All Relations
-          </b-button>
-
-          <b-button size="sm" variant="danger" @click="deleteSelectedElement">
-            Delete Object
-          </b-button>
-          <b-label class="label">
-            Classname:
-            <b-form-input v-model="labelText" @input="updateLabel" />
-          </b-label>
-          <label class="label">
-            Attributes:
-            <b-form-textarea v-model="stuff" @input="updateAttributes" />
-          </label>
-          <label class="label">
-            Methods:
-            <b-form-textarea v-model="stuff2" @input="updateMethods" />
-          </label>
-        </div>
-        <div class="right" v-if="selectedLink">
-          <b-button size="sm" variant="danger" @click="deleteRelation">
-            Delete Relation
-          </b-button>
-          <label>
-            Source Multiplicity:
-            <b-form-input v-model="linkSourceMultiplicity" @input="updateLinkLabels" />
-          </label>
-          <label>
-            Source Role:
-            <b-form-input v-model="linkSourceRole" @input="updateLinkLabels" />
-          </label>
-          <label>
-            Target Multiplicity:
-            <b-form-input v-model="linkTargetMultiplicity" @input="updateLinkLabels" />
-          </label>
-          <label>
-            Target Role:
-            <b-form-input v-model="linkTargetRole" @input="updateLinkLabels" />
-          </label>
-          <label>
-            Description:
-            <b-form-input v-model="linkArrowLabel" @input="updateLinkLabels" />
-          </label>
-        </div>
+      <div class="right" v-if="selectedElement">
+        <b-button size="sm" variant="warning" @click="deleteAllRelations">
+          Delete All Relations
+        </b-button>
+
+        <b-button size="sm" variant="danger" @click="deleteSelectedElement">
+          Delete Object
+        </b-button>
+        <b-label class="label">
+          Classname:
+          <b-form-input v-model="labelText" @input="updateLabel" />
+        </b-label>
+        <label class="label">
+          Attributes:
+          <b-form-textarea v-model="stuff" @input="updateAttributes" />
+        </label>
+        <label class="label">
+          Methods:
+          <b-form-textarea v-model="stuff2" @input="updateMethods" />
+        </label>
       </div>
-
+      <div class="right" v-if="selectedLink">
+        <b-button size="sm" variant="danger" @click="deleteRelation">
+          Delete Relation
+        </b-button>
+        <label>
+          Source Multiplicity:
+          <b-form-input
+            v-model="linkSourceMultiplicity"
+            @input="updateLinkLabels"
+          />
+        </label>
+        <label>
+          Source Role:
+          <b-form-input v-model="linkSourceRole" @input="updateLinkLabels" />
+        </label>
+        <label>
+          Target Multiplicity:
+          <b-form-input
+            v-model="linkTargetMultiplicity"
+            @input="updateLinkLabels"
+          />
+        </label>
+        <label>
+          Target Role:
+          <b-form-input v-model="linkTargetRole" @input="updateLinkLabels" />
+        </label>
+        <label>
+          Description:
+          <b-form-input v-model="linkArrowLabel" @input="updateLinkLabels" />
+        </label>
+      </div>
+    </div>
     <!-- uml end -->
     <b-form-group>
       <b-form-textarea
@@ -169,11 +203,11 @@ const labelText = ref("");
 const stuff = ref("");
 const stuff2 = ref("");
 const deleteButtonPos = ref<{ x: number; y: number } | null>(null);
-const linkSourceMultiplicity = ref('');
-const linkSourceRole = ref('');
-const linkTargetMultiplicity = ref('');
-const linkTargetRole = ref('');
-const linkArrowLabel = ref('');
+const linkSourceMultiplicity = ref("");
+const linkSourceRole = ref("");
+const linkTargetMultiplicity = ref("");
+const linkTargetRole = ref("");
+const linkArrowLabel = ref("");
 
 let currentLinkType = ref<
   | "dependency"
@@ -223,21 +257,22 @@ function hideModalOk() {
 }
 
 function hideModalCancel() {
-  // TODO
   console.log("Editor cancel");
   emit("cancelModal");
 }
 
 function resetModal() {
-  // TODO
   console.log("Reset editor");
   let data = graphData.value;
   text.value = data.graphDescription;
   json.value = data.graphAsJson;
+  graph.fromJSON(json.value);
 }
 
 // uml
-
+function resetGraph() {
+  graph.clear();
+}
 
 function isLinkType(type: string): type is LinkType {
   return [
@@ -252,11 +287,11 @@ function isLinkType(type: string): type is LinkType {
 function handleLinkClick(linkView: dia.LinkView) {
   selectedLink.value = linkView.model;
   selectedElement.value = null;
-  const labels = linkView.model.get('labels') || [];
-  linkSourceMultiplicity.value = labels[0]?.attrs?.text?.text || '';
-  linkSourceRole.value = labels[1]?.attrs?.text?.text || '';
-  linkTargetMultiplicity.value = labels[3]?.attrs?.text?.text || '';
-  linkTargetRole.value = labels[4]?.attrs?.text?.text || '';
+  const labels = linkView.model.get("labels") || [];
+  linkSourceMultiplicity.value = labels[0]?.attrs?.text?.text || "";
+  linkSourceRole.value = labels[1]?.attrs?.text?.text || "";
+  linkTargetMultiplicity.value = labels[3]?.attrs?.text?.text || "";
+  linkTargetRole.value = labels[4]?.attrs?.text?.text || "";
 }
 
 function deleteRelation() {
@@ -333,19 +368,19 @@ function updateMethods() {
 function updateLinkLabels() {
   if (!selectedLink.value) return;
   selectedLink.value.label(0, {
-    attrs: { text: { text: linkSourceMultiplicity.value } }
+    attrs: { text: { text: linkSourceMultiplicity.value } },
   });
   selectedLink.value.label(1, {
-    attrs: { text: { text: linkSourceRole.value } }
+    attrs: { text: { text: linkSourceRole.value } },
   });
   selectedLink.value.label(2, {
-    attrs: { text: { text: linkTargetMultiplicity.value } }
+    attrs: { text: { text: linkTargetMultiplicity.value } },
   });
   selectedLink.value.label(3, {
-    attrs: { text: { text: linkTargetRole.value } }
+    attrs: { text: { text: linkTargetRole.value } },
   });
   selectedLink.value.label(4, {
-    attrs: { text: { text: linkArrowLabel.value } }
+    attrs: { text: { text: linkArrowLabel.value } },
   });
 }
 
@@ -372,7 +407,7 @@ onMounted(() => {
         el: paperContainer.value,
         model: graph,
         width: 700,
-        height: 600,
+        height: 650,
         background: { color: "#F5F5F5" },
         cellViewNamespace: namespace,
       });
@@ -453,17 +488,20 @@ onMounted(() => {
 
           if (targetElementView) {
             const targetElement = targetElementView.model;
-            if (linkSourceElement && linkSourceElement.id === targetElement.id) {
+            if (
+              linkSourceElement &&
+              linkSourceElement.id === targetElement.id
+            ) {
               const loopLink = new shapes.standard.Link({
                 source: { id: targetElement.id },
                 target: { id: targetElement.id },
-                router: { name: 'manhattan' },
-                connector: { name: 'rounded' },
+                router: { name: "manhattan" },
+                connector: { name: "rounded" },
                 attrs: {
                   line: {
-                    stroke: 'black',
+                    stroke: "black",
                     strokeWidth: 2,
-                    fill: 'none',
+                    fill: "none",
                   },
                 },
                 labels: [
@@ -472,7 +510,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                       },
                     },
                   },
@@ -481,7 +519,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                       },
                     },
                   },
@@ -490,7 +528,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                         dx: 20,
                       },
                     },
@@ -500,7 +538,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                         dx: 20,
                       },
                     },
@@ -509,15 +547,15 @@ onMounted(() => {
               });
               loopLink.attr({
                 line: {
-                  stroke: 'black',
+                  stroke: "black",
                   strokeWidth: 2,
                   targetMarker: {
-                    type: 'path',
-                    d: 'M 10 -5 0 0 10 5 z',
-                    fill: 'white',
-                    stroke: 'black'
-                  }
-                }
+                    type: "path",
+                    d: "M 10 -5 0 0 10 5 z",
+                    fill: "white",
+                    stroke: "black",
+                  },
+                },
               });
               graph.addCell(loopLink);
               link.remove();
@@ -646,71 +684,71 @@ onMounted(() => {
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.2,
                 offset: { x: 0, y: -15 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.2,
                 offset: { x: 0, y: 10 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.8,
                 offset: { x: 0, y: -15 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
-                  fontSize: 12
-                }
+                  fill: "black",
+                  fontSize: 12,
+                },
               },
               position: {
                 distance: 0.8,
                 offset: { x: 0, y: 10 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             link.appendLabel({
               attrs: {
                 text: {
-                  fill: 'black',
+                  fill: "black",
                   fontSize: 14,
                 },
               },
               position: {
                 distance: 0.5,
                 offset: { x: 0, y: 10 },
-                args: { keepDirection: true, keepAngle: true }
-              }
+                args: { keepDirection: true, keepAngle: true },
+              },
             });
 
             console.log(
@@ -772,6 +810,7 @@ onMounted(() => {
   background: rgb(226, 220, 201);
   padding: 10px;
   border-radius: 5px;
+  margin-bottom: 20px;
 }
 
 .palette-item {
@@ -785,7 +824,7 @@ onMounted(() => {
 }
 
 .palette-group {
-  margin-bottom: 20px;
+  margin-bottom: 5px;
 }
 
 .palette-title {
@@ -799,7 +838,7 @@ onMounted(() => {
 .paper-container {
   flex: 1;
   width: 400px;
-  height: 400px;
+  height: 500px;
   border: 2px solid rgb(226, 220, 201);
   background: #f5f5f5;
   overflow: auto;
@@ -825,7 +864,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  font-size: 11px;
+  font-size: 16px;
 }
 
 .label {
diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 7991b8a..f182227 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -12,19 +12,18 @@ export class UmlgameConfiguration implements IUmlgameConfiguration {
 }
 
 export class UmlTask {
-  id?: string;
-  taskNumber: string;
+  id: string;
   graph: string;
   text: string;
   taskType: TaskType;
 
   public constructor(
-    taskNumber: string,
+    id: string,
     graph: string,
     text: string,
     taskType: TaskType
   ) {
-    this.taskNumber = taskNumber;
+    this.id = id;
     this.graph = graph;
     this.text = text;
     this.taskType = taskType;

From eb926f6676861c3bcd3556f84f52d3b65cbc65ec Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Mon, 26 May 2025 20:24:43 +0200
Subject: [PATCH 22/26] json parsing

---
 .../EditMinigameModals/EditUmlGameConfigurationModal.vue  | 5 +----
 .../EditMinigameModals/UmlModals/UmlEditorModal.vue       | 8 ++++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index cd0e1cc..706e3b8 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -62,11 +62,8 @@ const editObject = ref();
 // Here are the parameters you need to adapt when expanding the game
 const selectionOptions = [
   { value: TaskType.COMPLETION, text: "Completion" },
-  { value: TaskType.ERRORHUNT, text: "Error hunt" },
-  { value: TaskType.CODETOUML, text: "Code -> UML" },
-  { value: TaskType.UMLTOCODE, text: "UML -> Code" },
 ];
-const numberOfQuestions = 10;
+const numberOfQuestions = 6;
 
 watch(
   () => props.minigame,
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 6b24146..37f6663 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -158,7 +158,6 @@ import {
   nextTick,
   defineEmits,
   watch,
-  Ref,
 } from "vue";
 import { BFormInput, BFormTextarea } from "bootstrap-vue-3";
 import {
@@ -194,6 +193,10 @@ const classColors = {
   enum: "#d3f3d3",
 };
 const namespace = shapes;
+shapes.EnumRect = EnumRect;
+shapes.AbstractRect = AbstractRect;
+shapes.InterfaceRect = InterfaceRect;
+shapes.Rect = CustRect;
 const graph = new dia.Graph({}, { cellNamespace: namespace });
 const paperContainer = ref<HTMLElement | null>(null);
 const paletteContainer = ref<HTMLElement | null>(null);
@@ -266,9 +269,10 @@ function resetModal() {
   let data = graphData.value;
   text.value = data.graphDescription;
   json.value = data.graphAsJson;
-  graph.fromJSON(json.value);
+  graph.fromJSON(JSON.parse(json.value));
 }
 
+
 // uml
 function resetGraph() {
   graph.clear();

From 799a3f7380586e67ba4d67cf84b7353c72dd7fb8 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Mon, 26 May 2025 20:33:15 +0200
Subject: [PATCH 23/26] prettier

---
 .../EditUmlGameConfigurationModal.vue                  |  4 +---
 .../EditMinigameModals/UmlModals/UmlEditorModal.vue    | 10 +---------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 706e3b8..ed02624 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -60,9 +60,7 @@ const editorData = ref(new GraphData("", "")) as Ref<GraphData>;
 const editObject = ref();
 
 // Here are the parameters you need to adapt when expanding the game
-const selectionOptions = [
-  { value: TaskType.COMPLETION, text: "Completion" },
-];
+const selectionOptions = [{ value: TaskType.COMPLETION, text: "Completion" }];
 const numberOfQuestions = 6;
 
 watch(
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 37f6663..d85b396 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -151,14 +151,7 @@
 <script setup lang="ts">
 import { useToast } from "vue-toastification";
 import { dia, shapes } from "@joint/core";
-import {
-  onMounted,
-  ref,
-  defineProps,
-  nextTick,
-  defineEmits,
-  watch,
-} from "vue";
+import { onMounted, ref, defineProps, nextTick, defineEmits, watch } from "vue";
 import { BFormInput, BFormTextarea } from "bootstrap-vue-3";
 import {
   CustRect,
@@ -272,7 +265,6 @@ function resetModal() {
   graph.fromJSON(JSON.parse(json.value));
 }
 
-
 // uml
 function resetGraph() {
   graph.clear();

From 4dc769267bacaf3d5b8ad5af077fe08120b8dae7 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 12 Jun 2025 17:14:28 +0200
Subject: [PATCH 24/26] dto fix

---
 src/ts/models/umlgame-models.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index f182227..8d93653 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -12,18 +12,19 @@ export class UmlgameConfiguration implements IUmlgameConfiguration {
 }
 
 export class UmlTask {
-  id: string;
+  id?: string;
+  tasknumber: string;
   graph: string;
   text: string;
   taskType: TaskType;
 
   public constructor(
-    id: string,
+    tasknumber: string,
     graph: string,
     text: string,
     taskType: TaskType
   ) {
-    this.id = id;
+    this.tasknumber = tasknumber;
     this.graph = graph;
     this.text = text;
     this.taskType = taskType;

From a1e78d6f97e7b73b83de18f9497fc3efdefe8a5b Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 12 Jun 2025 17:15:06 +0200
Subject: [PATCH 25/26] Update umlgame-models.ts

---
 src/ts/models/umlgame-models.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ts/models/umlgame-models.ts b/src/ts/models/umlgame-models.ts
index 8d93653..7991b8a 100644
--- a/src/ts/models/umlgame-models.ts
+++ b/src/ts/models/umlgame-models.ts
@@ -13,18 +13,18 @@ export class UmlgameConfiguration implements IUmlgameConfiguration {
 
 export class UmlTask {
   id?: string;
-  tasknumber: string;
+  taskNumber: string;
   graph: string;
   text: string;
   taskType: TaskType;
 
   public constructor(
-    tasknumber: string,
+    taskNumber: string,
     graph: string,
     text: string,
     taskType: TaskType
   ) {
-    this.tasknumber = tasknumber;
+    this.taskNumber = taskNumber;
     this.graph = graph;
     this.text = text;
     this.taskType = taskType;

From 24c3b7d93bc6bd9dbe85053fcba70d7728696a4d Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 12 Jun 2025 17:30:37 +0200
Subject: [PATCH 26/26] Update EditUmlGameConfigurationModal.vue

---
 .../EditMinigameModals/EditUmlGameConfigurationModal.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index ed02624..faf3dd1 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -239,7 +239,7 @@ function onEditClick(task: UmlTask) {
 
 function handleCompletionTaskOk(data: GraphData) {
   console.log(data);
-  editObject.value.graph = data.graphAsJson;
+  editObject.value.graph = JSON.stringify(data.graphAsJson);
   editObject.value.text = data.graphDescription;
   showCompletionTaskModal.value = false;
   showModal.value = true;