Dart Picker is working now

frontend/src/pages/testDartPickerPage.vue

@@ -8,6 +8,8 @@
   <div class = "dartBoardDiv" v-touch-pan.prevent.mouse = "onPan">
     <p>X: {{ posRelative.top }} | Y: {{ posRelative.left }}</p>
     <p>distance: {{ distanceFromCenter }} | dartRing: {{ dartRing }}</p>
+    <p>degrees: {{ degrees }}° | field: {{ field }}</p>
+    <p>id: {{ selected.id }} | name: {{ selected.name }} | points: {{ selected.points }}</p>
     
     <img id = "dartBoard" class = "dartBoard" src = "~assets/dartBoard.svg" />
   </div>
@@ -17,10 +19,359 @@
 
 import { ref } from 'vue'
 
-const pos = ref({ top: 0, left: 0 })
-const posRelative = ref({ top: 0, left: 0 })
+const pos = ref({ top: null, left: null })
+const posRelative = ref({ top: null, left: null })
 const distanceFromCenter = ref(null)
 const dartRing = ref(null)
+const degrees = ref(null)
+const field = ref(null)
+const selected = ref({ id: null, name: null, points: null })
+
+const fields = {
+  //
+  // Middle
+  //
+  0: {
+    name: "Bulls Eye",
+    points: 50
+  },
+  1: {
+    name: "Bull",
+    points: 25
+  },
+  //
+  // 1 Ring
+  //
+  100: {
+    name: "20",
+    points: 20
+  },
+  101: {
+    name: "1",
+    points: 1
+  },
+  102: {
+    name: "18",
+    points: 18
+  },
+  103: {
+    name: "4",
+    points: 4
+  },
+  104: {
+    name: "13",
+    points: 13
+  },
+  105: {
+    name: "6",
+    points: 6
+  },
+  106: {
+    name: "10",
+    points: 10
+  },
+  107: {
+    name: "15",
+    points: 15
+  },
+  108: {
+    name: "2",
+    points: 2
+  },
+  109: {
+    name: "17",
+    points: 17
+  },
+  110: {
+    name: "3",
+    points: 3
+  },
+  111: {
+    name: "19",
+    points: 19
+  },
+  112: {
+    name: "7",
+    points: 7
+  },
+  113: {
+    name: "16",
+    points: 16
+  },
+  114: {
+    name: "8",
+    points: 8
+  },
+  115: {
+    name: "11",
+    points: 11
+  },
+  116: {
+    name: "14",
+    points: 14
+  },
+  117: {
+    name: "9",
+    points: 9
+  },
+  118: {
+    name: "12",
+    points: 12
+  },
+  119: {
+    name: "5",
+    points: 5
+  },
+  //
+  // 2 Ring
+  //
+  200: {
+    name: "Trebel 20",
+    points: 20
+  },
+  201: {
+    name: "Trebel 1",
+    points: 1
+  },
+  202: {
+    name: "Trebel 18",
+    points: 18
+  },
+  203: {
+    name: "Trebel 4",
+    points: 4
+  },
+  204: {
+    name: "Trebel 13",
+    points: 13
+  },
+  205: {
+    name: "Trebel 6",
+    points: 6
+  },
+  206: {
+    name: "Trebel 10",
+    points: 10
+  },
+  207: {
+    name: "Trebel 15",
+    points: 15
+  },
+  208: {
+    name: "Trebel 2",
+    points: 2
+  },
+  209: {
+    name: "Trebel 17",
+    points: 17
+  },
+  210: {
+    name: "Trebel 3",
+    points: 3
+  },
+  211: {
+    name: "Trebel 19",
+    points: 19
+  },
+  212: {
+    name: "Trebel 7",
+    points: 7
+  },
+  213: {
+    name: "Trebel 16",
+    points: 16
+  },
+  214: {
+    name: "Trebel 8",
+    points: 8
+  },
+  215: {
+    name: "Trebel 11",
+    points: 11
+  },
+  216: {
+    name: "Trebel 14",
+    points: 14
+  },
+  217: {
+    name: "Trebel 9",
+    points: 9
+  },
+  218: {
+    name: "Trebel 12",
+    points: 12
+  },
+  219: {
+    name: "Trebel 5",
+    points: 5
+  },
+  //
+  // 3 Ring
+  //
+  300: {
+    name: "20",
+    points: 20
+  },
+  301: {
+    name: "1",
+    points: 1
+  },
+  302: {
+    name: "18",
+    points: 18
+  },
+  303: {
+    name: "4",
+    points: 4
+  },
+  304: {
+    name: "13",
+    points: 13
+  },
+  305: {
+    name: "6",
+    points: 6
+  },
+  306: {
+    name: "10",
+    points: 10
+  },
+  307: {
+    name: "15",
+    points: 15
+  },
+  308: {
+    name: "2",
+    points: 2
+  },
+  309: {
+    name: "17",
+    points: 17
+  },
+  310: {
+    name: "3",
+    points: 3
+  },
+  311: {
+    name: "19",
+    points: 19
+  },
+  312: {
+    name: "7",
+    points: 7
+  },
+  313: {
+    name: "16",
+    points: 16
+  },
+  314: {
+    name: "8",
+    points: 8
+  },
+  315: {
+    name: "11",
+    points: 11
+  },
+  316: {
+    name: "14",
+    points: 14
+  },
+  317: {
+    name: "9",
+    points: 9
+  },
+  318: {
+    name: "12",
+    points: 12
+  },
+  319: {
+    name: "5",
+    points: 5
+  },
+  //
+  // 4 Ring
+  //
+  400: {
+    name: "Double 20",
+    points: 20
+  },
+  401: {
+    name: "Double 1",
+    points: 1
+  },
+  402: {
+    name: "Double 18",
+    points: 18
+  },
+  403: {
+    name: "Double 4",
+    points: 4
+  },
+  404: {
+    name: "Double 13",
+    points: 13
+  },
+  405: {
+    name: "Double 6",
+    points: 6
+  },
+  406: {
+    name: "Double 10",
+    points: 10
+  },
+  407: {
+    name: "Double 15",
+    points: 15
+  },
+  408: {
+    name: "Double 2",
+    points: 2
+  },
+  409: {
+    name: "Double 17",
+    points: 17
+  },
+  410: {
+    name: "Double 3",
+    points: 3
+  },
+  411: {
+    name: "Double 19",
+    points: 19
+  },
+  412: {
+    name: "Double 7",
+    points: 7
+  },
+  413: {
+    name: "Double 16",
+    points: 16
+  },
+  414: {
+    name: "Double 8",
+    points: 8
+  },
+  415: {
+    name: "Double 11",
+    points: 11
+  },
+  416: {
+    name: "Double 14",
+    points: 14
+  },
+  417: {
+    name: "Double 9",
+    points: 9
+  },
+  418: {
+    name: "Double 12",
+    points: 12
+  },
+  419: {
+    name: "Double 5",
+    points: 5
+  },
+}
 
 function distanceBetween(x1, y1, x2, y2) {
   const dx = x2 - x1;
@@ -29,6 +380,16 @@ function distanceBetween(x1, y1, x2, y2) {
   return Math.sqrt(dx * dx + dy * dy);
 }
 
+function degreesBetweenPoints(x1, y1, x2, y2) {
+  let degrees = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI)
+  degrees = degrees - 90 + 18/2
+  if (degrees < 0) degrees += 360
+  return degrees
+  // Damit ich nicht vergesse woher die zahlen kommen 😅:
+  // 90 da sonst die 0° rechts währe
+  // 18 da 360° / 20 (Dart hat 20 felder rund um wehn ich zhälen kann)
+  // /2 da um ein halbes feld zurück zu gehen da ich zu fauel bin das später mit einzurechen :D
+}
 
 function onPan({ position, isFinal }) {
   const offset = -50;
@@ -47,24 +408,52 @@ function onPan({ position, isFinal }) {
   posRelative.value.left = Math.round(position.left - centerLeft)
 
   const distance = distanceBetween(pos.value.left, pos.value.top, centerLeft, centerTop)
+  degrees.value = degreesBetweenPoints(pos.value.left, pos.value.top, centerLeft, centerTop)
+  field.value = Math.floor(degrees.value/18)
 
   if (distance < dartRect.height / 2) {
     distanceFromCenter.value = distance
+    var id
 
+    // ich muss noch die richtigen werte aus der svg ausrechnen :C
     if (distance < dartRect.height / 45) {
       dartRing.value = 0
+      id = String(0)
+
     } else if (distance < dartRect.height / 20) {
       dartRing.value = 1
+      id = String(1)
+
     } else if (distance < dartRect.height / 3.5) {
       dartRing.value = 2
+      id = String(1)
+      if (field.value < 10) id = id + String(0)
+      id = id + String(field.value)
+
     } else if (distance < dartRect.height / 3.2) {
       dartRing.value = 3
+      id = String(2)
+      if (field.value < 10) id = id + String(0)
+      id = id + String(field.value)
+
     } else if (distance < dartRect.height / 2.16) {
       dartRing.value = 4
+      id = String(3)
+      if (field.value < 10) id = id + String(0)
+      id = id + String(field.value)
+
     } else if (distance < dartRect.height) {
       dartRing.value = 5
+      id = String(4)
+      if (field.value < 10) id = id + String(0)
+      id = id + String(field.value)
+
     }
 
+    selected.value.id = id
+    selected.value.name = fields[Number(id)].name
+    selected.value.points = fields[Number(id)].points
+    
   } else {
     distanceFromCenter.value = null
     dartRing.value = null