effie/unity-calendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sets up the index's date display

Browse Source
This commit is contained in:
Effie 2024-06-13 18:50:49 +10:00
parent 0188404198
commit da79c3017d
8 changed files with 247 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

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

24
components/main/calblock.vue
View File

@ -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%;
border: 1px solid black;
flex: 1;
/* 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>

28
components/main/calendar/today.vue
View File

@ -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 />
<MainCalendarTodayWeekday />
<MainCalendarTodayIs
:unitydate = unitydate
:gregdate = gregdate
/>
<MainCalendarTodayWeekday
:unitydate = unitydate
/>
<MainCalendarTodayHoliday />
</div>

23
components/main/calendar/today/holiday.vue
View File

@ -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>
Happy day
<div class="holidayis">
Happy placeholder holiday with an extra long name!
</div>
</template>

119
components/main/calendar/today/is.vue
View File

@ -1,13 +1,6 @@
<script setup>
const date = new Date()
const dd = date.getDate()
const mm = date.getMonth() + 1
const yyyy = date.getFullYear()
const props = defineProps(['unitydate', 'gregdate']);
</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="todaydate">{{ dd }} / {{ mm }} / {{ yyyy }}</span>
<span class="todayis">Today's date is</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>

31
components/main/calendar/today/weekday.vue
View File

@ -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>
It is the th day of the week
<div class="weekdayis">
It is the {{ unitydate.weekday + 1 }}{{ nth(unitydate.weekday + 1) }} day of the week, placeholder extra long day!
</div>
</template>

9
nuxt.config.ts
View File

@ -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"
// ],
// }
// }
})

73
assets/unitymath.js → utils/unitymath.js
View File

@ -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();
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")))
// console.log(unixtounity(Date.parse("1990-06-06")))
// console.log(unixtounity(Date.parse("1890-06-06")))
// console.log(unixtounity(Date.parse("1990-06-06")))
// console.log(unixtounity(Date.parse("1993-06-06")))
// console.log(unixtounity(Date.parse("1998-06-06")))
// console.log(unixtounity(Date.parse("1999-06-06")))
// console.log(unixtounity(Date.parse("1999-12-31")))
// console.log(unixtounity(Date.parse("2000-03-01")))
// console.log(unixtounity(Date.parse("2000-03-02")))
// 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("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()))