Beginning work on new UI for landing page and the modlist resolver/process builder.

This commit is contained in:
Daniel Scalzi 2017-09-12 00:50:41 -04:00
parent 02758b27b2
commit 6eb6177d4b
5 changed files with 234 additions and 131 deletions

View File

@ -70,61 +70,73 @@ body {
} }
#main > #upper { #main > #upper {
height: 75%; height: 77%;
display: flex; display: flex;
} }
#main > #lower { #main > #lower {
height: 25%; height: 23%;
display: flex;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
} }
#main > #upper > #left { #main > #upper > #left {
display: inline-flex; display: inline-flex;
width: 18%; width: 15%;
height: 100%; height: 100%;
justify-content: center; justify-content: flex-end;
} }
#main > #upper > #content { #main > #upper > #content {
display: inline-flex; display: inline-flex;
width: 62%; width: 59%;
height: 100%; height: 100%;
} }
#main > #upper > #right { #main > #upper > #right {
display: inline-flex; display: inline-flex;
width: 20%; width: 26%;
height: 100%; height: 100%;
} }
#main > #lower > #top { #main > #lower > #left {
height: 50%;
position: relative;
}
#main > #lower > #bottom {
height: 50%;
display: flex;
}
#main > #lower > #bottom > #left {
height: 100%; height: 100%;
width: 50%; width: 33%;
display: inline-flex; display: inline-flex;
position: relative; justify-content: center;
align-items: center;
} }
#main > #lower > #bottom > #right { #main > #lower > #left #content {
position: relative;
top: 25px;
display: inline-flex;
line-height: 24px;
left: 50px;
}
#main > #lower > #center {
height: 100%; height: 100%;
width: 50%; width: 33%;
display: inline-flex;
justify-content: center;
}
#main > #lower > #center #content {
position: relative;
top: 25px;
}
#main > #lower > #right {
height: 100%;
width: 33%;
display: inline-flex; display: inline-flex;
} }
#image_seal { #image_seal {
height: 100px; height: 70px;
width: auto; width: auto;
margin-top: 12px; position: relative;
margin-top: 50px;
border: 2px solid white; border: 2px solid white;
border-radius: 50%; border-radius: 50%;
} }
@ -133,7 +145,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 20px; position: relative;
top: 50px;
} }
#user_avatar { #user_avatar {
@ -145,50 +158,18 @@ body {
} }
#user_text { #user_text {
margin-right: 15px;
font-family: 'Avenir Book'; font-family: 'Avenir Book';
font-size: 15px; font-size: 12px;
min-width: 112px;
font-weight: 900;
letter-spacing: 1px;
color: white; color: white;
text-shadow: 0px 0px 20px black;
position: relative;
right: 25px;
text-align: right;
} }
/*
.menu_container {
display: inline-block;
cursor: pointer;
float: right;
margin-right: 22px;
margin-top: 10px;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 4px;
background-color: #d5d7df;
margin: 6px auto;
transition: 0.4s;
border-radius: 20px;
}
.bar2 {
width: 25px !important;
}
#launch_btn {
background-color: #4f771d;
color: white;
border: none;
height: 32px;
line-height: 32px;
padding-left: 26px;
padding-right: 20px;
font-family: 'Avenir Book';
font-size: 16px;
border-radius: 0px 20px 20px 0px;
}
#launch_btn:focus {
outline: 0px;
}
#main_progress[value] { #main_progress[value] {
height: 32px; height: 32px;
width: 245px; width: 245px;
@ -212,6 +193,13 @@ body {
#main_progress[value]::-webkit-progress-value { #main_progress[value]::-webkit-progress-value {
background-color: black; background-color: black;
background-image: -webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 20px 0px 0px 20px; border-radius: 20px 0px 0px 20px;
background-size: 35px 20px, 100% 100%, 100% 100%; background-size: 35px 20px, 100% 100%, 100% 100%;
} }
@ -248,4 +236,47 @@ body {
color: #93b253; color: #93b253;
content: '\2022 '; content: '\2022 ';
line-height: 20px; line-height: 20px;
} */
.bot_label {
color: white;
font-family: 'Avenir Book';
font-size: 9px;
font-weight: bold;
text-shadow: 0px 0px 0px #bebcbb;
}
#player_count {
color: #635f5b;
font-family: 'Avenir Book';
font-size: 8px;
font-weight: 900;
text-shadow: 0px 0px 0px #635f5b;
margin-left: 10px;
}
.bot_divider {
height: 25px;
width: 2px;
background: rgba(107, 105, 105, 0.7);
margin-left: 20px;
margin-right: 20px;
}
#mojang_status_icon {
font-size: 30px;
color: #a5c325;
margin-left: 15px;
}
#menu_button {
font-family: 'Avenir Book';
background: none;
border: none;
color: white;
font-weight: 900;
letter-spacing: 2px;
text-shadow: 0px 0px 0px #bebcbb;
font-size: 11px;
line-height: 24px;
} }

View File

