From abc4690949e8ea74733ff29adf0150943bb50d13 Mon Sep 17 00:00:00 2001
From: Kalitsune <git@kalitsune.net>
Date: Sun, 12 May 2024 15:10:48 +0200
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A7=AD=20Fluid=20server=20selection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed the select and cancel buttons and made the buttons directly select the server
---
 app/assets/css/launcher.css      |  4 ---
 app/assets/js/scripts/overlay.js | 58 +++++++++++---------------------
 app/assets/lang/en_US.toml       |  2 --
 app/overlay.ejs                  |  6 ----
 4 files changed, 19 insertions(+), 51 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 8b239311..cd304db6 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -3688,10 +3688,6 @@ input:checked + .toggleSwitchSlider:before {
     position: relative;
     background: rgba(131, 131, 131, 0.25);
 }
-.serverListing[selected] {
-    cursor: default;
-    opacity: 1.0;
-}
 .serverListing:hover,
 .serverListing:focus {
     outline: none;
diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js
index 0d6ab2ae..7d420981 100644
--- a/app/assets/js/scripts/overlay.js
+++ b/app/assets/js/scripts/overlay.js
@@ -169,26 +169,7 @@ function setDismissHandler(handler){
     }
 }
 
-/* Server Select View */
-
-document.getElementById('serverSelectConfirm').addEventListener('click', async () => {
-    const listings = document.getElementsByClassName('serverListing')
-    for(let i=0; i<listings.length; i++){
-        if(listings[i].hasAttribute('selected')){
-            const serv = (await DistroAPI.getDistribution()).getServerById(listings[i].getAttribute('servid'))
-            updateSelectedServer(serv)
-            refreshServerStatus(true)
-            toggleOverlay(false)
-            return
-        }
-    }
-    // None are selected? Not possible right? Meh, handle it.
-    if(listings.length > 0){
-        const serv = (await DistroAPI.getDistribution()).getServerById(listings[i].getAttribute('servid'))
-        updateSelectedServer(serv)
-        toggleOverlay(false)
-    }
-})
+/* Account Select View */
 
 document.getElementById('accountSelectConfirm').addEventListener('click', async () => {
     const listings = document.getElementsByClassName('accountListing')
@@ -218,10 +199,7 @@ document.getElementById('accountSelectConfirm').addEventListener('click', async
     }
 })
 
