first pass of the greg to unity conversion

assets/main.css

@@ -1,3 +1,5 @@
 body {
     background-color: yellow;
+    margin: 0;
+    height: 100vh;
 }

assets/unitymath.js

@@ -0,0 +1,105 @@
+const hoursperday = 24
+const minutesperhour = 60
+const secondsperminute = 60
+const secondms = 1000
+const minutems = secondms * secondsperminute
+const hourms = minutems * minutesperhour
+const dayms = hourms * hoursperday
+
+const solaryear = 365.242
+
+const yeardays = 366
+const leapchange = -6
+const leapyeardays = yeardays + leapchange
+
+const monthdays = 30
+
+const leapfreq = 8
+
+const exleapcyclelength = 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 leapcycledays = (leapfreq * yeardays) + leapchange;
+
+const unityzero = Date.parse("2000-03-08T00:00:00.000Z");
+
+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);
+
+    return `${12000 + (exleapcycles * exleapcyclelength) + (leapcycles * leapfreq) + years}-${months + 1}-${date + 1}`
+
+}
+
+const oldtimes = new Date();
+oldtimes.setYear(-600)
+
+console.log(unixtounity(Date.now()))
+console.log(unixtounity(oldtimes.getTime()))
+console.log(unixtounity(Date.parse("2000-01-01")))
+console.log(unixtounity(Date.parse("2000-03-07")))
+console.log(unixtounity(Date.parse("2000-03-08")))
+console.log(unixtounity(Date.parse("2000-03-09")))
+console.log(unixtounity(Date.parse("2001-03-07")))
+console.log(unixtounity(Date.parse("3000-03-07")))
+console.log(unixtounity(Date.parse("42400-03-07")))

components/index/calendar/frame.vue

@@ -1,262 +0,0 @@
-<style scoped>
-
-.fullframe, .month, .header {
-    border: solid; border-width: 1px;
-}
-
-.fullframe {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    /* grid-auto-columns: 1fr; */
-    grid-template-rows: repeat(5, 1fr);
-    min-width: 1.2rem;
-    gap: .6rem;
-}
-
-.month {
-    height: fit-content;
-}
-
-.header {
-    grid-column: 1 / 7;
-    grid-row: 1 / 2;
-}
-
-.days {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-}
-
-.leapweek {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-}
-
-.m1 {
-
-}
-
-.h1{
-
-}
-
-.m2 {
-
-}
-
-.h2{
-
-}
-
-
-.m3 {
-
-}
-
-.h3{
-
-}
-
-.m4 {
-
-}
-
-.h4{
-
-}
-
-.m5 {
-
-}
-
-.h5{
-
-}
-
-.m6 {
-
-}
-
-.h6{
-
-}
-
-.m7 {
-
-}
-
-.h7{
-
-}
-
-.m8 {
-
-}
-
-.h8{
-
-}
-
-.m9 {
-
-}
-
-.h9{
-
-}
-
-.m10 {
-
-}
-
-.h10{
-
-}
-
-.m11 {
-
-}
-
-.h11{
-
-}
-
-.m12 {
-
-}
-
-.h12{
-
-}
-
-.m13 {
-    grid-column: 3;
-
-}
-
-.intercalaryheader {
-    grid-column: 2;
-
-
-}
-
-.intercalarytext {
-    margin-left: auto;
-    width: 0;
-    min-width: fit-content;
-}
-
-</style>
-
-<template>
-
-
-        <div class="fullframe">
-            <div class="month m1">
-                <div class="header h1">
-                    First
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m2">
-                <div class="header h2">
-                    Second
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m3"> 
-                <div class="header h3">
-                    Third
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m4">
-                <div class="header h4">
-                    Fourth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m5">
-                <div class="header h5">
-                    Fifth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m6">
-                <div class="header h6">
-                    Sixth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m7">
-                <div class="header h7">
-                    Seventh
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m8">
-                <div class="header h8">
-                    Eighth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m9">
-                <div class="header h9">
-                    Ninth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m10">
-                <div class="header h10">
-                    Tenth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m11">
-                <div class="header h11">
-                    Eleventh
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m12">
-                <div class="header h12">
-                    Twelfth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="intercalaryheader">
-                <div class="intercalarytext">Intercalary Week</div>
-            </div>
-            <div class="month m13">
-                <div class="leapweek">
-                    yuh
-                </div>
-            </div>
-        </div>
-
-</template>

