jmora/kata_tenis.html

## kata_tenis.html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      table {border-collapse: collapse; border: 1px solid #000;}
    </style>
    <script>
      var counter = {
        texts: ['0', '15', '30', '40'],
        specials: ['40, pierde', '40', 'deuce', 'ventaja', 'gana'],
        players: [0, 0],
        winrar: 0,
        update: function(p){
          document.getElementById('points'+p).innerHTML = this.getText(p);
        },
        getText: function(p){
          if (this.players[p] < this.texts.length)
            return this.texts[this.players[p]];
          var diff = Math.min(4, this.players[p] - this.players[(p+1)%2] + 2);
          if (diff === 4)
            this.winrar = p + 1;
          return this.specials[diff];
        },
        points: function(p){
          if (this.winrar)
            alert('Impossibru! Ha ganado ' + this.winrar);
          else {
            this.players[p] += 1;
            this.update(0);
            this.update(1);
          }
        }
      };
    </script>
  </head>
  <body>
    <h3>Kata tenis</h3>
    <p>No es muy bonito, tampoco pretendía serlo. El <a href="http://www.solveet.com/exercises/Kata-Tennis/13">
      enunciado</a> es un poco ambiguo en cuanto a interfaces, así que he hecho uno gráfico.</p>
    <table border="1">
      <tr>
        <td>Jugador 1</td>
        <td>Jugador 2</td>
      </tr>
      <tr>
        <td id="points0" align="right">0</td>
        <td id="points1" align="right">0</td>
      </tr>
      <tr>
        <td><input type="button" onclick="counter.points(0)" value="Tanto 1"></td>
        <td><input type="button" onclick="counter.points(1)" value="Tanto 2"></td>
      </tr>
    </table>
    <br>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	table {border-collapse: collapse; border: 1px solid #000;}
	</style>
	<script>
	var counter = {
	texts: ['0', '15', '30', '40'],
	specials: ['40, pierde', '40', 'deuce', 'ventaja', 'gana'],
	players: [0, 0],
	winrar: 0,
	update: function(p){
	document.getElementById('points'+p).innerHTML = this.getText(p);
	},
	getText: function(p){
	if (this.players[p] < this.texts.length)
	return this.texts[this.players[p]];
	var diff = Math.min(4, this.players[p] - this.players[(p+1)%2] + 2);
	if (diff === 4)
	this.winrar = p + 1;
	return this.specials[diff];
	},
	points: function(p){
	if (this.winrar)
	alert('Impossibru! Ha ganado ' + this.winrar);
	else {
	this.players[p] += 1;
	this.update(0);
	this.update(1);
	}
	}
	};
	</script>
	</head>
	<body>
	<h3>Kata tenis</h3>
	<p>No es muy bonito, tampoco pretendía serlo. El <a href="http://www.solveet.com/exercises/Kata-Tennis/13">
	enunciado</a> es un poco ambiguo en cuanto a interfaces, así que he hecho uno gráfico.</p>
	<table border="1">
	<tr>
	<td>Jugador 1</td>
	<td>Jugador 2</td>
	</tr>
	<tr>
	<td id="points0" align="right">0</td>
	<td id="points1" align="right">0</td>
	</tr>
	<tr>
	<td><input type="button" onclick="counter.points(0)" value="Tanto 1"></td>
	<td><input type="button" onclick="counter.points(1)" value="Tanto 2"></td>
	</tr>
	</table>
	<br>
	</body>
	</html>