Jonttu/HeliosLauncher
1
0
Fork 1
mirror of https://github.com/dscalzi/HeliosLauncher.git synced 2024-12-22 19:52:14 -08:00
Code Issues Projects Releases Wiki Activity

General cleanup for mods tab code.

Browse Source
This commit is contained in:
Daniel Scalzi 2018-08-07 04:41:26 -04:00
parent 556199aa55
commit b46ac97493
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
4 changed files with 216 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
app/assets/css/launcher.css
View File

@ -1368,103 +1368,7 @@ input:checked + .toggleSwitchSlider:before {
* Settings View (Mods Tab) * Settings View (Mods Tab)
* * */ * * */
#settingsReqModsContent, /* Selected server content container */
#settingsOptModsContent,
#settingsDropinModsContent {
font-size: 12px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
color: white;
}
#settingsModsContainer {
width: 75%;
}
.settingsModsHeader {
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
margin-bottom: 10px;
}
#settingsReqModsContainer,
#settingsOptModsContainer,
#settingsDropinModsContainer {
padding-bottom: 25px;
}
.settingsMod,
.settingsDropinMod {
padding: 10px;
}
.settingsSubMod {
padding: 10px 0px 10px 15px;
margin-left: 20px;
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.settingsModStatus {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #c32625;
margin-right: 15px;
transition: 0.25s ease;
}
.settingsModContent {
display: flex;
align-items: center;
justify-content: space-between;
transition: opacity 0.25s ease;
}
.settingsModMainWrapper {
display: flex;
align-items: center;
}
.settingsModVersion {
color: grey;
font-size: 10px;
}
.settingsModDetails {
display: flex;
flex-direction: column;
}
.toggleSwitch[reqmod] {
filter: grayscale(49%) brightness(60%);
pointer-events: none;
}
.settingsBaseMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus {
background-color: rgb(165, 195, 37);
}
.settingsBaseMod:not([enabled]) > .settingsSubModContainer .settingsModContent {
opacity: 0.5;
}
.settingsSubModContainer > .settingsSubMod:first-child {
border-top-left-radius: 10px;
}
.settingsSubModContainer > .settingsSubMod:last-child {
border-bottom-left-radius: 10px;
}
settingsSubModContainer > .settingsSubMod:only-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.settingsSubModContainer {
margin-top: 10px;
}
#settingsSelServContainer { #settingsSelServContainer {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
width: 75%; width: 75%;
@ -1474,6 +1378,7 @@ settingsSubModContainer > .settingsSubMod:only-child {
margin: 15px 0px; margin: 15px 0px;
} }
/* Div which will be populated with the selected server's information. */
#settingsSelServContent { #settingsSelServContent {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1481,12 +1386,14 @@ settingsSubModContainer > .settingsSubMod:only-child {
padding: 5px 0px; padding: 5px 0px;
} }
/* Wrapper container for the switch server button. */
#settingsSwitchServerContainer { #settingsSwitchServerContainer {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
} }
/* Button to switch server configurations on the mods tab. */
#settingsSwitchServerButton { #settingsSwitchServerButton {
opacity: 0; opacity: 0;
border: 1px solid rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255);
@ -1514,6 +1421,140 @@ settingsSubModContainer > .settingsSubMod:only-child {
opacity: 1; opacity: 1;
} }
/* Main content container for the mod elements. */
#settingsModsContainer {
width: 75%;
}
/* Mod sub-container header text. */
.settingsModsHeader {
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
margin-bottom: 10px;
}
/* Mod elements sub-containers. */
#settingsReqModsContainer,
#settingsOptModsContainer,
#settingsDropinModsContainer {
padding-bottom: 25px;
}
/* Main content containers for mod elements. */
#settingsReqModsContent,
#settingsOptModsContent,
#settingsDropinModsContent {
font-size: 12px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
color: white;
}
/* 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);
}
/* Main content container for mod element information. */
.settingsModContent {
display: flex;
align-items: center;
justify-content: space-between;
transition: opacity 0.25s ease;
}
/* Wrapper container for the left side of a mod element. */
.settingsModMainWrapper {
display: flex;
align-items: center;
}
/* Mod enabled/disabled status. */
.settingsModStatus {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #c32625;
margin-right: 15px;
transition: 0.25s ease;
}
/* Mod details container. */
.settingsModDetails {
display: flex;
flex-direction: column;
}
/* The version of the mod. */
.settingsModVersion {
color: grey;
font-size: 10px;
}
/* Disabled toggleswitch for required mods. */
.toggleSwitch[reqmod] {
filter: grayscale(49%) brightness(60%);
pointer-events: none;
}
/* Set the status color of an enabled mod. */
.settingsBaseMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus {
background-color: rgb(165, 195, 37);
}
/* Add opacity to submods of a disabled mod. */
.settingsBaseMod:not([enabled]) > .settingsSubModContainer .settingsModContent {
opacity: 0.5;
}
/* Curve the left border for submods. */
.settingsSubModContainer > .settingsSubMod:first-child {
border-top-left-radius: 10px;
}
.settingsSubModContainer > .settingsSubMod:last-child {
border-bottom-left-radius: 10px;
}
.settingsSubModContainer > .settingsSubMod:only-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/* Wrapper container for all submods. */
.settingsSubModContainer {
margin-top: 10px;
}
/* Button to open the mods folder for drop-in mods. */
#settingsDropinFileSystemButton {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(126, 126, 126, 0.57);
border-radius: 3px;
height: 50px;
width: 100%;
text-align: left;
padding: 0px 50px;
cursor: pointer;
outline: none;
transition: 0.25s ease;
margin-bottom: 10px;
}
#settingsDropinFileSystemButton:hover,
#settingsDropinFileSystemButton:focus {
background: rgba(54, 54, 54, 0.25);
text-shadow: 0px 0px 20px white;
}
/* Refresh instructions on the file system button. */
#settingsDropinRefreshNote {
font-size: 10px;
}
/* Button to remove drop-in mods. */
.settingsDropinRemoveButton { .settingsDropinRemoveButton {
background: none; background: none;
border: none; border: none;
@ -1535,29 +1576,6 @@ settingsSubModContainer > .settingsSubMod:only-child {
text-shadow: 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f; text-shadow: 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f;
} }
#settingsDropinFileSystemButton {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(126, 126, 126, 0.57);
border-radius: 3px;
height: 50px;
width: 100%;
text-align: left;
padding: 0px 50px;
cursor: pointer;
outline: none;
transition: 0.25s ease;
margin-bottom: 10px;
}
#settingsDropinFileSystemButton:hover,
#settingsDropinFileSystemButton:focus {
background: rgba(54, 54, 54, 0.25);
text-shadow: 0px 0px 20px white;
}
#settingsDropinRefreshNote {
font-size: 10px;
}
/* * * /* * *
* Settings View (Java Tab) * Settings View (Java Tab)
* * */ * * */

