Add object reminder for spirits

web/src/components/ObjectReminder.vue

@@ -0,0 +1,47 @@
+<template>
+	<div id="ObjectReminder">
+		<span class="text">
+			Object:
+			<br>
+			{{ targetObject }}
+		</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: `ObjectReminder`,
+	components: {},
+	computed: {
+		targetObject() {
+			return this.$store.state.chosen_object;
+		},
+	},
+	methods: {},
+}
+</script>
+
+<style scoped>
+@import "../css/theme.css";
+@import "../css/style.css";
+
+#ObjectReminder {
+	background-color: var(--background3);
+	color: var(--background3-text);
+	border-radius: 100% 0 0 0;
+	height: var(--size);
+	width: var(--size);
+	position: fixed;
+	--size: 120px;
+	bottom: 0;
+	right: 0;
+}
+
+.text {
+	text-align: center;
+	position: absolute;
+	font-size: large;
+	bottom: 30px;
+	right: 20px;
+}
+</style>

web/src/views/InGame.vue

@@ -5,10 +5,12 @@
 		<player-hand />
 		<team-reminder />
 		<discard-hand v-if="isGuesser" />
+		<object-reminder v-else-if="isWriter && objectChosen" />
 	</div>
 </template>
 
 <script>
+import ObjectReminder from "../components/ObjectReminder";
 import DiscardHand from "../components/DiscardHandButton";
 import ObjectSelector from "../components/ChooseObject";
 import TeamReminder from "../components/TeamReminder";
@@ -23,11 +25,15 @@ export default {
 		"discard-hand": DiscardHand,
 		"player-hand": PlayerHand,
 		"game-board": GameBoard,
+		"object-reminder": ObjectReminder
 	},
 	computed: {
 		isGuesser() {
 			return this.$store.state.role === this.$store.state.guesser_name;
 		},
+		isWriter() {
+			return this.$store.state.role === this.$store.state.writer_name;
+		},
 		objectChosen() {
 			return this.$store.state.chosen_object != null;
 		},