☰

Rocketer Utilities

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

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

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