roshnet/counter.html

## counter.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{ scores.one }} to {{ scores.two }}</h1>
    <p>
      Playing upto: {{ winLimit }}
    </p>
    <input
      @input="winLimit = $event.target.value"
      type="number"
      autofocus
    />
    <button @click="incrementScore(1)">Player One</button>
    <button @click="incrementScore(2)">Player Two</button>
    <button @click="resetScores">RESET</button>
  </div>
</body>
</html>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      scores: {
        one: 0,
        two: 0
      },
      winLimit: 5,
      winner: null
    }
  },
  methods: {
    incrementScore(player) {
      if (!this.winner && player == 1) {
        if (this.scores.one < this.winLimit) {
          this.scores.one += 1;
          if (this.scores.one >= this.winLimit)
            this.winner = 1;
        }
      }
      if (!this.winner && player == 2) {
        if (this.scores.two < this.winLimit) {
          this.scores.two += 1;
          if (this.scores.two >= this.winLimit)
            this.winner = 2;
        }
      }
    },
    resetScores() {
      this.scores.one = 0;
      this.scores.two = 0;
      this.winner = null;
    },
  }
});

</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="./vue.js"></script>
	<title>Document</title>
	</head>
	<body>
	<div id="app">
	<h1>{{ scores.one }} to {{ scores.two }}</h1>
	<p>
	Playing upto: {{ winLimit }}
	</p>
	<input
	@input="winLimit = $event.target.value"
	type="number"
	autofocus
	/>
	<button @click="incrementScore(1)">Player One</button>
	<button @click="incrementScore(2)">Player Two</button>
	<button @click="resetScores">RESET</button>
	</div>
	</body>
	</html>

	<script>
	new Vue({
	el: '#app',
	data() {
	return {
	scores: {
	one: 0,
	two: 0
	},
	winLimit: 5,
	winner: null
	}
	},
	methods: {
	incrementScore(player) {
	if (!this.winner && player == 1) {
	if (this.scores.one < this.winLimit) {
	this.scores.one += 1;
	if (this.scores.one >= this.winLimit)
	this.winner = 1;
	}
	}
	if (!this.winner && player == 2) {
	if (this.scores.two < this.winLimit) {
	this.scores.two += 1;
	if (this.scores.two >= this.winLimit)
	this.winner = 2;
	}
	}
	},
	resetScores() {
	this.scores.one = 0;
	this.scores.two = 0;
	this.winner = null;
	},
	}
	});

	</script>