Added main system to navigate time

src/stores/calendar.ts

@@ -1,5 +1,6 @@
-import { computed, ref, type Ref } from 'vue'
+import { computed, ref, type Ref, type ComputedRef } from 'vue'
 import { defineStore } from 'pinia'
+import { useUrlSearchParams } from '@vueuse/core'
 
 type CalendarPeriod = 'ante' | 'nante'
 
@@ -13,12 +14,14 @@ type CalendarStaticConfig = {
 
 type CalendarCurrentConfig = {
   currentPeriod: Ref<CalendarPeriod>
-  currentYear: Ref<number>
+  currentYear: ComputedRef<string | string[]>
-  currentMonth: Ref<number>
+  currentMonth: ComputedRef<string | string[]>
-  currentDay: Ref<number>
+  currentDay: ComputedRef<string | string[]>
+  currentMonthName: ComputedRef<string>
 }
 
 export const useCalendar = defineStore('calendar', () => {
+  // Static calendar config
   const months = [
     'Jalen',
     'Malsen',
@@ -44,17 +47,125 @@ export const useCalendar = defineStore('calendar', () => {
     daysPerWeek
   }
 
-  const currentPeriod: Ref<'nante' | 'ante'> = ref('nante')
+  // Get date from URL params
-  const currentYear = ref(3209)
+  const params = useUrlSearchParams('history', {
-  const currentMonth = ref(8)
+    removeNullishValues: true
-  const currentDay = ref(12)
+  })
 
-  const config: CalendarCurrentConfig = {
+  // Default date settings (current day)
-    currentPeriod,
+  const defaultDay = String(12)
-    currentYear,
+  const defaultMonth = String(8)
-    currentMonth,
+  const defaultYear = String(3209)
-    currentDay
+
+  // Assign default values if no params exist in URL
+  if (!params.day) {
+    params.day = defaultDay
+  }
+  if (!params.month) {
+    params.month = defaultMonth
+  }
+  if (!params.year) {
+    params.year = defaultYear
   }
 
-  return { staticConfig, config }
+  const currentDay = computed(() => params.day)
+
+  const currentMonth = computed(() => params.month)
+  // Gets the label from currentMonth index
+  const currentMonthName = computed(() => {
+    const index = Number(currentMonth.value)
+    return staticConfig.months[index]
+  })
+
+  const currentYear = computed(() => params.year)
+
+  // Get period from currentYear
+  const currentPeriod: ComputedRef<CalendarPeriod> = computed(() => {
+    const year = Number(currentYear.value)
+    return year >= 0 ? 'nante' : 'ante'
+  })
+
+  // Create base config
+  const config: CalendarCurrentConfig = {
+    currentDay,
+    currentMonth,
+    currentYear,
+    currentPeriod,
+    currentMonthName
+  }
+
+  /**
+   * Moves the current date forward one month
+   */
+  function incrementMonth() {
+    // const oldValue = params.month
+    let newValue = Number(params.month) + 1
+
+    // If the new value would exceed the max number of month per year
+    if (newValue >= staticConfig.monthsPerYear) {
+      newValue = 0
+      // Increment the year
+      incrementYear()
+    }
+
+    params.month = newValue.toString()
+  }
+
+  /**
+   * Moves the current date backward one month
+   */
+  function decrementMonth() {
+    // const oldValue = params.month
+    let newValue = Number(params.month) - 1
+
+    // If the new value would go below 0
+    if (newValue < 0) {
+      newValue = staticConfig.monthsPerYear - 1
+      // Decrement the year
+      decrementYear()
+    }
+
+    params.month = newValue.toString()
+  }
+
+  /**
+   * Moves the current date to a particular month
+   */
+  function setMonth(target: number) {
+    // If the target is outside the month bounds
+    if (target < 0 || target >= staticConfig.monthsPerYear) {
+      return
+    }
+
+    params.month = target.toString()
+  }
+
+  /**
+   * Moves the current date forward one year
+   */
+  function incrementYear(inc: number = 1) {
+    const newValue = Number(params.year) + inc
+
+    params.year = newValue.toString()
+  }
+
+  /**
+   * Moves the current date backward one year
+   */
+  function decrementYear(inc: number = 1) {
+    const newValue = Number(params.year) - inc
+
+    params.year = newValue.toString()
+  }
+
+  return {
+    staticConfig,
+    config,
+    params,
+    incrementMonth,
+    decrementMonth,
+    setMonth,
+    incrementYear,
+    decrementYear
+  }
 })

src/views/HomeView.vue

@@ -1,11 +1,49 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { useCalendar } from '@/stores/calendar'
 
-const c = useCalendar()
+const { config, incrementMonth, decrementMonth, setMonth, incrementYear, decrementYear } =
+  useCalendar()
+
+const monthTarget = ref(0)
 </script>
 
 <template>
   <main class="container">
-    <h1 class="text-3xl font-bold">{{ c }}</h1>
+    <pre>
+      {{ config }}
+    </pre>
+    <div class="grid gap-2">
+      <div class="flex gap-2">
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementMonth()">Month +</button>
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementMonth()">Month -</button>
+      </div>
+      <div class="flex gap-2">
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear()">Year +</button>
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear()">Year -</button>
+      </div>
+      <div class="flex gap-2">
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear(100)">
+          Century +
+        </button>
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear(100)">
+          Century -
+        </button>
+      </div>
+      <div class="flex gap-2">
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear(1000)">
+          Millenia +
+        </button>
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear(1000)">
+          Millenia -
+        </button>
+      </div>
+      <div class="flex gap-2">
+        <input class="bg-slate-900" type="number" v-model="monthTarget" />
+        <button class="bg-slate-800 py-2 px-4 rounded-sm" @click="setMonth(monthTarget)">
+          Set Month
+        </button>
+      </div>
+    </div>
   </main>
 </template>