<div id="predict-counts">
  <div class="tick box">
    <div class="tick count">0</div>
    <img src="/images/traffic-light/circle-tick.png">
  </div>
  <div class="circle box">
    <div class="cross count">0</div>
    <img src="/images/traffic-light/circle-cross.png">
  </div>
</div>

<script>
'use strict';
const $predictCounts = $('#predict-counts');
cd.kata.showPredictCounts = () => $predictCounts.show('slow');
cd.kata.hidePredictCounts = () => $predictCounts.hide('slow');

$(() => {

  cd.kata.updatePredictCounts = (light) => {
    if (cd.lib.isPredict(light)) {
      $('.count', $predictCounts).removeClass('red amber green');
      const isRight = (light.colour === light.predicted);
      const name = isRight ? 'tick' : 'cross';
      $(`.${name}.count`, $predictCounts)
        .text(counts[name] += 1)
        .addClass(light.predicted);
    }
  };

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  const counts = {
    tick: 0,
    cross: 0,
    revert: 0
  };

});
</script>

<div id="predict-counts">
  <div class="tick box">
    <div class="tick count">0</div>
    <img src="/images/traffic-light/circle-tick.png">
  </div>
  <div class="circle box">
    <div class="cross count">0</div>
    <img src="/images/traffic-light/circle-cross.png">
  </div>
</div>

<script>
'use strict';
const $predictCounts = $('#predict-counts');
cd.kata.showPredictCounts = () => $predictCounts.show('slow');
cd.kata.hidePredictCounts = () => $predictCounts.hide('slow');

$(() => {

  cd.kata.updatePredictCounts = (light) => {
    if (cd.lib.isPredict(light)) {
      $('.count', $predictCounts).removeClass('red amber green');
      const isRight = (light.colour === light.predicted);
      const name = isRight ? 'tick' : 'cross';
      $(`.${name}.count`, $predictCounts)
        .text(counts[name] += 1)
        .addClass(light.predicted);
    }
    else if (!cd.lib.isRevert(light)) {
      $('.count', $predictCounts).removeClass('red amber green');      
    }
  };

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  const counts = {
    tick: 0,
    cross: 0,
    revert: 0
  };

});
</script>

Clear predict count background colour for a non predict/revert light.
Clear predict count background colour for a non predict/revert light.
