Added basic functionality to server selection UI.

The server list is now dynamically generated based on the servers listed in the distribution index. Also, moved to event.key for key bindings as event.keyCode is deprecated.

app/assets/js/scripts/landing.js

@@ -113,7 +113,7 @@ function updateSelectedServer(serverName){
 updateSelectedServer(AssetGuard.getServerById(ConfigManager.getGameDirectory(), ConfigManager.getSelectedServer()).name)
 server_selection_button.addEventListener('click', (e) => {
     e.target.blur()
-    toggleOverlay(true, 'serverSelectContent')
+    toggleServerSelection(true)
 })
 
 // Test menu transform.

app/assets/js/scripts/overlay.js

@@ -42,6 +42,11 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
     }
 }
 
+function toggleServerSelection(toggleState){
+    prepareServerSelectionList()
+    toggleOverlay(toggleState, 'serverSelectContent')
+}
+
 /**
  * Set the content of the overlay.
  * 
@@ -91,12 +96,26 @@ function setDismissHandler(handler){
 
 /* Server Select View */
 
+document.addEventListener('keydown', (e) => {
+    if(document.getElementById('serverSelectContent').style.display !== 'none'){
+        console.debug('ServSelLi Keydown Called:', document.getElementById('serverSelectContent').style.display)
+        if(e.key === 'Escape'){
+            document.getElementById('serverSelectCancel').click()
+        } else if(e.key === 'Enter'){
+            document.getElementById('serverSelectConfirm').click()
+        }
+    }
+})
+
+document.getElementById('serverSelectActions').onsubmit = () => { return false }
+
 document.getElementById('serverSelectConfirm').addEventListener('click', () => {
     const listings = document.getElementsByClassName('serverListing')
     for(let i=0; i<listings.length; i++){
         if(listings[i].hasAttribute('selected')){
             const serv = AssetGuard.getServerById(ConfigManager.getGameDirectory(), listings[i].getAttribute('servid'))
             ConfigManager.setSelectedServer(serv != null ? serv.id : null)
+            ConfigManager.save()
             updateSelectedServer(serv != null ? serv.name : null)
             setLaunchEnabled(serv != null)
             refreshServerStatus(true)
@@ -135,4 +154,40 @@ function setServerListingHandlers(){
         }
     })
 }
-setServerListingHandlers()
+
+function populateServerListings(){
+    const distro = AssetGuard.retrieveDistributionDataSync(ConfigManager.getGameDirectory())
+    const giaSel = ConfigManager.getSelectedServer()
+    const servers = distro.servers
+    let htmlString = ``
+    for(let i=0; i<servers.length; i++){
+        htmlString += `<button class="serverListing" servid="${servers[i].id}" ${servers[i].id === giaSel ? `selected` : ``}>
+            <img class="serverListingImg" src="${servers[i].icon_url}"/>
+            <div class="serverListingDetails">
+                <span class="serverListingName">${servers[i].name}</span>
+                <span class="serverListingDescription">${servers[i].description}</span>
+                <div class="serverListingInfo">
+                    <div class="serverListingVersion">${servers[i].mc_version}</div>
+                    <div class="serverListingRevision">${servers[i].revision}</div>
+                    ${servers[i].default_selected ? `<div class="serverListingStarWrapper">
+                        <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
+                            <defs>
+                                <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
+                            </defs>
+                            <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
+                            <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
+                        </svg>
+                        <span class="serverListingStarTooltip">Main Server</span>
+                    </div>` : ``}
+                </div>
+            </div>
+        </button>`
+    }
+    document.getElementById('serverSelectListScrollable').innerHTML = htmlString
+
+}
+
+function prepareServerSelectionList(){
+    populateServerListings()
+    setServerListingHandlers()
+}

app/assets/js/scripts/uicore.js

@@ -99,7 +99,7 @@ $(document).on('click', 'a[href^="http"]', function(event) {
  * DevTools, for example the chrome debugger in VS Code. 
  */
 document.addEventListener('keydown', function (e) {
-    if(e.keyCode == 73 && e.ctrlKey && e.shiftKey){
+    if(e.key === 'I' && e.ctrlKey && e.shiftKey){
         let window = remote.getCurrentWindow()
         window.toggleDevTools()
     }