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>
|