137 lines
No EOL
2.5 KiB
Vue
137 lines
No EOL
2.5 KiB
Vue
<template>
|
|
<div id="DiscardHandButton">
|
|
<div style="width: 100%; height: 100%;">
|
|
<button
|
|
class="discard-hand clickable"
|
|
@click.stop="confirmVisible = true"
|
|
>
|
|
<img
|
|
:src="`/assets/${buttonIcon}`"
|
|
alt="Discard entire hand"
|
|
class="icon"
|
|
>
|
|
</button>
|
|
</div>
|
|
<ModalAnimation
|
|
:show="confirmVisible"
|
|
:closable="false"
|
|
@closed="confirmVisible = false"
|
|
>
|
|
<h2 class="centre">Discard Hand?</h2>
|
|
<p class="centre">
|
|
Are you sure you want to discard your team's
|
|
<strong>entire</strong> hand?
|
|
</p>
|
|
<div class="buttons">
|
|
<button
|
|
class="confirm modal-button clickable"
|
|
@click.stop="discardHand()"
|
|
>
|
|
Discard Hand
|
|
</button>
|
|
<button
|
|
class="cancel modal-button clickable"
|
|
@click.stop="confirmVisible = false"
|
|
>
|
|
Don't Discard Hand
|
|
</button>
|
|
</div>
|
|
</ModalAnimation>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from "./Modal";
|
|
|
|
export default {
|
|
name: `DiscardHand`,
|
|
components: {
|
|
"ModalAnimation": Modal
|
|
},
|
|
data() {return {
|
|
confirmVisible: false,
|
|
}},
|
|
computed: {
|
|
buttonIcon() {
|
|
return this.$store.state.discard_hand_icon;
|
|
},
|
|
},
|
|
methods: {
|
|
discardHand() {
|
|
/**
|
|
* Tells the server to discard the hand of the mediums
|
|
*/
|
|
this.confirmVisible = false;
|
|
|
|
let data = {
|
|
team: this.$store.state.team,
|
|
};
|
|
|
|
console.debug(`Telling server to discard team's hand.`);
|
|
// TODO -> send data to server
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "../css/theme.css";
|
|
@import "../css/style.css";
|
|
|
|
#DiscardHandButton {
|
|
height: var(--size);
|
|
width: var(--size);
|
|
position: absolute;
|
|
--size: 120px;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
button {
|
|
outline: none;
|
|
}
|
|
|
|
.discard-hand {
|
|
background-color: var(--background3);
|
|
border-radius: 100% 0 0 0;
|
|
position: relative;
|
|
border-style: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.icon {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
right: 15px;
|
|
width: 60px;
|
|
}
|
|
|
|
.buttons {
|
|
justify-content: space-evenly;
|
|
display: flex;
|
|
}
|
|
|
|
.modal-button {
|
|
border-radius: 7px;
|
|
border-style: none;
|
|
font-size: larger;
|
|
padding: 7px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.confirm {
|
|
background-color: var(--confirm-background);
|
|
color: var(--confirm-text);
|
|
}
|
|
.confirm:hover { background-color: var(--confirm-background-darken); }
|
|
.confirm:focus { background-color: var(--confirm-background-lighten); }
|
|
|
|
.cancel {
|
|
background-color: var(--cancel-background);
|
|
color: var(--cancel-text);
|
|
}
|
|
.cancel:hover { background-color: var(--cancel-background-darken); }
|
|
.cancel:focus { background-color: var(--cancel-background-lighten); }
|
|
</style> |