interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Add moon phase to HippieClock

Browse source
This commit is contained in:
sthag 2026-03-01 13:01:10 +01:00
parent 0aca2bf3ee
commit 8d1d182be4
2 changed files with 30 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

31
source/screens/demo/examples/clock.liquid
View file

@ -43,6 +43,7 @@ tags:
this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
this.resize();
window.addEventListener('resize', () => this.resize());
@ -140,6 +141,7 @@ tags:
this.updateShape('dotyear', this.getTime().dayYear);
this.updateShape('week', this.getTime().week);
this.updateShape('month', this.getTime().month);
this.updateShape('moon', this.getTime().moon);
this.draw();
}
@ -197,6 +199,32 @@ tags:
};
}
getMoonNameFrom(phase) {
if (phase < 0.125) return 'New Moon';
if (phase < 0.25) return 'Waxing Crescent';
if (phase < 0.375) return 'First Quarter';
if (phase < 0.5) return 'Waxing Gibbous';
if (phase < 0.625) return 'Full Moon';
if (phase < 0.75) return 'Waning Gibbous';
if (phase < 0.875) return 'Last Quarter';
return 'Waning Crescent';
}
getMoonPhase(date) {
// Known new moon date: January 6, 2000
const newMoon = new Date(2000, 0, 6);
const lunarCycle = 29.53058867; // days
const daysSinceNewMoon = (date - newMoon) / (1000 * 60 * 60 * 24);
const phase = (daysSinceNewMoon % lunarCycle) / lunarCycle;
return {
illumination: Math.abs(Math.cos(Math.PI * phase)),
phase: mapRange(phase, 0, 1, 1, 8),
phaseName: this.getMoonNameFrom(phase)
};
}
getSize() {
const height = window.innerHeight;
const width = window.innerWidth;
@ -220,7 +248,8 @@ tags:
week: this.getISOWeekInfo(this.date).current,
weeksYear: this.getISOWeekInfo(this.date).weeksYear,
month: this.date.getMonth() + 1, // Get current month (0-11)
daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
moon: this.getMoonPhase(this.date).phase
};
}

12
source/style/modules/_clock.scss
View file

@ -1,17 +1,5 @@
@use "../hippie-style/hippie";
:root {
--clock-color-yellow: rgb(250, 216, 3);
--clock-color-orange: rgb(242, 175, 19);
--clock-color-pink: rgb(211, 10, 81);
--clock-color-purple: rgb(142, 31, 104);
--clock-color-blue: rgb(39, 63, 139);
--clock-color-pblue: rgb(60, 87, 154);
--clock-color-lblue: rgb(183, 224, 240);
--clock-color-lcyan: rgb(107, 199, 217);
--clock-color-cyan: rgb(82, 190, 209);
}
.body_clock {
main {
display: flex;