19
app/assets/js/dropinmodutil.js
View File

@ -27,7 +27,7 @@ exports.scanForDropinMods = function(modsDir, version) {
if(fs.existsSync(versionDir)){ if(fs.existsSync(versionDir)){
verCandidates = fs.readdirSync(versionDir) verCandidates = fs.readdirSync(versionDir)
} }
for(file of modCandidates){ for(let file of modCandidates){
const match = MOD_REGEX.exec(file) const match = MOD_REGEX.exec(file)
if(match != null){ if(match != null){
modsDiscovered.push({ modsDiscovered.push({
@ -38,7 +38,7 @@ exports.scanForDropinMods = function(modsDir, version) {
}) })
} }
} }
for(file of verCandidates){ for(let file of verCandidates){
const match = MOD_REGEX.exec(file) const match = MOD_REGEX.exec(file)
if(match != null){ if(match != null){
modsDiscovered.push({ modsDiscovered.push({
@ -62,15 +62,6 @@ exports.scanForDropinMods = function(modsDir, version) {
* @returns {boolean} True if the mod was deleted, otherwise false. * @returns {boolean} True if the mod was deleted, otherwise false.
*/ */
exports.deleteDropinMod = function(modsDir, fullName){ exports.deleteDropinMod = function(modsDir, fullName){
/*return new Promise((resolve, reject) => {
fs.unlink(path.join(modsDir, fullName), (err) => {
if(err){
reject(err)
} else {
resolve()
}
})
})*/
const res = shell.moveItemToTrash(path.join(modsDir, fullName)) const res = shell.moveItemToTrash(path.join(modsDir, fullName))
if(!res){ if(!res){
shell.beep() shell.beep()
@ -104,6 +95,12 @@ exports.toggleDropinMod = function(modsDir, fullName, enable){
}) })
} }
/**
* Check if a drop-in mod is enabled.
*
* @param {string} fullName The fullName of the discovered mod to toggle.
* @returns {boolean} True if the mod is enabled, otherwise false.
*/
exports.isDropinModEnabled = function(fullName){ exports.isDropinModEnabled = function(fullName){
return !fullName.endsWith(DISABLED_EXT) return !fullName.endsWith(DISABLED_EXT)
} }

2
app/assets/js/scripts/overlay.js
View File

@ -10,7 +10,7 @@
* @returns {boolean} Whether or not the overlay is visible. * @returns {boolean} Whether or not the overlay is visible.
*/ */
function isOverlayVisible(){ function isOverlayVisible(){
return document.getElementById('main').hasAttribute('overlay'); return document.getElementById('main').hasAttribute('overlay')
} }
/** /**

102
app/assets/js/scripts/settings.js
View File

@ -428,6 +428,9 @@ document.getElementById('settingsGameHeight').addEventListener('keydown', (e) =>
const settingsModsContainer = document.getElementById('settingsModsContainer') const settingsModsContainer = document.getElementById('settingsModsContainer')
/**
* Resolve and update the mods on the UI.
*/
function resolveModsForUI(){ function resolveModsForUI(){
const serv = ConfigManager.getSelectedServer() const serv = ConfigManager.getSelectedServer()
@ -438,9 +441,15 @@ function resolveModsForUI(){
document.getElementById('settingsReqModsContent').innerHTML = modStr.reqMods document.getElementById('settingsReqModsContent').innerHTML = modStr.reqMods
document.getElementById('settingsOptModsContent').innerHTML = modStr.optMods document.getElementById('settingsOptModsContent').innerHTML = modStr.optMods
} }
/**
* Recursively build the mod UI elements.
*
* @param {Object[]} mdls An array of modules to parse.
* @param {boolean} submodules Whether or not we are parsing submodules.
* @param {Object} servConf The server configuration object for this module level.
*/
function parseModulesForUI(mdls, submodules, servConf){ function parseModulesForUI(mdls, submodules, servConf){
let reqMods = '' let reqMods = ''
@ -496,9 +505,7 @@ function parseModulesForUI(mdls, submodules, servConf){
</div>` </div>`
} }
} }
} }
return { return {
@ -560,35 +567,15 @@ function _saveModConfiguration(modConf){
return modConf return modConf
} }
function loadSelectedServerOnModsTab(){ // Drop-in mod elements.
const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
document.getElementById('settingsSelServContent').innerHTML = `
<img class="serverListingImg" src="${serv.getIcon()}"/>
<div class="serverListingDetails">
<span class="serverListingName">${serv.getName()}</span>
<span class="serverListingDescription">${serv.getDescription()}</span>
<div class="serverListingInfo">
<div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
<div class="serverListingRevision">${serv.getVersion()}</div>
${serv.isMainServer() ? `<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>
`
}
let CACHE_SETTINGS_MODS_DIR let CACHE_SETTINGS_MODS_DIR
let CACHE_DROPIN_MODS let CACHE_DROPIN_MODS
/**
* Resolve any located drop-in mods for this server and
* populate the results onto the UI.
*/
function resolveDropinModsForUI(){ function resolveDropinModsForUI(){
const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer()) const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
CACHE_SETTINGS_MODS_DIR = path.join(ConfigManager.getInstanceDirectory(), serv.getID(), 'mods') CACHE_SETTINGS_MODS_DIR = path.join(ConfigManager.getInstanceDirectory(), serv.getID(), 'mods')
@ -619,6 +606,9 @@ function resolveDropinModsForUI(){
document.getElementById('settingsDropinModsContent').innerHTML = dropinMods document.getElementById('settingsDropinModsContent').innerHTML = dropinMods
} }
/**
* Bind the remove button for each loaded drop-in mod.
*/
function bindDropinModsRemoveButton(){ function bindDropinModsRemoveButton(){
const sEls = settingsModsContainer.querySelectorAll('[remmod]') const sEls = settingsModsContainer.querySelectorAll('[remmod]')
Array.from(sEls).map((v, index, arr) => { Array.from(sEls).map((v, index, arr) => {
@ -640,6 +630,10 @@ function bindDropinModsRemoveButton(){
}) })
} }
/**
* Bind functionality to the file system button for the selected
* server configuration.
*/
function bindDropinModFileSystemButton(){ function bindDropinModFileSystemButton(){
const fsBtn = document.getElementById('settingsDropinFileSystemButton') const fsBtn = document.getElementById('settingsDropinFileSystemButton')
fsBtn.onclick = () => { fsBtn.onclick = () => {
@ -647,6 +641,10 @@ function bindDropinModFileSystemButton(){
} }
} }
/**
* Save drop-in mod states. Enabling and disabling is just a matter
* of adding/removing the .disabled extension.
*/
function saveDropinModConfiguration(){ function saveDropinModConfiguration(){
for(dropin of CACHE_DROPIN_MODS){ for(dropin of CACHE_DROPIN_MODS){
const dropinUI = document.getElementById(dropin.fullName) const dropinUI = document.getElementById(dropin.fullName)
@ -669,11 +667,8 @@ function saveDropinModConfiguration(){
} }
} }
document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => { // Refresh the drop-in mods when F5 is pressed.
e.target.blur() // Only active on the mods tab.
toggleServerSelection(true)
})
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if(getCurrentView() === VIEWS.settings && selectedSettingsTab === 'settingsTabMods'){ if(getCurrentView() === VIEWS.settings && selectedSettingsTab === 'settingsTabMods'){
if(e.key === 'F5'){ if(e.key === 'F5'){
@ -685,6 +680,47 @@ document.addEventListener('keydown', (e) => {
} }
}) })
// Server status bar functions.
/**
* Load the currently selected server information onto the mods tab.
*/
function loadSelectedServerOnModsTab(){
const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
document.getElementById('settingsSelServContent').innerHTML = `
<img class="serverListingImg" src="${serv.getIcon()}"/>
<div class="serverListingDetails">
<span class="serverListingName">${serv.getName()}</span>
<span class="serverListingDescription">${serv.getDescription()}</span>
<div class="serverListingInfo">
<div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
<div class="serverListingRevision">${serv.getVersion()}</div>
${serv.isMainServer() ? `<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>
`
}
// Bind functionality to the server switch button.
document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => {
e.target.blur()
toggleServerSelection(true)
})
/**
* Function to refresh the mods tab whenever the selected
* server is changed.
*/
function animateModsTabRefresh(){ function animateModsTabRefresh(){
$('#settingsTabMods').fadeOut(500, () => { $('#settingsTabMods').fadeOut(500, () => {
saveModConfiguration() saveModConfiguration()