From d70a5ca63e0c7e0f7eafae9cefae4719f8e21592 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 22 Sep 2025 12:23:39 +0200
Subject: [PATCH] =?UTF-8?q?Erweitert=20die=20Funktionalit=C3=A4t=20in=20Pr?=
 =?UTF-8?q?edefinedActivities.vue=20um=20die=20M=C3=B6glichkeit,=20eine=20?=
 =?UTF-8?q?=C3=9Cbungszeichnung=20zu=20erstellen.=20F=C3=BCgt=20ein=20Zeic?=
 =?UTF-8?q?hen-Tool=20hinzu,=20das=20die=20Zeichnungsdaten=20speichert=20u?=
 =?UTF-8?q?nd=20automatisch=20als=20Bild-Link=20verwendet,=20wenn=20kein?=
 =?UTF-8?q?=20Bild-Link=20vorhanden=20ist.=20Aktualisiert=20die=20Benutzer?=
 =?UTF-8?q?oberfl=C3=A4che=20zur=20Bild-=20und=20Zeichnungshinzuf=C3=BCgun?=
 =?UTF-8?q?g.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CourtDrawingTool.vue | 1305 ++++++++++++++++++
 frontend/src/views/PredefinedActivities.vue  |   47 +-
 2 files changed, 1351 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/CourtDrawingTool.vue

