JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

HTML

a - b * (c - d)

a - b * c - b * d

JavaScript

function Avatar(props) {
	this.props = props;
  
	this.face = new Raster(props.face.id);
  this.scleras = new Raster(props.scleras.id);
  this.eyes = {
  	left: new Raster(props.eyes.left.id),
    right: new Raster(props.eyes.right.id),
  };
  
  this.setScale();
  this.setPosition();
}

Avatar.prototype.getSize = function() {
	return this.face.bounds.width;
}

Avatar.prototype.setPosition = function(position) {
	var value = position || this.props.position;
  
  if (!value) return;
	if (typeof value === 'function') { value = value(); }
    
	this.face.position = this.scleras.position = value;
  for (var k in this.eyes) {
  	value.forEach(function(c, i) {
    	this.eyes[k].position[i] = c - this.size * (0.5 - this.props.eyes[k].offset[i]);
    });
  }
}

Avatar.prototype.setScale = function(scale) {
	var value = scale || this.props.scale;
  
  if (!value) return;
  if (typeof value === 'function') { value = value(); }

	this.face.scale(value);
  this.scleras.scale(value);
  this.eyes.left.scale(value);
  this.eyes.right.scale(value);
}

function Watcher(props) {
	this.props = props;

	this.eyes = {
  	left: {
    	image: props.avatar.eyes.left,
      bounds: new Path.Ellipse({
      	center: props.avatar.eyes.left.position + new Point(props.bounds.offset),
        size: props.bounds.size,
      })
    }
  }
}

function WatcherEye(props) {
	this.image = props.image
}

function Watcher(props) {
	this.props = props;

	this.face = new Raster(props.face.id);
  this.scleras = new Raster(props.scleras.id);
  this.eyes = {
  	left: new Raster(props.eyes.left.id),
    right: new Raster(props.eyes.right.id),
  };
  
  this.setScale();
  this.setPosition();

	this.size = this.face.bounds.width;
}

Watcher.prototype.setScale = function(scale) {
	var value = scale || this.props.scale;
  
  if (!value) return;
  if (typeof value === 'function') { value = value(); }

	this.face.scale(value);
  this.scleras.scale(value);
  this.eyes.left.scale(value);
 ...