mirror of
https://github.com/NeonGamerBot-QK/saahild.com.git
synced 2025-06-24 10:44:21 +00:00
enhancement(lint): Fix lint errors for components/Backdrop.vue
Co-authored-by: NeonGamerBot-QK <neon@saahild.com> Signed-off-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>
This commit is contained in:
zeon-neon[bot]
GitHub
parent
3222b2da65
commit
0675604d1a
1 changed files with 151 additions and 151 deletions
|
|
@ -1,151 +1,151 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted } from "vue";
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
|
|
||||||
const canvas = ref(null);
|
const canvas = ref(null);
|
||||||
const cursor = ref({ x: 0, y: 0 });
|
const cursor = ref({ x: 0, y: 0 });
|
||||||
let ctx = null;
|
let ctx = null;
|
||||||
let animationFrame = null;
|
let animationFrame = null;
|
||||||
let chars = [];
|
let chars = [];
|
||||||
|
|
||||||
class Char {
|
class Char {
|
||||||
constructor(x, y, char) {
|
constructor(x, y, char) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
this.y = y;
|
||||||
this.char = char;
|
this.char = char;
|
||||||
this.speed = 0.02 + Math.random() * 0.8;
|
this.speed = 0.02 + Math.random() * 0.8;
|
||||||
this.opacity = 0.05 + Math.random() * 0.15;
|
this.opacity = 0.05 + Math.random() * 0.15;
|
||||||
this.actualY = y;
|
this.actualY = y;
|
||||||
}
|
}
|
||||||
|
|
||||||
draw() {
|
draw() {
|
||||||
const distToCursor = Math.hypot(
|
const distToCursor = Math.hypot(
|
||||||
this.x - cursor.value.x,
|
this.x - cursor.value.x,
|
||||||
this.y - cursor.value.y
|
this.y - cursor.value.y,
|
||||||
);
|
);
|
||||||
|
|
||||||
const highlight = Math.max(0, 0.5 - distToCursor / 250);
|
const highlight = Math.max(0, 0.5 - distToCursor / 250);
|
||||||
ctx.fillStyle = `rgba(203, 166, 247, ${this.opacity + highlight})`;
|
ctx.fillStyle = `rgba(203, 166, 247, ${this.opacity + highlight})`;
|
||||||
ctx.fillText(this.char, this.x, this.y);
|
ctx.fillText(this.char, this.x, this.y);
|
||||||
}
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
this.actualY += this.speed;
|
this.actualY += this.speed;
|
||||||
this.y = this.actualY % window.innerHeight;
|
this.y = this.actualY % window.innerHeight;
|
||||||
|
|
||||||
if (this.y < this.speed) {
|
if (this.y < this.speed) {
|
||||||
this.char = String.fromCharCode(0x2729 + Math.floor(Math.random() * 706));
|
this.char = String.fromCharCode(0x2729 + Math.floor(Math.random() * 706));
|
||||||
this.opacity = 0.05 + Math.random() * 0.15;
|
this.opacity = 0.05 + Math.random() * 0.15;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const calculateFontSize = () => {
|
const calculateFontSize = () => {
|
||||||
const baseSize = 16;
|
const baseSize = 16;
|
||||||
const screenWidth = window.innerWidth;
|
const screenWidth = window.innerWidth;
|
||||||
|
|
||||||
// For smaller screens
|
// For smaller screens
|
||||||
if (screenWidth < 768) {
|
if (screenWidth < 768) {
|
||||||
return Math.max(18, baseSize * (screenWidth / 768));
|
return Math.max(18, baseSize * (screenWidth / 768));
|
||||||
}
|
}
|
||||||
|
|
||||||
// For larger screens
|
// For larger screens
|
||||||
return Math.min(22, Math.max(18, baseSize * (screenWidth / 1920)));
|
return Math.min(22, Math.max(18, baseSize * (screenWidth / 1920)));
|
||||||
};
|
};
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
if (!canvas.value) return;
|
if (!canvas.value) return;
|
||||||
|
|
||||||
ctx = canvas.value.getContext("2d", { alpha: false });
|
ctx = canvas.value.getContext("2d", { alpha: false });
|
||||||
canvas.value.width = window.innerWidth;
|
canvas.value.width = window.innerWidth;
|
||||||
canvas.value.height = window.innerHeight;
|
canvas.value.height = window.innerHeight;
|
||||||
|
|
||||||
const fontSize = calculateFontSize();
|
const fontSize = calculateFontSize();
|
||||||
const columnSpacing = fontSize * 1.5;
|
const columnSpacing = fontSize * 1.5;
|
||||||
|
|
||||||
// Adjust number of columns based on screen size
|
// Adjust number of columns based on screen size
|
||||||
const minColumns = 15; // Ensure at least this many columns on mobile
|
const minColumns = 15; // Ensure at least this many columns on mobile
|
||||||
const columns = Math.max(
|
const columns = Math.max(
|
||||||
minColumns,
|
minColumns,
|
||||||
Math.floor(window.innerWidth / columnSpacing)
|
Math.floor(window.innerWidth / columnSpacing),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Adjust rows based on screen height
|
// Adjust rows based on screen height
|
||||||
const rowSpacing = fontSize * 2;
|
const rowSpacing = fontSize * 2;
|
||||||
const minRows = 15; // Ensure at least this many rows on small screens
|
const minRows = 15; // Ensure at least this many rows on small screens
|
||||||
const maxRows = 25; // Cap for performance on large screens
|
const maxRows = 25; // Cap for performance on large screens
|
||||||
const rows = Math.min(
|
const rows = Math.min(
|
||||||
maxRows,
|
maxRows,
|
||||||
Math.max(minRows, Math.floor(window.innerHeight / rowSpacing))
|
Math.max(minRows, Math.floor(window.innerHeight / rowSpacing)),
|
||||||
);
|
);
|
||||||
|
|
||||||
chars = [];
|
chars = [];
|
||||||
for (let i = 0; i < columns; i++) {
|
for (let i = 0; i < columns; i++) {
|
||||||
for (let j = 0; j < rows; j++) {
|
for (let j = 0; j < rows; j++) {
|
||||||
const x = i * (window.innerWidth / columns); // Evenly distribute columns
|
const x = i * (window.innerWidth / columns); // Evenly distribute columns
|
||||||
const y = j * rowSpacing - Math.random() * window.innerHeight;
|
const y = j * rowSpacing - Math.random() * window.innerHeight;
|
||||||
const char = String.fromCharCode(
|
const char = String.fromCharCode(
|
||||||
0x2729 + Math.floor(Math.random() * 706)
|
0x2729 + Math.floor(Math.random() * 706),
|
||||||
);
|
);
|
||||||
chars.push(new Char(x, y, char));
|
chars.push(new Char(x, y, char));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.font = `${fontSize}px monospace`;
|
ctx.font = `${fontSize}px monospace`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const animate = () => {
|
const animate = () => {
|
||||||
ctx.fillStyle = "rgb(17, 17, 20)";
|
ctx.fillStyle = "rgb(17, 17, 20)";
|
||||||
ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
|
ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
|
||||||
|
|
||||||
chars.forEach((char) => {
|
chars.forEach((char) => {
|
||||||
char.draw();
|
char.draw();
|
||||||
char.update();
|
char.update();
|
||||||
});
|
});
|
||||||
|
|
||||||
animationFrame = requestAnimationFrame(animate);
|
animationFrame = requestAnimationFrame(animate);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMouseMove = (e) => {
|
const handleMouseMove = (e) => {
|
||||||
cursor.value = {
|
cursor.value = {
|
||||||
x: e.clientX,
|
x: e.clientX,
|
||||||
y: e.clientY,
|
y: e.clientY,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
let resizeTimeout;
|
let resizeTimeout;
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
if (resizeTimeout) {
|
if (resizeTimeout) {
|
||||||
clearTimeout(resizeTimeout);
|
clearTimeout(resizeTimeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
resizeTimeout = setTimeout(() => {
|
resizeTimeout = setTimeout(() => {
|
||||||
if (canvas.value) {
|
if (canvas.value) {
|
||||||
canvas.value.width = window.innerWidth;
|
canvas.value.width = window.innerWidth;
|
||||||
canvas.value.height = window.innerHeight;
|
canvas.value.height = window.innerHeight;
|
||||||
init();
|
init();
|
||||||
}
|
}
|
||||||
}, 250);
|
}, 250);
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
init();
|
init();
|
||||||
animate();
|
animate();
|
||||||
window.addEventListener("mousemove", handleMouseMove);
|
window.addEventListener("mousemove", handleMouseMove);
|
||||||
window.addEventListener("resize", handleResize);
|
window.addEventListener("resize", handleResize);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (animationFrame) {
|
if (animationFrame) {
|
||||||
cancelAnimationFrame(animationFrame);
|
cancelAnimationFrame(animationFrame);
|
||||||
}
|
}
|
||||||
if (resizeTimeout) {
|
if (resizeTimeout) {
|
||||||
clearTimeout(resizeTimeout);
|
clearTimeout(resizeTimeout);
|
||||||
}
|
}
|
||||||
window.removeEventListener("mousemove", handleMouseMove);
|
window.removeEventListener("mousemove", handleMouseMove);
|
||||||
window.removeEventListener("resize", handleResize);
|
window.removeEventListener("resize", handleResize);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<canvas ref="canvas" class="fixed inset-0 -z-10 h-full w-full bg-crust" />
|
<canvas ref="canvas" class="fixed inset-0 -z-10 h-full w-full bg-crust" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue