From f8e5ea915fcea54ffba222e4ffea0c6559e3012e Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Wed, 16 Dec 2020 17:50:30 -0700
Subject: [PATCH] Create team reminder component

---
 web/src/components/TeamReminder.vue | 47 +++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/web/src/components/TeamReminder.vue b/web/src/components/TeamReminder.vue
index 453097b..e1e0317 100644
--- a/web/src/components/TeamReminder.vue
+++ b/web/src/components/TeamReminder.vue
@@ -1,17 +1,58 @@
 <template>
-	<div></div>
+	<div id="TeamReminder">
+		<img
+			:class="`team_${teamNumber}`"
+			:src="`/assets/${teamIcon}`"
+			:alt="`${teamName} Team Icon`"
+		>
+	</div>
 </template>
 
 <script>
 export default {
 	name: `TeamReminder`,
 	components: {},
-	computed: {},
+	computed: {
+		teamNumber() {
+			return this.$store.state.team;
+		},
+		teamName() {
+			return this.$store.state[`team_${this.teamNumber}`].name;
+		},
+		teamIcon() {
+			return this.$store.state[`team_${this.teamNumber}`].icon;
+		},
+	},
 	methods: {},
 }
 </script>
 
-<style>
+<style scoped>
 @import "../css/theme.css";
 @import "../css/style.css";
+
+#TeamReminder {
+	background-color: var(--background3);
+	border-radius: 0 100% 0 0;
+	height: var(--size);
+	width: var(--size);
+	position: fixed;
+	--size: 120px;
+	bottom: 0;
+	left: 0;
+}
+
+img.team_1 {
+	width: calc(var(--size) / 1.5);
+	position: absolute;
+	bottom: 7px;
+	left: 7px;;
+}
+
+img.team_2 {
+	width: calc(var(--size) / 2);
+	bottom: calc(var(--size) / 8);
+	left: calc(var(--size) / 8);
+	position: absolute;
+}
 </style>
\ No newline at end of file