-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDigitalRain.jsx
More file actions
124 lines (101 loc) · 3.65 KB
/
DigitalRain.jsx
File metadata and controls
124 lines (101 loc) · 3.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, { useRef, useEffect, memo } from 'react';
import { useAchievements } from '../context/AchievementContext';
const DigitalRain = memo(({ isActive }) => {
const canvasRef = useRef(null);
const { unlockAchievement } = useAchievements();
const idleTimerRef = useRef(null);
useEffect(() => {
if (!isActive) {
clearTimeout(idleTimerRef.current);
return;
}
const resetTimer = () => {
clearTimeout(idleTimerRef.current);
idleTimerRef.current = setTimeout(() => {
unlockAchievement('the_void_stares_back');
}, 60000); // 1 minute
};
window.addEventListener('mousemove', resetTimer);
window.addEventListener('keydown', resetTimer);
window.addEventListener('click', resetTimer);
// Start initial timer
resetTimer();
return () => {
window.removeEventListener('mousemove', resetTimer);
window.removeEventListener('keydown', resetTimer);
window.removeEventListener('click', resetTimer);
clearTimeout(idleTimerRef.current);
};
}, [isActive, unlockAchievement]);
useEffect(() => {
if (!isActive) return;
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
let animationFrameId;
const resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const katakana =
'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボпоヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';
const alphabet = katakana + latin + nums;
const fontSize = 16;
const columns = canvas.width / fontSize;
const rainDrops = Array.from({ length: Math.ceil(columns) }).map(() => 1);
let frameCount = 0;
const slowdownFactor = 5;
const draw = () => {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(0, 200, 0, 1.0)';
ctx.font = `${fontSize}px monospace`;
frameCount++;
if (frameCount % slowdownFactor === 0) {
for (let i = 0; i < rainDrops.length; i++) {
const text = alphabet.charAt(
Math.floor(Math.random() * alphabet.length),
);
ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
if (
rainDrops[i] * fontSize > canvas.height &&
Math.random() > 0.975
) {
rainDrops[i] = 0;
}
rainDrops[i]++;
}
}
// Add notification text in the bottom left
const notificationText = 'Alt+K to bring command palette';
const fezcode = 'fezcode.com';
ctx.font = '16px monospace';
ctx.fillStyle = 'rgba(0, 255, 0, 0.05)';
ctx.textAlign = 'left';
ctx.fillText(notificationText, 20, canvas.height - 20);
ctx.textAlign = 'right';
ctx.fillText(fezcode, canvas.width - 20, canvas.height - 20);
animationFrameId = requestAnimationFrame(draw);
};
draw();
return () => {
window.removeEventListener('resize', resizeCanvas);
cancelAnimationFrame(animationFrameId);
ctx.clearRect(0, 0, canvas.width, canvas.height);
};
}, [isActive]);
if (!isActive) return null;
const canvasStyle = {
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
zIndex: 50,
};
return <canvas ref={canvasRef} style={canvasStyle}></canvas>;
});
export default DigitalRain;