lhh_class/ace-pile-component.js at master · ispeters/lhh_class · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
Vue.component('ace-pile', {
	props: ['acePile'],

	methods: {
		cardClicked: function(card) {
			this.$emit('card-clicked', card, this.acePile);
		},

		cards: function() {
			return this.acePile.cards;
		},

		empty: function() {
			return this.cards().length == 0;
		},

		emptySpotClicked: function() {
			this.$emit('empty-spot-clicked', this.acePile);
		},

		id: function() {
			return this.acePile.id;
		},

		lastCard: function() {
			if (!this.empty()) {
				return this.cards()[this.cards().length - 1];
			}
			else {
				return null;
			}
		},
	},

	template: `
		<span
		  class="ace-pile"
		  v-bind:class="{ empty: acePile.empty() }">
			<card
			  v-for="card in acePile.cards"
			  v-bind:key="card.id"
			  v-bind:card="card"
			  v-on:card-clicked="cardClicked"
			  ></card>
			<span class="empty-spot" v-on:click="emptySpotClicked"></span>
		</span>
	`,
});