refactor: remove duplicated code

Author: ReenigneArcher

eslint.config.mjs

@@ -20,6 +20,7 @@ export default [
                 "base_url": "readonly",
                 "base_path": "readonly",
                 "igdbImageUrl": "readonly",
+                "getRegionFlag": "readonly",
                 "makeBadge": "readonly",
                 "addDlRow": "readonly",
                 "loadItemDetail": "readonly",

gh-pages-template/assets/js/collection_detail.js

@@ -434,27 +434,6 @@ function renderCharacters(data) {
     }
 }
 
-/**
- * Map region string (from release_region.region) to an emoji flag.
- * @param {string} regionName
- * @returns {string}
- */
-function getRegionFlag(regionName) {
-    const map = {
-        "europe": "🇪🇺",
-        "north_america": "🇺🇸",
-        "australia": "🇦🇺",
-        "new_zealand": "🇳🇿",
-        "japan": "🇯🇵",
-        "china": "🇨🇳",
-        "asia": "🌏",
-        "worldwide": "🌍",
-        "korea": "🇰🇷",
-        "brazil": "🇧🇷",
-    };
-    return map[regionName] || "🌐";
-}
-
 /**
  * Initialize game banner with cycling images (mimics beautiful-jekyll-next behavior)
  */
@@ -551,7 +530,6 @@ if (typeof module !== "undefined") {
         renderVideos,
         renderExternalLinks,
         renderCharacters,
-        getRegionFlag,
         initGameBanner,
     };
 }

gh-pages-template/assets/js/franchise_detail.js

@@ -0,0 +1,62 @@
+/**
+ * group_detail.js
+ * Renders a single collection (series) or franchise detail page.
+ * Depends on item_detail.js being loaded first.
+ *
+ * The page must define a `GAMEDB_GROUP_TYPE` global before loading this script:
+ *   <script>globalThis.GAMEDB_GROUP_TYPE = "collection";</script>  (for collections)
+ *   <script>globalThis.GAMEDB_GROUP_TYPE = "franchise";</script>   (for franchises)
+ *
+ * Expected DOM element IDs follow the pattern `<type>-*`, e.g.:
+ *   collection-name, collection-igdb-link, collection-games-section, collection-games
+ *   franchise-name,  franchise-igdb-link,  franchise-games-section,  franchise-games
+ */
+
+const GROUP_CONFIG = {
+    collection: {
+        endpoint: "collections",
+        defaultTitle: "Series",
+        defaultName: "Unknown Series",
+    },
+    franchise: {
+        endpoint: "franchises",
+        defaultTitle: "Franchise",
+        defaultName: "Unknown Franchise",
+    },
+};
+
+function renderGroup(data) {
+    const type = globalThis.GAMEDB_GROUP_TYPE || "collection";
+    const config = GROUP_CONFIG[type];
+
+    document.title = (data.name || config.defaultTitle) + " – GameDB";
+    document.getElementById(`${type}-name`).textContent = data.name || config.defaultName;
+
+    // IGDB link
+    if (data.url) {
+        const igdbLink = document.getElementById(`${type}-igdb-link`);
+        igdbLink.href = data.url;
+        igdbLink.classList.remove("d-none");
+    }
+
+    // Games
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById(`${type}-games-section`);
+        section.classList.remove("d-none");
+        renderGameList(document.getElementById(`${type}-games`), data.games);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const type = globalThis.GAMEDB_GROUP_TYPE || "collection";
+    const config = GROUP_CONFIG[type];
+    loadItemDetail(config.endpoint, renderGroup);
+});
+
+/* istanbul ignore next */
+if (typeof module !== "undefined") {
+    module.exports = {
+        GROUP_CONFIG,
+        renderGroup,
+    };
+}

gh-pages-template/assets/js/game_detail.js

@@ -10,6 +10,27 @@
  *   window.GAMEDB_CONFIG = { base_path: "{{ site.baseurl }}", base_url: "{{ site.url }}{{ site.baseurl }}" };
  */
 
+/**
+ * Map a release region string (from release_region.region) to an emoji flag.
+ * @param {string} regionName
+ * @returns {string}
+ */
+function getRegionFlag(regionName) {
+    const map = {
+        "europe": "🇪🇺",
+        "north_america": "🇺🇸",
+        "australia": "🇦🇺",
+        "new_zealand": "🇳🇿",
+        "japan": "🇯🇵",
+        "china": "🇨🇳",
+        "asia": "🌏",
+        "worldwide": "🌍",
+        "korea": "🇰🇷",
+        "brazil": "🇧🇷",
+    };
+    return map[regionName] || "🌐";
+}
+
 const base_path = (globalThis.GAMEDB_CONFIG?.base_path
     ? ("/" + globalThis.GAMEDB_CONFIG.base_path).replaceAll(/\/+/g, "/").replace(/\/$/, "")
     : "/GameDB");
@@ -235,6 +256,7 @@ if (typeof module !== "undefined") {
     module.exports = {
         getQueryParam,
         igdbImageUrl,
+        getRegionFlag,
         makeBadge,
         addDlRow,
         showError,

gh-pages-template/assets/js/group_detail.js

@@ -26,22 +26,6 @@ const CATEGORY_NAMES = {
     6: "Computer",
 };
 
-function getRegionFlag(regionName) {
-    const map = {
-        "europe": "🇪🇺",
-        "north_america": "🇺🇸",
-        "australia": "🇦🇺",
-        "new_zealand": "🇳🇿",
-        "japan": "🇯🇵",
-        "china": "🇨🇳",
-        "asia": "🌏",
-        "worldwide": "🌍",
-        "korea": "🇰🇷",
-        "brazil": "🇧🇷",
-    };
-    return map[regionName] || "🌐";
-}
-
 /**
  * Render platform logo or placeholder
  */
@@ -257,7 +241,6 @@ document.addEventListener("DOMContentLoaded", () => {
 /* istanbul ignore next */
 if (typeof module !== "undefined") {
     module.exports = {
-        getRegionFlag,
         renderPlatformLogo,
         renderPlatformBadges,
         renderPlatformMetadata,

gh-pages-template/assets/js/item_detail.js

@@ -6,7 +6,7 @@
   - /assets/css/hide-heading.css
 js:
   - /GameDB/assets/js/item_detail.js
-  - /GameDB/assets/js/collection_detail.js
+  - /GameDB/assets/js/group_detail.js
 ext-css:
   - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
 ---
@@ -15,6 +15,7 @@
 globalThis.GAMEDB_CONFIG = {
   base_path: "{{ site.baseurl }}"
 };
+globalThis.GAMEDB_GROUP_TYPE = "collection";
 </script>
 
 <div id="item-loading" class="text-center py-5">

gh-pages-template/assets/js/platform_detail.js

@@ -6,7 +6,7 @@
   - /assets/css/hide-heading.css
 js:
   - /GameDB/assets/js/item_detail.js
-  - /GameDB/assets/js/franchise_detail.js
+  - /GameDB/assets/js/group_detail.js
 ext-css:
   - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
 ---
@@ -15,6 +15,7 @@
 globalThis.GAMEDB_CONFIG = {
   base_path: "{{ site.baseurl }}"
 };
+globalThis.GAMEDB_GROUP_TYPE = "franchise";
 </script>
 
 <div id="item-loading" class="text-center py-5">