adjusted screen presentation

Author: Homebrew Games Website

app.js

@@ -136,20 +136,16 @@ class HomebrewGamesApp {
 
         // Update page title and header
         const systemName = this.getSystemDisplayName(system);
-        const statusNames = {
-            'new-games': 'New Games',
-            'ports': 'Ports',
-            're-releases': 'Re-Releases',
-            'in-development': 'In Development'
-        };
-        const statusName = statusNames[status] || status.charAt(0).toUpperCase() + status.slice(1);
-        document.getElementById('page-title').textContent = `${systemName} Games`;
-        document.getElementById('current-system').textContent = systemName;
-        document.getElementById('current-status').textContent = statusName;
-        document.title = `${systemName} ${statusName} Games - Homebrew Games Archive`;
+        const statusKey = `category-${status}`;
+        const statusName = this.translations[statusKey] || status.charAt(0).toUpperCase() + status.slice(1);
+        
+        // Update the title with the new format: "Section name" "System name" "total of games"
+        document.getElementById('page-title').textContent = `${statusName} ${systemName}`;
+        document.title = `${statusName} ${systemName} - Homebrew Games Archive`;
 
         // Filter and display games
         this.filterGames(system, status);
+        this.updateGamesCount();
         this.resetGamesList();
         this.loadMoreGames();
     }
@@ -160,12 +156,12 @@ class HomebrewGamesApp {
             'super-nintendo': 'Super Nintendo',
             'master-system': 'Master System',
             'nes': 'NES',
-            'playstation-1': 'PlayStation',
+            'playstation-1': 'PlayStation 1',
             'nintendo-64': 'Nintendo 64',
             'sega-saturn': 'Sega Saturn',
             'sega-dreamcast': 'Sega Dreamcast'
         };
-        return systemNames[system] || system;
+        return systemNames[system] || system.charAt(0).toUpperCase() + system.slice(1);
     }
 
     async loadGamesData() {
@@ -218,6 +214,7 @@ class HomebrewGamesApp {
         );
         this.sortGames();
         this.hasMoreGames = this.filteredGames.length > 0;
+        this.updateGamesCount();
     }
 
     sortGames() {
@@ -253,6 +250,13 @@ class HomebrewGamesApp {
         });
     }
 
+    updateGamesCount() {
+        const gamesTotalElement = document.getElementById('games-total');
+        if (gamesTotalElement && this.filteredGames) {
+            gamesTotalElement.textContent = this.filteredGames.length;
+        }
+    }
+
     sortByNumbers(a, b, ascending = true) {
         // Extract numbers from strings and sort by them
         const getNumbers = (str) => {

index.html

@@ -183,10 +183,11 @@ <h3 data-translate="system-sega-dreamcast">Sega Dreamcast</h3>
             <div id="games-page" class="page">
                 <div class="page-header">
                     <div class="page-header-top">
-                        <h2 id="page-title">Games</h2>
-                        <div class="filters">
-                            <span id="current-system"></span>
-                            <span id="current-status"></span>
+                        <div class="page-title-section">
+                            <h2 id="page-title">Games</h2>
+                            <div class="games-count">
+                                <span data-translate="games-total-prefix">Total of</span> <span id="games-total">0</span> <span data-translate="games-total-text">games</span>
+                            </div>
                         </div>
                     </div>
                     <div class="sort-controls">

styles.css

@@ -361,22 +361,35 @@ body {
 
 .page-header-top {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: center;
+    align-items: flex-start;
     width: 100%;
 }
 
+.page-title-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
 .page-header h2 {
     font-size: 2rem;
     font-weight: 700;
+    margin: 0;
 }
 
-.filters {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
+.games-count {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    font-weight: 500;
 }
 
+.games-count #games-total {
+    font-weight: 700;
+    color: var(--accent-color);
+}
+
+
 .sort-controls {
     margin-top: 1rem;
     display: flex;
@@ -675,7 +688,7 @@ body {
 
     .page-header-top {
         flex-direction: column;
-        align-items: flex-start;
+        align-items: center;
         gap: 1rem;
         width: 100%;
     }

translations/en.json

@@ -34,5 +34,7 @@
   "category-new-games": "New Games",
   "category-ports": "Ports",
   "category-re-releases": "Re-Releases",
-  "category-in-development": "In Development"
+  "category-in-development": "In Development",
+  "games-total-text": "games",
+  "games-total-prefix": "Total of"
 }

translations/pt.json

@@ -34,5 +34,7 @@
   "category-new-games": "Jogos Novos",
   "category-ports": "Ports",
   "category-re-releases": "Relançamentos",
-  "category-in-development": "Em Desenvolvimento"
+  "category-in-development": "Em Desenvolvimento",
+  "games-total-text": "jogos",
+  "games-total-prefix": "Total de"
 }