Merge pull request #121 from dtentiion/main

Fix UI overflow, add classic MC launcher UI, text truncation

index.html

@@ -42,7 +42,15 @@
         </div>
 
         <div class="content-area" style="flex-direction: row; align-items: stretch; padding: 0;">
-            
+
+            <!-- Classic Mode: Logo + Splash (only visible in classic theme) -->
+            <div class="classic-logo-area" id="classic-logo-area">
+                <div style="position: relative;">
+                    <img src="minecraftlogo.png" class="mc-logo-img" alt="Minecraft Logo" style="margin-bottom: 0; margin-top: 0;">
+                    <div id="classic-splash-text" class="splash-text">Splash!</div>
+                </div>
+            </div>
+
             <!-- Left Side: Main Menu -->
             <div class="menu-column" style="flex: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 5;">
                 <div class="relative">
@@ -239,6 +247,13 @@
                 </label>
             </div>
 
+            <div class="mc-input-group">
+                <label class="mc-label" style="display: flex; align-items: center; cursor: pointer;">
+                    <input type="checkbox" id="classic-theme-checkbox" class="nav-item" style="width: 24px; height: 24px; margin-right: 12px; cursor: pointer;" tabindex="0">
+                    Use Classic Minecraft Launcher UI
+                </label>
+            </div>
+
             <div class="flex gap-4 w-full mt-4">
                 <div id="btn-options-done" class="btn-mc flex-grow nav-item" onclick="saveOptions()" tabindex="0">DONE</div>
                 <div id="btn-options-cancel" class="btn-mc flex-grow nav-item" onclick="toggleOptions(false)" tabindex="0">CANCEL</div>
@@ -330,6 +345,47 @@
         </div>
     </div>
 
+    <!-- Classic Launcher Bottom Bar (only shown when classic theme is active) -->
+    <div id="classic-bottom-bar" class="classic-bottom-bar">
+        <!-- Left: Profile Section -->
+        <div class="classic-profile-section">
+            <div class="classic-avatar" id="classic-avatar">S</div>
+            <div class="classic-profile-info">
+                <div class="classic-username-label">Logged in as</div>
+                <div class="classic-username-display" id="classic-username-display">Player</div>
+            </div>
+            <div class="classic-mini-btn" onclick="toggleProfile(true)" title="Edit Profile">Edit Profile</div>
+            <div class="classic-mini-btn" onclick="openSkinManager()" title="Change Skin">Skin</div>
+        </div>
+
+        <!-- Center: Play Button -->
+        <div class="classic-center-section">
+            <div class="btn-mc btn-play classic-play-btn nav-item" id="classic-btn-play" onclick="launchGame()" tabindex="0">PLAY</div>
+        </div>
+
+        <!-- Right: Version + Nav -->
+        <div class="classic-right-section">
+            <div class="classic-version-row">
+                <span class="version-label" style="font-size: 16px; white-space: nowrap;">Version:</span>
+                <div id="classic-version-select-box" class="version-select-box nav-item" tabindex="0" style="height: 40px; font-size: 16px; flex-grow: 1; padding-right: 51px;">
+                    <span id="classic-version-display">Loading...</span>
+                    <div class="select-arrow" style="width: 36px;">▼</div>
+                    <select id="classic-version-select" class="hidden-select" onchange="syncVersionFromClassic()">
+                        <option>Loading...</option>
+                    </select>
+                </div>
+                <div class="btn-mc btn-mini nav-item" onclick="checkForUpdatesManual()" title="Check for Updates" tabindex="0" style="width: 40px !important; height: 40px; max-width: 40px !important;">
+                    <img src="restart.png" alt="Update">
+                </div>
+            </div>
+            <div class="classic-nav-links">
+                <span class="classic-link nav-item" onclick="toggleInstances(true)" tabindex="0">Instances</span>
+                <span class="classic-link nav-item" onclick="toggleServers(true)" tabindex="0">Servers</span>
+                <span class="classic-link nav-item" onclick="toggleOptions(true)" tabindex="0">Options</span>
+            </div>
+        </div>
+    </div>
+
     <div id="toast">NOTIFICATION</div>
 
     <div id="music-toggle" class="music-btn nav-item" onclick="toggleMusic()" title="Toggle Music" tabindex="0">

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "legacylauncher",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "legacylauncher",
-      "version": "2.2.0",
+      "version": "3.0.0",
       "license": "ISC",
       "dependencies": {
         "electron-store": "^6.0.1",

renderer.js

@@ -479,6 +479,7 @@ window.onload = async () => {
         });
 
         // Initialize features
