// TODO: SAVE ON CLICK

var left, right, genLight, score
var el1 = [], el2 = [], scrVals = []

function preload() {
   genLight = loadFont("fonts/Gen-Light.otf");

   score = loadStrings('../score/score.txt')

   for (var i = 0; i < 8; i++) {
      el1.push( loadSVG('../svgs/el.' + int(random(1, 12)) + '.svg') )
      el2.push( loadSVG('../svgs/el.' + int(random(1, 12)) + '.svg') )
   }
}

function setup() {
   createCanvas(800, 1200, SVG)

   textFont(genLight)

   // frameRate(1)
   noLoop()

   fill(220)
   textSize(30)
   textAlign('right')

}

function draw() {
   background('#151515')

   fill("#111111")
   rect(0, 220, width, 280)

   fill("#BBBBBB")
   for (var i = 0; i < score.length; i++) {
      var line = split(score[i].slice(0, -1), ' ')
      text(line.join(" "), 600, 280 + (i*20), 170)
      scrVals.push(line)
   }

   stroke('#FFCC00')
   fill('#FFCC00')

   for (var i = 0; i < el1.length; i++) {
      var r = random(5)
      var rVal = int(scrVals[int(random(scrVals.length))][int(random(7))])
      var coin = int(random(2))
      rVal = map(rVal, 0, 127, 0, width)

      el1[i].attribute('fill', 'none')
      el2[i].attribute('fill', 'none')
      el1[i].attribute('stroke', '#FFCC00')
      el2[i].attribute('stroke', '#FFCC00')

      image(el1[i], 120 + rVal, (height/el1.length)*(i)+30, 75 + r, 75 + r)
      image(el2[i], 15, (height/el1.length)*(i)+30, 75, 75)

      if (coin) {
         var coin2 = int(random(2))
         if (coin2) {
            ellipse(120 + rVal, (height/el1.length)*(i)+45, 30 + r, 30 + r)
         } else {
            ellipse(51, (height/el1.length)*(i)+55, 30, 30)
         }
      }
   }
}

function saveMe() {
   save()
}