cancel selction

frontend/src/components/Chooser.vue

@@ -4,6 +4,7 @@
 		<div>
 			<Card v-for="c in cards" v-bind:key="c" :card="c" @click.native="select(c)"	@mouseover.native="showDesc(c)" @mouseleave.native="desc=''"/>
 		</div>
+		<div class="button center-stuff" v-if="showCancelBtn" @click="cancel"><span>ANNULLA</span></div>
 		<p v-if="desc" style="bottom:10pt;position:absolute;margin:16pt;">{{desc}}</p>
 	</div>
 </template>
@@ -19,11 +20,19 @@ export default {
 	props: {
 		cards: Array,
 		select: Function,
+		cancel: Function,
 		text: String,
 	},
 	data: () => ({
 		desc: ''
 	}),
+	computed: {
+		showCancelBtn() {
+			if (this.cancel)
+				return true
+			return false
+		}
+	},
 	methods: {
 		showDesc(card) {
 			this.desc = card.desc
@@ -63,4 +72,19 @@ export default {
 .card:hover {
 	transform: translate(0, -5px) scale(1.05, 1.05);
 }
+.button {
+	background-color: #0000;
+	color: white;
+	border: 2px solid white;
+	transition-duration: 0.2s;
+	width: 100pt;
+	height: 24pt;
+	border-radius: 12pt;
+	cursor: pointer;
+}
+
+.button:hover {
+	background-color: white; /* Green */
+	color: black;
+}
 </style>

frontend/src/components/Player.vue

@@ -22,7 +22,7 @@
 			</transition-group>
 		</div>
 		<p>{{hint}}</p>
-		<Chooser v-if="card_against" text="Contro chi vuoi giocare la carta" :cards="visiblePlayers" :select="selectAgainst"/>
+		<Chooser v-if="card_against" text="Contro chi vuoi giocare la carta" :cards="visiblePlayers" :select="selectAgainst" :cancel="cancelCardAgainst"/>
 		<Chooser v-if="pending_action == 3" text="Scegli come rispondere" :cards="respondCards" :select="respond"/>
 		<Chooser v-if="shouldChooseCard" text="Scegli che carta pescare" :cards="available_cards" :select="choose"/>
 		<Chooser v-if="lives <= 0 && max_lives > 0" text="SEI MORTO" />
@@ -146,6 +146,9 @@ export default {
 			this.really_play_card(this.card_against, player.name)
 			this.card_against = null
 		},
+		cancelCardAgainst() {
+			this.card_against = null
+		},
 		really_play_card(card, against) {
 			let card_data	 = {
 				index: this.hand.indexOf(card),