1
0
mirror of https://github.com/osmarks/website synced 2024-12-24 00:50:31 +00:00
website/experiments/auto-score-keeper/index.html
2020-03-08 17:13:14 +00:00

71 lines
1.5 KiB
HTML

---
title: AutoScorer
description: Automatic score keeper, designed for handling Monopoly money.
slug: scorer
---
<div id="app">
<input type="number" v-model.number="startingScore">
<input type="text" v-model="newPlayerName">
<button @click="players.push(newPlayerName)">Add</button>
<ul>
<li
is="player"
v-for="(player, idx) in players"
:key="player"
:title="player"
:name="player"
:start-score="startingScore"
@delete="players.splice(idx, 1)">
</li>
</ul>
</div>
<script src="/assets/js/vue.js"></script>
<script type="text/x-template" id="score-template">
<div class="score">
<input v-model.number="score" type="number">
<button @click="decrement">-</button>
<input v-model.number="change" type="number">
<button @click="increment">+</button>
</div>
</script>
<script>
Vue.component("score", {
props: ["startScore"],
data: function() {
return {
change: 1,
score: this.startScore,
};
},
template: "#score-template",
methods: {
increment: function() {
this.score += this.change;
},
decrement: function() {
this.score -= this.change;
}
}
});
Vue.component("player", {
props: ["startScore", "name"],
template: '<div class="player"><h1 class="player-name">{{name}}</h1><score :startScore="startScore"></score><button @click="$emit(\'delete\')">Delete</button></div>'
});
var vm = new Vue({
el: "#app",
data: {
players: [],
startingScore: 0,
newPlayerName: "Name Here"
}
});
</script>