JSFiddle - React, Tailwind, and code Playground

by amatiasq

HTML

<canvas id="canvas"></canvas>

JavaScript

class Player {

  constructor(radius) {
    this.radius = radius;
  }

  render(context) {
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;

    context.beginPath();
    context.arc(centerX, centerY, this.radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#003300';
    context.stroke();
  }
}


class FakeContext {

  constructor(context) {
    const self = this;

    this.context = context;
    this.current = [];
    this.operations = [];

    this.proxy = new Proxy({}, {
      get(target, property) {
        return (...args) => self.register('method', property, args);
      },

      set(target, property, value) {
        self.register('set', property, value);
        return value;
      },
    });
  }

  register(type, member, value) {
    this.operations.push({ type, member, value });
  }

  hasChanges() {
    const { operations, current } = this;

    if (operations.length !== current.length) {
      return true;
    }

    return operations.some((operation, index) => {
      const entry = current[index];

      if (operation.type !== entry.type || operation.member !== entry.member) {
        return true;
      }

      if (operation.type === 'set') {
        return operation.value !== entry.value;
      }

      return operation.value.some((arg, index) => arg !== entry.value[index])
    });
  }

  apply() {
    if (!this.hasChanges()) {
      return;
    }

    this.operations.forEach(operation => {
      if (operation.type === 'set') {
        this.context[operation.member] = operation.value;
      } else {
        this.context[operation.member](...operation.value);
      }
    });

    const { current } = this;
    current.length = 0;

    this.current = this.operations;
    this.operations = current;
  }

  clear() {
    this.operations.length = 0;
  }
}


const player = new Player(70);
const canvas = document.querySelector('#canvas');
const...