Skirda/SkirdaElectronLauncher
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Initial work on Java tab. Added custom range slider.

Browse Source 
Also added two more settings tabs. These are experimental and subject to change.
This commit is contained in:
Daniel Scalzi 2018-06-11 22:11:05 -04:00
parent 08eb04775e
commit db7ba0d450
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
4 changed files with 175 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -948,6 +948,11 @@ body, button {
text-shadow: none;
}
/* Div to add some space between nav items. */
.settingsNavSpacer {
height: 25px;
}
/* Content container for the done button. */
#settingsNavContentBottom {
position: absolute;
@ -1122,6 +1127,33 @@ input:checked + .toggleSwitchSlider:before {
transform: translateX(21px);
}
/* Range Slider styles. */
.rangeSlider {
width: 35%;
height: 5px;
margin: 15px 0px;
background: grey;
border-radius: 3px;
position: relative;
}
.rangeSliderBar {
position: absolute;
background: #8be88b;
width: 50%;
height: 5px;
border-radius: 3px 0px 0px 3px;
}
.rangeSliderTrack {
position: absolute;
top: -7.5px;
width: 7px;
height: 20px;
background: white;
border-radius: 3px;
left: 50%;
cursor: ew-resize;
}
/* * *
* Settings View (Account Tab)
* * */

17
app/assets/js/configmanager.js
View File

