refactor frontend and fix debug mode

2026-10-29 19:18:34 +01:00 · 2025-05-29 13:40:44 -04:00
parent de3eed792b
commit f02e16272e
28 changed files with 422 additions and 376 deletions
@@ -0,0 +1,114 @@
+/**
+ * UI utilities and helpers for the Wowngeon game
+ */
+const UI = {
+    // Scroll chat to bottom
+    scrollChat: function() {
+        var messageBox = $('#messageBox');
+        messageBox.scrollTop(messageBox.prop("scrollHeight"));
+    },
+
+    // Update block height display
+    updateBlockHeight: function(height) {
+        $('#heightValue').text(height);
+    },
+
+    // Update visual focus indicator
+    updateFocusIndicator: function() {
+        var gameDisplay = $('#game-display');
+        var chatInput = $('#chatInput');
+
+        if (document.activeElement === gameDisplay[0]) {
+            gameDisplay.css('outline', '2px solid yellow');
+            chatInput.css('outline', 'none');
+        } else if (document.activeElement === chatInput[0]) {
+            chatInput.css('outline', '2px solid cyan');
+            gameDisplay.css('outline', 'none');
+        } else {
+            gameDisplay.css('outline', 'none');
+            chatInput.css('outline', 'none');
+        }
+    },
+
+    // Initialize teletype animation
+    initTeletype: function() {
+        $('#banner').teletype({
+            text: ["Welcome traveler...", "You have arrived at...", "The Wowngeon"],
+            typeDelay: 100,
+            backDelay: 50,
+            pause: 1500
+        });
+        
+        // After animations are complete, set static text
+        setTimeout(function() {
+            $('#banner, #bannercursor').fadeOut(500, function() {
+                $('#staticbanner').text("WOWGUE - A Wownero Roguelike").fadeIn(500);
+            });
+        }, 14000);
+    },
+
+    // Initialize browser detection
+    initBrowserDetection: function() {
+        setTimeout(function() {
+            var browserInfo = document.getElementById('browser-info');
+            if (!browserInfo) return;
+            
+            browserInfo.style.display = 'block';
+            
+            // Detect browser
+            var browserName = "Unknown";
+            if (navigator.userAgent.indexOf("Firefox") !== -1) {
+                browserName = "Firefox";
+            } else if (navigator.userAgent.indexOf("Chrome") !== -1) {
+                browserName = "Chrome/Chromium";
+            } else if (navigator.userAgent.indexOf("Safari") !== -1) {
+                browserName = "Safari";
+            } else if (navigator.userAgent.indexOf("Edge") !== -1) {
+                browserName = "Edge";
+            }
+            
+            document.getElementById('browser-name').textContent = browserName;
+            
+            // Check display status
+            var rotdis = document.querySelector('.rotdis');
+            var canvas = rotdis ? rotdis.querySelector('canvas') : null;
+            
+            if (canvas) {
+                document.getElementById('display-status').textContent = 
+                    "OK (" + canvas.width + "x" + canvas.height + ")";
+                document.getElementById('display-status').style.color = "#0f0";
+            } else {
+                document.getElementById('display-status').textContent = "NOT FOUND";
+                document.getElementById('display-status').style.color = "#f00";
+            }
+            
+            // Hide after 10 seconds
+            setTimeout(function() {
+                browserInfo.style.display = 'none';
+            }, 10000);
+        }, 2000);
+    },
+
+    // Set test values if no server response
+    setTestValues: function() {
+        setTimeout(function() {
+            if ($('#heightValue').text() === 'Loading...') {
+                UI.updateBlockHeight('---');
+                $('#statusValue').text('Waiting...');
+                $('#statusValue').css('color', '#ff0');
+            }
+        }, 5000);
+    }
+};
+
+// Ensure UI is available globally
+if (typeof window !== 'undefined') {
+    window.UI = UI;
+}
+
+// Initialize UI components when DOM is ready
+$(function() {
+    UI.initTeletype();
+    UI.initBrowserDetection();
+    UI.setTestValues();
+});