Added base event checking

src/components/calendar/CalendarEvent.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { CalendarEvent } from '@/stores/events'
+
+const props = defineProps<{
+  event: CalendarEvent
+}>()
+</script>
+
+<template>
+  <button
+    class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800"
+  >
+    {{ event.title }}
+  </button>
+</template>

src/components/calendar/CalendarMenu.vue

@@ -8,19 +8,66 @@ import {
   SelectValue
 } from '@/components/ui/select'
 import { useCalendar } from '@/stores/calendar'
+import Button from '../ui/button/Button.vue'
 
-const { currentConfig, currentDate, viewTypeOptions } = useCalendar()
+const {
+  currentConfig,
+  currentDate,
+  viewTypeOptions,
+  decrementMonth,
+  incrementMonth,
+  jumpToDefaultDate
+} = useCalendar()
 </script>
 
 <template>
   <header class="py-4 border-slate-700 border-b-[1px]">
     <div class="container">
-      <div class="grid md:grid-cols-12">
+      <div class="grid md:grid-cols-12 items-center">
         <div class="md:col-span-9">
+          <div class="flex items-center gap-6">
+            <menu class="flex items-center gap-2">
+              <li>
+                <Button @click="jumpToDefaultDate"> Today </Button>
+              </li>
+              <li>
+                <!-- Implement decrementDate to account for other mods -->
+                <Button variant="outline" size="icon" @click="decrementMonth">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    fill="#FFF"
+                    viewBox="0 0 256 256"
+                  >
+                    <path
+                      d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
+                    />
+                  </svg>
+                </Button>
+              </li>
+              <li>
+                <!-- Implement decrementDate to account for other mods -->
+                <Button variant="outline" size="icon" @click="incrementMonth">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    fill="#FFF"
+                    viewBox="0 0 256 256"
+                  >
+                    <path
+                      d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
+                    />
+                  </svg>
+                </Button>
+              </li>
+            </menu>
             <h1 class="text-2xl font-bold">
               {{ currentDate.currentDateTitle }}
             </h1>
           </div>
+        </div>
         <div class="md:col-span-3">
           <Select v-model="currentConfig.viewType">
             <SelectTrigger>

src/components/calendar/CalendarTile.vue

@@ -1,21 +1,49 @@
 <script lang="ts" setup>
 import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/calendar'
+import { useCalendarEvents } from '@/stores/events'
+import { computed } from 'vue'
+import CalendarEvent from './CalendarEvent.vue'
 
 const props = defineProps<{
   date: LeimDate
   faded?: boolean
 }>()
+
+const { compareTwoDates, defaultDate } = useCalendar()
+const { currentEvents } = useCalendarEvents()
+
+const eventsForTheDay = computed(() => {
+  return currentEvents.filter((currentEvent) => {
+    return compareTwoDates(currentEvent.date, props.date)
+  })
+})
+
+const isDefaultDate = computed(() => {
+  return compareTwoDates(props.date, defaultDate)
+})
 </script>
 
 <template>
   <div
-    class="tile relative text-xs text-center p-4 border-slate-700"
+    class="tile relative text-xs p-2 border-slate-700"
     :class="{
       'text-slate-500': props.faded,
       'text-slate-300': !props.faded
     }"
   >
-    <slot />
+    <div class="text-center">
+      <span
+        class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full font-bold"
+        :class="{ 'bg-slate-800': isDefaultDate }"
+        >{{ date.day }}</span
+      >
+    </div>
+    <ul v-if="eventsForTheDay.length > 0" class="grid gap-1">
+      <li v-for="event in eventsForTheDay" :key="event.title">
+        <CalendarEvent :event />
+      </li>
+    </ul>
   </div>
 </template>
 

src/components/calendar/state/Monthly.vue

@@ -45,17 +45,12 @@ function getNextMonthDate(day: number): LeimDate {
         year: Number(currentDate.currentYear),
         period: currentDate.currentPeriod
       }"
-    >
+    />
-      <span class="font-bold">{{ day }}</span>
-    </CalendarTile>
-
     <CalendarTile
       v-for="nextMonthDay in 8"
       :key="nextMonthDay"
       faded
       :date="getNextMonthDate(nextMonthDay)"
