Penalty Shoot Game

Check when a penalty shoot game is over

by António Almeida

HTML

<p>Normal Game</p>

<div class="result">
  <div res="g f - - -"></div>
  <div res="g - - - -"></div>
</div>
<div class="result">
  <div res="g f g g -"></div>
  <div res="g f f - -"></div>
</div>
<div class="result">
  <div res="g f g g -"></div>
  <div res="g f f f -"></div>
</div>
<div class="result">
  <div res="g g g - -"></div>
  <div res="f f - - -"></div>
</div>

<hr />
<p>Sudden death</p>

<div class="result">
  <div res="g f g f g g"></div>
  <div res="g g f f g -"></div>
</div>
<div class="result">
  <div res="g f g f g g"></div>
  <div res="g g f f g f"></div>
</div>

CSS

p {
	font-size: 12px;
	font-family: sans-serif;
}

.result > * {
	display: inline-flex;
	vertical-align: middle;
}

.result > div:first-child:after {
	content: "vs";
	line-height: 30px;
	margin: 0 5px;
	font-size: 12px;
	font-family: sans-serif;
}

.result .dot {
	width: 20px;
	height: 20px;
	display: inline-block;
	margin: 3px;
	border: 2px solid rgba(0, 0, 0, 0.65);
	border-radius: 14px;
}

.result .dot[g] {
	background-color: #489848;
}

.result .dot[f] {
	background-color: #CC3434;
}

.result.ended > div:last-child:after {
	content: "✔";
	color: #489848;
	font-weight: bold;
	margin-left: 20px;
}

.result > .separator:before {
	content: "-";
	line-height: 20px;
	margin: 0 5px;
	font-size: 12px;
}

JavaScript

$(document).ready(function() {
  $(".result > div").each(function() {
    var div = $(this);
    $.each($(this).attr("res").split(' '), function(i, r) {
      $(div).append("<div class='dot' " + r + "></div>");
    });
  });

  $(".result").each(function() {
    var total = $(this).find("[g],[f]").length,
		score1 = $(this).find("div:first-child [g]").length,
		score2 = $(this).find("div:last-child [g]").length;
	
    if (checkEndGame(total, score1, score2, 10, true))
      $(this).addClass("ended");
  });
});

function checkEndGame(round, score1, score2, total_rounds, first_shooter) {
  return Math.abs(score1 - score2) > (round > total_rounds ?
    round % 2 : Math.ceil((total_rounds - round) / 2.0) - (first_shooter ^ score1 < score2 ? 0 : round % 2));
}