From c823dfab9c31956cf2fe9c2e108a056b3e86fa08 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 8 May 2025 17:18:07 +0200
Subject: [PATCH 1/8] dev

---
 .nginx/compose/nginx-dev.conf | 108 +++++-----
 docker-compose-dev.yaml       | 396 +++++++++++++++++-----------------
 2 files changed, 252 insertions(+), 252 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..5d0f36b 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -170,141 +170,141 @@ 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
@@ -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

From 379ce4f4c72b9f5d27c13424194f92672c101a9d Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Thu, 8 May 2025 17:20:52 +0200
Subject: [PATCH 2/8] Update UmlEditorModal.vue

---
 .../UmlModals/UmlEditorModal.vue              | 395 +++++++++++++-----
 1 file changed, 296 insertions(+), 99 deletions(-)

diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 5cd95fa..4c75d2a 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,43 +44,64 @@
             <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 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 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
+        </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 -->
@@ -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"
@@ -181,7 +182,7 @@ let currentLinkType = ref<
   | "composition"
   | "generalization"
   | null
->(null);
+  >(null);
 type LinkType =
   | "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(
@@ -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 {
+  flex: 1;
   width: 400px;
   height: 400px;
   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 f99d36ea056e0c474a0cb3b031757cec8ef0a33e Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Tue, 13 May 2025 11:17:19 +0200
Subject: [PATCH 3/8] Update EditUmlGameConfigurationModal.vue

---
 .../EditUmlGameConfigurationModal.vue              | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 21941fe..3dda830 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -18,7 +18,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;
@@ -115,7 +114,7 @@ function checkFormValidity(): boolean {
 
 function resetModal() {
   if (minigame.value.configurationId != undefined) {
-    getUmlgameConfig(minigame.value.configurationId)
+    /*getUmlgameConfig(minigame.value.configurationId)
       .then((response) => {
         configuration.value = response.data;
       })
@@ -126,7 +125,8 @@ function resetModal() {
           configuration.value.taskList = [];
           initializeTasks();
         }
-      });
+      });*/
+    console.log("GETTING UML CONFIG:" + minigame.value.configurationId);
     oldMinigame.value = minigame.value;
   } else {
     configuration.value.id = undefined;
@@ -140,9 +140,9 @@ 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) => {
+    /*putUmlgameConfig(configuration.value.id, new UmlgameConfiguration(taskList.value))*/ console.log("PUTTING UML CONFIG: " + configuration.value.id + " Config: " + new UmlgameConfiguration(taskList.value)):
+    /*postUmlgameConfig(new UmlgameConfiguration(taskList.value))*/console.log("POSTING UML CONFIG: " + new UmlgameConfiguration(taskList.value));
+  /*updateConfigurationRequest.then((response) => {
       minigame.value.configurationId = response.data.id;
       console.log("Submit Modal");
       console.log("id:" + response.data.id);
@@ -167,7 +167,7 @@ function handleOk() {
       }
     }).finally(() => {
     initializeTasks();
-    });
+    });*/
 }
 
 function handleSubmit() {

From 4f9ac0e77b5830285875f49ae50dc7f7ef35483e Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Tue, 13 May 2025 12:24:38 +0200
Subject: [PATCH 4/8] data display in table works

---
 docker-compose-dev.yaml                       |  4 +--
 .../EditUmlGameConfigurationModal.vue         | 31 ++++++++++++-------
 src/ts/models/umlgame-models.ts               |  7 ++---
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index 5d0f36b..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:
@@ -308,7 +308,7 @@ services:
   
   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"
diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 3dda830..8260874 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -58,7 +58,6 @@ const taskList = ref([]) as Ref<UmlTask[]>;
 initializeTasks();
 
 // TODO: adapt to available modes
-const selected = null;
 const openedIndex = ref();
 const editorData = ref() as Ref<GraphData>;
 const editObject = ref();
@@ -202,17 +201,25 @@ 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;
+  let type = task.taskType;
+  editObject.value = task;
+  openedIndex.value = task.id;
   switch (type) {
     case TaskType.COMPLETION: {
       showCompletionTaskModal.value = true;
@@ -277,11 +284,13 @@ function setupEditorModal() {
     >
       <b-form-group>
         <b-table :fields="fields" :items="taskList">
-          <template #cell(task)="data"> Task {{ data.item.id }}: </template>
+          <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 +301,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/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 12abc6711c5f74c65ea5aa74fa2845f1e38f2021 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Sun, 18 May 2025 19:19:21 +0200
Subject: [PATCH 5/8] prettier

---
 .../EditUmlGameConfigurationModal.vue         |  28 +--
 .../UmlModals/UmlEditorModal.vue              | 167 +++++++++++-------
 2 files changed, 117 insertions(+), 78 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 8260874..6a9e35c 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -106,7 +106,6 @@ const emit = defineEmits<{
   (e: "closedModal"): void;
 }>();
 
-
 function checkFormValidity(): boolean {
   return form.value.checkValidity();
 }
@@ -138,9 +137,16 @@ function resetModal() {
 
 function handleOk() {
   console.log("@ok");
-  const updateConfigurationRequest = configuration.value.id ?
-    /*putUmlgameConfig(configuration.value.id, new UmlgameConfiguration(taskList.value))*/ console.log("PUTTING UML CONFIG: " + configuration.value.id + " Config: " + new UmlgameConfiguration(taskList.value)):
-    /*postUmlgameConfig(new UmlgameConfiguration(taskList.value))*/console.log("POSTING UML CONFIG: " + new UmlgameConfiguration(taskList.value));
+  const updateConfigurationRequest = configuration.value.id
+    ? /*putUmlgameConfig(configuration.value.id, new UmlgameConfiguration(taskList.value))*/ console.log(
+        "PUTTING UML CONFIG: " +
+          configuration.value.id +
+          " Config: " +
+          new UmlgameConfiguration(taskList.value)
+      )
+    : /*postUmlgameConfig(new UmlgameConfiguration(taskList.value))*/ console.log(
+        "POSTING UML CONFIG: " + new UmlgameConfiguration(taskList.value)
+      );
   /*updateConfigurationRequest.then((response) => {
       minigame.value.configurationId = response.data.id;
       console.log("Submit Modal");
@@ -201,7 +207,7 @@ function initializeTasks() {
   console.log("initializeTasks()");
   taskList.value = [];
   for (let index = 0; index < numberOfQuestions; index++) {
-    if(index == 0) {
+    if (index == 0) {
       taskList.value.push(
         new UmlTask((index + 1).toString(), "", "blabla", TaskType.COMPLETION)
       );
@@ -211,10 +217,9 @@ function initializeTasks() {
       );
     }
   }
-  console.log(taskList)
+  console.log(taskList);
 }
 
-
 function onEditClick(task: UmlTask) {
   console.log("onEditClick");
   let type = task.taskType;
@@ -260,11 +265,10 @@ function setupEditorModal() {
   showModal.value = false;
   isEditorOpen.value = true;
   editorData.value = new GraphData(
-    editObject.value.graphAsJson,
-    editObject.value.graphDescription
+    editObject.value.graph,
+    editObject.value.text
   );
 }
-
 </script>
 <template>
   <b-modal
@@ -284,9 +288,7 @@ function setupEditorModal() {
     >
       <b-form-group>
         <b-table :fields="fields" :items="taskList">
-          <template #cell(task)="data">
-            Task {{ data.item.id }}:
-          </template>
+          <template #cell(task)="data"> Task {{ data.item.id }}: </template>
 
           <template #cell(selection)="data">
             <b-form-select
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index 4c75d2a..e586833 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,7 +82,7 @@
           </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">
@@ -83,7 +112,10 @@
         </b-button>
         <label>
           Source Multiplicity:
-          <b-form-input v-model="linkSourceMultiplicity" @input="updateLinkLabels" />
+          <b-form-input
+            v-model="linkSourceMultiplicity"
+            @input="updateLinkLabels"
+          />
         </label>
         <label>
           Source Role:
@@ -91,7 +123,10 @@
         </label>
         <label>
           Target Multiplicity:
-          <b-form-input v-model="linkTargetMultiplicity" @input="updateLinkLabels" />
+          <b-form-input
+            v-model="linkTargetMultiplicity"
+            @input="updateLinkLabels"
+          />
         </label>
         <label>
           Target Role:
@@ -169,11 +204,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"
@@ -182,7 +217,7 @@ let currentLinkType = ref<
   | "composition"
   | "generalization"
   | null
-  >(null);
+>(null);
 type LinkType =
   | "dependency"
   | "association"
@@ -238,7 +273,6 @@ function resetModal() {
 
 // uml
 
-
 function isLinkType(type: string): type is LinkType {
   return [
     "dependency",
@@ -252,11 +286,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 +367,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 } },
   });
 }
 
@@ -453,17 +487,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 +509,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                       },
                     },
                   },
@@ -481,7 +518,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                       },
                     },
                   },
@@ -490,7 +527,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                         dx: 20,
                       },
                     },
@@ -500,7 +537,7 @@ onMounted(() => {
                     attrs: {
                       text: {
                         fontSize: 14,
-                        fill: 'black',
+                        fill: "black",
                         dx: 20,
                       },
                     },
@@ -509,15 +546,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 +683,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(

From 9b4a70623e829b4b6fa06acb89e1cc9d53953f26 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Mon, 19 May 2025 19:12:26 +0200
Subject: [PATCH 6/8] IT WORKS

Reset, Setup, Save etc works as intended
---
 .../EditUmlGameConfigurationModal.vue         | 69 ++++++++-----------
 .../UmlModals/UmlEditorModal.vue              | 16 +++--
 2 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index 6a9e35c..c64bd22 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 {
@@ -47,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);
@@ -56,10 +54,9 @@ const isEditorOpen = ref(false);
 
 const taskList = ref([]) as Ref<UmlTask[]>;
 initializeTasks();
-
-// TODO: adapt to available modes
+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
@@ -112,7 +109,7 @@ function checkFormValidity(): boolean {
 
 function resetModal() {
   if (minigame.value.configurationId != undefined) {
-    /*getUmlgameConfig(minigame.value.configurationId)
+    getUmlgameConfig(minigame.value.configurationId)
       .then((response) => {
         configuration.value = response.data;
       })
@@ -120,10 +117,11 @@ 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 {
@@ -138,16 +136,9 @@ function resetModal() {
 function handleOk() {
   console.log("@ok");
   const updateConfigurationRequest = configuration.value.id
-    ? /*putUmlgameConfig(configuration.value.id, new UmlgameConfiguration(taskList.value))*/ console.log(
-        "PUTTING UML CONFIG: " +
-          configuration.value.id +
-          " Config: " +
-          new UmlgameConfiguration(taskList.value)
-      )
-    : /*postUmlgameConfig(new UmlgameConfiguration(taskList.value))*/ console.log(
-        "POSTING UML CONFIG: " + new UmlgameConfiguration(taskList.value)
-      );
-  /*updateConfigurationRequest.then((response) => {
+    ? 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);
@@ -172,7 +163,7 @@ function handleOk() {
       }
     }).finally(() => {
     initializeTasks();
-    });*/
+    });
 }
 
 function handleSubmit() {
@@ -224,30 +215,30 @@ function onEditClick(task: UmlTask) {
   console.log("onEditClick");
   let type = task.taskType;
   editObject.value = task;
+  editorData.value.graphAsJson = task.graph;
+  editorData.value.graphDescription = task.text;
   openedIndex.value = task.id;
-  switch (type) {
-    case TaskType.COMPLETION: {
-      showCompletionTaskModal.value = true;
-      break;
-    }
-    case TaskType.ERRORHUNT: {
-      showErrorhuntTaskModal.value = true;
-      break;
+  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;
 }
 
@@ -264,10 +255,6 @@ function setupEditorModal() {
   console.log("setting up editor");
   showModal.value = false;
   isEditorOpen.value = true;
-  editorData.value = new GraphData(
-    editObject.value.graph,
-    editObject.value.text
-  );
 }
 </script>
 <template>
diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index e586833..438a90f 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -258,21 +258,24 @@ 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 [
     "dependency",
@@ -406,7 +409,7 @@ onMounted(() => {
         el: paperContainer.value,
         model: graph,
         width: 700,
-        height: 600,
+        height: 650,
         background: { color: "#F5F5F5" },
         cellViewNamespace: namespace,
       });
@@ -809,6 +812,7 @@ onMounted(() => {
   background: rgb(226, 220, 201);
   padding: 10px;
   border-radius: 5px;
+  margin-bottom: 20px;
 }
 
 .palette-item {
@@ -822,7 +826,7 @@ onMounted(() => {
 }
 
 .palette-group {
-  margin-bottom: 20px;
+  margin-bottom: 5px;
 }
 
 .palette-title {
@@ -836,7 +840,7 @@ onMounted(() => {
 .paper-container {
   flex: 1;
   width: 400px;
-  height: 400px;
+  height: 500px;
   border: 2px solid rgb(226, 220, 201);
   background: #f5f5f5;
   overflow: auto;
@@ -862,7 +866,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  font-size: 11px;
+  font-size: 16px;
 }
 
 .label {

From 89687a91b9dd46b9969de61f7fc4ee6f970d3131 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Sun, 25 May 2025 18:37:50 +0200
Subject: [PATCH 7/8] prettier

---
 .../EditUmlGameConfigurationModal.vue         | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
index c64bd22..cd0e1cc 100644
--- a/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
+++ b/src/components/EditMinigameModals/EditUmlGameConfigurationModal.vue
@@ -56,7 +56,7 @@ const taskList = ref([]) as Ref<UmlTask[]>;
 initializeTasks();
 const configuration = ref(new UmlgameConfiguration(taskList.value));
 const openedIndex = ref();
-const editorData = ref(new GraphData("","")) 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
@@ -136,22 +136,29 @@ function resetModal() {
 function handleOk() {
   console.log("@ok");
   const updateConfigurationRequest = configuration.value.id
-    ? putUmlgameConfig(configuration.value.id, new UmlgameConfiguration(taskList.value))
+    ? putUmlgameConfig(
+        configuration.value.id,
+        new UmlgameConfiguration(taskList.value)
+      )
     : postUmlgameConfig(new UmlgameConfiguration(taskList.value));
-  updateConfigurationRequest.then((response) => {
+  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) {
@@ -161,8 +168,9 @@ function handleOk() {
       } else {
         toast.error("There was an error saving the configuration!");
       }
-    }).finally(() => {
-    initializeTasks();
+    })
+    .finally(() => {
+      initializeTasks();
     });
 }
 
@@ -218,7 +226,7 @@ function onEditClick(task: UmlTask) {
   editorData.value.graphAsJson = task.graph;
   editorData.value.graphDescription = task.text;
   openedIndex.value = task.id;
-  console.log(editorData.value.graphAsJson)
+  console.log(editorData.value.graphAsJson);
   showCompletionTaskModal.value = false;
   nextTick(() => {
     switch (type) {
@@ -235,7 +243,7 @@ function onEditClick(task: UmlTask) {
 }
 
 function handleCompletionTaskOk(data: GraphData) {
-  console.log(data)
+  console.log(data);
   editObject.value.graph = data.graphAsJson;
   editObject.value.text = data.graphDescription;
   showCompletionTaskModal.value = false;

From 96a8c8f2799ab1ae84f23c53a023bd9d173ae4a6 Mon Sep 17 00:00:00 2001
From: Fabian <fabian.kalitzke@arcor.de>
Date: Sun, 25 May 2025 18:58:58 +0200
Subject: [PATCH 8/8] Update UmlEditorModal.vue

---
 .../UmlModals/UmlEditorModal.vue              | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
index e122de0..6b24146 100644
--- a/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
+++ b/src/components/EditMinigameModals/UmlModals/UmlEditorModal.vue
@@ -13,16 +13,36 @@
         <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
@@ -49,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">