Skip to content

Commit f4e9f39

Browse files
opax7opax7
committed
bugfix: reload starfield when nav back to splash
1 parent f350b07 commit f4e9f39

2 files changed

Lines changed: 95 additions & 83 deletions

File tree

‎src/components/starfield.astro‎

Lines changed: 93 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -17,98 +17,110 @@
1717
</style>
1818

1919
<script>
20+
document.addEventListener('astro:page-load', () => {
21+
const COUNT = 800;
22+
const SPEED = 0.1;
23+
24+
class Star {
25+
x: number;
26+
y: number;
27+
z: number;
28+
xPrev: number;
29+
yPrev: number;
30+
31+
constructor(x = 0, y = 0, z = 0) {
32+
this.x = x;
33+
this.y = y;
34+
this.z = z;
35+
this.xPrev = x;
36+
this.yPrev = y;
37+
}
2038

21-
const COUNT = 800;
22-
const SPEED = 0.1;
23-
24-
class Star {
25-
x: number;
26-
y: number;
27-
z: number;
28-
xPrev: number;
29-
yPrev: number;
30-
31-
constructor(x = 0, y = 0, z = 0) {
32-
this.x = x;
33-
this.y = y;
34-
this.z = z;
35-
this.xPrev = x;
36-
this.yPrev = y;
37-
}
38-
39-
update(width: number, height: number, speed: number) {
40-
this.xPrev = this.x;
41-
this.yPrev = this.y;
42-
this.z += speed * 0.0675;
43-
this.x += this.x * (speed * 0.0225) * this.z;
44-
this.y += this.y * (speed * 0.0225) * this.z;
45-
if (
46-
this.x > width / 2 ||
47-
this.x < -width / 2 ||
48-
this.y > height / 2 ||
49-
this.y < -height / 2
50-
) {
51-
this.x = Math.random() * width - width / 2;
52-
this.y = Math.random() * height - height / 2;
39+
update(width: number, height: number, speed: number) {
5340
this.xPrev = this.x;
5441
this.yPrev = this.y;
55-
this.z = 0;
42+
this.z += speed * 0.0675;
43+
this.x += this.x * (speed * 0.0225) * this.z;
44+
this.y += this.y * (speed * 0.0225) * this.z;
45+
if (
46+
this.x > width / 2 ||
47+
this.x < -width / 2 ||
48+
this.y > height / 2 ||
49+
this.y < -height / 2
50+
) {
51+
this.x = Math.random() * width - width / 2;
52+
this.y = Math.random() * height - height / 2;
53+
this.xPrev = this.x;
54+
this.yPrev = this.y;
55+
this.z = 0;
56+
}
5657
}
57-
}
5858

59-
draw(ctx: CanvasRenderingContext2D) {
60-
ctx.lineWidth = this.z;
61-
ctx.beginPath();
62-
ctx.moveTo(this.x, this.y);
63-
ctx.lineTo(this.xPrev, this.yPrev);
64-
ctx.stroke();
59+
draw(ctx: CanvasRenderingContext2D) {
60+
ctx.lineWidth = this.z;
61+
ctx.beginPath();
62+
ctx.moveTo(this.x, this.y);
63+
ctx.lineTo(this.xPrev, this.yPrev);
64+
ctx.stroke();
65+
}
6566
}
66-
}
6767

68-
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
69-
let rafId = 0;
70-
71-
const canvas = document.querySelector(
72-
"#starfield-canvas",
73-
) as HTMLCanvasElement;
74-
const ctx = canvas.getContext("2d");
75-
76-
const container = document.querySelector("#starfield") as HTMLElement;
77-
const resizeObserver = new ResizeObserver(setup);
78-
resizeObserver.observe(container);
79-
80-
function setup() {
81-
rafId > 0 && cancelAnimationFrame(rafId);
82-
83-
const { clientWidth: width, clientHeight: height } = container;
84-
const dpr = window.devicePixelRatio || 1;
85-
canvas.width = width * dpr;
86-
canvas.height = height * dpr;
87-
canvas.style.width = `${width}px`;
88-
canvas.style.height = `${height}px`;
89-
ctx.scale(dpr, dpr);
90-
91-
for (const star of stars) {
92-
star.x = Math.random() * width - width / 2;
93-
star.y = Math.random() * height - height / 2;
94-
star.z = 0;
68+
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
69+
let rafId = 0;
70+
let ctx;
71+
72+
const canvas = document.querySelector(
73+
"#starfield-canvas",
74+
) as HTMLCanvasElement;
75+
if (canvas) {
76+
ctx = canvas.getContext("2d");
77+
} else {
78+
ctx = null;
79+
console.warn("Canvas element is not available.");
9580
}
9681

97-
ctx.translate(width / 2, height / 2);
98-
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
99-
ctx.strokeStyle = "white";
100-
rafId = requestAnimationFrame(frame);
101-
}
82+
let container = document.querySelector("#starfield") as HTMLElement;
83+
let resizeObserver: ResizeObserver;
84+
if (setup && container) {
85+
resizeObserver = new ResizeObserver(setup);
86+
resizeObserver.observe(container);
87+
} else {
88+
console.warn("Setup not available or container not found.");
89+
}
10290

103-
function frame() {
104-
const { clientWidth: width, clientHeight: height } = container;
91+
function setup() {
92+
rafId > 0 && cancelAnimationFrame(rafId);
93+
94+
const { clientWidth: width, clientHeight: height } = container;
95+
const dpr = window.devicePixelRatio || 1;
96+
canvas.width = width * dpr;
97+
canvas.height = height * dpr;
98+
canvas.style.width = `${width}px`;
99+
canvas.style.height = `${height}px`;
100+
ctx.scale(dpr, dpr);
101+
102+
for (const star of stars) {
103+
star.x = Math.random() * width - width / 2;
104+
star.y = Math.random() * height - height / 2;
105+
star.z = 0;
106+
}
105107

106-
for (const star of stars) {
107-
star.update(width, height, SPEED);
108-
star.draw(ctx);
108+
ctx.translate(width / 2, height / 2);
109+
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
110+
ctx.strokeStyle = "white";
111+
rafId = requestAnimationFrame(frame);
109112
}
110113

111-
ctx.fillRect(-width / 2, -height / 2, width, height);
112-
rafId = requestAnimationFrame(frame);
113-
}
114+
function frame() {
115+
const { clientWidth: width, clientHeight: height } = container;
116+
117+
for (const star of stars) {
118+
star.update(width, height, SPEED);
119+
star.draw(ctx);
120+
}
121+
122+
ctx.fillRect(-width / 2, -height / 2, width, height);
123+
rafId = requestAnimationFrame(frame);
124+
}
125+
});
114126
</script>

‎src/pages/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ const metadata = {
1313
<Layout metadata={metadata}>
1414
<Starfield />
1515
<Hero2L
16-
tagline="DevOps Transformation is More Than Meets the Eye"
16+
tagline="DevOps Transformation </br> IS </br> More Than Meets the Eye"
1717
title="DevOptimus.com"
18-
subtitle="I am DevOptimus Prime. Join me in my mission to defend Earth from the dark forces that seek to slow release cycles, decrease security and increase failure rates and recovery times. It's time to take up arms and join the fight. Autobots; Transform, and "
18+
subtitle="I am DevOptimus Prime. Join me in my mission to defend Earth from the dark forces that seek to slow release cycles, decrease security and increase failure rates and recovery times. It's time to take up arms and join the fight. </br> Autobots... Transform, and "
1919
actions={[
2020
{ variant: 'primary', text: 'ROLL Out!', href: '/blog', icon: 'tabler:truck-delivery' },
2121
]}

0 commit comments

Comments
 (0)