$size: 400px;

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: sans-serif;
  background: #2c3e50;
}

.info {
  position: fixed;
  top: 0px;
  left: 0px;
  background: #ecf0f1;
  border-radius: 0 0 5px 0;
  height: auto;
  width: auto;
  padding: 20px;
  color: #000;
  .time {
    &:before {
      content: "Time left:";
      margin-right: 5px;
    }
  }
  .points {
    &:before {
      content: "Points:";
      margin-right: 20px;
    }
  }
}

.wall {
  width: $size;
  height: $size;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  .dot {
    height: 10%;
    width: 10%;
    background: #ecf0f1;
    border-radius: 50%;
    float: left;
    &.active {
      background: #e74c3c;
      cursor: pointer;
    }
  }
  .start {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #ecf0f1;
    border-radius: 5px;
    z-index: 100;
    top: 0;
    left: 0;
    button {
      width: $size / 2;
      height: $size / 10;
      font-size: $size / 20;
      text-transform: uppercase;
      background: #e74c3c;
      border-radius: 5px;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: pointer;
      &:hover {
        background: darken(#e74c3c, 20%);
      }
    }
  }
  .end {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ecf0f1;
    z-index: 100;
    border-radius: 5px;
    display: none;
    .score {
      text-align: center;
      color: #000;
      font-size: $size / 15;
      line-height: $size / 5;
    }
    button {
      width: $size / 2;
      height: $size / 10;
      font-size: $size / 20;
      text-transform: uppercase;
      background: #e74c3c;
      border-radius: 5px;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: pointer;
      &:hover {
        background: darken(#e74c3c, 20%);
      }
    }
  }
  &:after {
    content: "";
    clear: both;
    display: table;
  }
}

$(document).ready(function() {
  $(document).on("click", ".start button, .end button", function() {
    App.start_game();
  });
  $(document).on("click", ".dot.active", function() {
    App.add_point();
  });
});

App = {
  current_active: "",
  dot_selector: ".wall .dot",
  points: 0,
  time: 30,
  time_interval: "",
   
  init_game: function() {
    this.points = 0;
    this.time = 30;
  },
   
  start_game: function() {
    this.init_game();
    $(".start, .end").fadeOut("fast");
    this.set_dot();
    $(".info .time").html("00:" + this.time);
    $(".info .points").html(this.points);
    this.time_interval = setInterval("App.update_time()", 1000);
  },
   
  update_time: function() {
    this.time -= 1;
    if (this.time > 0) {
      if (String(this.time).length == 1) {
        this.time = "0" + this.time;
      }
      $(".info .time").html("00:" + this.time);
    } else {
      $(".info .time").html("00:00");
      clearInterval(this.time_interval);
      $(".end .score").html("Game over!<br />You scored " + this.points + " points!").parent().fadeIn("fast");
    }
  },
   
  add_point: function() {
    this.set_dot();
    this.points += 1;
    $(".info .points").html(this.points);
  },
  
  set_dot: function() {
    $(this.dot_selector).removeClass("active");
    var active = Math.floor((Math.random() * ($(this.dot_selector).length - 1))+1);
    $(this.dot_selector + ":eq("+active+")").addClass("active");
  }
};