<div id="game">
<button class="user" data-name="red">Red</button>
<button class="user" data-name="green">Green</button>
<button class="user" data-name="blue">Blue</button>
<button id="test">Change Color</button>

id="rendered-js">
      (function () {
  var Montanha, MontanhaRange, dt, MontanhaRanges, janela;

  janela = Sketch.create();

  janela.mouse.x = janela.width / 10;

  janela.mouse.y = janela.height;

  MontanhaRanges = [];

  dt = 1;
  p = 90;

  Montanha = function (config) {
    return this.reset(config);
  };

$(document).ready(function() {
    var user = "none";
    $(".user").click(function() {
        user = $(this).attr("data-name");
    });
        $("#test").click(function() {
        window.location.reload();
        p = 240
    });
});

// Montanhas

  Montanha.prototype.reset = function (config) {
    this.layer = config.layer;
    this.x = config.x;
    this.y = config.y;
    this.width = config.width;
    this.height = config.height;
    return this.color = config.color;
  };

  // Montanha tamanho

  MontanhaRange = function (config) {
    this.x = 0;
    this.Montanhas = [];
    this.layer = config.layer;
    this.width = {
      min: config.width.min,
      max: config.width.max };

    this.height = {
      min: config.height.min,
      max: config.height.max };

    this.speed = config.speed;
    this.color = config.color;
    this.populate();
    return this;
  };

  MontanhaRange.prototype.populate = function () {
    var newHeight, newWidth, results, totalWidth;
    totalWidth = 0;
    results = [];
    while (totalWidth <= janela.width + this.width.max * 4) {if (window.CP.shouldStopExecution(0)) break;
      newWidth = round(random(this.width.min, this.width.max));
      newHeight = round(random(this.height.min, this.height.max));
      this.Montanhas.push(new Montanha({
        layer: this.layer,
        x: this.Montanhas.length === 0 ? 0 : this.Montanhas[this.Montanhas.length - 1].x + this.Montanhas[this.Montanhas.length - 1].width,
        y: janela.height - newHeight,
        width: newWidth,
        height: newHeight,
        color: this.color }));

      results.push(totalWidth += newWidth);
    }window.CP.exitedLoop(0);
    return results;
  };

  MontanhaRange.prototype.update = function () {
    var firstMontanha, lastMontanha, newHeight, newWidth;
    this.x -= janela.mouse.x * this.speed * dt;
    firstMontanha = this.Montanhas[0];
    if (firstMontanha.width + firstMontanha.x + this.x < -this.width.max) {
      newWidth = round(random(this.width.min, this.width.max));
      newHeight = round(random(this.height.min, this.height.max));
      lastMontanha = this.Montanhas[this.Montanhas.length - 1];
      firstMontanha.reset({
        layer: this.layer,
        x: lastMontanha.x + lastMontanha.width,
        y: janela.height - newHeight,
        width: newWidth,
        height: newHeight,
        color: this.color });

      return this.Montanhas.push(this.Montanhas.shift());
    }
  };

  MontanhaRange.prototype.render = function () {
    var c, d, i, j, pointCount, ref;
    janela.save();
    janela.translate(this.x, (janela.height - janela.mouse.y) / 20 * this.layer);
    janela.beginPath();
    pointCount = this.Montanhas.length;
    janela.moveTo(this.Montanhas[0].x, this.Montanhas[0].y);
    for (i = j = 0, ref = pointCount - 2; j <= ref; i = j += 1) {if (window.CP.shouldStopExecution(1)) break;
      c = (this.Montanhas[i].x + this.Montanhas[i + 1].x) / 2;
      d = (this.Montanhas[i].y + this.Montanhas[i + 1].y) / 2;
      janela.quadraticCurveTo(this.Montanhas[i].x, this.Montanhas[i].y, c, d);
    }window.CP.exitedLoop(1);
    janela.lineTo(janela.width - this.x, janela.height);
    janela.lineTo(0 - this.x, janela.height);
    janela.closePath();
    janela.fillStyle = this.color;
    janela.fill();
    return janela.restore();
  };

  // SETUP

  janela.setup = function () {
    var i, results;
    i = 5;
    results = [];
    while (i--) {if (window.CP.shouldStopExecution(2)) break;
      results.push(MontanhaRanges.push(new MontanhaRange({
        layer: i + 1,
        width: {
          min: (i + 1) * 50,
          max: (i + 1) * 70 },

        height: {
          min: 200 - i * 40,
          max: 300 - i * 40 },

        speed: (i + 1) * .003,
        color: 'hsl(' + p + ', ' + ((i + 1) * 1 + 10) + '%, ' + (75 - i * 13) + '% )' })));
      console.log("Hello world!");

    }window.CP.exitedLoop(2);
    return results;
  };

  // CLEAR

  janela.clear = function () {
    return janela.clearRect(0, 0, janela.width, janela.height);
  };

  // UPDATE

  janela.update = function () {
    var i, results;
    dt = janela.dt < .1 ? .1 : janela.dt / 16;
    dt = dt > 5 ? 5 : dt;
    i = MontanhaRanges.length;
    results = [];
    while (i--) {if (window.CP.shouldStopExecution(3)) break;
      results.push(MontanhaRanges[i].update(i));
    }window.CP.exitedLoop(3);
    return results;
  };

  // DRAW

  janela.draw = function () {
    var i, results;
    i = MontanhaRanges.length;
    results = [];
    while (i--) {if (window.CP.shouldStopExecution(4)) break;
      results.push(MontanhaRanges[i].render(i));
    }window.CP.exitedLoop(4);
    return results;
  };

  // Mousemove Fix

  $(window).on('mousemove', function (e) {
    janela.mouse.x = e.pageX;
    return janela.mouse.y = e.pageY;
  });

}).call(this);

color: 'hsl(' + p + ', ' + ((i + 1) * 1 + 10) + '%, ' + (75 - i * 13) + '% )' })));

$(document).ready(function() {
    var user = "none";
    $(".user").click(function() {
        user = $(this).attr("data-name");
    });
        $("#test").click(function() {
        window.location.reload();
        p = 240
    });
});