components/index/calendar/today.vue

@@ -1,11 +0,0 @@
-<style scoped>
-
-</style>
-
-<template>
-
-    <div class="todaybound">
-        Today is 6 / 06 / 12024
-    </div>
-
-</template>

components/index/titleblock.vue

@@ -1,6 +0,0 @@
-<template>
-    <div>
-        <h1>The Unity Calendar</h1>
-        <h2>An international calendar for coordination.</h2>
-    </div>
-</template>

components/main/calblock.vue

@@ -2,10 +2,12 @@
 
     .indexcalendar {
         display: flex; justify-content: space-between;
+        
     }
 
     .calendarpart {
-        flex-grow: 1;
+        width: 50%;
+        border: 1px solid black;
     }
 
     @media (max-width: 720px) {
@@ -16,6 +18,7 @@
         .calendarpart {
             width: 100%;
         }
+
     }
 
 </style>
@@ -24,10 +27,10 @@
 <template>
     <div class="indexcalendar">
         <div class="calendarpart">
-            <IndexCalendarToday />
+            <MainCalendarToday />
         </div>
         <div class="calendarpart">
-            <IndexCalendarFrame />
+            <MainCalendarFrame />
         </div>
     </div>
 </template>

components/main/calendar/frame.vue

@@ -0,0 +1,77 @@
+<script setup>
+
+    const defaultmonths = ref([
+        {id: 1, name: 'First'},
+        {id: 2, name: 'Second'},
+        {id: 3, name: 'Third'},
+        {id: 4, name: 'Fourth'},
+        {id: 5, name: 'Fifth'},
+        {id: 6, name: 'Sixth'},
+        {id: 7, name: 'Seventh'},
+        {id: 8, name: 'Eighth'},
+        {id: 9, name: 'Ninth'},
+        {id: 10, name: 'Tenth'},
+        {id: 11, name: 'Eleventh'},
+        {id: 12, name: 'Twelfth'}
+    ])
+
+</script>
+
+<style scoped>
+
+.fullframe {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    min-width: 1.2rem;
+    gap: .6rem;
+    width: fit-content;
+    margin: auto;
+}
+
+.month {
+    height: fit-content;
+}
+
+.header {
+    grid-column: 1 / 7;
+    grid-row: 1 / 2;
+}
+
+.leapweek {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+}
+
+.m13 {
+    grid-column: 3;
+}
+
+.intercalaryheader {
+    grid-column: 2;
+}
+
+.intercalarytext {
+    margin-left: auto;
+    width: 0;
+    min-width: fit-content;
+}
+
+</style>
+
+<template>
+
+
+        <div class="fullframe">
+            <MainCalendarFrameMonth
+                v-for="month in defaultmonths"
+                :monthname="month.name"
+                :daycount="30"
+                />
+            <div class="intercalaryheader">
+                <div class="intercalarytext">Intercalary Week</div>
+            </div>
+            <MainCalendarFrameMonth 
+                :daycount="6" />
+        </div>
+
+</template>

components/main/calendar/frame/days.vue

@@ -0,0 +1,34 @@
+<script setup>
+
+    const props = defineProps(['daycount'])
+
+    const weekcount = props.daycount / 6
+
+    const defaultdays = ref(Array.from(Array(props.daycount).keys()))
+
+</script>
+
+
+<style scoped>
+
+    .days {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-template-rows: repeat(v-bind('weekcount'), 1fr);
+        grid-gap: 1px;
+        background-color: black;
+        border: 1px solid black;
+    }
+
+</style>
+
+
+<template>
+
+    <div class="days">
+        <MainCalendarFrameSingleday
+            v-for="day in defaultdays"
+        />
+    </div>
+
+</template>

components/main/calendar/frame/month.vue

@@ -0,0 +1,28 @@
+<script setup>
+
+    const props = defineProps(['monthname', 'daycount'])
+
+</script>
+
+<style scoped>
+
+.headertext {
+    width: fit-content;
+    margin: auto;
+}
+
+</style>
+
+<template>
+
+    <div class="month">
+        <div class="header">
+            <div class="headertext">
+                {{monthname}}
+            </div>
+        </div>
+        <MainCalendarFrameDays
+            :daycount=daycount />
+    </div>
+
+</template>

components/main/calendar/frame/singleday.vue

