Emulation/fpPS4-Temmie-s-Launcher
1
0
Fork 0
mirror of https://github.com/themitosan/fpPS4-Temmie-s-Launcher.git synced 2024-06-23 14:43:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

Settings: (Grid) Added option to change Icon border-radius, (Grid): Updated icon hover animation, Game List: Refresh Game list now hides fpPS4 options menu

Browse source
This commit is contained in:
TemmieHeartz 2022-12-27 21:35:33 -03:00
parent cbcb76d305
commit 3e0d3d1683
6 changed files with 77 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
App/css/style.css
View file

@ -156,6 +156,7 @@ img {
background-color: #0000;
}
.DIV_LIST_GRID {
z-index: 10;
display: flex;
flex-wrap: wrap;
text-align: center;
@ -179,7 +180,6 @@ img {
}
.GAME_ENTRY {
margin: 6px;
z-index: 10;
height: 78px;
display: flex;
cursor: pointer;
@ -209,15 +209,23 @@ img {
width: calc(100% - 22px) !important;
}
.GAME_ENTRY_GRID {
padding: 6px;
z-index: 12;
padding: 0px;
display: table;
box-shadow: none;
height: max-content;
min-width: 116px;
min-height: 116px;
border-radius: 8px;
max-width: max-content;
max-height: max-content;
background-color: #0000;
text-align: -webkit-right;
}
.GAME_ENTRY_GRID:hover {
animation-duration: 4s;
animation-name: gridGameFocus;
animation-iteration-count: infinite;
}
.GAME_ENTRY_BG {
top: 0px;
left: 0px;
@ -379,10 +387,12 @@ img {
box-shadow: 0px 0px 10px #000;
}
.IMG_GRID {
margin: 0px;
width: 116px;
height: auto;
width: 106px;
padding: 0px;
max-width: 512px;
border-radius: 0px;
margin: 0px 0px -3px 0px;
}
/*
@ -505,30 +515,49 @@ img {
/*
Animations
*/
@keyframes gameFocus {
/* Hint game focus after fpPS4 closes */
@keyframes hintGameFocus {
0% {
box-shadow: 0px 0px 0px #0000;
}
25% {
box-shadow: 0px 0px 10px #fff6;
}
50% {
box-shadow: 0px 0px 0px #0000;
}
75% {
box-shadow: 0px 0px 14px #fffa;
}
100% {
box-shadow: 0px 0px 0px #0000;
}
}
/* Grid Mode: Select App / Game */
@keyframes gridGameFocus {
0% {
box-shadow: 0px 0px 6px #6ca7ffd1;
}
25% {
box-shadow: 0px 0px 10px #b6c0e5aa;
}
50% {
box-shadow: 0px 0px 10px #6ca7ffd1;
}
75% {
box-shadow: 0px 0px 14px #b6c0e5aa;
}
100% {
box-shadow: 0px 0px 6px #6ca7ffd1;
}
}
/*
Misc
*/

25
App/index.htm
View file

@ -64,6 +64,25 @@
</select>
</div>
<!-- Grid Options -->
<div id="DIV_settingsGridOptions">
<div class="SEPARATOR_00"></div>
<div class="DIV_settingsEntry DIV_settingsEntryFlex" id="DIV_settingsGridIconSize">
Grid Icon size:
<input type="range" min="116" max="512" step="0.01" value="116" id="RANGE_settingsGridIconSize" oninput="APP.design.renderSettings(!0);">
<label id="LABEL_settingsGridIconSize">???</label>%
</div>
<div class="DIV_settingsEntry DIV_settingsEntryFlex" id="DIV_settingsGridBorderRadius">
Grid Border-Radius:
<input type="range" min="0" max="26" step="1" value="8" id="RANGE_settingsGridIconBorderRadius" oninput="APP.design.renderSettings(!0);">
<label id="LABEL_settingsGridBorderRadius">???</label>%
</div>
<div class="SEPARATOR_00"></div>
</div>
<div class="DIV_settingsEntry">
Game search mode:
<select id="SELECT_settingsSearchMode" class="SELECT_settings">
@ -72,12 +91,6 @@
</select>
</div>
<div class="DIV_settingsEntry DIV_settingsEntryFlex" id="DIV_settingsGridIconSize">
Grid Icon size:
<input type="range" min="116" max="512" step="0.01" value="116" id="RANGE_settingsGridIconSize" oninput="APP.design.renderSettings(!0);">
<label id="LABEL_settingsGridIconSize">???</label>%
</div>
<div class="DIV_settingsEntry DIV_settingsEntryFlex">
Background Blur:
<input type="range" min="0" max="6" step="0.01" value="2" id="RANGE_settingsGameListBgBlur" oninput="APP.design.renderSettings(!0);">

18
App/js/design.js
View file

@ -53,6 +53,7 @@ temp_DESIGN = {
var appTitle = '',
gameBgAndIcon,
gameEntryStyle = '',
classDisplayEntryMode = '',
appNameClass = 'LABEL_gameTitle',
classGameDetailsMode = 'GAME_DETAILS',
@ -91,14 +92,15 @@ temp_DESIGN = {
appTitle = gList[cGame].name;
classGameDetailsMode = 'none';
classDisplayEntryMode = ' GAME_ENTRY_GRID';
gameEntryStyle = 'border-radius: ' + APP.settings.data.gridBorderRadius + 'px;'
gameBgAndIcon = '<div class="none" style="background-image: ' + bgPath + '";></div><img class="IMG_GAME_ICON IMG_GRID" style="width: ' + gridIconSize + 'px;" src="' + gList[cGame].icon + '">';
}
/*
Add entry
*/
tempHtml = tempHtml + '<div class="GAME_ENTRY' + classDisplayEntryMode + '" title="' + appTitle + '" onclick="APP.design.selectGame(\'' + cGame + '\');" id="GAME_ENTRY_' + cGame + '">' + gameBgAndIcon +
'<div class="' + classGameDetailsMode + '"><label class="' + appNameClass + '">' + gList[cGame].name + '</label>' + gameMetadata + '</div></div>';
tempHtml = tempHtml + '<div class="GAME_ENTRY' + classDisplayEntryMode + '" title="' + appTitle + '" style="' + gameEntryStyle + '" onclick="APP.design.selectGame(\'' + cGame + '\');" id="GAME_ENTRY_' + cGame + '">' +
gameBgAndIcon + '<div class="' + classGameDetailsMode + '"><label class="' + appNameClass + '">' + gList[cGame].name + '</label>' + gameMetadata + '</div></div>';
});
// Insert HTML
@ -107,6 +109,9 @@ temp_DESIGN = {
// Clear BG image
TMS.css('DIV_GAMELIST_BG', {'background-image': 'none'});
// Update GUI
this.update();
},
// Select game
@ -204,8 +209,8 @@ temp_DESIGN = {
btnSettings = 'disabled';
logHeight = 'calc(100% - 400px)';
bgBlur = APP.settings.data.bgEmuBlur;
listCss = {'width': '100%', 'height': '362px'};
bgOpacity = APP.settings.data.bgEmuOpacity;
listCss = {'width': '100%', 'height': '362px'};
optionsCss = {'height': '350px', 'display': 'none'};
}
@ -415,6 +420,7 @@ temp_DESIGN = {
document.getElementById('LABEL_settingsGridIconSize').innerHTML = APP.tools.parsePercentage(cSettings.gridIconSize, 512);
document.getElementById('LABEL_settingsGameListBgOpacity').innerHTML = APP.tools.parsePercentage(cSettings.bgListOpacity, 1);
document.getElementById('LABEL_settingsEmuRunningBgOpacity').innerHTML = APP.tools.parsePercentage(cSettings.bgEmuOpacity, 1);
document.getElementById('LABEL_settingsGridBorderRadius').innerHTML = APP.tools.parsePercentage(cSettings.gridBorderRadius, 26);
// Select
document.getElementById('SELECT_settingsDisplayMode').value = cSettings.gameListMode;
@ -437,6 +443,7 @@ temp_DESIGN = {
document.getElementById('RANGE_settingsEmuRunningBgBlur').value = cSettings.bgEmuBlur;
document.getElementById('RANGE_settingsGameListBgOpacity').value = cSettings.bgListOpacity;
document.getElementById('RANGE_settingsEmuRunningBgOpacity').value = cSettings.bgEmuOpacity;
document.getElementById('RANGE_settingsGridIconBorderRadius').value = cSettings.gridBorderRadius;
// Update settings GUI
this.updateLauncherSettingsGUI();
@ -450,12 +457,12 @@ temp_DESIGN = {
switch (cDisplayMode) {
case 'normal':
TMS.css('DIV_settingsGridIconSize', {'display': 'none'});
TMS.css('DIV_settingsGridOptions', {'display': 'none'});
TMS.css('DIV_settingsShowBgOnGameEntry', {'display': 'flex'});
break;
case 'grid':
TMS.css('DIV_settingsGridIconSize', {'display': 'flex'});
TMS.css('DIV_settingsGridOptions', {'display': 'block'});
TMS.css('DIV_settingsShowBgOnGameEntry', {'display': 'none'});
break;
@ -487,6 +494,7 @@ temp_DESIGN = {
APP.settings.data.bgEmuBlur = parseFloat(document.getElementById('RANGE_settingsEmuRunningBgBlur').value);
APP.settings.data.bgListOpacity = parseFloat(document.getElementById('RANGE_settingsGameListBgOpacity').value);
APP.settings.data.bgEmuOpacity = parseFloat(document.getElementById('RANGE_settingsEmuRunningBgOpacity').value);
APP.settings.data.gridBorderRadius = parseFloat(document.getElementById('RANGE_settingsGridIconBorderRadius').value);
/*
End

3
App/js/gamelist.js
View file

@ -99,6 +99,9 @@ temp_GAMELIST = {
// Check if path exists
if (APP.fs.existsSync(APP.settings.data.gamePath) === !0){
// Reset selected game
this.selectedGame = '';
// Reset search box
document.getElementById('INPUT_gameListSearch').value = '';

2
App/js/main.js
View file

@ -212,7 +212,7 @@ var APP = {
// Scroll game list to last selected game
if (APP.gameList.selectedGame !== ''){
TMS.css('GAME_ENTRY_' + APP.gameList.selectedGame, {'animation': '0.8s gameFocus'});
TMS.css('GAME_ENTRY_' + APP.gameList.selectedGame, {'animation': '0.8s hintGameFocus'});
setTimeout(function(){
APP.design.selectGame(APP.gameList.selectedGame);

3
App/js/settings.js
View file

@ -50,8 +50,9 @@ temp_SETTINGS = {
bgEmuBlur: 6,
bgListBlur: 2,
// (Grid) Icon size
// (Grid)
gridIconSize: 116,
gridBorderRadius: 8,
showBgOnEntry: !0,
showPathEntry: !0,