Initial commit - v1
This commit is contained in:
Gurpreet Singh
918
index.html
Normal file
918
index.html
Normal file
@@ -0,0 +1,918 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Release Notes Formatter</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
margin: 0;
|
||||
line-height: 1.35;
|
||||
background: #f6f7f9;
|
||||
color: #111;
|
||||
}
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 28px 48px;
|
||||
}
|
||||
.row { display: grid; grid-template-columns: 1fr; gap: 14px; }
|
||||
.card {
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
||||
}
|
||||
.muted { color: #666; font-size: 14px; }
|
||||
.btn {
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover { background: #f2f4f7; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn:active { transform: translateY(1px); }
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
background: #fbfcfe;
|
||||
}
|
||||
.grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
|
||||
@media (min-width: 980px) { .grid2 { grid-template-columns: 1fr 1fr; } }
|
||||
.topbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.navRow { display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.navBtn {
|
||||
padding: 8px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(0,0,0,0.12);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.navBtn:hover { background: #f2f4f7; }
|
||||
.ok { color: #0a7; }
|
||||
.err { color: #b00; white-space: pre-wrap; }
|
||||
.small { font-size: 12px; color: #666; }
|
||||
label { font-weight: 600; }
|
||||
input[type="file"] { padding: 6px; }
|
||||
.ascGrid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
|
||||
@media (min-width: 980px) { .ascGrid { grid-template-columns: 1fr 1fr; } }
|
||||
.singleCol { grid-template-columns: 1fr !important; }
|
||||
.ascBoxHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px; }
|
||||
.ascLocale { font-weight: 700; }
|
||||
.twoCol { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
||||
@media (min-width: 980px) { .twoCol { grid-template-columns: 1fr 1fr; } }
|
||||
.fieldLabel { font-size: 12px; color: #444; font-weight: 700; margin: 0 0 6px 0; }
|
||||
.fieldHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
|
||||
.fieldBox textarea { min-height: 140px; }
|
||||
|
||||
@keyframes uploadFlash {
|
||||
0% { background-color: #eafff6; }
|
||||
100% { background-color: #fff; }
|
||||
}
|
||||
#uploadCard.flash {
|
||||
animation: uploadFlash 5s ease;
|
||||
}
|
||||
|
||||
/* Smooth copy feedback */
|
||||
.btnLabel {
|
||||
display: inline-block;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
.btn.copied {
|
||||
border-color: rgba(0,170,119,0.6);
|
||||
background: #eafff6;
|
||||
}
|
||||
|
||||
/* Section highlight pulse animation */
|
||||
@keyframes sectionPulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(0,170,119,0.0); border-color: rgba(0,0,0,0.08); }
|
||||
20% { box-shadow: 0 0 0 6px rgba(0,170,119,0.22); border-color: rgba(0,170,119,0.55); }
|
||||
60% { box-shadow: 0 0 0 10px rgba(0,170,119,0.10); border-color: rgba(0,170,119,0.35); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(0,170,119,0.0); border-color: rgba(0,0,0,0.08); }
|
||||
}
|
||||
.sectionHighlight {
|
||||
animation: sectionPulse 1.4s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2 style="margin: 0 0 6px 0;">Release Notes Formatter</h2>
|
||||
<p class="muted" style="margin: 0 0 14px 0;">Upload a Gridly CSV export.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="card" id="uploadCard">
|
||||
<div class="topbar">
|
||||
<div>
|
||||
<label for="file">CSV file</label><br/>
|
||||
<input id="file" type="file" accept=".csv,text/csv" />
|
||||
<div id="fileInfo" class="small"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="gameVersion">Game version</label><br/>
|
||||
<input id="gameVersion" type="text" inputmode="decimal" placeholder="e.g. 6.51.0" style="padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.15); background:#fff; min-width: 160px;" />
|
||||
<div id="versionHelp" class="small muted">Used for PlayFab News titles only. Format: x.xx.x</div>
|
||||
</div>
|
||||
<div style="flex:1"></div>
|
||||
<button class="btn" id="btnRefresh" disabled>Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 12px;">
|
||||
<div class="navRow">
|
||||
<button class="navBtn" type="button" data-scroll="googleSection">Google</button>
|
||||
<button class="navBtn" type="button" data-scroll="appleSection">Apple</button>
|
||||
<button class="navBtn" type="button" data-scroll="playfabAdcapSection">Playfab (AdCap)</button>
|
||||
<button class="navBtn" type="button" data-scroll="playfabAdcomSection">Playfab (AdCom/AdAges)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid2">
|
||||
<div class="card" id="googleSection">
|
||||
<div class="topbar" style="justify-content: space-between;">
|
||||
<div>
|
||||
<h3 style="margin:0 0 6px 0;">Google Play output</h3>
|
||||
<div class="muted">Tagged format like <en-US>...</en-US></div>
|
||||
</div>
|
||||
<button class="btn" id="btnCopyGoogle" disabled><span class="btnLabel">Copy</span></button>
|
||||
</div>
|
||||
<textarea id="outGoogle" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="card" id="appleSection">
|
||||
<h3 style="margin:0 0 6px 0;">App Store Connect output</h3>
|
||||
<div id="ascBoxes" class="ascGrid"></div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="playfabAdcapSection">
|
||||
<h3 style="margin:0 0 6px 0;">PlayFab News output (AdCap only)</h3>
|
||||
<div class="muted" style="margin-bottom: 10px;">Add this JSON to: AdCap > TitleData > Primary Title Data > <code>newsfeed_mobile</code> (PlayFab).</div>
|
||||
<div id="adcapHelp" class="small muted" style="margin-bottom: 10px;">Requires a valid game version above. Uses English text only.</div>
|
||||
<div class="topbar" style="justify-content: space-between;">
|
||||
<div class="small muted">Output JSON</div>
|
||||
<button class="btn" id="btnCopyAdcap" disabled><span class="btnLabel">Copy</span></button>
|
||||
</div>
|
||||
<textarea id="outAdcap" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="card" id="playfabAdcomSection">
|
||||
<h3 style="margin:0 0 6px 0;">PlayFab News output (AdCom/AdAges)</h3>
|
||||
<div class="muted">Per-language Title + Body. Requires a valid game version above.</div>
|
||||
<div id="playfabBoxes" class="ascGrid singleCol"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="muted">
|
||||
Notes:
|
||||
<ul>
|
||||
<li>If a locale column is missing or empty, it’s skipped.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 style="margin:0 0 6px 0;">Skipped locales</h3>
|
||||
<div class="muted" style="margin-bottom: 10px;">Shows any expected locales that were missing or empty in the uploaded CSV.</div>
|
||||
<div id="skippedLocales" class="small">Upload a CSV to see results.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Config: map Gridly column headers -> output tags (Google).
|
||||
// Use array-of-pairs so the same Gridly column can be emitted multiple times.
|
||||
const GOOGLE_TAGS = [
|
||||
["English", "en-US"],
|
||||
["Arabic", "ar"],
|
||||
["MSA", "ar"],
|
||||
["German", "de-DE"],
|
||||
["English", "en-GB"],
|
||||
["Spanish (LatAm)", "es-419"],
|
||||
["Spanish (Spain)", "es-ES"],
|
||||
["Spanish (LatAm)", "es-US"],
|
||||
["French (France)", "fr-FR"],
|
||||
["Italian", "it-IT"],
|
||||
["Indonesian", "id"],
|
||||
["Japanese", "ja-JP"],
|
||||
["Korean", "ko-KR"],
|
||||
["Polish", "pl-PL"],
|
||||
["Portuguese (Brazil)", "pt-BR"],
|
||||
["Russian", "ru-RU"],
|
||||
["Turkish", "tr-TR"],
|
||||
["Chinese (Traditional)", "zh-TW"],
|
||||
["Chinese (Simplified)", "zh-CN"],
|
||||
["Chinese (Simplified)", "zh-HK"],
|
||||
["Tr Chinese, Taiwan", "zh-TW"],
|
||||
];
|
||||
|
||||
// App Store Connect order: (display label not used), [possible Gridly columns], output tag
|
||||
const ASC_ORDER = [
|
||||
["English (US)", ["English"], "English (US)"],
|
||||
["Arabic", ["Arabic", "MSA"], "Arabic"],
|
||||
["Chinese Traditional", ["Tr Chinese, Taiwan", "Chinese Traditional", "Chinese (Traditional)", "Traditional Chinese"], "Chinese Traditional"],
|
||||
["Chinese Simplified", ["Chinese Simplified", "Chinese (Simplified)", "Simplified Chinese"], "Chinese Simplified"],
|
||||
["English (Canada)", ["English", "English (Canada)", "English CA"], "English (Canada)"],
|
||||
["French", ["French (France)", "French"], "French"],
|
||||
["German", ["German"], "German"],
|
||||
["Indonesian", ["Indonesian"], "Indonesian"],
|
||||
["Italian", ["Italian"], "Italian"],
|
||||
["Japanese", ["Japanese"], "Japanese"],
|
||||
["Korean", ["Korean"], "Korean"],
|
||||
["Mexican Spanish", ["Spanish (LatAm)", "Spanish (Mexico)", "Mexican Spanish", "Spanish (Spain)"], "Spanish (Mexico)"],
|
||||
["Polish", ["Polish"], "Polish"],
|
||||
["Portuguese", ["Portuguese (Brazil)", "Portuguese"], "Portuguese (Brazil)"],
|
||||
["Russian", ["Russian"], "Russian"],
|
||||
["Spanish Spain", ["Spanish (Spain)"], "Spanish (Spain)"],
|
||||
["Turkish", ["Turkish"], "Turkish"],
|
||||
["English UK", ["English", "English (UK)", "English UK"], "English (UK)"],
|
||||
];
|
||||
|
||||
// PlayFab News language order + templates
|
||||
const PLAYFAB_ORDER = [
|
||||
{ label: "English", columns: ["English"], titleTemplate: "{v} Update Live!" },
|
||||
{ label: "Spanish", columns: ["Spanish (Spain)", "Spanish (LatAm)", "Spanish"], titleTemplate: "¡Actualización {v} disponible!" },
|
||||
{ label: "Portuguese", columns: ["Portuguese (Brazil)", "Portuguese"], titleTemplate: "Atualização {v} disponível!" },
|
||||
{ label: "French", columns: ["French (France)", "French"], titleTemplate: "Mise à jour {v} disponible !" },
|
||||
{ label: "German", columns: ["German"], titleTemplate: "{v} Update Live!" },
|
||||
{ label: "Italian", columns: ["Italian"], titleTemplate: "L'aggiornamento {v} è qui!" },
|
||||
{ label: "Russian", columns: ["Russian"], titleTemplate: "Вышло обновление {v}!" },
|
||||
{ label: "Japanese", columns: ["Japanese"], titleTemplate: "アップデート {v} 配信中！" },
|
||||
{ label: "Korean", columns: ["Korean"], titleTemplate: "업데이트 {v} 라이브!" },
|
||||
{ label: "Turkish", columns: ["Turkish"], titleTemplate: "{v} Güncellemesi Geldi!" },
|
||||
{ label: "Polish", columns: ["Polish"], titleTemplate: "{v} Aktualizacja na żywo!" },
|
||||
{ label: "Latin", columns: ["Spanish (LatAm)", "Spanish (Mexico)", "Mexican Spanish"], titleTemplate: "¡Actualización {v} disponible!" },
|
||||
];
|
||||
|
||||
const fileInput = document.getElementById("file");
|
||||
const fileInfo = document.getElementById("fileInfo");
|
||||
const uploadCard = document.getElementById("uploadCard");
|
||||
const outGoogle = document.getElementById("outGoogle");
|
||||
const ascBoxes = document.getElementById("ascBoxes");
|
||||
const btnCopyGoogle = document.getElementById("btnCopyGoogle");
|
||||
const btnRefresh = document.getElementById("btnRefresh");
|
||||
const skippedLocalesEl = document.getElementById("skippedLocales");
|
||||
const gameVersionInput = document.getElementById("gameVersion");
|
||||
const versionHelpEl = document.getElementById("versionHelp");
|
||||
const playfabBoxes = document.getElementById("playfabBoxes");
|
||||
const outAdcap = document.getElementById("outAdcap");
|
||||
const btnCopyAdcap = document.getElementById("btnCopyAdcap");
|
||||
const adcapHelpEl = document.getElementById("adcapHelp");
|
||||
clearAdcap();
|
||||
function clearAdcap() {
|
||||
outAdcap.value = "";
|
||||
btnCopyAdcap.disabled = true;
|
||||
adcapHelpEl.classList.remove("err");
|
||||
adcapHelpEl.classList.add("muted");
|
||||
adcapHelpEl.textContent = "Requires a valid game version above. Uses English text only.";
|
||||
}
|
||||
|
||||
function buildAdcapJson(rowObj, headers, version) {
|
||||
if (!version || !isValidVersion(version)) return "";
|
||||
|
||||
const normalizedColMap = {};
|
||||
for (const h of headers) normalizedColMap[h.trim()] = h;
|
||||
|
||||
const englishCol = normalizedColMap["English"];
|
||||
const body = englishCol ? normalizeText(rowObj[englishCol]) : "";
|
||||
if (!body) return "";
|
||||
|
||||
const payload = {
|
||||
newsArticleTitle: `${version.trim()} Update Live!`,
|
||||
newsArticleBody: body,
|
||||
};
|
||||
|
||||
return JSON.stringify(payload, null, 2);
|
||||
}
|
||||
|
||||
function renderAdcap(rowObj, headers, version) {
|
||||
const json = buildAdcapJson(rowObj, headers, version);
|
||||
|
||||
if (!json) {
|
||||
clearAdcap();
|
||||
if ((version || "").trim() && !isValidVersion(version)) {
|
||||
adcapHelpEl.textContent = "Invalid version format. Use x.xx.x (e.g. 6.51.0).";
|
||||
adcapHelpEl.classList.remove("muted");
|
||||
adcapHelpEl.classList.add("err");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
outAdcap.value = json;
|
||||
btnCopyAdcap.disabled = false;
|
||||
}
|
||||
function isValidVersion(v) {
|
||||
// x.xx.x where the middle is exactly 2 digits (per requirement)
|
||||
return /^\d+\.\d{2}\.\d+$/.test(v.trim());
|
||||
}
|
||||
|
||||
function getPlayfabTitle(template, version) {
|
||||
return template.replaceAll("{v}", version);
|
||||
}
|
||||
|
||||
function pickFirstNonEmpty(rowObj, normalizedColMap, possibleCols) {
|
||||
for (const c of possibleCols) {
|
||||
const actualCol = normalizedColMap[c.trim()];
|
||||
if (!actualCol) continue;
|
||||
const t = normalizeText(rowObj[actualCol]);
|
||||
if (t) return t;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function clearPlayfab() {
|
||||
playfabBoxes.innerHTML = "";
|
||||
}
|
||||
|
||||
function renderPlayfabBoxes(rowObj, headers, version) {
|
||||
clearPlayfab();
|
||||
|
||||
if (!version || !isValidVersion(version)) {
|
||||
// show nothing if version missing/invalid
|
||||
return;
|
||||
}
|
||||
|
||||
// map trimmed header -> actual header
|
||||
const normalizedColMap = {};
|
||||
for (const h of headers) normalizedColMap[h.trim()] = h;
|
||||
|
||||
let any = false;
|
||||
|
||||
for (const item of PLAYFAB_ORDER) {
|
||||
const body = pickFirstNonEmpty(rowObj, normalizedColMap, item.columns);
|
||||
if (!body) continue; // skip if body missing
|
||||
|
||||
any = true;
|
||||
const title = getPlayfabTitle(item.titleTemplate, version.trim());
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "ascBoxHeader";
|
||||
|
||||
const locale = document.createElement("div");
|
||||
locale.className = "ascLocale";
|
||||
locale.textContent = item.label;
|
||||
|
||||
header.appendChild(locale);
|
||||
card.appendChild(header);
|
||||
|
||||
const grid = document.createElement("div");
|
||||
grid.style.display = "grid";
|
||||
grid.style.gridTemplateColumns = "1fr";
|
||||
grid.style.gap = "12px";
|
||||
|
||||
// Title box
|
||||
{
|
||||
const wrap = document.createElement("div");
|
||||
const headerRow = document.createElement("div");
|
||||
headerRow.className = "fieldHeader";
|
||||
|
||||
const lbl = document.createElement("div");
|
||||
lbl.className = "fieldLabel";
|
||||
lbl.textContent = "Title";
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "btn";
|
||||
btn.innerHTML = '<span class="btnLabel">Copy</span>';
|
||||
btn.addEventListener("click", async () => {
|
||||
try {
|
||||
await copyToClipboard(title);
|
||||
pulseCopied(btn);
|
||||
setStatus(`✅ Copied PlayFab ${item.label} title`, "ok");
|
||||
} catch {
|
||||
setStatus("❌ Could not copy. Select and copy manually.", "err");
|
||||
}
|
||||
});
|
||||
|
||||
headerRow.appendChild(lbl);
|
||||
headerRow.appendChild(btn);
|
||||
|
||||
const ta = document.createElement("textarea");
|
||||
ta.readOnly = true;
|
||||
ta.value = title;
|
||||
ta.rows = 1;
|
||||
ta.style.minHeight = "40px";
|
||||
|
||||
wrap.className = "fieldBox";
|
||||
wrap.appendChild(headerRow);
|
||||
wrap.appendChild(ta);
|
||||
grid.appendChild(wrap);
|
||||
}
|
||||
|
||||
// Body box
|
||||
{
|
||||
const wrap = document.createElement("div");
|
||||
const headerRow = document.createElement("div");
|
||||
headerRow.className = "fieldHeader";
|
||||
|
||||
const lbl = document.createElement("div");
|
||||
lbl.className = "fieldLabel";
|
||||
lbl.textContent = "Body";
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "btn";
|
||||
btn.innerHTML = '<span class="btnLabel">Copy</span>';
|
||||
btn.addEventListener("click", async () => {
|
||||
try {
|
||||
await copyToClipboard(body);
|
||||
pulseCopied(btn);
|
||||
setStatus(`✅ Copied PlayFab ${item.label} body`, "ok");
|
||||
} catch {
|
||||
setStatus("❌ Could not copy. Select and copy manually.", "err");
|
||||
}
|
||||
});
|
||||
|
||||
headerRow.appendChild(lbl);
|
||||
headerRow.appendChild(btn);
|
||||
|
||||
const ta = document.createElement("textarea");
|
||||
ta.readOnly = true;
|
||||
ta.value = body;
|
||||
ta.style.minHeight = "120px";
|
||||
|
||||
wrap.className = "fieldBox";
|
||||
wrap.appendChild(headerRow);
|
||||
wrap.appendChild(ta);
|
||||
grid.appendChild(wrap);
|
||||
}
|
||||
|
||||
card.appendChild(grid);
|
||||
playfabBoxes.appendChild(card);
|
||||
}
|
||||
|
||||
// If nothing rendered, keep empty (no message), per requirement.
|
||||
if (!any) {
|
||||
clearPlayfab();
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(_msg, _type="") {
|
||||
// Status UI removed; keep function so existing calls don't error.
|
||||
}
|
||||
|
||||
function isCharCountCol(name) {
|
||||
const c = (name || "").trim().toLowerCase();
|
||||
return c.endsWith(" chars") || c.endsWith(" chrs");
|
||||
}
|
||||
|
||||
function normalizeText(s) {
|
||||
if (s == null) return "";
|
||||
return String(s).replaceAll("\\n", "\n").replaceAll("\r\n", "\n").trim();
|
||||
}
|
||||
|
||||
// Simple CSV parser that handles quotes + commas + newlines.
|
||||
// (Good enough for typical Gridly exports; if you run into edge cases,
|
||||
// you can swap this with PapaParse later.)
|
||||
function parseCSV(text) {
|
||||
const rows = [];
|
||||
let row = [];
|
||||
let cell = "";
|
||||
let inQuotes = false;
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const ch = text[i];
|
||||
const next = text[i + 1];
|
||||
|
||||
if (inQuotes) {
|
||||
if (ch === '"' && next === '"') { // escaped quote
|
||||
cell += '"';
|
||||
i++;
|
||||
} else if (ch === '"') {
|
||||
inQuotes = false;
|
||||
} else {
|
||||
cell += ch;
|
||||
}
|
||||
} else {
|
||||
if (ch === '"') {
|
||||
inQuotes = true;
|
||||
} else if (ch === ',') {
|
||||
row.push(cell);
|
||||
cell = "";
|
||||
} else if (ch === '\n') {
|
||||
row.push(cell);
|
||||
rows.push(row);
|
||||
row = [];
|
||||
cell = "";
|
||||
} else if (ch === '\r') {
|
||||
// ignore
|
||||
} else {
|
||||
cell += ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
// last cell
|
||||
row.push(cell);
|
||||
rows.push(row);
|
||||
// remove trailing empty rows
|
||||
while (rows.length && rows[rows.length - 1].every(v => String(v || "").trim() === "")) rows.pop();
|
||||
return rows;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function renderSkippedLocales(missingCols, emptyCols) {
|
||||
if ((!missingCols || missingCols.length === 0) && (!emptyCols || emptyCols.length === 0)) {
|
||||
skippedLocalesEl.innerHTML = '<span class="ok">✅ No skipped locales.</span>';
|
||||
return;
|
||||
}
|
||||
|
||||
const parts = [];
|
||||
|
||||
if (missingCols && missingCols.length) {
|
||||
parts.push(
|
||||
'<div style="margin-bottom:8px;"><b>Missing columns</b><div class="small muted">Not present in the CSV headers.</div></div>' +
|
||||
'<div style="margin-bottom:12px;">' +
|
||||
missingCols.map(c => `<code>${escapeHtml(c)}</code>`).join(' ') +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
if (emptyCols && emptyCols.length) {
|
||||
parts.push(
|
||||
'<div style="margin-bottom:8px;"><b>Empty values</b><div class="small muted">Column exists but the selected row is blank.</div></div>' +
|
||||
'<div>' +
|
||||
emptyCols.map(c => `<code>${escapeHtml(c)}</code>`).join(' ') +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
skippedLocalesEl.innerHTML = parts.join('');
|
||||
}
|
||||
|
||||
function findFirstMeaningfulRow(objects, headers) {
|
||||
for (const obj of objects) {
|
||||
let hasText = false;
|
||||
for (const h of headers) {
|
||||
if (h === "Record ID" || isCharCountCol(h)) continue;
|
||||
if (normalizeText(obj[h])) { hasText = true; break; }
|
||||
}
|
||||
if (hasText) return obj;
|
||||
}
|
||||
return objects[0] || null;
|
||||
}
|
||||
|
||||
function buildOutputs(rowObj, headers) {
|
||||
// map trimmed header -> actual header (tolerate whitespace)
|
||||
const normalizedColMap = {};
|
||||
for (const h of headers) normalizedColMap[h.trim()] = h;
|
||||
|
||||
const missingCols = [];
|
||||
const emptyCols = [];
|
||||
|
||||
// GOOGLE
|
||||
const googleBlocks = [];
|
||||
for (const [gridlyCol, tag] of GOOGLE_TAGS) {
|
||||
const actualCol = normalizedColMap[gridlyCol.trim()];
|
||||
if (!actualCol) {
|
||||
missingCols.push(gridlyCol);
|
||||
continue;
|
||||
}
|
||||
const text = normalizeText(rowObj[actualCol]);
|
||||
if (!text) {
|
||||
emptyCols.push(gridlyCol);
|
||||
continue;
|
||||
}
|
||||
googleBlocks.push(`<${tag}>\n${text}\n</${tag}>`);
|
||||
}
|
||||
|
||||
// APP STORE CONNECT (structured + ordered)
|
||||
const ascItems = [];
|
||||
for (const [_label, possibleCols, tag] of ASC_ORDER) {
|
||||
let found = "";
|
||||
let sawAnyColumn = false;
|
||||
let sawAnyNonEmpty = false;
|
||||
|
||||
for (const c of possibleCols) {
|
||||
const actualCol = normalizedColMap[c.trim()];
|
||||
if (!actualCol) continue;
|
||||
sawAnyColumn = true;
|
||||
const t = normalizeText(rowObj[actualCol]);
|
||||
if (t) {
|
||||
sawAnyNonEmpty = true;
|
||||
found = t;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!found) {
|
||||
// Pick the first name as the representative for reporting
|
||||
const representative = possibleCols[0];
|
||||
if (!sawAnyColumn) missingCols.push(representative);
|
||||
else if (!sawAnyNonEmpty) emptyCols.push(representative);
|
||||
continue;
|
||||
}
|
||||
|
||||
ascItems.push({ tag, text: found });
|
||||
}
|
||||
|
||||
const uniq = (arr) => Array.from(new Set(arr));
|
||||
|
||||
return {
|
||||
google: googleBlocks.join("\n\n"),
|
||||
asc: ascItems,
|
||||
skipped: {
|
||||
missing: uniq(missingCols),
|
||||
empty: uniq(emptyCols),
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function copyToClipboard(text) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
}
|
||||
|
||||
|
||||
function flashUploadCard() {
|
||||
if (!uploadCard) return;
|
||||
uploadCard.classList.remove("flash");
|
||||
void uploadCard.offsetHeight; // restart animation
|
||||
uploadCard.classList.add("flash");
|
||||
}
|
||||
|
||||
function pulseCopied(btn, doneText = "✓") {
|
||||
if (!btn) return;
|
||||
|
||||
const labelEl = btn.querySelector(".btnLabel");
|
||||
const hasLabel = !!labelEl;
|
||||
const prevText = hasLabel ? labelEl.textContent : btn.textContent;
|
||||
|
||||
btn.classList.add("copied");
|
||||
|
||||
const fadeOut = () => {
|
||||
if (!hasLabel) return;
|
||||
labelEl.style.opacity = "0";
|
||||
labelEl.style.transform = "scale(0.98)";
|
||||
};
|
||||
|
||||
const fadeIn = (scale = "1.08") => {
|
||||
if (!hasLabel) return;
|
||||
labelEl.style.opacity = "1";
|
||||
labelEl.style.transform = `scale(${scale})`;
|
||||
};
|
||||
|
||||
// Swap to check
|
||||
fadeOut();
|
||||
window.setTimeout(() => {
|
||||
if (hasLabel) labelEl.textContent = doneText;
|
||||
else btn.textContent = doneText;
|
||||
fadeIn("1.08");
|
||||
}, 140);
|
||||
|
||||
// Revert after 2.5s
|
||||
window.setTimeout(() => {
|
||||
fadeOut();
|
||||
window.setTimeout(() => {
|
||||
if (hasLabel) labelEl.textContent = prevText;
|
||||
else btn.textContent = prevText;
|
||||
fadeIn("1.0");
|
||||
btn.classList.remove("copied");
|
||||
}, 140);
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
|
||||
function renderAscBoxes(items) {
|
||||
// items: [{ tag: "en-US", text: "...." }, ...]
|
||||
ascBoxes.innerHTML = "";
|
||||
|
||||
if (!items.length) {
|
||||
ascBoxes.innerHTML = `<div class="muted">No App Store locales found in the CSV.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
for (const { tag, text } of items) {
|
||||
const block = text;
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "ascBoxHeader";
|
||||
|
||||
const locale = document.createElement("div");
|
||||
locale.className = "ascLocale";
|
||||
locale.textContent = tag;
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "btn";
|
||||
btn.innerHTML = '<span class="btnLabel">Copy</span>';
|
||||
btn.addEventListener("click", async () => {
|
||||
try {
|
||||
await copyToClipboard(block);
|
||||
pulseCopied(btn);
|
||||
setStatus(`✅ Copied ${tag} App Store block`, "ok");
|
||||
} catch {
|
||||
setStatus("❌ Could not copy (browser blocked clipboard). Select text and copy manually.", "err");
|
||||
}
|
||||
});
|
||||
|
||||
header.appendChild(locale);
|
||||
header.appendChild(btn);
|
||||
|
||||
const ta = document.createElement("textarea");
|
||||
ta.readOnly = true;
|
||||
ta.value = block;
|
||||
|
||||
card.appendChild(header);
|
||||
card.appendChild(ta);
|
||||
ascBoxes.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
function getAllAscCombinedText() {
|
||||
const blocks = Array.from(ascBoxes.querySelectorAll("textarea")).map(t => t.value);
|
||||
return blocks.join("\n\n");
|
||||
}
|
||||
|
||||
// Helper to regenerate all outputs from a stored payload
|
||||
function regenerateFromPayload(payload) {
|
||||
if (!payload) return;
|
||||
|
||||
const { rowObj, headers, recordId } = payload;
|
||||
|
||||
const { google, asc, skipped } = buildOutputs(rowObj, headers);
|
||||
|
||||
outGoogle.value = google;
|
||||
renderAscBoxes(asc);
|
||||
renderSkippedLocales(skipped.missing, skipped.empty);
|
||||
btnCopyGoogle.disabled = !google;
|
||||
|
||||
const version = (gameVersionInput.value || "").trim();
|
||||
renderPlayfabBoxes(rowObj, headers, version);
|
||||
renderAdcap(rowObj, headers, version);
|
||||
|
||||
// Version help text (non-blocking)
|
||||
if (version && !isValidVersion(version)) {
|
||||
versionHelpEl.textContent = "Invalid version format. Use x.xx.x (e.g. 6.51.0). PlayFab output hidden.";
|
||||
versionHelpEl.classList.remove("muted");
|
||||
versionHelpEl.classList.add("err");
|
||||
} else {
|
||||
versionHelpEl.textContent = "Used for PlayFab News titles only. Format: x.xx.x";
|
||||
versionHelpEl.classList.remove("err");
|
||||
versionHelpEl.classList.add("muted");
|
||||
}
|
||||
|
||||
flashUploadCard();
|
||||
|
||||
setStatus(`✅ Generated output${recordId ? ` (Record ID: ${recordId})` : ""}`, "ok");
|
||||
}
|
||||
|
||||
fileInput.addEventListener("change", async () => {
|
||||
const file = fileInput.files?.[0];
|
||||
outGoogle.value = "";
|
||||
ascBoxes.innerHTML = "";
|
||||
btnCopyGoogle.disabled = true;
|
||||
btnRefresh.disabled = true;
|
||||
skippedLocalesEl.textContent = "Upload a CSV to see results.";
|
||||
clearPlayfab();
|
||||
clearAdcap();
|
||||
|
||||
if (!file) return;
|
||||
|
||||
fileInfo.textContent = `${file.name} (${Math.round(file.size/1024)} KB)`;
|
||||
setStatus("Reading CSV...", "small");
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
const grid = parseCSV(text);
|
||||
|
||||
if (grid.length < 2) {
|
||||
throw new Error("CSV doesn’t look like it has a header row + data row.");
|
||||
}
|
||||
|
||||
const headers = grid[0].map(h => String(h ?? "").trim());
|
||||
const dataRows = grid.slice(1);
|
||||
|
||||
// Convert to objects
|
||||
const objects = dataRows
|
||||
.filter(r => r.some(v => String(v ?? "").trim() !== ""))
|
||||
.map(r => {
|
||||
const obj = {};
|
||||
for (let i = 0; i < headers.length; i++) obj[headers[i]] = r[i] ?? "";
|
||||
return obj;
|
||||
});
|
||||
|
||||
const rowObj = findFirstMeaningfulRow(objects, headers);
|
||||
if (!rowObj) throw new Error("No usable data row found in CSV.");
|
||||
|
||||
const recordId = normalizeText(rowObj["Record ID"] || "");
|
||||
const { google, asc, skipped } = buildOutputs(rowObj, headers);
|
||||
|
||||
outGoogle.value = google;
|
||||
renderAscBoxes(asc);
|
||||
renderSkippedLocales(skipped.missing, skipped.empty);
|
||||
|
||||
btnCopyGoogle.disabled = !google;
|
||||
|
||||
// ---- PlayFab output ----
|
||||
const version = (gameVersionInput.value || "").trim();
|
||||
renderPlayfabBoxes(rowObj, headers, version);
|
||||
renderAdcap(rowObj, headers, version);
|
||||
|
||||
// Update help text styling (non-blocking)
|
||||
if (version && !isValidVersion(version)) {
|
||||
versionHelpEl.textContent = "Invalid version format. Use x.xx.x (e.g. 6.51.0). PlayFab output hidden.";
|
||||
versionHelpEl.classList.remove("muted");
|
||||
versionHelpEl.classList.add("err");
|
||||
} else {
|
||||
versionHelpEl.textContent = "Used for PlayFab News titles only. Format: x.xx.x";
|
||||
versionHelpEl.classList.remove("err");
|
||||
versionHelpEl.classList.add("muted");
|
||||
}
|
||||
|
||||
window.__lastParsedPayload = { rowObj, headers, recordId };
|
||||
btnRefresh.disabled = false;
|
||||
flashUploadCard();
|
||||
|
||||
flashUploadCard();
|
||||
|
||||
setStatus(`✅ Generated output${recordId ? ` (Record ID: ${recordId})` : ""}`, "ok");
|
||||
} catch (e) {
|
||||
setStatus(`❌ ${e.message || e}`, "err");
|
||||
}
|
||||
});
|
||||
|
||||
btnCopyGoogle.addEventListener("click", async () => {
|
||||
try {
|
||||
await copyToClipboard(outGoogle.value);
|
||||
pulseCopied(btnCopyGoogle);
|
||||
setStatus("✅ Copied Google output to clipboard", "ok");
|
||||
} catch {
|
||||
setStatus("❌ Could not copy (browser blocked clipboard). Select text and copy manually.", "err");
|
||||
}
|
||||
});
|
||||
|
||||
btnCopyAdcap.addEventListener("click", async () => {
|
||||
try {
|
||||
await copyToClipboard(outAdcap.value);
|
||||
pulseCopied(btnCopyAdcap);
|
||||
setStatus("✅ Copied AdCap JSON to clipboard", "ok");
|
||||
} catch {
|
||||
setStatus("❌ Could not copy (browser blocked clipboard). Select text and copy manually.", "err");
|
||||
}
|
||||
});
|
||||
|
||||
btnRefresh.addEventListener("click", () => {
|
||||
const payload = window.__lastParsedPayload;
|
||||
if (!payload) return;
|
||||
regenerateFromPayload(payload);
|
||||
});
|
||||
|
||||
gameVersionInput.addEventListener("input", () => {
|
||||
const payload = window.__lastParsedPayload;
|
||||
if (!payload) {
|
||||
clearPlayfab();
|
||||
clearAdcap();
|
||||
return;
|
||||
}
|
||||
regenerateFromPayload(payload);
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Section navigation buttons scroll + highlight
|
||||
document.querySelectorAll('[data-scroll]').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.getAttribute('data-scroll');
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
|
||||
// Remove highlight from any previously highlighted section
|
||||
document.querySelectorAll('.sectionHighlight').forEach((x) => x.classList.remove('sectionHighlight'));
|
||||
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
|
||||
// Wait briefly for the scroll to settle, then pulse-highlight the card
|
||||
window.setTimeout(() => {
|
||||
el.classList.remove('sectionHighlight');
|
||||
void el.offsetHeight; // restart animation
|
||||
el.classList.add('sectionHighlight');
|
||||
|
||||
// Clean up the class after the animation finishes
|
||||
window.setTimeout(() => {
|
||||
el.classList.remove('sectionHighlight');
|
||||
}, 1500);
|
||||
}, 250);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user