Moved over from a singular server code system to a list system, with all necessary checks in place

I'm sure there are some other UI tweaks in here too. This commit also includes a method to check the current server against the player's server codes to see if it's available to them. You can either show the error overlay at the time, or perform your own other operation.
2020-08-13 07:57:52 +01:00 · 2020-08-13 07:57:52 +01:00 · 2c663364cb
commit 2c663364cb
parent 6d60decbaa
7 changed files with 271 additions and 45 deletions
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@ -1279,26 +1279,46 @@ input:checked + .toggleSwitchSlider:before {
 .settingsServerCodeTitle {
    margin-bottom: 10px;
    font-size: 18px;
-    font-weight: bold;
+    font-family: 'Avenir Medium';
 }

 /* Wrapper container for the actionable elements. */
 .settingsServerCodeActions {
    display: flex;
-    width: 90%;
+    width: 60%;
 }

 /* Enabled text field which stores the secret code if available. */
-.settingsServerCodeVal {
+.settingsInputServerCodeVal {
    border-radius: 0px !important;
    width: 100%;
    padding: 5px 10px;
    font-size: 12px;
-    height: 30px;
+}
+
+.settingsInputServerCodeButton {
+    border: 0px;
+    border-radius: 3px 3px 3px 3px;
+    font-size: 12px;
+    padding: 0px 5px;
+    margin-left: 10px;
+    cursor: pointer;
+    background: rgba(126, 126, 126, 0.57);
+    transition: 0.25s ease;
+    white-space: nowrap;
+    outline: none;
+}
+.settingsInputServerCodeButton:hover,
+.settingInputServerCodeButton:focus {
+    text-shadow: 0px 0px 20px white;
+}
+.settingsInputServerCodeButton:active {
+    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
+    color: rgba(255, 255, 255, 0.75);
 }

 /* Description for the file selector. */
-.settingsServerCodeDesc {
+.settingsServerCodesDesc {
    margin: 20px 0px;
    color: grey;
    font-size: 14px;
@ -1306,10 +1326,93 @@ input:checked + .toggleSwitchSlider:before {
 }


-.settingsServerCodeDesc strong {
+.settingsServerCodesDesc strong {
    font-family: 'Avenir Medium';
 }

+#settingsServerCodesListContent {
+    font-size: 16px;
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 3px;
+    color: white;
+    margin-top: 10px;
+}
+
+.settingsServerCode {
+    padding: 8px 0px 8px 8px;
+}
+
+/* Main content container for server code element information. */
+.settingsServerCodeContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: opacity 0.25s ease;
+}
+
+/* Wrapper container for the left side of a server code element. */
+.settingsServerCodeMainWrapper {
+    display: flex;
+    align-items: center;
+}
+
+.settingsServerCodeRemoveWrapper {
+    margin-right: 25px;
+}
+
+/* Server code valid/invalid status. */
+.settingsServerCodeStatus {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: #c32625;
+    margin-right: 15px;
+    transition: 0.25s ease;
+}
+
+.settingsServerCode[valid] > .settingsServerCodeContent > .settingsServerCodeMainWrapper > .settingsServerCodeStatus {
+    background-color: #4ddd19;
+}
+
+/* Mod details container. */
+.settingsServerCodeDetails {
+    display: flex;
+    flex-direction: column;
+}
+
+.settingsServerCodeName {
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.settingsServerCode:not([valid]) > .settingsServerCodeContent > .settingsServerCodeMainWrapper > .settingsServerCodeDetails > .settingsServerCodeServerName {
+    color: red;
+}
+
+/* Button to remove drop-in mods. */
+.settingsServerCodeRemoveButton {
+    background: none;
+    border: none;
+    font-size: 14px;
+    text-align: right;
+    padding: 0px;
+    color: grey;
+    cursor: pointer;
+    outline: none;
+    transition: 0.25s ease;
+    font-weight: bold;
+}
+
+.settingsServerCodeRemoveButton:hover,
+.settingsServerCodeRemoveButton:focus {
+    color: red;
+}
+.settingsServerCodeRemoveButton:active {
+    color: #9b1f1f;
+}
+
 /* * *
 * Settings View (Account Tab)
 * * */
@ -1577,15 +1680,14 @@ input:checked + .toggleSwitchSlider:before {

 /* Mod elements. */
 .settingsMod,
-.settingsDropinMod {
-    padding: 10px;
-}
 .settingsSubMod {
    padding: 10px 0px 10px 15px;
    margin-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
 }
-
+.settingsDropinMod {
+    padding: 10px;
+}
 /* Main content container for mod element information. */
 .settingsModContent {
    display: flex;
@ -1630,7 +1732,7 @@ input:checked + .toggleSwitchSlider:before {

 /* Set the status color of an enabled mod. */
 .settingsBaseMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus {
-    background-color: rgb(165, 195, 37);
+    background-color: #4ddd19;
 }

 /* Add opacity to submods of a disabled mod. */
--- a/app/assets/js/configmanager.js
+++ b/app/assets/js/configmanager.js
@ -40,21 +40,21 @@ exports.setDataDirectory = function(dataDirectory){
 }

 /**
- * Get the launcher's server code if set. This will be used to load hidden servers.
+ * Get the launcher's available server codes. This will be used to load hidden servers.
 *
- * @returns {string} The server code that has been put into the launcher
+ * @returns {string[]} The server codes list that has been put into the launcher's configuration
 */
-exports.getServerCode = function(){
-    return config.settings.launcher.serverCode
+exports.getServerCodes = function(){
+    return config.settings.launcher.serverCodes
 }

 /**
 * Set the new server code
 *
- * @param {string} serverCode The new server code.
+ * @param {string[]} serverCodes The new server code list.
 */
-exports.setServerCode = function(serverCode){
-    config.settings.launcher.serverCode = serverCode
+exports.setServerCodes = function(serverCodes){
+    config.settings.launcher.serverCodes = serverCodes
 }

 const configPath = path.join(exports.getLauncherDirectory(), 'config.json')
@ -110,7 +110,7 @@ const DEFAULT_CONFIG = {
        launcher: {
            allowPrerelease: false,
            dataDirectory: dataPath,
-            serverCode: null
+            serverCodes: []
        }
    },
    newsCache: {
--- a/app/assets/js/distromanager.js
+++ b/app/assets/js/distromanager.js
@ -506,6 +506,23 @@ class DistroIndex {
        return null
    }

+    /**
+     * Get a server configuration by its ID. If it does not
+     * exist, null will be returned.
+     *
+     * @param {string} id The ID of the server.
+     *
+     * @returns {Server} The server configuration with the given ID or null.
+     */
+    getServerFromCode(code){
+        for(let serv of this.servers){
+            if(serv.serverCode === code){
+                return serv
+            }
+        }
+        return null
+    }
+
    /**
     * Get the main server.
     * 
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@ -85,6 +85,7 @@ function setLaunchEnabled(val){

 // Bind launch button
 document.getElementById('launch_button').addEventListener('click', function(e){
+    if(checkCurrentServer(false)){
        loggerLanding.log('Launching game..')
        const mcVersion = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer()).getMinecraftVersion()
        const jExe = ConfigManager.getJavaExecutable()
@ -106,6 +107,7 @@ document.getElementById('launch_button').addEventListener('click', function(e){
                }
            })
        }
+    }
 })

 // Bind settings button
@ -760,6 +762,37 @@ function dlAsync(login = true){
    })
 }

+/**
+ * Checks the current server to ensure that they still have permission to play it (checking server code, if applicable) and open up an error overlay if specified
+ * @Param {boolean} whether or not to show the error overlay
+ */
+function checkCurrentServer(errorOverlay = true){
+    const selectedServId = ConfigManager.getSelectedServer()
+    if(selectedServId){
+        const selectedServ = DistroManager.getDistribution().getServer(selectedServId)
+        if(selectedServ){
+            if(selectedServ.getServerCode() && selectedServ.getServerCode() !== ''){
+                if(!ConfigManager.getServerCodes().includes(selectedServ.getServerCode())){
+                    if(errorOverlay){
+                        setOverlayContent(
+                            'Current Server Restricted!',
+                            'It seems that you no longer have the server code required to access this server! Please switch to a different server to play on.<br><br>If you feel this is an error, please contact the server administrator',
+                            'Switch Server'
+                        )
+                        setOverlayHandler(() => {
+                            document.activeElement.blur()
+                            toggleServerSelection(true)
+                        })
+                        toggleOverlay(true, true)
+                    }
+                    return false
+                }
+            }
+        }
+        return true
+    }
+}
+
 /**
 * News Loading Functions
 */
--- a/app/assets/js/scripts/overlay.js
+++ b/app/assets/js/scripts/overlay.js
@ -267,12 +267,9 @@ function populateServerListings(){
    const servers = distro.getServers()
    let htmlString = ''
    for(const serv of servers){
-        if(serv.getServerCode() != null && serv.getServerCode() === ''){
-            if(ConfigManager.getServerCode() !== serv.getServerCode()){
-                // skips any servers which the player hasn't got the code to access
+        if(serv.getServerCode() && !ConfigManager.getServerCodes().includes(serv.getServerCode())){
            continue
        }
-        }
        htmlString += `<button class="serverListing" servid="${serv.getID()}" ${serv.getID() === giaSel ? 'selected' : ''}>
            <img class="serverListingImg" src="${serv.getIcon()}"/>
            <div class="serverListingDetails">
--- a/app/assets/js/scripts/settings.js
+++ b/app/assets/js/scripts/settings.js
@ -5,6 +5,8 @@ const semver = require('semver')
 const { JavaGuard } = require('./assets/js/assetguard')
 const DropinModUtil  = require('./assets/js/dropinmodutil')

+const loggerSettings = LoggerUtil('%c[Settings]', 'color: #353232; font-weight: bold')
+
 const settingsState = {
    invalid: new Set()
 }
@ -325,6 +327,43 @@ document.getElementById('settingsAddAccount').onclick = (e) => {
    })
 }

+/**
+ * Binds the functionality within the server codes section of the launcher settings
+ */
+function bindServerCodeButtons(){
+    // Sets up the onclick listeners for the button to add codes
+    document.getElementById('settingsAddServerCode').onclick = () => {
+        for(let ele of document.getElementsByClassName('settingsInputServerCodeVal')){
+            const code = ele.value
+            if(!ConfigManager.getServerCodes().includes(code) && code){
+                ConfigManager.getServerCodes().push(code)
+                ConfigManager.save()
+                loggerSettings.log('Added server code to configuration and saved it')
+                prepareLauncherTab()
+            } else {
+                loggerSettings.log('Server code already exists or is empty, not adding.')
+            }
+        }
+    }
+
+    // Sets up the onclick listeners for each remove code buttons
+    const sEls = document.querySelectorAll('[remcode]')
+    Array.from(sEls).map((v, index, arr) => {
+        v.onclick = () => {
+            if(v.hasAttribute('remcode')){
+                const code = v.getAttribute('remcode')
+                if(ConfigManager.getServerCodes().includes(code)){
+                    ConfigManager.getServerCodes().splice(ConfigManager.getServerCodes().indexOf(code), 1)
+                    ConfigManager.save()
+                    loggerSettings.log('Added removed code from configuration and saved it')
+                    prepareLauncherTab()
+                }
+            }
+            loggerSettings.log('Server code doesnt exist!, not removing.')
+        }
+    })
+}
+
 /**
 * Bind functionality for the account selection buttons. If another account
 * is selected, the UI of the previously selected account will be updated.
@ -481,6 +520,14 @@ function prepareAccountsTab() {
    bindAuthAccountLogOut()
 }

+/**
+ * Prepare the accounts tab for display.
+ */
+function prepareLauncherTab() {
+    resolveServerCodesForUI()
+    bindServerCodeButtons()
+}
+
 /**
 * Minecraft Tab
 */
@ -683,6 +730,32 @@ function resolveDropinModsForUI(){
    document.getElementById('settingsDropinModsContent').innerHTML = dropinMods
 }

+function resolveServerCodesForUI(){
+    let servCodes = ''
+    for(let servCode of ConfigManager.getServerCodes()){
+        const serv = DistroManager.getDistribution().getServerFromCode(servCode)
+        servCodes +=
+            `
+                <div id="${servCode}" class="settingsServerCode" ${serv ? 'valid' : ''}>
+                    <div class="settingsServerCodeContent">
+                        <div class="settingsServerCodeMainWrapper">
+                            <div class="settingsServerCodeStatus"></div>
+                            <div class="settingsServerCodeDetails">
+                                <span class="settingsServerCodeName">${servCode}</span>
+                                <span class="settingsServerCodeServerName"> ${serv ? serv.getName() : 'Invalid Code'}</span> 
+                            </div>
+                        </div>
+                        <div class="settingsServerCodeRemoveWrapper">
+                            <button class="settingsServerCodeRemoveButton" id="settingsRemoveServerCode" remcode="${servCode}">Remove</button>
+                        </div>
+                    </div>
+                </div>
+            `
+    }
+
+    document.getElementById('settingsServerCodesListContent').innerHTML = servCodes
+}
+
 /**
 * Bind the remove button for each loaded drop-in mod.
 */
@ -1344,6 +1417,7 @@ function prepareSettings(first = false) {
    initSettingsValues()
    prepareAccountsTab()
    prepareJavaTab()
+    prepareLauncherTab()
    prepareAboutTab()
 }

--- a/app/settings.ejs
+++ b/app/settings.ejs
@ -267,13 +267,16 @@
                <div class="settingsFileSelDesc">All game files and local Java installations will be stored in the data directory.<br>Screenshots and world saves are stored in the instance folder for the corresponding server configuration.</div>
            </div>
            <div class="settingsServerCodeContainer">
-                <div class="settingsServerCodeTitle">Server Codes</div>
+                <div class="settingsServerCodeTitle">Your Server Codes</div>
                <div class="settingsServerCodeContent">
                    <div class="settingsServerCodeActions">
-                        <input class="settingsServerCodeVal" type="text" value="" cValue="ServerCode">
+                        <input class="settingsInputServerCodeVal" type="text">
+                        <button class="settingsInputServerCodeButton" id="settingsAddServerCode">Add Code</button>
                    </div>
                </div>
-                <div class="settingsServerCodeDesc">Allows you to access hidden servers that are set up to only show with the correct server code.</div>
+                <div id="settingsServerCodesListContent">
+                </div>
+                <div class="settingsServerCodesDesc">Setup your server codes to access hidden servers that are set up to only show with the correct server code.</div>
            </div>
        </div>
        <div id="settingsTabAbout" class="settingsTab" style="display: none;">