<template>
  <div class="absolute top-0 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>