added distance and a try to get the hit ring in Dart Picker

frontend/src/css/app.scss

@@ -19,8 +19,7 @@ img {
 }
 
 .dartBoard {
-    width: 90%;
-    max-width: 600px;
+    height: 70%;
 }
 
 .dartBoardDiv {

frontend/src/pages/testDartPickerPage.vue

@@ -2,14 +2,14 @@
   <img 
     src = "~assets//dart.svg" 
     class = "dart" 
-    ref = "mySvg"
     :style = "{ top: pos.top + 'px', left: pos.left + 'px' }" 
   />
 
   <div class = "dartBoardDiv" v-touch-pan.prevent.mouse = "onPan">
-    <p>X: {{ posRelative.top }} Y: {{ posRelative.left }}</p>
+    <p>X: {{ posRelative.top }} | Y: {{ posRelative.left }}</p>
+    <p>distance: {{ distanceFromCenter }} | dartRing: {{ dartRing }}</p>
     
-    <img id = "dartBoard" src = "~assets/dartBoard.svg" />
+    <img id = "dartBoard" class = "dartBoard" src = "~assets/dartBoard.svg" />
   </div>
 </template>
 
@@ -19,6 +19,16 @@ import { ref } from 'vue'
 
 const pos = ref({ top: 0, left: 0 })
 const posRelative = ref({ top: 0, left: 0 })
+const distanceFromCenter = ref(null)
+const dartRing = ref(null)
+
+function distanceBetween(x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
 
 function onPan({ position, isFinal }) {
   const offset = -50;
@@ -36,6 +46,30 @@ function onPan({ position, isFinal }) {
   posRelative.value.top = Math.round(position.top - centerTop + offset)
   posRelative.value.left = Math.round(position.left - centerLeft)
 
+  const distance = distanceBetween(pos.value.left, pos.value.top, centerLeft, centerTop)
+
+  if (distance < dartRect.height / 2) {
+    distanceFromCenter.value = distance
+
+    if (distance < dartRect.height / 45) {
+      dartRing.value = 0
+    } else if (distance < dartRect.height / 20) {
+      dartRing.value = 1
+    } else if (distance < dartRect.height / 3.5) {
+      dartRing.value = 2
+    } else if (distance < dartRect.height / 3.2) {
+      dartRing.value = 3
+    } else if (distance < dartRect.height / 2.16) {
+      dartRing.value = 4
+    } else if (distance < dartRect.height) {
+      dartRing.value = 5
+    }
+
+  } else {
+    distanceFromCenter.value = null
+    dartRing.value = null
+  }
+
   if (isFinal) {
     console.log("end")
   }