From afb0edacf6c1f40460af347ae0836be888494e91 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 5 Nov 2024 20:42:52 +0100
Subject: [PATCH] #184: Added clock component

---
 src/components/gui/Clock.vue    | 21 +++++++++++++++++++++
 src/components/screens/Game.vue |  5 +++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/components/gui/Clock.vue

diff --git a/src/components/gui/Clock.vue b/src/components/gui/Clock.vue
new file mode 100644
index 0000000..6b12059
--- /dev/null
+++ b/src/components/gui/Clock.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="absolute top-4 right-4 hidden lg:block">
+    <p class="text-white text-lg">{{ gameStore.world.date.toLocaleString() }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onUnmounted } from 'vue'
+
+const gameStore = useGameStore()
+
+// Listen for new date from socket
+gameStore.connection?.on('date', (data: Date) => {
+  gameStore.world.date = new Date(data)
+})
+
+onUnmounted(() => {
+  gameStore.connection?.off('date')
+})
+</script>
\ No newline at end of file
diff --git a/src/components/screens/Game.vue b/src/components/screens/Game.vue
index 4bbbad7..9dfa6ff 100644
--- a/src/components/screens/Game.vue
+++ b/src/components/screens/Game.vue
@@ -5,7 +5,7 @@
         <Menu />
         <Hud />
         <Hotkeys />
-        <Minimap />
+        <Clock />
         <Zone />
         <Chat />
         <ExpBar />
@@ -30,7 +30,8 @@ import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
 import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Effects from '@/components/Effects.vue'
-import Minimap from '@/components/gui/Minimap.vue'
+// import Minimap from '@/components/gui/Minimap.vue'
+import Clock from '@/components/gui/Clock.vue'
 import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
 
 const gameStore = useGameStore()