-// Bind server select cancel button.
-document.getElementById('serverSelectCancel').addEventListener('click', () => {
-    toggleOverlay(false)
-})
+// Bind account select cancel button.
 
 document.getElementById('accountSelectCancel').addEventListener('click', () => {
     $('#accountSelectContent').fadeOut(250, () => {
@@ -229,21 +207,23 @@ document.getElementById('accountSelectCancel').addEventListener('click', () => {
     })
 })
 
-function setServerListingHandlers(){
+// Make the Server Selection background clickable to close the overlay.
+let overlayContainer = document.getElementById('overlayContainer')
+overlayContainer.addEventListener('click', e => {
+    if(e.target === overlayContainer){
+        toggleOverlay(false)
+    }
+})
+
+async function setServerListingHandlers(){
     const listings = Array.from(document.getElementsByClassName('serverListing'))
-    listings.map((val) => {
-        val.onclick = e => {
-            if(val.hasAttribute('selected')){
-                return
-            }
-            const cListings = document.getElementsByClassName('serverListing')
-            for(let i=0; i<cListings.length; i++){
-                if(cListings[i].hasAttribute('selected')){
-                    cListings[i].removeAttribute('selected')
-                }
-            }
-            val.setAttribute('selected', '')
-            document.activeElement.blur()
+    listings.map(async (val) => {
+        val.onclick = async e => {
+            console.log(e)
+            const serv = (await DistroAPI.getDistribution()).getServerById(val.getAttribute('servid'))
+            updateSelectedServer(serv)
+            refreshServerStatus(true)
+            toggleOverlay(false)
         }
     })
 }
@@ -315,7 +295,7 @@ function populateAccountListings(){
 
 async function prepareServerSelectionList(){
     await populateServerListings()
-    setServerListingHandlers()
+    await setServerListingHandlers()
 }
 
 function prepareAccountSelectionList(){
diff --git a/app/assets/lang/en_US.toml b/app/assets/lang/en_US.toml
index b9f64cfb..57f4bc85 100644
--- a/app/assets/lang/en_US.toml
+++ b/app/assets/lang/en_US.toml
@@ -42,8 +42,6 @@ cancelButton = "Cancel"
 
 [ejs.overlay]
 serverSelectHeader = "Available Servers"
-serverSelectConfirm = "Select"
-serverSelectCancel = "Cancel"
 accountSelectHeader = "Select an Account"
 accountSelectConfirm = "Select"
 accountSelectCancel = "Cancel"
diff --git a/app/overlay.ejs b/app/overlay.ejs
index 7faab15b..e262ed62 100644
--- a/app/overlay.ejs
+++ b/app/overlay.ejs
@@ -6,12 +6,6 @@
                 <!-- Server listings populated here. -->
             </div>
         </div>
-        <div id="serverSelectActions">
-            <button id="serverSelectConfirm" class="overlayKeybindEnter" type="submit"><%- lang('overlay.serverSelectConfirm') %></button>
-            <div id="serverSelectCancelWrapper">
-                <button id="serverSelectCancel" class="overlayKeybindEsc"><%- lang('overlay.serverSelectCancel') %></button>
-            </div>
-        </div>
     </div>
     <div id="accountSelectContent" style="display: none;">
         <span id="accountSelectHeader"><%- lang('overlay.accountSelectHeader') %></span>

From 194f0365b2baec9b4736935566406d0622f90307 Mon Sep 17 00:00:00 2001
From: Kalitsune <git@kalitsune.net>
Date: Sun, 12 May 2024 16:19:51 +0200
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=91=A5=20Fluid=20account=20selection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Edited the account selection menu so that it can be oppened in "popup" mode, allowing similar behavior to the fluid server selection without disturbing the account selection already in place in case of an account validation failure. This new popup menu also adds a "manage accounts" button to open the settings in the same way the old account selection menu did
---
 app/assets/css/launcher.css       |  3 +-
 app/assets/js/scripts/landing.js  | 14 +++--
 app/assets/js/scripts/overlay.js  | 90 +++++++++++++++++++++++--------
 app/assets/js/scripts/uibinder.js |  4 +-
 app/assets/lang/en_US.toml        |  3 +-
 app/overlay.ejs                   |  1 +
 6 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index cd304db6..154705b4 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -3850,7 +3850,8 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Server selection confirm button styles. */
 #serverSelectConfirm,
-#accountSelectConfirm {
+#accountSelectConfirm,
+#accountSelectManage {
     background: none;
     border: 1px solid #ffffff;
     color: white;
diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js
index 1a1c1768..314a863b 100644
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@@ -133,14 +133,6 @@ document.getElementById('settingsMediaButton').onclick = async e => {
     switchView(getCurrentView(), VIEWS.settings)
 }
 
-// Bind avatar overlay button.
-document.getElementById('avatarOverlay').onclick = async e => {
-    await prepareSettings()
-    switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
-        settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
-    })
-}
-
 // Bind selected account
 function updateSelectedAccount(authUser){
     let username = Lang.queryJS('landing.selectedAccount.noAccountSelected')
@@ -176,6 +168,12 @@ server_selection_button.onclick = async e => {
     await toggleServerSelection(true)
 }
 
+// Bind avatar overlay button.
+document.getElementById('avatarOverlay').onclick = async e => {
+    e.target.blur()
+    await toggleAccountSelection(true, true)
+}
+
 // Update Mojang Status Color
 const refreshMojangStatuses = async function(){
     loggerLanding.info('Refreshing Mojang Statuses..')
diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js
index 7d420981..551d2dac 100644
--- a/app/assets/js/scripts/overlay.js
+++ b/app/assets/js/scripts/overlay.js
@@ -15,6 +15,9 @@ function isOverlayVisible(){
 
 let overlayHandlerContent
 
+let overlayContainer = document.getElementById('overlayContainer')
+let accountSelectContent = document.getElementById('accountSelectContent')
+
 /**
  * Overlay keydown handler for a non-dismissable overlay.
  * 
@@ -76,6 +79,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
     bindOverlayKeys(toggleState, content, dismissable)
     if(toggleState){
         document.getElementById('main').setAttribute('overlay', true)
+        overlayContainer.setAttribute('content', content)
+
         // Make things untabbable.
         $('#main *').attr('tabindex', '-1')
         $('#' + content).parent().children().hide()
@@ -95,6 +100,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
         })
     } else {
         document.getElementById('main').removeAttribute('overlay')
+        overlayContainer.removeAttribute('content')
+
         // Make things tabbable.
         $('#main *').removeAttr('tabindex')
         $('#overlayContainer').fadeOut({
@@ -122,6 +129,22 @@ async function toggleServerSelection(toggleState){
     toggleOverlay(toggleState, true, 'serverSelectContent')
 }
 
+async function toggleAccountSelection(toggleState, popup = false){    
+    if (popup) {
+        // set the popup=true attribute to the accountSelectContent div and set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function
+        accountSelectContent.setAttribute('popup', 'true')
+        document.getElementById('accountSelectActions').style.display = 'none'
+    } else {
+        // remove the popup attribute and set the accountSelectActions div to display: block, this is not done while closing the overlay because of the fadeOut effect
+        accountSelectContent.removeAttribute('popup')
+        document.getElementById('accountSelectActions').style.display = 'block'
+    }
+
+    // show the overlay
+    await prepareAccountSelectionList()
+    toggleOverlay(toggleState, true, 'accountSelectContent')
+}
+
 /**
  * Set the content of the overlay.
  * 
@@ -169,8 +192,9 @@ function setDismissHandler(handler){
     }
 }
 
-/* Account Select View */
+/* Account Select button */
 
+// Bind account select confirm button.
 document.getElementById('accountSelectConfirm').addEventListener('click', async () => {
     const listings = document.getElementsByClassName('accountListing')
     for(let i=0; i<listings.length; i++){
@@ -200,18 +224,30 @@ document.getElementById('accountSelectConfirm').addEventListener('click', async
 })
 
 // Bind account select cancel button.
-
 document.getElementById('accountSelectCancel').addEventListener('click', () => {
     $('#accountSelectContent').fadeOut(250, () => {
         $('#overlayContent').fadeIn(250)
     })
 })
 
+// Bind account select manage button.
+document.getElementById('accountSelectManage').addEventListener('click', async () => {
+    await prepareSettings()
+    switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
+        settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
+    })
+    toggleOverlay(false)
+})
+
 // Make the Server Selection background clickable to close the overlay.
-let overlayContainer = document.getElementById('overlayContainer')
 overlayContainer.addEventListener('click', e => {
-    if(e.target === overlayContainer){
-        toggleOverlay(false)
+    if (e.target === overlayContainer) {
+        // This function only works for the server selection overlay or if the account selection is a popup
+        if(overlayContainer.getAttribute('content') === 'serverSelectContent') {
+            toggleOverlay(false)
+        } else if(overlayContainer.getAttribute('content') === 'accountSelectContent' && accountSelectContent.hasAttribute('popup')) {
+            toggleOverlay(false)
+        }
     }
 })
 
@@ -219,7 +255,6 @@ async function setServerListingHandlers(){
     const listings = Array.from(document.getElementsByClassName('serverListing'))
     listings.map(async (val) => {
         val.onclick = async e => {
-            console.log(e)
             const serv = (await DistroAPI.getDistribution()).getServerById(val.getAttribute('servid'))
             updateSelectedServer(serv)
             refreshServerStatus(true)
@@ -228,21 +263,34 @@ async function setServerListingHandlers(){
     })
 }
 
-function setAccountListingHandlers(){
+async function setAccountListingHandlers(){
     const listings = Array.from(document.getElementsByClassName('accountListing'))
-    listings.map((val) => {
-        val.onclick = e => {
-            if(val.hasAttribute('selected')){
-                return
-            }
-            const cListings = document.getElementsByClassName('accountListing')
-            for(let i=0; i<cListings.length; i++){
-                if(cListings[i].hasAttribute('selected')){
-                    cListings[i].removeAttribute('selected')
+    listings.map(async (val) => {
+        val.onclick = async e => {
+            // popup mode
+            if(accountSelectContent.hasAttribute('popup')){
+                const authAcc = ConfigManager.setSelectedAccount(val.getAttribute('uuid'))
+                ConfigManager.save()
+                updateSelectedAccount(authAcc)
+                if(getCurrentView() === VIEWS.settings) {
+                    await prepareSettings()
                 }
+                toggleOverlay(false)
+                validateSelectedAccount()
+                return    
+            } else {
+                if(val.hasAttribute('selected')){
+                    return
+                }
+                const cListings = document.getElementsByClassName('accountListing')
+                for(let i=0; i<cListings.length; i++){
+                    if(cListings[i].hasAttribute('selected')){
+                        cListings[i].removeAttribute('selected')
+                    }
+                }
+                val.setAttribute('selected', '')
+                document.activeElement.blur()
             }
-            val.setAttribute('selected', '')
-            document.activeElement.blur()
         }
     })
 }
@@ -284,7 +332,7 @@ function populateAccountListings(){
     const accounts = Array.from(Object.keys(accountsObj), v=>accountsObj[v])
     let htmlString = ''
     for(let i=0; i<accounts.length; i++){
-        htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${i===0 ? 'selected' : ''}>
+        htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${!i && !accountSelectContent.hasAttribute("popup") ? 'selected' : ''}>
             <img src="https://mc-heads.net/head/${accounts[i].uuid}/40">
             <div class="accountListingName">${accounts[i].displayName}</div>
         </button>`
@@ -298,7 +346,7 @@ async function prepareServerSelectionList(){
     await setServerListingHandlers()
 }
 
-function prepareAccountSelectionList(){
+async function prepareAccountSelectionList(){
     populateAccountListings()
-    setAccountListingHandlers()
+    await setAccountListingHandlers()
 }
\ No newline at end of file
diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js
index 5fe79df5..eaf5dd7a 100644
--- a/app/assets/js/scripts/uibinder.js
+++ b/app/assets/js/scripts/uibinder.js
@@ -381,9 +381,9 @@ async function validateSelectedAccount(){
                 toggleOverlay(false)
                 switchView(getCurrentView(), VIEWS.loginOptions)
             })
-            setDismissHandler(() => {
+            setDismissHandler(async () => {
                 if(accLen > 1){
-                    prepareAccountSelectionList()
+                    await prepareAccountSelectionList()
                     $('#overlayContent').fadeOut(250, () => {
                         bindOverlayKeys(true, 'accountSelectContent', true)
                         $('#accountSelectContent').fadeIn(250)
diff --git a/app/assets/lang/en_US.toml b/app/assets/lang/en_US.toml
index 57f4bc85..d29cd70a 100644
--- a/app/assets/lang/en_US.toml
+++ b/app/assets/lang/en_US.toml
@@ -1,7 +1,7 @@
 [ejs.landing]
 updateAvailableTooltip = "Update Available"
 usernamePlaceholder = "Username"
-usernameEditButton = "Edit"
+usernameEditButton = "Switch"
 settingsTooltip = "Settings"
 serverStatus = "SERVER"
 serverStatusPlaceholder = "OFFLINE"
@@ -45,6 +45,7 @@ serverSelectHeader = "Available Servers"
 accountSelectHeader = "Select an Account"
 accountSelectConfirm = "Select"
 accountSelectCancel = "Cancel"
+accountSelectManage = "Manage Accounts"
 
 [ejs.settings]
 navHeaderText = "Settings"
diff --git a/app/overlay.ejs b/app/overlay.ejs
index e262ed62..95a90ed6 100644
--- a/app/overlay.ejs
+++ b/app/overlay.ejs
@@ -20,6 +20,7 @@
                 <button id="accountSelectCancel" class="overlayKeybindEsc"><%- lang('overlay.accountSelectCancel') %></button>
             </div>
         </div>
+        <button id="accountSelectManage" class="overlayKeybindEnter" type="submit"><%- lang('overlay.accountSelectManage') %></button>
     </div>
     <div id="overlayContent">
         <span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>

From ac8a325c37c59fe8212ca19005f0ff2d19e1793a Mon Sep 17 00:00:00 2001
From: Kalitsune <git@kalitsune.net>
Date: Tue, 21 May 2024 17:20:49 +0200
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8C=90=20Make=20the=20popup=20overlay?=
 =?UTF-8?q?=20more=20generic=20and=20fixed=20the=20esc=20key=20not=20closi?=
 =?UTF-8?q?ng=20the=20overlay=20properly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/js/scripts/overlay.js | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js
index 551d2dac..5caf6c6c 100644
--- a/app/assets/js/scripts/overlay.js
+++ b/app/assets/js/scripts/overlay.js
@@ -25,7 +25,11 @@ let accountSelectContent = document.getElementById('accountSelectContent')
  */
 function overlayKeyHandler (e){
     if(e.key === 'Enter' || e.key === 'Escape'){
-        document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click()
+        if (overlayContainer.hasAttribute('popup')) {
+            toggleOverlay(false)
+        } else {
+            document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click()
+        }
     }
 }
 /**
@@ -67,8 +71,9 @@ function bindOverlayKeys(state, content, dismissable){
  * @param {boolean} toggleState True to display, false to hide.
  * @param {boolean} dismissable Optional. True to show the dismiss option, otherwise false.
  * @param {string} content Optional. The content div to be shown.
+ * @param {boolean} popup Optional. True to show the overlay as a popup that is easily dismissable and interactible.
  */
-function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent'){
+function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent', popup = false){
     if(toggleState == null){
         toggleState = !document.getElementById('main').hasAttribute('overlay')
     }
@@ -80,6 +85,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
     if(toggleState){
         document.getElementById('main').setAttribute('overlay', true)
         overlayContainer.setAttribute('content', content)
+        overlayContainer.setAttribute('popup', popup)
 
         // Make things untabbable.
         $('#main *').attr('tabindex', '-1')
@@ -126,23 +132,21 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
 
 async function toggleServerSelection(toggleState){
     await prepareServerSelectionList()
-    toggleOverlay(toggleState, true, 'serverSelectContent')
+    toggleOverlay(toggleState, false, 'serverSelectContent', true)
 }
 
 async function toggleAccountSelection(toggleState, popup = false){    
     if (popup) {
-        // set the popup=true attribute to the accountSelectContent div and set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function
-        accountSelectContent.setAttribute('popup', 'true')
+        // set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function
         document.getElementById('accountSelectActions').style.display = 'none'
     } else {
-        // remove the popup attribute and set the accountSelectActions div to display: block, this is not done while closing the overlay because of the fadeOut effect
-        accountSelectContent.removeAttribute('popup')
+        // set the overlayContainer div to display: block, this is not done while closing the overlay because of the fadeOut effect
         document.getElementById('accountSelectActions').style.display = 'block'
     }
 
     // show the overlay
     await prepareAccountSelectionList()
-    toggleOverlay(toggleState, true, 'accountSelectContent')
+    toggleOverlay(toggleState, false, 'accountSelectContent', popup)
 }
 
 /**
@@ -242,10 +246,8 @@ document.getElementById('accountSelectManage').addEventListener('click', async (
 // Make the Server Selection background clickable to close the overlay.
 overlayContainer.addEventListener('click', e => {
     if (e.target === overlayContainer) {
-        // This function only works for the server selection overlay or if the account selection is a popup
-        if(overlayContainer.getAttribute('content') === 'serverSelectContent') {
-            toggleOverlay(false)
-        } else if(overlayContainer.getAttribute('content') === 'accountSelectContent' && accountSelectContent.hasAttribute('popup')) {
+        // This function only works if the overlay is a popup
+        if(overlayContainer.hasAttribute('popup')) {
             toggleOverlay(false)
         }
     }
@@ -268,7 +270,7 @@ async function setAccountListingHandlers(){
     listings.map(async (val) => {
         val.onclick = async e => {
             // popup mode
-            if(accountSelectContent.hasAttribute('popup')){
+            if(overlayContainer.hasAttribute('popup')){
                 const authAcc = ConfigManager.setSelectedAccount(val.getAttribute('uuid'))
                 ConfigManager.save()
                 updateSelectedAccount(authAcc)
@@ -332,7 +334,7 @@ function populateAccountListings(){
     const accounts = Array.from(Object.keys(accountsObj), v=>accountsObj[v])
     let htmlString = ''
     for(let i=0; i<accounts.length; i++){
-        htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${!i && !accountSelectContent.hasAttribute("popup") ? 'selected' : ''}>
+        htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${!i && !overlayContainer.hasAttribute("popup") ? 'selected' : ''}>
             <img src="https://mc-heads.net/head/${accounts[i].uuid}/40">
             <div class="accountListingName">${accounts[i].displayName}</div>
         </button>`