refactor frontend and fix debug mode

html/js/ui/teletype.js

@@ -0,0 +1,81 @@
+(function ($) {
+    // writes the string
+    //
+    // @param jQuery $target
+    // @param String str
+    // @param Numeric cursor
+    // @param Numeric delay
+    // @param Function cb
+    // @return void
+    function typeString($target, str, cursor, delay, cb) {
+      $target.html(function (_, html) {
+        return html + str[cursor];
+      });
+  
+      if (cursor < str.length - 1) {
+        setTimeout(function () {
+          typeString($target, str, cursor + 1, delay, cb);
+        }, delay);
+      }
+      else {
+        cb();
+      }
+    }
+  
+    // clears the string
+    //
+    // @param jQuery $target
+    // @param Numeric delay
+    // @param Function cb
+    // @return void
+    function deleteString($target, delay, cb) {
+      var length;
+  
+      $target.html(function (_, html) {
+        length = html.length;
+        return html.substr(0, length - 1);
+      });
+  
+      if (length > 1) {
+        setTimeout(function () {
+          deleteString($target, delay, cb);
+        }, delay);
+      }
+      else {
+        cb();
+      }
+    }
+  
+    // jQuery hook
+    $.fn.extend({
+      teletype: function (opts) {
+        var settings = $.extend({}, $.teletype.defaults, opts);
+  
+        return $(this).each(function () {
+          (function loop($tar, idx) {
+            // type
+            typeString($tar, settings.text[idx], 0, settings.delay, function () {
+              // delete
+              setTimeout(function () {
+                deleteString($tar, settings.delay, function () {
+                  loop($tar, (idx + 1) % settings.text.length);
+                });
+              }, settings.pause);
+            });
+  
+          }($(this), 0));
+        });
+      }
+    });
+  
+    // plugin defaults  
+    $.extend({
+      teletype: {
+        defaults: {
+          delay: 100,
+          pause: 2500,
+          text: []
+        }
+      }
+    });
+  }(jQuery));

html/js/ui/ui.js

@@ -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();
+});