sets up the index's date display

app.vue

@@ -1,4 +1,4 @@
-<script>
+<script setup>
 
   import '~/assets/main.css'
   

components/main/calblock.vue

@@ -1,3 +1,14 @@
+<script setup>
+
+    const gregdate = new Date();
+
+    const unitydate = unixtounity(gregdate);
+
+</script>
+
+
+
+
 <style scoped>
 
     .indexcalendar {
@@ -6,8 +17,8 @@
     }
 
     .calendarpart {
-        width: 50%;
+        flex: 1;
-        border: 1px solid black;
+        /* border: 1px solid black; */
     }
 
     @media (max-width: 720px) {
@@ -27,10 +38,15 @@
 <template>
     <div class="indexcalendar">
         <div class="calendarpart">
-            <MainCalendarToday />
+            <MainCalendarToday
+                :gregdate = gregdate 
+                :unitydate = unitydate
+            />
         </div>
         <div class="calendarpart">
-            <MainCalendarFrame />
+            <MainCalendarFrame
+                :unitydate = unitydate
+            />
         </div>
     </div>
 </template>

components/main/calendar/today.vue

@@ -1,3 +1,9 @@
+<script setup>
+
+const props = defineProps(['unitydate', 'gregdate'])
+
+</script>
+
 <style scoped>
 
     .todaybound {
@@ -6,6 +12,19 @@
         justify-content: space-around;
         align-items: center;
         height: 100%;
+        padding-top: 1.2rem; padding-bottom: 1.2rem;
+        gap: 2rem;
+        box-sizing: border-box;
+    }
+
+    @media (max-width: 720px) {
+
+        .todaybound {
+
+            padding: .6rem;
+            
+
+        }
 
     }
 
@@ -14,8 +33,13 @@
 <template>
 
     <div class="todaybound">
-        <MainCalendarTodayIs />
+        <MainCalendarTodayIs 
-        <MainCalendarTodayWeekday />
+            :unitydate = unitydate
+            :gregdate = gregdate
+        />
+        <MainCalendarTodayWeekday 
+            :unitydate = unitydate
+        />
         <MainCalendarTodayHoliday />
     </div>
 

components/main/calendar/today/holiday.vue

@@ -1,7 +1,26 @@
+<style>
+
+    .holidayis {
+        text-align: right;
+        font-size: 2.4rem;
+        min-width: 75%;
+        margin-left: auto;
+        margin-right: 1.2rem;
+    }
+
+    @media (max-width: 720px) {
+        .holidayis {
+            margin: 0;
+            text-align: center;
+        }
+    }
+
+</style>
+
 <template>
 
-    <div>
+    <div class="holidayis">
-        Happy day
+        Happy placeholder holiday with an extra long name!
     </div>
 
 </template>

components/main/calendar/today/is.vue

@@ -1,13 +1,6 @@
 <script setup>
 
-    const date = new Date()
+    const props = defineProps(['unitydate', 'gregdate']);
-
-    const dd = date.getDate()
-
-    const mm = date.getMonth() + 1
-
-    const yyyy = date.getFullYear()
-
 
 </script>
 
@@ -16,11 +9,86 @@
 <style>
 
 .todayblock {
-    max-width: 75%;
+    display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
+    margin-left: auto; margin-right: 1.2rem;
 }
 
-.todayis, .todaydate{
+.todayis{
     font-size: 2.4rem;
+    text-align: right;
+    margin-left: auto;
+
+}
+
+.datewrap {
+    display: flex;
+}
+
+.dateblock {
+    display: grid;
+    grid-template-columns: 6rem repeat(2, auto) 2.4rem repeat(2, auto);
+    row-gap: .6rem;
+}
+
+.gregblock, .unityblock, .labelblock {
+    display: grid; grid-template-columns: subgrid;
+    grid-column: 1 / 7;
+    text-align: center;
+    gap: .6rem;
+    align-items: center;
+
+}
+
+.unityblock {
+    font-size: 2.4rem;
+}
+
+.unitylabel, .greglabel {
+    font-size: 1rem;
+    text-align: right;
+    margin-right: .6rem;
+}
+
+.labelspan {
+    text-align: center;
+    margin: auto;
+}
+
+.monthlabel {
+    width: fit-content;
+    justify-self: center;
+}
+
+@media (max-width: 720px) {
+
+    .unitylabel, .greglabel {
+        margin: 0;
+        font-size: .9rem;
+    }
+    
+    .gregblock, .unityblock, .labelblock {
+        gap: .3rem;
+        
+    }
+
+    .blockspan {
+        margin-left: .3rem; margin-right: .3rem;
+    }
+
+    .todayblock {
+        margin: 0;
+    }
+
+    .todayis {
+        margin-left: 0;
+        text-align: center;
+    }
+
+    .datewrap::after {
+        content: '';
+        width: 6rem;
+    }
+
 }
 
 </style>
@@ -29,8 +97,35 @@
 <template>
 
     <div class="todayblock">
-        <span class="todayis">Today is</span>
+        <span class="todayis">Today's date is</span>
-        <span class="todaydate">{{ dd }} / {{ mm }} / {{ yyyy }}</span>
+        <div class="datewrap">
+            <div class="dateblock">
+                <div class="gregblock">
+                    <span class="greglabel">Gregorian</span>
+                    <span class="blockspan">{{ gregdate.getFullYear() }}</span>
+                    <span class="blockspan"></span>
+                    <span class="blockspan">{{ gregdate.getMonth() + 1 }}</span>
+                    <span class="blockspan"></span>
+                    <span class="blockspan">{{ gregdate.getDate() }}</span>
+                </div>
+                <div class="unityblock">
+                    <span class="unitylabel">Unity</span>
+                    <span class="unityyear">{{ unitydate.year }}</span>
+                    <span class="blockspan">/</span>
+                    <span class="blockspan">{{ unitydate.month + 1 }}</span>
+                    <span class="blockspan">/</span>
+                    <span class="blockspan">{{ unitydate.day + 1 }}</span>
+                </div>
+                <div class="labelblock">
+                    <span></span>
+                    <span class="labelspan">Year</span>
+                    <span></span>
+                    <div class="monthlabel">Month</div>
+                    <span></span>
+                    <span class="labelspan">Day</span>
+                </div>
+            </div>
+        </div>
     </div>
 
 </template>

components/main/calendar/today/weekday.vue

@@ -1,7 +1,34 @@
+<script setup> 
+
+    const props = defineProps(['unitydate']);
+
+    function nth(n){return["st","nd","rd"][((n+90)%100-10)%10-1]||"th"};
+
+</script>
+
+<style>
+
+    .weekdayis {
+        text-align: right;
+        font-size: 2.4rem;
+        min-width: 75%;
+        margin-left: auto;
+        margin-right: 1.2rem;
+    }
+
+    @media (max-width: 720px) {
+        .weekdayis {
+            margin: 0;
+            text-align: center;
+        }
+    }
+
+</style>
+
 <template>
 
-    <div>
+    <div class="weekdayis">
-        It is the th day of the week
+        It is the {{ unitydate.weekday + 1 }}{{ nth(unitydate.weekday + 1) }} day of the week, placeholder extra long day!
     </div>
 
 </template>

nuxt.config.ts

@@ -1,5 +1,12 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  pages: true
+  pages: true, 
+  // app: {
+  //   head: {
+  //     script: [
+  //       "/assets/unitymath.js"
+  //     ],
+  //   }
+  // }
 })

