Disk game proof-of-concept

disk.js

// http://maxwellito.github.io/vivus/
// animate the appearance / disappearance? 

// eight static 
// two - opposite direction
// three in a circle
// randomly moving clickers
// shrinking / growing
import { SVG, easing, List, Runner, Timeline } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.topath.js' // might need spinning disks

const vv = visualViewport;
const draw = SVG().addTo("body");

const [x,y] = [vv.width/2, vv.height/2];
const diameter = Math.min(vv.height, vv.width) / 3;
const circumference = Math.PI * diameter;

const disk = (color, ease) => {
  const base = draw
    .circle(diameter)
    .center(x,y)
    .fill(color)
    .stroke('black');
  
  const progress = draw
    .circle(diameter)
    .center(x,y)
    .fill({opacity: 0})
    .stroke({
      width: 5,
      color: 'green',
      dasharray: circumference,
      dashoffset: circumference
    });

  const list = new List([base, progress]);

  // you need the 100ms wait time so that it actually 
  // stops at 1 and 0 instead of stepping over them
  list.runner = progress
    .animate(5000)
    .ease(ease)
    .stroke({dashoffset: 0})
    .loop(true, true, 100)
    .during(function() {
      if (this.position() == 1) {
        this.timeline().pause();
      }
    });
  
  list.timeline = progress
    .timeline()
    .pause();
  
  return list;
}

const touch = () => {
  const touchDisk = disk('#69D2E7');
  touchDisk.timeline.reverse();

  const touching = () => {
    touchDisk.timeline.reverse();
    touchDisk.timeline.play();
  };

  touchDisk.mouseover(touching);
  touchDisk.mouseout(touching);
  touchDisk.touchstart(touching);
  touchDisk.touchend(touching);

  return touchDisk;
};

// ugh. there's gotta be a better way ...
const click = () => {
  let timeout;
  const clickDisk = disk('#F38630', '-');
  const time = (t) => clickDisk.runner.time(t);

  const restart = () => {
    timeout = setTimeout(() => {
      time(time() - 1000);
      
      if (time() > 0) {
        restart();
      }
    }, 750);
  }

  clickDisk.click(function() {
    clearTimeout(timeout);    
    if (time() < 5000) {
      time(time() + 1000);
    }
    restart();
  });

  return clickDisk;
};

click();