☰

Rocketer Utilities

Adds a lot new settings to the game https://rocketer.glitch.me/

当前为 2023-11-30 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Rocketer Utilities
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Adds a lot new settings to the game https://rocketer.glitch.me/
  6. // @author       DB423 (Impsaccrain)
  7. // @match        http*://rocketer.glitch.me/*
  8. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  9. // @grant        none
  10. // @license      DISTRIBUTION
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     localStorage.RocketerUtilities = localStorage.RocketerUtilities || JSON.stringify({ Options: { AuraState: 1, AutoRespawn: 0, Theme: 0 }, version: 1.3 });
  17.  
  18.     if (JSON.parse(localStorage.RocketerUtilities).version != 1.3) {
  19.         localStorage.RocketerUtilities = JSON.stringify({ Options: { AuraState: 1, AutoRespawn: 0, Theme: 0 }, version: 1.3 });
  20.     };
  21.  
  22.     const Utils = JSON.parse(localStorage.RocketerUtilities);
  23.     const Options = Utils.Options;
  24.  
  25.     var settings = document.getElementById('settingsPopup');
  26.     var closesettingspopup = document.getElementById('closeSettingsPopup');
  27.     var themes = document.getElementById('theme');
  28.     changetheme = function (selectObject) {
  29.         colortheme = selectObject.value;
  30.         let newutils = JSON.parse(localStorage.RocketerUtilities);
  31.         newutils.Options.Theme = document.getElementById('theme').selectedIndex;
  32.         newutils = JSON.stringify(newutils);
  33.         localStorage.RocketerUtilities = newutils;
  34.     }
  35.     var playershape = 'circle';
  36.  
  37.     var whitetheme = document.createElement('option');
  38.     whitetheme.value = 'whitetheme';
  39.     whitetheme.textContent = 'White';
  40.     themes.appendChild(whitetheme);
  41.  
  42.     var simplistic = document.createElement('option');
  43.     simplistic.value = 'simplistic';
  44.     simplistic.textContent = 'Simplistic';
  45.     themes.appendChild(simplistic);
  46.  
  47.     for (let i = 3; i < 15; i++) {
  48.         shapecolors[i].whitetheme = {
  49.             color: "#FFFFFF",
  50.             outline: "#FFFFFF",
  51.             hitcolor: "#FFFFFF",
  52.             hitoutline: "#FFFFFF",
  53.         };
  54.         shapecolors[i].simplistic = {
  55.             color: shapecolors[i].default.color,
  56.             outline: shapecolors[i].default.color,
  57.             hitcolor: shapecolors[i].default.hitcolor,
  58.             hitoutline: shapecolors[i].default.hitcolor,
  59.         };
  60.     };
  61.  
  62.     var chatstate = true;
  63.     function toggleChat() {
  64.         let chatinput = document.getElementById('chat');
  65.         chatstate = !chatstate;
  66.         if (!chatstate) {
  67.             chatinput.style.display = 'none';
  68.         } else {
  69.             chatinput.style.display = 'block';
  70.         };
  71.     };
  72.  
  73.     var aurastate = Options.AuraState == 1 ? true : false;
  74.     function toggleAura() {
  75.         aurastate = !aurastate
  76.         Options.AuraState = aurastate ? 1 : 0;
  77.         localStorage.RocketerUtilities = JSON.stringify(Utils);
  78.     };
  79.     var autorespawn = Options.AutoRespawn == 1 ? true : false;
  80.     function toggleAutoRespawn() {
  81.         autorespawn = !autorespawn
  82.         Options.AutoRespawn = autorespawn ? 1 : 0;
  83.         localStorage.RocketerUtilities = JSON.stringify(Utils);
  84.     };
  85.  
  86.     var chattoggle = document.createElement('label');
  87.     chattoggle.className = 'switch';
  88.     var cti = document.createElement('input');
  89.     cti.type = 'checkbox';
  90.     cti.checked = true;
  91.     cti.onclick = toggleChat;
  92.     var cts = document.createElement('span');
  93.     cts.className = 'slider round';
  94.     chattoggle.appendChild(cti);
  95.     chattoggle.appendChild(cts);
  96.  
  97.     var auratoggle = document.createElement('label');
  98.     auratoggle.className = 'switch';
  99.     var ati = document.createElement('input');
  100.     ati.type = 'checkbox';
  101.     ati.checked = Options.AuraState == 1 ? false : true;
  102.     ati.onclick = toggleAura;
  103.     var ats = document.createElement('span');
  104.     ats.className = 'slider round';
  105.     auratoggle.appendChild(ati);
  106.     auratoggle.appendChild(ats);
  107.  
  108.     var respawntoggle = document.createElement('label');
  109.     respawntoggle.className = 'switch';
  110.     var rti = document.createElement('input');
  111.     rti.type = 'checkbox';
  112.     rti.checked = Options.AutoRespawn == 1 ? true : false;
  113.     rti.onclick = toggleAutoRespawn;
  114.     var rts = document.createElement('span');
  115.     rts.className = 'slider round';
  116.     respawntoggle.appendChild(rti);
  117.     respawntoggle.appendChild(rts);
  118.  
  119.     var utilities = document.createElement('span');
  120.     utilities.style = 'font-weight: 700; font-size: 25px;';
  121.     utilities.textContent = 'Rocketer Utilities';
  122.  
  123.     settings.appendChild(document.createElement('br'));
  124.     settings.appendChild(document.createElement('br'));
  125.     settings.appendChild(utilities);
  126.     settings.appendChild(document.createElement('hr'));
  127.     settings.appendChild(document.createTextNode("Chat "));
  128.     settings.appendChild(chattoggle);
  129.     settings.appendChild(document.createElement('br'));
  130.     settings.appendChild(document.createElement('br'));
  131.     settings.appendChild(document.createTextNode("Invisible auras "));
  132.     settings.appendChild(auratoggle);
  133.     settings.appendChild(document.createElement('br'));
  134.     settings.appendChild(document.createElement('br'));
  135.     settings.appendChild(document.createTextNode("Auto-respawn "));
  136.     settings.appendChild(respawntoggle);
  137.  
  138.     var playershapediv = document.createElement('div');
  139.     playershapediv.appendChild(document.createElement('br'));
  140.     playershapediv.appendChild(document.createTextNode('Player shape: '));
  141.     var playershapeselect = document.createElement('select');
  142.     playershapeselect.id = 'player-shape-select'
  143.     playershapeselect.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  144.     playershapeselect.style.color = 'white';
  145.     playershapeselect.style.borderRadius = '7px';
  146.     playershapeselect.style.width = '100px';
  147.     playershapeselect.style.height = '30px';
  148.  
  149.     var playershapecircle = document.createElement('option');
  150.     playershapecircle.value = 'circle';
  151.     playershapecircle.textContent = 'Circle';
  152.     playershapeselect.appendChild(playershapecircle);
  153.  
  154.     var playershapesquare = document.createElement('option');
  155.     playershapesquare.value = 'square';
  156.     playershapesquare.textContent = 'Square';
  157.     playershapeselect.appendChild(playershapesquare);
  158.  
  159.     var playershapetriangle = document.createElement('option');
  160.     playershapetriangle.value = 'triangle';
  161.     playershapetriangle.textContent = 'Triangle';
  162.     playershapeselect.appendChild(playershapetriangle);
  163.  
  164.     playershapediv.appendChild(playershapeselect);
  165.  
  166.     setTimeout(function() {
  167.  
  168.     let changelogDisplayElement = document.getElementById('changelogDisplay');
  169.     changelogDisplayElement.appendChild(document.createElement('br'));
  170.     changelogDisplayElement.appendChild(document.createElement('br'));
  171.     let rucspan = document.createElement('span');
  172.     rucspan.id = 'rocketer-utils-changelog';
  173.     let ruc = document.createTextNode('ROCKETER UTILITIES CHANGELOG - 1.3 - 25 November 2023');
  174.     rucspan.style.color = 'orange';
  175.     rucspan.appendChild(ruc);
  176.     let rucp = document.createElement('p');
  177.     function cct(text, br) {
  178.         rucp.appendChild(document.createTextNode(text));
  179.         if (br) {
  180.             rucp.appendChild(document.createElement('br'));
  181.         };
  182.     };
  183.     cct('- FEATURE: Now added settings auto-saving', false);
  184.     rucspan.appendChild(rucp);
  185.     changelogDisplayElement.appendChild(rucspan);
  186.     themes.selectedIndex = Options.Theme;
  187.     changetheme(themes);
  188.  
  189.     }, 500);
  190.  
  191.     function newdrawplayer(canvas, object, fov, spawnProtect, playercolor, playeroutline, eternal, objectangle){//only barrels and body (no heath bars, names, and chats)
  192.     const CRTP = document.getElementById('theme').value;
  193.     //objectangle refers to angle rotated before triggering this function
  194.     //fov is clientFovMultiplier for ctx, hctx is 1
  195.       canvas.lineJoin = "round"; //make nice round corners
  196.       //draw assets below body, e.g. rammer body base
  197.       for (let assetID in object.assets){
  198.         var asset = object.assets[assetID];
  199.         if (asset.type == "under") {
  200.           if (('angle' in asset) && asset.angle != 0) {
  201.             canvas.rotate(asset.angle * Math.PI / 180);
  202.           }
  203.           canvas.translate(
  204.             (object.width / fov) * asset.x,
  205.             (object.width / fov) * asset.y
  206.           );
  207.           canvas.fillStyle = asset.color;
  208.           canvas.strokeStyle = asset.outline;
  209.           canvas.lineWidth = asset.outlineThickness / fov;
  210.           if (asset.sides == 0) {
  211.             canvas.beginPath();
  212.             canvas.arc(0, 0, (object.width / fov) * asset.size, 0, 2 * Math.PI);
  213.             canvas.fill();
  214.             if (CRTP != 'simplistic') {
  215.             canvas.stroke();
  216.             };
  217.           } else {
  218.             canvas.beginPath();
  219.             let baseSides = asset.sides;
  220.             canvas.moveTo((object.width / fov) * asset.size, 0);
  221.             for (let i = 1; i <= baseSides; i++) {
  222.               canvas.lineTo((object.width / fov) * asset.size * Math.cos((i * 2 * Math.PI) / baseSides), (object.width / fov) * asset.size * Math.sin((i * 2 * Math.PI) / baseSides));
  223.             }
  224.             canvas.fill();
  225.             if (CRTP != 'simplistic') {
  226.             canvas.stroke();
  227.             };
  228.           }
  229.           canvas.translate(
  230.             (-object.width / fov) * asset.x,
  231.             (-object.width / fov) * asset.y
  232.           );
  233.           if (('angle' in asset) && asset.angle != 0) {
  234.             canvas.rotate(-asset.angle * Math.PI / 180);
  235.           }
  236.         }
  237.       }
  238.  
  239.       //draw barrel
  240.       canvas.lineWidth = 4 / fov;
  241.       //weapon barrels
  242.       for (let barrel in object.barrels){
  243.         let thisBarrel = object.barrels[barrel];
  244.         canvas.rotate((thisBarrel.additionalAngle * Math.PI) / 180); //rotate to barrel angle
  245.         canvas.fillStyle = bodyColors.barrel.col;
  246.         canvas.strokeStyle = bodyColors.barrel.outline;
  247.         if (spawnProtect == "yes") {
  248.           //if have spawn protection
  249.           canvas.fillStyle = bodyColors.barrel.hitCol;
  250.           canvas.strokeStyle = bodyColors.barrel.hitOutline;
  251.         }
  252.         //bullet barrel
  253.         //note: barrelHeightChange refers to reduction in barrel height for barrel animation when shooting
  254.         if (thisBarrel.barrelType == "bullet") {
  255.           drawBulletBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  256.         }
  257.         //drone barrel
  258.         else if (thisBarrel.barrelType == "drone") {
  259.           drawDroneBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  260.         }
  261.         //trap barrel
  262.         else if (thisBarrel.barrelType == "trap") {
  263.           drawTrapBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  264.         }
  265.         //mine barrel
  266.         else if (thisBarrel.barrelType == "mine") {
  267.           drawMineBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  268.         }
  269.         //minion barrel
  270.         else if (thisBarrel.barrelType == "minion") {
  271.           drawMinionBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  272.         }
  273.         canvas.rotate((-thisBarrel.additionalAngle * Math.PI) / 180); //rotate back
  274.       }
  275.  
  276.       //draw player body
  277.       canvas.fillStyle = playercolor;
  278.       canvas.strokeStyle = playeroutline;
  279.       if (eternal == "no") {
  280.         //not a tier 6 tank
  281.         canvas.beginPath();
  282.         canvas.arc(0, 0, object.width / fov, 0, 2 * Math.PI);
  283.         canvas.fill();
  284.         if (CRTP != 'simplistic') {
  285.             canvas.stroke();
  286.         };
  287.       } else {
  288.         //if a tier 6 tank
  289.         canvas.beginPath();
  290.         let baseSides = 6;
  291.         canvas.moveTo((object.width / fov), 0);
  292.         for (var i = 1; i <= baseSides; i++) {
  293.           canvas.lineTo((object.width / fov) * Math.cos((i * 2 * Math.PI) / baseSides), (object.width / fov) * Math.sin((i * 2 * Math.PI) / baseSides));
  294.         }
  295.         canvas.fill();
  296.         if (CRTP != 'simplistic') {
  297.             canvas.stroke();
  298.         };
  299.       }
  300.  
  301.       //barrels in body upgrade
  302.       for (let barrel in object.bodybarrels){
  303.         let thisBarrel = object.bodybarrels[barrel];
  304.         canvas.rotate(thisBarrel.additionalAngle - objectangle); //rotate to barrel angle
  305.         canvas.fillStyle = bodyColors.barrel.col;
  306.         canvas.strokeStyle = bodyColors.barrel.outline;
  307.         if (spawnProtect == "yes") {
  308.           //if have spawn protection
  309.           canvas.fillStyle = bodyColors.barrel.hitCol;
  310.           canvas.strokeStyle = bodyColors.barrel.hitOutline;
  311.         }
  312.         //bullet barrel
  313.         if (thisBarrel.barrelType == "bullet") {
  314.           drawBulletBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  315.         }
  316.         //drone barrel
  317.         else if (thisBarrel.barrelType == "drone") {
  318.           drawDroneBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  319.         }
  320.         //trap barrel (doesnt exist atm)
  321.         else if (thisBarrel.barrelType == "trap") {
  322.           drawTrapBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  323.         }
  324.         //mine barrel (doesnt exist atm)
  325.         else if (thisBarrel.barrelType == "mine") {
  326.           drawMineBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  327.         }
  328.         //minion barrel (doesnt exist atm)
  329.         else if (thisBarrel.barrelType == "minion") {
  330.           drawMinionBarrel(canvas,thisBarrel.x,thisBarrel.barrelWidth,thisBarrel.barrelHeight,thisBarrel.barrelHeightChange,fov)
  331.         }
  332.         canvas.rotate(-thisBarrel.additionalAngle + objectangle); //rotate back
  333.       }
  334.       //draw turret base
  335.       if ('turretBaseSize' in object){
  336.         canvas.fillStyle = bodyColors.barrel.col;
  337.         canvas.strokeStyle = bodyColors.barrel.outline;
  338.         canvas.beginPath();
  339.         canvas.arc(0, 0, (object.width / clientFovMultiplier) * object.turretBaseSize, 0, 2 * Math.PI);
  340.         canvas.fill();
  341.         if (CRTP != 'simplistic') {
  342.             canvas.stroke();
  343.         };
  344.       }
  345.  
  346.       //draw assets above body, e.g. aura assets
  347.       for (let assetID in object.assets){
  348.         var asset = object.assets[assetID];
  349.         if (asset.type == "above") {
  350.           if (('angle' in asset) && asset.angle != 0) {
  351.             canvas.rotate(asset.angle * Math.PI / 180);
  352.           }
  353.           canvas.translate(
  354.             (object.width / fov) * asset.x,
  355.             (object.width / fov) * asset.y
  356.           );
  357.           canvas.fillStyle = asset.color;
  358.           canvas.strokeStyle = asset.outline;
  359.           canvas.lineWidth = asset.outlineThickness / fov;
  360.           if (asset.sides == 0) {
  361.             canvas.beginPath();
  362.             canvas.arc(0, 0, (object.width / fov) * asset.size, 0, 2 * Math.PI);
  363.             canvas.fill();
  364.             if (CRTP != 'simplistic') {
  365.                 canvas.stroke();
  366.             };
  367.           } else {
  368.             canvas.beginPath();
  369.             let baseSides = asset.sides;
  370.             canvas.moveTo((object.width / fov) * asset.size, 0);
  371.             for (var i = 1; i <= baseSides; i++) {
  372.               canvas.lineTo((object.width / fov) * asset.size * Math.cos((i * 2 * Math.PI) / baseSides), (object.width / fov) * asset.size * Math.sin((i * 2 * Math.PI) / baseSides));
  373.             }
  374.             canvas.fill();
  375.             if (CRTP != 'simplistic') {
  376.                 canvas.stroke();
  377.             };
  378.           }
  379.           canvas.translate(
  380.             (-object.width / fov) * asset.x,
  381.             (-object.width / fov) * asset.y
  382.           );
  383.           if (('angle' in asset) && asset.angle != 0) {
  384.             canvas.rotate(-asset.angle * Math.PI / 180);
  385.           }
  386.         }
  387.       }
  388.  
  389.       canvas.lineJoin = "miter"; //change back
  390.   };
  391.     function newdraw(object, id, playerstring, auraWidth) {
  392.     const CRTP = document.getElementById('theme').value;
  393.     //function for drawing objects on the canvas. need to provide aura width because this fuction cannot access variables outside
  394.     var drawingX =
  395.       (object.x - px) / clientFovMultiplier + canvas.width / 2; //calculate the location on canvas to draw object
  396.     var drawingY =
  397.       (object.y - py) / clientFovMultiplier + canvas.height / 2;
  398.  
  399.     if (object.type == "bullet") {
  400.       //draw bullet
  401.       if (object.hasOwnProperty("deadOpacity")) {
  402.         //if this is an animation of a dead object
  403.         ctx.globalAlpha = object.deadOpacity;
  404.       }
  405.       var chooseflash = 3;
  406.       if (object.hit > 0 && object.bulletType != "aura") {
  407.         //if shape is hit AND bullet is not aura, choose whether it's color is white or original color to create flashing effect
  408.         chooseflash = Math.floor(Math.random() * 3); //random number 0, 1 or 2
  409.       }
  410.       if (chooseflash == 0) {
  411.         ctx.fillStyle = "white";
  412.       } else if (chooseflash == 1) {
  413.         ctx.fillStyle = "pink";
  414.       } else {
  415.         if (object.ownsIt == "yes" || object.bulletType == "aura") {
  416.           //if it's an aura or client's tank owns the bullet
  417.           ctx.fillStyle = object.color;
  418.         } else {
  419.           ctx.fillStyle = "#f04f54"; //bullet color is red
  420.         }
  421.       }
  422.       if (object.bulletType == "aura") {
  423.         var choosing;
  424.         if (aurastate && CRTP != 'simplistic') {
  425.         choosing = Math.floor(Math.random() * 2); //choose if particle spawn
  426.         } else {
  427.         choosing = 0;
  428.         };
  429.         if (choosing == 1) {
  430.           //spawn a particle
  431.           var angleDegrees = Math.floor(Math.random() * 360); //choose angle in degrees
  432.           var angleRadians = (angleDegrees * Math.PI) / 180; //convert to radians
  433.           var randomDistFromCenter =
  434.             Math.floor(Math.random() * object.width * 2) - object.width;
  435.           radparticles[particleID] = {
  436.             angle: angleRadians,
  437.             x: object.x + randomDistFromCenter * Math.cos(angleRadians),
  438.             y: object.y + randomDistFromCenter * Math.sin(angleRadians),
  439.             width: 5,
  440.             height: 5,
  441.             speed: 1,
  442.             timer: 30,
  443.             maxtimer: 50,
  444.             color: object.color,
  445.             outline: object.outline,
  446.             type: "particle",
  447.           };
  448.           particleID++;
  449.         }
  450.       }
  451.  
  452.       if (object.ownsIt == "yes" || object.bulletType == "aura") {
  453.         //if it's an aura or client's tank owns the bullet
  454.         ctx.strokeStyle = object.outline;
  455.       } else {
  456.         ctx.strokeStyle = "#b33b3f"; //bullet is red
  457.       }
  458.  
  459.  
  460.       //bullet is purple even if bullet belongs to enemy
  461.       if (object.color == "#934c93") {
  462.         ctx.fillStyle = object.color;
  463.       }
  464.       if (object.outline == "#660066") {
  465.         ctx.strokeStyle = object.outline;
  466.       }
  467.  
  468.       //team colors
  469.       if (object.team == "blue" || object.team == "green" || object.team == "red" || object.team == "purple" || object.team == "eternal" || object.team == "magenta" || object.team == "fallen" || object.team == "celestial") {
  470.         ctx.fillStyle = bodyColors[object.team].col;
  471.         ctx.strokeStyle = bodyColors[object.team].outline;
  472.       }
  473.  
  474.       if (object.bulletType == "aura"){
  475.         //color is aura color, regardless of team
  476.         ctx.fillStyle = object.color;
  477.         ctx.strokeStyle = object.outline;
  478.       }
  479.  
  480.       if (object.passive == "yes") {
  481.         if (object.bulletType == "aura") {
  482.           ctx.strokeStyle = "rgba(128,128,128,.2)";
  483.           ctx.fillStyle = "rgba(128,128,128,.2)";
  484.         } else {
  485.           ctx.strokeStyle = "dimgrey";
  486.           ctx.fillStyle = "grey";
  487.         }
  488.       }
  489.  
  490.       if (object.team=="mob"){
  491.         //dune mob's bullets is the colo of mob
  492.         ctx.fillStyle = botcolors[object.ownerName].color;
  493.         ctx.strokeStyle = botcolors[object.ownerName].outline;
  494.       }
  495.  
  496.       ctx.lineWidth = 4 / clientFovMultiplier;
  497.       if (object.bulletType == "bullet" || object.bulletType == "aura") {
  498.         if (!object.color.includes('rgba(56,183,100')){//not a heal aura
  499.           ctx.beginPath();
  500.           ctx.arc(
  501.             drawingX,
  502.             drawingY,
  503.             object.width / clientFovMultiplier,
  504.             0,
  505.             2 * Math.PI
  506.           );
  507.           if (aurastate || object.bulletType != "aura") {
  508.           ctx.fill();
  509.           };
  510.           if (object.bulletType == 'aura') {
  511.           ctx.stroke();
  512.           } else if (CRTP != 'simplistic') {
  513.           ctx.stroke();
  514.           };
  515.         }
  516.         else{//8 sides for healing aura
  517.           ctx.beginPath();
  518.           ctx.moveTo((object.width / clientFovMultiplier) + drawingX, drawingY);
  519.           for (var i = 1; i <= 8 + 1; i += 1) {
  520.             ctx.lineTo(
  521.               (object.width / clientFovMultiplier) *
  522.                   Math.cos((i * 2 * Math.PI) / 8) + drawingX,
  523.               (object.width / clientFovMultiplier) *
  524.                   Math.sin((i * 2 * Math.PI) / 8) + drawingY
  525.             );
  526.           }
  527.            if (aurastate || object.bulletType != "aura") {
  528.           ctx.fill();
  529.            };
  530.           if (CRTP != 'simplistic') {
  531.           ctx.stroke();
  532.           };
  533.         }
  534.       } else if (object.bulletType == "trap") {
  535.         //width is the radius, so need to times two to get total width
  536.         //note: x and y of object are the center of object, but when drawing rectangles, the x and y coordinates given need to be the top left corner of the rectangle, so need to minus the width and height
  537.         ctx.fillRect(
  538.           drawingX - object.width / clientFovMultiplier,
  539.           drawingY - object.width / clientFovMultiplier,
  540.           (object.width * 2) / clientFovMultiplier,
  541.           (object.width * 2) / clientFovMultiplier
  542.         );
  543.           if (CRTP != 'simplistic') {
  544.         ctx.strokeRect(
  545.           drawingX - object.width / clientFovMultiplier,
  546.           drawingY - object.width / clientFovMultiplier,
  547.           (object.width * 2) / clientFovMultiplier,
  548.           (object.width * 2) / clientFovMultiplier
  549.         );
  550.           };
  551.       } else if (object.bulletType == "drone") {
  552.         ctx.save();
  553.         ctx.translate(drawingX, drawingY);
  554.         ctx.rotate(object.moveAngle);
  555.         //ctx.rotate((object.moveAngle*180/Math.PI - 90) *Math.PI/180);//cannot straightaway use the angle, must add 90 degrees to it, because 0 degrees is pointing right, but we are drawing the triangle upwards
  556.         ctx.beginPath();
  557.         ctx.moveTo(
  558.           (object.width / clientFovMultiplier) * Math.cos(0),
  559.           (object.width / clientFovMultiplier) * Math.sin(0)
  560.         );
  561.         for (var i = 1; i <= 3; i += 1) {
  562.           ctx.lineTo(
  563.             (object.width / clientFovMultiplier) *
  564.               Math.cos((i * 2 * Math.PI) / 3),
  565.             (object.width / clientFovMultiplier) *
  566.               Math.sin((i * 2 * Math.PI) / 3)
  567.           );
  568.         }
  569.         ctx.fill();
  570.           if (CRTP != 'simplistic') {
  571.           ctx.stroke();
  572.           };
  573.         ctx.restore();
  574.       } else if (object.bulletType == "mine" || object.bulletType == "minion") {
  575.         //console.log(object.moveAngle/Math.PI*180)
  576.         //mine is trap with barrel, minion is bullet with barrel
  577.         ctx.save();
  578.         ctx.translate(drawingX, drawingY);
  579.         ctx.rotate(object.moveAngle);
  580.         //ctx.rotate((object.moveAngle*180/Math.PI - 90) *Math.PI/180);//cannot straightaway use the angle, must add 90 degrees to it, because 0 degrees is pointing right, but we are drawing the triangle upwards
  581.  
  582.         if (object.bulletType == "minion"){
  583.           //draw barrels underneath
  584.           var prevfill = ctx.fillStyle;
  585.           var prevstroke = ctx.strokeStyle;//store previous bullet color so can change back later
  586.           ctx.fillStyle = bodyColors.barrel.col;
  587.           ctx.strokeStyle = bodyColors.barrel.outline;
  588.           Object.keys(object.barrels).forEach((barrel) => {
  589.           let thisBarrel = object.barrels[barrel];
  590.           ctx.rotate(thisBarrel.additionalAngle); //rotate to barrel angle
  591.           if (thisBarrel.barrelType == "bullet") {
  592.             ctx.fillRect(
  593.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  594.                 thisBarrel.x,
  595.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  596.                 clientFovMultiplier,
  597.               thisBarrel.barrelWidth / clientFovMultiplier,
  598.               (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  599.                 clientFovMultiplier
  600.             );
  601.             if (CRTP != 'simplistic') {
  602.             ctx.strokeRect(
  603.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  604.                 thisBarrel.x,
  605.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  606.                 clientFovMultiplier,
  607.               thisBarrel.barrelWidth / clientFovMultiplier,
  608.               (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  609.                 clientFovMultiplier
  610.             );
  611.             };
  612.           }
  613.           //drone barrel
  614.           else if (thisBarrel.barrelType == "drone") {
  615.             ctx.beginPath();
  616.             ctx.moveTo(
  617.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  618.                 thisBarrel.x / clientFovMultiplier,
  619.               0
  620.             );
  621.             ctx.lineTo(
  622.               -thisBarrel.barrelWidth / clientFovMultiplier +
  623.                 thisBarrel.x / clientFovMultiplier,
  624.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  625.                 clientFovMultiplier
  626.             );
  627.             ctx.lineTo(
  628.               thisBarrel.barrelWidth / clientFovMultiplier +
  629.                 (thisBarrel.x * 2) / clientFovMultiplier,
  630.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  631.                 clientFovMultiplier
  632.             );
  633.             ctx.lineTo(
  634.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  635.                 (thisBarrel.x * 2) / clientFovMultiplier,
  636.               0
  637.             );
  638.             ctx.fill();
  639.           if (CRTP != 'simplistic') {
  640.           ctx.stroke();
  641.           };
  642.           }
  643.           //trap barrel
  644.           else if (thisBarrel.barrelType == "trap") {
  645.             ctx.fillRect(
  646.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  647.                 thisBarrel.x / clientFovMultiplier,
  648.               ((-(
  649.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  650.               ) /
  651.                 3) *
  652.                 2) /
  653.                 clientFovMultiplier,
  654.               thisBarrel.barrelWidth / clientFovMultiplier,
  655.               (((thisBarrel.barrelHeight -
  656.                 thisBarrel.barrelHeightChange) /
  657.                 3) *
  658.                 2) /
  659.                 clientFovMultiplier
  660.             );
  661.             if (CRTP != 'simplistic') {
  662.             ctx.strokeRect(
  663.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  664.                 thisBarrel.x / clientFovMultiplier,
  665.               ((-(
  666.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  667.               ) /
  668.                 3) *
  669.                 2) /
  670.                 clientFovMultiplier,
  671.               thisBarrel.barrelWidth / clientFovMultiplier,
  672.               (((thisBarrel.barrelHeight -
  673.                 thisBarrel.barrelHeightChange) /
  674.                 3) *
  675.                 2) /
  676.                 clientFovMultiplier
  677.             );
  678.             };
  679.             ctx.beginPath();
  680.             ctx.moveTo(
  681.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  682.                 thisBarrel.x / clientFovMultiplier,
  683.               ((-(
  684.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  685.               ) /
  686.                 3) *
  687.                 2) /
  688.                 clientFovMultiplier
  689.             );
  690.             ctx.lineTo(
  691.               -thisBarrel.barrelWidth / clientFovMultiplier +
  692.                 thisBarrel.x / clientFovMultiplier,
  693.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  694.                 clientFovMultiplier
  695.             );
  696.             ctx.lineTo(
  697.               thisBarrel.barrelWidth / clientFovMultiplier +
  698.                 thisBarrel.x / clientFovMultiplier,
  699.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  700.                 clientFovMultiplier
  701.             );
  702.             ctx.lineTo(
  703.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  704.                 thisBarrel.x / clientFovMultiplier,
  705.               ((-(
  706.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  707.               ) /
  708.                 3) *
  709.                 2) /
  710.                 clientFovMultiplier
  711.             );
  712.             ctx.fill();
  713.           if (CRTP != 'simplistic') {
  714.           ctx.stroke();
  715.           };
  716.           }
  717.           //mine barrel
  718.           else if (thisBarrel.barrelType == "mine") {
  719.             ctx.fillRect(
  720.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  721.                 thisBarrel.x / clientFovMultiplier,
  722.               ((-(
  723.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  724.               ) /
  725.                 3) *
  726.                 2) /
  727.                 clientFovMultiplier,
  728.               thisBarrel.barrelWidth / clientFovMultiplier,
  729.               (((thisBarrel.barrelHeight -
  730.                 thisBarrel.barrelHeightChange) /
  731.                 3) *
  732.                 2) /
  733.                 clientFovMultiplier
  734.             );
  735.             if (CRTP != 'simplistic') {
  736.             ctx.strokeRect(
  737.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  738.                 thisBarrel.x / clientFovMultiplier,
  739.               ((-(
  740.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  741.               ) /
  742.                 3) *
  743.                 2) /
  744.                 clientFovMultiplier,
  745.               thisBarrel.barrelWidth / clientFovMultiplier,
  746.               (((thisBarrel.barrelHeight -
  747.                 thisBarrel.barrelHeightChange) /
  748.                 3) *
  749.                 2) /
  750.                 clientFovMultiplier
  751.             );
  752.             };
  753.             ctx.beginPath();
  754.             ctx.moveTo(
  755.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  756.                 thisBarrel.x / clientFovMultiplier,
  757.               ((-(
  758.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  759.               ) /
  760.                 3) *
  761.                 2) /
  762.                 clientFovMultiplier
  763.             );
  764.             ctx.lineTo(
  765.               -thisBarrel.barrelWidth / clientFovMultiplier +
  766.                 thisBarrel.x / clientFovMultiplier,
  767.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  768.                 clientFovMultiplier
  769.             );
  770.             ctx.lineTo(
  771.               thisBarrel.barrelWidth / clientFovMultiplier +
  772.                 thisBarrel.x / clientFovMultiplier,
  773.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  774.                 clientFovMultiplier
  775.             );
  776.             ctx.lineTo(
  777.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  778.                 thisBarrel.x / clientFovMultiplier,
  779.               ((-(
  780.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  781.               ) /
  782.                 3) *
  783.                 2) /
  784.                 clientFovMultiplier
  785.             );
  786.             ctx.fill();
  787.           if (CRTP != 'simplistic') {
  788.           ctx.stroke();
  789.           };
  790.           }
  791.         //minion barrel
  792.         else if (thisBarrel.barrelType == "minion") {
  793.           ctx.fillRect(
  794.             -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  795.               thisBarrel.x / clientFovMultiplier,
  796.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  797.               clientFovMultiplier,
  798.             thisBarrel.barrelWidth / clientFovMultiplier,
  799.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  800.               clientFovMultiplier
  801.           );
  802.           if (CRTP != 'simplistic') {
  803.           ctx.strokeRect(
  804.             -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  805.               thisBarrel.x / clientFovMultiplier,
  806.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  807.               clientFovMultiplier,
  808.             thisBarrel.barrelWidth / clientFovMultiplier,
  809.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  810.               clientFovMultiplier
  811.           );
  812.           };
  813.           ctx.fillRect(
  814.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  815.               thisBarrel.x / clientFovMultiplier,
  816.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier,
  817.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  818.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier
  819.           );
  820.            if (CRTP != 'simplistic') {
  821.           ctx.strokeRect(
  822.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  823.               thisBarrel.x / clientFovMultiplier,
  824.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier,
  825.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  826.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier
  827.           );
  828.            };
  829.           ctx.fillRect(
  830.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  831.               thisBarrel.x / clientFovMultiplier,
  832.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange)  / clientFovMultiplier,
  833.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  834.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /5/ clientFovMultiplier
  835.           );
  836.           if (CRTP != 'simplistic') {
  837.           ctx.strokeRect(
  838.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  839.               thisBarrel.x / clientFovMultiplier,
  840.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange)  / clientFovMultiplier,
  841.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  842.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /5 /clientFovMultiplier
  843.           );
  844.           };
  845.         }
  846.           })
  847.           ctx.fillStyle = prevfill;
  848.           ctx.strokeStyle = prevstroke;
  849.         }
  850.         ctx.beginPath();
  851.         if (object.bulletType == "mine"){//mine
  852.           ctx.moveTo(
  853.             (object.width / clientFovMultiplier) * Math.cos(0),
  854.             (object.width / clientFovMultiplier) * Math.sin(0)
  855.           );
  856.           for (var i = 1; i <= 3; i += 1) {
  857.             ctx.lineTo(
  858.               (object.width / clientFovMultiplier) *
  859.                 Math.cos((i * 2 * Math.PI) / 3),
  860.               (object.width / clientFovMultiplier) *
  861.                 Math.sin((i * 2 * Math.PI) / 3)
  862.             );
  863.           }
  864.         }
  865.         else{//minion
  866.           ctx.arc(0, 0, object.width / clientFovMultiplier, 0, 2 * Math.PI);
  867.         }
  868.         ctx.fill();
  869.           if (CRTP != 'simplistic') {
  870.           ctx.stroke();
  871.           };
  872.         ctx.rotate(-object.moveAngle); //rotate back
  873.         //BARREL FOR THE MINE TRAP
  874.         if (object.bulletType == "mine"){
  875.         Object.keys(object.barrels).forEach((barrel) => {
  876.           let thisBarrel = object.barrels[barrel];
  877.           ctx.rotate(thisBarrel.additionalAngle); //rotate to barrel angle
  878.           ctx.fillStyle = "grey";
  879.           ctx.strokeStyle = "#5e5e5e";
  880.           if (thisBarrel.barrelType == "bullet") {
  881.             ctx.fillRect(
  882.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  883.                 thisBarrel.x,
  884.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  885.                 clientFovMultiplier,
  886.               thisBarrel.barrelWidth / clientFovMultiplier,
  887.               (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  888.                 clientFovMultiplier
  889.             );
  890.             if (CRTP != 'simplistic') {
  891.             ctx.strokeRect(
  892.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  893.                 thisBarrel.x,
  894.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  895.                 clientFovMultiplier,
  896.               thisBarrel.barrelWidth / clientFovMultiplier,
  897.               (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  898.                 clientFovMultiplier
  899.             );
  900.             };
  901.           }
  902.           //drone barrel
  903.           else if (thisBarrel.barrelType == "drone") {
  904.             ctx.beginPath();
  905.             ctx.moveTo(
  906.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  907.                 thisBarrel.x / clientFovMultiplier,
  908.               0
  909.             );
  910.             ctx.lineTo(
  911.               -thisBarrel.barrelWidth / clientFovMultiplier +
  912.                 thisBarrel.x / clientFovMultiplier,
  913.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  914.                 clientFovMultiplier
  915.             );
  916.             ctx.lineTo(
  917.               thisBarrel.barrelWidth / clientFovMultiplier +
  918.                 (thisBarrel.x * 2) / clientFovMultiplier,
  919.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  920.                 clientFovMultiplier
  921.             );
  922.             ctx.lineTo(
  923.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  924.                 (thisBarrel.x * 2) / clientFovMultiplier,
  925.               0
  926.             );
  927.             ctx.fill();
  928.           if (CRTP != 'simplistic') {
  929.           ctx.stroke();
  930.           };
  931.           }
  932.           //trap barrel
  933.           else if (thisBarrel.barrelType == "trap") {
  934.             ctx.fillRect(
  935.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  936.                 thisBarrel.x / clientFovMultiplier,
  937.               ((-(
  938.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  939.               ) /
  940.                 3) *
  941.                 2) /
  942.                 clientFovMultiplier,
  943.               thisBarrel.barrelWidth / clientFovMultiplier,
  944.               (((thisBarrel.barrelHeight -
  945.                 thisBarrel.barrelHeightChange) /
  946.                 3) *
  947.                 2) /
  948.                 clientFovMultiplier
  949.             );
  950.             if (CRTP != 'simplistic') {
  951.             ctx.strokeRect(
  952.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  953.                 thisBarrel.x / clientFovMultiplier,
  954.               ((-(
  955.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  956.               ) /
  957.                 3) *
  958.                 2) /
  959.                 clientFovMultiplier,
  960.               thisBarrel.barrelWidth / clientFovMultiplier,
  961.               (((thisBarrel.barrelHeight -
  962.                 thisBarrel.barrelHeightChange) /
  963.                 3) *
  964.                 2) /
  965.                 clientFovMultiplier
  966.             );
  967.             };
  968.             ctx.beginPath();
  969.             ctx.moveTo(
  970.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  971.                 thisBarrel.x / clientFovMultiplier,
  972.               ((-(
  973.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  974.               ) /
  975.                 3) *
  976.                 2) /
  977.                 clientFovMultiplier
  978.             );
  979.             ctx.lineTo(
  980.               -thisBarrel.barrelWidth / clientFovMultiplier +
  981.                 thisBarrel.x / clientFovMultiplier,
  982.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  983.                 clientFovMultiplier
  984.             );
  985.             ctx.lineTo(
  986.               thisBarrel.barrelWidth / clientFovMultiplier +
  987.                 thisBarrel.x / clientFovMultiplier,
  988.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  989.                 clientFovMultiplier
  990.             );
  991.             ctx.lineTo(
  992.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  993.                 thisBarrel.x / clientFovMultiplier,
  994.               ((-(
  995.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  996.               ) /
  997.                 3) *
  998.                 2) /
  999.                 clientFovMultiplier
  1000.             );
  1001.             ctx.fill();
  1002.           if (CRTP != 'simplistic') {
  1003.           ctx.stroke();
  1004.           };
  1005.           }
  1006.           //mine barrel
  1007.           else if (thisBarrel.barrelType == "mine") {
  1008.             ctx.fillRect(
  1009.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1010.                 thisBarrel.x / clientFovMultiplier,
  1011.               ((-(
  1012.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  1013.               ) /
  1014.                 3) *
  1015.                 2) /
  1016.                 clientFovMultiplier,
  1017.               thisBarrel.barrelWidth / clientFovMultiplier,
  1018.               (((thisBarrel.barrelHeight -
  1019.                 thisBarrel.barrelHeightChange) /
  1020.                 3) *
  1021.                 2) /
  1022.                 clientFovMultiplier
  1023.             );
  1024.             if (CRTP != 'simplistic') {
  1025.             ctx.strokeRect(
  1026.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1027.                 thisBarrel.x / clientFovMultiplier,
  1028.               ((-(
  1029.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  1030.               ) /
  1031.                 3) *
  1032.                 2) /
  1033.                 clientFovMultiplier,
  1034.               thisBarrel.barrelWidth / clientFovMultiplier,
  1035.               (((thisBarrel.barrelHeight -
  1036.                 thisBarrel.barrelHeightChange) /
  1037.                 3) *
  1038.                 2) /
  1039.                 clientFovMultiplier
  1040.             );
  1041.             };
  1042.             ctx.beginPath();
  1043.             ctx.moveTo(
  1044.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1045.                 thisBarrel.x / clientFovMultiplier,
  1046.               ((-(
  1047.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  1048.               ) /
  1049.                 3) *
  1050.                 2) /
  1051.                 clientFovMultiplier
  1052.             );
  1053.             ctx.lineTo(
  1054.               -thisBarrel.barrelWidth / clientFovMultiplier +
  1055.                 thisBarrel.x / clientFovMultiplier,
  1056.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1057.                 clientFovMultiplier
  1058.             );
  1059.             ctx.lineTo(
  1060.               thisBarrel.barrelWidth / clientFovMultiplier +
  1061.                 thisBarrel.x / clientFovMultiplier,
  1062.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1063.                 clientFovMultiplier
  1064.             );
  1065.             ctx.lineTo(
  1066.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1067.                 thisBarrel.x / clientFovMultiplier,
  1068.               ((-(
  1069.                 thisBarrel.barrelHeight - thisBarrel.barrelHeightChange
  1070.               ) /
  1071.                 3) *
  1072.                 2) /
  1073.                 clientFovMultiplier
  1074.             );
  1075.             ctx.fill();
  1076.           if (CRTP != 'simplistic') {
  1077.           ctx.stroke();
  1078.           };
  1079.           }
  1080.         //minion barrel
  1081.         else if (thisBarrel.barrelType == "minion") {
  1082.           ctx.fillRect(
  1083.             -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1084.               thisBarrel.x / clientFovMultiplier,
  1085.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1086.               clientFovMultiplier,
  1087.             thisBarrel.barrelWidth / clientFovMultiplier,
  1088.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1089.               clientFovMultiplier
  1090.           );
  1091.           if (CRTP != 'simplistic') {
  1092.           ctx.strokeRect(
  1093.             -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1094.               thisBarrel.x / clientFovMultiplier,
  1095.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1096.               clientFovMultiplier,
  1097.             thisBarrel.barrelWidth / clientFovMultiplier,
  1098.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1099.               clientFovMultiplier
  1100.           );
  1101.           };
  1102.           ctx.fillRect(
  1103.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1104.               thisBarrel.x / clientFovMultiplier,
  1105.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier,
  1106.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1107.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier
  1108.           );
  1109.           if (CRTP != 'simplistic') {
  1110.           ctx.strokeRect(
  1111.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1112.               thisBarrel.x / clientFovMultiplier,
  1113.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier,
  1114.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1115.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier
  1116.           );
  1117.           };
  1118.           ctx.fillRect(
  1119.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1120.               thisBarrel.x / clientFovMultiplier,
  1121.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange)  / clientFovMultiplier,
  1122.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1123.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /5/ clientFovMultiplier
  1124.           );
  1125.           if (CRTP != 'simplistic') {
  1126.           ctx.strokeRect(
  1127.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1128.               thisBarrel.x / clientFovMultiplier,
  1129.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange)  / clientFovMultiplier,
  1130.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1131.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /5 /clientFovMultiplier
  1132.           );
  1133.           };
  1134.         }
  1135.           ctx.beginPath();
  1136.           ctx.arc(
  1137.             0,
  1138.             0,
  1139.             thisBarrel.barrelWidth / clientFovMultiplier,
  1140.             0,
  1141.             2 * Math.PI
  1142.           );
  1143.           ctx.fill();
  1144.           if (CRTP != 'simplistic') {
  1145.           ctx.stroke();
  1146.           };
  1147.           ctx.rotate(-thisBarrel.additionalAngle); //rotate back
  1148.         });
  1149.       }
  1150.  
  1151.         ctx.restore();
  1152.       }
  1153.       if (object.hasOwnProperty("deadOpacity")) {
  1154.         //if this is an animation of a dead object
  1155.         ctx.globalAlpha = 1.0; //reset opacity
  1156.       }
  1157.       if (showHitBox == "yes") {
  1158.         //draw hitbox
  1159.         ctx.strokeStyle = "blue";
  1160.         ctx.lineWidth = 3;
  1161.         ctx.beginPath();
  1162.         ctx.arc(
  1163.           drawingX,
  1164.           drawingY,
  1165.           object.width / clientFovMultiplier,
  1166.           0,
  1167.           2 * Math.PI
  1168.         );
  1169.         ctx.stroke();
  1170.       }
  1171.     } else if (object.type == "bot") {
  1172.       //draw bot
  1173.       if (object.hasOwnProperty("deadOpacity")) {
  1174.         //if this is an animation of a dead object
  1175.         ctx.globalAlpha = object.deadOpacity;
  1176.       }
  1177.       ctx.lineWidth = 4 / clientFovMultiplier;
  1178.       ctx.lineJoin = "round"; //prevent spikes above the capital letter "M"
  1179.       ctx.save();
  1180.       ctx.translate(drawingX, drawingY);
  1181.       ctx.rotate(object.angle);
  1182.       //draw barrels
  1183.       if (object.name!="Pillbox"){//pillbox's barrel is visually a turret
  1184.         Object.keys(object.barrels).forEach((barrel) => {
  1185.           let thisBarrel = object.barrels[barrel];
  1186.           ctx.rotate(((thisBarrel.additionalAngle + 90) * Math.PI) / 180); //rotate to barrel angle
  1187.           ctx.fillStyle = bodyColors.barrel.col;
  1188.           ctx.strokeStyle = bodyColors.barrel.outline;
  1189.           if (thisBarrel.barrelType == "bullet") {
  1190.             ctx.fillRect(
  1191.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1192.                 thisBarrel.x,
  1193.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1194.                 clientFovMultiplier,
  1195.               thisBarrel.barrelWidth / clientFovMultiplier,
  1196.               (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1197.                 clientFovMultiplier
  1198.             );
  1199.             if (CRTP != 'simplistic') {
  1200.             ctx.strokeRect(
  1201.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1202.                 thisBarrel.x,
  1203.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1204.                 clientFovMultiplier,
  1205.               thisBarrel.barrelWidth / clientFovMultiplier,
  1206.               (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1207.                 clientFovMultiplier
  1208.             );
  1209.             };
  1210.           }
  1211.           //drone barrel
  1212.           else if (thisBarrel.barrelType == "drone") {
  1213.             ctx.beginPath();
  1214.             ctx.moveTo(
  1215.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1216.                 thisBarrel.x / clientFovMultiplier,
  1217.               0
  1218.             );
  1219.             ctx.lineTo(
  1220.               -thisBarrel.barrelWidth / clientFovMultiplier +
  1221.                 thisBarrel.x / clientFovMultiplier,
  1222.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1223.                 clientFovMultiplier
  1224.             );
  1225.             ctx.lineTo(
  1226.               thisBarrel.barrelWidth / clientFovMultiplier +
  1227.                 (thisBarrel.x * 2) / clientFovMultiplier,
  1228.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1229.                 clientFovMultiplier
  1230.             );
  1231.             ctx.lineTo(
  1232.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1233.                 (thisBarrel.x * 2) / clientFovMultiplier,
  1234.               0
  1235.             );
  1236.             ctx.fill();
  1237.           if (CRTP != 'simplistic') {
  1238.           ctx.stroke();
  1239.           };
  1240.           }
  1241.           //trap barrel
  1242.           else if (thisBarrel.barrelType == "trap") {
  1243.             ctx.fillRect(
  1244.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1245.                 thisBarrel.x / clientFovMultiplier,
  1246.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1247.                 3) *
  1248.                 2) /
  1249.                 clientFovMultiplier,
  1250.               thisBarrel.barrelWidth / clientFovMultiplier,
  1251.               (((thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1252.                 3) *
  1253.                 2) /
  1254.                 clientFovMultiplier
  1255.             );
  1256.             if (CRTP != 'simplistic') {
  1257.             ctx.strokeRect(
  1258.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1259.                 thisBarrel.x / clientFovMultiplier,
  1260.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1261.                 3) *
  1262.                 2) /
  1263.                 clientFovMultiplier,
  1264.               thisBarrel.barrelWidth / clientFovMultiplier,
  1265.               (((thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1266.                 3) *
  1267.                 2) /
  1268.                 clientFovMultiplier
  1269.             );
  1270.             };
  1271.             ctx.beginPath();
  1272.             ctx.moveTo(
  1273.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1274.                 thisBarrel.x / clientFovMultiplier,
  1275.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1276.                 3) *
  1277.                 2) /
  1278.                 clientFovMultiplier
  1279.             );
  1280.             ctx.lineTo(
  1281.               -thisBarrel.barrelWidth / clientFovMultiplier +
  1282.                 thisBarrel.x / clientFovMultiplier,
  1283.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1284.                 clientFovMultiplier
  1285.             );
  1286.             ctx.lineTo(
  1287.               thisBarrel.barrelWidth / clientFovMultiplier +
  1288.                 thisBarrel.x / clientFovMultiplier,
  1289.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1290.                 clientFovMultiplier
  1291.             );
  1292.             ctx.lineTo(
  1293.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1294.                 thisBarrel.x / clientFovMultiplier,
  1295.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1296.                 3) *
  1297.                 2) /
  1298.                 clientFovMultiplier
  1299.             );
  1300.             ctx.fill();
  1301.           if (CRTP != 'simplistic') {
  1302.           ctx.stroke();
  1303.           };
  1304.           }
  1305.           //mine barrel
  1306.           else if (thisBarrel.barrelType == "mine") {
  1307.             ctx.fillRect(
  1308.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1309.                 thisBarrel.x / clientFovMultiplier,
  1310.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1311.                 3) *
  1312.                 2) /
  1313.                 clientFovMultiplier,
  1314.               thisBarrel.barrelWidth / clientFovMultiplier,
  1315.               (((thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1316.                 3) *
  1317.                 2) /
  1318.                 clientFovMultiplier
  1319.             );
  1320.             if (CRTP != 'simplistic') {
  1321.             ctx.strokeRect(
  1322.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1323.                 thisBarrel.x / clientFovMultiplier,
  1324.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1325.                 3) *
  1326.                 2) /
  1327.                 clientFovMultiplier,
  1328.               thisBarrel.barrelWidth / clientFovMultiplier,
  1329.               (((thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1330.                 3) *
  1331.                 2) /
  1332.                 clientFovMultiplier
  1333.             );
  1334.             };
  1335.             ctx.beginPath();
  1336.             ctx.moveTo(
  1337.               -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1338.                 thisBarrel.x / clientFovMultiplier,
  1339.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1340.                 3) *
  1341.                 2) /
  1342.                 clientFovMultiplier
  1343.             );
  1344.             ctx.lineTo(
  1345.               -thisBarrel.barrelWidth / clientFovMultiplier +
  1346.                 thisBarrel.x / clientFovMultiplier,
  1347.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1348.                 clientFovMultiplier
  1349.             );
  1350.             ctx.lineTo(
  1351.               thisBarrel.barrelWidth / clientFovMultiplier +
  1352.                 thisBarrel.x / clientFovMultiplier,
  1353.               -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1354.                 clientFovMultiplier
  1355.             );
  1356.             ctx.lineTo(
  1357.               thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1358.                 thisBarrel.x / clientFovMultiplier,
  1359.               ((-(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1360.                 3) *
  1361.                 2) /
  1362.                 clientFovMultiplier
  1363.             );
  1364.             ctx.fill();
  1365.           if (CRTP != 'simplistic') {
  1366.           ctx.stroke();
  1367.           };
  1368.           }
  1369.         //minion barrel
  1370.         else if (thisBarrel.barrelType == "minion") {
  1371.           ctx.fillRect(
  1372.             -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1373.               thisBarrel.x / clientFovMultiplier,
  1374.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1375.               clientFovMultiplier,
  1376.             thisBarrel.barrelWidth / clientFovMultiplier,
  1377.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1378.               clientFovMultiplier
  1379.           );
  1380.           if (CRTP != 'simplistic') {
  1381.           ctx.strokeRect(
  1382.             -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1383.               thisBarrel.x / clientFovMultiplier,
  1384.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1385.               clientFovMultiplier,
  1386.             thisBarrel.barrelWidth / clientFovMultiplier,
  1387.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1388.               clientFovMultiplier
  1389.           );
  1390.           };
  1391.           ctx.fillRect(
  1392.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1393.               thisBarrel.x / clientFovMultiplier,
  1394.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier,
  1395.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1396.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier
  1397.           );
  1398.           if (CRTP != 'simplistic') {
  1399.           ctx.strokeRect(
  1400.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1401.               thisBarrel.x / clientFovMultiplier,
  1402.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier,
  1403.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1404.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) / 1.5 / clientFovMultiplier
  1405.           );
  1406.           };
  1407.           ctx.fillRect(
  1408.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1409.               thisBarrel.x / clientFovMultiplier,
  1410.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange)  / clientFovMultiplier,
  1411.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1412.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /5/ clientFovMultiplier
  1413.           );
  1414.           if (CRTP != 'simplistic') {
  1415.           ctx.strokeRect(
  1416.             (-thisBarrel.barrelWidth * 1.5) / 2 / clientFovMultiplier +
  1417.               thisBarrel.x / clientFovMultiplier,
  1418.             -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange)  / clientFovMultiplier,
  1419.             (thisBarrel.barrelWidth / clientFovMultiplier) * 1.5,
  1420.             (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /5 /clientFovMultiplier
  1421.           );
  1422.           };
  1423.         }
  1424.           ctx.rotate((-(thisBarrel.additionalAngle + 90) * Math.PI) / 180); //rotate back
  1425.         });
  1426.       }
  1427.       if (object.name=="Cluster"){
  1428.         //draw the spawning barrels
  1429.         let barrelwidth = object.width*0.7;
  1430.         let barrelheight = object.width*1.2;
  1431.         ctx.fillStyle = bodyColors.barrel.col;
  1432.         ctx.strokeStyle = bodyColors.barrel.outline;
  1433.         ctx.save();
  1434.         ctx.rotate(90 * Math.PI / 180);
  1435.         for (let i = 0; i < 5; i++){
  1436.           if (i!=0){
  1437.             ctx.rotate(72 * Math.PI / 180); //rotate 72 for each barrel
  1438.           }
  1439.           ctx.beginPath();
  1440.           ctx.moveTo(
  1441.             -barrelwidth / 5 / clientFovMultiplier,
  1442.             0
  1443.           );
  1444.           ctx.lineTo(
  1445.             -barrelwidth / clientFovMultiplier,
  1446.             -barrelheight / clientFovMultiplier
  1447.           );
  1448.           ctx.lineTo(
  1449.             barrelwidth / clientFovMultiplier,
  1450.             -barrelheight / clientFovMultiplier
  1451.           );
  1452.           ctx.lineTo(
  1453.             barrelwidth / 5 / clientFovMultiplier,
  1454.             0
  1455.           );
  1456.           ctx.fill();
  1457.           if (CRTP != 'simplistic') {
  1458.           ctx.stroke();
  1459.           };
  1460.         }
  1461.         ctx.restore();
  1462.       }
  1463.       else if (object.name=="Infestor"){
  1464.         //draw the spawning barrels
  1465.         let barrelwidth = object.width*0.7;
  1466.         let barrelheight = object.width*1.2;
  1467.         ctx.fillStyle = bodyColors.barrel.col;
  1468.         ctx.strokeStyle = bodyColors.barrel.outline;
  1469.         ctx.save();
  1470.         for (let i = 0; i < 4; i++){//normal barrels
  1471.           if (i!=0){
  1472.             ctx.rotate(90 * Math.PI / 180);
  1473.           }
  1474.           ctx.fillRect(
  1475.             -barrelwidth / 2 / clientFovMultiplier,
  1476.             -barrelheight / clientFovMultiplier,
  1477.             barrelwidth / clientFovMultiplier,
  1478.             barrelheight / clientFovMultiplier
  1479.           );
  1480.           if (CRTP != 'simplistic') {
  1481.           ctx.strokeRect(
  1482.             -barrelwidth / 2 / clientFovMultiplier,
  1483.             -barrelheight / clientFovMultiplier,
  1484.             barrelwidth / clientFovMultiplier,
  1485.             barrelheight / clientFovMultiplier
  1486.           );
  1487.           };
  1488.         }
  1489.         ctx.restore();
  1490.         ctx.save();
  1491.         ctx.rotate(45 * Math.PI / 180);
  1492.         barrelwidth = object.width*0.6;
  1493.         barrelheight = object.width*2;
  1494.         for (let i = 0; i < 4; i++){//traplike barrels
  1495.           if (i!=0){
  1496.             ctx.rotate(90 * Math.PI / 180);
  1497.           }
  1498.           ctx.fillRect(
  1499.             -barrelwidth / 2 / clientFovMultiplier,
  1500.             -barrelheight * 0.55 / clientFovMultiplier,
  1501.             barrelwidth / clientFovMultiplier,
  1502.             barrelheight * 0.5 / clientFovMultiplier
  1503.           );
  1504.           if (CRTP != 'simplistic') {
  1505.           ctx.strokeRect(
  1506.             -barrelwidth / 2 / clientFovMultiplier,
  1507.             -barrelheight * 0.55 / clientFovMultiplier,
  1508.             barrelwidth / clientFovMultiplier,
  1509.             barrelheight * 0.5 / clientFovMultiplier
  1510.           );
  1511.           };
  1512.           ctx.beginPath();
  1513.           ctx.moveTo(
  1514.             -barrelwidth / 2 / clientFovMultiplier,
  1515.             -barrelheight * 0.55 / clientFovMultiplier
  1516.           );
  1517.           ctx.lineTo(
  1518.             -barrelwidth/1.7 / clientFovMultiplier,
  1519.             -barrelheight * 0.65 / clientFovMultiplier
  1520.           );
  1521.           ctx.lineTo(
  1522.             barrelwidth/1.7 / clientFovMultiplier,
  1523.             -barrelheight * 0.65 / clientFovMultiplier
  1524.           );
  1525.           ctx.lineTo(
  1526.             barrelwidth / 2 / clientFovMultiplier,
  1527.             -barrelheight * 0.55 / clientFovMultiplier
  1528.           );
  1529.           ctx.fill();
  1530.           if (CRTP != 'simplistic') {
  1531.           ctx.stroke();
  1532.           };
  1533.         }
  1534.         ctx.restore();
  1535.       }
  1536.       else if (object.name=="Champion"){
  1537.         //draw spikes
  1538.         var numberOfSpikes = 5;
  1539.         var outerRadius = object.width / clientFovMultiplier * 1.3;
  1540.         var innerRadius = object.width / clientFovMultiplier /1.3;
  1541.         var rot = (Math.PI / 2) * 3;//dont change this, or else will have strange extra lines
  1542.         var x = 0;
  1543.         var y = 0;
  1544.         ctx.fillStyle = bodyColors.barrel.col;
  1545.         ctx.strokeStyle = bodyColors.barrel.outline;
  1546.         ctx.save();
  1547.         ctx.rotate(90 * Math.PI / 180);
  1548.         ctx.beginPath();
  1549.         ctx.moveTo(0, 0 - outerRadius);
  1550.         for (i = 0; i < numberOfSpikes; i++) {
  1551.           x = 0 + Math.cos(rot) * outerRadius;
  1552.           y = 0 + Math.sin(rot) * outerRadius;
  1553.           ctx.lineTo(x, y);
  1554.           rot += Math.PI / numberOfSpikes;
  1555.           x = 0 + Math.cos(rot) * innerRadius;
  1556.           y = 0 + Math.sin(rot) * innerRadius;
  1557.           ctx.lineTo(x, y);
  1558.           rot += Math.PI / numberOfSpikes;
  1559.         }
  1560.         ctx.lineTo(0, 0 - outerRadius);
  1561.         ctx.closePath();
  1562.         ctx.fill();
  1563.           if (CRTP != 'simplistic') {
  1564.           ctx.stroke();
  1565.           };
  1566.         ctx.restore();
  1567.       }
  1568.       var chooseflash = 3;
  1569.       if (object.hit > 0) {
  1570.         //if shape is hit, choose whether it's color is white or original color to create flashing effect
  1571.         chooseflash = Math.floor(Math.random() * 3); //random number 0, 1 or 2
  1572.       }
  1573.       if (chooseflash == 0) {
  1574.         ctx.fillStyle = "white";
  1575.       } else if (chooseflash == 1) {
  1576.         ctx.fillStyle = "pink";
  1577.       } else {
  1578.         ctx.fillStyle = botcolors[object.name].color;
  1579.       }
  1580.       ctx.strokeStyle = botcolors[object.name].outline;
  1581.       //draw body
  1582.       if (object.side==0) {
  1583.         //draw circle
  1584.         ctx.beginPath();
  1585.         ctx.arc(0, 0, object.width / clientFovMultiplier, 0, 2 * Math.PI);
  1586.         ctx.fill();
  1587.         ctx.stroke();
  1588.       } else if (object.side>=0) {
  1589.         if (object.hasOwnProperty('randomPointsArrayX')){
  1590.           //draw for rock and boulder
  1591.           //POLYGON WITH IRREGULAR SIDES
  1592.           ctx.rotate(-object.angle); //rotate back so that rock wont rotate to face you
  1593.           var rockSides = object.side;
  1594.           ctx.beginPath();
  1595.           ctx.moveTo(
  1596.             0 + (object.width / clientFovMultiplier) * Math.cos(0),
  1597.             0 + (object.width / clientFovMultiplier) * Math.sin(0)
  1598.           );
  1599.           for (var i = 1; i <= rockSides; i += 1) {
  1600.             var XRandom = object.randomPointsArrayX[i - 1];
  1601.             var YRandom = object.randomPointsArrayY[i - 1];
  1602.             ctx.lineTo(XRandom + (object.width / clientFovMultiplier) * Math.cos((i * 2 * Math.PI) / rockSides),
  1603.               YRandom + (object.width / clientFovMultiplier) * Math.sin((i * 2 * Math.PI) / rockSides)
  1604.             );
  1605.           }
  1606.           ctx.fill();
  1607.           ctx.stroke();
  1608.         }
  1609.         else{//normal spawner
  1610.           if (object.name=="Cluster"||object.name=="Pursuer"||object.name=="Champion"||object.name=="Infestor"){
  1611.             //need to rotate 72/2 degrees so that pentagon not facing vertex towards player
  1612.             ctx.rotate(Math.PI/object.side);//2 PI / sides / 2
  1613.           }
  1614.           ctx.beginPath();
  1615.           ctx.moveTo((object.width / clientFovMultiplier), 0);
  1616.           for (var i = 1; i <= object.side + 1; i += 1) {
  1617.             ctx.lineTo(
  1618.               (object.width / clientFovMultiplier) *
  1619.                   Math.cos((i * 2 * Math.PI) / object.side),
  1620.               (object.width / clientFovMultiplier) *
  1621.                   Math.sin((i * 2 * Math.PI) / object.side)
  1622.             );
  1623.           }
  1624.           ctx.fill();
  1625.           if (CRTP != 'simplistic') {
  1626.           ctx.stroke();
  1627.           };
  1628.           if (object.name=="Cluster"||object.name=="Pursuer"){
  1629.             ctx.rotate(-Math.PI/object.side);//rotate back
  1630.             //draw circle on top
  1631.             ctx.fillStyle = bodyColors.barrel.col;//light grey
  1632.             ctx.strokeStyle = bodyColors.barrel.outline;
  1633.             ctx.beginPath();
  1634.             ctx.arc(0, 0, object.width/2 / clientFovMultiplier, 0, 2 * Math.PI);
  1635.             ctx.fill();
  1636.           if (CRTP != 'simplistic') {
  1637.           ctx.stroke();
  1638.           };
  1639.           }
  1640.           else if (object.name=="Champion"){
  1641.             ctx.rotate(-Math.PI/object.side);//rotate back
  1642.             //draw circle on top
  1643.             ctx.fillStyle = "grey";//darker grey
  1644.             ctx.strokeStyle = "#5e5e5e";
  1645.             ctx.beginPath();
  1646.             ctx.arc(0, 0, object.width/2.5 / clientFovMultiplier, 0, 2 * Math.PI);
  1647.             ctx.fill();
  1648.           if (CRTP != 'simplistic') {
  1649.           ctx.stroke();
  1650.           };
  1651.           }
  1652.           else if (object.name=="Infestor"){
  1653.             ctx.rotate(-Math.PI/object.side);//rotate back
  1654.             //draw circle on top
  1655.             ctx.fillStyle = bodyColors.barrel.col;//light grey
  1656.             ctx.strokeStyle = bodyColors.barrel.outline;
  1657.             ctx.beginPath();
  1658.             ctx.arc(0, 0, object.width/5 / clientFovMultiplier, 0, 2 * Math.PI);
  1659.             ctx.fill();
  1660.           if (CRTP != 'simplistic') {
  1661.           ctx.stroke();
  1662.           };
  1663.           }
  1664.           else if (object.name=="Leech"){
  1665.             //draw circle on top
  1666.             ctx.fillStyle = bodyColors.barrel.col;//light grey
  1667.             ctx.strokeStyle = bodyColors.barrel.outline;
  1668.             ctx.beginPath();
  1669.             ctx.arc(0, 0, object.width/2 / clientFovMultiplier, 0, 2 * Math.PI);
  1670.             ctx.fill();
  1671.           if (CRTP != 'simplistic') {
  1672.           ctx.stroke();
  1673.           };
  1674.           }
  1675.           else if (object.name=="Pillbox"){//pillbox's barrel is visually a turret
  1676.             ctx.lineJoin = "round"; //make nice round corners
  1677.             ctx.rotate(90 * Math.PI / 180);
  1678.             Object.keys(object.barrels).forEach((barrel) => {
  1679.               //note that you must use [barrel] instead of .barrel, if not there will be an error
  1680.               let thisBarrel = object.barrels[barrel];
  1681.               ctx.fillStyle = bodyColors.barrel.col;
  1682.               ctx.strokeStyle = bodyColors.barrel.outline;
  1683.               ctx.fillRect(
  1684.                 -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1685.                   thisBarrel.x,
  1686.                 -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1687.                   clientFovMultiplier,
  1688.                 thisBarrel.barrelWidth / clientFovMultiplier,
  1689.                 (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1690.                   clientFovMultiplier
  1691.               );
  1692.               if (CRTP != 'simplistic') {
  1693.               ctx.strokeRect(
  1694.                 -thisBarrel.barrelWidth / 2 / clientFovMultiplier +
  1695.                   thisBarrel.x,
  1696.                 -(thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1697.                   clientFovMultiplier,
  1698.                 thisBarrel.barrelWidth / clientFovMultiplier,
  1699.                 (thisBarrel.barrelHeight - thisBarrel.barrelHeightChange) /
  1700.                   clientFovMultiplier
  1701.               );
  1702.               };
  1703.             });
  1704.             ctx.rotate(-90 * Math.PI / 180);
  1705.             //draw turret base
  1706.             ctx.beginPath();
  1707.             ctx.arc(
  1708.               0,
  1709.               0,
  1710.               (object.width / clientFovMultiplier) * 0.6,
  1711.               0,
  1712.               2 * Math.PI
  1713.             );
  1714.             ctx.fill();
  1715.           if (CRTP != 'simplistic') {
  1716.           ctx.stroke();
  1717.           };
  1718.             ctx.lineJoin = "miter"; //change back
  1719.           }
  1720.         }
  1721.       } else{//negative sides, draw a star! (cactus)
  1722.         var numberOfSpikes = -object.side;
  1723.         var outerRadius = object.width / clientFovMultiplier * 1.5;
  1724.         var innerRadius = object.width / clientFovMultiplier;
  1725.  
  1726.         var rot = (Math.PI / 2) * 3;//dont change this, or else will have strange extra lines
  1727.         var x = 0;
  1728.         var y = 0;
  1729.         ctx.rotate(-object.angle); //rotate back so that rock wont rotate to face you
  1730.         ctx.beginPath();
  1731.         ctx.moveTo(0, 0 - outerRadius);
  1732.         for (i = 0; i < numberOfSpikes; i++) {
  1733.           x = 0 + Math.cos(rot) * outerRadius;
  1734.           y = 0 + Math.sin(rot) * outerRadius;
  1735.           ctx.lineTo(x, y);
  1736.           rot += Math.PI / numberOfSpikes;
  1737.           x = 0 + Math.cos(rot) * innerRadius;
  1738.           y = 0 + Math.sin(rot) * innerRadius;
  1739.           ctx.lineTo(x, y);
  1740.           rot += Math.PI / numberOfSpikes;
  1741.         }
  1742.         ctx.lineTo(0, 0 - outerRadius);
  1743.         ctx.closePath();
  1744.         ctx.fill();
  1745.           if (CRTP != 'simplistic') {
  1746.           ctx.stroke();
  1747.           };
  1748.       }
  1749.       ctx.restore();
  1750.       if (object.health < object.maxhealth) {
  1751.         //draw health bar background
  1752.         var w = (object.width * 2) / clientFovMultiplier;
  1753.         var h = 7 / clientFovMultiplier;
  1754.         var r = h / 2;
  1755.         var x = drawingX - object.width / clientFovMultiplier;
  1756.         var y = drawingY + object.width / clientFovMultiplier + 10;
  1757.         ctx.fillStyle = "black";
  1758.         ctx.strokeStyle = "black";
  1759.         ctx.lineWidth = 2.5 / clientFovMultiplier;
  1760.         ctx.beginPath();
  1761.         ctx.moveTo(x + r, y);
  1762.         ctx.arcTo(x + w, y, x + w, y + h, r);
  1763.         ctx.arcTo(x + w, y + h, x, y + h, r);
  1764.         ctx.arcTo(x, y + h, x, y, r);
  1765.         ctx.arcTo(x, y, x + w, y, r);
  1766.         ctx.closePath();
  1767.         ctx.fill();
  1768.         ctx.stroke();
  1769.         //draw health bar
  1770.         if (object.health > 0) {
  1771.           w = (w / object.maxhealth) * object.health;
  1772.           if (r * 2 > w) {
  1773.             //prevent weird shape when radius more than width
  1774.             r = w / 2;
  1775.             y += (h - w) / 2; //move health bar so that it is centered vertically in black bar
  1776.             h = w;
  1777.           }
  1778.           ctx.fillStyle = botcolors[object.name].color;
  1779.           ctx.beginPath();
  1780.           ctx.moveTo(x + r, y);
  1781.           ctx.arcTo(x + w, y, x + w, y + h, r);
  1782.           ctx.arcTo(x + w, y + h, x, y + h, r);
  1783.           ctx.arcTo(x, y + h, x, y, r);
  1784.           ctx.arcTo(x, y, x + w, y, r);
  1785.           ctx.closePath();
  1786.           ctx.fill();
  1787.           ctx.stroke();
  1788.         }
  1789.       }
  1790.       ctx.fillStyle = "white";
  1791.       ctx.strokeStyle = "black";
  1792.       ctx.lineWidth = 5 / clientFovMultiplier;
  1793.       ctx.font = "700 " + 20 / clientFovMultiplier + "px Roboto";
  1794.       ctx.textAlign = "center";
  1795.       ctx.lineJoin = "round"; //prevent spikes above the capital letter "M"
  1796.       //note: if you stroke then fill, the words will be thicker and nicer. If you fill then stroke, the words are thinner.
  1797.       if ((showStaticMobName == "yes"||botcolors[object.name].static=="no") && (showMinionMobName == "yes"||botcolors[object.name].minion=="no")){//settings for showing static and minion names
  1798.         if (botcolors[object.name].specialty != "") {
  1799.           var specialtyText = " (" + botcolors[object.name].specialty + ")";
  1800.         } else {
  1801.           var specialtyText = "";
  1802.         }
  1803.         ctx.strokeText(
  1804.           object.name + specialtyText,
  1805.           drawingX,
  1806.           drawingY - object.width / clientFovMultiplier - 10
  1807.         );
  1808.         ctx.fillText(
  1809.           object.name + specialtyText,
  1810.           drawingX,
  1811.           drawingY - object.width / clientFovMultiplier - 10
  1812.         );
  1813.       }
  1814.       ctx.lineJoin = "miter"; //prevent spikes above the capital letter "M"
  1815.       if (object.hasOwnProperty("deadOpacity")) {
  1816.         //if this is an animation of a dead object
  1817.         ctx.globalAlpha = 1.0; //reset opacity
  1818.       }
  1819.       if (showHitBox == "yes") {
  1820.         //draw hitbox
  1821.         ctx.strokeStyle = "blue";
  1822.         ctx.lineWidth = 3;
  1823.         ctx.beginPath();
  1824.         ctx.arc(
  1825.           drawingX,
  1826.           drawingY,
  1827.           object.width / clientFovMultiplier,
  1828.           0,
  1829.           2 * Math.PI
  1830.         );
  1831.         ctx.stroke();
  1832.       }
  1833.     } else if (object.type == "shape") {
  1834.       if (object.hasOwnProperty("deadOpacity")) {
  1835.         //if this is an animation of a dead object
  1836.         ctx.globalAlpha = object.deadOpacity;
  1837.       }
  1838.       var radiantAuraSize =
  1839.         document.getElementById("sizevalue").innerHTML * auraWidth; //aura size determined by settings, but default is 5
  1840.       //draw shape
  1841.       ctx.save();
  1842.       ctx.translate(drawingX, drawingY);
  1843.       ctx.rotate((object.angle * Math.PI) / 180);
  1844.       if (object.hasOwnProperty("radtier")) {
  1845.         //radiant shape
  1846.         if (!radiantShapes.hasOwnProperty(id)) {
  1847.           var randomstate = Math.floor(Math.random() * 3); //randomly choose a color state for the radiant shape to start (if not when you spawn in cavern, all shapes same color)
  1848.           var randomtype = Math.floor(Math.random() * 2) + 1; //choose animation color type (1 or 2)
  1849.           if (randomtype == 1) {
  1850.             if (randomstate == 0) {
  1851.               radiantShapes[id] = {
  1852.                 red: 255,
  1853.                 blue: 0,
  1854.                 green: 0,
  1855.                 rgbstate: 1,
  1856.                 radtype: randomtype,
  1857.               }; //keep track of radiant shape colors (done in client code)
  1858.             } else if (randomstate == 1) {
  1859.               radiantShapes[id] = {
  1860.                 red: 199,
  1861.                 blue: 0,
  1862.                 green: 150,
  1863.                 rgbstate: 2,
  1864.                 radtype: randomtype,
  1865.               };
  1866.             } else if (randomstate == 2) {
  1867.               radiantShapes[id] = {
  1868.                 red: -1,
  1869.                 blue: 200,
  1870.                 green: 0,
  1871.                 rgbstate: 3,
  1872.                 radtype: randomtype,
  1873.               };
  1874.             }
  1875.           } else {
  1876.             if (randomstate == 0) {
  1877.               radiantShapes[id] = {
  1878.                 red: 118,
  1879.                 blue: 168,
  1880.                 green: 151,
  1881.                 rgbstate: 1,
  1882.                 radtype: randomtype,
  1883.               };
  1884.             } else if (randomstate == 1) {
  1885.               radiantShapes[id] = {
  1886.                 red: 209,
  1887.                 blue: 230,
  1888.                 green: 222,
  1889.                 rgbstate: 2,
  1890.                 radtype: randomtype,
  1891.               };
  1892.             } else if (randomstate == 2) {
  1893.               radiantShapes[id] = {
  1894.                 red: 234,
  1895.                 blue: 240,
  1896.                 green: 180,
  1897.                 rgbstate: 3,
  1898.                 radtype: randomtype,
  1899.               };
  1900.             }
  1901.           }
  1902.         }
  1903.         object.red = radiantShapes[id].red;
  1904.         object.blue = radiantShapes[id].blue;
  1905.         object.green = radiantShapes[id].green;
  1906.       }
  1907.       if (object.hasOwnProperty("red")) {
  1908.         //calculate color of spikes, which would be 20 higher than actual rgb value
  1909.         if (object.red + 150 <= 255) {
  1910.           var spikeRed = object.red + 150;
  1911.         } else {
  1912.           var spikeRed = 255;
  1913.         }
  1914.         if (object.blue + 150 <= 255) {
  1915.           var spikeBlue = object.blue + 150;
  1916.         } else {
  1917.           var spikeBlue = 255;
  1918.         }
  1919.         if (object.green + 150 <= 255) {
  1920.           var spikeGreen = object.green + 150;
  1921.         } else {
  1922.           var spikeGreen = 255;
  1923.         }
  1924.         if (object.radtier == 3) {
  1925.           //for high rarity radiant shapes, draw spikes
  1926.           ctx.rotate((extraSpikeRotate * Math.PI) / 180);
  1927.           ctx.fillStyle =
  1928.             "rgba(" +
  1929.             spikeRed +
  1930.             ", " +
  1931.             spikeGreen +
  1932.             ", " +
  1933.             spikeBlue +
  1934.             ", 0.7)";
  1935.           ctx.strokeStyle =
  1936.             "rgba(" +
  1937.             spikeRed +
  1938.             ", " +
  1939.             spikeGreen +
  1940.             ", " +
  1941.             spikeBlue +
  1942.             ", 0.3)";
  1943.           var numberOfSpikes = 6;
  1944.           var outerRadius =
  1945.             ((object.width * radiantAuraSize * 3) / clientFovMultiplier) *
  1946.             0.75;
  1947.           var innerRadius = (object.width / clientFovMultiplier) * 0.75;
  1948.  
  1949.           var rot = (Math.PI / 2) * 3;
  1950.           var x = 0;
  1951.           var y = 0;
  1952.  
  1953.           ctx.beginPath();
  1954.           ctx.moveTo(0, 0 - outerRadius);
  1955.           for (i = 0; i < numberOfSpikes; i++) {
  1956.             x = 0 + Math.cos(rot) * outerRadius;
  1957.             y = 0 + Math.sin(rot) * outerRadius;
  1958.             ctx.lineTo(x, y);
  1959.             rot += Math.PI / numberOfSpikes;
  1960.             x = 0 + Math.cos(rot) * innerRadius;
  1961.             y = 0 + Math.sin(rot) * innerRadius;
  1962.             ctx.lineTo(x, y);
  1963.             rot += Math.PI / numberOfSpikes;
  1964.           }
  1965.           ctx.lineTo(0, 0 - outerRadius);
  1966.           ctx.closePath();
  1967.           ctx.lineWidth = 3 / clientFovMultiplier;
  1968.           ctx.fill();
  1969.           ctx.stroke();
  1970.           ctx.rotate((-extraSpikeRotate * Math.PI) / 180);
  1971.         } else if (object.radtier == 4) {
  1972.           //for high rarity radiant shapes, draw spikes
  1973.           ctx.rotate((extraSpikeRotate1 * Math.PI) / 180);
  1974.           ctx.fillStyle =
  1975.             "rgba(" +
  1976.             spikeRed +
  1977.             ", " +
  1978.             spikeGreen +
  1979.             ", " +
  1980.             spikeBlue +
  1981.             ", 0.7)";
  1982.           ctx.strokeStyle =
  1983.             "rgba(" +
  1984.             spikeRed +
  1985.             ", " +
  1986.             spikeGreen +
  1987.             ", " +
  1988.             spikeBlue +
  1989.             ", 0.3)";
  1990.           var numberOfSpikes = 3;
  1991.           var outerRadius =
  1992.             (object.width * radiantAuraSize * 3) / clientFovMultiplier;
  1993.           var innerRadius = (object.width / clientFovMultiplier) * 0.5;
  1994.           var rot = (Math.PI / 2) * 3;
  1995.           var x = 0;
  1996.           var y = 0;
  1997.           ctx.beginPath();
  1998.           ctx.moveTo(0, 0 - outerRadius);
  1999.           for (i = 0; i < numberOfSpikes; i++) {
  2000.             x = 0 + Math.cos(rot) * outerRadius;
  2001.             y = 0 + Math.sin(rot) * outerRadius;
  2002.             ctx.lineTo(x, y);
  2003.             rot += Math.PI / numberOfSpikes;
  2004.             x = 0 + Math.cos(rot) * innerRadius;
  2005.             y = 0 + Math.sin(rot) * innerRadius;
  2006.             ctx.lineTo(x, y);
  2007.             rot += Math.PI / numberOfSpikes;
  2008.           }
  2009.           ctx.lineTo(0, 0 - outerRadius);
  2010.           ctx.closePath();
  2011.           ctx.lineWidth = 3 / clientFovMultiplier;
  2012.           ctx.fill();
  2013.           ctx.stroke();
  2014.           ctx.rotate((-extraSpikeRotate1 * Math.PI) / 180);
  2015.           ctx.rotate((extraSpikeRotate2 * Math.PI) / 180);
  2016.           var numberOfSpikes = 6;
  2017.           var outerRadius =
  2018.             ((object.width * radiantAuraSize * 3) / clientFovMultiplier) *
  2019.             0.5;
  2020.           var innerRadius = (object.width / clientFovMultiplier) * 0.5;
  2021.           var rot = (Math.PI / 2) * 3;
  2022.           var x = 0;
  2023.           var y = 0;
  2024.           ctx.beginPath();
  2025.           ctx.moveTo(0, 0 - outerRadius);
  2026.           for (i = 0; i < numberOfSpikes; i++) {
  2027.             x = 0 + Math.cos(rot) * outerRadius;
  2028.             y = 0 + Math.sin(rot) * outerRadius;
  2029.             ctx.lineTo(x, y);
  2030.             rot += Math.PI / numberOfSpikes;
  2031.             x = 0 + Math.cos(rot) * innerRadius;
  2032.             y = 0 + Math.sin(rot) * innerRadius;
  2033.             ctx.lineTo(x, y);
  2034.             rot += Math.PI / numberOfSpikes;
  2035.           }
  2036.           ctx.lineTo(0, 0 - outerRadius);
  2037.           ctx.closePath();
  2038.           ctx.lineWidth = 3 / clientFovMultiplier;
  2039.           ctx.fill();
  2040.           ctx.stroke();
  2041.           ctx.rotate((-extraSpikeRotate2 * Math.PI) / 180);
  2042.         } else if (object.radtier == 5) {
  2043.           //for high rarity radiant shapes, draw spikes
  2044.           ctx.rotate((extraSpikeRotate1 * Math.PI) / 180);
  2045.           ctx.fillStyle =
  2046.             "rgba(" +
  2047.             spikeRed +
  2048.             ", " +
  2049.             spikeGreen +
  2050.             ", " +
  2051.             spikeBlue +
  2052.             ", 0.7)";
  2053.           ctx.strokeStyle =
  2054.             "rgba(" +
  2055.             spikeRed +
  2056.             ", " +
  2057.             spikeGreen +
  2058.             ", " +
  2059.             spikeBlue +
  2060.             ", 0.3)";
  2061.           var numberOfSpikes = 3;
  2062.           var outerRadius =
  2063.             ((object.width * radiantAuraSize * 3) / clientFovMultiplier) *
  2064.             1.5;
  2065.           var innerRadius = (object.width / clientFovMultiplier) * 0.5;
  2066.           var rot = (Math.PI / 2) * 3;
  2067.           var x = 0;
  2068.           var y = 0;
  2069.           ctx.beginPath();
  2070.           ctx.moveTo(0, 0 - outerRadius);
  2071.           for (i = 0; i < numberOfSpikes; i++) {
  2072.             x = 0 + Math.cos(rot) * outerRadius;
  2073.             y = 0 + Math.sin(rot) * outerRadius;
  2074.             ctx.lineTo(x, y);
  2075.             rot += Math.PI / numberOfSpikes;
  2076.             x = 0 + Math.cos(rot) * innerRadius;
  2077.             y = 0 + Math.sin(rot) * innerRadius;
  2078.             ctx.lineTo(x, y);
  2079.             rot += Math.PI / numberOfSpikes;
  2080.           }
  2081.           ctx.lineTo(0, 0 - outerRadius);
  2082.           ctx.closePath();
  2083.           ctx.lineWidth = 3 / clientFovMultiplier;
  2084.           ctx.fill();
  2085.           ctx.stroke();
  2086.           ctx.rotate((-extraSpikeRotate1 * Math.PI) / 180);
  2087.           ctx.rotate((extraSpikeRotate2 * Math.PI) / 180);
  2088.           var numberOfSpikes = 3;
  2089.           var outerRadius =
  2090.             ((object.width * radiantAuraSize * 3) / clientFovMultiplier) *
  2091.             0.5;
  2092.           var innerRadius = (object.width / clientFovMultiplier) * 0.5;
  2093.           var rot = (Math.PI / 2) * 3;
  2094.           var x = 0;
  2095.           var y = 0;
  2096.           ctx.beginPath();
  2097.           ctx.moveTo(0, 0 - outerRadius);
  2098.           for (i = 0; i < numberOfSpikes; i++) {
  2099.             x = 0 + Math.cos(rot) * outerRadius;
  2100.             y = 0 + Math.sin(rot) * outerRadius;
  2101.             ctx.lineTo(x, y);
  2102.             rot += Math.PI / numberOfSpikes;
  2103.             x = 0 + Math.cos(rot) * innerRadius;
  2104.             y = 0 + Math.sin(rot) * innerRadius;
  2105.             ctx.lineTo(x, y);
  2106.             rot += Math.PI / numberOfSpikes;
  2107.           }
  2108.           ctx.lineTo(0, 0 - outerRadius);
  2109.           ctx.closePath();
  2110.           ctx.lineWidth = 3 / clientFovMultiplier;
  2111.           ctx.fill();
  2112.           ctx.stroke();
  2113.           ctx.rotate((-extraSpikeRotate2 * Math.PI) / 180);
  2114.         }
  2115.         //if shape is radiant
  2116.         //draw aura
  2117.  
  2118.         //old code where aura was a gradient
  2119.         /*
  2120.             const gradient = ctx.createRadialGradient(0, 0, object.width/clientFovMultiplier, 0, 0, object.width/clientFovMultiplier*radiantAuraSize);
  2121.             gradient.addColorStop(0, 'rgba(' + object.red + ', ' + object.green + ', ' + object.blue + ', 0.3)');
  2122.             gradient.addColorStop(0.5, 'rgba(' + object.red + ', ' + object.green + ', ' + object.blue + ', 0.1)');
  2123.             gradient.addColorStop(1, 'rgba(' + object.red + ', ' + object.green + ', ' + object.blue + ', 0.0)');
  2124.             ctx.fillStyle = gradient;
  2125.             ctx.beginPath();
  2126.             */
  2127.  
  2128.         //old code where aura have shape
  2129.         ctx.fillStyle =
  2130.           "rgba(" +
  2131.           object.red +
  2132.           ", " +
  2133.           object.green +
  2134.           ", " +
  2135.           object.blue +
  2136.           ", 0.3)";
  2137.         ctx.strokeStyle =
  2138.           "rgba(" +
  2139.           object.red +
  2140.           ", " +
  2141.           object.green +
  2142.           ", " +
  2143.           object.blue +
  2144.           ", 0.3)";
  2145.         ctx.lineWidth = 3 / clientFovMultiplier;
  2146.         ctx.beginPath();
  2147.  
  2148.         var shapeaurasize = object.radtier;
  2149.         if (shapeaurasize > 3) {
  2150.           shapeaurasize = 3; //prevent huge auras
  2151.         }
  2152.         ctx.moveTo(
  2153.           0 +
  2154.             ((object.width * radiantAuraSize * shapeaurasize) /
  2155.               clientFovMultiplier) *
  2156.               Math.cos(0),
  2157.           0 +
  2158.             ((object.width * radiantAuraSize * shapeaurasize) /
  2159.               clientFovMultiplier) *
  2160.               Math.sin(0)
  2161.         );
  2162.         for (var i = 1; i <= object.sides + 1; i += 1) {
  2163.           ctx.lineTo(
  2164.             0 +
  2165.               ((object.width * radiantAuraSize * shapeaurasize) /
  2166.                 clientFovMultiplier) *
  2167.                 Math.cos((i * 2 * Math.PI) / object.sides),
  2168.             0 +
  2169.               ((object.width * radiantAuraSize * shapeaurasize) /
  2170.                 clientFovMultiplier) *
  2171.                 Math.sin((i * 2 * Math.PI) / object.sides)
  2172.           );
  2173.         }
  2174.  
  2175.         //ctx.arc(0, 0, object.width/clientFovMultiplier*radiantAuraSize, 0, 2 * Math.PI);
  2176.         ctx.fill();
  2177.         ctx.stroke();
  2178.         var shadeFactor = 3 / 4; //smaller the value, darker the shade
  2179.         ctx.strokeStyle =
  2180.           "rgb(" +
  2181.           object.red * shadeFactor +
  2182.           ", " +
  2183.           object.green * shadeFactor +
  2184.           ", " +
  2185.           object.blue * shadeFactor +
  2186.           ")";
  2187.         ctx.fillStyle =
  2188.           "rgb(" +
  2189.           object.red +
  2190.           ", " +
  2191.           object.green +
  2192.           ", " +
  2193.           object.blue +
  2194.           ")";
  2195.         if (object.hit > 0) {
  2196.           //if shape is hit
  2197.           ctx.strokeStyle =
  2198.             "rgb(" +
  2199.             (object.red * shadeFactor + 20) +
  2200.             ", " +
  2201.             (object.green * shadeFactor + 20) +
  2202.             ", " +
  2203.             (object.blue * shadeFactor + 20) +
  2204.             ")";
  2205.           ctx.fillStyle =
  2206.             "rgb(" +
  2207.             (object.red + 20) +
  2208.             ", " +
  2209.             (object.green + 20) +
  2210.             ", " +
  2211.             (object.blue + 20) +
  2212.             ")";
  2213.         }
  2214.  
  2215.         //choose whether a particle would spawn
  2216.         //particle spawn chance based on number of sides the shape has, so square has less particles
  2217.         if (spawnradparticle == "yes"){
  2218.           var chooseValue = 20 - object.sides * 2; //lower the number means more particles spawned
  2219.           if (chooseValue < 5) {
  2220.             //5 refers to mimimum particle spawn chance
  2221.             chooseValue = 5;
  2222.           }
  2223.           var choosing = Math.floor(Math.random() * chooseValue); //choose if particle spawn
  2224.           if (choosing == 1) {
  2225.             //spawn a particle
  2226.             var angleDegrees = Math.floor(Math.random() * 360); //choose angle in degrees
  2227.             var angleRadians = (angleDegrees * Math.PI) / 180; //convert to radians
  2228.             var randomDistFromCenter =
  2229.               Math.floor(Math.random() * object.width * 2) - object.width;
  2230.             radparticles[particleID] = {
  2231.               angle: angleRadians,
  2232.               x: object.x + randomDistFromCenter * Math.cos(angleRadians),
  2233.               y: object.y + randomDistFromCenter * Math.sin(angleRadians),
  2234.               width: 5,
  2235.               height: 5,
  2236.               speed: 1,
  2237.               timer: 50,
  2238.               maxtimer: 50,
  2239.               color:
  2240.                 "rgba(" +
  2241.                 object.red +
  2242.                 "," +
  2243.                 object.green +
  2244.                 "," +
  2245.                 object.blue +
  2246.                 ",.5)",
  2247.               outline:
  2248.                 "rgba(" +
  2249.                 (object.red* shadeFactor + 20) +
  2250.                 "," +
  2251.                 (object.green* shadeFactor + 20) +
  2252.                 "," +
  2253.                 (object.blue* shadeFactor + 20) +
  2254.                 ",.5)",
  2255.               type: "particle",
  2256.             };
  2257.             particleID++;
  2258.           }
  2259.         }
  2260.       } else {
  2261.         //if not radiant
  2262.         //get shape colors in client code based on theme
  2263.         ctx.fillStyle = shapecolors[object.sides][colortheme].color;
  2264.         ctx.strokeStyle = shapecolors[object.sides][colortheme].outline;
  2265.         if (object.hit > 0) {
  2266.           //if shape is hit
  2267.           ctx.fillStyle = shapecolors[object.sides][colortheme].hitcolor;
  2268.           ctx.strokeStyle =
  2269.             shapecolors[object.sides][colortheme].hitoutline;
  2270.         }
  2271.       }
  2272.       ctx.lineJoin = "round"; //make corners of shape round
  2273.       if (object.sides == "star") {
  2274.         //draw a star
  2275.  
  2276.         var numberOfSpikes = 5;
  2277.         var outerRadius = object.width / clientFovMultiplier;
  2278.         var innerRadius = (object.width / clientFovMultiplier / 3) * 2;
  2279.  
  2280.         var rot = (Math.PI / 2) * 3;
  2281.         var x = 0;
  2282.         var y = 0;
  2283.  
  2284.         ctx.beginPath();
  2285.         ctx.moveTo(0, 0 - outerRadius);
  2286.         for (i = 0; i < numberOfSpikes; i++) {
  2287.           x = 0 + Math.cos(rot) * outerRadius;
  2288.           y = 0 + Math.sin(rot) * outerRadius;
  2289.           ctx.lineTo(x, y);
  2290.           rot += Math.PI / numberOfSpikes;
  2291.           x = 0 + Math.cos(rot) * innerRadius;
  2292.           y = 0 + Math.sin(rot) * innerRadius;
  2293.           ctx.lineTo(x, y);
  2294.           rot += Math.PI / numberOfSpikes;
  2295.         }
  2296.         ctx.lineTo(0, 0 - outerRadius);
  2297.         ctx.closePath();
  2298.         ctx.lineWidth = 4 / clientFovMultiplier;
  2299.         ctx.fill();
  2300.         ctx.stroke();
  2301.       } else {
  2302.         ctx.lineWidth = 4 / clientFovMultiplier;
  2303.         ctx.beginPath();
  2304.         ctx.moveTo(
  2305.           0 + (object.width / clientFovMultiplier) * Math.cos(0),
  2306.           0 + (object.width / clientFovMultiplier) * Math.sin(0)
  2307.         );
  2308.         for (var i = 1; i <= object.sides + 1; i += 1) {
  2309.           ctx.lineTo(
  2310.             0 +
  2311.               (object.width / clientFovMultiplier) *
  2312.                 Math.cos((i * 2 * Math.PI) / object.sides),
  2313.             0 +
  2314.               (object.width / clientFovMultiplier) *
  2315.                 Math.sin((i * 2 * Math.PI) / object.sides)
  2316.           );
  2317.         }
  2318.         ctx.fill();
  2319.         ctx.stroke();
  2320.       }
  2321.       ctx.lineJoin = "miter"; //change back to default
  2322.       ctx.restore(); //must restore to reset angle rotation so health bar wont be rotated sideways
  2323.       //draw shape's health bar
  2324.       if (object.health < object.maxhealth) {
  2325.         //draw health bar background
  2326.         var w = (object.width / clientFovMultiplier) * 2;
  2327.         var h = 7 / clientFovMultiplier;
  2328.         var r = h / 2;
  2329.         var x = drawingX - object.width / clientFovMultiplier;
  2330.         var y = drawingY + object.width / clientFovMultiplier + 10;
  2331.         ctx.fillStyle = "black";
  2332.         ctx.strokeStyle = "black";
  2333.         ctx.lineWidth = 2.5 / clientFovMultiplier;//determines with of black area
  2334.         ctx.beginPath();
  2335.         ctx.moveTo(x + r, y);
  2336.         ctx.arcTo(x + w, y, x + w, y + h, r);
  2337.         ctx.arcTo(x + w, y + h, x, y + h, r);
  2338.         ctx.arcTo(x, y + h, x, y, r);
  2339.         ctx.arcTo(x, y, x + w, y, r);
  2340.         ctx.closePath();
  2341.         ctx.fill();
  2342.         ctx.stroke();
  2343.         //draw health bar
  2344.         if (object.health > 0) {
  2345.           //dont draw health bar if negative health
  2346.           w = (w / object.maxhealth) * object.health;
  2347.           if (r * 2 > w) {
  2348.             //prevent weird shape when radius more than width
  2349.             r = w / 2;
  2350.             y += (h - w) / 2; //move health bar so that it is centered vertically in black bar
  2351.             h = w;
  2352.           }
  2353.           if (object.hasOwnProperty("red")) {
  2354.             //if shape is radiant
  2355.             ctx.fillStyle =
  2356.               "rgb(" +
  2357.               object.red +
  2358.               ", " +
  2359.               object.green +
  2360.               ", " +
  2361.               object.blue +
  2362.               ")";
  2363.           } else {
  2364.             ctx.fillStyle = shapecolors[object.sides][colortheme].color;
  2365.             if (object.sides==10||object.sides==11||object.sides==14){//these shapes are very dark, cannot see health bar
  2366.               ctx.fillStyle = shapecolors[12][colortheme].color;//use ddecagon's grey color for health bar
  2367.             }
  2368.           }
  2369.           ctx.beginPath();
  2370.           ctx.moveTo(x + r, y);
  2371.           ctx.arcTo(x + w, y, x + w, y + h, r);
  2372.           ctx.arcTo(x + w, y + h, x, y + h, r);
  2373.           ctx.arcTo(x, y + h, x, y, r);
  2374.           ctx.arcTo(x, y, x + w, y, r);
  2375.           ctx.closePath();
  2376.           ctx.fill();
  2377.           ctx.stroke();
  2378.         }
  2379.       }
  2380.       if (object.hasOwnProperty("deadOpacity")) {
  2381.         //if this is an animation of a dead object
  2382.         ctx.globalAlpha = 1.0; //reset opacity
  2383.       }
  2384.       if (showHitBox == "yes") {
  2385.         //draw hitbox
  2386.         ctx.strokeStyle = "blue";
  2387.         ctx.lineWidth = 3;
  2388.         ctx.beginPath();
  2389.         ctx.arc(
  2390.           drawingX,
  2391.           drawingY,
  2392.           object.width / clientFovMultiplier,
  2393.           0,
  2394.           2 * Math.PI
  2395.         );
  2396.         ctx.stroke();
  2397.       }
  2398.     } else if (object.type == "spawner") {
  2399.       //spawner in sanctuary
  2400.       ctx.save();
  2401.       ctx.translate(drawingX, drawingY);
  2402.       ctx.rotate(object.angle);
  2403.       ctx.lineJoin = "round"; //make corners of shape round
  2404.  
  2405.       //actual body
  2406.       ctx.fillStyle = object.baseColor;
  2407.       ctx.strokeStyle = object.baseOutline;
  2408.       ctx.beginPath();
  2409.       ctx.moveTo(
  2410.         0 + (object.basewidth6 / clientFovMultiplier) * Math.cos(0),
  2411.         0 + (object.basewidth6 / clientFovMultiplier) * Math.sin(0)
  2412.       );
  2413.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2414.         ctx.lineTo(
  2415.           0 +
  2416.             (object.basewidth6 / clientFovMultiplier) *
  2417.               Math.cos((i * 2 * Math.PI) / object.sides),
  2418.           0 +
  2419.             (object.basewidth6 / clientFovMultiplier) *
  2420.               Math.sin((i * 2 * Math.PI) / object.sides)
  2421.         );
  2422.       }
  2423.       ctx.fill();
  2424.           if (CRTP != 'simplistic') {
  2425.           ctx.stroke();
  2426.           };
  2427.       ctx.fillStyle = object.color;
  2428.       ctx.strokeStyle = object.outline;
  2429.       ctx.beginPath();
  2430.       ctx.moveTo(
  2431.         0 + (object.width / clientFovMultiplier) * Math.cos(0),
  2432.         0 + (object.width / clientFovMultiplier) * Math.sin(0)
  2433.       );
  2434.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2435.         ctx.lineTo(
  2436.           0 +
  2437.             (object.width / clientFovMultiplier) *
  2438.               Math.cos((i * 2 * Math.PI) / object.sides),
  2439.           0 +
  2440.             (object.width / clientFovMultiplier) *
  2441.               Math.sin((i * 2 * Math.PI) / object.sides)
  2442.         );
  2443.       }
  2444.       ctx.fill();
  2445.           if (CRTP != 'simplistic') {
  2446.           ctx.stroke();
  2447.           };
  2448.       ctx.fillStyle = object.baseColor;
  2449.       ctx.strokeStyle = object.baseOutline;
  2450.       ctx.beginPath();
  2451.       ctx.moveTo(
  2452.         0 + (object.basewidth4 / clientFovMultiplier) * Math.cos(0),
  2453.         0 + (object.basewidth4 / clientFovMultiplier) * Math.sin(0)
  2454.       );
  2455.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2456.         ctx.lineTo(
  2457.           0 +
  2458.             (object.basewidth4 / clientFovMultiplier) *
  2459.               Math.cos((i * 2 * Math.PI) / object.sides),
  2460.           0 +
  2461.             (object.basewidth4 / clientFovMultiplier) *
  2462.               Math.sin((i * 2 * Math.PI) / object.sides)
  2463.         );
  2464.       }
  2465.       ctx.fill();
  2466.           if (CRTP != 'simplistic') {
  2467.           ctx.stroke();
  2468.           };
  2469.       ctx.fillStyle = object.color;
  2470.       ctx.strokeStyle = object.outline;
  2471.       ctx.lineWidth = 4 / clientFovMultiplier;
  2472.       ctx.beginPath();
  2473.       ctx.moveTo(
  2474.         0 + (object.basewidth5 / clientFovMultiplier) * Math.cos(0),
  2475.         0 + (object.basewidth5 / clientFovMultiplier) * Math.sin(0)
  2476.       );
  2477.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2478.         ctx.lineTo(
  2479.           0 +
  2480.             (object.basewidth5 / clientFovMultiplier) *
  2481.               Math.cos((i * 2 * Math.PI) / object.sides),
  2482.           0 +
  2483.             (object.basewidth5 / clientFovMultiplier) *
  2484.               Math.sin((i * 2 * Math.PI) / object.sides)
  2485.         );
  2486.       }
  2487.       ctx.fill();
  2488.           if (CRTP != 'simplistic') {
  2489.           ctx.stroke();
  2490.           };
  2491.       ctx.fillStyle = object.baseColor;
  2492.       ctx.strokeStyle = object.baseOutline;
  2493.       ctx.beginPath();
  2494.       ctx.moveTo(
  2495.         0 + (object.basewidth1 / clientFovMultiplier) * Math.cos(0),
  2496.         0 + (object.basewidth1 / clientFovMultiplier) * Math.sin(0)
  2497.       );
  2498.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2499.         ctx.lineTo(
  2500.           0 +
  2501.             (object.basewidth1 / clientFovMultiplier) *
  2502.               Math.cos((i * 2 * Math.PI) / object.sides),
  2503.           0 +
  2504.             (object.basewidth1 / clientFovMultiplier) *
  2505.               Math.sin((i * 2 * Math.PI) / object.sides)
  2506.         );
  2507.       }
  2508.       ctx.fill();
  2509.           if (CRTP != 'simplistic') {
  2510.           ctx.stroke();
  2511.           };
  2512.       ctx.fillStyle = object.barrelColor;
  2513.       ctx.strokeStyle = object.barrelOutline;
  2514.       ctx.beginPath();
  2515.       ctx.moveTo(
  2516.         0 + (object.basewidth2 / clientFovMultiplier) * Math.cos(0),
  2517.         0 + (object.basewidth2 / clientFovMultiplier) * Math.sin(0)
  2518.       );
  2519.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2520.         ctx.lineTo(
  2521.           0 +
  2522.             (object.basewidth2 / clientFovMultiplier) *
  2523.               Math.cos((i * 2 * Math.PI) / object.sides),
  2524.           0 +
  2525.             (object.basewidth2 / clientFovMultiplier) *
  2526.               Math.sin((i * 2 * Math.PI) / object.sides)
  2527.         );
  2528.       }
  2529.       ctx.fill();
  2530.           if (CRTP != 'simplistic') {
  2531.           ctx.stroke();
  2532.           };
  2533.       ctx.fillStyle = object.color;
  2534.       ctx.strokeStyle = object.outline;
  2535.       ctx.lineWidth = 4 / clientFovMultiplier;
  2536.       ctx.beginPath();
  2537.       ctx.moveTo(
  2538.         0 + (object.basewidth3 / clientFovMultiplier) * Math.cos(0),
  2539.         0 + (object.basewidth3 / clientFovMultiplier) * Math.sin(0)
  2540.       );
  2541.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2542.         ctx.lineTo(
  2543.           0 +
  2544.             (object.basewidth3 / clientFovMultiplier) *
  2545.               Math.cos((i * 2 * Math.PI) / object.sides),
  2546.           0 +
  2547.             (object.basewidth3 / clientFovMultiplier) *
  2548.               Math.sin((i * 2 * Math.PI) / object.sides)
  2549.         );
  2550.       }
  2551.       ctx.fill();
  2552.           if (CRTP != 'simplistic') {
  2553.           ctx.stroke();
  2554.           };
  2555.       //draw barrels
  2556.       ctx.fillStyle = object.barrelColor;
  2557.       ctx.strokeStyle = object.barrelOutline;
  2558.       //trapezoid at the tip
  2559.       var barrelwidth = 140;
  2560.       var barrelheight = 28;
  2561.       //rectangle
  2562.       var barrelwidth2 = 180;
  2563.       var barrelheight2 = 28;
  2564.       //base trapezoid
  2565.       var barrelwidth3 = 140;
  2566.       var barrelheight3 = 80;
  2567.       //note that trapezoids and rectangles are drawn differently
  2568.  
  2569.       var barrelDistanceFromCenter = (object.width * (Math.cos(Math.PI/object.sides)));//width of middle of polygon (less than width of circle)
  2570.  
  2571.       function drawSancBarrel(barNum){
  2572.         var barAngle = 360/object.sides*(barNum+0.5);//half of a side, cuz barrel is in between sides
  2573.         var barrelX = Math.cos((barAngle * Math.PI) / 180) * (barrelDistanceFromCenter+ barrelheight+ barrelheight2+ barrelheight3);//object.width * 0.9
  2574.         var barrelY = Math.sin((barAngle * Math.PI) / 180) * (barrelDistanceFromCenter+ barrelheight+ barrelheight2+ barrelheight3);
  2575.         var barrelX2 = Math.cos((barAngle * Math.PI) / 180) * (barrelDistanceFromCenter + barrelheight2 + barrelheight3); //move rectangle barrel downwards
  2576.         var barrelY2 = Math.sin((barAngle * Math.PI) / 180) * (barrelDistanceFromCenter + barrelheight2 + barrelheight3);
  2577.         var barrelX3 = Math.cos((barAngle * Math.PI) / 180) * (barrelDistanceFromCenter + barrelheight3); //move base trapezoid barrel downwards
  2578.         var barrelY3 = Math.sin((barAngle * Math.PI) / 180) * (barrelDistanceFromCenter + barrelheight3);
  2579.         //base trapezoid
  2580.         ctx.save();
  2581.         ctx.translate(
  2582.           barrelX3 / clientFovMultiplier,
  2583.           barrelY3 / clientFovMultiplier
  2584.         );
  2585.         ctx.rotate(((barAngle - 90) * Math.PI) / 180);
  2586.         ctx.beginPath();
  2587.         ctx.moveTo(
  2588.           ((-barrelwidth3 / 3) * 2) / clientFovMultiplier,
  2589.           -barrelheight3 / clientFovMultiplier
  2590.         );
  2591.         ctx.lineTo(-barrelwidth3 / clientFovMultiplier, 0);
  2592.         ctx.lineTo(barrelwidth3 / clientFovMultiplier, 0);
  2593.         ctx.lineTo(
  2594.           ((barrelwidth3 / 3) * 2) / clientFovMultiplier,
  2595.           -barrelheight3 / clientFovMultiplier
  2596.         );
  2597.         ctx.lineTo(
  2598.           ((-barrelwidth3 / 3) * 2) / clientFovMultiplier,
  2599.           -barrelheight3 / clientFovMultiplier
  2600.         );
  2601.         ctx.fill();
  2602.           if (CRTP != 'simplistic') {
  2603.           ctx.stroke();
  2604.           };
  2605.         ctx.restore();
  2606.         //rectangle
  2607.         ctx.save();
  2608.         ctx.translate(
  2609.           barrelX2 / clientFovMultiplier,
  2610.           barrelY2 / clientFovMultiplier
  2611.         );
  2612.         ctx.rotate(((barAngle - 90) * Math.PI) / 180);
  2613.         ctx.fillRect(
  2614.           -barrelwidth2 / 2 / clientFovMultiplier,
  2615.           -barrelheight2 / clientFovMultiplier,
  2616.           barrelwidth2 / clientFovMultiplier,
  2617.           barrelheight2 / clientFovMultiplier
  2618.         );
  2619.         if (CRTP != 'simplistic') {
  2620.         ctx.strokeRect(
  2621.           -barrelwidth2 / 2 / clientFovMultiplier,
  2622.           -barrelheight2 / clientFovMultiplier,
  2623.           barrelwidth2 / clientFovMultiplier,
  2624.           barrelheight2 / clientFovMultiplier
  2625.         );
  2626.         };
  2627.         ctx.restore();
  2628.         //trapezium at the tip
  2629.         ctx.save();
  2630.         ctx.translate(
  2631.           barrelX / clientFovMultiplier,
  2632.           barrelY / clientFovMultiplier
  2633.         );
  2634.         ctx.rotate(((barAngle - 90) * Math.PI) / 180);
  2635.         ctx.beginPath();
  2636.         ctx.moveTo(-barrelwidth / 2 / clientFovMultiplier, 0);
  2637.         ctx.lineTo(
  2638.           -barrelwidth / clientFovMultiplier,
  2639.           -barrelheight / clientFovMultiplier
  2640.         );
  2641.         ctx.lineTo(
  2642.           barrelwidth / clientFovMultiplier,
  2643.           -barrelheight / clientFovMultiplier
  2644.         );
  2645.         ctx.lineTo(barrelwidth / 2 / clientFovMultiplier, 0);
  2646.         ctx.lineTo(-barrelwidth / 2 / clientFovMultiplier, 0);
  2647.         ctx.fill();
  2648.           if (CRTP != 'simplistic') {
  2649.           ctx.stroke();
  2650.           };
  2651.         ctx.restore();
  2652.       }
  2653.  
  2654.       for (let i = 0; i < object.sides; i++) {
  2655.         drawSancBarrel(i);
  2656.       }
  2657.       //draw aura
  2658.       ctx.fillStyle = object.auraColor;
  2659.       ctx.lineWidth = 4 / clientFovMultiplier;
  2660.       ctx.beginPath();
  2661.       ctx.moveTo(
  2662.         0 + (object.auraWidth / clientFovMultiplier) * Math.cos(0),
  2663.         0 + (object.auraWidth / clientFovMultiplier) * Math.sin(0)
  2664.       );
  2665.       for (var i = 1; i <= object.sides + 1; i += 1) {
  2666.         ctx.lineTo(
  2667.           0 +
  2668.             (object.auraWidth / clientFovMultiplier) *
  2669.               Math.cos((i * 2 * Math.PI) / object.sides),
  2670.           0 +
  2671.             (object.auraWidth / clientFovMultiplier) *
  2672.               Math.sin((i * 2 * Math.PI) / object.sides)
  2673.         );
  2674.       }
  2675.       ctx.fill();
  2676.       ctx.lineJoin = "miter"; //change back
  2677.       ctx.restore();
  2678.       if (showHitBox == "yes") {
  2679.         //draw hitbox
  2680.         ctx.strokeStyle = "blue";
  2681.         ctx.lineWidth = 3;
  2682.         ctx.beginPath();
  2683.         ctx.arc(
  2684.           drawingX,
  2685.           drawingY,
  2686.           object.width / clientFovMultiplier,
  2687.           0,
  2688.           2 * Math.PI
  2689.         );
  2690.         ctx.stroke();
  2691.       }
  2692.     } else if (object.type == "player") {
  2693.       var spawnProtectionFlashDuration = 3; //higher number indicates longer duration between flashes.
  2694.       if (object.hasOwnProperty("deadOpacity")) {
  2695.         //if this is an animation of a dead object
  2696.         ctx.globalAlpha = object.deadOpacity;
  2697.       }
  2698.       //draw players
  2699.       ctx.save(); //save so later can restore
  2700.       //translate canvas to location of player so that the player is at 0,0 coordinates, allowing rotation around the center of player's body
  2701.       ctx.translate(drawingX, drawingY);
  2702.  
  2703.       let objectangle = object.angle;
  2704.       if (
  2705.         id == playerstring &&
  2706.         object.autorotate != "yes" &&
  2707.         object.fastautorotate != "yes"
  2708.       ) {
  2709.         //if this player is the tank that the client is controlling
  2710.         objectangle = clientAngle;
  2711.         ctx.rotate(clientAngle); //instead of using client's actual tank angle, use the angle to the mouse. this reduces lag effect
  2712.       } else {
  2713.         ctx.rotate(object.angle);
  2714.       }
  2715.  
  2716.       let spawnProtect = "no";
  2717.       if (object.spawnProtection < object.spawnProtectionDuration && object.spawnProtection % spawnProtectionFlashDuration == 0) {
  2718.         spawnProtect = "yes";
  2719.       }
  2720.  
  2721.       let playercolor = "undefined";
  2722.       let playeroutline = "undefined";
  2723.       let eternal = "no";
  2724.       if (object.team == "none") {
  2725.         if (id == playerstring) {
  2726.           playercolor = bodyColors.blue.col;
  2727.           playeroutline = bodyColors.blue.outline;
  2728.           if (object.hit > 0 || spawnProtect == "yes") {
  2729.             playercolor = bodyColors.blue.hitCol
  2730.             playeroutline = bodyColors.blue.hitOutline
  2731.           }
  2732.         }
  2733.         else{
  2734.           playercolor = bodyColors.red.col;
  2735.           playeroutline = bodyColors.red.outline;
  2736.           if (object.hit > 0 || spawnProtect == "yes") {
  2737.             playercolor = bodyColors.red.hitCol
  2738.             playeroutline = bodyColors.red.hitOutline
  2739.           }
  2740.         }
  2741.       } else if (object.team == "blue" || object.team == "green" || object.team == "red" || object.team == "purple" || object.team == "eternal" || object.team == "magenta" || object.team == "fallen" || object.team == "celestial") {
  2742.           playercolor = bodyColors[object.team].col;
  2743.           playeroutline = bodyColors[object.team].outline;
  2744.           if (object.hit > 0 || spawnProtect == "yes") {
  2745.             playercolor = bodyColors[object.team].hitCol;
  2746.             playeroutline = bodyColors[object.team].hitOutline;
  2747.           }
  2748.           if (object.team == "eternal"){
  2749.             eternal = "yes";
  2750.           }
  2751.       }
  2752.       if (object.developer == "yes") {
  2753.         //if a developer
  2754.         playercolor = object.color;
  2755.         playeroutline = object.outline;
  2756.       }
  2757.  
  2758.       //store player color for upgrade buttons
  2759.       if (id == playerstring){
  2760.         playerBodyCol = playercolor;
  2761.         playerBodyOutline = playeroutline;
  2762.       }
  2763.  
  2764.       drawPlayer(ctx, object, clientFovMultiplier, spawnProtect, playercolor, playeroutline, eternal, objectangle)//draw barrel and body
  2765.       ctx.restore(); //restore coordinates to saved
  2766.  
  2767.       //write player name if not the client's tank
  2768.       if (id != playerstring) {
  2769.         ctx.fillStyle = "white";
  2770.         ctx.strokeStyle = "black";
  2771.         ctx.lineWidth = 8 / clientFovMultiplier;
  2772.         ctx.font = "700 " + 35 / clientFovMultiplier + "px Roboto";
  2773.         ctx.textAlign = "center";
  2774.         ctx.miterLimit = 2;//prevent text spikes, alternative to linejoin round
  2775.         //ctx.lineJoin = "round"; //prevent spikes above the capital letter "M"
  2776.         //note: if you stroke then fill, the words will be thicker and nicer. If you fill then stroke, the words are thinner.
  2777.         if (object.name == "unnamed"){
  2778.           //this guy is unnamed, add a 3 digit identifier
  2779.           let thisID = id.substr(id.length - 3);//last 3 digits of ID
  2780.           object.name += (" #" + thisID);
  2781.         }
  2782.         ctx.strokeText(
  2783.           object.name,
  2784.           drawingX,
  2785.           drawingY - (object.width + 40) / clientFovMultiplier
  2786.         );
  2787.         ctx.fillText(
  2788.           object.name,
  2789.           drawingX,
  2790.           drawingY - (object.width + 40) / clientFovMultiplier
  2791.         );
  2792.         //write player level
  2793.         ctx.font = "700 " + 18 / clientFovMultiplier + "px Roboto";
  2794.         ctx.strokeText(
  2795.           "Lvl " +
  2796.             object.level +
  2797.             " " +
  2798.             object.tankType +
  2799.             "-" +
  2800.             object.bodyType,
  2801.           drawingX,
  2802.           drawingY - (object.width + 10) / clientFovMultiplier
  2803.         );
  2804.         ctx.fillText(
  2805.           "Lvl " +
  2806.             object.level +
  2807.             " " +
  2808.             object.tankType +
  2809.             "-" +
  2810.             object.bodyType,
  2811.           drawingX,
  2812.           drawingY - (object.width + 10) / clientFovMultiplier
  2813.         );
  2814.         ctx.lineJoin = "miter"; //change it back
  2815.       }
  2816.       //draw player health
  2817.       if (object.health < object.maxhealth) {
  2818.         //draw health bar background
  2819.         var w = (object.width / clientFovMultiplier) * 2;
  2820.         var h = 7 / clientFovMultiplier;
  2821.         var r = h / 2;
  2822.         var x = drawingX - object.width / clientFovMultiplier;
  2823.         var y = drawingY + object.width / clientFovMultiplier + 10;
  2824.         ctx.fillStyle = "black";
  2825.         ctx.strokeStyle = "black";
  2826.         ctx.lineWidth = 2.5 / clientFovMultiplier;
  2827.         ctx.beginPath();
  2828.         ctx.moveTo(x + r, y);
  2829.         ctx.arcTo(x + w, y, x + w, y + h, r);
  2830.         ctx.arcTo(x + w, y + h, x, y + h, r);
  2831.         ctx.arcTo(x, y + h, x, y, r);
  2832.         ctx.arcTo(x, y, x + w, y, r);
  2833.         ctx.closePath();
  2834.         ctx.fill();
  2835.         ctx.stroke();
  2836.         //draw health bar
  2837.         if (object.health > 0) {
  2838.           w = (w / object.maxhealth) * object.health;
  2839.           //if (id == playerstring) {
  2840.             //if this player is the tank that the client is controlling
  2841.             if (object.team == "none") {
  2842.               if (id == playerstring) {
  2843.                 ctx.fillStyle = bodyColors.blue.col;
  2844.               }
  2845.               else{
  2846.                 ctx.fillStyle = bodyColors.red.col;
  2847.               }
  2848.             } else if (object.team == "blue" || object.team == "red" || object.team == "purple" || object.team == "green" || object.team == "eternal" || object.team == "magenta" || object.team == "fallen" || object.team == "celestial") {
  2849.               ctx.fillStyle = bodyColors[object.team].col;
  2850.             }
  2851.           if (r * 2 > w) {
  2852.             //prevent weird shape when radius more than width
  2853.             r = w / 2;
  2854.             y += (h - w) / 2; //move health bar so that it is centered vertically in black bar
  2855.             h = w;
  2856.           }
  2857.           ctx.beginPath();
  2858.           ctx.moveTo(x + r, y);
  2859.           ctx.arcTo(x + w, y, x + w, y + h, r);
  2860.           ctx.arcTo(x + w, y + h, x, y + h, r);
  2861.           ctx.arcTo(x, y + h, x, y, r);
  2862.           ctx.arcTo(x, y, x + w, y, r);
  2863.           ctx.closePath();
  2864.           ctx.fill();
  2865.           ctx.stroke();
  2866.         }
  2867.       }
  2868.  
  2869.       //write chats
  2870.       if (chatstate) {
  2871.       if (id != playerstring) {
  2872.         var firstChatY = 75;
  2873.       }
  2874.       else{
  2875.         var firstChatY = 20;//chat nearer to player body if no need to display name
  2876.       }
  2877.       ctx.font = "700 25px Roboto";
  2878.       ctx.textAlign = "center";
  2879.       ctx.lineJoin = "round"; //prevent spikes above the capital letter "M"
  2880.       var xpadding = 15;
  2881.       var ypadding = 10;
  2882.       var lineheight = 30;
  2883.  
  2884.       object.chats.slice().reverse().forEach((chatObj, index) => {//slice and reverse to loop though array backwards (so older messages are above)
  2885.         ctx.fillStyle = "rgba(69,69,69,.7)";
  2886.  
  2887.         var longestLine = 0;
  2888.  
  2889.         //multiline chat
  2890.         const wrapText = function(ctx, text, x, y, maxWidth, lineHeight) {
  2891.           // First, start by splitting all of our text into words, but splitting it into an array split by spaces
  2892.           let words = text.split(' ');
  2893.           let line = ''; // This will store the text of the current line
  2894.           let testLine = ''; // This will store the text when we add a word, to test if it's too long
  2895.           let lineArray = []; // This is an array of lines, which the function will return
  2896.  
  2897.           // Lets iterate over each word
  2898.           for(var n = 0; n < words.length; n++) {
  2899.               // Create a test line, and measure it..
  2900.               testLine += `${words[n]} `;
  2901.               let metrics = ctx.measureText(testLine);
  2902.               let testWidth = metrics.width;
  2903.               // If the width of this test line is more than the max width
  2904.               if (testWidth > maxWidth && n > 0) {
  2905.                   // Then the line is finished, push the current line into "lineArray"
  2906.                   line = line.slice(0, -1);//remove space at the end of the line
  2907.                   lineArray.push([line, x, y]);
  2908.                   let thislinewidth = ctx.measureText(line).width;
  2909.                   if (thislinewidth > longestLine){
  2910.                     longestLine = thislinewidth;
  2911.                   }
  2912.                   // Increase the line height, so a new line is started
  2913.                   y += lineHeight;
  2914.                   // Update line and test line to use this word as the first word on the next line
  2915.                   line = `${words[n]} `;
  2916.                   testLine = `${words[n]} `;
  2917.               }
  2918.               else {
  2919.                   // If the test line is still less than the max width, then add the word to the current line
  2920.                   line += `${words[n]} `;
  2921.               }
  2922.               // If we never reach the full max width, then there is only one line.. so push it into the lineArray so we return something
  2923.               if(n === words.length - 1) {
  2924.                   line = line.slice(0, -1);//remove space at the end of the line
  2925.                   lineArray.push([line, x, y]);
  2926.                   let thislinewidth = ctx.measureText(line).width;
  2927.                   if (thislinewidth > longestLine){
  2928.                     longestLine = thislinewidth;
  2929.                   }
  2930.               }
  2931.           }
  2932.           // Return the line array
  2933.           return lineArray;
  2934.         }
  2935.  
  2936.         let wrappedText = wrapText(ctx, chatObj.chat, drawingX, drawingY - firstChatY, 900, lineheight);//split message into multiline text
  2937.         //draw rect
  2938.         var w = longestLine + xpadding * 2;
  2939.         var h = lineheight * wrappedText.length + ypadding * 2;
  2940.         if (wrappedText.length == 1){//remove spacing between text for single-line text
  2941.           h = 25 + ypadding * 2;
  2942.         }
  2943.         var r = 15;
  2944.         var x = drawingX - longestLine / 2 - xpadding;
  2945.         var y = drawingY - firstChatY - ypadding - 20 - h;
  2946.         ctx.beginPath();
  2947.         ctx.moveTo(x + r, y);
  2948.         ctx.arcTo(x + w, y, x + w, y + h, r);
  2949.         ctx.arcTo(x + w, y + h, x, y + h, r);
  2950.         ctx.arcTo(x, y + h, x, y, r);
  2951.         ctx.arcTo(x, y, x + w, y, r);
  2952.         ctx.closePath();
  2953.         ctx.fill();
  2954.         if (index == 0){
  2955.           //if this is first chat message, draw triangle
  2956.           let trianglewidth = 20;
  2957.           let triangleheight = 10;
  2958.           ctx.beginPath();
  2959.           ctx.moveTo(x + w/2 - trianglewidth/2, y + h);
  2960.           ctx.lineTo(x + w/2 + trianglewidth/2, y + h);
  2961.           ctx.lineTo(x + w/2, y + h + triangleheight);
  2962.           ctx.fill();
  2963.         }
  2964.         //write words
  2965.         ctx.fillStyle = "white";
  2966.         wrappedText.forEach(function(item) {
  2967.             ctx.fillText(item[0], item[1], item[2]-h);//write text
  2968.         })
  2969.         firstChatY += (h + 10); //height of chat plus space between chats
  2970.       });
  2971.       ctx.lineJoin = "miter"; //change it back
  2972.       }
  2973.       if (object.hasOwnProperty("deadOpacity")) {
  2974.         //if this is an animation of a dead object
  2975.         ctx.globalAlpha = 1.0; //reset opacity
  2976.       }
  2977.       if (showHitBox == "yes") {
  2978.         //draw hitbox
  2979.         ctx.strokeStyle = "blue";
  2980.         ctx.lineWidth = 3;
  2981.         ctx.beginPath();
  2982.         ctx.arc(
  2983.           drawingX,
  2984.           drawingY,
  2985.           object.width / clientFovMultiplier,
  2986.           0,
  2987.           2 * Math.PI
  2988.         );
  2989.         ctx.stroke();
  2990.       }
  2991.     } else if (object.type == "portal") {
  2992.       //draw the aura below the portal
  2993.       var auraSpeed = 75; //higher number means slower speed
  2994.       var auraWidth = 4; //reative to portal size
  2995.       var portalAuraSize = object.timer % auraSpeed;
  2996.       var portalwidth = portalwidths[id]; //use this for portal width. it keeps track size changes when players touch portal
  2997.       var portalsizeincrease = portalwidths[id] / object.width; //increase in width when someone touch it (needed for the spikes)
  2998.       //first aura
  2999.       var opacityCalculation =
  3000.         1 - ((auraWidth / auraSpeed) * portalAuraSize) / auraWidth; //goes from 0 to 0.3
  3001.       if (opacityCalculation > 0.3) {
  3002.         //max opacity for portal aura
  3003.         opacityCalculation = 0.3;
  3004.       }
  3005.       if (object.hasOwnProperty("red")) {
  3006.         //if portal is radiant
  3007.         ctx.fillStyle =
  3008.           "rgba(" +
  3009.           object.red +
  3010.           ", " +
  3011.           object.green +
  3012.           ", " +
  3013.           object.blue +
  3014.           "," +
  3015.           opacityCalculation +
  3016.           ")";
  3017.       } else {
  3018.         ctx.fillStyle =
  3019.           "rgba(" + object.color + "," + opacityCalculation + ")";
  3020.       }
  3021.       ctx.beginPath();
  3022.       ctx.arc(
  3023.         drawingX,
  3024.         drawingY,
  3025.         (portalwidth * ((auraWidth / auraSpeed) * portalAuraSize)) /
  3026.           clientFovMultiplier,
  3027.         0,
  3028.         2 * Math.PI
  3029.       );
  3030.       ctx.fill();
  3031.       //second smaller aura
  3032.       portalAuraSize = (object.timer - auraSpeed / 2) % auraSpeed;
  3033.       if (portalAuraSize > 0) {
  3034.         var opacityCalculation =
  3035.           1 - ((auraWidth / auraSpeed) * portalAuraSize) / auraWidth;
  3036.         if (opacityCalculation > 0.3) {
  3037.           //max opacity for portal aura
  3038.           opacityCalculation = 0.3;
  3039.         }
  3040.         if (object.hasOwnProperty("red")) {
  3041.           //if portal is radiant
  3042.           ctx.fillStyle =
  3043.             "rgba(" +
  3044.             object.red +
  3045.             ", " +
  3046.             object.green +
  3047.             ", " +
  3048.             object.blue +
  3049.             "," +
  3050.             opacityCalculation +
  3051.             ")";
  3052.         } else {
  3053.           ctx.fillStyle =
  3054.             "rgba(" + object.color + "," + opacityCalculation + ")";
  3055.         }
  3056.         ctx.beginPath();
  3057.         ctx.arc(
  3058.           drawingX,
  3059.           drawingY,
  3060.           (portalwidth * ((auraWidth / auraSpeed) * portalAuraSize)) /
  3061.             clientFovMultiplier,
  3062.           0,
  3063.           2 * Math.PI
  3064.         );
  3065.         ctx.fill();
  3066.       }
  3067.  
  3068.       if (object.hasOwnProperty("deadOpacity")) {
  3069.         //if this is an animation of a dead object
  3070.         ctx.globalAlpha = object.deadOpacity;
  3071.       }
  3072.       //drawing portals
  3073.       //create gradient
  3074.       //const gradient = ctx.createRadialGradient(drawingX, drawingY, object.width/3/clientFovMultiplier, drawingX, drawingY, object.width/clientFovMultiplier);
  3075.  
  3076.       // Add two color stops
  3077.       //caluclate color of outline of portal based on time until it die
  3078.       var portalColorCalc = object.timer / object.maxtimer;
  3079.       var portalColor = 255 - portalColorCalc * 255;
  3080.       var portalRGB =
  3081.         "rgb(" +
  3082.         portalColor +
  3083.         "," +
  3084.         portalColor +
  3085.         "," +
  3086.         portalColor +
  3087.         ")";
  3088.       var portalRGBoutline =
  3089.         "rgb(" +
  3090.         (portalColor - 20) +
  3091.         "," +
  3092.         (portalColor - 20) +
  3093.         "," +
  3094.         (portalColor - 20) +
  3095.         ")";
  3096.       if (object.ruptured == 1) {
  3097.         //portal is ruptured!
  3098.         //draw the stars
  3099.         ctx.save(); //save so later can restore
  3100.         ctx.translate(drawingX, drawingY);
  3101.         ctx.fillStyle = "white";
  3102.         ctx.strokeStyle = "lightgrey";
  3103.         ctx.lineWidth = 3 / clientFovMultiplier;
  3104.         ctx.lineJoin = "round";
  3105.         //first star: 3 spikes
  3106.         ctx.rotate((extraSpikeRotate * Math.PI) / 180);
  3107.         var numberOfSpikes = 3;
  3108.         var outerRadius =
  3109.           ((object.width * 3) / clientFovMultiplier) * portalsizeincrease;
  3110.         var innerRadius =
  3111.           (object.width / 3 / clientFovMultiplier) * portalsizeincrease;
  3112.         var rot = (Math.PI / 2) * 3;
  3113.         var x = 0;
  3114.         var y = 0;
  3115.         ctx.beginPath();
  3116.         ctx.moveTo(0, 0 - outerRadius);
  3117.         for (i = 0; i < numberOfSpikes; i++) {
  3118.           x = 0 + Math.cos(rot) * outerRadius;
  3119.           y = 0 + Math.sin(rot) * outerRadius;
  3120.           ctx.lineTo(x, y);
  3121.           rot += Math.PI / numberOfSpikes;
  3122.           x = 0 + Math.cos(rot) * innerRadius;
  3123.           y = 0 + Math.sin(rot) * innerRadius;
  3124.           ctx.lineTo(x, y);
  3125.           rot += Math.PI / numberOfSpikes;
  3126.         }
  3127.         ctx.lineTo(0, 0 - outerRadius);
  3128.         ctx.closePath();
  3129.         ctx.fill();
  3130.         ctx.stroke();
  3131.         ctx.rotate((-extraSpikeRotate * Math.PI) / 180);
  3132.         //second star: 6 spikes in opposite direction
  3133.         ctx.rotate(((360 - extraSpikeRotate) * 2 * Math.PI) / 180);
  3134.         var numberOfSpikes = 6;
  3135.         var outerRadius =
  3136.           ((object.width * 1.5) / clientFovMultiplier) *
  3137.           portalsizeincrease;
  3138.         var innerRadius =
  3139.           (object.width / 1.2 / clientFovMultiplier) * portalsizeincrease;
  3140.         var rot = (Math.PI / 2) * 3;
  3141.         var x = 0;
  3142.         var y = 0;
  3143.         ctx.beginPath();
  3144.         ctx.moveTo(0, 0 - outerRadius);
  3145.         for (i = 0; i < numberOfSpikes; i++) {
  3146.           x = 0 + Math.cos(rot) * outerRadius;
  3147.           y = 0 + Math.sin(rot) * outerRadius;
  3148.           ctx.lineTo(x, y);
  3149.           rot += Math.PI / numberOfSpikes;
  3150.           x = 0 + Math.cos(rot) * innerRadius;
  3151.           y = 0 + Math.sin(rot) * innerRadius;
  3152.           ctx.lineTo(x, y);
  3153.           rot += Math.PI / numberOfSpikes;
  3154.         }
  3155.         ctx.lineTo(0, 0 - outerRadius);
  3156.         ctx.closePath();
  3157.         ctx.fill();
  3158.         ctx.stroke();
  3159.         ctx.rotate((-(360 - extraSpikeRotate) * 2 * Math.PI) / 180);
  3160.         //third star: 6 spikes
  3161.         ctx.rotate((extraSpikeRotate * 2 * Math.PI) / 180);
  3162.         var numberOfSpikes = 6;
  3163.         var outerRadius =
  3164.           ((object.width * 1.5) / clientFovMultiplier) *
  3165.           portalsizeincrease;
  3166.         var innerRadius =
  3167.           (object.width / 1.2 / clientFovMultiplier) * portalsizeincrease;
  3168.         var rot = (Math.PI / 2) * 3;
  3169.         var x = 0;
  3170.         var y = 0;
  3171.         ctx.beginPath();
  3172.         ctx.moveTo(0, 0 - outerRadius);
  3173.         for (i = 0; i < numberOfSpikes; i++) {
  3174.           x = 0 + Math.cos(rot) * outerRadius;
  3175.           y = 0 + Math.sin(rot) * outerRadius;
  3176.           ctx.lineTo(x, y);
  3177.           rot += Math.PI / numberOfSpikes;
  3178.           x = 0 + Math.cos(rot) * innerRadius;
  3179.           y = 0 + Math.sin(rot) * innerRadius;
  3180.           ctx.lineTo(x, y);
  3181.           rot += Math.PI / numberOfSpikes;
  3182.         }
  3183.         ctx.lineTo(0, 0 - outerRadius);
  3184.         ctx.closePath();
  3185.         ctx.fill();
  3186.         ctx.stroke();
  3187.         ctx.rotate((-extraSpikeRotate * 2 * Math.PI) / 180);
  3188.         //fourth star: 6 dark spikes in opposite direction
  3189.         ctx.fillStyle = portalRGB;
  3190.         ctx.strokeStyle = portalRGBoutline;
  3191.         ctx.rotate(((360 - extraSpikeRotate) * 3 * Math.PI) / 180); //times 2 to make it faster
  3192.         var numberOfSpikes = 6;
  3193.         var outerRadius =
  3194.           ((object.width * 1.5) / clientFovMultiplier) *
  3195.           portalsizeincrease;
  3196.         var innerRadius =
  3197.           (object.width / 2 / clientFovMultiplier) * portalsizeincrease;
  3198.         var rot = (Math.PI / 2) * 3;
  3199.         var x = 0;
  3200.         var y = 0;
  3201.         ctx.beginPath();
  3202.         ctx.moveTo(0, 0 - outerRadius);
  3203.         for (i = 0; i < numberOfSpikes; i++) {
  3204.           x = 0 + Math.cos(rot) * outerRadius;
  3205.           y = 0 + Math.sin(rot) * outerRadius;
  3206.           ctx.lineTo(x, y);
  3207.           rot += Math.PI / numberOfSpikes;
  3208.           x = 0 + Math.cos(rot) * innerRadius;
  3209.           y = 0 + Math.sin(rot) * innerRadius;
  3210.           ctx.lineTo(x, y);
  3211.           rot += Math.PI / numberOfSpikes;
  3212.         }
  3213.         ctx.lineTo(0, 0 - outerRadius);
  3214.         ctx.closePath();
  3215.         ctx.fill();
  3216.         ctx.stroke();
  3217.         ctx.rotate((-(360 - extraSpikeRotate) * 3 * Math.PI) / 180);
  3218.         //fifth star: tiny black spikes
  3219.         ctx.rotate((extraSpikeRotate * 3 * Math.PI) / 180); //times 2 to make it faster
  3220.         var numberOfSpikes = 6;
  3221.         var outerRadius =
  3222.           ((object.width * 1.25) / clientFovMultiplier) *
  3223.           portalsizeincrease;
  3224.         var innerRadius =
  3225.           (object.width / 4 / clientFovMultiplier) * portalsizeincrease;
  3226.         var rot = (Math.PI / 2) * 3;
  3227.         var x = 0;
  3228.         var y = 0;
  3229.         ctx.beginPath();
  3230.         ctx.moveTo(0, 0 - outerRadius);
  3231.         for (i = 0; i < numberOfSpikes; i++) {
  3232.           x = 0 + Math.cos(rot) * outerRadius;
  3233.           y = 0 + Math.sin(rot) * outerRadius;
  3234.           ctx.lineTo(x, y);
  3235.           rot += Math.PI / numberOfSpikes;
  3236.           x = 0 + Math.cos(rot) * innerRadius;
  3237.           y = 0 + Math.sin(rot) * innerRadius;
  3238.           ctx.lineTo(x, y);
  3239.           rot += Math.PI / numberOfSpikes;
  3240.         }
  3241.         ctx.lineTo(0, 0 - outerRadius);
  3242.         ctx.closePath();
  3243.         ctx.fill();
  3244.         ctx.stroke();
  3245.         ctx.rotate((-extraSpikeRotate * 3 * Math.PI) / 180);
  3246.         ctx.restore();
  3247.         ctx.lineJoin = "miter";
  3248.       }
  3249.       ctx.fillStyle = portalRGB;
  3250.       ctx.strokeStyle = portalRGBoutline;
  3251.       ctx.lineWidth = 3 / clientFovMultiplier;
  3252.       ctx.beginPath();
  3253.       ctx.arc(
  3254.         drawingX,
  3255.         drawingY,
  3256.         portalwidth / clientFovMultiplier,
  3257.         0,
  3258.         2 * Math.PI
  3259.       );
  3260.       ctx.fill();
  3261.       ctx.stroke();
  3262.       if (object.hasOwnProperty("deadOpacity")) {
  3263.         //if this is an animation of a dead object
  3264.         ctx.globalAlpha = 1.0; //reset opacity
  3265.       }
  3266.  
  3267.       //spawn particles
  3268.       var choosing = Math.floor(Math.random() * 3); //choose if particle spawn. Lower number means more particles
  3269.       if (choosing == 1) {
  3270.         var angleDegrees = Math.floor(Math.random() * 360); //choose angle in degrees
  3271.         var angleRadians = (angleDegrees * Math.PI) / 180; //convert to radians
  3272.         portalparticles[particleID] = {
  3273.           angle: angleRadians,
  3274.           x: object.x,
  3275.           y: object.y,
  3276.           width: 50,
  3277.           height: 50,
  3278.           speed: 10,
  3279.           timer: 30,
  3280.           maxtimer: 15, //difference between timer and maxtimer is the opacity change of the particle. Larger difference means more or less transparent
  3281.           color: "white",
  3282.           outline: "lightgrey",
  3283.           type: "particle",
  3284.         };
  3285.         particleID++;
  3286.       }
  3287.  
  3288.       if (showHitBox == "yes") {
  3289.         //draw hitbox
  3290.         ctx.strokeStyle = "blue";
  3291.         ctx.lineWidth = 3;
  3292.         ctx.beginPath();
  3293.         ctx.arc(
  3294.           drawingX,
  3295.           drawingY,
  3296.           object.width / clientFovMultiplier,
  3297.           0,
  3298.           2 * Math.PI
  3299.         );
  3300.         ctx.stroke();
  3301.       }
  3302.     } else if (object.type == "Fixedportal") {
  3303.       //drawing rectangular fixed portals, e.g. the portal at top left corner of dune
  3304.       ctx.save(); //save so later can restore
  3305.       ctx.translate(drawingX, drawingY); //translate so white portal is at 0,0 coordinates so can rotate around center of portal
  3306.       ctx.rotate((object.angleDegrees * Math.PI) / 180); //rotate portal
  3307.       ctx.fillStyle = object.color;
  3308.       ctx.strokeStyle = object.outline;
  3309.       ctx.fillRect(
  3310.         -object.width / 2 / clientFovMultiplier,
  3311.         -object.height / 2 / clientFovMultiplier,
  3312.         object.width / clientFovMultiplier,
  3313.         object.height / clientFovMultiplier
  3314.       );
  3315.       ctx.strokeRect(
  3316.         -object.width / 2 / clientFovMultiplier,
  3317.         -object.height / 2 / clientFovMultiplier,
  3318.         object.width / clientFovMultiplier,
  3319.         object.height / clientFovMultiplier
  3320.       );
  3321.       ctx.globalAlpha = 0.7; //transparency
  3322.       ctx.fillStyle = object.color2;
  3323.       ctx.fillRect(
  3324.         -object.width / clientFovMultiplier,
  3325.         -object.height / clientFovMultiplier,
  3326.         (object.width * 2) / clientFovMultiplier,
  3327.         (object.height * 2) / clientFovMultiplier
  3328.       );
  3329.       ctx.strokeRect(
  3330.         -object.width / clientFovMultiplier,
  3331.         -object.height / clientFovMultiplier,
  3332.         (object.width * 2) / clientFovMultiplier,
  3333.         (object.height * 2) / clientFovMultiplier
  3334.       );
  3335.       ctx.globalAlpha = 1.0; //reset transparency
  3336.       ctx.restore(); //restore after translating
  3337.       if (showHitBox == "yes") {
  3338.         //draw hitbox
  3339.         ctx.strokeStyle = "blue";
  3340.         ctx.lineWidth = 3;
  3341.         ctx.beginPath();
  3342.         ctx.arc(
  3343.           drawingX,
  3344.           drawingY,
  3345.           object.width / 2 / clientFovMultiplier,
  3346.           0,
  3347.           2 * Math.PI
  3348.         );
  3349.         ctx.stroke();
  3350.       }
  3351.     } else if (object.type == "particle") {
  3352.       //draw particles
  3353.       if (object.timer <= 10){
  3354.         ctx.globalAlpha = object.timer / 10;
  3355.       }
  3356.       //ctx.globalAlpha = object.timer / object.maxtimer;
  3357.       ctx.fillStyle = object.color;
  3358.       ctx.strokeStyle = object.outline;
  3359.       ctx.lineWidth = 3 / clientFovMultiplier;
  3360.       ctx.beginPath();
  3361.       ctx.arc(
  3362.         drawingX,
  3363.         drawingY,
  3364.         object.width / clientFovMultiplier,
  3365.         0,
  3366.         2 * Math.PI
  3367.       );
  3368.       ctx.fill();
  3369.       ctx.stroke();
  3370.       ctx.globalAlpha = 1.0;
  3371.     } else if (object.type == "wall") {
  3372.       //ctx.fillStyle = "#232323";
  3373.       ctx.fillStyle = "rgba(15, 15, 15, .5)";
  3374.       ctx.fillRect(
  3375.         drawingX,
  3376.         drawingY,
  3377.         object.w / clientFovMultiplier,
  3378.         object.h / clientFovMultiplier
  3379.       );
  3380.       if (showHitBox == "yes") {
  3381.         //draw hitbox
  3382.         ctx.strokeStyle = "blue";
  3383.         ctx.lineWidth = 3;
  3384.         ctx.strokeRect(
  3385.           drawingX,
  3386.           drawingY,
  3387.           object.w / clientFovMultiplier,
  3388.           object.h / clientFovMultiplier
  3389.         );
  3390.       }
  3391.     } else if (object.type == "gate") {
  3392.       //ctx.fillStyle = "#232323";
  3393.       ctx.save();
  3394.       ctx.translate(drawingX, drawingY);
  3395.       ctx.rotate(object.angle/180*Math.PI);
  3396.       //draw white rectangle below
  3397.       ctx.fillStyle = "rgba(255,255,255,.7)";
  3398.       ctx.strokeStyle = "white";
  3399.       //FIRST WHITE RECTANGLE
  3400.       ctx.globalAlpha = 1.0 * (endGate - gateTimer) / (endGate - 1 - startGate);//gateTimer increases from 0.5 to 9, this equation makes the opacity decrease from 1 to 0
  3401.       ctx.fillRect(
  3402.         -(object.height / clientFovMultiplier * gateTimer)/2 + object.height / clientFovMultiplier/2,
  3403.          -object.width/2/clientFovMultiplier,
  3404.         object.height / clientFovMultiplier * gateTimer,
  3405.         object.width / clientFovMultiplier
  3406.       );
  3407.       ctx.strokeRect(
  3408.         -(object.height / clientFovMultiplier * gateTimer)/2 + object.height / clientFovMultiplier/2,
  3409.          -object.width/2/clientFovMultiplier,
  3410.         object.height / clientFovMultiplier * gateTimer,
  3411.         object.width / clientFovMultiplier
  3412.       );
  3413.       ctx.globalAlpha = 1.0;
  3414.       //SECOND WHITE RECTANGLE
  3415.       let gateTimer2 = gateTimer - endGate/2;
  3416.       if (gateTimer2 < startGate){
  3417.         gateTimer2 = endGate - (startGate - gateTimer2)
  3418.       }
  3419.       ctx.globalAlpha = 1.0 * (endGate - gateTimer2) / (endGate - 1 - startGate);//gateTimer increases from 1 to 7, this equation makes the opacity decrease from 1 to 0
  3420.       ctx.fillRect(
  3421.         -(object.height / clientFovMultiplier * gateTimer2)/2 + object.height / clientFovMultiplier/2,
  3422.          -object.width/2/clientFovMultiplier,
  3423.         object.height / clientFovMultiplier * gateTimer2,
  3424.         object.width / clientFovMultiplier
  3425.       );
  3426.       ctx.strokeRect(
  3427.         -(object.height / clientFovMultiplier * gateTimer2)/2 + object.height / clientFovMultiplier/2,
  3428.          -object.width/2/clientFovMultiplier,
  3429.         object.height / clientFovMultiplier * gateTimer2,
  3430.         object.width / clientFovMultiplier
  3431.       );
  3432.       ctx.globalAlpha = 1.0;
  3433.       //draw actual black gate
  3434.       ctx.fillStyle = "black";
  3435.       ctx.fillRect(0,
  3436.          -object.width/2/clientFovMultiplier,
  3437.         object.height / clientFovMultiplier,
  3438.         object.width / clientFovMultiplier
  3439.       );
  3440.       if (showHitBox == "yes") {
  3441.         //draw hitbox
  3442.         ctx.strokeStyle = "blue";
  3443.         ctx.lineWidth = 3;
  3444.         ctx.strokeRect(0,
  3445.          -object.width/2/clientFovMultiplier,
  3446.           object.height / clientFovMultiplier,
  3447.           object.width / clientFovMultiplier
  3448.         );
  3449.       }
  3450.       ctx.restore();
  3451.       //spawn particles
  3452.       var choosing = Math.floor(Math.random() * 3); //choose if particle spawn. Lower number means more particles
  3453.       if (choosing == 1) {
  3454.         var dir = Math.floor(Math.random() * 2); //choose angle in degrees
  3455.         if (dir == 0){
  3456.           var angleRadians = (object.angle) * Math.PI / 180; //convert to radians
  3457.         }
  3458.         else{
  3459.           var angleRadians = (object.angle - 180) * Math.PI / 180;
  3460.         }
  3461.         let randX = 0;
  3462.         let randY = 0;
  3463.         //code currently does not support particles for gates that are tilted
  3464.         //i dont see a need to add that in the near future
  3465.         if (object.angle == 0 || object.angle == 180 || object.angle == 360){
  3466.           randY = Math.floor(Math.random() * object.width) - object.width/2;
  3467.         }
  3468.         else if (object.angle == 90 || object.angle == 270){
  3469.           randX = Math.floor(Math.random() * object.width) - object.width/2;
  3470.         }
  3471.         portalparticles[particleID] = {
  3472.           angle: angleRadians,
  3473.           x: object.x + randX,
  3474.           y: object.y + randY,
  3475.           width: 50,
  3476.           height: 50,
  3477.           speed: 10,
  3478.           timer: 30,
  3479.           maxtimer: 15, //difference between timer and maxtimer is the opacity change of the particle. Larger difference means more or less transparent
  3480.           color: "white",
  3481.           outline: "lightgrey",
  3482.           type: "particle",
  3483.         };
  3484.         particleID++;
  3485.       }
  3486.     } else if (object.type == "def") {
  3487.       //base defender in 2tdm
  3488.       ctx.save();
  3489.       ctx.translate(drawingX, drawingY);
  3490.       ctx.rotate(object.angle);
  3491.       ctx.lineJoin = "round"; //make corners of shape round
  3492.       ctx.lineWidth = 4 / clientFovMultiplier;
  3493.  
  3494.       //draw octagon base
  3495.       var octagonWidth = object.width/5*6;
  3496.       ctx.fillStyle = bodyColors.asset.col;
  3497.       ctx.strokeStyle = bodyColors.asset.outline;
  3498.       ctx.beginPath();
  3499.       ctx.moveTo(
  3500.         0 + (octagonWidth / clientFovMultiplier) * Math.cos(0),
  3501.         0 + (octagonWidth / clientFovMultiplier) * Math.sin(0)
  3502.       );
  3503.       for (var i = 1; i <= 8 + 1; i += 1) {
  3504.         ctx.lineTo(
  3505.           0 +
  3506.             (octagonWidth / clientFovMultiplier) *
  3507.               Math.cos((i * 2 * Math.PI) / 8),
  3508.           0 +
  3509.             (octagonWidth / clientFovMultiplier) *
  3510.               Math.sin((i * 2 * Math.PI) / 8)
  3511.         );
  3512.       }
  3513.       ctx.fill();
  3514.           if (CRTP != 'simplistic') {
  3515.           ctx.stroke();
  3516.           };
  3517.  
  3518.  
  3519.       //draw barrels
  3520.       ctx.fillStyle = bodyColors.barrel.col;
  3521.       ctx.strokeStyle = bodyColors.barrel.outline;
  3522.       //trapezoid at the tip
  3523.       var barrelwidth = 70;
  3524.       var barrelheight = 20;
  3525.       //rectangle
  3526.       var barrelwidth2 = 90;
  3527.       var barrelheight2 = 20;
  3528.       //base trapezoid
  3529.       var barrelwidth3 = 70;
  3530.       var barrelheight3 = 60;
  3531.       //note that trapezoids and rectangles are drawn differently
  3532.  
  3533.       for (let i = 0; i < 4; i++) {//draw 4 barrels
  3534.         var barrelAngle = 360/4*i;
  3535.         var barrelX = Math.cos((barrelAngle * Math.PI) / 180) * object.width * 1.4;
  3536.         var barrelY = Math.sin((barrelAngle * Math.PI) / 180) * object.width * 1.4;
  3537.         var barrelX2 =
  3538.           Math.cos((barrelAngle * Math.PI) / 180) *
  3539.           (object.width * 1.4 - barrelheight); //move rectangle barrel downwards
  3540.         var barrelY2 =
  3541.           Math.sin((barrelAngle * Math.PI) / 180) *
  3542.           (object.width * 1.4 - barrelheight);
  3543.         var barrelX3 =
  3544.           Math.cos((barrelAngle * Math.PI) / 180) *
  3545.           (object.width * 1.4 - barrelheight - barrelheight2); //move base trapezoid barrel downwards
  3546.         var barrelY3 =
  3547.           Math.sin((barrelAngle * Math.PI) / 180) *
  3548.           (object.width * 1.4 - barrelheight - barrelheight2);
  3549.         //base trapezoid
  3550.         ctx.save();
  3551.         ctx.translate(
  3552.           barrelX3 / clientFovMultiplier,
  3553.           barrelY3 / clientFovMultiplier
  3554.         );
  3555.         ctx.rotate(((barrelAngle - 90) * Math.PI) / 180);
  3556.         ctx.beginPath();
  3557.         ctx.moveTo(
  3558.           ((-barrelwidth3 / 3) * 2) / clientFovMultiplier,
  3559.           -barrelheight3 / clientFovMultiplier
  3560.         );
  3561.         ctx.lineTo(-barrelwidth3 / clientFovMultiplier, 0);
  3562.         ctx.lineTo(barrelwidth3 / clientFovMultiplier, 0);
  3563.         ctx.lineTo(
  3564.           ((barrelwidth3 / 3) * 2) / clientFovMultiplier,
  3565.           -barrelheight3 / clientFovMultiplier
  3566.         );
  3567.         ctx.lineTo(
  3568.           ((-barrelwidth3 / 3) * 2) / clientFovMultiplier,
  3569.           -barrelheight3 / clientFovMultiplier
  3570.         );
  3571.         ctx.fill();
  3572.           if (CRTP != 'simplistic') {
  3573.           ctx.stroke();
  3574.           };
  3575.         ctx.restore();
  3576.         //rectangle
  3577.         ctx.save();
  3578.         ctx.translate(
  3579.           barrelX2 / clientFovMultiplier,
  3580.           barrelY2 / clientFovMultiplier
  3581.         );
  3582.         ctx.rotate(((barrelAngle - 90) * Math.PI) / 180);
  3583.         ctx.fillRect(
  3584.           -barrelwidth2 / 2 / clientFovMultiplier,
  3585.           -barrelheight2 / clientFovMultiplier,
  3586.           barrelwidth2 / clientFovMultiplier,
  3587.           barrelheight2 / clientFovMultiplier
  3588.         );
  3589.         if (CRTP != 'simplistic') {
  3590.         ctx.strokeRect(
  3591.           -barrelwidth2 / 2 / clientFovMultiplier,
  3592.           -barrelheight2 / clientFovMultiplier,
  3593.           barrelwidth2 / clientFovMultiplier,
  3594.           barrelheight2 / clientFovMultiplier
  3595.         );
  3596.         };
  3597.         ctx.restore();
  3598.         //trapezium at the tip
  3599.         ctx.save();
  3600.         ctx.translate(
  3601.           barrelX / clientFovMultiplier,
  3602.           barrelY / clientFovMultiplier
  3603.         );
  3604.         ctx.rotate(((barrelAngle - 90) * Math.PI) / 180);
  3605.         ctx.beginPath();
  3606.         ctx.moveTo(-barrelwidth / 2 / clientFovMultiplier, 0);
  3607.         ctx.lineTo(
  3608.           -barrelwidth / clientFovMultiplier,
  3609.           -barrelheight / clientFovMultiplier
  3610.         );
  3611.         ctx.lineTo(
  3612.           barrelwidth / clientFovMultiplier,
  3613.           -barrelheight / clientFovMultiplier
  3614.         );
  3615.         ctx.lineTo(barrelwidth / 2 / clientFovMultiplier, 0);
  3616.         ctx.lineTo(-barrelwidth / 2 / clientFovMultiplier, 0);
  3617.         ctx.fill();
  3618.           if (CRTP != 'simplistic') {
  3619.           ctx.stroke();
  3620.           };
  3621.         ctx.restore();
  3622.       }
  3623.  
  3624.       //draw body
  3625.       ctx.fillStyle = object.color;
  3626.       ctx.strokeStyle = object.outline;
  3627.       ctx.beginPath();
  3628.       ctx.arc(
  3629.         0,
  3630.         0,
  3631.         object.width / clientFovMultiplier,
  3632.         0,
  3633.         2 * Math.PI
  3634.       );
  3635.       ctx.fill();
  3636.           if (CRTP != 'simplistic') {
  3637.           ctx.stroke();
  3638.           };
  3639.       var octagonWidth = object.width/5*4;
  3640.       ctx.fillStyle = bodyColors.asset.col;
  3641.       ctx.strokeStyle = bodyColors.asset.outline;
  3642.       ctx.beginPath();
  3643.       ctx.moveTo(
  3644.         0 + (octagonWidth / clientFovMultiplier) * Math.cos(0),
  3645.         0 + (octagonWidth / clientFovMultiplier) * Math.sin(0)
  3646.       );
  3647.       for (var i = 1; i <= 8 + 1; i += 1) {
  3648.         ctx.lineTo(
  3649.           0 +
  3650.             (octagonWidth / clientFovMultiplier) *
  3651.               Math.cos((i * 2 * Math.PI) / 8),
  3652.           0 +
  3653.             (octagonWidth / clientFovMultiplier) *
  3654.               Math.sin((i * 2 * Math.PI) / 8)
  3655.         );
  3656.       }
  3657.       ctx.fill();
  3658.           if (CRTP != 'simplistic') {
  3659.           ctx.stroke();
  3660.           };
  3661.       ctx.fillStyle = object.color;
  3662.       ctx.strokeStyle = object.outline;
  3663.       ctx.beginPath();
  3664.       ctx.arc(
  3665.         0,
  3666.         0,
  3667.         object.width/2 / clientFovMultiplier,
  3668.         0,
  3669.         2 * Math.PI
  3670.       );
  3671.       ctx.fill();
  3672.           if (CRTP != 'simplistic') {
  3673.           ctx.stroke();
  3674.           };
  3675.  
  3676.       ctx.lineJoin = "miter"; //change back
  3677.       ctx.restore();
  3678.       if (showHitBox == "yes") {
  3679.         //draw hitbox
  3680.         ctx.strokeStyle = "blue";
  3681.         ctx.lineWidth = 3;
  3682.         ctx.beginPath();
  3683.         ctx.arc(
  3684.           drawingX,
  3685.           drawingY,
  3686.           object.width / clientFovMultiplier,
  3687.           0,
  3688.           2 * Math.PI
  3689.         );
  3690.           if (CRTP != 'simplistic') {
  3691.           ctx.stroke();
  3692.           };
  3693.       }
  3694.     }
  3695.   };
  3696.  
  3697.     function newbulletbarrel(canvas, x,width,height,shootChange, fov){//shootchange is change in barrel height when shooting
  3698.     canvas.fillRect(
  3699.       (x - width / 2) / fov,
  3700.       -(height - shootChange) / fov,
  3701.       width / fov,
  3702.       (height - shootChange) / fov
  3703.     );
  3704.     if (document.getElementById('theme').value != 'simplistic') {
  3705.     canvas.strokeRect(
  3706.       (x - width / 2) / fov,
  3707.       -(height - shootChange) / fov,
  3708.       width / fov,
  3709.       (height - shootChange) / fov
  3710.     );
  3711.     };
  3712.   };
  3713.     function newdronebarrel(canvas, x,width,height,shootChange, fov){
  3714.     canvas.beginPath();
  3715.     canvas.moveTo(
  3716.       -width / 2 / fov +
  3717.         x / fov,
  3718.       0
  3719.     );
  3720.     canvas.lineTo(
  3721.       -width / fov +
  3722.         x / fov,
  3723.       -(height - shootChange) / fov
  3724.     );
  3725.     canvas.lineTo(
  3726.       width / fov +
  3727.         (x * 2) / fov,
  3728.       -(height - shootChange) / fov
  3729.     );
  3730.     canvas.lineTo(
  3731.       width / 2 / fov +
  3732.         (x * 2) / fov,
  3733.       0
  3734.     );
  3735.     canvas.fill();
  3736.         if (document.getElementById('theme').value != 'simplistic') {
  3737.     canvas.stroke();
  3738.         };
  3739.   };
  3740.     function newtrapbarrel(canvas, x,width,height,shootChange, fov){
  3741.     canvas.fillRect(
  3742.       (x - width / 2) / fov,
  3743.       -(height - shootChange) * 0.67 / fov,
  3744.       width / fov,
  3745.       (height - shootChange) * 0.67 / fov
  3746.     );
  3747.             if (document.getElementById('theme').value != 'simplistic') {
  3748.     canvas.strokeRect(
  3749.       (x - width / 2) / fov,
  3750.       -(height - shootChange) * 0.67 / fov,
  3751.       width / fov,
  3752.       (height - shootChange) * 0.67 / fov
  3753.     );
  3754.             };
  3755.     canvas.beginPath();
  3756.     canvas.moveTo(
  3757.       (x - width / 2) / fov,
  3758.       -(height - shootChange) * 0.67 / fov
  3759.     );
  3760.     canvas.lineTo(
  3761.       (x - width) / fov,
  3762.       -(height - shootChange) / fov
  3763.     );
  3764.     canvas.lineTo(
  3765.       (x + width) / fov,
  3766.       -(height - shootChange) / fov
  3767.     );
  3768.     canvas.lineTo(
  3769.       (x + width / 2) / fov,
  3770.       -(height - shootChange) * 0.67 / fov
  3771.     );
  3772.     canvas.fill();
  3773.         if (document.getElementById('theme').value != 'simplistic') {
  3774.     canvas.stroke();
  3775.         };
  3776.   };
  3777.     function newminebarrel(canvas, x,width,height,shootChange, fov){
  3778.     canvas.fillRect(
  3779.       (x - width / 2) / fov,
  3780.       -(height - shootChange) / fov,
  3781.       width / fov,
  3782.       (height - shootChange) / fov
  3783.     );
  3784.     if (document.getElementById('theme').value != 'simplistic') {
  3785.     canvas.strokeRect(
  3786.       (x - width / 2) / fov,
  3787.       -(height - shootChange) / fov,
  3788.       width / fov,
  3789.       (height - shootChange) / fov
  3790.     );
  3791.     };
  3792.     canvas.fillRect(
  3793.       (-width * 1.5) / 2 / fov + x / fov,
  3794.       -(height - shootChange) * 0.67 / fov,
  3795.       (width / fov) * 1.5,
  3796.       (height - shootChange) * 0.67 / fov
  3797.     );
  3798.      if (document.getElementById('theme').value != 'simplistic') {
  3799.     canvas.strokeRect(
  3800.       (-width * 1.5) / 2 / fov + x / fov,
  3801.       -(height - shootChange) * 0.67 / fov,
  3802.       (width / fov) * 1.5,
  3803.       (height - shootChange) * 0.67 / fov
  3804.     );
  3805.      };
  3806.   };
  3807.     function newminionbarrel(canvas, x,width,height,shootChange, fov){
  3808.     canvas.fillRect(
  3809.       (x - width / 2) / fov,
  3810.       -(height - shootChange) / fov,
  3811.       width / fov,
  3812.       (height - shootChange) / fov
  3813.     );
  3814.     if (document.getElementById('theme').value != 'simplistic') {
  3815.     canvas.strokeRect(
  3816.       (x - width / 2) / fov,
  3817.       -(height - shootChange) / fov,
  3818.       width / fov,
  3819.       (height - shootChange) / fov
  3820.     );
  3821.     };
  3822.     canvas.fillRect(
  3823.       (x - width * 0.75) / fov,
  3824.       -(height - shootChange) / 1.5 / fov,
  3825.       (width / fov) * 1.5,
  3826.       (height - shootChange) / 1.5 / fov
  3827.     );
  3828.     if (document.getElementById('theme').value != 'simplistic') {
  3829.     canvas.strokeRect(
  3830.       (x - width * 0.75) / fov,
  3831.       -(height - shootChange) / 1.5 / fov,
  3832.       (width / fov) * 1.5,
  3833.       (height - shootChange) / 1.5 / fov
  3834.     );
  3835.     };
  3836.     canvas.fillRect(
  3837.       (x - width * 0.75) / fov,
  3838.       -(height - shootChange) / fov,
  3839.       (width / fov) * 1.5,
  3840.       (height - shootChange) / 5 / fov
  3841.     );
  3842.     if (document.getElementById('theme').value != 'simplistic') {
  3843.     canvas.strokeRect(
  3844.       (x - width * 0.75) / fov,
  3845.       -(height - shootChange) / fov,
  3846.       (width / fov) * 1.5,
  3847.       (height - shootChange) / 5 /fov
  3848.     );
  3849.     };
  3850.   };
  3851.  
  3852.     drawobjects = newdraw;
  3853.     drawPlayer = newdrawplayer;
  3854.     drawBulletBarrel = newbulletbarrel; drawDroneBarrel = newdronebarrel; drawTrapBarrel = newtrapbarrel; drawMineBarrel = newminebarrel; drawMinionBarrel = newminionbarrel;
  3855.  
  3856.     let pd = false;
  3857.     const editloop = () => {
  3858.         if (player.health <= 1 && !pd && gameStart == -1) {
  3859.             if (autorespawn) {
  3860.                 document.getElementById('continue').click();
  3861.                 document.getElementById('play').click();
  3862.             };
  3863.             pd = true;
  3864.         } else if (player.health > 1) {
  3865.             pd = false;
  3866.         };
  3867.         requestAnimationFrame(editloop);
  3868.     };
  3869.     editloop();
  3870. })();