<a>click here to download this svg!</a>

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  move(xDistance, yDistance) {
    return new Point(this.x + xDistance, this.y + yDistance);
  }
  moveByAngle(angle, distance) {
    let r = (angle * Math.PI) / 180;
    return new Point(
      this.x + distance * Math.sin(r),
      this.y + distance * Math.cos(r)
    );
  }
  distance(point2) {
    let point1 = new Point(this.x, this.y)
    let a = point1.x - point2.x
    let b = point1.y - point2.y
    if (a < 0) {
      a = a - (a * 2)
    }
    if (b < 0) {
      b = b - (b * 2)
    }
    let toSquare = (b ** 2) + (a ** 2)
    return Math.sqrt(toSquare)
  }
}
 
let mouse = new Point(0, 0)
 
document.addEventListener('pointermove', ((e)=>{ 
mouse.x = e.pageX - 10
mouse.y = e.pageY - 8
}))
 
//Ensure the mouse position fixes itself even when the page is scrolled
document.addEventListener('scroll', ((e)=>{ 
mouse.x = e.pageX - 10
mouse.y = e.pageY - 8
}))
 
function randomRange(min, max,decimalPlaces) {
if (decimalPlaces==undefined){decimalPlaces=0}
  return roundOff(min + (max - min) * (Math.random()),decimalPlaces);
}
 
function roundOff (number,decimalPlaces){
    let roundedNumber=number.toFixed(decimalPlaces);
    return JSON.parse(roundedNumber)}
 
 function pointsToSvgPoints (transArray) {
  let returnArray = []
  transArray.forEach(x => {
    returnArray.push([x.x, x.y])
  })
  return returnArray
}
 
let canvasSize=new Point(1800,800)
 
var draw = SVG().addTo('body').size(canvasSize.x, canvasSize.y)
 
function hitEffect (min,max) {
let midPoint;
  let returnArray = []
   midPoint = new Point(randomRange(-100, canvasSize.x), randomRange(-100, canvasSize.y))
if (min==undefined){
  for (let i = 0; i < 180; i++) {
    returnArray.push(midPoint.moveByAngle(i * 2, randomRange(310, 360)))
  }}
else{   
for (let i = 0; i < 180; i++) {
    returnArray.push(midPoint.moveByAngle(i * 2, randomRange(min, max)))
  }}
  return pointsToSvgPoints(returnArray)
}
 
class BadRobot {
constructor (pos){
console.log(pos)
this.face=draw.rect(300,300).move(pos.x-200,pos.y-30).fill('black')
this.eye1=draw.circle(100).move(pos.x+30-210,pos.y).fill('red')
this.anger1=draw.rect(100,50).move(pos.x-160,pos.y-20).fill('black').rotate(30)
this.eye2=draw.circle(100).move(pos.x+70-100,pos.y).fill('red')
this.anger2=draw.rect(100,50).move(pos.x-50,pos.y-15).fill('black').rotate(-30)
this.forearm=draw.rect(115,23).move(pos.x+80,pos.y+100).fill('black')
this.arm=draw.rect(145,20).move(pos.x+183,160).fill('black').rotate(25)
this.arm2=draw.rect(240,20).move(pos.x+168,55).fill('black').rotate(-46)
this.joint=draw.circle(40).move(pos.x+82,pos.y+90).fill('red');
console.log(this.joint.attr())
this.elbow=draw.circle(36).move(385,128).fill('red');
console.log(this.joint.attr())
this.fist=draw.circle(200).move(400,180).fill('red').stroke({ color: 'black', opacity: 1, width: 5 })
this.hitEffect=draw.polygon(hitEffect(10,20)).fill('orange').move(470,260).size(150)
//this.fist2=draw.circle(50).move(pos.x+330,5).fill('red');
this.hitEffect3=draw.polygon(hitEffect(10,20)).fill('orange').move(420,460).size(150)
this.hitEffect4=draw.polygon(hitEffect(10,20)).fill('orange').move(370,260).size(150)
crackingEarthEffect()
this.whitebox=draw.rect(50,10).move(pos.x+350,0).fill('red')
this.hitEffect2=draw.polygon(hitEffect(10,20)).fill('orange').move(470,390).size(150)
}}
 
let lineArray=[];
function crackingEarthEffect (){
let pointCheck;
for (let i = 0; i < 180; i++) {
pointCheck=new Point(500,260).moveByAngle(2*i+400, 80)
lineArray.push(draw.line(500, 260, pointCheck.x, pointCheck.y).move(pointCheck.x+30, pointCheck.y-80).rotate(10).size(8).stroke({ color: 'coral', width: 3, linecap: 'round' }))
}
return lineArray
}
//lineArray[0].attr()
 
class Planet {
constructor(pos){
this.mainCircle=draw.circle(300).fill('#0083e8').move(pos.x,pos.y)
this.land=draw.ellipse(100,150).fill('#029400').move(pos.x+40,pos.y+20)
this.land2=draw.ellipse(100,150).fill('#029400').move(pos.x+160,pos.y+20)
this.land3=draw.ellipse(150,50).fill('#029400').move(pos.x+75,pos.y+180)
}}
 
class GoodRobot {
constructor (pos){
scrollTo(pos.x,pos.y)
this.face=draw.rect(300,300).move(pos.x-100,pos.y).fill('#5c5a5a').radius(10)
this.eye1=draw.circle(100).move(pos.x-70,50).fill('turquoise').opacity(0.8)
this.eye2=draw.circle(100).move(pos.x+70,50).fill('turquoise').opacity(0.8)
this.arm=draw.ellipse(280,50).move(pos.x+160,pos.y+320).fill('#5c5a5a').rotate(40)
this.joint=draw.circle(80).move(pos.x+160,pos.y+200).fill('turquoise')
this.mouth=draw.ellipse(200,50).move(pos.x-50,pos.y+200).fill('turquoise')
this.hand=draw.circle(130).move(1300,400).fill('turquoise')
}}
 
class GoodPlanet {
constructor(pos){
this.mainCircle=draw.circle(300).fill('#0083e8').move(pos.x,pos.y)
this.land=draw.ellipse(100,100).fill('#029400').move(pos.x+40,pos.y+30)
this.land2=draw.ellipse(100,100).fill('#029400').move(pos.x+160,pos.y+30)
this.land3=draw.ellipse(150,50).fill('#029400').move(pos.x+75,pos.y+180)
this.arm1=draw.ellipse(200,50).move(pos.x-100,pos.y+80).fill('#0083e8').rotate(65)
this.hand=draw.circle(120).move(pos.x-100,pos.y-50).fill('#0083e8')
}}
 
let badEarth=new Planet(new Point(400,350))
let theRobot=new BadRobot(new Point(200,30))
let goodRobot=new GoodRobot(new Point(980,30))
let goodEarth= new GoodPlanet(new Point(1430,500))
 
const thisSvg = draw.svg();
 
const link = document.getElementsByTagName('a')[0]
const fileName = document.baseURI.replace(/(.*\/)([^\/]*)(\.svg)/, '$2-edited$3')
const data = 'data:image/svg+xml;base64,' + btoa(thisSvg)
link.setAttribute('download', fileName)
link.setAttribute('href', data)
 
let border=draw.rect(10,820).move(795,-5).fill('grey')
 
//Two armies robots fighting over the earth and armies be in different patters. Background = black