#MonthOfCode - Day 15: yellow

My entry for the 15th day of the month of code. The theme for today is: yellow.

This is a little color game: adjust the sliders until the color on the right matches the yellow on the left. You can play with random colors after yellow. The code uses <input type="range"/> which is not guaranteed to be a slider on all platforms. Also, I only included webkit specific CSS rules.

Code after the break.

yellow.jsview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
document.addEventListener('DOMContentLoaded', function() {

  var $reference = $('#reference-15');
  var $player = $('#player-15');
  var $sliders = $player.find('input');

  var referenceRGB;

  $sliders.on('change', function () {
    var rgb = $sliders.map(function (i, s) {
      return s.value;
    }).toArray();

    $player.css('background-color', 'rgb(' + rgb.join(',') + ')');

    if (goodEnough(rgb, referenceRGB)) {
      alert('Well done.');
      reset();
    }
  });

  function goodEnough(color1, color2) {
    for (var i = 0; i < 3; i++) {
      if (Math.abs(color1[i] - color2[i]) > 8) {
        return false;
      }
    }
    return true;
  }

  var firstGame = true;
  function reset() {
    if (firstGame) {
      firstGame = false;
      referenceRGB = [220, 235, 46]
    } else {
      referenceRGB = [rand(255), rand(255), rand(255)];
    }

    $reference.css('background-color', 'rgb(' + referenceRGB.join(',') + ')');
    if (firstGame) {
      $sliders.each(function (i, s) {
        s.value = rand(255);
      });
      $sliders.trigger('change');
    }
  }

  function rand(n) {
    return Math.floor(Math.random() * n);
  }

  reset();
});
yellow.cssview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#moc-15 {
	width: 500px;
	height: 350px;
	position: relative;
	border: 1px solid black;
}

#reference-15 {
	position: absolute;
	right: 50%;
	left:0;
	top:0;
	bottom:0;
}

#player-15 {
	position: absolute;
	right: 0;
	left:50%;
	top:0;
	bottom:0;
}

#moc-15 input[type='range'] {
    -webkit-appearance: none !important;
    height:7px;
    border-radius: 3px;
    border: 1px solid #777;
    display: block;
    width: 60%;
    margin: 20px auto;
}

#moc-15 input[type='range']:focus {
	outline: none;
}

#moc-15 input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:#ddd;
    border: 1px solid #777;
    border-radius: 2px;
    height:12px;
    width:12px;
}

#red-15 {
	background: red;
}
#green-15 {
	background: green;
}
#blue-15 {
	background: blue;
}