Display launcher version in UI

Adds a version display element to the bottom right of the UI, fetching the version from package.json via a new IPC handler. Updates main.js, preload.js, and ui.js to support retrieving and displaying the version, and adds relevant styles in style.css.

GUI/index.html

@@ -658,6 +658,11 @@
         </div>
     </div>
 
+    <div class="version-display-bottom">
+        <i class="fas fa-code-branch"></i>
+        <span id="launcherVersion">Loading...</span>
+    </div>
+
     <footer class="fixed bottom-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-sm px-4 py-2">
         <div class="flex items-center justify-center text-xs text-gray-400">
             <span>Made by <a href="https://github.com/amiayweb" target="_blank"

GUI/js/ui.js

@@ -500,10 +500,26 @@ function setupUI() {
   setupSidebarLogo();
   setupAnimations();
   setupFirstLaunchHandlers();
+  loadLauncherVersion();
 
   document.body.focus();
 }
 
+// Load launcher version from package.json
+async function loadLauncherVersion() {
+  try {
+    if (window.electronAPI && window.electronAPI.getVersion) {
+      const version = await window.electronAPI.getVersion();
+      const versionElement = document.getElementById('launcherVersion');
+      if (versionElement) {
+        versionElement.textContent = `v${version}`;
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load launcher version:', error);
+  }
+}
+
 window.LauncherUI = {
   showPage,
   setActiveNav,

GUI/style.css

@@ -216,6 +216,63 @@ body {
     border-color: rgba(147, 51, 234, 0.3);
 }
 
+.version-display {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.75rem;
+    color: #9ca3af;
+    pointer-events: auto;
+    transition: all 0.3s ease;
+}
+
+.version-display i {
+    color: #9333ea;
+    font-size: 0.875rem;
+}
+
+.version-display:hover {
+    background: rgba(0, 0, 0, 0.6);
+    border-color: rgba(147, 51, 234, 0.3);
+    color: #ffffff;
+}
+
+.version-display-bottom {
+    position: fixed;
+    bottom: 3rem;
+    right: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.75rem;
+    color: #9ca3af;
+    z-index: 45;
+    transition: all 0.3s ease;
+}
+
+.version-display-bottom i {
+    color: #9333ea;
+    font-size: 0.875rem;
+}
+
+.version-display-bottom:hover {
+    background: rgba(0, 0, 0, 0.8);
+    border-color: rgba(147, 51, 234, 0.3);
+    color: #ffffff;
+}
+
 
 .user-info {
     display: flex;

main.js

@@ -199,7 +199,9 @@ function createWindow() {
 }
 
 app.whenReady().then(async () => {
+  const packageJson = require('./package.json');
   console.log('=== HYTALE F2P LAUNCHER STARTED ===');
+  console.log('Launcher version:', packageJson.version);
   console.log('Platform:', process.platform);
   console.log('Architecture:', process.arch);
   console.log('Electron version:', process.versions.electron);
@@ -865,6 +867,11 @@ ipcMain.handle('window-maximize', () => {
   }
 });
 
+ipcMain.handle('get-version', () => {
+  const packageJson = require('./package.json');
+  return packageJson.version;
+});
+
 ipcMain.handle('get-log-directory', () => {
   return logger.getLogDirectory();
 });

preload.js

@@ -6,6 +6,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   closeWindow: () => ipcRenderer.invoke('window-close'),
   minimizeWindow: () => ipcRenderer.invoke('window-minimize'),
   maximizeWindow: () => ipcRenderer.invoke('window-maximize'),
+  getVersion: () => ipcRenderer.invoke('get-version'),
   saveUsername: (username) => ipcRenderer.invoke('save-username', username),
   loadUsername: () => ipcRenderer.invoke('load-username'),
   saveChatUsername: (chatUsername) => ipcRenderer.invoke('save-chat-username', chatUsername),