#!mojo mojo:sky_viewer
<sky>
<import src="/packages/sky/framework/debug/shake-to-reload.sky" />
<style>
dot {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #00FF00;
    border-radius: 5px;
    opacity: .75;
}

log {
    display: paragraph;
    margin-top: 50px;
}
</style>
<log>Touch the screen!</log>
<script>
import "dart:sky";

// Material design colors. :p
List<String> colors = [
  "#009688",
  "#FFC107",
  "#9C27B0",
  "#03A9F4",
  "#673AB7",
  "#CDDC39",
];

Element whichDot(event) {
  return document.querySelector('dot[id="${event.pointer}"]');
}

void moreDots(event) {
  Element dot = document.createElement('dot');
  dot.setAttribute('id', "${event.pointer}");
  dot.style['background-color'] = colors[event.pointer.remainder(colors.length)];
  document.querySelector('sky').appendChild(dot);
  runToTheCenter(event);
}

void goAway(event) {
  whichDot(event).remove();
}

void stopDots(event) {
  for (Element e in document.querySelectorAll('dot'))
    e.remove();
}

void runToTheCenter(event) {
  double radius = (5 + (95 * event.pressure));
  Element dot = whichDot(event);
  dot.style["transform"] = "translate(${event.x-radius}px,${event.y-radius}px)";
  dot.style["width"] = "${2 * radius}px";
  dot.style["height"] = "${2 * radius}px";
  dot.style["border-radius"] = "${radius}px";
}

void main() {
  document.addEventListener("pointerdown", moreDots);
  document.addEventListener("pointermove", runToTheCenter);
  document.addEventListener("pointerup", goAway);
  document.addEventListener("pointercancel", stopDots);
}
</script>
</sky>