feat: command palette, digital rain

fezcode · fezcode · commit d101ca09092b · 2025-11-23T16:16:13.000+03:00
diff --git a/src/components/CommandPalette.js b/src/components/CommandPalette.js
@@ -7,6 +7,7 @@ import { useToast } from '../hooks/useToast';
 import { SIDEBAR_KEYS, remove as removeLocalStorageItem } from '../utils/LocalStorageManager';
 import { version } from '../version'; // Import the version
 import LiveClock from './LiveClock'; // Import LiveClock
+import DigitalRain from './DigitalRain'; // Import DigitalRain
 import { filterItems } from '../utils/search'; // Import the search utility
 
 const CommandPalette = ({ isOpen, setIsOpen, openGenericModal }) => {
@@ -126,6 +127,10 @@ const CommandPalette = ({ isOpen, setIsOpen, openGenericModal }) => {
                     openGenericModal('Current Time', <LiveClock />);
                     break;
                 }
+                case 'digitalRain': {
+                    openGenericModal('Digital Rain', <DigitalRain />);
+                    break;
+                }
                 default:
                     break;
             }
diff --git a/src/components/DigitalRain.js b/src/components/DigitalRain.js
@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+
+const DigitalRain = () => {
+    const canvasRef = useRef(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+
+        // Set canvas to full width and height of its container
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+
+        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: columns }).map(() => 1);
+
+        let animationFrameId;
+        let frameCount = 0;
+        const slowdownFactor = 3; // Higher number = slower rain
+
+        const draw = () => {
+            ctx.fillStyle = 'rgba(21, 21, 21, 0.05)'; // Semi-transparent black for fading effect
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            ctx.fillStyle = '#0F0'; // Green text
+            ctx.font = `${fontSize}px monospace`;
+
+            frameCount++;
+
+            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 (frameCount % slowdownFactor === 0) {
+                    if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                        rainDrops[i] = 0;
+                    }
+                    rainDrops[i]++;
+                }
+            }
+            animationFrameId = requestAnimationFrame(draw);
+        };
+        draw();
+        return () => {
+            cancelAnimationFrame(animationFrameId);
+        };
+    }, []);
+
+    // Style for the canvas to fill the modal body
+    const canvasStyle = {
+        display: 'block',
+        width: '100%',
+        height: '60vh', // Make it tall inside the modal
+    };
+
+    return (
+        <canvas ref={canvasRef} style={canvasStyle}></canvas>
+    );
+};
+
+export default DigitalRain;
diff --git a/src/hooks/useSearchableData.js b/src/hooks/useSearchableData.js
@@ -77,6 +77,7 @@ const useSearchableData = () => {
           { title: 'Go to Latest Log', type: 'command', commandId: 'latestLog' },
           { title: 'Her Daim', type: 'command', commandId: 'herDaim' },
           { title: 'Show Current Time', type: 'command', commandId: 'showTime' },
+          { title: 'Start Digital Rain', type: 'command', commandId: 'digitalRain' },
         ];
 
         setItems([...staticRoutes, ...customCommands, ...allPosts, ...allProjects, ...allLogs, ...allApps]);
