JSFiddle - React, Tailwind, and code Playground

by rchern

JavaScript

var middleScreenPoint = {}, 
    distanceScale = 1000, 
    field = { 
        width: 825, 
        height: 181, 
        horizontalScale: 1135 / 825, 
        verticalScale: 249 / 181, 
        centerYAdjustment: 32 
    },
    offense = {
        test: { preGamePosition: { x: -1000, y: -1000 } },
        test2: { preGamePosition: { x: 0, y: 0 } },
        test1: { preGamePosition: { x: 1000, y: 1000 } },
        offensiveLeftForward: { preGamePosition: { x: -1075, y: -1250 } },
        offensiveCenterForward: { preGamePosition: { x: -1075, y: -1150 } },
        offensiveRightForward: { preGamePosition: { x: -1075, y: -1050 } }
    };

var calculatePoint = function (elementId, coordinate) {
    var x = coordinate.x / distanceScale * field.width / 2;
    var y = coordinate.y / distanceScale * field.height;
    
    y = y > 0 ? y * field.verticalScale : y;
    
    var howFarDownAmI = (coordinate.y + distanceScale) / (distanceScale * 2);
    var howFarOverAmI = (coordinate.x / distanceScale);
    var xOffset = (field.width * field.horizontalScale - field.width) / 2 * howFarDownAmI * howFarOverAmI;
    x += xOffset;
    
    var objectDimensions = { x: 55, y: 69 };
    var objectOffset = { x: objectDimensions.x / 2, y: objectDimensions.y / 2 };
    console.log({ pointWithoutOffset: { x: x, y: y }, howFarDownAmI: howFarDownAmI, howFarOverAmI: howFarOverAmI });
    var calculatedCoordinate = { x: x + middleScreenPoint.x - objectOffset.x, y: y + middleScreenPoint.y - field.centerYAdjustment - objectOffset.y };
    
    return calculatedCoordinate;
};

var calculateCoordinate = function(elementId, point) {
    var objectDimensions = { x: 55, y: 69 };
    var objectOffset = { x: objectDimensions.x / 2, y: objectDimensions.y / 2 };
    
    var pointWithoutOffset = { x: point.x - middleScreenPoint.x + objectOffset.x, y: point.y - middleScreenPoint.y + field.centerYAdjustment + objectOffset.y };
    
    pointWithoutOffset.y = pointWithoutOffset.y > 0 ?...