<template>  
  <img 
    src = "~assets//dart.svg" 
    class = "dart" 
    :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>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>
</template>

<script setup>

import { ref } from 'vue'

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;
  const dy = y2 - y1;
  
  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;

  pos.value.top = position.top + offset
  pos.value.left = position.left

  
  const dartBoard = document.getElementById('dartBoard')
  const dartRect = dartBoard.getBoundingClientRect()

  const centerTop = dartRect.top + dartRect.height / 2
  const centerLeft = dartRect.left + dartRect.width / 2

  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)
  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
  }

  if (isFinal) {
    console.log("end")
  }
}

</script>