@ -9,11 +9,26 @@ const dataPath = path.join(sysRoot, '.westeroscraft')
const firstLaunch = !fs.existsSync(dataPath)
exports.getAbsoluteMinRAM = function(){
const mem = os.totalmem()
return mem >= 6000000000 ? 3 : 2
}
exports.getAbsoluteMaxRAM = function(){
const mem = os.totalmem()
const gT16 = mem-16000000000
return Math.floor((mem-1000000000-(gT16 > 0 ? (Number.parseInt(gT16/8) + 16000000000/4) : mem/4))/1000000000)
}
function resolveMaxRAM(){
const mem = os.totalmem()
return mem >= 8000000000 ? '4G' : (mem >= 6000000000 ? '3G' : '2G')
}
function resolveMinRAM(){
return exports.getAbsoluteMinRAM() + 'G'
}
/**
* Three types of values:
* Static = Explicitly declared.
@ -23,7 +38,7 @@ function resolveMaxRAM(){
const DEFAULT_CONFIG = {
settings: {
java: {
minRAM: '2G',
minRAM: resolveMinRAM(),
maxRAM: resolveMaxRAM(), // Dynamic
executable: null,
jvmOptions: [

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

@ -8,6 +8,10 @@ const settingsCurrentAccounts = document.getElementById('settingsCurrentAccounts
const settingsGameWidth = document.getElementById('settingsGameWidth')
const settingsGameHeight = document.getElementById('settingsGameHeight')
// Java Tab
const settingsMaxRAMRange = document.getElementById('settingsMaxRAMRange')
const settingsMinRAMRange = document.getElementById('settingsMinRAMRange')
const settingsState = {
invalid: new Set()
}
@ -67,6 +71,10 @@ function initSettingsValues(){
} else if(v.type === 'checkbox'){
v.checked = gFn()
}
} else if(v.tagName === 'DIV'){
if(v.classList.contains('rangeSlider')){
v.setAttribute('value', Number.parseFloat(gFn()))
}
}
}
@ -319,6 +327,101 @@ settingsGameHeight.addEventListener('keydown', (e) => {
}
})
/**
* Java Tab
*/
settingsMaxRAMRange.setAttribute('max', ConfigManager.getAbsoluteMaxRAM())
settingsMaxRAMRange.setAttribute('min', ConfigManager.getAbsoluteMinRAM())
settingsMinRAMRange.setAttribute('max', ConfigManager.getAbsoluteMaxRAM())
settingsMinRAMRange.setAttribute('min', ConfigManager.getAbsoluteMinRAM())
settingsMinRAMRange.onchange = (e) => {
const sMaxV = Number(settingsMaxRAMRange.getAttribute('value'))
const sMinV = Number(settingsMinRAMRange.getAttribute('value'))
if(sMaxV < sMinV){
const sliderMeta = calculateRangeSliderMeta(settingsMaxRAMRange)
updateRangedSlider(settingsMaxRAMRange, sMinV,
(1+(sMinV-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
}
}
settingsMaxRAMRange.onchange = (e) => {
const sMaxV = Number(settingsMaxRAMRange.getAttribute('value'))
const sMinV = Number(settingsMinRAMRange.getAttribute('value'))
if(sMaxV < sMinV){
e.preventDefault()
}
}
function calculateRangeSliderMeta(v){
const val = {
max: Number(v.getAttribute('max')),
min: Number(v.getAttribute('min')),
step: Number(v.getAttribute('step')),
}
val.ticks = 1+(val.max-val.min)/val.step
val.inc = 100/val.ticks
return val
}
function bindRangeSlider(){
Array.from(document.getElementsByClassName('rangeSlider')).map((v) => {
const track = v.getElementsByClassName('rangeSliderTrack')[0]
const value = v.getAttribute('value')
const sliderMeta = calculateRangeSliderMeta(v)
updateRangedSlider(v, value,
(1+(value-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
track.onmousedown = (e) => {
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
}
document.onmousemove = (e) => {
const diff = e.pageX - v.offsetLeft - track.offsetWidth/2
if(diff >= 0 && diff <= v.offsetWidth-track.offsetWidth/2){
const perc = (diff/v.offsetWidth)*100
const notch = Number(perc/sliderMeta.inc).toFixed(0)*sliderMeta.inc
if(Math.abs(perc-notch) < sliderMeta.inc/2){
updateRangedSlider(v, sliderMeta.min+(sliderMeta.step*((notch/sliderMeta.inc)-1)), notch)
}
}
}
}
})
}
function updateRangedSlider(element, value, notch){
const oldVal = element.getAttribute('value')
const bar = element.getElementsByClassName('rangeSliderBar')[0]
const track = element.getElementsByClassName('rangeSliderTrack')[0]
element.setAttribute('value', value)
const event = new MouseEvent('change', {
target: element,
type: 'change',
bubbles: false,
cancelable: true
})
let cancelled = !element.dispatchEvent(event)
if(!cancelled){
track.style.left = notch + '%'
bar.style.width = notch + '%'
} else {
element.setAttribute('value', oldVal)
}
}
function prepareJavaTab(){
bindRangeSlider()
}
/**
* Settings preparation functions.
*/
@ -335,6 +438,7 @@ function prepareSettings(first = false) {
}
initSettingsValues()
prepareAccountsTab()
prepareJavaTab()
}
// Prepare the settings UI on startup.

23
app/settings.ejs
View File

@ -10,6 +10,9 @@
<button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
<button class="settingsNavItem" rSc="settingsTabJava">Java</button>
<button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
<div class="settingsNavSpacer"></div>
<button class="settingsNavItem" rSc="settingsTabAbout">About</button>
<button class="settingsNavItem" rSc="settingsTabUpdates">Updates</button>
<div id="settingsNavContentBottom">
<div class="settingsNavDivider"></div>
<button id="settingsNavDone">Done</button>
@ -92,6 +95,14 @@
<span class="settingsTabHeaderText">Java Settings</span>
<span class="settingsTabHeaderDesc">Manage the Java configuration (advanced).</span>
</div>
<div id="settingsMaxRAMRange" class="rangeSlider" cValue="MaxRAM" min="3" max="8" value="8" step="0.5">
<div class="rangeSliderBar"></div>
<div class="rangeSliderTrack"></div>
</div>
<div id="settingsMinRAMRange" class="rangeSlider" cValue="MinRAM" min="3" max="8" value="8" step="0.5">
<div class="rangeSliderBar"></div>
<div class="rangeSliderTrack"></div>
</div>
</div>
<div id="settingsTabLauncher" class="settingsTab" style="display: none;">
<div class="settingsTabHeader">
@ -111,6 +122,18 @@
</div>
</div>
</div>
<div id="settingsTabAbout" class="settingsTab" style="display: none;">
<div class="settingsTabHeader">
<span class="settingsTabHeaderText">About</span>
<span class="settingsTabHeaderDesc">Lorem ipsum dolor sit amet.</span>
</div>
</div>
<div id="settingsTabUpdates" class="settingsTab" style="display: none;">
<div class="settingsTabHeader">
<span class="settingsTabHeaderText">Software Updates</span>
<span class="settingsTabHeaderDesc">Manage and review application updates.</span>
</div>
</div>
</div>
<script src="./assets/js/scripts/settings.js"></script>
</div>