-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from cdmoro/dynamic-theme
Dynamic theme
- Loading branch information
Showing
16 changed files
with
541 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { describe, expect, test, vi } from "vitest"; | ||
| import { getDayParameters, getDayProgress } from "./dynamic"; | ||
|
|
||
| const PROGRESS = { | ||
| "0": new Date(2024, 5, 11, 0, 0, 0), | ||
| "16.67": new Date(2024, 5, 11, 4, 0, 0), | ||
| "25": new Date(2024, 5, 11, 6, 0, 0), | ||
| "32.78": new Date(2024, 5, 11, 7, 52, 6), | ||
| "33.33": new Date(2024, 5, 11, 8, 0, 0), | ||
| "37.5": new Date(2024, 5, 11, 9, 0, 0), | ||
| "45.83": new Date(2024, 5, 11, 11, 0, 0), | ||
| "50": new Date(2024, 5, 11, 12, 0, 0), | ||
| "60.83": new Date(2024, 5, 11, 14, 36, 0), | ||
| "75": new Date(2024, 5, 11, 18, 0, 0), | ||
| "79.17": new Date(2024, 5, 11, 19, 0, 0), | ||
| "100": new Date(2024, 5, 11, 23, 59, 59), | ||
| }; | ||
|
|
||
| describe("getDayProgress", () => { | ||
| const formatDate = (date: Date) => | ||
| `${date.getHours().toString().padStart(2, "0")}:${date | ||
| .getMinutes() | ||
| .toString() | ||
| .padStart(2, "0")}`; | ||
|
|
||
| Object.entries(PROGRESS).forEach(([progress, date]) => { | ||
| test(`should return ${progress}% for ${formatDate(date)}`, () => { | ||
| vi.useFakeTimers(); | ||
| vi.setSystemTime(date); | ||
|
|
||
| expect(getDayProgress()).toEqual(parseFloat(progress)); | ||
| }); | ||
|
|
||
| vi.useRealTimers(); | ||
| }); | ||
| }); | ||
|
|
||
| describe("getDayParameters", () => { | ||
| const dayParameterResponse = ( | ||
| scene: string, | ||
| period: string, | ||
| segment: number, | ||
| progress: number | ||
| ) => ({ scene, period, segment, progress }); | ||
|
|
||
| const PARAMETERS = { | ||
| "0": dayParameterResponse("night", "am", 0, 0), | ||
| "16.67": dayParameterResponse("night", "am", 1, 16.67), | ||
| "25": dayParameterResponse("morning", "am", 2, 25), | ||
| "32.78": dayParameterResponse("morning", "am", 3, 32.78), | ||
| "33.33": dayParameterResponse("morning", "am", 3, 33.33), | ||
| "37.5": dayParameterResponse("morning", "am", 3, 37.5), | ||
| "45.83": dayParameterResponse("morning", "am", 4, 45.83), | ||
| "50": dayParameterResponse("morning", "pm", 4, 50), | ||
| "60.83": dayParameterResponse("afternoon", "pm", 5, 60.83), | ||
| "75": dayParameterResponse("evening", "pm", 6, 75), | ||
| "79.17": dayParameterResponse("evening", "pm", 6, 79.17), | ||
| "100": dayParameterResponse("night", "pm", 8, 100), | ||
| }; | ||
|
|
||
| Object.entries(PROGRESS).forEach(([progress, date]) => { | ||
| test(`should return expected parameters for ${progress}%`, () => { | ||
| vi.useFakeTimers(); | ||
| vi.setSystemTime(date); | ||
|
|
||
| expect(getDayParameters()).toEqual( | ||
| PARAMETERS[progress as keyof typeof PARAMETERS] | ||
| ); | ||
| }); | ||
|
|
||
| vi.useRealTimers(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| const MOON_PHASES = [ | ||
| "new", | ||
| "waxing-crescent", | ||
| "first-quarter", | ||
| "waxing-gibbous", | ||
| "full", | ||
| "waning-gibbous", | ||
| "third-quarter", | ||
| "waning-crescent", | ||
| ]; | ||
| const moonPhase = MOON_PHASES[Math.floor(Math.random() * MOON_PHASES.length)]; | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const testScene = urlParams.get("scene"); | ||
| const testProgress = urlParams.get("progress"); | ||
|
|
||
| export function getDayProgress() { | ||
| const now = new Date(); | ||
| const seconds = | ||
| now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds(); | ||
| const progress = (seconds * 100) / 86400; | ||
|
|
||
| return parseFloat(testProgress || progress.toFixed(2)); | ||
| } | ||
|
|
||
| export function getDayParameters() { | ||
| const progress = getDayProgress(); | ||
| // 9pm to 5am | ||
| let scene = "night"; | ||
| // 5am to 12pm | ||
| if (progress >= 20.83 && progress <= 50) { | ||
| scene = "morning"; | ||
| } // 12pm to 5pm | ||
| else if (progress > 50 && progress <= 70.83) { | ||
| scene = "afternoon"; | ||
| } // 5pm to 9pm | ||
| else if (progress > 70.83 && progress <= 87.5) { | ||
| scene = "evening"; | ||
| } | ||
|
|
||
| const segment = Math.round((progress * 8) / 100); | ||
|
|
||
| const period = progress < 50 ? "am" : "pm"; | ||
|
|
||
| return { | ||
| scene: testScene || scene, | ||
| progress, | ||
| period, | ||
| segment, | ||
| }; | ||
| } | ||
|
|
||
| export function setDayParameters() { | ||
| const { progress, scene, segment, period } = getDayParameters(); | ||
|
|
||
| if (!document.querySelector(".sphere")) { | ||
| const actor = document.createElement("div"); | ||
| actor.classList.add("sphere"); | ||
| actor.classList.toggle(moonPhase, scene === "night"); | ||
| document.querySelector("main")?.appendChild(actor); | ||
| } | ||
|
|
||
| const root = document.querySelector<HTMLElement>(":root"); | ||
| root?.style.setProperty("--day-progress", progress.toString()); | ||
| root?.setAttribute("data-progress", progress.toString()); | ||
| root?.setAttribute("data-scene", scene); | ||
| root?.setAttribute("data-period", period); | ||
| root?.setAttribute("data-segment", segment.toString()); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.