Make discard hand component have proper UI.

web/src/components/DiscardHandButton.vue

@@ -1,19 +1,75 @@
 <template>
 	<div id="DiscardHandButton">
-		AH!
+		<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: {},
+	components: {
+		"ModalAnimation": Modal
+	},
 	data() {return {
 		confirmVisible: false,
 	}},
-	computed: {},
+	computed: {
+		buttonIcon() {
+			return this.$store.state.discard_hand_icon;
+		},
+	},
 	methods: {
-		discardHand() {},
+		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>
@@ -23,13 +79,59 @@ export default {
 @import "../css/style.css";
 
 #DiscardHandButton {
-	background-color: var(--background3);
-	border-radius: 100% 0 0 0;
 	height: var(--size);
 	width: var(--size);
-	position: fixed;
+	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>