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

2025-09-09 22:45:02 +02:00
parent f1e44417fd
commit c6affc4181
4 changed files with 53 additions and 73 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,6 @@
      "hasInstallScript": true,
      "dependencies": {
        "@quasar/extras": "^1.16.4",
-        "@vueuse/gesture": "^2.0.0",
        "quasar": "^2.16.0",
        "vue": "^3.4.18",
        "vue-router": "^4.0.0"
@@ -2072,53 +2071,6 @@
      "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
      "license": "MIT"
    },
-    "node_modules/@vueuse/gesture": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/gesture/-/gesture-2.0.0.tgz",
-      "integrity": "sha512-+F0bhhd8j+gxHaXG4fJgfokrkFfWenQ10MtrWOJk68B5UaTwtJm4EpsZFiVdluA3jpKExG6H+HtroJpvO7Qx0A==",
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^3.6.0",
-        "consola": "^3.2.3",
-        "upath": "^2.0.1",
-        "vue-demi": "*"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.4.1",
-        "vue": "^2.0.0 || >=3.0.0-rc.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vueuse/gesture/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/abort-controller": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -2255,6 +2207,7 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "normalize-path": "^3.0.0",
@@ -2408,6 +2361,7 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@@ -2490,6 +2444,7 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@@ -2707,6 +2662,7 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "anymatch": "~3.1.2",
@@ -2950,15 +2906,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/consola": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
-      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
-      "license": "MIT",
-      "engines": {
-        "node": "^14.18.0 || >=16.10.0"
-      }
-    },
    "node_modules/content-disposition": {
      "version": "0.5.4",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -3856,6 +3803,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -4001,6 +3949,7 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@@ -4095,6 +4044,7 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "is-glob": "^4.0.1"
@@ -4360,6 +4310,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "binary-extensions": "^2.0.0"
@@ -4388,6 +4339,7 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -4407,6 +4359,7 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@@ -4448,6 +4401,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@@ -5024,6 +4978,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -5350,6 +5305,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@@ -5645,6 +5601,7 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "picomatch": "^2.2.1"
@@ -6887,6 +6844,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
@@ -7014,16 +6972,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/upath": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
-      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4",
-        "yarn": "*"
-      }
-    },
    "node_modules/update-browserslist-db": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,6 @@
  },
  "dependencies": {
    "@quasar/extras": "^1.16.4",
-    "@vueuse/gesture": "^2.0.0",
    "quasar": "^2.16.0",
    "vue": "^3.4.18",
    "vue-router": "^4.0.0"
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -19,8 +19,7 @@ img {
 }

 .dartBoard {
-    width: 90%;
-    max-width: 600px;
+    height: 70%;
 }

 .dartBoardDiv {
--- a/frontend/src/pages/testDartPickerPage.vue
+++ b/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")
  }