+41
-31
Diff
round #2
+38
src/lib/component/sky.svelte
+38
src/lib/component/sky.svelte
···
1
+
<script lang="ts">
2
+
import { GenerateSkyGradient, GenerateStars, StarsOpacity } from "$lib/sky";
3
+
import { Time } from "$lib/sky/preset";
4
+
import type { ColorStop, Star } from "$lib/sky/types";
5
+
6
+
let { time, innerWidth, innerHeight, children } = $props();
7
+
8
+
let isNight = $derived<boolean>(
9
+
time <= Time.sunrise || time >= Time.sunset,
10
+
);
11
+
12
+
let gradient = $derived.by(() => {
13
+
const gradient = GenerateSkyGradient(time);
14
+
const stops = gradient
15
+
.map((s: ColorStop) => `rgb(${s.rgb.join(", ")}) ${s.position}%`)
16
+
.join(", ");
17
+
return `linear-gradient(to bottom, ${stops})`;
18
+
});
19
+
20
+
let stars = $state<Star[]>([]);
21
+
let starOpacity = $derived(StarsOpacity(time));
22
+
23
+
$effect(() => {
24
+
stars = isNight ? GenerateStars() : [];
25
+
});
26
+
</script>
27
+
28
+
<div class="relative h-screen" style="background: {gradient}">
29
+
{#each stars as star}
30
+
<div
31
+
class="absolute rounded-full bg-white"
32
+
style="left: {star.position.x * innerWidth}px; top: {star.position
33
+
.y *
34
+
innerHeight}px; width: {star.size}px; height: {star.size}px; opacity: {starOpacity};"
35
+
></div>
36
+
{/each}
37
+
{@render children()}
38
+
</div>
+3
-31
src/routes/+page.svelte
+3
-31
src/routes/+page.svelte
···
1
1
<script lang="ts">
2
-
import { GenerateSkyGradient, GenerateStars, StarsOpacity } from "$lib/sky";
3
-
import { Time } from "$lib/sky/preset";
4
-
import type { ColorStop, Star } from "$lib/sky/types";
2
+
import Sky from "$lib/component/sky.svelte";
5
3
6
4
let innerWidth = $state(0);
7
5
let innerHeight = $state(0);
···
21
19
debugMode ? debugHours : time.getHours() + time.getMinutes() / 60,
22
20
);
23
21
24
-
let gradient = $derived.by(() => {
25
-
const gradient = GenerateSkyGradient(timeInHours);
26
-
const stops = gradient
27
-
.map((s: ColorStop) => `rgb(${s.rgb.join(", ")}) ${s.position}%`)
28
-
.join(", ");
29
-
return `linear-gradient(to bottom, ${stops})`;
30
-
});
31
-
32
-
let stars = $state<Star[]>([]);
33
-
let isNight = $derived<boolean>(
34
-
timeInHours <= Time.sunrise || timeInHours >= Time.sunset,
35
-
);
36
-
let starOpacity = $derived(StarsOpacity(timeInHours));
37
-
38
-
$effect(() => {
39
-
stars = isNight ? GenerateStars() : [];
40
-
});
41
-
42
22
function formatHours(h: number): string {
43
23
const hours = Math.floor(h);
44
24
const minutes = Math.round((h - hours) * 60);
···
50
30
51
31
<svelte:window bind:innerWidth bind:innerHeight />
52
32
53
-
<div class="sky relative h-screen" style="background: {gradient}">
54
-
{#each stars as star}
55
-
<div
56
-
class="absolute rounded-full bg-white"
57
-
style="left: {star.position.x * innerWidth}px; top: {star.position
58
-
.y *
59
-
innerHeight}px; width: {star.size}px; height: {star.size}px; opacity: {starOpacity};"
60
-
></div>
61
-
{/each}
33
+
<Sky time={timeInHours} {innerWidth} {innerHeight}>
62
34
<!-- Debug Panel -->
63
35
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-50">
64
36
<div
···
114
86
{/if}
115
87
</div>
116
88
</div>
117
-
</div>
89
+
</Sky>
History
3 rounds
0 comments
isaiah-hamilton.dev
submitted
#2
1 commit
expand
collapse
add Sky component and integrate it into page
expand 0 comments
pull request successfully merged
isaiah-hamilton.dev
submitted
#1
1 commit
expand
collapse
add Sky component and integrate it into page
expand 0 comments
isaiah-hamilton.dev
submitted
#0
1 commit
expand
collapse
add Sky component and integrate it into page