@ -1,51 +0,0 @@
const fs = require('fs')
/**
* Class used to configure mod launch args.
*/
export class ModList {
/**
* Construct a ModList.
*
* @param {String} repositoryRoot - the base path of the mod locations.
* @param {Array.<String>} modRef - array containing the mod artifact ids.
* @param {String} parentList - parent ModList file path, null if none.
*/
constructor(repositoryRoot, modRef, parentList){
if(!arguments.length){
this.repositoryRoot = ''
this.modRef = []
}
this.repositoryRoot
this.modRef = modRef
if(parentList != null) this.parentList = parentList
}
/**
* Exports a ModList object to the specified file path.
*
* @param {ModList} modList - the ModList object to export.
* @param {String} filePath - desired filepath.
* @returns {Promise.<String>} - a promise which resolves FML modList argument.
*/
static exportModList(modList, filePath){
return new Promise(function(resolve, reject){
fs.writeFile(filePath, JSON.stringify(modList), (err) => {
if(err){
reject(err.message)
}
resolve('--modListFile ' + filePath)
})
})
}
/**
*
* @param {Object} distro - the distribution index.
*/
static generateModList(distro){
}
}

View File

@ -0,0 +1,17 @@
function _shouldInclude(mdle){
return mdle.required == null || mdle.required.value == null || mdle.required.value === true || (mdle.required.value === false && mdle.required.def === true)
}
function resolveForgeFromDistro(moduleArr){
const mods = []
for(let i=0; i<moduleArr.length; ++i){
if(moduleArr[i].type != null && moduleArr[i].type === 'forgemod'){
if(_shouldInclude(moduleArr[i])){
mods.push(moduleArr[i])
}
}
}
return mods
}

View File

@ -0,0 +1,104 @@
/**
* Work in progress
*/
const path = require('path')
const fs = require('fs')
class ProcessBuilder {
constructor(gameDirectory, distroServer, versionData, forgeData, authUser){
this.dir = gameDirectory
this.server = server
this.versionData = versionData
this.forgeData = forgeData
this.authUser = authUser
this.fmlDir = path.join(this.dir, 'versions', this.server.id)
}
static shouldInclude(mdle){
//If the module should be included by default
return mdle.required == null || mdle.required.value == null || mdle.required.value === true || (mdle.required.value === false && mdle.required.def === true)
}
resolveDefaultMods(options = {type: 'forgemod'}){
//Returns array of default forge mods to load.
const mods = []
const mdles = this.server.modules
for(let i=0; i<mdles.length; ++i){
if(mdles[i].type != null && mdles[i].type === options.type){
if(_shouldInclude(mdles[i])){
mods.push(mdles[i])
}
}
}
return mods
}
constructFMLModList(mods, save = false){
//untested - save modlist file
const modList = {}
modList.repositoryRoot = path.join(this.dir, 'modstore')
const ids = []
for(let i=0; i<mods.length; ++i){
ids.push(mods.id)
}
modList.modRef = ids
if(save){
fs.writeFileSync(this.fmlDir, modList, 'UTF-8')
}
}
constructJVMArguments(){
//pending changes
const args = [];
const mcArgs = this.forgeData.minecraftArguments.split(' ')
const argDiscovery = /\${*(.*)}/
for(let i=0; i<mcArgs.length; ++i){
if(argDiscovery.test(mcArgs[i])){
const identifier = mcArgs[i]
let val = null;
switch(identifier){
case 'auth_player_name':
val = authUser.selectedProfile.name
break
case 'version_name':
//val = versionData.id
val = this.server.id
break
case 'game_directory':
val = this.dir
break
case 'assets_root':
val = path.join(this.dir, 'assets')
break
case 'assets_index_name':
val = this.versionData.assets
break
case 'auth_uuid':
val = this.authUser.selectedProfile.id
break
case 'auth_access_token':
val = authUser.accessToken
break
case 'user_type':
val = 'MOJANG'
break
case 'version_type':
val = versionData['type']
break
}
if(val != null){
mcArgs[i] = val;
}
}
}
return args.concat(mcArgs);
}
}
module.exports = ProcessBuilder

View File

@ -21,30 +21,32 @@
<img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/> <img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
</div> </div>
<div id="bottom"> <div id="bottom">
<div class="menu_container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="lower"> <div id="lower">
<div id="top">
<div id="launch_area_container">
<progress id="main_progress" max=100 value=20 data-label="&#8226; &#160;Westeroscraft Production Server"></progress>
<button id="launch_btn">LAUNCH</button>
</div>
</div>
<div id="bottom">
<div id="left"> <div id="left">
<button class="home_btn" id="mojang_btn" status="#93b253">Mojang Status</button> <div class="bot_wrapper">
<div id="content">
<span class="bot_label">PLAYERS</span>
<span id="player_count">18/100</span>
<div class="bot_divider"></div>
<span class="bot_label">MOJANG STATUS</span>
<span id="mojang_status_icon">&#8226;</span>
</div>
</div>
</div>
<div id="center">
<div class="bot_wrapper">
<div id="content">
<button id="menu_button">MENU</button>
</div>
</div>
</div> </div>
<div id="right"> <div id="right">
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>