-    >
+    />
-      <span>{{ nextMonthDay }}</span>
-    </CalendarTile>
   </div>
 </template>

src/stores/calendar.ts

@@ -1,7 +1,7 @@
 import { computed, type Ref, type ComputedRef, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { useUrlSearchParams } from '@vueuse/core'
-import type { LeimPeriod, LeimPeriodShort } from '@/models/Date'
+import type { LeimDate, LeimPeriod, LeimPeriodShort } from '@/models/Date'
 
 type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
 
@@ -80,6 +80,14 @@ export const useCalendar = defineStore('calendar', () => {
   const defaultDay = String(12)
   const defaultMonth = String(7)
   const defaultYear = String(3209)
+  const defaultDate: ComputedRef<LeimDate> = computed(() => {
+    return {
+      day: Number(defaultDay),
+      month: Number(defaultMonth),
+      year: Number(defaultYear),
+      period: 'nante'
+    }
+  })
 
   // Assign default values if no params exist in URL
   if (!params.day) {
@@ -142,6 +150,13 @@ export const useCalendar = defineStore('calendar', () => {
     currentDateTitle
   }
 
+  const currentLeimDate: LeimDate = {
+    day: Number(currentDay.value),
+    month: Number(currentMonth.value),
+    year: Number(currentYear.value),
+    period: currentPeriod.value
+  }
+
   /**
    * Moves the current date forward one month
    */
@@ -223,17 +238,33 @@ export const useCalendar = defineStore('calendar', () => {
     }
   }
 
+  function compareTwoDates(date1: LeimDate, date2: LeimDate) {
+    // To refacto to be more precise
+    return JSON.stringify({ ...date1 }) === JSON.stringify({ ...date2 })
+  }
+
+  function jumpToDefaultDate() {
+    params.day = defaultDay
+    params.month = defaultMonth
+    params.year = defaultYear
+    currentConfig.value.viewType = 'month'
+  }
+
   return {
     staticConfig,
     viewTypeOptions,
     currentConfig,
     currentDate,
+    defaultDate,
+    currentLeimDate,
     params,
     getPeriodOfYear,
     incrementMonth,
     decrementMonth,
     setMonth,
     incrementYear,
-    decrementYear
+    decrementYear,
+    jumpToDefaultDate,
+    compareTwoDates
   }
 })

src/stores/characters.ts

@@ -9,6 +9,7 @@ export type Character = {
 
 export const useCharacters = defineStore('characters', () => {
   const characters: Character[] = [
+    { name: 'Quacille Lévios', birth: { day: 3, month: 6, year: 3162, period: 'nante' } },
     { name: 'Quacille Lévios', birth: { day: 3, month: 6, year: 3162, period: 'nante' } },
     { name: 'Lazarus Tymos', birth: { day: 29, month: 9, year: 3145, period: 'nante' } },
     { name: 'Ernestin Pomel', birth: { day: 11, month: 2, year: 3179, period: 'nante' } }

src/stores/events.ts

@@ -5,9 +5,10 @@ import { useCharacters, type Character } from './characters'
 import type { LeimDate } from '@/models/Date'
 import { useCalendar } from './calendar'
 
-type CalendarEvent = {
+export type CalendarEvent = {
   title: string
   date: LeimDate
+  category: 'birth' | 'death'
 }
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
@@ -20,7 +21,11 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   )
   const characterBirthEvents = computed(() => {
     return charactersWithBirthData.value.map((character) => {
-      return { title: `Naissance de ${character.name}`, date: character.birth } as CalendarEvent
+      return {
+        title: `${character.name}`,
+        date: character.birth,
+        category: 'birth'
+      } as CalendarEvent
     })
   })
 
@@ -30,7 +35,11 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   )
   const characterDeathEvents = computed(() => {
     return charactersWithDeathData.value.map((character) => {
-      return { title: `Décès de ${character.name}`, date: character.death } as CalendarEvent
+      return {
+        title: `${character.name}`,
+        date: character.death,
+        category: 'death'
+      } as CalendarEvent
     })
   })