+        await loadTheme();
         fetchGitHubData();
         checkForLauncherUpdates();
         loadSplashText();
@@ -684,45 +685,42 @@ async function checkIsInstalled(tag) {
 
 async function updatePlayButtonText() {
     const btn = document.getElementById('btn-play-main');
+    const classicBtn = document.getElementById('classic-btn-play');
     if (!btn || isProcessing) return;
 
+    let label, disabled, running;
+
     if (isGameRunning) {
-        btn.textContent = "GAME RUNNING";
+        label = "GAME RUNNING"; running = true; disabled = false;
-        btn.classList.add('running');
-        return;
     } else {
-        btn.classList.remove('running');
+        running = false;
-    }
+        if (releasesData.length === 0) {
-
+            const fullPath = await getInstalledPath();
-    // Offline / No Data Case
+            if (currentInstance.installedTag && fs.existsSync(fullPath)) {
-    if (releasesData.length === 0) {
+                label = "PLAY"; disabled = false;
-        const fullPath = await getInstalledPath();
+            } else {
-        if (currentInstance.installedTag && fs.existsSync(fullPath)) {
+                label = "OFFLINE"; disabled = true;
-            btn.textContent = "PLAY";
+            }
-            btn.classList.remove('disabled');
         } else {
-            btn.textContent = "OFFLINE";
+            const release = releasesData[currentReleaseIndex];
-            btn.classList.add('disabled');
+            if (!release) {
-        }
+                label = "PLAY"; disabled = false;
-        return;
+            } else if (await checkIsInstalled(release.tag_name)) {
-    }
+                label = "PLAY"; disabled = false;
-
+            } else {
-    const release = releasesData[currentReleaseIndex];
+                const fullPath = await getInstalledPath();
-    if (!release) {
+                label = fs.existsSync(fullPath) ? "UPDATE" : "INSTALL";
-        btn.textContent = "PLAY";
+                disabled = false;
-        return;
+            }
-    }
-
-    if (await checkIsInstalled(release.tag_name)) {
-        btn.textContent = "PLAY";
-    } else {
-        const fullPath = await getInstalledPath();
-        if (fs.existsSync(fullPath)) {
-            btn.textContent = "UPDATE";
-        } else {
-            btn.textContent = "INSTALL";
         }
     }
+
+    [btn, classicBtn].forEach(b => {
+        if (!b) return;
+        b.textContent = label;
+        b.classList.toggle('running', running);
+        if (disabled) b.classList.add('disabled'); else b.classList.remove('disabled');
+    });
 }
 
 function setGameRunning(running) {
@@ -850,6 +848,7 @@ function populateVersions() {
         if(index === 0 && display) display.textContent = opt.textContent;
     });
     currentReleaseIndex = 0;
+    syncClassicVersionSelect();
     updatePlayButtonText();
 }
 
@@ -885,6 +884,7 @@ function updateSelectedRelease() {
     if (!select) return;
     currentReleaseIndex = select.value;
     document.getElementById('current-version-display').textContent = select.options[select.selectedIndex].text;
+    syncClassicVersionSelect();
     updatePlayButtonText();
 }
 
@@ -1036,15 +1036,18 @@ async function launchLocalClient() {
 function setProcessingState(active) {
     isProcessing = active;
     const playBtn = document.getElementById('btn-play-main');
+    const classicPlayBtn = document.getElementById('classic-btn-play');
     const optionsBtn = document.getElementById('btn-options');
     const progressContainer = document.getElementById('progress-container');
     if (active) {
         if (playBtn) playBtn.classList.add('disabled');
+        if (classicPlayBtn) classicPlayBtn.classList.add('disabled');
         if (optionsBtn) optionsBtn.classList.add('disabled');
         if (progressContainer) progressContainer.style.display = 'flex';
         updateProgress(0, "Preparing...");
     } else {
         if (playBtn) playBtn.classList.remove('disabled');
+        if (classicPlayBtn) classicPlayBtn.classList.remove('disabled');
         if (optionsBtn) optionsBtn.classList.remove('disabled');
         if (progressContainer) progressContainer.style.display = 'none';
     }
@@ -1135,7 +1138,12 @@ function downloadFile(url, destPath) {
 function toggleOptions(show) {
     if (isProcessing) return;
     const modal = document.getElementById('options-modal');
-    if (show) { document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; }
+    if (show) {
+        // Sync classic theme checkbox to current state
+        const cb = document.getElementById('classic-theme-checkbox');
+        if (cb) cb.checked = document.body.classList.contains('classic-theme');
+        document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1';
+    }
     else { modal.style.opacity = '0'; setTimeout(() => modal.style.display = 'none', 300); }
 }
 
@@ -1246,6 +1254,9 @@ async function saveOptions() {
         currentInstance.compatLayer = compatSelect.value;
         currentInstance.customCompatPath = customProtonPath;
     }
+    const isClassic = document.getElementById('classic-theme-checkbox')?.checked || false;
+    await Store.set('legacy_classic_theme', isClassic);
+    applyTheme(isClassic);
     await saveInstancesToStore(); toggleOptions(false); fetchGitHubData(); updatePlayButtonText(); showToast("Settings Saved");
 }
 
@@ -1255,6 +1266,7 @@ async function saveProfile() {
         username = username.substring(0, 16);
     }
     await Store.set('legacy_username', username);
+    updateClassicUsername();
     toggleProfile(false); showToast("Profile Updated");
 }
 
@@ -1298,10 +1310,23 @@ function updateCompatDisplay() {
 }
 
 function toggleSidebar() {
-    const sidebar = document.querySelector('.sidebar'); const toggleIcon = document.getElementById('sidebar-toggle-icon');
+    const sidebar = document.querySelector('.sidebar');
-    sidebar.classList.toggle('collapsed');
+    const toggleIcon = document.getElementById('sidebar-toggle-icon');
-    if (sidebar.classList.contains('collapsed')) { toggleIcon.textContent = '▶'; toggleIcon.title = 'Expand Patch Notes'; }
+    const list = document.getElementById('updates-list');
-    else { toggleIcon.textContent = '◀'; toggleIcon.title = 'Collapse Patch Notes'; }
+
+    if (sidebar.classList.contains('collapsed')) {
+        list.style.display = 'flex';
+        requestAnimationFrame(() => {
+            sidebar.classList.remove('collapsed');
+            toggleIcon.textContent = '◀';
+            toggleIcon.title = 'Collapse Patch Notes';
+        });
+    } else {
+        list.style.display = '';
+        sidebar.classList.add('collapsed');
+        toggleIcon.textContent = '▶';
+        toggleIcon.title = 'Expand Patch Notes';
+    }
 }
 
 function isNewerVersion(latest, current) {
@@ -1383,6 +1408,61 @@ async function loadSplashText() {
         console.error("Failed to load splash text:", e);
         splashEl.textContent = "Welcome!";
     }
+    // Also sync classic splash text
+    const classicSplash = document.getElementById('classic-splash-text');
+    if (classicSplash && splashEl) classicSplash.textContent = splashEl.textContent;
+}
+
+// ============================================================
+// CLASSIC LAUNCHER THEME FUNCTIONS
+// ============================================================
+
+async function loadTheme() {
+    const isClassic = await Store.get('legacy_classic_theme', false);
+    const cb = document.getElementById('classic-theme-checkbox');
+    if (cb) cb.checked = isClassic;
+    applyTheme(isClassic);
+}
+
+function applyTheme(isClassic) {
+    document.body.classList.toggle('classic-theme', isClassic);
+    if (isClassic) {
+        syncClassicVersionSelect();
+        updateClassicUsername();
+    }
+}
+
+async function updateClassicUsername() {
+    const username = await Store.get('legacy_username', "Player");
+    const display = document.getElementById('classic-username-display');
+    const avatar = document.getElementById('classic-avatar');
+    if (display) display.textContent = username || "Player";
+    if (avatar) avatar.textContent = (username || "P")[0].toUpperCase();
+}
+
+function syncClassicVersionSelect() {
+    const mainSelect = document.getElementById('version-select');
+    const classicSelect = document.getElementById('classic-version-select');
+    const classicDisplay = document.getElementById('classic-version-display');
+    if (!mainSelect || !classicSelect) return;
+    // Copy options from main to classic
+    classicSelect.innerHTML = mainSelect.innerHTML;
+    classicSelect.selectedIndex = mainSelect.selectedIndex;
+    if (classicDisplay && classicSelect.selectedIndex >= 0) {
+        classicDisplay.textContent = classicSelect.options[classicSelect.selectedIndex]?.text || "Loading...";
+    }
+}
+
+function syncVersionFromClassic() {
+    const classicSelect = document.getElementById('classic-version-select');
+    const classicDisplay = document.getElementById('classic-version-display');
+    const mainSelect = document.getElementById('version-select');
+    if (!classicSelect || !mainSelect) return;
+    mainSelect.selectedIndex = classicSelect.selectedIndex;
+    if (classicDisplay && classicSelect.selectedIndex >= 0) {
+        classicDisplay.textContent = classicSelect.options[classicSelect.selectedIndex]?.text || "";
+    }
+    updateSelectedRelease();
 }
 
 async function toggleSnapshots(show, id = null) {
@@ -1565,6 +1645,7 @@ window.rollbackToSnapshot = rollbackToSnapshot;
 window.deleteSnapshot = deleteSnapshot;
 window.createSnapshotManual = createSnapshotManual;
 window.toggleSnapshots = toggleSnapshots;
+window.syncVersionFromClassic = syncVersionFromClassic;
 // Desktop shortcut for Linux AppImage
 function ensureDesktopShortcut() {
   if (typeof process === 'undefined' || process.platform !== 'linux') return;

style.css

@@ -233,6 +233,9 @@ body {
     line-height: 1.6;
     white-space: pre-wrap;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    overflow: hidden;
 }
 
 .pn-body li {
@@ -420,21 +423,30 @@ body {
     border: 2px solid #555;
     display: flex;
     align-items: center;
-    padding: 0 15px 6px 15px;
+    padding: 0 63px 6px 15px;
     color: white;
     font-size: 24px;
     cursor: pointer;
     position: relative;
     transition: border-color 0.2s;
+    overflow: hidden;
 }
 
 .version-select-box:hover {
     border-color: #fff;
 }
 
+#current-version-display,
+#classic-version-display {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+}
+
 .select-arrow {
     width: 48px;
-    height: 52px;
     background: #6e6e6e;
     border-left: 2px solid #555;
     display: flex;
@@ -443,6 +455,8 @@ body {
     color: white;
     position: absolute;
     right: 0;
+    top: 0;
+    bottom: 0;
 }
 
 .progress-container {
@@ -724,3 +738,289 @@ select.hidden-select {
 ::-webkit-scrollbar-thumb:hover {
     background: #7e7e7e;
 }
+
+/* ============================================================
+   CLASSIC MINECRAFT LAUNCHER THEME
+   Applied when <body class="classic-theme"> is set
+   ============================================================ */
+
+/* --- Classic Bottom Bar (hidden by default) --- */
+.classic-bottom-bar {
+    display: none;
+    height: 82px;
+    min-height: 82px;
+    background: linear-gradient(to bottom, #1a1a1a 0%, #0d0d0d 100%);
+    border-top: 3px solid #000;
+    box-shadow: inset 0 2px 0 rgba(255,255,255,0.07);
+    align-items: center;
+    padding: 0 16px;
+    gap: 16px;
+    z-index: 200;
+    flex-shrink: 0;
+}
+
+/* Classic Logo Area (hidden by default, shown in classic mode) */
+.classic-logo-area {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding-top: 30px;
+    pointer-events: none;
+}
+
+/* ---- Show/hide elements in classic mode ---- */
+body.classic-theme .classic-bottom-bar {
+    display: flex;
+}
+
+body.classic-theme .classic-logo-area {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    z-index: 3;
+    justify-content: center;
+    padding-top: 18px;
+}
+
+body.classic-theme .classic-logo-area .mc-logo-img {
+    width: 480px;
+    margin-top: 0;
+    margin-bottom: 0;
+    filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.9));
+}
+
+body.classic-theme .classic-logo-area .splash-text {
+    top: 60%;
+    left: 88%;
+    font-size: 17px;
+}
+
+/* ---- Classic mode layout restructure ---- */
+body.classic-theme {
+    flex-direction: column;
+}
+
+body.classic-theme .main-wrapper {
+    flex: 1;
+    min-height: 0;
+}
+
+/* Force sidebar to always be expanded in classic mode */
+body.classic-theme .sidebar {
+    width: 320px !important;
+    padding: 20px 18px !important;
+    background: rgba(0, 0, 0, 0.82) !important;
+    border-right: 3px solid #000 !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+body.classic-theme .sidebar.collapsed {
+    width: 320px !important;
+    padding: 20px 18px !important;
+}
+
+body.classic-theme .sidebar.collapsed #updates-list {
+    display: flex !important;
+}
+
+body.classic-theme .sidebar.collapsed .sidebar-title {
+    border-bottom: 2px solid #555 !important;
+    margin-bottom: 20px !important;
+    justify-content: space-between !important;
+    padding-bottom: 12px !important;
+}
+
+body.classic-theme .sidebar.collapsed #sidebar-title-text {
+    display: block !important;
+}
+
+body.classic-theme .sidebar.collapsed #sidebar-toggle-icon {
+    font-size: 24px !important;
+}
+
+body.classic-theme .sidebar-title {
+    font-size: 24px;
+    color: #aaa;
+    text-shadow: 1px 1px 0 #000;
+    letter-spacing: 2px;
+}
+
+body.classic-theme #sidebar-title-text::before {
+    content: "NEWS — ";
+    color: #55ff55;
+    font-size: 14px;
+    letter-spacing: 3px;
+}
+
+/* Hide center menu column in classic mode */
+body.classic-theme .menu-column {
+    display: none !important;
+}
+
+/* Hide skin column in classic mode */
+body.classic-theme .skin-column {
+    display: none !important;
+}
+
+/* Content area in classic: full panorama, no center column */
+body.classic-theme .content-area {
+    position: relative;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Keep progress bar visible in classic mode */
+body.classic-theme .progress-container {
+    z-index: 100;
+}
+
+/* ---- Classic Bottom Bar Layout ---- */
+.classic-profile-section {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    flex: 0 0 auto;
+    max-width: 380px;
+}
+
+.classic-avatar {
+    width: 48px;
+    height: 48px;
+    background: #4CAF50;
+    border: 3px solid #000;
+    box-shadow: inset -2px -2px 0 #2a6b2a, inset 2px 2px 0 #7ecf7e;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    color: #fff;
+    font-family: 'Minecraft', monospace;
+    text-shadow: 2px 2px 0 #000;
+    flex-shrink: 0;
+    image-rendering: pixelated;
+}
+
+.classic-profile-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.classic-username-label {
+    font-size: 11px;
+    color: #666;
+    letter-spacing: 1px;
+    white-space: nowrap;
+    text-transform: uppercase;
+}
+
+.classic-username-display {
+    font-size: 18px;
+    color: #eee;
+    text-shadow: 1px 1px 0 #000;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.classic-mini-btn {
+    background: #3a3a3a;
+    border: 2px solid #000;
+    color: #ccc;
+    font-size: 13px;
+    padding: 4px 10px 6px;
+    cursor: pointer;
+    font-family: 'Minecraft', monospace;
+    box-shadow: inset -2px -2px 0 #222, inset 2px 2px 0 #555;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.classic-mini-btn:hover {
+    background: #4a4a4a;
+    color: #fff;
+    outline: 1px solid #fff;
+}
+
+/* Center play section */
+.classic-center-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+}
+
+.classic-play-btn {
+    width: 260px !important;
+    height: 58px !important;
+    font-size: 30px !important;
+    margin-bottom: 0 !important;
+}
+
+/* Right section: version + nav links */
+.classic-right-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 6px;
+    flex: 0 0 auto;
+    max-width: 320px;
+}
+
+.classic-version-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+}
+
+.classic-nav-links {
+    display: flex;
+    gap: 14px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.classic-link {
+    color: #888;
+    font-size: 14px;
+    cursor: pointer;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    transition: color 0.15s;
+    padding: 2px 4px;
+}
+
+.classic-link:hover {
+    color: #fff;
+    text-shadow: 0 0 6px rgba(255,255,255,0.4);
+}
+
+.classic-link:focus {
+    color: #55ff55;
+    outline: none;
+}
+
+/* hide the toggle arrow and disable the click in classic mode */
+body.classic-theme #sidebar-toggle-icon {
+    display: none;
+}
+
+body.classic-theme .sidebar-title {
+    cursor: default;
+    pointer-events: none;
+}
+
+/* ---- Classic mode music button position ---- */
+body.classic-theme .music-btn {
+    bottom: 92px;
+}