Added mockup impact selection on scores

score/templates/score/edit.html

@@ -8,35 +8,102 @@
 
 {% block scripts %}
 <script>
-  $(document).ready(() => {
-    $('#target-svg').click((e) => console.log(e));
+$(document).ready(() => {
+  const TARGET_EVENTS = $('.target-events');
+  const SCORES = [
+    { name: 'X', maxRadius: 0.025 },
+    { name: '10', maxRadius: 0.05 },
+    { name: '9', maxRadius: 0.1 },
+    { name: '8', maxRadius: 0.15 },
+    { name: '7', maxRadius: 0.2 },
+    { name: '6', maxRadius: 0.25 },
+    { name: '5', maxRadius: 0.3 },
+    { name: '4', maxRadius: 0.35 },
+    { name: '3', maxRadius: 0.4 },
+    { name: '2', maxRadius: 0.45 },
+    { name: '1', maxRadius: 0.5 }
+  ];
+
+  function score(radius) {
+    for (let score of SCORES) {
+      if (radius <= score.maxRadius) {
+        return score.name;
+      }
+    }
+    return 'M';
+  };
+
+  TARGET_EVENTS.on('click', (e) => {
+    const targetRadius = TARGET_EVENTS.width();
+
+    const x = -0.5 + e.originalEvent.offsetX / targetRadius;
+    const y = -0.5 + e.originalEvent.offsetY / targetRadius;
+
+    const radius = Math.sqrt(x * x + y * y);
+
+    const marker = document.createElement("div");
+    marker.className = "score-marker teal";
+    marker.style.left = (x + 0.5) * 100 + "%";
+    marker.style.top = (y + 0.5) * 100 + "%";
+
+    TARGET_EVENTS.parent().append(marker);
+
+    console.log(x, y, score(radius));
   });
+});
 </script>
 {% endblock %}
 
 {% block style %}
 <style>
-.target > object {
+.target-container {
   max-width: 450px;
   max-height: 450px;
   width: 100%;
   height: 100%;
   display: inline-block;
   margin: 1rem;
+  position: relative;
+}
+
+.target-events, #target-svg {
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.target-events {
+  position: absolute;
+  z-index: 1;
 }
 
 .target {
   text-align: center;
 }
+
+.score-marker {
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  margin-top: -.5em;
+  margin-left: -.5em;
+  border-radius: .5em;
+  border: 1px solid black;
+  z-index: 2;
+}
 </style>
 {% endblock %}
 
 {% block content %}
 <h1 class="center edit-arrowcount title">{% trans "Update score" %}</h1>
 <div class="card-panel grey lighten-1 target">
-  <object id="target-svg"
-    type="image/svg+xml" data="{% static "img/WA_target.svg" %}">
-  </object>
+  <div class='target-container'>
+    <div class='target-events'></div>
+    <object id="target-svg"
+      type="image/svg+xml" data="{% static "img/WA_target.svg" %}">
+    </object>
+  </div>
 </div>
 <div class="card grey lighten-2">
   <div class="card-content center">