utils/unitymath.js

@@ -6,7 +6,7 @@ const minutems = secondms * secondsperminute
 const hourms = minutems * minutesperhour
 const dayms = hourms * hoursperday
 
-const solaryear = 365.242
+const solaryear = 365.2425
 
 const yeardays = 366
 const leapchange = -6
@@ -16,90 +16,85 @@ const monthdays = 30
 
 const leapfreq = 8
 
-const exleapcyclelength = 800;
+const exleapfreq = 800;
 const exleapyear = 500;
 const exleapyearlowbound = Math.floor(exleapyear / leapfreq) * leapfreq;
 const exleapyearupbound = exleapyearlowbound + leapfreq;
 const exleapyearlowbounddays = (exleapyearlowbound * yeardays) + ((exleapyearlowbound / leapfreq) * leapchange);
 const exleapyearupbounddays = (exleapyearupbound * yeardays) + leapchange + ((exleapyearupbound / leapfreq) * leapchange);
 
-const exleapcycledays = (exleapcyclelength * yeardays) + leapchange + ((exleapcyclelength / leapfreq) * leapchange)
+const exleapcycledays = (exleapfreq * yeardays) + leapchange + ((exleapfreq / leapfreq) * leapchange)
 
 const leapcycledays = (leapfreq * yeardays) + leapchange;
 
 const unityzero = Date.parse("2000-03-08T00:00:00.000Z");
 
