No data found.
';
+ return;
+ }
+
+ const tabsMap = new Map<
+ string,
+ { tabName: string; announcements: MapNo announcements found.
';
+ return;
+ }
+
+ for (const [_tabId, tabData] of tabsMap) {
+ const card = document.createElement('div');
+ card.className = 'card mb-4 shadow-sm';
+
+ const cardHeader = document.createElement('div');
+ cardHeader.className = 'card-header bg-secondary text-white fw-bold py-1';
+ cardHeader.textContent = tabData.tabName;
+ card.appendChild(cardHeader);
+
+ const listGroup = document.createElement('ul');
+ listGroup.className = 'list-group list-group-flush';
+
+ const sortedAnnouncements = Array.from(tabData.announcements.values()).sort(
+ (a, b) => parseInt(b.start_ts, 10) - parseInt(a.start_ts, 10),
+ );
+
+ for (const ann of sortedAnnouncements) {
+ const item = document.createElement('li');
+ item.className = 'list-group-item py-2';
+ const date = DateTime.fromMillis(parseInt(ann.start_ts, 10)).toFormat('yyyy/MM/dd HH:mm');
+
+ item.innerHTML = `
+
+ ${date}
+ ${ann.content}
+
+
+ `;
+ listGroup.appendChild(item);
+ }
+ card.appendChild(listGroup);
+ contentDiv.appendChild(card);
+ }
+ } catch (e) {
+ console.warn(`Failed to load ${url}`, e);
+ contentDiv.innerHTML = 'Failed to load data.
';
+ }
+ };
+
+ targetSelect.addEventListener('change', () => {
+ updateLanguages();
+ renderContent();
+ });
+ langSelect.addEventListener('change', renderContent);
+
+ updateLanguages();
+ renderContent();
+ container.appendChild(outerCard);
+}
diff --git a/pages/src/assets/ts/renderers/webPretty/banner.ts b/pages/src/assets/ts/renderers/webPretty/banner.ts
new file mode 100644
index 0000000..7356452
--- /dev/null
+++ b/pages/src/assets/ts/renderers/webPretty/banner.ts
@@ -0,0 +1,175 @@
+import { DateTime } from 'luxon';
+import { fetchJson } from '../../api.js';
+import type { LauncherWebBanner, StoredData } from '../../types.js';
+import { BASE_URL, gameTargets, launcherWebApiLang } from '../../utils/constants.js';
+
+export async function renderBanner(container: HTMLElement) {
+ const outerCard = document.createElement('div');
+ outerCard.className = 'card mb-3';
+
+ const header = document.createElement('div');
+ header.className = 'card-header d-flex justify-content-between align-items-center';
+ header.style.cursor = 'pointer';
+ header.setAttribute('data-bs-toggle', 'collapse');
+ header.setAttribute('data-bs-target', '#collapseBanner');
+ header.setAttribute('role', 'button');
+ header.innerHTML = 'Banner
'; + outerCard.appendChild(header); + + const collapseDiv = document.createElement('div'); + collapseDiv.id = 'collapseBanner'; + collapseDiv.className = 'collapse'; + outerCard.appendChild(collapseDiv); + + const outerCardBody = document.createElement('div'); + outerCardBody.className = 'card-body'; + collapseDiv.appendChild(outerCardBody); + + // --- UI Controls --- + const controls = document.createElement('div'); + controls.className = 'row g-3 mb-4'; + + const targetCol = document.createElement('div'); + targetCol.className = 'col-md-6'; + targetCol.innerHTML = ''; + const targetSelect = document.createElement('select'); + targetSelect.className = 'form-select'; + gameTargets.forEach((target, idx) => { + const option = document.createElement('option'); + option.value = idx.toString(); + option.textContent = `${target.region === 'cn' ? 'China' : 'Global'} - ${target.name}`; + targetSelect.appendChild(option); + }); + targetCol.appendChild(targetSelect); + + const langCol = document.createElement('div'); + langCol.className = 'col-md-6'; + langCol.innerHTML = ''; + const langSelect = document.createElement('select'); + langSelect.className = 'form-select'; + langCol.appendChild(langSelect); + + controls.appendChild(targetCol); + controls.appendChild(langCol); + outerCardBody.appendChild(controls); + + const contentDiv = document.createElement('div'); + outerCardBody.appendChild(contentDiv); + + // --- Logic --- + const updateLanguages = () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const langs = launcherWebApiLang[target.region] || []; + const defaultLang = target.region === 'os' ? 'en-us' : 'zh-cn'; + + langSelect.innerHTML = ''; + langs.forEach((lang) => { + const option = document.createElement('option'); + option.value = lang; + option.textContent = lang; + if (lang === defaultLang) option.selected = true; + langSelect.appendChild(option); + }); + + langCol.style.display = langs.length <= 1 ? 'none' : 'block'; + }; + + const getMirrorUrl = (url: string) => { + try { + const u = new URL(url); + return `https://raw.githubusercontent.com/daydreamer-json/ak-endfield-api-archive/refs/heads/main/output/raw/${u.hostname}${u.pathname}`; + } catch { + return url; + } + }; + + const renderContent = async () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const lang = langSelect.value; + + if (!lang) { + contentDiv.innerHTML = 'No language selected.
';
+ return;
+ }
+
+ contentDiv.innerHTML = 'Loading banners...
';
+
+ const url = `${BASE_URL}/akEndfield/launcher/web/${target.dirName}/banner/${lang}/all.json`;
+ try {
+ const data = await fetchJsonNo data found.
';
+ return;
+ }
+
+ // Collect unique banners by ID from the entire history
+ const bannerMap = new MapNo banners found.
';
+ return;
+ }
+
+ const row = document.createElement('div');
+ row.className = 'row row-cols-1 row-cols-md-3 row-cols-lg-4 g-3';
+ contentDiv.appendChild(row);
+
+ for (const [id, { banner, firstSeen }] of bannerMap) {
+ const col = document.createElement('div');
+ col.className = 'col';
+
+ const dateStr = DateTime.fromISO(firstSeen).toFormat('yyyy/MM/dd HH:mm');
+ const mirrorUrl = getMirrorUrl(banner.url);
+ const linkUrl = banner.jump_url || mirrorUrl;
+
+ col.innerHTML = `
+
+
+
+
+ `;
+ row.appendChild(col);
+ }
+ } catch (e) {
+ console.warn(`Failed to load ${url}`, e);
+ contentDiv.innerHTML = '
+ 
+
+
+ ${banner.need_token ? 'Auth' : ''}
+
+
+
+
+ ID: ${id}
+ ${dateStr}
+
+ Failed to load data.
';
+ }
+ };
+
+ targetSelect.addEventListener('change', () => {
+ updateLanguages();
+ renderContent();
+ });
+ langSelect.addEventListener('change', renderContent);
+
+ updateLanguages();
+ renderContent();
+ container.appendChild(outerCard);
+}
diff --git a/pages/src/assets/ts/renderers/webPretty/mainBgImage.ts b/pages/src/assets/ts/renderers/webPretty/mainBgImage.ts
new file mode 100644
index 0000000..f815104
--- /dev/null
+++ b/pages/src/assets/ts/renderers/webPretty/mainBgImage.ts
@@ -0,0 +1,174 @@
+import { DateTime } from 'luxon';
+import { fetchJson } from '../../api.js';
+import type { LauncherWebMainBgImage, StoredData } from '../../types.js';
+import { BASE_URL, gameTargets, launcherWebApiLang } from '../../utils/constants.js';
+
+export async function renderMainBgImage(container: HTMLElement) {
+ const outerCard = document.createElement('div');
+ outerCard.className = 'card mb-3';
+
+ const header = document.createElement('div');
+ header.className = 'card-header d-flex justify-content-between align-items-center';
+ header.style.cursor = 'pointer';
+ header.setAttribute('data-bs-toggle', 'collapse');
+ header.setAttribute('data-bs-target', '#collapseMainBgImage');
+ header.setAttribute('role', 'button');
+ header.innerHTML = 'Main Background Image
'; + outerCard.appendChild(header); + + const collapseDiv = document.createElement('div'); + collapseDiv.id = 'collapseMainBgImage'; + collapseDiv.className = 'collapse'; + outerCard.appendChild(collapseDiv); + + const outerCardBody = document.createElement('div'); + outerCardBody.className = 'card-body'; + collapseDiv.appendChild(outerCardBody); + + // --- UI Controls --- + const controls = document.createElement('div'); + controls.className = 'row g-3 mb-4'; + + const targetCol = document.createElement('div'); + targetCol.className = 'col-md-6'; + targetCol.innerHTML = ''; + const targetSelect = document.createElement('select'); + targetSelect.className = 'form-select'; + gameTargets.forEach((target, idx) => { + const option = document.createElement('option'); + option.value = idx.toString(); + option.textContent = `${target.region === 'cn' ? 'China' : 'Global'} - ${target.name}`; + targetSelect.appendChild(option); + }); + targetCol.appendChild(targetSelect); + + const langCol = document.createElement('div'); + langCol.className = 'col-md-6'; + langCol.innerHTML = ''; + const langSelect = document.createElement('select'); + langSelect.className = 'form-select'; + langCol.appendChild(langSelect); + + controls.appendChild(targetCol); + controls.appendChild(langCol); + outerCardBody.appendChild(controls); + + const contentDiv = document.createElement('div'); + outerCardBody.appendChild(contentDiv); + + // --- Logic --- + const updateLanguages = () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const langs = launcherWebApiLang[target.region] || []; + const defaultLang = target.region === 'os' ? 'en-us' : 'zh-cn'; + + langSelect.innerHTML = ''; + langs.forEach((lang) => { + const option = document.createElement('option'); + option.value = lang; + option.textContent = lang; + if (lang === defaultLang) option.selected = true; + langSelect.appendChild(option); + }); + + langCol.style.display = langs.length <= 1 ? 'none' : 'block'; + }; + + const getMirrorUrl = (url: string) => { + try { + const u = new URL(url); + return `https://raw.githubusercontent.com/daydreamer-json/ak-endfield-api-archive/refs/heads/main/output/raw/${u.hostname}${u.pathname}`; + } catch { + return url; + } + }; + + const renderContent = async () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const lang = langSelect.value; + + if (!lang) { + contentDiv.innerHTML = 'No language selected.
';
+ return;
+ }
+
+ contentDiv.innerHTML = 'Loading background images...
';
+
+ const url = `${BASE_URL}/akEndfield/launcher/web/${target.dirName}/main_bg_image/${lang}/all.json`;
+ try {
+ const data = await fetchJsonNo data found.
';
+ return;
+ }
+
+ // Collect unique images by MD5 from the entire history
+ const imageMap = new MapNo images found.
';
+ return;
+ }
+
+ const row = document.createElement('div');
+ row.className = 'row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3';
+ contentDiv.appendChild(row);
+
+ for (const [md5, { image, firstSeen }] of imageMap) {
+ const col = document.createElement('div');
+ col.className = 'col';
+
+ const dateStr = DateTime.fromISO(firstSeen).toFormat('yyyy/MM/dd HH:mm');
+ const mirrorUrl = getMirrorUrl(image.url);
+ const linkUrl = image.video_url ? getMirrorUrl(image.video_url) : mirrorUrl;
+
+ col.innerHTML = `
+
+
+
+
+ `;
+ row.appendChild(col);
+ }
+ } catch (e) {
+ console.warn(`Failed to load ${url}`, e);
+ contentDiv.innerHTML = '
+
+
+
+ ${image.video_url ? 'Video' : ''}
+
+
+
+
+ ${md5}
+ ${dateStr}
+
+ Failed to load data.
';
+ }
+ };
+
+ targetSelect.addEventListener('change', () => {
+ updateLanguages();
+ renderContent();
+ });
+ langSelect.addEventListener('change', renderContent);
+
+ updateLanguages();
+ renderContent();
+ container.appendChild(outerCard);
+}
diff --git a/pages/src/assets/ts/renderers/webPretty/sidebar.ts b/pages/src/assets/ts/renderers/webPretty/sidebar.ts
new file mode 100644
index 0000000..81eb8c2
--- /dev/null
+++ b/pages/src/assets/ts/renderers/webPretty/sidebar.ts
@@ -0,0 +1,195 @@
+import { DateTime } from 'luxon';
+import { fetchJson } from '../../api.js';
+import type { LauncherWebSidebar, StoredData } from '../../types.js';
+import { BASE_URL, gameTargets, launcherWebApiLang } from '../../utils/constants.js';
+
+export async function renderSidebar(container: HTMLElement) {
+ const outerCard = document.createElement('div');
+ outerCard.className = 'card mb-3';
+
+ const header = document.createElement('div');
+ header.className = 'card-header d-flex justify-content-between align-items-center';
+ header.style.cursor = 'pointer';
+ header.setAttribute('data-bs-toggle', 'collapse');
+ header.setAttribute('data-bs-target', '#collapseSidebar');
+ header.setAttribute('role', 'button');
+ header.innerHTML = 'Sidebar
'; + outerCard.appendChild(header); + + const collapseDiv = document.createElement('div'); + collapseDiv.id = 'collapseSidebar'; + collapseDiv.className = 'collapse'; + outerCard.appendChild(collapseDiv); + + const outerCardBody = document.createElement('div'); + outerCardBody.className = 'card-body'; + collapseDiv.appendChild(outerCardBody); + + // --- UI Controls --- + const controls = document.createElement('div'); + controls.className = 'row g-3 mb-4'; + + const targetCol = document.createElement('div'); + targetCol.className = 'col-md-6'; + targetCol.innerHTML = ''; + const targetSelect = document.createElement('select'); + targetSelect.className = 'form-select'; + gameTargets.forEach((target, idx) => { + const option = document.createElement('option'); + option.value = idx.toString(); + option.textContent = `${target.region === 'cn' ? 'China' : 'Global'} - ${target.name}`; + targetSelect.appendChild(option); + }); + targetCol.appendChild(targetSelect); + + const langCol = document.createElement('div'); + langCol.className = 'col-md-6'; + langCol.innerHTML = ''; + const langSelect = document.createElement('select'); + langSelect.className = 'form-select'; + langCol.appendChild(langSelect); + + controls.appendChild(targetCol); + controls.appendChild(langCol); + outerCardBody.appendChild(controls); + + const contentDiv = document.createElement('div'); + outerCardBody.appendChild(contentDiv); + + // --- Logic --- + const updateLanguages = () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const langs = launcherWebApiLang[target.region] || []; + const defaultLang = target.region === 'os' ? 'en-us' : 'zh-cn'; + + langSelect.innerHTML = ''; + langs.forEach((lang) => { + const option = document.createElement('option'); + option.value = lang; + option.textContent = lang; + if (lang === defaultLang) option.selected = true; + langSelect.appendChild(option); + }); + + langCol.style.display = langs.length <= 1 ? 'none' : 'block'; + }; + + const getMirrorUrl = (url: string) => { + try { + const u = new URL(url); + return `https://raw.githubusercontent.com/daydreamer-json/ak-endfield-api-archive/refs/heads/main/output/raw/${u.hostname}${u.pathname}`; + } catch { + return url; + } + }; + + const renderContent = async () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const lang = langSelect.value; + + if (!lang) { + contentDiv.innerHTML = 'No language selected.
';
+ return;
+ }
+
+ contentDiv.innerHTML = 'Loading sidebar data...
';
+
+ const url = `${BASE_URL}/akEndfield/launcher/web/${target.dirName}/sidebar/${lang}/all.json`;
+ try {
+ const data = await fetchJsonNo data found.
';
+ return;
+ }
+
+ // Collect the latest sidebar configuration
+ const sortedData = [...data].sort(
+ (a, b) => DateTime.fromISO(b.updatedAt).toMillis() - DateTime.fromISO(a.updatedAt).toMillis(),
+ );
+
+ // We only show the latest version as sidebars are usually state-dependent
+ const latest = sortedData[0];
+ if (!latest || !latest.rsp || !latest.rsp.sidebars) {
+ contentDiv.innerHTML = 'No active sidebars.
';
+ return;
+ }
+
+ contentDiv.innerHTML = '';
+ const row = document.createElement('div');
+ row.className = 'row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3';
+ contentDiv.appendChild(row);
+
+ for (const item of latest.rsp.sidebars) {
+ const col = document.createElement('div');
+ col.className = 'col';
+
+ const card = document.createElement('div');
+ card.className = 'card h-100 shadow-sm';
+
+ let innerHtml = `
+
+
';
+ card.innerHTML = innerHtml;
+ col.appendChild(card);
+ row.appendChild(col);
+ }
+
+ const infoDiv = document.createElement('div');
+ infoDiv.className = 'text-muted small mt-3 text-end';
+ infoDiv.textContent = `Last updated: ${DateTime.fromISO(latest.updatedAt).toFormat('yyyy/MM/dd HH:mm')}`;
+ contentDiv.appendChild(infoDiv);
+ } catch (e) {
+ console.warn(`Failed to load ${url}`, e);
+ contentDiv.innerHTML = '
+
+ `;
+
+ if (item.pic) {
+ innerHtml += `
+ ${item.media}
+ ${item.need_token ? 'Auth' : ''} +
+ })
+
+ `;
+ }
+
+ if (item.jump_url) {
+ innerHtml += `
+ Open Link
+ `;
+ }
+
+ if (item.sidebar_labels && item.sidebar_labels.length > 0) {
+ innerHtml += '
+ ${item.pic.description}
+';
+ for (const label of item.sidebar_labels) {
+ innerHtml += `
+
+ ${label.content}
+
';
+ }
+
+ innerHtml += '
+ ${label.need_token ? 'Auth' : ''}
+
+
+
+ `;
+ }
+ innerHtml += 'Failed to load data.
';
+ }
+ };
+
+ targetSelect.addEventListener('change', () => {
+ updateLanguages();
+ renderContent();
+ });
+ langSelect.addEventListener('change', renderContent);
+
+ updateLanguages();
+ renderContent();
+ container.appendChild(outerCard);
+}
diff --git a/pages/src/assets/ts/renderers/webPretty/singleEnt.ts b/pages/src/assets/ts/renderers/webPretty/singleEnt.ts
new file mode 100644
index 0000000..2a49a22
--- /dev/null
+++ b/pages/src/assets/ts/renderers/webPretty/singleEnt.ts
@@ -0,0 +1,205 @@
+import { DateTime } from 'luxon';
+import { fetchJson } from '../../api.js';
+import type { LauncherWebSingleEnt, StoredData } from '../../types.js';
+import { BASE_URL, gameTargets, launcherWebApiLang } from '../../utils/constants.js';
+
+export async function renderSingleEnt(container: HTMLElement) {
+ const outerCard = document.createElement('div');
+ outerCard.className = 'card mb-3';
+
+ const header = document.createElement('div');
+ header.className = 'card-header d-flex justify-content-between align-items-center';
+ header.style.cursor = 'pointer';
+ header.setAttribute('data-bs-toggle', 'collapse');
+ header.setAttribute('data-bs-target', '#collapseSingleEnt');
+ header.setAttribute('role', 'button');
+ header.innerHTML = 'Single Ent.
'; + outerCard.appendChild(header); + + const collapseDiv = document.createElement('div'); + collapseDiv.id = 'collapseSingleEnt'; + collapseDiv.className = 'collapse'; + outerCard.appendChild(collapseDiv); + + const outerCardBody = document.createElement('div'); + outerCardBody.className = 'card-body'; + collapseDiv.appendChild(outerCardBody); + + // --- UI Controls --- + const controls = document.createElement('div'); + controls.className = 'row g-3 mb-4'; + + const targetCol = document.createElement('div'); + targetCol.className = 'col-md-6'; + targetCol.innerHTML = ''; + const targetSelect = document.createElement('select'); + targetSelect.className = 'form-select'; + gameTargets.forEach((target, idx) => { + const option = document.createElement('option'); + option.value = idx.toString(); + option.textContent = `${target.region === 'cn' ? 'China' : 'Global'} - ${target.name}`; + targetSelect.appendChild(option); + }); + targetCol.appendChild(targetSelect); + + const langCol = document.createElement('div'); + langCol.className = 'col-md-6'; + langCol.innerHTML = ''; + const langSelect = document.createElement('select'); + langSelect.className = 'form-select'; + langCol.appendChild(langSelect); + + controls.appendChild(targetCol); + controls.appendChild(langCol); + outerCardBody.appendChild(controls); + + const contentDiv = document.createElement('div'); + outerCardBody.appendChild(contentDiv); + + // --- Logic --- + const updateLanguages = () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const langs = launcherWebApiLang[target.region] || []; + const defaultLang = target.region === 'os' ? 'en-us' : 'zh-cn'; + + langSelect.innerHTML = ''; + langs.forEach((lang) => { + const option = document.createElement('option'); + option.value = lang; + option.textContent = lang; + if (lang === defaultLang) option.selected = true; + langSelect.appendChild(option); + }); + + langCol.style.display = langs.length <= 1 ? 'none' : 'block'; + }; + + const getMirrorUrl = (url: string) => { + if (!url) return ''; + try { + const u = new URL(url); + return `https://raw.githubusercontent.com/daydreamer-json/ak-endfield-api-archive/refs/heads/main/output/raw/${u.hostname}${u.pathname}`; + } catch { + return url; + } + }; + + const renderContent = async () => { + const targetIdx = parseInt(targetSelect.value, 10); + const target = gameTargets[targetIdx]!; + const lang = langSelect.value; + + if (!lang) { + contentDiv.innerHTML = 'No language selected.
';
+ return;
+ }
+
+ contentDiv.innerHTML = 'Loading single entry data...
';
+
+ const url = `${BASE_URL}/akEndfield/launcher/web/${target.dirName}/single_ent/${lang}/all.json`;
+ try {
+ const data = await fetchJsonNo data found.
';
+ return;
+ }
+
+ // Collect unique visuals by MD5 from the entire history
+ const entMap = new MapNo data found.
';
+ return;
+ }
+
+ const row = document.createElement('div');
+ row.className = 'row row-cols-1 row-cols-md-2 g-4';
+ contentDiv.appendChild(row);
+
+ for (const [_key, { ent, firstSeen }] of entMap) {
+ const col = document.createElement('div');
+ col.className = 'col';
+
+ const card = document.createElement('div');
+ card.className = 'card h-100 shadow-sm';
+
+ let innerHtml = `
+
+
';
+ card.innerHTML = innerHtml;
+ col.appendChild(card);
+ row.appendChild(col);
+ }
+ } catch (e) {
+ console.warn(`Failed to load ${url}`, e);
+ contentDiv.innerHTML = '
+ First seen: ${DateTime.fromISO(firstSeen).toFormat('yyyy/MM/dd HH:mm')}
+ ${ent.need_token ? 'Auth' : ''}
+
+
+
+
+ })
+
+
+ `;
+
+ if (ent.button_url) {
+ innerHtml += `
+ MD5: ${ent.version_md5}
+
+
+
+ `;
+ }
+
+ if (ent.jump_url) {
+ innerHtml += `
+ Jump URL
+ `;
+ }
+
+ innerHtml += '
+
+
+ })
+
+ ${
+ ent.button_hover_url
+ ? `
+ Normal
+
+ })
+
+ `
+ : ''
+ }
+ Hover
+Failed to load data.
';
+ }
+ };
+
+ targetSelect.addEventListener('change', () => {
+ updateLanguages();
+ renderContent();
+ });
+ langSelect.addEventListener('change', renderContent);
+
+ updateLanguages();
+ renderContent();
+ container.appendChild(outerCard);
+}
diff --git a/pages/src/assets/ts/types.ts b/pages/src/assets/ts/types.ts
index 6647c5d..eafb940 100644
--- a/pages/src/assets/ts/types.ts
+++ b/pages/src/assets/ts/types.ts
@@ -9,3 +9,64 @@ export interface StoredData