@@ -0,0 +1,14 @@
+<style>
+
+    .singleday {
+        background-color: white;
+        min-width: 1.2rem;
+    }
+
+</style>
+
+<template>
+
+    <div class="singleday">-</div>
+
+</template>

components/main/calendar/today.vue

@@ -0,0 +1,22 @@
+<style scoped>
+
+    .todaybound {
+
+        display: flex; flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+
+    }
+
+</style>
+
+<template>
+
+    <div class="todaybound">
+        <MainCalendarTodayIs />
+        <MainCalendarTodayWeekday />
+        <MainCalendarTodayHoliday />
+    </div>
+
+</template>

components/main/calendar/today/holiday.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div>
+        Happy day
+    </div>
+
+</template>

components/main/calendar/today/is.vue

@@ -0,0 +1,36 @@
+<script setup>
+
+    const date = new Date()
+
+    const dd = date.getDate()
+
+    const mm = date.getMonth() + 1
+
+    const yyyy = date.getFullYear()
+
+
+</script>
+
+
+
+<style>
+
+.todayblock {
+    max-width: 75%;
+}
+
+.todayis, .todaydate{
+    font-size: 2.4rem;
+}
+
+</style>
+
+
+<template>
+
+    <div class="todayblock">
+        <span class="todayis">Today is</span>
+        <span class="todaydate">{{ dd }} / {{ mm }} / {{ yyyy }}</span>
+    </div>
+
+</template>

components/main/calendar/today/weekday.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div>
+        It is the th day of the week
+    </div>
+
+</template>

components/main/titleblock.vue

@@ -0,0 +1,24 @@
+<script setup>
+
+const props = defineProps(['pagetitle', 'pagesubtitle'])
+
+</script>
+
+
+<style>
+
+.pagetitle, .pagesubtitle {
+    margin: auto;
+    width: fit-content;
+    text-align: center;
+}
+
+</style>
+
+
+<template>
+    <div>
+        <h1 class="pagetitle">{{ pagetitle }}</h1>
+        <h2 class="pagesubtitle">{{ pagesubtitle }}</h2>
+    </div>
+</template>

components/navfoot.vue

@@ -1,18 +1,28 @@
 <style scoped>
 
-    ul {
+    .footer {
+        position: sticky; 
+        bottom: 0;
+        max-width: 72rem;
+        width: 100%;
+        background-color: red;
+    }
 
-        display: flex; gap: 6rem; justify-content: center;
+    .navlist {
+
+        display: flex; gap: 1.2rem; justify-content: center;
 
     }
 
 </style>
 
 <template>
-    <ul>
+    <nav class="footer">
+        <ul class="navlist">
             <li><NuxtLink to="/">home</NuxtLink></li>
             <li><NuxtLink to="/info">info</NuxtLink></li>
             <li><NuxtLink to="/maker">maker</NuxtLink></li>
             <li><NuxtLink to="/credits">credits</NuxtLink></li>
         </ul>
+    </nav>
 </template>

layouts/default.vue

@@ -1,27 +1,18 @@
 <style>
-    main {
-        max-width: 60rem;
-        margin: auto;
+
+    .pagewrap {
+        height: 100vh;
+        display: flex; flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        overflow: auto;
     }
 
-    h1 {
-        margin: auto;
-        width: max-content;
-    }
-
-    nav {
-        position: absolute; 
-        bottom: 0;
-        width: 60rem;
-        margin: auto;
-    }
 </style>
 
 <template>
-    <main>
+    <div class="pagewrap">
         <slot />
-    </main>    
-    <nav>
         <navfoot />
-    </nav>
+    </div>
 </template>

pages/index.vue

@@ -1,18 +1,23 @@
 <style scoped>
 
-    .indexblock {
-
-        display: flex; flex-direction: column; gap: 1.2rem;
-
-    }
+.mainblock {
+    max-width: 72rem;
+    width: 100%;
+    display: flex; flex-direction: column; gap: 6rem;
+    padding-top: 2.4rem;
+}
 
 </style>
 
+
 <template>
-    <div class="indexblock">
-        <IndexTitleblock />
-        <IndexCalblock />
-        <IndexCycleblock />
-        <IndexQuestionblock />
-    </div>
+    <main class="mainblock">
+        <MainTitleblock 
+            pagetitle='The Unity Calendar'
+            pagesubtitle='An international calendar for coordination.'
+        />
+        <MainCalblock />
+        <MainCycleblock />
+        <MainQuestionblock />
+    </main>
 </template>