Focus in setttings menu

Author: yphil-dev

package.json

@@ -1,8 +1,8 @@
 {
     "name": "emulsion",
-    "version": "0.9.52",
+    "version": "0.9.53",
     "summary": "Better gaming throught chemistry",
-    "description": "Emulsion is a modern, responsive game launcher that organizes platforms into galleries, manages game metadata and cover art, and launches titles through configured emulators.",
+    "description": "Display your games collection into responsive galleries and manages game metadata, cover art, and emulator configuration. Launch your games in style.",
     "homepage": "https://yphil.gitlab.io/emulsion",
     "license": "GPLv3",
     "author": {

src/css/form.css

@@ -65,6 +65,10 @@ button {
   outline: 2px solid var(--color-selected);
 }
 
+.input-ctn.focused {
+  outline: 2px solid var(--color-selected);
+}
+
 .button:active {
   transform: translateY(1px);
 }

src/css/gallery.css

@@ -234,6 +234,14 @@ div.dummy-game-container {
   padding: 1em;
 }
 
+div.empty-platform-game-container {
+  margin-top: 10vh;
+}
+
+div.empty-platform-game-container p {
+  color: var(--color-text-2);
+}
+
 .page-content.grid .loading {
   border: 3px solid var(--color-border-on);
   animation: pulse-glow 1s infinite ease-in-out;

src/css/init.css

@@ -250,6 +250,11 @@ svg.big {
 svg.huge {
   width: 12em;
   height: 12em;
+  fill: var(--color-selected);
+}
+
+svg.icon.disabled {
+  fill: #555;
 }
 
 svg.help {

src/js/dialog.js

@@ -542,7 +542,8 @@ export async function downloadMetaDialog(imagesCount, metaCount) {
                 setupButton.addEventListener('click', () => {
                     closeDialog();
                     resolve(null);
-                    openPlatformMenu('settings', 'gallery', sourceName);
+                    const eltToFocus = sourceName === 'GiantBomb' ? 'giantBombAPIKey' : 'steamGridAPIKey';
+                    openPlatformMenu('settings', 'gallery', eltToFocus);
                 });
 
                 if (!isEnabled) {

src/js/gallery.js

@@ -504,13 +504,13 @@ export function buildEmptyPageGameContainer({
             `Configure ${getPlatformInfo(platform).vendor} ${getPlatformInfo(platform).name}`;
         confButton.addEventListener('click', () => openPlatformMenu(platform));
     } else if (context === "no-favorites") {
-        titleP.textContent = 'No favorites yet — go add some!';
+        titleP.innerHTML = 'No <span class="accent">Favorites</span> yet — go add some!';
         subTitleP.textContent = 'Press □ to add the selected game to favorites';
 
         const icon = buildIcon("like", "huge");
         iconP.appendChild(icon);
     } else {
-        titleP.textContent = 'No recents yet — go play!';
+        titleP.innerHTML = 'No <span class="accent">Recents</span> yet — go play!';
 
         const icon = buildIcon("clock", "huge");
         iconP.appendChild(icon);

src/js/menu.js

@@ -196,7 +196,7 @@ function buildPrefsFormItem(name, iconName, type, description, shortDescription,
         const types = type;
 
         const inputCtn = document.createElement('div');
-        inputCtn.classList.add('input-ctn');
+        inputCtn.classList.add('input-ctn', name);
 
         const radiosContainer = document.createElement('div');
         radiosContainer.classList.add('radio-container');
@@ -956,9 +956,13 @@ function buildPlatformMenuForm(platformName) {
 }
 
 export function openPlatformMenu(platformName, context, eltToFocus) {
-
     console.log("platformName, context, eltToFocus: ", platformName, context, eltToFocus);
 
+    if (platformName === 'favorites' || platformName === 'recents') {
+        eltToFocus = platformName === 'recents' ? 'recentlyPlayedPolicy' : 'favoritesPolicy';
+        platformName = 'settings';
+    }
+
     LB.mode = 'menu';
     LB.currentPlatform = platformName;
 
@@ -989,11 +993,29 @@ export function openPlatformMenu(platformName, context, eltToFocus) {
     toggleHeaderNavLinks('hide');
 
     if (platformName === 'settings' && eltToFocus) {
-        const fieldToFocus = document.getElementById(eltToFocus === 'GiantBomb' ? 'giantBombAPIKey' : 'steamGridAPIKey');
-        if (fieldToFocus) {
+        setTimeout(() => focusElement(eltToFocus, menu), 50);
+    }
+}
+
+function focusElement(eltToFocus, menu) {
+    let fieldToFocus = document.getElementById(eltToFocus);
+
+    if (fieldToFocus) {
+        console.log("Found by ID:", fieldToFocus);
+        if (fieldToFocus.tagName === 'INPUT' ||
+            fieldToFocus.tagName === 'TEXTAREA' ||
+            fieldToFocus.tagName === 'SELECT') {
             fieldToFocus.focus();
+            return;
         }
     }
+
+    fieldToFocus = menu.querySelector('.' + eltToFocus);
+    if (fieldToFocus) {
+        console.log("Found by class:", fieldToFocus);
+        fieldToFocus.classList.add('focused');
+        if (fieldToFocus.focus) fieldToFocus.focus();
+    }
 }
 
 async function closeSettingsOrPlatformMenu() {

src/js/slideshow.js

@@ -480,7 +480,6 @@ export function initGallery(platformNameOrIndex, focusIndex = null) {
         }
 
         if (pageDataset.platform === 'recents' || pageDataset.platform === 'favorites') {
-            configPlatformButton.classList.add('disabled');
             metaDataButton.classList.add('disabled');
         }
     }
@@ -938,8 +937,6 @@ export function initGamepad() {
 
 async function setGalleryViewMode(viewMode, save) {
 
-    console.log("viewMode, save: ", viewMode, save);
-
     const toggleIcon = document.getElementById('view-mode-toggle-button');
     const page = document.querySelector('.page.active');
     const pageContent = page.querySelector('.page-content');

src/js/utils.js

@@ -443,8 +443,6 @@ export function updateHeader(platformName, gameName) {
     const header = document.getElementById("header");
     const headerControls = document.getElementById("header-controls");
 
-    console.log("LB.mode: ", LB.mode);
-
     const showHeader = platformName !== 'hide';
     const showControls = !(LB.mode === 'gameMenu' || LB.mode === 'menu' || platformName === 'settings');
 
@@ -500,8 +498,6 @@ export function toggleFullScreen(elem = document.documentElement) {
 
 export async function scanDirectory(gamesDir, extensions, recursive = true, ignoredDirs = ['PS3_EXTRA', 'PKGDIR', 'freezer', 'tmp']) {
 
-    console.log("gamesDir: ", gamesDir);
-
     if (!gamesDir || typeof gamesDir !== 'string') {
         console.warn("scanDirectory: Invalid directory path provided:", gamesDir);
         return [];