diff --git a/frontend/src/components/CourtDrawingTool.vue b/frontend/src/components/CourtDrawingTool.vue
new file mode 100644
index 0000000..dabc61b
--- /dev/null
+++ b/frontend/src/components/CourtDrawingTool.vue
@@ -0,0 +1,1305 @@
+<template>
+  <div class="court-drawing-tool">
+    <div class="tool-header">
+      <h4>Tischtennis-Übungszeichnung</h4>
+      <div class="tool-controls">
+        <button @click="clearCanvas" class="btn-secondary btn-small">Löschen</button>
+        <button @click="saveDrawing" class="btn-primary btn-small">Speichern</button>
+        <button @click="loadDrawing" class="btn-secondary btn-small">Laden</button>
+      </div>
+    </div>
+    
+    <div class="canvas-container">
+      <canvas 
+        ref="drawingCanvas" 
+        @mousedown="startDrawing"
+        @mousemove="draw"
+        @mouseup="stopDrawing"
+        @mouseleave="stopDrawing"
+        :width="config.canvas.width"
+        :height="config.canvas.height"
+      ></canvas>
+    </div>
+    
+    
+          <!-- Startposition und Schlagart Auswahl -->
+          <div class="exercise-selection" v-if="selectedStartPosition">
+            <h5>Übung konfigurieren</h5>
+            <div class="selection-group">
+              <!-- Schlagart Auswahl -->
+              <div class="stroke-selection">
+                <div class="stroke-buttons">
+                  <button 
+                    type="button"
+                    :class="['btn-small', { 'btn-primary': strokeType === 'VH', 'btn-secondary': strokeType !== 'VH' }]"
+                    @click="strokeType = 'VH'"
+                  >
+                    Vorhand (VH)
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', { 'btn-primary': strokeType === 'RH', 'btn-secondary': strokeType !== 'RH' }]"
+                    @click="strokeType = 'RH'"
+                  >
+                    Rückhand (RH)
+                  </button>
+                </div>
+              </div>
+              
+              <!-- Schnittoption Auswahl -->
+              <div class="spin-selection">
+                <div class="spin-buttons">
+                  <button 
+                    type="button"
+                    :class="['btn-small', { 'btn-primary': spinType === 'Unterschnitt', 'btn-secondary': spinType !== 'Unterschnitt' }]"
+                    @click="spinType = 'Unterschnitt'"
+                  >
+                    Unterschnitt
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', { 'btn-primary': spinType === 'Überschnitt', 'btn-secondary': spinType !== 'Überschnitt' }]"
+                    @click="spinType = 'Überschnitt'"
+                  >
+                    Überschnitt
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', { 'btn-primary': spinType === 'Seitschnitt', 'btn-secondary': spinType !== 'Seitschnitt' }]"
+                    @click="spinType = 'Seitschnitt'"
+                  >
+                    Seitschnitt
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', { 'btn-primary': spinType === 'Seitunterschnitt', 'btn-secondary': spinType !== 'Seitunterschnitt' }]"
+                    @click="spinType = 'Seitunterschnitt'"
+                  >
+                    Seitunterschnitt
+                  </button>
+                  <button 
+                    type="button"
+                    :class="['btn-small', { 'btn-primary': spinType === 'Gegenläufer', 'btn-secondary': spinType !== 'Gegenläufer' }]"
+                    @click="spinType = 'Gegenläufer'"
+                  >
+                    Gegenläufer
+                  </button>
+                </div>
+              </div>
+              
+              <!-- Zusätzliche Schläge hinzufügen -->
+              <div class="additional-strokes" v-if="strokeType && spinType && targetPosition">
+                <div class="next-stroke-selection">
+                  <!-- Schlagart für zusätzlichen Schlag -->
+                  <div class="next-stroke-type">
+                    <button 
+                      type="button"
+                      :class="['btn-small', { 'btn-primary': nextStrokeSide === 'VH', 'btn-secondary': nextStrokeSide !== 'VH' }]"
+                      @click="nextStrokeSide = 'VH'"
+                    >
+                      VH (Vorhand)
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', { 'btn-primary': nextStrokeSide === 'RH', 'btn-secondary': nextStrokeSide !== 'RH' }]"
+                      @click="nextStrokeSide = 'RH'"
+                    >
+                      RH (Rückhand)
+                    </button>
+                  </div>
+                  
+                  <div class="next-stroke-buttons">
+                    <button 
+                      type="button"
+                      :class="['btn-small', { 'btn-primary': nextStrokeType === 'US', 'btn-secondary': nextStrokeType !== 'US' }]"
+                      @click="nextStrokeType = 'US'"
+                    >
+                      US (Schupf)
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', { 'btn-primary': nextStrokeType === 'OS', 'btn-secondary': nextStrokeType !== 'OS' }]"
+                      @click="nextStrokeType = 'OS'"
+                    >
+                      OS (Konter)
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', { 'btn-primary': nextStrokeType === 'TS', 'btn-secondary': nextStrokeType !== 'TS' }]"
+                      @click="nextStrokeType = 'TS'"
+                    >
+                      TS (Topspin)
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', { 'btn-primary': nextStrokeType === 'FL', 'btn-secondary': nextStrokeType !== 'FL' }]"
+                      @click="nextStrokeType = 'FL'"
+                    >
+                      FL (Flip)
+                    </button>
+                    <button 
+                      type="button"
+                      :class="['btn-small', { 'btn-primary': nextStrokeType === 'BL', 'btn-secondary': nextStrokeType !== 'BL' }]"
+                      @click="nextStrokeType = 'BL'"
+                    >
+                      BL (Block)
+                    </button>
+                  </div>
+                  <button 
+                    type="button"
+                    class="btn-primary btn-small"
+                    @click="addNextStroke"
+                  >
+                    Schlag hinzufügen
+                  </button>
+                </div>
+              </div>
+              
+              <div class="exercise-info" v-if="strokeType && spinType">
+                <p><strong>Kürzel:</strong> {{ getFullCode() }}</p>
+                <p><strong>Titel:</strong> {{ getFullTitle() }}</p>
+              </div>
+            </div>
+          </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CourtDrawingTool',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // Canvas-Konfiguration
+      config: {
+        canvas: {
+          width: 600,
+          height: 400
+        },
+        table: {
+          width: 500,
+          height: 300,
+          color: '#2d5a2d',
+          borderWidth: 2,
+          borderColor: '#000000',
+          outerFrameWidth: 5,
+          outerFrameColor: '#ffffff',
+          outerFrameBorderWidth: 0.5,
+          outerFrameBorderColor: '#000000'
+        },
+        net: {
+          width: 4,
+          color: '#ffffff',
+          borderWidth: 1,
+          borderColor: '#000000',
+          overhang: 15
+        },
+        horizontalLine: {
+          width: 1,
+          color: '#ffffff',
+          gap: 10,
+          edgeMargin: 10
+        },
+        serviceLine: {
+          width: 1,
+          color: '#ffffff'
+        },
+        startCircles: {
+          radius: 12,
+          x: 10,
+          topYOffset: 30,
+          bottomYOffset: 30,
+          selectedColor: '#ff0000',
+          unselectedColor: '#808080',
+          selectedBorderColor: '#ffffff',
+          unselectedBorderColor: '#000000',
+          selectedBorderWidth: 2,
+          unselectedBorderWidth: 1
+        },
+        targetCircles: {
+          radius: 10,
+          rightXOffset: 20,
+          middleXOffset: 40,
+          topYOffset: 40,
+          bottomYOffset: 40,
+          selectedColor: '#00ff00',
+          unselectedColor: '#ffffff',
+          selectedBorderColor: '#ffffff',
+          unselectedBorderColor: '#000000',
+          selectedBorderWidth: 2,
+          unselectedBorderWidth: 1,
+          font: '12px Arial',
+          textColor: '#000000',
+          transparency: 0.3
+        },
+        leftTargetCircles: {
+          radius: 10,
+          leftXOffset: 20,
+          rightXOffset: 40,
+          topYOffset: 40,
+          bottomYOffset: 40,
+          selectedColor: '#00ff00',
+          unselectedColor: '#ffffff',
+          selectedBorderColor: '#00ff00',
+          unselectedBorderColor: '#000000',
+          selectedBorderWidth: 2,
+          unselectedBorderWidth: 1,
+          font: '12px Arial',
+          textColor: '#000000'
+        },
+        arrow: {
+          color: '#ff0000',
+          width: 6,
+          cap: 'round',
+          headSize: 8,
+          vhOffsetX: 5,
+          vhOffsetY: 8,
+          rhOffsetX: 10,
+          rhOffsetY: 0,
+          counterFont: 'bold 14px Arial',
+          counterOffset: 15
+        },
+        pen: {
+          color: '#ff0000',
+          width: 3,
+          cap: 'round',
+          join: 'round'
+        }
+      },
+      // Canvas-Instanzen
+      canvas: null,
+      ctx: null,
+      // Zeichen-Status
+      isDrawing: false,
+      startX: 0,
+      startY: 0,
+      lastX: 0,
+      lastY: 0,
+      // Übungs-Konfiguration
+      selectedStartPosition: null,
+      selectedCirclePosition: null,
+      strokeType: 'VH',
+      spinType: '',
+      targetPosition: '',
+      exerciseCounter: 1,
+      additionalStrokes: [],
+      nextStrokeType: 'US',
+      nextStrokeSide: 'VH',
+      nextStrokeTargetPosition: ''
+    }
+  },
+  watch: {
+    strokeType() {
+      this.updateTextFields();
+    },
+    spinType() {
+      this.drawCourt(); // Neu zeichnen wenn sich Schnittoption ändert
+      this.updateTextFields();
+    },
+    targetPosition() {
+      this.updateTextFields();
+    },
+    selectedStartPosition() {
+      // Neu zeichnen wenn sich die Auswahl ändert
+      if (this.canvas && this.ctx) {
+        this.drawCourt();
+      }
+    }
+  },
+  mounted() {
+    this.initCanvas();
+    this.drawCourt();
+    if (this.value) {
+      this.loadDrawingFromData(this.value);
+    }
+  },
+  methods: {
+    initCanvas() {
+      this.canvas = this.$refs.drawingCanvas;
+      this.ctx = this.canvas.getContext('2d');
+      this.ctx.lineCap = this.config.pen.cap;
+      this.ctx.lineJoin = this.config.pen.join;
+    },
+    
+    drawCourt() {
+      const ctx = this.ctx;
+      const canvas = this.canvas;
+      const config = this.config;
+      
+      // Hintergrund
+      ctx.fillStyle = '#f0f0f0';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      
+      // Tischtennis-Tisch
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (canvas.width - tableWidth) / 2;
+      const tableY = (canvas.height - tableHeight) / 2;
+      
+      // Tischtennis-Tisch Hintergrund
+      ctx.fillStyle = config.table.color;
+      ctx.fillRect(tableX, tableY, tableWidth, tableHeight);
+      
+      // Tischtennis-Tisch Rand
+      ctx.strokeStyle = config.table.borderColor;
+      ctx.lineWidth = config.table.borderWidth;
+      ctx.strokeRect(tableX, tableY, tableWidth, tableHeight);
+      
+      // Äußerer Rahmen (weiß für Tischbeine)
+      ctx.strokeStyle = config.table.outerFrameColor;
+      ctx.lineWidth = config.table.outerFrameWidth;
+      ctx.strokeRect(tableX - config.table.outerFrameWidth, tableY - config.table.outerFrameWidth, tableWidth + config.table.outerFrameWidth * 2, tableHeight + config.table.outerFrameWidth * 2);
+      
+      // Schwarzer Rahmen um den äußeren Rahmen
+      ctx.strokeStyle = config.table.outerFrameBorderColor;
+      ctx.lineWidth = config.table.outerFrameBorderWidth;
+      ctx.strokeRect(tableX - config.table.outerFrameWidth - config.table.outerFrameBorderWidth, tableY - config.table.outerFrameWidth - config.table.outerFrameBorderWidth, tableWidth + (config.table.outerFrameWidth + config.table.outerFrameBorderWidth) * 2, tableHeight + (config.table.outerFrameWidth + config.table.outerFrameBorderWidth) * 2);
+      
+      // Mittellinie (dünnere weiße horizontale Linie in der Mitte, geteilt)
+      ctx.strokeStyle = config.horizontalLine.color;
+      ctx.lineWidth = config.horizontalLine.width;
+      const centerX = tableX + tableWidth / 2;
+      const centerY = tableY + tableHeight / 2;
+      const gap = config.horizontalLine.gap;
+      const edgeMargin = config.horizontalLine.edgeMargin;
+      
+      // Linke Hälfte der horizontalen Linie
+      ctx.beginPath();
+      ctx.moveTo(tableX + edgeMargin, centerY);
+      ctx.lineTo(centerX - gap, centerY);
+      ctx.stroke();
+      
+      // Rechte Hälfte der horizontalen Linie
+      ctx.beginPath();
+      ctx.moveTo(centerX + gap, centerY);
+      ctx.lineTo(tableX + tableWidth - edgeMargin, centerY);
+      ctx.stroke();
+      
+      // Netz (dicke weiße vertikale Linie in der Mitte mit Überstand)
+      ctx.strokeStyle = config.net.color;
+      ctx.lineWidth = config.net.width;
+      const verticalOverhang = config.net.overhang;
+      ctx.beginPath();
+      ctx.moveTo(tableX + tableWidth / 2, tableY - verticalOverhang);
+      ctx.lineTo(tableX + tableWidth / 2, tableY + tableHeight + verticalOverhang);
+      ctx.stroke();
+      
+      // Schwarzer Rahmen um das Netz (vertikale Linie)
+      ctx.strokeStyle = config.net.borderColor;
+      ctx.lineWidth = config.net.borderWidth;
+      ctx.beginPath();
+      ctx.moveTo(tableX + tableWidth / 2, tableY - verticalOverhang);
+      ctx.lineTo(tableX + tableWidth / 2, tableY + tableHeight + verticalOverhang);
+      ctx.stroke();
+      
+      // Service-Bereiche (nur vertikale Linien, keine horizontalen)
+      const serviceWidth = tableWidth / 2;
+      
+      // Service-Bereiche zeichnen (nur vertikale Trennlinien)
+      ctx.strokeStyle = config.serviceLine.color;
+      ctx.lineWidth = config.serviceLine.width;
+      
+      // Vertikale Trennlinie zwischen linken und rechten Bereichen
+      ctx.beginPath();
+      ctx.moveTo(tableX + serviceWidth, tableY);
+      ctx.lineTo(tableX + serviceWidth, tableY + tableHeight);
+      ctx.stroke();
+      
+      // Startpositionen (drei Kreise am linken Bildrand)
+      const circleRadius = config.startCircles.radius;
+      const circleX = config.startCircles.x;
+      const topCircleY = tableY + config.startCircles.topYOffset;
+      const middleCircleY = tableY + tableHeight / 2;
+      const bottomCircleY = tableY + tableHeight - config.startCircles.bottomYOffset;
+      
+      const circles = [
+        { x: circleX, y: topCircleY, position: 'top' },
+        { x: circleX, y: middleCircleY, position: 'middle' },
+        { x: circleX, y: bottomCircleY, position: 'bottom' }
+      ];
+      
+      circles.forEach(circle => {
+        const isSelected = this.selectedCirclePosition === circle.position;
+        // Kreis füllen
+        ctx.fillStyle = isSelected ? config.startCircles.selectedColor : config.startCircles.unselectedColor;
+        ctx.beginPath();
+        ctx.arc(circle.x, circle.y, circleRadius, 0, 2 * Math.PI);
+        ctx.fill();
+        
+        // Kreis rand
+        ctx.strokeStyle = isSelected ? config.startCircles.selectedBorderColor : config.startCircles.unselectedBorderColor;
+        ctx.lineWidth = isSelected ? config.startCircles.selectedBorderWidth : config.startCircles.unselectedBorderWidth;
+        ctx.stroke();
+      });
+      
+      // Zielpositionen (9 Kreise mit Zahlen) - nur anzeigen wenn Schnittoption gewählt
+      if (this.spinType) {
+        this.drawTargetPositions(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+    },
+    
+    drawTargetPositions(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config.targetCircles;
+      const targetRadius = config.radius;
+      const numberFont = config.font;
+      
+      const x1 = tableX + tableWidth - config.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      // Positionen der 9 Kreise
+      const positions = [
+        // Rechts (1, 2, 3) - am rechten Tischrand: L (Lang)
+        { x: x1, y: tableY + config.topYOffset, number: 1, label: 'VHL' }, // Vorhand Lang
+        { x: x1, y: tableY + tableHeight/2, number: 2, label: 'ML' }, // Mitte Lang
+        { x: x1, y: tableY + tableHeight - config.bottomYOffset, number: 3, label: 'RHL' }, // Rückhand Lang
+        // Mitte (4, 5, 6) - zwischen 1-3 und 7-9: H (Halblang)
+        { x: x2, y: tableY + config.topYOffset, number: 4, label: 'VHH' }, // Vorhand Halblang
+        { x: x2, y: tableY + tableHeight/2, number: 5, label: 'MH' }, // Mitte Halblang
+        { x: x2, y: tableY + tableHeight - config.bottomYOffset, number: 6, label: 'RHH' }, // Rückhand Halblang
+        // Zwischen Netz und Mitte (7, 8, 9) - näher am Netz: K (Kurz)
+        { x: x3, y: tableY + config.topYOffset, number: 7, label: 'VHK' }, // Vorhand Kurz
+        { x: x3, y: tableY + tableHeight/2, number: 8, label: 'MK' }, // Mitte Kurz
+        { x: x3, y: tableY + tableHeight - config.bottomYOffset, number: 9, label: 'RHK' } // Rückhand Kurz
+      ];
+      
+      positions.forEach(pos => {
+        const isSelected = this.targetPosition === pos.number.toString();
+        const isTargetSelected = this.targetPosition !== '';
+        
+        // Transparenz für nicht-ausgewählte Kreise wenn ein Target ausgewählt ist
+        if (isTargetSelected && !isSelected) {
+          ctx.globalAlpha = config.transparency;
+        } else {
+          ctx.globalAlpha = 1.0;
+        }
+        
+        // Kreis zeichnen
+        ctx.fillStyle = isSelected ? config.selectedColor : config.unselectedColor;
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, targetRadius, 0, 2 * Math.PI);
+        ctx.fill();
+        
+        // Kreis rand
+        ctx.strokeStyle = isSelected ? config.selectedBorderColor : config.unselectedBorderColor;
+        ctx.lineWidth = isSelected ? config.selectedBorderWidth : config.unselectedBorderWidth;
+        ctx.stroke();
+        
+        // Zahl zeichnen (im Kreis)
+        ctx.fillStyle = config.textColor;
+        ctx.font = numberFont;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(pos.number.toString(), pos.x, pos.y);
+        
+        // Alpha zurücksetzen
+        ctx.globalAlpha = 1.0;
+      });
+      
+      // Roten Pfeil vom Startposition-Kreis zur ausgewählten Zielposition zeichnen
+      if (this.targetPosition && this.selectedCirclePosition) {
+        this.drawArrowToTarget(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+      
+      // Kreise für zusätzliche Schläge auf der linken Seite anzeigen (nur nach Schlag-Auswahl für rechte Seite)
+      if (this.nextStrokeType && this.nextStrokeSide && this.targetPosition) {
+        this.drawLeftSideTargetCircles(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+      
+      // Zusätzlichen Pfeil vom rechten Source zum linken Target zeichnen (wenn linker Target ausgewählt)
+      if (this.nextStrokeTargetPosition && this.targetPosition) {
+        this.drawArrowToLeftTarget(ctx, tableX, tableY, tableWidth, tableHeight);
+      }
+    },
+    
+    drawArrowToTarget(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config;
+      // Startposition-Kreis Koordinaten ermitteln
+      const circleRadius = config.startCircles.radius;
+      const circleX = config.startCircles.x;
+      let startY;
+      
+      switch(this.selectedCirclePosition) {
+        case 'top':
+          startY = tableY + config.startCircles.topYOffset;
+          break;
+        case 'middle':
+          startY = tableY + tableHeight / 2;
+          break;
+        case 'bottom':
+          startY = tableY + tableHeight - config.startCircles.bottomYOffset;
+          break;
+        default:
+          return;
+      }
+      
+      // Zielposition-Kreis Koordinaten ermitteln
+      const targetRadius = config.targetCircles.radius;
+      const x1 = tableX + tableWidth - config.targetCircles.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.targetCircles.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      
+      let targetX, targetY;
+      const targetNum = parseInt(this.targetPosition);
+      
+      // X-Koordinate basierend auf Target-Nummer
+      if (targetNum >= 1 && targetNum <= 3) {
+        targetX = x1;
+      } else if (targetNum >= 4 && targetNum <= 6) {
+        targetX = x2;
+      } else if (targetNum >= 7 && targetNum <= 9) {
+        targetX = x3;
+      } else {
+        return;
+      }
+      
+      // Y-Koordinate basierend auf Target-Nummer
+      if (targetNum === 1 || targetNum === 4 || targetNum === 7) {
+        targetY = tableY + config.targetCircles.topYOffset;
+      } else if (targetNum === 2 || targetNum === 5 || targetNum === 8) {
+        targetY = tableY + tableHeight/2;
+      } else if (targetNum === 3 || targetNum === 6 || targetNum === 9) {
+        targetY = tableY + tableHeight - config.targetCircles.bottomYOffset;
+      } else {
+        return;
+      }
+      
+      // Pfeil zeichnen
+      ctx.strokeStyle = config.arrow.color;
+      ctx.fillStyle = config.arrow.color;
+      ctx.lineWidth = config.arrow.width;
+      ctx.lineCap = config.arrow.cap;
+      
+      // Linie vom Start- zum Zielkreis (Position abhängig von Schlagart)
+      let startX, startYOffset;
+      if (this.strokeType === 'VH') {
+        // Vorhand: unterhalb seitlich des Punktes
+        startX = circleX + circleRadius + config.arrow.vhOffsetX;
+        startYOffset = circleRadius + config.arrow.vhOffsetY;
+      } else {
+        // Rückhand: rechts vom Punkt
+        startX = circleX + circleRadius + config.arrow.rhOffsetX;
+        startYOffset = config.arrow.rhOffsetY;
+      }
+      
+      const actualStartY = startY + startYOffset;
+      
+      // Übungsnummer über der Linie zeichnen
+      ctx.fillStyle = config.arrow.color;
+      ctx.font = config.arrow.counterFont;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      
+      // Position für die Nummer (Mitte der Linie, etwas höher)
+      const midX = (startX + targetX - targetRadius) / 2;
+      const midY = (actualStartY + targetY) / 2 - config.arrow.counterOffset;
+      
+      ctx.fillText(this.exerciseCounter.toString(), midX, midY);
+      
+      // Linie zeichnen
+      ctx.beginPath();
+      ctx.moveTo(startX, actualStartY);
+      ctx.lineTo(targetX - targetRadius, targetY);
+      ctx.stroke();
+      
+      // Pfeilspitze zeichnen
+      const arrowSize = config.arrow.headSize;
+      const angle = Math.atan2(targetY - actualStartY, targetX - startX);
+      
+      ctx.beginPath();
+      ctx.moveTo(targetX - targetRadius, targetY);
+      ctx.lineTo(
+        targetX - targetRadius - arrowSize * Math.cos(angle - Math.PI / 6),
+        targetY - arrowSize * Math.sin(angle - Math.PI / 6)
+      );
+      ctx.moveTo(targetX - targetRadius, targetY);
+      ctx.lineTo(
+        targetX - targetRadius - arrowSize * Math.cos(angle + Math.PI / 6),
+        targetY - arrowSize * Math.sin(angle + Math.PI / 6)
+      );
+      ctx.stroke();
+    },
+    
+    drawArrowToLeftTarget(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config;
+      
+      // Rechter Source-Kreis Koordinaten (vom ersten Pfeil)
+      const sourceRadius = config.targetCircles.radius;
+      const x1 = tableX + tableWidth - config.targetCircles.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.targetCircles.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      
+      let sourceX, sourceY;
+      const sourceNum = parseInt(this.targetPosition);
+      
+      // X-Koordinate basierend auf Source-Nummer
+      if (sourceNum >= 1 && sourceNum <= 3) {
+        sourceX = x1;
+      } else if (sourceNum >= 4 && sourceNum <= 6) {
+        sourceX = x2;
+      } else if (sourceNum >= 7 && sourceNum <= 9) {
+        sourceX = x3;
+      } else {
+        return;
+      }
+      
+      // Y-Koordinate basierend auf Source-Nummer
+      if (sourceNum === 1 || sourceNum === 4 || sourceNum === 7) {
+        sourceY = tableY + config.targetCircles.topYOffset;
+      } else if (sourceNum === 2 || sourceNum === 5 || sourceNum === 8) {
+        sourceY = tableY + tableHeight/2;
+      } else if (sourceNum === 3 || sourceNum === 6 || sourceNum === 9) {
+        sourceY = tableY + tableHeight - config.targetCircles.bottomYOffset;
+      } else {
+        return;
+      }
+      
+      // Linker Target-Kreis Koordinaten
+      const targetRadius = config.leftTargetCircles.radius;
+      const leftX1 = tableX + config.leftTargetCircles.leftXOffset;
+      const leftX3 = tableX + tableWidth / 2 - config.leftTargetCircles.rightXOffset;
+      const leftXdiff = leftX3 - leftX1;
+      const leftX2 = leftX3 - leftXdiff / 2;
+      
+      let targetX, targetY;
+      const targetNum = parseInt(this.nextStrokeTargetPosition);
+      
+      // X-Koordinate basierend auf Target-Nummer (gespiegelt)
+      if (targetNum >= 1 && targetNum <= 3) {
+        targetX = leftX1;
+      } else if (targetNum >= 4 && targetNum <= 6) {
+        targetX = leftX2;
+      } else if (targetNum >= 7 && targetNum <= 9) {
+        targetX = leftX3;
+      } else {
+        return;
+      }
+      
+      // Y-Koordinate basierend auf Target-Nummer (gespiegelt)
+      // Auf der linken Seite: 1=unten, 2=mitte, 3=oben (gespiegelt zu rechts)
+      if (targetNum === 1 || targetNum === 4 || targetNum === 7) {
+        targetY = tableY + tableHeight - config.leftTargetCircles.bottomYOffset; // Unten
+      } else if (targetNum === 2 || targetNum === 5 || targetNum === 8) {
+        targetY = tableY + tableHeight/2; // Mitte
+      } else if (targetNum === 3 || targetNum === 6 || targetNum === 9) {
+        targetY = tableY + config.leftTargetCircles.topYOffset; // Oben
+      } else {
+        return;
+      }
+      
+      // Pfeil zeichnen
+      ctx.strokeStyle = config.arrow.color;
+      ctx.fillStyle = config.arrow.color;
+      ctx.lineWidth = config.arrow.width;
+      ctx.lineCap = config.arrow.cap;
+      
+      // Startposition vom rechten Kreis (links vom Kreis)
+      const startX = sourceX - sourceRadius;
+      const startY = sourceY;
+      
+      // Zielposition zum linken Kreis (rechts vom Kreis)
+      const endX = targetX + targetRadius;
+      const endY = targetY;
+      
+      // Übungsnummer über der Linie zeichnen
+      ctx.fillStyle = config.arrow.color;
+      ctx.font = config.arrow.counterFont;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      
+      // Position für die Nummer (Mitte der Linie, etwas höher)
+      const midX = (startX + endX) / 2;
+      const midY = (startY + endY) / 2 - config.arrow.counterOffset;
+      
+      ctx.fillText((this.exerciseCounter + 1).toString(), midX, midY);
+      
+      // Linie zeichnen
+      ctx.beginPath();
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(endX, endY);
+      ctx.stroke();
+      
+      // Pfeilspitze zeichnen
+      const arrowSize = config.arrow.headSize;
+      const angle = Math.atan2(endY - startY, endX - startX);
+      
+      ctx.beginPath();
+      ctx.moveTo(endX, endY);
+      ctx.lineTo(
+        endX - arrowSize * Math.cos(angle - Math.PI / 6),
+        endY - arrowSize * Math.sin(angle - Math.PI / 6)
+      );
+      ctx.moveTo(endX, endY);
+      ctx.lineTo(
+        endX - arrowSize * Math.cos(angle + Math.PI / 6),
+        endY - arrowSize * Math.sin(angle + Math.PI / 6)
+      );
+      ctx.stroke();
+    },
+    
+    drawLeftSideTargetCircles(ctx, tableX, tableY, tableWidth, tableHeight) {
+      const config = this.config.leftTargetCircles;
+      // Kreise auf der linken Tischhälfte (spiegelbildlich zu rechts)
+      const x1 = tableX + config.leftXOffset; // Linker Tischrand (Lang)
+      const x3 = tableX + tableWidth / 2 - config.rightXOffset; // Näher am Netz (Kurz)
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff / 2; // Mitte (Halblang)
+      
+      const positions = [
+        { x: x1, y: tableY + config.topYOffset, num: 3 },    // RH Lang (gespiegelt)
+        { x: x1, y: tableY + tableHeight / 2, num: 2 },    // M Lang
+        { x: x1, y: tableY + tableHeight - config.bottomYOffset, num: 1 }, // VH Lang (gespiegelt)
+        { x: x2, y: tableY + config.topYOffset, num: 6 },    // RH Halblang (gespiegelt)
+        { x: x2, y: tableY + tableHeight / 2, num: 5 },    // M Halblang
+        { x: x2, y: tableY + tableHeight - config.bottomYOffset, num: 4 }, // VH Halblang (gespiegelt)
+        { x: x3, y: tableY + config.topYOffset, num: 9 },    // RH Kurz (gespiegelt)
+        { x: x3, y: tableY + tableHeight / 2, num: 8 },    // M Kurz
+        { x: x3, y: tableY + tableHeight - config.bottomYOffset, num: 7 }  // VH Kurz (gespiegelt)
+      ];
+      
+      positions.forEach(pos => {
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, config.radius, 0, 2 * Math.PI);
+        ctx.fillStyle = config.unselectedColor;
+        ctx.fill();
+        
+        // Hervorhebung wenn ausgewählt
+        if (this.nextStrokeTargetPosition === pos.num.toString()) {
+          ctx.strokeStyle = config.selectedBorderColor;
+          ctx.lineWidth = config.selectedBorderWidth;
+        } else {
+          ctx.strokeStyle = config.unselectedBorderColor;
+          ctx.lineWidth = config.unselectedBorderWidth;
+        }
+        ctx.stroke();
+        
+        // Nummer in den Kreis zeichnen
+        ctx.fillStyle = config.textColor;
+        ctx.font = config.font;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(pos.num.toString(), pos.x, pos.y);
+      });
+    },
+    
+    startDrawing(e) {
+      const rect = this.canvas.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+      
+      // Prüfe ob auf eine Startposition geklickt wurde
+      const clickedCircle = this.checkStartPositionClick(clickX, clickY);
+      if (clickedCircle) {
+        this.selectedCirclePosition = clickedCircle.circlePosition;
+        this.selectedStartPosition = clickedCircle.position;
+        this.drawCourt(); // Neu zeichnen für Kreis-Hervorhebung
+        this.updateTextFields();
+        return;
+      }
+      
+      // Prüfe ob auf eine Zielposition geklickt wurde
+      const clickedTarget = this.checkTargetPositionClick(clickX, clickY);
+      if (clickedTarget) {
+        this.targetPosition = clickedTarget;
+        this.drawCourt(); // Neu zeichnen für Zielposition-Hervorhebung
+        this.updateTextFields();
+        return;
+      }
+      
+      // Prüfe ob auf eine linke Zielposition geklickt wurde (nur wenn Schlag für rechte Seite ausgewählt)
+      if (this.nextStrokeType && this.nextStrokeSide && this.targetPosition) {
+        const clickedLeftTarget = this.checkLeftTargetPositionClick(clickX, clickY);
+        if (clickedLeftTarget) {
+          this.nextStrokeTargetPosition = clickedLeftTarget;
+          this.drawCourt();
+          this.updateTextFields();
+          return;
+        }
+      }
+      
+      // Nur zeichnen wenn kein Kreis geklickt wurde
+      this.isDrawing = true;
+      this.startX = clickX;
+      this.startY = clickY;
+      this.lastX = this.startX;
+      this.lastY = this.startY;
+    },
+    
+    checkStartPositionClick(x, y) {
+      const config = this.config;
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (this.canvas.width - tableWidth) / 2;
+      const tableY = (this.canvas.height - tableHeight) / 2;
+      
+      const circleRadius = config.startCircles.radius;
+      const circleX = config.startCircles.x;
+      const topCircleY = tableY + config.startCircles.topYOffset;
+      const middleCircleY = tableY + tableHeight / 2;
+      const bottomCircleY = tableY + tableHeight - config.startCircles.bottomYOffset;
+      
+      // Prüfe Abstand zu den Kreisen
+      const circles = [
+        { x: circleX, y: topCircleY, position: 'AS', circlePosition: 'top' },
+        { x: circleX, y: middleCircleY, position: 'AS', circlePosition: 'middle' },
+        { x: circleX, y: bottomCircleY, position: 'AS', circlePosition: 'bottom' }
+      ];
+      
+      for (const circle of circles) {
+        const distance = Math.sqrt((x - circle.x) ** 2 + (y - circle.y) ** 2);
+        if (distance <= circleRadius) {
+          return circle; // Gibt das komplette Circle-Objekt zurück
+        }
+      }
+      
+      return null;
+    },
+    
+    checkTargetPositionClick(x, y) {
+      if (!this.spinType) return null; // Nur wenn Schnittoption gewählt
+      
+      const config = this.config;
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (this.canvas.width - tableWidth) / 2;
+      const tableY = (this.canvas.height - tableHeight) / 2;
+      
+      const targetRadius = config.targetCircles.radius;
+      
+      const x1 = tableX + tableWidth - config.targetCircles.rightXOffset;
+      const x3 = tableX + tableWidth/2 + config.targetCircles.middleXOffset;
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff/2;
+      
+      // Positionen der 9 Kreise (gleiche wie in drawTargetPositions)
+      const positions = [
+        // Rechts (1, 2, 3) - am rechten Tischrand: L (Lang)
+        { x: x1, y: tableY + config.targetCircles.topYOffset, number: 1, label: 'VHL' },
+        { x: x1, y: tableY + tableHeight/2, number: 2, label: 'ML' },
+        { x: x1, y: tableY + tableHeight - config.targetCircles.bottomYOffset, number: 3, label: 'RHL' },
+        // Mitte (4, 5, 6) - zwischen 1-3 und 7-9: H (Halblang)
+        { x: x2, y: tableY + config.targetCircles.topYOffset, number: 4, label: 'VHH' },
+        { x: x2, y: tableY + tableHeight/2, number: 5, label: 'MH' },
+        { x: x2, y: tableY + tableHeight - config.targetCircles.bottomYOffset, number: 6, label: 'RHH' },
+        // Zwischen Netz und Mitte (7, 8, 9) - näher am Netz: K (Kurz)
+        { x: x3, y: tableY + config.targetCircles.topYOffset, number: 7, label: 'VHK' },
+        { x: x3, y: tableY + tableHeight/2, number: 8, label: 'MK' },
+        { x: x3, y: tableY + tableHeight - config.targetCircles.bottomYOffset, number: 9, label: 'RHK' }
+      ];
+      
+      for (const pos of positions) {
+        const distance = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
+        if (distance <= targetRadius) {
+          return pos.number.toString();
+        }
+      }
+      
+      return null;
+    },
+    
+    checkLeftTargetPositionClick(x, y) {
+      const canvas = this.canvas;
+      if (!canvas) return null;
+      
+      const config = this.config;
+      // Verwende dieselben Maße wie rechts (Canvas-Maße, nicht getBoundingClientRect)
+      const tableWidth = config.table.width;
+      const tableHeight = config.table.height;
+      const tableX = (canvas.width - tableWidth) / 2;
+      const tableY = (canvas.height - tableHeight) / 2;
+      
+      const targetRadius = config.leftTargetCircles.radius;
+      
+      // Spiegelbildliche X-Positionen zur rechten Seite
+      const x1 = tableX + config.leftTargetCircles.leftXOffset; // Linker Tischrand (Lang)
+      const x3 = tableX + tableWidth / 2 - config.leftTargetCircles.rightXOffset; // Näher am Netz (Kurz)
+      const xdiff = x3 - x1;
+      const x2 = x3 - xdiff / 2; // Mitte (Halblang)
+      
+      const positions = [
+        { x: x1, y: tableY + config.leftTargetCircles.topYOffset, num: 3 },    // RH Lang (gespiegelt)
+        { x: x1, y: tableY + tableHeight / 2, num: 2 },    // M Lang
+        { x: x1, y: tableY + tableHeight - config.leftTargetCircles.bottomYOffset, num: 1 }, // VH Lang (gespiegelt)
+        { x: x2, y: tableY + config.leftTargetCircles.topYOffset, num: 6 },    // RH Halblang (gespiegelt)
+        { x: x2, y: tableY + tableHeight / 2, num: 5 },    // M Halblang
+        { x: x2, y: tableY + tableHeight - config.leftTargetCircles.bottomYOffset, num: 4 }, // VH Halblang (gespiegelt)
+        { x: x3, y: tableY + config.leftTargetCircles.topYOffset, num: 9 },    // RH Kurz (gespiegelt)
+        { x: x3, y: tableY + tableHeight / 2, num: 8 },    // M Kurz
+        { x: x3, y: tableY + tableHeight - config.leftTargetCircles.bottomYOffset, num: 7 }  // VH Kurz (gespiegelt)
+      ];
+      
+      for (const pos of positions) {
+        const distance = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
+        if (distance <= targetRadius) {
+          return pos.num.toString();
+        }
+      }
+      
+      return null;
+    },
+    
+    draw(e) {
+      if (!this.isDrawing) return;
+      
+      const rect = this.canvas.getBoundingClientRect();
+      const currentX = e.clientX - rect.left;
+      const currentY = e.clientY - rect.top;
+      
+      this.ctx.strokeStyle = this.config.pen.color;
+      this.ctx.lineWidth = this.config.pen.width;
+      
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.lastX, this.lastY);
+      this.ctx.lineTo(currentX, currentY);
+      this.ctx.stroke();
+      
+      this.lastX = currentX;
+      this.lastY = currentY;
+    },
+    
+    stopDrawing() {
+      if (!this.isDrawing) return;
+      this.isDrawing = false;
+    },
+    
+    clearCanvas() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.drawCourt();
+    },
+    
+    saveDrawing() {
+      const dataURL = this.canvas.toDataURL('image/png');
+      this.$emit('input', dataURL);
+      this.$emit('save', dataURL);
+    },
+    
+    loadDrawing() {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+      input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            this.loadDrawingFromData(e.target.result);
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      input.click();
+    },
+    
+    loadDrawingFromData(dataURL) {
+      const img = new Image();
+      img.onload = () => {
+        this.clearCanvas();
+        this.ctx.drawImage(img, 0, 0);
+      };
+      img.src = dataURL;
+    },
+    
+    
+    getFullCode() {
+      if (!this.selectedStartPosition || !this.strokeType) return '';
+      
+      // Kürzel-Mapping für Schnittoptionen
+      const spinCodeMap = {
+        'Unterschnitt': 'US',
+        'Überschnitt': 'OS', 
+        'Seitschnitt': 'SR',
+        'Seitunterschnitt': 'SU',
+        'Gegenläufer': 'GL'
+      };
+      
+      // Label-Mapping für Zielpositionen
+      const targetLabelMap = {
+        '1': 'VH L', '2': 'M L', '3': 'RH L',
+        '4': 'VH H', '5': 'M H', '6': 'RH H',
+        '7': 'VH K', '8': 'M K', '9': 'RH K'
+      };
+      
+      let code = `${this.selectedStartPosition} ${this.strokeType}`;
+      if (this.spinType) {
+        const spinCode = spinCodeMap[this.spinType] || this.spinType;
+        code += ` ${spinCode}`;
+      }
+      if (this.targetPosition) {
+        const targetLabel = targetLabelMap[this.targetPosition] || this.targetPosition;
+        code += ` → ${targetLabel}`;
+      }
+      
+      // Zusätzliche Schläge hinzufügen
+      if (this.additionalStrokes.length > 0) {
+        this.additionalStrokes.forEach(stroke => {
+          const targetLabel = targetLabelMap[stroke.targetPosition] || stroke.targetPosition;
+          code += ` / ${stroke.side} ${stroke.type} → ${targetLabel}`;
+        });
+      }
+      
+      return code;
+    },
+    
+    getFullTitle() {
+      if (!this.selectedStartPosition || !this.strokeType) return '';
+      
+      const strokeName = this.strokeType === 'VH' ? 'Vorhand' : 'Rückhand';
+      let title = `Aufschlag ${strokeName}`;
+      if (this.spinType) {
+        title = `Aufschlag ${strokeName} ${this.spinType}`;
+      }
+      if (this.targetPosition) {
+        // Ausgeschriebene Beschreibungen für Zielpositionen
+        const targetDescriptionMap = {
+          '1': 'Vorhand Lang', '2': 'Mitte Lang', '3': 'Rückhand Lang',
+          '4': 'Vorhand Halblang', '5': 'Mitte Halblang', '6': 'Rückhand Halblang',
+          '7': 'Vorhand Kurz', '8': 'Mitte Kurz', '9': 'Rückhand Kurz'
+        };
+        const targetDescription = targetDescriptionMap[this.targetPosition] || this.targetPosition;
+        title += ` → ${targetDescription}`;
+      }
+      
+      // Zusätzliche Schläge hinzufügen
+      if (this.additionalStrokes.length > 0) {
+        this.additionalStrokes.forEach(stroke => {
+          const strokeNameMap = {
+            'US': 'Schupf', 'OS': 'Konter', 'TS': 'Topspin', 'FL': 'Flip', 'BL': 'Block'
+          };
+          const sideNameMap = {
+            'VH': 'Vorhand', 'RH': 'Rückhand'
+          };
+          const targetDescriptionMap = {
+            '1': 'Vorhand Lang', '2': 'Mitte Lang', '3': 'Rückhand Lang',
+            '4': 'Vorhand Halblang', '5': 'Mitte Halblang', '6': 'Rückhand Halblang',
+            '7': 'Vorhand Kurz', '8': 'Mitte Kurz', '9': 'Rückhand Kurz'
+          };
+          const strokeName = strokeNameMap[stroke.type] || stroke.type;
+          const sideName = sideNameMap[stroke.side] || stroke.side;
+          const targetDescription = targetDescriptionMap[stroke.targetPosition] || stroke.targetPosition;
+          title += ` / ${sideName} ${strokeName} → ${targetDescription}`;
+        });
+      }
+      
+      return title;
+    },
+    
+    addNextStroke() {
+      if (!this.nextStrokeTargetPosition) return;
+      
+      // Neuen Schlag zur Liste hinzufügen
+      this.additionalStrokes.push({
+        side: this.nextStrokeSide,
+        type: this.nextStrokeType,
+        targetPosition: this.nextStrokeTargetPosition,
+        counter: this.exerciseCounter + this.additionalStrokes.length + 1
+      });
+      
+      // Counter erhöhen
+      this.exerciseCounter++;
+      
+      // Textfelder aktualisieren
+      this.updateTextFields();
+      
+      // Canvas neu zeichnen
+      this.drawCourt();
+    },
+    
+    updateTextFields() {
+      if (!this.selectedStartPosition || !this.strokeType) return;
+      
+      const code = this.getFullCode();
+      const title = this.getFullTitle();
+      const description = `Tischtennis-Übung: ${title} von Position ${this.selectedStartPosition}`;
+      
+      // Event an Parent-Komponente senden
+      this.$emit('update-fields', {
+        code: code,
+        name: title,
+        description: description
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.court-drawing-tool {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 1rem;
+  background: white;
+  margin: 1rem 0;
+}
+
+.tool-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.tool-header h4 {
+  margin: 0;
+  color: #333;
+}
+
+.tool-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.canvas-container {
+  text-align: center;
+  margin: 1rem 0;
+  border: 2px solid #ddd;
+  border-radius: 4px;
+  background: #f9f9f9;
+  padding: 0.5rem;
+}
+
+canvas {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: crosshair;
+  background: white;
+}
+
+
+.btn-small {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  color: white;
+  border-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
+  border-color: #5a6268;
+}
+
+input[type="color"] {
+  width: 40px;
+  height: 30px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type="range"] {
+  width: 100px;
+}
+
+.exercise-selection {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.exercise-selection h5 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+
+.selection-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.stroke-selection {
+  margin-top: 0;
+}
+
+.stroke-selection label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #495057;
+}
+
+.stroke-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.spin-selection {
+  margin-top: 0;
+}
+
+.spin-selection label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #495057;
+}
+
+.spin-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.additional-strokes {
+  margin-top: 1rem;
+}
+
+.next-stroke-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.next-stroke-type {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.next-stroke-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.exercise-info {
+  background: white;
+  padding: 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.exercise-info p {
+  margin: 0.25rem 0;
+  font-size: 0.9rem;
+}
+</style>
diff --git a/frontend/src/views/PredefinedActivities.vue b/frontend/src/views/PredefinedActivities.vue
index 2ceb3b5..b9aee47 100644
--- a/frontend/src/views/PredefinedActivities.vue
+++ b/frontend/src/views/PredefinedActivities.vue
@@ -56,7 +56,7 @@
           </label>
           <div class="image-section">
             <h4>Bild hinzufügen</h4>
-            <p class="image-help">Du kannst entweder einen Link zu einem Bild eingeben oder ein Bild hochladen:</p>
+            <p class="image-help">Du kannst entweder einen Link zu einem Bild eingeben, ein Bild hochladen oder eine Übungszeichnung erstellen:</p>
             
             <label>Bild-Link (optional)
               <input type="text" v-model="editModel.imageLink" placeholder="z.B. https://example.com/bild.jpg oder /api/predefined-activities/:id/image/:imageId" />
@@ -74,6 +74,16 @@
               </p>
             </div>
 
+            <!-- Zeichen-Tool -->
+            <div class="drawing-section">
+              <h5>Übungszeichnung erstellen</h5>
+              <CourtDrawingTool 
+                v-model="editModel.drawingData" 
+                @save="onDrawingSave"
+                @update-fields="onUpdateFields"
+              />
+            </div>
+
             <div class="image-list" v-if="images && images.length">
               <h5>Hochgeladene Bilder:</h5>
               <div class="image-grid">
@@ -97,9 +107,13 @@
 
 <script>
 import apiClient from '../apiClient.js';
+import CourtDrawingTool from '../components/CourtDrawingTool.vue';
 
 export default {
   name: 'PredefinedActivities',
+  components: {
+    CourtDrawingTool
+  },
   data() {
     return {
       activities: [],
@@ -164,6 +178,7 @@ export default {
         duration: null,
         durationText: '',
         imageLink: '',
+        drawingData: '',
       };
     },
     cancel() {
@@ -220,6 +235,22 @@ export default {
       if (!confirm('Alle Aktivitäten mit identischem Namen werden zusammengeführt. Fortfahren?')) return;
       await apiClient.post('/predefined-activities/deduplicate', {});
       await this.reload();
+    },
+    onDrawingSave(drawingData) {
+      if (this.editModel) {
+        this.editModel.drawingData = drawingData;
+        // Automatisch als Bild-Link setzen, wenn es eine Zeichnung gibt
+        if (drawingData && !this.editModel.imageLink) {
+          this.editModel.imageLink = drawingData;
+        }
+      }
+    },
+    onUpdateFields(fields) {
+      if (this.editModel) {
+        this.editModel.code = fields.code;
+        this.editModel.name = fields.name;
+        this.editModel.description = fields.description;
+      }
     }
   },
   async mounted() {
@@ -354,5 +385,19 @@ input[type="text"], input[type="number"], textarea { width: 100%; }
 .btn-danger:hover {
   background: #c82333;
 }
+
+.drawing-section {
+  margin: 1rem 0;
+  padding: 1rem;
+  background: white;
+  border-radius: var(--border-radius);
+  border: 1px solid #ddd;
+}
+
+.drawing-section h5 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1rem;
+}
 </style>