62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
js snips
|
||
|
||
<script>
|
||
const coordsDisplay = document.getElementById('coords');
|
||
let isDecrypted = false;
|
||
|
||
const glitchGlyphs = ['Ξ','∆','⟁','✷','∞','ƒ','ꙮ','⊗','✦','Ψ','⧖','λ','β','µ','∇','Ω','⎊','₿','≡','╳','▒','░','✗','╱','⧘'];
|
||
const hex = '0123456789ABCDEF';
|
||
|
||
function rand(arr) {
|
||
return arr[Math.floor(Math.random() * arr.length)];
|
||
}
|
||
|
||
function generateGlitchString(prefix, realVal) {
|
||
const hexVal = realVal.toString(16).toUpperCase().padStart(3, '0');
|
||
let str = `${prefix}=`;
|
||
for (let i = 0; i < 4; i++) {
|
||
str += Math.random() > 0.5 && i < hexVal.length
|
||
? hexVal[i]
|
||
: rand(glitchGlyphs);
|
||
}
|
||
return str;
|
||
}
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (isDecrypted) return;
|
||
|
||
const glitchX = generateGlitchString('ΞX', e.clientX);
|
||
const glitchY = generateGlitchString('ΨY', e.clientY);
|
||
coordsDisplay.textContent = `${glitchX} ${glitchY}`;
|
||
});
|
||
|
||
// Decrypt on hover
|
||
coordsDisplay.addEventListener('mouseenter', () => {
|
||
isDecrypted = true;
|
||
coordsDisplay.classList.add('decrypted');
|
||
});
|
||
|
||
coordsDisplay.addEventListener('mousemove', (e) => {
|
||
if (!isDecrypted) return;
|
||
coordsDisplay.textContent = `X: ${e.clientX} Y: ${e.clientY}`;
|
||
});
|
||
|
||
coordsDisplay.addEventListener('mouseleave', () => {
|
||
isDecrypted = false;
|
||
coordsDisplay.classList.remove('decrypted');
|
||
});
|
||
|
||
const vLine = document.getElementById('vertical-line');
|
||
const hLine = document.getElementById('horizontal-line');
|
||
|
||
// Background color change on click
|
||
// document.body.addEventListener('click', () => {
|
||
// document.body.style.backgroundColor = `hsl(${Math.random()}, 70%, 80%)`;
|
||
// });
|
||
|
||
// Update crosshairs and coords
|
||
document.addEventListener('mousemove', (e) => {
|
||
vLine.style.left = `${e.clientX}px`;
|
||
hLine.style.top = `${e.clientY}px`;
|
||
});
|
||
</script> |