-function unixtounity(unixtime) {
+export function unixtounity(unixtime) {
     const unitytime = unixtime - unityzero;
     const days = unitytime / dayms;
 
     const exleapcycles = Math.floor(days / exleapcycledays);
-
     const exleapcycleprogress = days - exleapcycles * exleapcycledays;
 
     let leapcycles;
-
     let leapcycleprogress;
-
     let leapcyclehasex;
-
     if (exleapcycleprogress < exleapyearupbounddays) {
-
         leapcycles = Math.floor(exleapcycleprogress / leapcycledays);
-
         leapcycleprogress = exleapcycleprogress - leapcycles * leapcycledays;
-
         leapcyclehasex = exleapcycleprogress >= exleapyearlowbounddays;
-
     } else {
-
         leapcycles = Math.floor((exleapcycleprogress - leapchange)/ leapcycledays);
-
         leapcycleprogress = (exleapcycleprogress - (leapcycles * leapcycledays)) - leapchange;
-
         leapcyclehasex = false;
-
     }
     
     let leapyearspassed;
-
     if (leapcycleprogress < leapyeardays) {
-        
         leapyearspassed = 0;
-
     } else if (!leapcyclehasex || leapcycleprogress < (2 * leapyeardays) + (3 * yeardays)) {
-
         leapyearspassed = 1;
-
     } else {
-
         leapyearspassed = 2;
-
     }
 
     const years = Math.floor((leapcycleprogress - (leapchange * leapyearspassed)) / yeardays);
-
     const yearprogress = leapcycleprogress - ((years * yeardays) + (leapchange * leapyearspassed));
 
     const months = Math.floor(yearprogress / monthdays);
-
     const monthprogress = yearprogress - months * monthdays;
 
-    const date = Math.floor(monthprogress);
+    const day = Math.floor(monthprogress);
 
-    return `${12000 + (exleapcycles * exleapcyclelength) + (leapcycles * leapfreq) + years}-${months + 1}-${date + 1}`
+    const weekday = day % 6;
+
+    const date = {
+        year: 12000 + (exleapcycles * exleapfreq) + (leapcycles * leapfreq) + years,
+        month: months,
+        day: day,
+        weekday: weekday,
+    };
+
+    return date
 
 }
 
-const oldtimes = new Date();
+// console.log(unixtounity(Date.parse("1990-06-06")))
-oldtimes.setYear(-600)
+// console.log(unixtounity(Date.parse("1890-06-06")))
-
+// console.log(unixtounity(Date.parse("1990-06-06")))
-console.log(unixtounity(Date.now()))
+// console.log(unixtounity(Date.parse("1993-06-06")))
-console.log(unixtounity(oldtimes.getTime()))
+// console.log(unixtounity(Date.parse("1998-06-06")))
-console.log(unixtounity(Date.parse("2000-01-01")))
+// console.log(unixtounity(Date.parse("1999-06-06")))
-console.log(unixtounity(Date.parse("2000-03-07")))
+// console.log(unixtounity(Date.parse("1999-12-31")))
-console.log(unixtounity(Date.parse("2000-03-08")))
+// console.log(unixtounity(Date.parse("2000-03-01")))
-console.log(unixtounity(Date.parse("2000-03-09")))
+// console.log(unixtounity(Date.parse("2000-03-02")))
-console.log(unixtounity(Date.parse("2001-03-07")))
+// console.log(unixtounity(Date.parse("2000-03-07")))
-console.log(unixtounity(Date.parse("3000-03-07")))
+// console.log(unixtounity(Date.parse("2000-03-08")))
-console.log(unixtounity(Date.parse("42400-03-07")))
+// console.log(unixtounity(Date.parse("2000-03-09")))
+// console.log(unixtounity(Date.parse("2000-04-07")))
+// console.log(unixtounity(Date.parse("2000-06-06")))
+// console.log(unixtounity(Date.parse("2001-06-06")))
+// console.log(unixtounity(Date.parse("2002-06-06")))
+// console.log(unixtounity(Date.parse("2006-06-06")))
+// console.log(unixtounity(Date.parse("2010-06-06")))
+// console.log(unixtounity(new Date()))