Добавил звук печатающей клавиатуры

templates/login.html

@@ -216,14 +216,14 @@
                 <div class="term-line" id="welcomeLine"></div>
 
                 <div class="term-line hidden" id="loginLine">
-                    <span class="prompt">login:</span>
+                    <span id="loginPrompt" class="prompt"></span>
                     <span id="usernameText" class="typed-value"></span>
                     <span id="usernameCaret" class="caret">█</span>
                     <input id="usernameInput" class="fake-input" type="text" autocomplete="username" spellcheck="false">
                 </div>
 
                 <div class="term-line hidden" id="passwordLine">
-                    <span class="prompt">password:</span>
+                    <span id="passwordPrompt" class="prompt"></span>
                     <span id="passwordText" class="typed-value"></span>
                     <span id="passwordCaret" class="caret hidden">█</span>
                     <input id="passwordInput" class="fake-input" type="password" autocomplete="current-password" spellcheck="false">
@@ -252,7 +252,7 @@
 <script>
 (function () {
     const canvas = document.getElementById("matrixCanvas");
-            const ctx = canvas.getContext("2d");
+    const ctx = canvas ? canvas.getContext("2d") : null;
 
     let matrixAnimationId = null;
     let drops = [];
@@ -264,6 +264,7 @@
     const interval = 1000 / fps;
 
     function resizeCanvas() {
+        if (!canvas || !ctx) return;
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
         columns = Math.floor(canvas.width / fontSize);
@@ -271,6 +272,8 @@
     }
 
     function drawMatrix(time = 0) {
+        if (!canvas || !ctx) return;
+
         if (time - lastTime < interval) {
             matrixAnimationId = requestAnimationFrame(drawMatrix);
             return;
@@ -303,13 +306,15 @@
     window.addEventListener("resize", resizeCanvas);
 
     const welcomeText = "добро пожаловать в ЖФЛ";
-            const typingSpeed = 75;
 
     const welcomeLine = document.getElementById("welcomeLine");
     const loginLine = document.getElementById("loginLine");
     const passwordLine = document.getElementById("passwordLine");
     const submitLine = document.getElementById("submitLine");
 
+    const loginPrompt = document.getElementById("loginPrompt");
+    const passwordPrompt = document.getElementById("passwordPrompt");
+
     const usernameInput = document.getElementById("usernameInput");
     const passwordInput = document.getElementById("passwordInput");
 
@@ -323,7 +328,59 @@
     const realUsername = document.getElementById("realUsername");
     const realPassword = document.getElementById("realPassword");
 
-            let phase = "typing_welcome";
+    const hasServerError = !!document.querySelector(".sys-error");
+
+    let phase = "waiting_start";
+    let started = false;
+    let audioCtx = null;
+
+    function ensureAudioContext() {
+        if (!audioCtx) {
+            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        }
+
+        if (audioCtx.state === "suspended") {
+            audioCtx.resume();
+        }
+
+        return audioCtx;
+    }
+
+    function playKeySound() {
+        const ctx = ensureAudioContext();
+
+        const oscillator = ctx.createOscillator();
+        const gainNode = ctx.createGain();
+
+        oscillator.type = "square";
+        oscillator.frequency.setValueAtTime(900, ctx.currentTime);
+
+        gainNode.gain.setValueAtTime(0.012, ctx.currentTime);
+        gainNode.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.035);
+
+        oscillator.connect(gainNode);
+        gainNode.connect(ctx.destination);
+
+        oscillator.start();
+        oscillator.stop(ctx.currentTime + 0.035);
+    }
+
+    function typeText(target, text, speed = 60, callback, withSound = true) {
+        let i = 0;
+
+        function typing() {
+            if (i < text.length) {
+                target.textContent += text[i];
+                if (withSound) playKeySound();
+                i++;
+                setTimeout(typing, speed);
+            } else if (callback) {
+                callback();
+            }
+        }
+
+        typing();
+    }
 
     function focusCurrentInput() {
         if (phase === "login") {
@@ -333,24 +390,53 @@
         }
     }
 
-            function showLoginStep() {
-                phase = "login";
+    function showLoginStep(prefill = "") {
+        phase = "typing_login";
         loginLine.classList.remove("hidden");
-                usernameCaret.classList.remove("hidden");
+        usernameCaret.classList.add("hidden");
         passwordCaret.classList.add("hidden");
-                setTimeout(() => usernameInput.focus(), 30);
+        loginPrompt.textContent = "";
+        usernameText.textContent = "";
+        usernameInput.value = "";
+
+        typeText(loginPrompt, "login:", 60, () => {
+            if (prefill) {
+                usernameInput.value = prefill;
+                usernameText.textContent = prefill;
             }
 
-            function showPasswordStep() {
-                phase = "password";
+            phase = "login";
+            usernameCaret.classList.remove("hidden");
+            usernameInput.focus();
+        });
+    }
+
+    function showPasswordStep(prefill = "") {
+        phase = "typing_password";
         passwordLine.classList.remove("hidden");
+
         usernameCaret.classList.add("hidden");
+        passwordCaret.classList.add("hidden");
+
+        passwordPrompt.textContent = "";
+        passwordText.textContent = "";
+        passwordInput.value = "";
+
+        typeText(passwordPrompt, "password:", 60, () => {
+            if (prefill) {
+                passwordInput.value = prefill;
+                passwordText.textContent = "*".repeat(prefill.length);
+            }
+
+            phase = "password";
             passwordCaret.classList.remove("hidden");
-                setTimeout(() => passwordInput.focus(), 30);
+            passwordInput.focus();
+        });
     }
 
     function submitLogin() {
         phase = "submitting";
+        usernameCaret.classList.add("hidden");
         passwordCaret.classList.add("hidden");
         submitLine.classList.remove("hidden");
 
@@ -362,38 +448,69 @@
         }, 350);
     }
 
-            function typeWelcome(index = 0) {
-                if (index < welcomeText.length) {
-                    welcomeLine.textContent += welcomeText[index];
-                    setTimeout(() => typeWelcome(index + 1), typingSpeed);
+    function startSequence(options = {}) {
+        if (started) return;
+        started = true;
+
+        const skipWelcome = !!options.skipWelcome;
+        const usernamePrefill = options.usernamePrefill || "";
+
+        ensureAudioContext();
+
+        phase = "typing_welcome";
+        welcomeLine.textContent = "";
+        loginPrompt.textContent = "";
+        passwordPrompt.textContent = "";
+        usernameText.textContent = "";
+        passwordText.textContent = "";
+        usernameInput.value = "";
+        passwordInput.value = "";
+        submitLine.classList.add("hidden");
+
+        loginLine.classList.add("hidden");
+        passwordLine.classList.add("hidden");
+
+        usernameCaret.classList.add("hidden");
+        passwordCaret.classList.add("hidden");
+
+        if (skipWelcome) {
+            welcomeLine.textContent = welcomeText;
+            setTimeout(() => showLoginStep(usernamePrefill), 120);
             return;
         }
 
-                setTimeout(showLoginStep, 220);
+        typeText(welcomeLine, welcomeText, 75, () => {
+            setTimeout(() => showLoginStep(usernamePrefill), 220);
+        });
     }
 
     usernameInput.addEventListener("input", function () {
         usernameText.textContent = usernameInput.value;
+        playKeySound();
     });
 
     passwordInput.addEventListener("input", function () {
         passwordText.textContent = "*".repeat(passwordInput.value.length);
+        playKeySound();
     });
 
     usernameInput.addEventListener("keydown", function (event) {
         if (event.key === "Enter") {
+            playKeySound();
             event.preventDefault();
 
             if (!usernameInput.value.trim()) {
                 return;
             }
 
+            usernameCaret.classList.add("hidden");
             showPasswordStep();
         }
     });
 
     passwordInput.addEventListener("keydown", function (event) {
         if (event.key === "Enter") {
+            playKeySound();
             event.preventDefault();
 
             if (!usernameInput.value.trim() || !passwordInput.value) {
@@ -405,11 +522,26 @@
     });
 
     document.addEventListener("click", function () {
+        if (!started) {
+            startSequence();
+            return;
+        }
         focusCurrentInput();
     });
 
     document.addEventListener("keydown", function (event) {
-                if (phase === "typing_welcome" || phase === "submitting") {
+        if (!started) {
+            event.preventDefault();
+            startSequence();
+            return;
+        }
+
+        if (
+            phase === "typing_welcome" ||
+            phase === "typing_login" ||
+            phase === "typing_password" ||
+            phase === "submitting"
+        ) {
             return;
         }
 
@@ -428,8 +560,11 @@
         }
     });
 
-            typeWelcome();
+    if (hasServerError) {
+        startSequence({ skipWelcome: true });
+    }
 })();
 </script>
+
 </body>
 </html>

templates/match_workspace.html

@@ -1234,7 +1234,8 @@
           drops[i] = 0;
         }
 
-        drops[i] += 0.65;
+        // drops[i] += 0.65;
+        drops[i] ++;
       }
 
       matrixAnimationId = requestAnimationFrame(drawMatrix);

templates/matches.html

@@ -534,7 +534,7 @@
                 drops[i] = 0;
             }
 
-            drops[i] += 0.65;
+            drops[i] ++;
         }
 
         matrixAnimationId = requestAnimationFrame(drawMatrix);