@@ -285,8 +294,8 @@ async function waitForFonts(ms) {
const fonts = document.fonts;
if (!fonts || typeof fonts.load !== 'function') return;
const loads = [
- fonts.load('900 1em "Noto Sans SC"', '卫戍协议盟约'),
- fonts.load('700 1em "Noto Sans SC"', '开始'),
+ fonts.load('900 1em "Noto Sans SC"', '卫戍协议盟约'), // i18n-ignore (font sample)
+ fonts.load('700 1em "Noto Sans SC"', '开始'), // i18n-ignore (font sample)
fonts.load('700 1em Bender', '0123456789'),
fonts.load('700 1em Rajdhani', '0123456789'),
].map((p) => p.catch(() => null));
@@ -301,7 +310,7 @@ function installGlobalErrorHandlers() {
if (err && (err.name === 'NotAllowedError' || err.name === 'AbortError')) { console.warn('[app] ignored rejection', err.name); return; }
console.error('[app] unhandled rejection', err);
if (err instanceof NetError) toastError(err);
- else toast(`发生意外错误：${describeError(err)}`.slice(0, 120), 'error');
+ else toast(t('发生意外错误：{error}', { error: describeError(err) }).slice(0, 120), 'error');
});
window.addEventListener('error', (ev) => {
if (!(ev instanceof ErrorEvent)) return; // resource load errors are not script errors
@@ -342,7 +351,9 @@ async function boot() {
if (entered) net.setName(savedName);
else net.connect();
});
- await Promise.all([waitForFonts(1200), connectWhenReady]);
+ // the language (and its UI translations) before the first render: no Chinese flash for an English player
+ const langReady = initLang().catch((err) => console.warn('[app] language setup failed', err));
+ await Promise.all([waitForFonts(1200), connectWhenReady, langReady]);
const root = document.getElementById('app');
render(html`<${App} />`, root);
@@ -369,5 +380,5 @@ async function boot() {
boot().catch((err) => {
console.error('[app] boot failed', err);
const el = document.getElementById('boot-err');
- if (el) el.textContent = '启动失败，请刷新页面重试';
+ if (el) el.textContent = t('启动失败，请刷新页面重试');
});
diff --git a/public/js/screens/lobby.js b/public/js/screens/lobby.js
index 817da7ef..4a31264c 100644
--- a/public/js/screens/lobby.js
+++ b/public/js/screens/lobby.js
@@ -8,6 +8,8 @@
// screen is complete before data is generated. Rounds: solo 标准 = 9, everything else 14 (+R15
// hidden core on 险境+), per research 00-INDEX §2. Battlefield pool (`modes[].stages`): 标准 always
// plays 战场#01, 险境 draws one of 8, 绝境 / 终极 one of 7 (m01 excluded).
+// Texts go through t() (docs/I18N.md); the module-level tables hold msgids (N_) translated where they are shown, the
+// config.json mode texts come localized from data.js.
import { useEffect, useRef, useState } from '../../vendor/hooks.module.js';
import { DIFFICULTIES, DIFFICULTY_NAMES, DIFFICULTY_COLORS, ROOM_CODE_LEN, MAX_SEATS, MAX_SPECTATORS, modeIdFor, ERR } from '../../../shared/constants.js';
@@ -18,20 +20,21 @@ import { LoadoutButton } from './loadout.js';
import { net, identity } from '../net.js';
import { store, useStore, shallowEqual, loadPref, savePref } from '../store.js';
import { getConfig, getMode, getStage, useData } from '../data.js';
+import { t, tc, N_ } from '../../../shared/i18n.js';
/** Official mode texts (activity_table act2autochess.modeDataDict), fallback when config.json is absent. */
export const MODE_TEXT = {
single: {
- FUNNY: { code: 'AC-1', desc: '时长较短的模拟训练', effects: ['可以快速完成作战', '常规奖励'] },
- NORMAL: { code: 'AC-2', desc: '敌方攻击强度较高的模拟训练', effects: ['可使用盟约数增加', '大幅增加奖励'] },
- HARD: { code: 'AC-3', desc: '敌方攻击强度极高的模拟训练', effects: ['作战环境困难', '出现更加危险的敌人'] },
- ABYSS: { code: 'AC-4', desc: '敌方攻击强度到达极限的模拟训练', effects: ['作战环境无比困难', '出现极度危险的敌人'] },
+ FUNNY: { code: 'AC-1', desc: N_('时长较短的模拟训练'), effects: [N_('可以快速完成作战'), N_('常规奖励')] },
+ NORMAL: { code: 'AC-2', desc: N_('敌方攻击强度较高的模拟训练'), effects: [N_('可使用盟约数增加'), N_('大幅增加奖励')] },
+ HARD: { code: 'AC-3', desc: N_('敌方攻击强度极高的模拟训练'), effects: [N_('作战环境困难'), N_('出现更加危险的敌人')] },
+ ABYSS: { code: 'AC-4', desc: N_('敌方攻击强度到达极限的模拟训练'), effects: [N_('作战环境无比困难'), N_('出现极度危险的敌人')] },
},
multi: {
- FUNNY: { code: 'AC-1', desc: '敌方攻击强度较低的模拟训练', effects: ['作战环境较为温和', '常规奖励'] },
- NORMAL: { code: 'AC-2', desc: '敌方攻击强度较高的模拟训练', effects: ['可使用盟约数增加', '大幅增加奖励'] },
- HARD: { code: 'AC-3', desc: '敌方攻击强度极高的模拟训练', effects: ['作战环境困难', '出现更加危险的敌人'] },
- ABYSS: { code: 'AC-4', desc: '敌方攻击强度到达极限的模拟训练', effects: ['作战环境无比困难', '出现极度危险的敌人'] },
+ FUNNY: { code: 'AC-1', desc: N_('敌方攻击强度较低的模拟训练'), effects: [N_('作战环境较为温和'), N_('常规奖励')] },
+ NORMAL: { code: 'AC-2', desc: N_('敌方攻击强度较高的模拟训练'), effects: [N_('可使用盟约数增加'), N_('大幅增加奖励')] },
+ HARD: { code: 'AC-3', desc: N_('敌方攻击强度极高的模拟训练'), effects: [N_('作战环境困难'), N_('出现更加危险的敌人')] },
+ ABYSS: { code: 'AC-4', desc: N_('敌方攻击强度到达极限的模拟训练'), effects: [N_('作战环境无比困难'), N_('出现极度危险的敌人')] },
},
};
@@ -40,13 +43,17 @@ export const STAGE_POOL = { FUNNY: ['act1autochess_m01'], NORMAL: 8, HARD: 7, AB
/**
* Display name of a stage: stages.json when it is loaded, else derived from the id (act1 m0N → 战场#0N, act2 m0N → 战场#0(N+4)).
+ * From the data name only its 战场#NN part (with a (上半) / (下半) mark) — 'Battlefield #NN (First Half)' in English.
* @param {string} id e.g. 'act1autochess_m01'
*/
export function stageLabel(id) {
const rec = getStage(id);
- if (rec && typeof rec.name === 'string' && rec.name) return rec.name.split(/\s+/)[0];
+ if (rec && typeof rec.name === 'string' && rec.name) {
+ const m = rec.name.match(/^(.*?#\d+(?:\s*[(（][^)）]*[)）])?)/);
+ return m ? m[1] : rec.name.split(/\s+/)[0];
+ }
const m = String(id || '').match(/^act(\d)autochess_m(\d+)$/);
- return m ? `战场#${String(Number(m[2]) + (m[1] === '2' ? 4 : 0)).padStart(2, '0')}` : '';
+ return m ? t('战场#{no}', { no: String(Number(m[2]) + (m[1] === '2' ? 4 : 0)).padStart(2, '0') }) : '';
}
/**
@@ -58,22 +65,22 @@ export function stageLabel(id) {
export function stageNote(stages) {
if (Array.isArray(stages)) {
const ids = stages.filter((s) => typeof s === 'string' && s);
- if (ids.length === 1) { const name = stageLabel(ids[0]); return name ? `战场固定为 ${name}` : '战场固定'; }
- return ids.length > 1 ? `战场随机（共${ids.length}张）` : '';
+ if (ids.length === 1) { const name = stageLabel(ids[0]); return name ? t('战场固定为 {name}', { name }) : t('战场固定'); }
+ return ids.length > 1 ? t('战场随机（共{n}张）', { n: ids.length }) : '';
}
- return Number.isInteger(stages) && stages > 1 ? `战场随机（共${stages}张）` : '';
+ return Number.isInteger(stages) && stages > 1 ? t('战场随机（共{stages}张）', { stages }) : '';
}
const MODE_CARDS = [
{
- id: 'solo', name: '独立模拟', en: 'SOLO SIMULATION', icon: 'user',
- desc: '独自调配资金与干员，以自己的节奏完成整场模拟。',
- points: ['1 名博士', '休整期与机变阶段不限时'],
+ id: 'solo', name: N_('独立模拟'), en: 'SOLO SIMULATION', icon: 'user',
+ desc: N_('独自调配资金与干员，以自己的节奏完成整场模拟。'),
+ points: [N_('1 名博士'), N_('休整期与机变阶段不限时')],
},
{
- id: 'coop', name: '同盟模拟', en: 'ALLIANCE SIMULATION', icon: 'users',
- desc: `与至多 ${MAX_SEATS - 1} 名博士组成同盟，共享干员池，联防协作抵御敌潮。`,
- points: [`1–${MAX_SEATS} 名博士 · 可由 AI 队友补位`, '联防阶段 · 最终攻势合并生命值'],
+ id: 'coop', name: N_('同盟模拟'), en: 'ALLIANCE SIMULATION', icon: 'users',
+ desc: N_('与至多 {n} 名博士组成同盟，共享干员池，联防协作抵御敌潮。'), params: { n: MAX_SEATS - 1 },
+ points: [N_('1–{n} 名博士 · 可由 AI 队友补位'), N_('联防阶段 · 最终攻势合并生命值')], pointParams: { n: MAX_SEATS },
},
];
@@ -89,11 +96,11 @@ export function difficultyInfo(roomMode, difficulty) {
const m = DIFFICULTIES.includes(difficulty) ? getMode(modeIdFor(roomMode, difficulty)) : null;
const effects = Array.isArray(m?.effectDescList)
? m.effectDescList.map((e) => String(e).replace(/^[·•\s]+/, '')).filter(Boolean)
- : fallback.effects;
+ : fallback.effects.map((e) => t(e));
const rounds = Number.isFinite(m?.lastRound) ? m.lastRound : roomMode === 'solo' && difficulty === 'FUNNY' ? 9 : 14;
return {
code: typeof m?.code === 'string' ? m.code : fallback.code,
- desc: typeof m?.desc === 'string' ? m.desc : fallback.desc,
+ desc: typeof m?.desc === 'string' ? m.desc : t(fallback.desc),
effects,
rounds,
hidden: difficulty !== 'FUNNY',
@@ -160,20 +167,21 @@ export function rememberRoom(code) {
}
const FALLBACK_TIPS = [
- '联合模拟在选择策略时可以进行一次跳过',
- '调度中心即使冻结，依然可以主动刷新',
- '两件同名装备可以合成一件更强力的装备',
- '只有达成完美作战的队友可以进行联防',
+ N_('联合模拟在选择策略时可以进行一次跳过'),
+ N_('调度中心即使冻结，依然可以主动刷新'),
+ N_('两件同名装备可以合成一件更强力的装备'),
+ N_('只有达成完美作战的队友可以进行联防'),
];
const TIP_ROTATE_MS = 5000; // matchingTipRotateInterval
/** Rotating tactical tips (config.json `tips`, weighted list of { tip, weight }). */
function TipsPanel() {
const cfg = getConfig();
+ const fallback = FALLBACK_TIPS.map((x) => t(x));
const tips = Array.isArray(cfg?.tips)
- ? cfg.tips.map((t) => (typeof t === 'string' ? t : t?.tip)).filter((t) => typeof t === 'string' && t)
- : FALLBACK_TIPS;
- const list = tips.length ? tips : FALLBACK_TIPS;
+ ? cfg.tips.map((x) => (typeof x === 'string' ? x : x?.tip)).filter((x) => typeof x === 'string' && x)
+ : fallback;
+ const list = tips.length ? tips : fallback;
const [idx, setIdx] = useState(() => Math.floor(Math.random() * list.length));
useEffect(() => {
const id = setInterval(() => setIdx((i) => i + 1), TIP_ROTATE_MS);
@@ -183,11 +191,11 @@ function TipsPanel() {
return html`
<${Icon} name="info" />
- 作战提示
+ ${t('作战提示')}
<${MicroLabel}>TACTICAL TIPS
${String(i + 1).padStart(2, '0')}/${String(list.length).padStart(2, '0')}
- setIdx(i - 1 + list.length)} aria-label="上一条"><${Icon} name="chevronLeft" />
- setIdx(i + 1)} aria-label="下一条"><${Icon} name="chevronRight" />
+ setIdx(i - 1 + list.length)} aria-label=${t('上一条')}><${Icon} name="chevronLeft" />
+ setIdx(i + 1)} aria-label=${t('下一条')}><${Icon} name="chevronRight" />
${list[i]}
`;
@@ -200,11 +208,11 @@ function ModeCard({ card, selected, onSelect }) {
<${Icon} name=${card.icon} />
<${MicroLabel} tone=${selected ? 'mint' : undefined}>${card.en}
- ${card.name}
- ${card.desc}
- ${card.points.map((p) => html`${p} `)}
+ ${t(card.name)}
+ ${t(card.desc, card.params)}
+ ${card.points.map((p) => html`${t(p, card.pointParams)} `)}
-
<${Icon} name="check" />已选定
+
<${Icon} name="check" />${t('已选定')}
`;
}
@@ -215,15 +223,15 @@ function DifficultyCard({ roomMode, difficulty, selected, onSelect }) {
<${DifficultyIcon} difficulty=${difficulty} class="diff-card__glyph" />
- ${DIFFICULTY_NAMES[difficulty]}
+ ${t(DIFFICULTY_NAMES[difficulty])}
${info.code}
- ${info.rounds} 回合${info.hidden ? html`+ 隐秘核心 ` : null}
+ ${info.rounds} ${tc('rounds', '回合')}${info.hidden ? html`${t('+ 隐秘核心')} ` : null}
${info.desc}
${info.effects.map((e) => html`${e} `)}${info.stageNote ? html`<${Icon} name="rook" />${info.stageNote} ` : null}
-
<${Icon} name="check" />已选定
+
<${Icon} name="check" />${t('已选定')}
`;
}
@@ -252,7 +260,7 @@ export function LobbyScreen() {
const run = async (kind, fn) => {
if (inFlight.current) return;
- if (!online) { toast('尚未连接到服务器，请稍候', 'warn'); return; }
+ if (!online) { toast(t('尚未连接到服务器，请稍候'), 'warn'); return; }
inFlight.current = true;
setBusy(kind);
try { await fn(); } catch (err) { toastError(err); } finally {
@@ -265,23 +273,23 @@ export function LobbyScreen() {
// `onClick=${join}` hands the click EVENT as the first argument, and a default parameter only applies to
// `undefined` — codeArg keeps an event target out of the key and falls back to the input field
const k = codeArg(c, code);
- if (!k) { toast(`同盟密钥为 ${ROOM_CODE_LEN} 位字母或数字`, 'warn'); return; }
+ if (!k) { toast(t('同盟密钥为 {ROOM_CODE_LEN} 位字母或数字', { ROOM_CODE_LEN }), 'warn'); return; }
run('join', () => net.request('room.join', { code: k }));
};
// a spectator seat: no player seat taken, nothing to do but watch (also a match already running)
const spectate = (c = code) => {
// same guard as join: `onClick=${spectate}` passes the click event, not a code
const k = codeArg(c, code);
- if (!k) { toast(`同盟密钥为 ${ROOM_CODE_LEN} 位字母或数字`, 'warn'); return; }
+ if (!k) { toast(t('同盟密钥为 {ROOM_CODE_LEN} 位字母或数字', { ROOM_CODE_LEN }), 'warn'); return; }
run('spectate', () => net.request('room.spectate', { code: k }).catch((err) => {
// Clearer than the bare ERR_TEXT: the usual cause is a code that is not the host's (a remembered one from an
// earlier room, or another machine's) — the server can only answer "no such room".
if (err?.code === ERR.ROOM_NOT_FOUND) {
- toast(`没有找到密钥 ${k} 对应的同盟：请和房主核对密钥（同盟结束后密钥即失效）`, 'warn');
+ toast(t('没有找到密钥 {k} 对应的同盟：请和房主核对密钥（同盟结束后密钥即失效）', { k }), 'warn');
return;
}
if (err?.code === ERR.ALREADY) {
- toast('你已经是该同盟的博士：先离开同盟，才能以观战身份进入', 'warn');
+ toast(t('你已经是该同盟的博士：先离开同盟，才能以观战身份进入'), 'warn');
return;
}
throw err;
@@ -295,20 +303,20 @@ export function LobbyScreen() {
return html`
- <${Button} variant="ghost" size="sm" icon="chevronLeft" onClick=${backToTitle} title="返回标题">返回
+ <${Button} variant="ghost" size="sm" icon="chevronLeft" onClick=${backToTitle} title=${t('返回标题')}>${t('返回')}
<${PingPill} ms=${conn.ping} online=${online} />
<${MicroLabel} tone="mint">SIMULATION PROTOCOL SELECT
-
选择模拟协议
+ ${t('选择模拟协议')}
- <${GuideButton} class="lobby-guide" variant="secondary" />
- <${LoadoutButton} from="lobby" size="sm" class="lobby-loadout" />
+ <${GuideButton} class="lobby-guide" variant="secondary" label=${t('玩法说明')} />
+ <${LoadoutButton} from="lobby" size="sm" class="lobby-loadout" label=${t('干员调配')} />
<${AvatarFrame} size="sm" name=${me.name} seat=${0} self=${true} />
- ${me.name || '博士'}
+ ${me.name || t('博士')}
<${MicroLabel}>${me.playerId != null ? `DOCTOR #${doctorNo(me.playerId)}` : 'DOCTOR'}
@@ -317,45 +325,45 @@ export function LobbyScreen() {
- 01 模拟方式<${MicroLabel}>MODE
+ 01 ${t('模拟方式')}<${MicroLabel}>MODE
${MODE_CARDS.map((c) => html`<${ModeCard} key=${c.id} card=${c} selected=${roomMode === c.id} onSelect=${pickMode} />`)}
- 03 加入同盟<${MicroLabel}>JOIN WITH ALLIANCE KEY
+ 03 ${t('加入同盟')}<${MicroLabel}>JOIN WITH ALLIANCE KEY
<${Panel} class="join-panel" tone="amber">
- <${TextField} size="code" icon="key" value=${code} placeholder="输入同盟密钥 / 粘贴邀请链接"
+ <${TextField} size="code" icon="key" value=${code} placeholder=${t('输入同盟密钥 / 粘贴邀请链接')}
transform=${normalizeCode} onInput=${(v) => setCode(normalizeCode(v))} onEnter=${() => join()} />
- <${Button} variant="amber" size="lg" icon="users" loading=${busy === 'join'} disabled=${!codeOk || !online} onClick=${() => join()}>加入同盟
- <${Tooltip} text=${`以观战者身份进入：不占博士席位，只能观看（每个同盟最多 ${MAX_SPECTATORS} 名，模拟进行中也可进入）`}>
- <${Button} variant="secondary" size="lg" icon="eye" class="join-spectate" loading=${busy === 'spectate'} disabled=${!codeOk || !online} onClick=${spectate}>观战
+ <${Button} variant="amber" size="lg" icon="users" loading=${busy === 'join'} disabled=${!codeOk || !online} onClick=${() => join()}>${t('加入同盟')}
+ <${Tooltip} text=${t('以观战者身份进入：不占博士席位，只能观看（每个同盟最多 {MAX_SPECTATORS} 名，模拟进行中也可进入）', { MAX_SPECTATORS })}>
+ <${Button} variant="secondary" size="lg" icon="eye" class="join-spectate" loading=${busy === 'spectate'} disabled=${!codeOk || !online} onClick=${spectate}>${t('观战')}
<${TipsPanel} />
- 02 模拟难度<${MicroLabel}>DIFFICULTY
+ 02 ${t('模拟难度')}<${MicroLabel}>DIFFICULTY
${DIFFICULTIES.map((d) => html`<${DifficultyCard} key=${d} roomMode=${roomMode} difficulty=${d} selected=${difficulty === d} onSelect=${pickDifficulty} />`)}
- <${Tooltip} block=${true} text=${online ? null : '正在连接服务器…'}>
+ <${Tooltip} block=${true} text=${online ? null : t('正在连接服务器…')}>
<${Button} variant="primary" size="xl" block=${true} iconRight="chevrons" loading=${busy === 'create'} disabled=${!online} onClick=${create}>
- ${roomMode === 'solo' ? '开始独立模拟' : '创建同盟'}
+ ${roomMode === 'solo' ? t('开始独立模拟') : t('创建同盟')}
${online
- ? html`${roomMode === 'solo' ? '创建后即可开始模拟' : '创建后可邀请好友或添加 AI 队友'} `
+ ? html`${roomMode === 'solo' ? t('创建后即可开始模拟') : t('创建后可邀请好友或添加 AI 队友')} `
: html`<${Spinner} size="sm" label="CONNECTING" />`}
P${index + 1} <${MicroLabel}>SEAT ${String(index + 1).padStart(2, '0')}
-
等待博士加入
+
${t('等待博士加入')}
<${MicroLabel}>AWAITING DOCTOR
`;
}
@@ -110,30 +112,30 @@ function SeatCard({ seat, index, room, facts, myId, busy, onAddBot, onRemoveBot,
P${index + 1}
<${MicroLabel}>SEAT ${String(index + 1).padStart(2, '0')}
- ${isHostSeat ? html`<${Icon} name="crown" />创建者 ` : null}
+ ${isHostSeat ? html`<${Icon} name="crown" />${t('创建者')} ` : null}
<${AvatarFrame} size="xl" name=${seat.name} seat=${index} bot=${seat.isBot} self=${isMe} ready=${state === 'ready'} offline=${offline} />
- ${seat.isBot ? html`
<${Icon} name="robot" />AI 队友 ` : null}
+ ${seat.isBot ? html`
<${Icon} name="robot" />${t('AI 队友')} ` : null}
- ${seat.name || '博士'}
- ${isMe ? html`你 ` : null}
+ ${seat.name || t('博士')}
+ ${isMe ? html`${t('你')} ` : null}
<${MicroLabel}>${seat.isBot ? 'AUTONOMOUS UNIT' : `DOCTOR #${doctorNo(seat.playerId)}`}
`;
@@ -142,29 +144,29 @@ function SeatCard({ seat, index, room, facts, myId, busy, onAddBot, onRemoveBot,
/** 观战席: the room's spectators (host: ✕ frees a seat), and 入座 for a spectator while a player seat is free. */
function SpectatorBar({ facts, myId, busy, onRemove, onSit }) {
if (!facts.spectators.length) return null;
- return html`
- <${Icon} name="eye" />观战席${facts.spectators.length} /${MAX_SPECTATORS}
+ return html`
+ <${Icon} name="eye" />${t('观战席')}${facts.spectators.length} /${MAX_SPECTATORS}
${facts.spectators.map((s) => html`
- ${s.connected === false ? html`<${Icon} name="wifiOff" />` : null}${s.name || '博士'}${s.playerId === myId ? html`你 ` : null}
+ ${s.connected === false ? html`<${Icon} name="wifiOff" />` : null}${s.name || t('博士')}${s.playerId === myId ? html`${t('你')} ` : null}
${facts.isHost ? html`<${Button} variant="ghost" size="sm" square=${true} icon="close" loading=${busy === `rs${s.playerId}`}
- onClick=${() => onRemove(s.playerId)} aria-label=${`移出观战者 ${s.name || ''}`} title="移出该观战者" />` : null}
+ onClick=${() => onRemove(s.playerId)} aria-label=${t('移出观战者 {name}', { name: s.name || '' })} title=${t('移出该观战者')} />` : null}
`)}
- ${facts.spectating && facts.emptySeats > 0 ? html`<${Button} size="sm" icon="user" loading=${busy === 'sit'} onClick=${onSit}>入座` : null}
+ ${facts.spectating && facts.emptySeats > 0 ? html`<${Button} size="sm" icon="user" loading=${busy === 'sit'} onClick=${onSit}>${t('入座')}` : null}
`;
}
function InviteBox({ code }) {
const copy = async (what) => {
const ok = await copyText(what === 'code' ? code : inviteLink(code));
- if (ok) toast(what === 'code' ? `已复制同盟密钥 ${code}` : '已复制邀请链接', 'success');
- else toast('复制失败，请手动复制', 'warn');
+ if (ok) toast(what === 'code' ? t('已复制同盟密钥 {code}', { code }) : t('已复制邀请链接'), 'success');
+ else toast(t('复制失败，请手动复制'), 'warn');
};
return html`
-
<${Icon} name="key" />同盟密钥 <${MicroLabel}>ALLIANCE KEY
-
${[...String(code)].map((ch, i) => html`${ch} `)}
+
<${Icon} name="key" />${t('同盟密钥')} <${MicroLabel}>ALLIANCE KEY
+
${[...String(code)].map((ch, i) => html`${ch} `)}
- <${Button} size="sm" icon="copy" onClick=${() => copy('code')}>复制密钥
- <${Button} size="sm" icon="link" onClick=${() => copy('link')}>复制链接
+ <${Button} size="sm" icon="copy" onClick=${() => copy('code')}>${t('复制密钥')}
+ <${Button} size="sm" icon="link" onClick=${() => copy('link')}>${t('复制链接')}
<${DifficultyTag} difficulty=${room.difficulty} size="lg" code=${difficultyInfo(room.mode, room.difficulty).code} />
- 由创建者选择
+ ${t('由创建者选择')}
`;
}
- return html`
+ return html`
${DIFFICULTIES.map((d) => html` room.difficulty !== d && onPick(d)}>
- <${DifficultyIcon} difficulty=${d} />${DIFFICULTY_NAMES[d].replace('模拟', '')}
+ <${DifficultyIcon} difficulty=${d} />${t(DIFFICULTY_NAMES[d].replace('模拟', ''))}
`)}
`;
}
@@ -204,7 +206,7 @@ export function RoomScreen() {
const run = async (kind, fn) => {
if (inFlight.current) return;
- if (!online) { toast('连接中断，请稍候重试', 'warn'); return; }
+ if (!online) { toast(t('连接中断，请稍候重试'), 'warn'); return; }
inFlight.current = true;
setBusy(kind);
try { await fn(); } catch (err) { toastError(err); } finally {
@@ -221,7 +223,7 @@ export function RoomScreen() {
// confirmed player's id goes along: if they left and someone else took the seat meanwhile, the server refuses it.
const kick = async (seat, name, playerId) => {
if (inFlight.current) return;
- const ok = await confirmDialog({ title: '移出同盟', text: `确定将「${name || '博士'}」移出同盟吗？对方可以凭同盟密钥重新加入。`, okText: '移出', danger: true });
+ const ok = await confirmDialog({ title: t('移出同盟'), text: t('确定将「{name}」移出同盟吗？对方可以凭同盟密钥重新加入。', { name: name || t('博士') }), okText: t('移出'), danger: true });
if (ok) run(`kick${seat}`, () => net.request('room.kick', { seat, playerId }));
};
const setDifficulty = (difficulty) => run('diff', () => net.request('room.setDifficulty', { difficulty }));
@@ -232,7 +234,7 @@ export function RoomScreen() {
if (inFlight.current) return;
const othersHere = facts.humans.some((s) => s.playerId !== me.playerId);
if (facts.isHost && othersHere) {
- const ok = await confirmDialog({ title: '离开同盟', text: '你是同盟的创建者，离开后创建者身份将移交或同盟解散。确定离开吗？', okText: '离开', danger: true });
+ const ok = await confirmDialog({ title: t('离开同盟'), text: t('你是同盟的创建者，离开后创建者身份将移交或同盟解散。确定离开吗？'), okText: t('离开'), danger: true });
if (!ok) return;
}
inFlight.current = true;
@@ -250,37 +252,37 @@ export function RoomScreen() {
};
const statusLine = !online
- ? html`
<${Icon} name="wifiOff" />连接中断，正在重连… `
+ ? html`
<${Icon} name="wifiOff" />${t('连接中断，正在重连…')} `
: facts.spectating
- ? html`
<${Icon} name="eye" />观战中 · 不占博士席位，模拟开始后可切换观看各位博士 `
+ ? html`
<${Icon} name="eye" />${t('观战中 · 不占博士席位，模拟开始后可切换观看各位博士')} `
: !coop
- ? html`
*模拟协议已就绪，准许进入模拟 `
+ ? html`
${t('*模拟协议已就绪，准许进入模拟')} `
: facts.isHost
? facts.canStart
- ? html`
*同盟人数达标，准许进入模拟 `
- : html`
等待所有博士准备就绪 `
+ ? html`
${t('*同盟人数达标，准许进入模拟')} `
+ : html`
${t('等待所有博士准备就绪')} `
: myReady
- ? html`
已就绪 · 等待创建者开始模拟 `
- : html`
准备就绪后，创建者即可开始模拟 `;
+ ? html`
${t('已就绪 · 等待创建者开始模拟')} `
+ : html`
${t('准备就绪后，创建者即可开始模拟')} `;
return html`
- <${Tooltip} text="离开同盟" placement="bottom">
- <${Button} variant="danger" size="lg" square=${true} icon="exit" loading=${busy === 'leave'} onClick=${leave} aria-label="离开同盟" />
+ <${Tooltip} text=${t('离开同盟')} placement="bottom">
+ <${Button} variant="danger" size="lg" square=${true} icon="exit" loading=${busy === 'leave'} onClick=${leave} aria-label=${t('离开同盟')} />
<${PingPill} ms=${conn.ping} online=${online} />
- <${MicroLabel}>当前延迟
+ <${MicroLabel}>${t('当前延迟')}
- <${GuideButton} class="room-guide" variant="secondary" />
+ <${GuideButton} class="room-guide" variant="secondary" label=${t('玩法说明')} />
<${MicroLabel} tone="mint">${coop ? 'ALLIANCE LOBBY' : 'SOLO SIMULATION'}
-
${coop ? '同盟模拟' : '独立模拟'}
+ ${coop ? t('同盟模拟') : t('独立模拟')}
- ${coop ? html`<${InviteBox} code=${room.code} />` : html`
<${MicroLabel}>SINGLE OPERATOR仅限 1 名博士
`}
+ ${coop ? html`<${InviteBox} code=${room.code} />` : html`
<${MicroLabel}>SINGLE OPERATOR${t('仅限 1 名博士')}
`}
@@ -289,12 +291,12 @@ export function RoomScreen() {
myId=${me.playerId} busy=${busy} onAddBot=${addBot} onRemoveBot=${removeBot} onKick=${kick} />`)}
${coop ? null : html`
<${MicroLabel} tone="mint">BRIEFING
- ${DIFFICULTY_NAMES[room.difficulty] || ''} ${info.code}
+ ${DIFFICULTY_NAMES[room.difficulty] ? t(DIFFICULTY_NAMES[room.difficulty]) : ''} ${info.code}
${info.desc}
${info.effects.map((e) => html`${e} `)}
- 共 ${info.rounds} 回合${info.hidden ? '，满足条件时进入隐秘核心' : ''}
- 独立模拟中休整期与机变阶段不限时
+ ${t('共')} ${info.rounds} ${tc('rounds', '回合')}${info.hidden ? t('，满足条件时进入隐秘核心') : ''}
+ ${t('独立模拟中休整期与机变阶段不限时')}
`}
@@ -302,12 +304,12 @@ export function RoomScreen() {
- 模拟难度<${MicroLabel}>DIFFICULTY
+ ${t('模拟难度')}<${MicroLabel}>DIFFICULTY
<${DifficultyPicker} room=${room} isHost=${facts.isHost} busy=${busy} onPick=${setDifficulty} />
-
已就绪
+
${t('已就绪')}
${facts.readyHumans} /${facts.humans.length}
${facts.humans.map((s) => html`<${Icon} key=${s.playerId} name="user" class=${facts.isReady(s) ? 'is-on' : ''} />`)}
@@ -316,15 +318,15 @@ export function RoomScreen() {
${statusLine}
- <${LoadoutButton} from="room" size="lg" class="room-loadout" />
+ <${LoadoutButton} from="room" size="lg" class="room-loadout" label=${t('干员调配')} />
${facts.isHost
- ? html`<${Tooltip} text=${facts.canStart ? null : '仍有博士未准备就绪'}>
- <${Button} variant="primary" size="xl" icon="play" loading=${busy === 'start'} disabled=${!facts.canStart || !online} onClick=${start}>开始模拟
+ ? html`<${Tooltip} text=${facts.canStart ? null : t('仍有博士未准备就绪')}>
+ <${Button} variant="primary" size="xl" icon="play" loading=${busy === 'start'} disabled=${!facts.canStart || !online} onClick=${start}>${t('开始模拟')}
`
: facts.spectating
- ? html`<${Button} variant="secondary" size="xl" icon="eye" disabled=${true}>观战中`
+ ? html`<${Button} variant="secondary" size="xl" icon="eye" disabled=${true}>${t('观战中')}`
: html`<${Button} variant=${myReady ? 'primary' : 'secondary'} size="xl" icon=${myReady ? 'check' : 'hourglass'} active=${myReady}
- loading=${busy === 'ready'} disabled=${!online || !facts.mine} onClick=${toggleReady}>${myReady ? '已就绪' : '准备就绪'}`}
+ loading=${busy === 'ready'} disabled=${!online || !facts.mine} onClick=${toggleReady}>${myReady ? t('已就绪') : t('准备就绪')}`}
`;
diff --git a/public/js/screens/title.js b/public/js/screens/title.js
index 2b745756..63f99cf0 100644
--- a/public/js/screens/title.js
+++ b/public/js/screens/title.js
@@ -1,4 +1,5 @@
-// Title screen: season-style backdrop, big title 卫戍协议：盟约, remembered nickname, 开始.
+// Title screen: season-style backdrop, big title 卫戍协议：盟约, remembered nickname, 开始, the language switch
+// (中文 | English, ui/lang.js; in English the big title is the English one and the small wordmark above it hides).
//
// Pressing 开始 validates the nickname (1..NAME_MAX_LEN chars, no control characters), stores it,
// marks this tab as "entered" (so reloads skip the title) and hands the name to net.js, which
@@ -17,6 +18,8 @@ import { net, identity } from '../net.js';
import { store, useStore, shallowEqual } from '../store.js';
import { data, useData } from '../data.js';
import { FullscreenButton, detectFeatures } from '../ui/device.js';
+import { LangToggle, useLang } from '../ui/lang.js';
+import { t, N_ } from '../../../shared/i18n.js';
// Same character classes as server/net.js sanitizeName (control, zero-width, bidi, BOM), so a name
// the client accepts is never rejected by the server's hello validation.
@@ -174,14 +177,15 @@ function Ridges() {
}
const STATUS_TEXT = {
- idle: '准备连接', connecting: '正在连接服务器', connected: '已连接服务器', handshaking: '正在验证身份',
- online: '已连接服务器', reconnecting: '连接中断，正在重连', closed: '连接已关闭',
+ idle: N_('准备连接'), connecting: N_('正在连接服务器'), connected: N_('已连接服务器'), handshaking: N_('正在验证身份'),
+ online: N_('已连接服务器'), reconnecting: N_('连接中断，正在重连'), closed: N_('连接已关闭'),
};
/** Title screen component. */
export function TitleScreen() {
const conn = useStore((s) => s.connection, shallowEqual);
const pendingJoin = useStore((s) => s.ui.pendingJoin);
+ const lang = useLang();
const [name, setName] = useState(() => store.get().me.name || identity.loadName() || '');
const assetsSettled = useData('assets');
const assets = data.get('assets');
@@ -199,7 +203,7 @@ export function TitleScreen() {
const valid = isValidName(name);
const start = () => {
- if (!valid) { toast('请输入博士代号', 'warn'); return; }
+ if (!valid) { toast(t('请输入博士代号'), 'warn'); return; }
enterSession(name);
};
@@ -232,39 +236,42 @@ export function TitleScreen() {
<${MicroLabel} tone="mint">RHODES ISLAND // SIMULATION SERVICE
- <${MicroLabel} tone="hi">TARGET POINT
<${MicroLabel}>STRONGHOLD PROTOCOL
+
+ <${LangToggle} class="title-lang" />
+ <${MicroLabel} tone="hi">TARGET POINT
<${Emblem} />
-
+ ${lang === 'en' ? null : html`
STRONGHOLD PROTOCOL
ALLIANCE
-
-
卫戍协议： 盟约
-
调配资金与干员，与同伴协同布防，抵御多波次进攻，直至击败敌方领袖。
+
${t('卫戍协议')}${lang === 'en' ? ': ' : '：'} ${t('盟约')}
+ ${t('调配资金与干员，与同伴协同布防，抵御多波次进攻，直至击败敌方领袖。')}
${pendingJoin ? html`
<${Icon} name="key" />
- 收到同盟邀请 ${pendingJoin} · 输入代号后将自动加入
+ ${t('收到同盟邀请')} ${pendingJoin} ${t('· 输入代号后将自动加入')}
` : null}
- <${TextField} label="博士代号" micro="CALLSIGN" size="lg" icon="user" value=${name} maxLength=${NAME_MAX_LEN}
- placeholder="输入你的代号（最多 ${NAME_MAX_LEN} 字）" autoFocus=${!touchUi}
+ <${TextField} label=${t('博士代号')} micro="CALLSIGN" size="lg" icon="user" value=${name} maxLength=${NAME_MAX_LEN}
+ placeholder=${t('输入你的代号（最多 {NAME_MAX_LEN} 字）', { NAME_MAX_LEN })} autoFocus=${!touchUi}
onInput=${setName} onEnter=${start} />
- <${Button} variant="primary" size="xl" block=${true} iconRight="chevrons" disabled=${!valid} onClick=${start}>开始
+ <${Button} variant="primary" size="xl" block=${true} iconRight="chevrons" disabled=${!valid} onClick=${start}>${t('开始')}
${STATUS_TEXT[conn.status] || conn.status}
+ ${STATUS_TEXT[conn.status] ? t(STATUS_TEXT[conn.status]) : conn.status}
${conn.status === 'online' ? html`<${PingPill} ms=${conn.ping} />` : null}
- <${GuideButton} class="title-guide" />
+ <${GuideButton} class="title-guide" label=${t('玩法说明')} />
<${FullscreenButton} class="title-fs" />
<${DifficultyIcon} difficulty=${difficulty} class="dtag__icon" />
diff --git a/public/js/ui/lang.js b/public/js/ui/lang.js
new file mode 100644
index 00000000..2eaeebcc
--- /dev/null
+++ b/public/js/ui/lang.js
@@ -0,0 +1,170 @@
+// Language switch of the client (docs/I18N.md): picks the language at boot, loads the UI translations
+// (public/i18n/.json, shared/i18n.js) and the localized game data (data/i18n/.json through data.js), keeps
+// the choice, and translates what the server sends (m.toast / m.ticker / error codes).
+//
+// Chinese is the default; English is a switch (the owner's decision of 2026-10-05) — the browser's language is not
+// consulted. Order at boot: `?lang=en|zh` in the URL (then removed from the address bar and kept as the choice), the
+// stored choice (localStorage `sp.pref.lang`), else Chinese. A switch re-renders the app in place (main.js App
+// subscribes with useLang) — no reload; the game texts follow as soon as the data overlay has downloaded (data.js
+// notifies its subscribers).
+
+import { useEffect, useState } from '../../vendor/hooks.module.js';
+import { LANGS, DEFAULT_LANG, normalizeLang, getLang, setLang, onLangChange, addMessages, setNameResolver, tName, format, translateWire } from '../../../shared/i18n.js';
+import { loadPref, savePref } from '../store.js';
+import { data } from '../data.js';
+import { html } from './components.js';
+
+/** Labels of the language switch (each in its own language). */
+export const LANG_LABELS = Object.freeze({ zh: '中文', en: 'English' });
+const PREF_KEY = 'lang';
+/** How long boot waits for the UI translations before rendering in Chinese anyway (they apply when they arrive). */
+const BOOT_WAIT_MS = 2500;
+
+/** @type {Map>} */
+const uiLoads = new Map();
+
+/**
+ * Download (once) the UI translations of a language.
+ * @param {string} lang
+ * @param {typeof fetch} [doFetch]
+ * @returns {Promise} false when unavailable (the UI stays Chinese)
+ */
+export function loadUiMessages(lang, doFetch = (...a) => globalThis.fetch(...a)) {
+ if (lang === DEFAULT_LANG) return Promise.resolve(true);
+ if (uiLoads.has(lang)) return uiLoads.get(lang);
+ const p = (async () => {
+ try {
+ const res = await doFetch(`/i18n/${lang}.json`, { cache: 'no-cache' });
+ if (!res || !res.ok) throw new Error(`HTTP ${res ? res.status : '???'}`);
+ addMessages(lang, await res.json());
+ return true;
+ } catch (err) {
+ console.warn(`[i18n] /i18n/${lang}.json unavailable (${err?.message || err}); the interface stays Chinese`);
+ uiLoads.delete(lang);
+ return false;
+ }
+ })();
+ uiLoads.set(lang, p);
+ return p;
+}
+
+/**
+ * The language to start in: the URL's `?lang=`, then the stored choice, then Chinese.
+ * @param {string} [search] location.search
+ * @param {(key: string, fallback: any) => any} [load]
+ * @returns {{ lang: string, fromUrl: boolean }}
+ */
+export function initialLang(search = globalThis.location?.search || '', load = loadPref) {
+ let fromUrl = null;
+ try { fromUrl = normalizeLang(new URLSearchParams(search).get('lang')); } catch { /* ignore */ }
+ if (fromUrl) return { lang: fromUrl, fromUrl: true };
+ let stored = null;
+ try { stored = normalizeLang(load(PREF_KEY, null)); } catch { /* ignore */ }
+ return { lang: stored || DEFAULT_LANG, fromUrl: false };
+}
+
+function stripLangParam() {
+ try {
+ const url = new URL(globalThis.location.href);
+ if (!url.searchParams.has('lang')) return;
+ url.searchParams.delete('lang');
+ globalThis.history?.replaceState(globalThis.history.state, '', url.pathname + (url.search || '') + url.hash);
+ } catch { /* ignore */ }
+}
+
+/** and the tab title follow the language. */
+function applyDocument(lang) {
+ const doc = globalThis.document;
+ if (!doc) return;
+ doc.documentElement.lang = lang === 'en' ? 'en' : 'zh-CN';
+ doc.documentElement.dataset.lang = lang;
+ doc.title = lang === 'en' ? 'Stronghold Protocol: Alliance · Web Simulation' : '卫戍协议：盟约 · STRONGHOLD PROTOCOL';
+}
+
+// `{ dn }` params and tName(): Chinese game-data names → the current language (data/i18n/.json names)
+setNameResolver((name) => data.localeName(name));
+
+let wired = false;
+function wire() {
+ if (wired) return;
+ wired = true;
+ onLangChange((lang) => { applyDocument(lang); });
+}
+
+/**
+ * Boot: choose the language and load its UI translations (waits at most BOOT_WAIT_MS) before the first render; the
+ * game-data overlay downloads in the background.
+ * @returns {Promise} the language in effect
+ */
+export async function initLang() {
+ wire();
+ const { lang, fromUrl } = initialLang();
+ if (fromUrl) { savePref(PREF_KEY, lang); stripLangParam(); }
+ applyDocument(getLang());
+ if (lang === DEFAULT_LANG) return getLang();
+ const ok = await Promise.race([loadUiMessages(lang), new Promise((r) => setTimeout(() => r(null), BOOT_WAIT_MS))]);
+ if (ok === null) loadUiMessages(lang).then((loaded) => { if (loaded && normalizeLang(loadPref(PREF_KEY, null)) === lang) setLang(lang); });
+ else if (ok) setLang(lang);
+ data.setLocale(lang).catch(() => {});
+ return getLang();
+}
+
+/**
+ * Switch the language (the switch on the title screen and in 设置): keeps the choice, loads the translations, then
+ * re-renders; the game texts follow when their overlay has downloaded.
+ * @param {string} lang
+ * @returns {Promise} the language in effect
+ */
+export async function switchLang(lang) {
+ wire();
+ const want = normalizeLang(lang) || DEFAULT_LANG;
+ savePref(PREF_KEY, want);
+ if (want !== DEFAULT_LANG && !(await loadUiMessages(want))) return getLang();
+ setLang(want);
+ data.setLocale(want).catch(() => {});
+ return getLang();
+}
+
+/**
+ * Preact hook: the current language; the component re-renders when it changes.
+ * @returns {string}
+ */
+export function useLang() {
+ const [lang, setState] = useState(getLang);
+ useEffect(() => {
+ setState(getLang());
+ return onLangChange((l) => setState(l));
+ }, []);
+ return lang;
+}
+
+/**
+ * The language switch (segmented 中文 | English).
+ * @param {{ class?: string }} props
+ */
+export function LangToggle({ class: cls }) {
+ const lang = useLang();
+ return html`
+ ${LANGS.map((l) => html` { if (lang !== l) switchLang(l); }}>${LANG_LABELS[l]} `)}
+
`;
+}
+
+/**
+ * The text of an m.ticker frame in the current language. A config.broadcasts line (`id` + `args`, server ≥ 0.2.0) is
+ * rebuilt from the localized broadcast template — `{0}` is the player's name (never translated), other args are
+ * game-data names or numbers; any other line goes through translateWire (msgid + params, or its text as a msgid).
+ * @param {{ text?: string, id?: string|null, args?: unknown[], msgid?: string, params?: any }} msg
+ * @returns {string}
+ */
+export function tickerText(msg) {
+ if (getLang() !== DEFAULT_LANG && typeof msg?.id === 'string' && Array.isArray(msg.args)) {
+ const list = data.get('config')?.broadcasts;
+ const b = Array.isArray(list) ? list.find((x) => x && x.id === msg.id) : null;
+ if (b && typeof b.text === 'string') {
+ const args = msg.args.map((a, i) => (i === 0 ? String(a ?? '') : tName(String(a ?? ''))));
+ return format(b.text, args);
+ }
+ }
+ return translateWire(msg);
+}
diff --git a/public/js/ui/settings.js b/public/js/ui/settings.js
index 1b8de0fb..0a03df75 100644
--- a/public/js/ui/settings.js
+++ b/public/js/ui/settings.js
@@ -1,6 +1,6 @@
// Player settings (BGM/SFX volume, mute, damage numbers, render quality): a tiny observable store
// persisted in localStorage (`sp.pref.settings`), applied to the audio manager on every change, plus
-// the settings modal.
+// the settings modal — which also holds the language switch (ui/lang.js; kept apart in `sp.pref.lang`).
import { useState } from '../../vendor/hooks.module.js';
import { html, Modal, Button, Icon, MicroLabel } from './components.js';
@@ -9,6 +9,8 @@ import { sanitizeSettings } from './gameLogic.js';
import { audio } from '../audio.js';
import { openGuide } from './guide.js';
import { detectFeatures } from './device.js';
+import { LangToggle } from './lang.js';
+import { t, tc, N_ } from '../../../shared/i18n.js';
/** Settings store: { bgm, sfx, muted, damageNumbers, quality }. */
export const settingsStore = createStore(sanitizeSettings(loadPref('settings', null)));
@@ -41,11 +43,14 @@ function Toggle({ label, micro, value, onChange }) {
return html`
${label}<${MicroLabel}>${micro}
onChange(!value)}>${value ? '开启' : '关闭'}
+ onClick=${() => onChange(!value)}>${value ? tc('toggle', '开启') : tc('toggle', '关闭')}
`;
}
-const QUALITY = [['high', '高'], ['medium', '中'], ['low', '低']];
+const QUALITY = [['high', N_('高')], ['medium', N_('中')], ['low', N_('低')]];
+/** Desktop shortcuts of the hint line: key → action (msgids). */
+const SHORTCUTS = [['R', N_('刷新')], ['F', N_('冻结')], ['D', N_('升级')], ['Q', N_('撤退选中干员')], ['X', N_('出售选中干员')],
+ ['Space', N_('准备就绪')], ['Esc', N_('关闭弹窗')]];
/**
* Settings modal.
@@ -55,25 +60,29 @@ export function SettingsModal({ open, onClose }) {
const s = useSettings();
const [tested, setTested] = useState(false);
const [touchUi] = useState(() => detectFeatures().coarse && !detectFeatures().fine);
- return html`<${Modal} open=${open} onClose=${onClose} title="设置" micro="SETTINGS" width="7.4rem"
- actions=${html`<${Button} variant="secondary" icon="book" class="set-guide" onClick=${() => openGuide(0)}>玩法说明
- <${Button} variant="primary" icon="check" onClick=${onClose}>完成`}>
+ return html`<${Modal} open=${open} onClose=${onClose} title=${t('设置')} micro="SETTINGS" width="7.4rem"
+ actions=${html`<${Button} variant="secondary" icon="book" class="set-guide" onClick=${() => openGuide(0)}>${t('玩法说明')}
+ <${Button} variant="primary" icon="check" onClick=${onClose}>${t('完成')}`}>
- <${Slider} label="背景音乐" micro="BGM" icon="play" value=${s.bgm} onInput=${(v) => updateSettings({ bgm: v })} />
- <${Slider} label="音效" micro="SFX" icon="signal" value=${s.sfx}
- onInput=${(v) => { updateSettings({ sfx: v }); if (!tested) { setTested(true); setTimeout(() => setTested(false), 400); audio.sfx('click'); } }} />
- <${Toggle} label="静音" micro="MUTE" value=${s.muted} onChange=${(v) => updateSettings({ muted: v })} />
- <${Toggle} label="显示伤害数字" micro="DAMAGE NUMBERS" value=${s.damageNumbers} onChange=${(v) => updateSettings({ damageNumbers: v })} />
- 画面质量<${MicroLabel}>QUALITY
+ ${t('语言')}<${MicroLabel}>LANGUAGE
+ <${LangToggle} class="set-lang" />
+
+ <${Slider} label=${t('背景音乐')} micro="BGM" icon="play" value=${s.bgm} onInput=${(v) => updateSettings({ bgm: v })} />
+ <${Slider} label=${t('音效')} micro="SFX" icon="signal" value=${s.sfx}
+ onInput=${(v) => { updateSettings({ sfx: v }); if (!tested) { setTested(true); setTimeout(() => setTested(false), 400); audio.sfx('click'); } }} />
+ <${Toggle} label=${t('静音')} micro="MUTE" value=${s.muted} onChange=${(v) => updateSettings({ muted: v })} />
+ <${Toggle} label=${t('显示伤害数字')} micro="DAMAGE NUMBERS" value=${s.damageNumbers} onChange=${(v) => updateSettings({ damageNumbers: v })} />
+
+
${t('画面质量')}<${MicroLabel}>QUALITY
${QUALITY.map(([id, label]) => html` updateSettings({ quality: id })}>${label} `)}
+ class=${s.quality === id ? 'is-on' : ''} onClick=${() => updateSettings({ quality: id })}>${t(label)}`)}
${touchUi
- ? html`
触屏操作：点击单位选中（撤退 / 出售）· 长按单位或卡牌查看详情 · 拖动部署后滑动选择朝向
`
- : html`
快捷键：R 刷新 · F 冻结 · D 升级 · Q 撤退选中干员 · X 出售选中干员 · Space 准备就绪 · Esc 关闭弹窗 · 右键查看详情
`}
+ ? html`
${t('触屏操作：点击单位选中（撤退 / 出售）· 长按单位或卡牌查看详情 · 拖动部署后滑动选择朝向')}
`
+ : html`
${t('快捷键：')}${SHORTCUTS.map(([key, label]) => html`${key} ${t(label)} · `)}${t('右键查看详情')}
`}
你好 ${name || '博士'} 世界${n} 回合
`;",
+ " const sample = '字体样例'; // i18n-ignore",
+ "}",
+ ].join('\n');
+ const out = await codemodSource(src, path.join(ROOT, 'public/js/ui/x.js'));
+ assert.match(out.src, /import \{ t, N_ \} from '\.\.\/\.\.\/\.\.\/shared\/i18n\.js';/);
+ assert.match(out.src, /const TABLE = \{ a: N_\('甲'\) \};/, 'module level: marked, not translated');
+ assert.match(out.src, /name === '比较'/, 'compared literals are left alone');
+ assert.match(out.src, /toast\(t\('剩余 \{n\} 名', \{ n \}\), 'warn'\)/);
+ assert.match(out.src, /title=\$\{t\('提示 \{n\}', \{ n \}\)\}/);
+ // a child that is not a plain value splits the run; the string inside it is wrapped too
+ assert.match(out.src, />\$\{t\('你好'\)\} \$\{name \|\| t\('博士'\)\} \$\{t\('世界'\)\}/);
+ assert.match(out.src, /<\/b> \$\{t\('回合'\)\}<\/p>/);
+ assert.equal(out.manual.length, 1);
+});
diff --git a/test/ui/i18n.e2e.test.js b/test/ui/i18n.e2e.test.js
new file mode 100644
index 00000000..f75e3d0f
--- /dev/null
+++ b/test/ui/i18n.e2e.test.js
@@ -0,0 +1,72 @@
+// Browser check of the language switch (puppeteer-core + system Chrome; opt-in: SP_E2E=1, ~20 s):
+//
+// SP_E2E=1 node --test test/ui/i18n.e2e.test.js
+//
+// The title screen opens in Chinese; 中文 | English → English in place (no reload): the title, the start button, the
+// connection line, , the tab title; the choice is kept across a reload (localStorage sp.pref.lang) and the
+// game-data overlay (data/i18n/en.json) is applied; `?lang=zh` switches back and leaves the address bar. No console /
+// page / request errors. docs/I18N.md.
+
+import { test, describe, before, after } from 'node:test';
+import assert from 'node:assert/strict';
+import { CHROME, hasChrome, sleep } from '../e2e/client.mjs';
+import { NAME_MAX_LEN } from '../../shared/constants.js';
+
+const ENABLED = process.env.SP_E2E === '1' && hasChrome();
+
+describe('language switch on the title screen', { skip: !ENABLED && 'set SP_E2E=1 (Chrome)' }, () => {
+ let srv;
+ let browser;
+ let base;
+ before(async () => {
+ const { startServer } = await import('../../server/index.js');
+ const puppeteer = (await import('puppeteer-core')).default;
+ srv = await startServer({ port: 0, host: '127.0.0.1', quiet: true });
+ base = `http://127.0.0.1:${srv.port}`;
+ browser = await puppeteer.launch({ executablePath: CHROME, headless: true, args: ['--no-sandbox', '--force-device-scale-factor=1'] });
+ });
+ after(async () => { await browser?.close(); await srv?.close(); });
+
+ const text = (page, sel) => page.$eval(sel, (el) => el.textContent.replace(/\s+/g, ' ').trim());
+
+ test('中文 by default; English in place, kept across a reload; ?lang=zh back to Chinese', async () => {
+ const page = await browser.newPage();
+ await page.setViewport({ width: 1600, height: 900 });
+ const problems = [];
+ page.on('console', (m) => { if (m.type() === 'error') problems.push(`console: ${m.text()}`); });
+ page.on('pageerror', (e) => problems.push(`pageerror: ${e.message}`));
+ page.on('response', (r) => { if (r.status() >= 400 && !/fonts\.(googleapis|gstatic)/.test(r.url())) problems.push(`http ${r.status()}: ${r.url()}`); });
+ await page.goto(`${base}/`, { waitUntil: 'networkidle0' });
+ await page.waitForSelector('.title-screen [data-testid="lang-toggle"]');
+ assert.equal(await text(page, '.title-cn'), '卫戍协议：盟约');
+ assert.equal(await text(page, '.title-login .btn--primary'), '开始');
+ assert.equal(await page.evaluate(() => document.documentElement.lang), 'zh-CN');
+
+ await page.click('[data-testid="lang-toggle"] button[data-lang="en"]');
+ await page.waitForFunction(() => document.querySelector('.title-cn')?.textContent.includes('Stronghold Protocol'), { timeout: 8000 });
+ assert.equal(await text(page, '.title-cn'), 'Stronghold Protocol: Alliance');
+ assert.equal(await text(page, '.title-login .btn--primary'), 'Start');
+ assert.match(await text(page, '.title-tag'), /^Allocate Funds and Operators/);
+ assert.match(await text(page, '.title-conn'), /Connect|Ready to connect/);
+ assert.equal(await page.$eval('.title-login input', (el) => el.placeholder), `Callsign (max ${NAME_MAX_LEN} chars)`);
+ assert.deepEqual(await page.evaluate(() => ({ lang: document.documentElement.lang, title: document.title, pref: localStorage.getItem('sp.pref.lang') })),
+ { lang: 'en', title: 'Stronghold Protocol: Alliance · Web Simulation', pref: '"en"' });
+ // the game texts follow (data/i18n/en.json applied by data.js)
+ await page.waitForFunction(() => globalThis.__SP__?.data?.locale() === 'en', { timeout: 8000 });
+ assert.equal(await page.evaluate(() => globalThis.__SP__.data.get('config').modes.mode_multi_abyss.name), 'Ultimate Simulation');
+
+ await page.reload({ waitUntil: 'networkidle0' });
+ await page.waitForSelector('.title-screen .title-cn');
+ assert.equal(await text(page, '.title-cn'), 'Stronghold Protocol: Alliance', 'the choice survives a reload');
+ assert.equal(await text(page, '.title-login .btn--primary'), 'Start');
+
+ await page.goto(`${base}/?lang=zh`, { waitUntil: 'networkidle0' });
+ await page.waitForSelector('.title-screen .title-cn');
+ await sleep(200);
+ assert.equal(await text(page, '.title-cn'), '卫戍协议：盟约');
+ assert.equal(await page.evaluate(() => location.search), '', '?lang is removed from the address bar');
+ assert.equal(await page.evaluate(() => localStorage.getItem('sp.pref.lang')), '"zh"');
+ assert.deepEqual(problems, []);
+ await page.close();
+ });
+});
diff --git a/tools/i18n.mjs b/tools/i18n.mjs
new file mode 100644
index 00000000..efcd7227
--- /dev/null
+++ b/tools/i18n.mjs
@@ -0,0 +1,632 @@
+#!/usr/bin/env node
+// tools/i18n.mjs — UI string tooling for the gettext-style i18n (shared/i18n.js, public/i18n/.json; docs/I18N.md).
+//
+// node tools/i18n.mjs extract [paths…] [--list] [--json]
+// per file: the msgids passed to t() / tc() / N_() / msg(), and the Chinese literals still shown untranslated
+// (string literals, template literals, html`` text and attribute values outside those calls; comments,
+// console.* and Error messages are ignored). --list prints each literal with its line.
+// node tools/i18n.mjs check [paths…] [--lang en] [--strict] [--stale]
+// msgids the code uses that public/i18n/.json lacks (exit 1 with --strict when any); --stale also lists
+// entries no scanned code uses (not an error: phase 2 wraps the rest of the UI later).
+// node tools/i18n.mjs codemod [--write]
+// wrap Chinese literals: html`` text runs / attribute values → ${t('…')}, plain strings → t('…'), template
+// literals → t('…{name}…', { name }); adds the import. Module-level literals (evaluated once, before a language
+// can change) are only marked N_('…') and listed: call t() where they are shown. Literals compared, used as keys,
+// or passed to string methods are left alone, and so is a line marked `// i18n-ignore`. A text run with a child
+// that is not a plain value (`${a || b}`, a vnode) is split into its static pieces. Prints a summary; --write saves
+// the files. Review the result.
+// node tools/i18n.mjs seed --from [--lang en] [--all] [--write]
+// fill public/i18n/.json from a flat { msgid: translation } map for the msgids the code uses (--all: also
+// for the Chinese literals not wrapped yet, under the msgid the codemod would give them). Existing entries win.
+//
+// Default paths: public/js, shared, server (extract / seed skip server/sim, whose strings are game logic; check reads
+// its msg() and ctx.toast texts too). Server texts: a Chinese literal passed to m.toast / ctx.toast / tickerText is a
+// msgid (the client translates the text it receives), as is the first argument of msg(). Message ids: the Chinese text itself; a template literal's expressions become named params (paramName()).
+// Needs the dev dependencies (acorn, which eslint brings).
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const CJK = /[\u3400-\u9fff\uf900-\ufaff\u3000-\u303f\uff01-\uff60]/;
+const HAN = /[\u3400-\u9fff\uf900-\ufaff]/;
+const DEFAULT_ROOTS = ['public/js', 'shared', 'server'];
+const SKIP_DIRS = new Set(['node_modules', 'vendor', 'assets', 'fonts', 'dev']);
+/** Calls whose first argument is a msgid (tc: the second, keyed `context::msgid`). */
+const MSGID_CALLS = new Set(['t', 'N_', 'msg']);
+/**
+ * Server messaging methods (m.toast, ctx.toast, this.tickerText …, called on an object): a Chinese string literal they
+ * get is sent as text and translated by the client as a msgid (main.js translateWire).
+ */
+const SERVER_TEXT_CALLS = new Set(['toast', 'tickerText', 'ticker']);
+/** Calls whose arguments are never UI text to wrap. */
+const SKIP_CALLS = new Set(['t', 'tc', 'N_', 'msg', 'tName', 'dn', 'format', 'renderMessage', 'require', 'import']);
+/** String methods: a literal argument is data, not display text. */
+const STRING_METHODS = new Set(['includes', 'startsWith', 'endsWith', 'indexOf', 'lastIndexOf', 'replace', 'replaceAll', 'split',
+ 'match', 'matchAll', 'test', 'search', 'has', 'get', 'set', 'delete', 'localeCompare', 'padStart', 'padEnd', 'join', 'add']);
+/**
+ * Object tables of msgids defined without N_() (their values are translated where they are shown): file → names.
+ * `check` treats their string values as msgids.
+ */
+const MSGID_TABLES = [
+ ['shared/constants.js', ['ERR_TEXT', 'DIFFICULTY_NAMES']],
+ ['public/js/net.js', ['CLIENT_ERR_TEXT']],
+ ['public/js/main.js', ['CLOSE_REASON']],
+];
+
+let acornMod = null;
+async function acorn() {
+ if (acornMod) return acornMod;
+ try { acornMod = await import('acorn'); } catch {
+ throw new Error('tools/i18n.mjs needs the dev dependencies (npm install): acorn comes with eslint');
+ }
+ return acornMod;
+}
+
+// ===== message ids ===================================================================================================
+
+/**
+ * The param name of a template-literal expression: an identifier keeps its name, `a.b.c` → `c` (`x.length` → `n`);
+ * anything else is positional (`0`, `1` …, its index among the expressions).
+ * @param {string} src expression source
+ * @param {number} index
+ */
+export function paramName(src, index) {
+ const s = String(src).trim();
+ if (/^[A-Za-z_$][\w$]*$/.test(s)) return s;
+ const m = s.match(/^[A-Za-z_$][\w$]*(?:\??\.[A-Za-z_$][\w$]*)+$/);
+ if (m) {
+ const last = s.split(/\??\./).pop();
+ return last === 'length' ? 'n' : last;
+ }
+ return String(index);
+}
+
+/**
+ * Msgid and params of a template literal from its static parts and expression sources.
+ * @param {string[]} quasis cooked static parts (n + 1)
+ * @param {string[]} exprs expression sources (n)
+ * @returns {{ msgid: string, params: { name: string, src: string }[] }}
+ */
+export function templateMsgid(quasis, exprs) {
+ const names = new Map(); // src → name
+ const used = new Set();
+ const params = [];
+ let msgid = quasis[0] ?? '';
+ exprs.forEach((src, i) => {
+ let name = names.get(src);
+ if (!name) {
+ let base = paramName(src, i);
+ name = base;
+ for (let k = 2; used.has(name); k++) name = `${base}${k}`;
+ names.set(src, name);
+ used.add(name);
+ params.push({ name, src });
+ }
+ msgid += `{${name}}${quasis[i + 1] ?? ''}`;
+ });
+ return { msgid, params };
+}
+
+/** JS source of a single-quoted string. */
+export function quote(s) {
+ return `'${String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')}'`;
+}
+
+/** Source of a params object for t(): `{ a, b: expr, 0: expr }`. */
+function paramsSource(params) {
+ if (!params.length) return '';
+ return `, { ${params.map(({ name, src }) => (name === src ? name : `${name}: ${src}`)).join(', ')} }`;
+}
+
+// ===== AST helpers ===================================================================================================
+
+/** Generic AST walk with ancestors (enter(node, ancestors) → false skips the children). */
+function walk(node, enter, ancestors = []) {
+ if (!node || typeof node.type !== 'string') return;
+ if (enter(node, ancestors) === false) return;
+ ancestors.push(node);
+ for (const key of Object.keys(node)) {
+ if (key === 'loc' || key === 'range' || key === 'start' || key === 'end') continue;
+ const v = node[key];
+ if (Array.isArray(v)) { for (const c of v) if (c && typeof c.type === 'string') walk(c, enter, ancestors); } else if (v && typeof v.type === 'string') walk(v, enter, ancestors);
+ }
+ ancestors.pop();
+}
+
+const calleeName = (call) => {
+ const c = call?.callee;
+ if (!c) return null;
+ if (c.type === 'Identifier') return c.name;
+ if (c.type === 'MemberExpression' && !c.computed && c.property.type === 'Identifier') return c.property.name;
+ return null;
+};
+const isConsoleCall = (call) => call?.callee?.type === 'MemberExpression' && call.callee.object?.type === 'Identifier' && call.callee.object.name === 'console';
+
+/** Why a literal must not be wrapped (null = wrap it). */
+function skipReason(node, ancestors) {
+ const parent = ancestors[ancestors.length - 1];
+ for (let i = ancestors.length - 1; i >= 0; i--) {
+ const a = ancestors[i];
+ if (a.type === 'CallExpression') {
+ if (isConsoleCall(a)) return 'console';
+ const name = calleeName(a);
+ if (SKIP_CALLS.has(name) && a.callee.type === 'Identifier') return 'in-call';
+ }
+ if (a.type === 'NewExpression' && a.callee.type === 'Identifier' && /Error$/.test(a.callee.name)) return 'error';
+ if (a.type === 'ThrowStatement') return 'error';
+ if (a.type === 'ImportDeclaration' || a.type === 'ExportAllDeclaration' || (a.type === 'ExportNamedDeclaration' && a.source)) return 'import';
+ }
+ if (!parent) return null;
+ if (parent.type === 'Property' && parent.key === node && !parent.computed) return 'key';
+ if (parent.type === 'MemberExpression' && parent.property === node) return 'key';
+ if (parent.type === 'BinaryExpression' && ['===', '!==', '==', '!=', 'in', 'instanceof'].includes(parent.operator)) return 'compare';
+ if (parent.type === 'SwitchCase' && parent.test === node) return 'compare';
+ if (parent.type === 'CallExpression' && parent.arguments.includes(node)) {
+ const name = calleeName(parent);
+ if (parent.callee.type === 'MemberExpression' && STRING_METHODS.has(name)) return 'string-method';
+ }
+ if (parent.type === 'TaggedTemplateExpression') return 'tagged';
+ return null;
+}
+
+/** Whether a node sits in a function (render time) rather than at module level (evaluated once at load). */
+const inFunction = (ancestors) => ancestors.some((a) => a.type === 'FunctionDeclaration' || a.type === 'FunctionExpression' || a.type === 'ArrowFunctionExpression' || a.type === 'MethodDefinition');
+
+/**
+ * Split an html`` template into its text runs and attribute values with Chinese (htm syntax: the static parts are
+ * HTML-like, `${}` are children or attribute values). A text run is the text between two tags, `${}` children included
+ * when they are simple values (identifiers, member chains, literals, String(…)); a run with other children (vnodes,
+ * components, conditionals) is split into its static pieces.
+ * @param {any} tpl TemplateLiteral node of an html`` tag
+ * @returns {{ kind: 'text'|'attr', start: number, end: number, quasis: string[], exprs: any[], attr?: string }[]}
+ */
+function htmlSegments(tpl) {
+ const out = [];
+ const qs = tpl.quasis;
+ let state = 'TEXT';
+ let quoteCh = null;
+ /** @type {{ parts: ({ text: string, from: number, to: number } | { expr: any, from: number, to: number })[] } | null} */
+ let run = null;
+ let attr = null;
+ const simple = (e) => e.type === 'Identifier' || e.type === 'MemberExpression' || e.type === 'Literal' || (e.type === 'CallExpression' && calleeName(e) === 'String');
+ const textSeg = (parts) => {
+ const quasis = [];
+ const exprs = [];
+ let cur = '';
+ for (const p of parts) { if ('expr' in p) { quasis.push(cur); cur = ''; exprs.push(p.expr); } else cur += p.text; }
+ quasis.push(cur);
+ const lead = quasis[0].match(/^\s*/)[0];
+ const trail = quasis[quasis.length - 1].match(/\s*$/)[0];
+ if (quasis.length === 1 && lead.length === quasis[0].length) return null;
+ quasis[0] = quasis[0].slice(lead.length);
+ quasis[quasis.length - 1] = quasis[quasis.length - 1].slice(0, quasis[quasis.length - 1].length - trail.length);
+ const first = parts[0];
+ const last = parts[parts.length - 1];
+ const start = first.from + ('expr' in first ? 0 : lead.length);
+ const end = last.to - ('expr' in last ? 0 : trail.length);
+ return { kind: 'text', start, end, quasis, exprs };
+ };
+ const flushRun = () => {
+ if (!run) return;
+ const parts = run.parts;
+ run = null;
+ if (!parts.some((p) => !('expr' in p) && HAN.test(p.text))) return;
+ if (parts.every((p) => !('expr' in p) || simple(p.expr))) {
+ const seg = textSeg(parts);
+ if (seg) out.push(seg);
+ return;
+ }
+ // split around the non-simple children: each piece of static text (with its simple neighbours) on its own
+ let piece = [];
+ const flushPiece = () => {
+ if (piece.some((p) => !('expr' in p) && HAN.test(p.text))) {
+ // drop simple exprs at the edges of a piece only if they are not adjacent to text? keep them: they are values
+ const seg = textSeg(piece);
+ if (seg) out.push(seg);
+ }
+ piece = [];
+ };
+ for (const p of parts) {
+ if ('expr' in p && !simple(p.expr)) { flushPiece(); continue; }
+ piece.push(p);
+ }
+ flushPiece();
+ };
+ for (let qi = 0; qi < qs.length; qi++) {
+ const q = qs[qi];
+ const text = q.value.raw;
+ const base = q.start;
+ let i = 0;
+ while (i < text.length) {
+ if (state === 'TEXT') {
+ const lt = text.indexOf('<', i);
+ const stop = lt < 0 ? text.length : lt;
+ if (stop > i) {
+ if (!run) run = { parts: [] };
+ run.parts.push({ text: text.slice(i, stop), from: base + i, to: base + stop });
+ }
+ if (lt < 0) break;
+ flushRun();
+ if (text.startsWith('', i);
+ if (e < 0) break;
+ state = 'TEXT';
+ i = e + 3;
+ continue;
+ }
+ if (state === 'TAG') {
+ const c = text[i];
+ if (c === '>') { state = 'TEXT'; i++; continue; }
+ if (c === '"' || c === "'") {
+ const nm = text.slice(0, i).match(/([A-Za-z_:][-\w:.]*)\s*=\s*$/);
+ attr = { name: nm ? nm[1] : null, start: base + i, parts: [] };
+ quoteCh = c;
+ state = 'ATTRV';
+ i++;
+ continue;
+ }
+ i++;
+ continue;
+ }
+ // ATTRV
+ const e = text.indexOf(quoteCh, i);
+ if (e < 0) { attr.parts.push({ text: text.slice(i) }); break; }
+ attr.parts.push({ text: text.slice(i, e) });
+ const quasis = [];
+ const exprs = [];
+ let cur = '';
+ for (const p of attr.parts) { if ('expr' in p) { quasis.push(cur); cur = ''; exprs.push(p.expr); } else cur += p.text; }
+ quasis.push(cur);
+ if (attr.name && quasis.some((x) => HAN.test(x))) out.push({ kind: 'attr', attr: attr.name, start: attr.start, end: base + e + 1, quasis, exprs });
+ attr = null;
+ state = 'TAG';
+ i = e + 1;
+ }
+ if (qi < tpl.expressions.length) {
+ const ex = tpl.expressions[qi];
+ // the `${…}` spans from the end of this static part to the start of the next one
+ if (state === 'TEXT') {
+ if (!run) run = { parts: [] };
+ run.parts.push({ expr: ex, from: q.end, to: qs[qi + 1].start });
+ } else if (state === 'ATTRV') {
+ attr.parts.push({ expr: ex });
+ }
+ }
+ }
+ flushRun();
+ return out;
+}
+
+// ===== scanning a file ===============================================================================================
+
+/**
+ * Scan a source file.
+ * @param {string} src
+ * @param {string} file label
+ * @returns {Promise<{ msgids: { msgid: string, line: number }[], literals: any[] }>}
+ * literals: { kind: 'str'|'tpl'|'text'|'attr', start, end, line, msgid, params, module: boolean, reason: string|null }
+ */
+export async function scanSource(src, file = '') {
+ const { parse } = await acorn();
+ let ast;
+ try {
+ ast = parse(src, { ecmaVersion: 'latest', sourceType: 'module', locations: true, allowHashBang: true });
+ } catch (e) {
+ throw new Error(`${file}: cannot parse (${e.message})`, { cause: e });
+ }
+ const msgids = [];
+ const literals = [];
+ const lineOf = (pos) => src.slice(0, pos).split('\n').length;
+ // a line marked `i18n-ignore` (in a comment) holds no UI text (font samples, data keys …)
+ const ignored = new Set(src.split('\n').map((l, i) => (/i18n-ignore/.test(l) ? i + 1 : 0)).filter(Boolean));
+ walk(ast, (node, ancestors) => {
+ if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'tc') {
+ const [c, a] = node.arguments;
+ if (c?.type === 'Literal' && a?.type === 'Literal' && typeof a.value === 'string') msgids.push({ msgid: `${c.value}::${a.value}`, line: lineOf(a.start), via: 'tc' });
+ }
+ if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && MSGID_CALLS.has(node.callee.name)) {
+ const a = node.arguments[0];
+ if (a && a.type === 'Literal' && typeof a.value === 'string') msgids.push({ msgid: a.value, line: lineOf(a.start), via: node.callee.name });
+ else if (a && a.type === 'TemplateLiteral' && !a.expressions.length) msgids.push({ msgid: a.quasis[0].value.cooked, line: lineOf(a.start), via: node.callee.name });
+ }
+ if (node.type === 'TaggedTemplateExpression' && node.tag.type === 'Identifier' && node.tag.name === 'html') {
+ for (const seg of htmlSegments(node.quasi)) {
+ const { msgid, params } = templateMsgid(seg.quasis, seg.exprs.map((e) => src.slice(e.start, e.end)));
+ literals.push({ kind: seg.kind, attr: seg.attr, start: seg.start, end: seg.end, line: lineOf(seg.start), msgid, params, exprs: seg.exprs.map((e) => [e.start, e.end]), module: !inFunction(ancestors), reason: null });
+ }
+ // expressions inside are walked normally (nested html``, strings in ${…})
+ return true;
+ }
+ if (node.type === 'Literal' && typeof node.value === 'string' && HAN.test(node.value)) {
+ const parent = ancestors[ancestors.length - 1];
+ if (parent && parent.type === 'TemplateLiteral') return true;
+ // an argument of m.toast / ctx.toast / tickerText, directly or as a branch of `a ? '…' : '…'` / `x || '…'`
+ let arg = node;
+ let k = ancestors.length - 1;
+ while (k >= 0 && ((ancestors[k].type === 'ConditionalExpression' && ancestors[k].test !== arg) || ancestors[k].type === 'LogicalExpression')) { arg = ancestors[k]; k--; }
+ const call = ancestors[k];
+ if (call && call.type === 'CallExpression' && call.callee.type === 'MemberExpression' && SERVER_TEXT_CALLS.has(calleeName(call)) && call.arguments.includes(arg)) {
+ msgids.push({ msgid: node.value, line: lineOf(node.start), via: 'server' });
+ return true;
+ }
+ const line = lineOf(node.start);
+ const reason = ignored.has(line) ? 'ignored' : skipReason(node, ancestors);
+ literals.push({ kind: 'str', start: node.start, end: node.end, line, msgid: node.value, params: [], module: !inFunction(ancestors), reason });
+ return true;
+ }
+ if (node.type === 'TemplateLiteral') {
+ const parent = ancestors[ancestors.length - 1];
+ if (parent && parent.type === 'TaggedTemplateExpression') return true;
+ const cooked = node.quasis.map((q) => q.value.cooked ?? q.value.raw);
+ if (!cooked.some((s) => HAN.test(s))) return true;
+ const reason = ignored.has(lineOf(node.start)) ? 'ignored' : skipReason(node, ancestors);
+ const { msgid, params } = templateMsgid(cooked, node.expressions.map((e) => src.slice(e.start, e.end)));
+ literals.push({ kind: 'tpl', start: node.start, end: node.end, line: lineOf(node.start), msgid, params, exprs: node.expressions.map((e) => [e.start, e.end]), module: !inFunction(ancestors), reason });
+ return true;
+ }
+ return true;
+ });
+ return { msgids, literals };
+}
+
+/** String values of `const NAME = { … }` / `Object.freeze({ … })` object tables (MSGID_TABLES). */
+async function tableMsgids(src, names) {
+ const { parse } = await acorn();
+ const ast = parse(src, { ecmaVersion: 'latest', sourceType: 'module' });
+ const out = [];
+ walk(ast, (node) => {
+ if (node.type !== 'VariableDeclarator' || node.id.type !== 'Identifier' || !names.includes(node.id.name)) return true;
+ walk(node.init, (n) => {
+ if (n.type === 'Property' && n.value.type === 'Literal' && typeof n.value.value === 'string' && HAN.test(n.value.value)) out.push(n.value.value);
+ return true;
+ });
+ return false;
+ });
+ return out;
+}
+
+/**
+ * JS files under the paths. server/sim is skipped unless `sim` (its strings are game logic and data; only the messages
+ * it sends through ctx.toast matter, and `check` reads those).
+ */
+function listFiles(paths, { sim = false } = {}) {
+ const out = [];
+ const visit = (abs) => {
+ const st = statSync(abs);
+ if (st.isDirectory()) {
+ for (const name of readdirSync(abs).sort()) {
+ if (SKIP_DIRS.has(name) || name.startsWith('.')) continue;
+ const rel = path.relative(ROOT, path.join(abs, name)).split(path.sep).join('/');
+ if (rel === 'server/sim' && !sim) continue;
+ visit(path.join(abs, name));
+ }
+ } else if (/\.(m?js)$/.test(abs)) out.push(abs);
+ };
+ for (const p of paths) visit(path.resolve(ROOT, p));
+ return out;
+}
+
+const rel = (abs) => path.relative(ROOT, abs).split(path.sep).join('/');
+
+// ===== codemod =======================================================================================================
+
+/** Relative import path from a file to shared/i18n.js. */
+function importPath(absFile) {
+ let r = path.relative(path.dirname(absFile), path.join(ROOT, 'shared', 'i18n.js')).split(path.sep).join('/');
+ if (!r.startsWith('.')) r = `./${r}`;
+ return r;
+}
+
+/**
+ * Rewrite a source: wrap its Chinese literals. Returns the new source and what was done.
+ * @param {string} src
+ * @param {string} absFile
+ */
+export async function codemodSource(src, absFile) {
+ const { literals } = await scanSource(src, rel(absFile));
+ const manual = [];
+ const skipped = [];
+ let needT = false;
+ let needN = false;
+ /** literal → { start, end, make(paramSrc) } (the text is built once nested edits are known) */
+ const plans = [];
+ for (const l of literals) {
+ if (l.reason) { skipped.push(l); continue; }
+ if (l.kind === 'text' || l.kind === 'attr') {
+ plans.push({ l, start: l.start, end: l.end, make: (p) => `\${t(${quote(l.msgid)}${p})}` });
+ needT = true;
+ if (l.module) manual.push(l);
+ continue;
+ }
+ if (l.module) {
+ if (l.kind === 'str') { plans.push({ l, start: l.start, end: l.end, make: () => `N_(${src.slice(l.start, l.end)})` }); needN = true; }
+ manual.push(l);
+ continue;
+ }
+ plans.push({ l, start: l.start, end: l.end, make: (p) => `t(${quote(l.msgid)}${p})` });
+ needT = true;
+ }
+ // a plan inside another one (a string in a template's ${…}) is applied to that template's param source instead
+ const inner = (outer, x) => x !== outer && x.start >= outer.start && x.end <= outer.end;
+ const top = plans.filter((p) => !plans.some((o) => inner(o, p)));
+ const rewrite = (from, to, nested) => {
+ let text = src.slice(from, to);
+ for (const n of nested.filter((x) => x.start >= from && x.end <= to).sort((a, b) => b.start - a.start)) {
+ text = text.slice(0, n.start - from) + build(n) + text.slice(n.end - from);
+ }
+ return text;
+ };
+ const build = (plan) => {
+ const nested = plans.filter((x) => inner(plan, x) && !plans.some((o) => o !== plan && inner(plan, o) && inner(o, x)));
+ const { params = [], exprs = [] } = plan.l;
+ // params come from the expressions in order; the same expression source maps to one param
+ const srcOf = new Map();
+ exprs.forEach(([a, b]) => { const orig = src.slice(a, b); if (!srcOf.has(orig)) srcOf.set(orig, rewrite(a, b, nested)); });
+ const ps = params.map(({ name, src: orig }) => ({ name, src: srcOf.get(orig) ?? orig }));
+ return plan.make(paramsSource(ps));
+ };
+ const edits = top.map((p) => ({ start: p.start, end: p.end, text: build(p) })).sort((a, b) => b.start - a.start);
+ let out = src;
+ for (const e of edits) out = out.slice(0, e.start) + e.text + out.slice(e.end);
+ const names = [needT && 't', needN && 'N_'].filter(Boolean);
+ if (names.length) {
+ const imp = importPath(absFile);
+ const re = new RegExp(`import\\s*\\{([^}]*)\\}\\s*from\\s*['"]${imp.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&')}['"];?`);
+ const m = out.match(re);
+ if (m) {
+ const have = m[1].split(',').map((s) => s.trim()).filter(Boolean);
+ const want = [...new Set([...have, ...names])];
+ out = out.replace(re, `import { ${want.join(', ')} } from '${imp}';`);
+ } else {
+ // after the last import statement
+ const imports = [...out.matchAll(/^import[^;]*;[^\n]*\n/gm)];
+ const at = imports.length ? imports[imports.length - 1].index + imports[imports.length - 1][0].length : 0;
+ out = `${out.slice(0, at)}import { ${names.join(', ')} } from '${imp}';\n${out.slice(at)}`;
+ }
+ }
+ return { src: out, edits: plans.length, manual, skipped };
+}
+
+// ===== commands ======================================================================================================
+
+function parseFlags(argv) {
+ const flags = { _: [] };
+ for (let i = 0; i < argv.length; i++) {
+ const a = argv[i];
+ if (a.startsWith('--')) {
+ const [k, v] = a.slice(2).split('=');
+ if (v !== undefined) flags[k] = v;
+ else if (['from', 'lang'].includes(k)) flags[k] = argv[++i];
+ else flags[k] = true;
+ } else flags._.push(a);
+ }
+ return flags;
+}
+
+const catalogPath = (lang) => path.join(ROOT, 'public', 'i18n', `${lang}.json`);
+function readCatalog(lang) {
+ const p = catalogPath(lang);
+ return existsSync(p) ? JSON.parse(readFileSync(p, 'utf8')) : {};
+}
+function writeCatalog(lang, cat) {
+ const meta = Object.entries(cat).filter(([k]) => k.startsWith('_'));
+ const rest = Object.entries(cat).filter(([k]) => !k.startsWith('_'));
+ writeFileSync(catalogPath(lang), `${JSON.stringify(Object.fromEntries([...meta, ...rest]), null, 2)}\n`);
+}
+
+async function usedMsgids(files) {
+ const used = new Map(); // msgid → first "file:line"
+ for (const f of files) {
+ const { msgids } = await scanSource(readFileSync(f, 'utf8'), rel(f));
+ // server code never translates: its t() / N_() are other helpers (blackboard lookups in the sim); only msg() and
+ // the texts it sends count there
+ const server = rel(f).startsWith('server/');
+ for (const m of msgids) {
+ if (server && m.via !== 'msg' && m.via !== 'server') continue;
+ if (!used.has(m.msgid)) used.set(m.msgid, `${rel(f)}:${m.line}`);
+ }
+ }
+ for (const [file, names] of MSGID_TABLES) {
+ const abs = path.join(ROOT, file);
+ if (!existsSync(abs)) continue;
+ for (const m of await tableMsgids(readFileSync(abs, 'utf8'), names)) if (!used.has(m)) used.set(m, file);
+ }
+ return used;
+}
+
+async function cmdExtract(flags) {
+ const files = listFiles(flags._.length ? flags._ : DEFAULT_ROOTS);
+ const rows = [];
+ let tCount = 0, litCount = 0;
+ for (const f of files) {
+ const { msgids, literals } = await scanSource(readFileSync(f, 'utf8'), rel(f));
+ const open = literals.filter((l) => !l.reason || l.reason === 'compare' || l.reason === 'string-method' || l.reason === 'key');
+ const shown = literals.filter((l) => !l.reason);
+ tCount += msgids.length;
+ litCount += shown.length;
+ if (msgids.length || shown.length) rows.push({ file: rel(f), t: msgids.length, untranslated: shown.length, literals: shown, other: open.length - shown.length });
+ }
+ if (flags.json) { console.log(JSON.stringify(rows.map(({ literals, ...r }) => ({ ...r, literals: literals.map((l) => ({ line: l.line, kind: l.kind, msgid: l.msgid, module: l.module })) })), null, 1)); return; }
+ for (const r of rows) {
+ console.log(`${r.file.padEnd(48)} t() ${String(r.t).padStart(4)} untranslated ${String(r.untranslated).padStart(4)}`);
+ if (flags.list) for (const l of r.literals) console.log(` ${String(l.line).padStart(5)} ${l.kind.padEnd(4)}${l.module ? ' (module)' : ''} ${l.msgid.replace(/\n/g, '⏎').slice(0, 90)}`);
+ }
+ const cat = readCatalog(flags.lang || 'en');
+ const ready = rows.reduce((n, r) => n + r.literals.filter((l) => typeof cat[l.msgid] === 'string' && cat[l.msgid]).length, 0);
+ console.log(`total: ${tCount} msgids in t() / tc() / N_() / msg(); ${litCount} Chinese literals not wrapped, in ${rows.filter((r) => r.untranslated).length} files`
+ + ` (${ready} of them already translated in public/i18n/${flags.lang || 'en'}.json, ready for the codemod)`);
+}
+
+async function cmdCheck(flags) {
+ const lang = flags.lang || 'en';
+ const files = listFiles(flags._.length ? flags._ : DEFAULT_ROOTS, { sim: true });
+ const used = await usedMsgids(files);
+ const cat = readCatalog(lang);
+ const missing = [...used].filter(([m]) => !(typeof cat[m] === 'string' && cat[m]));
+ for (const [m, where] of missing) console.log(`missing ${where.padEnd(40)} ${m.replace(/\n/g, '⏎')}`);
+ if (flags.stale) {
+ for (const k of Object.keys(cat)) if (!k.startsWith('_') && !used.has(k)) console.log(`unused ${k.replace(/\n/g, '⏎')}`);
+ }
+ console.log(`${used.size} msgids used, ${used.size - missing.length} translated in public/i18n/${lang}.json, ${missing.length} missing`);
+ if (flags.strict && missing.length) process.exitCode = 1;
+}
+
+async function cmdCodemod(flags) {
+ if (!flags._.length) throw new Error('codemod needs file paths');
+ for (const p of flags._) {
+ const abs = path.resolve(ROOT, p);
+ const src = readFileSync(abs, 'utf8');
+ const res = await codemodSource(src, abs);
+ console.log(`${rel(abs)}: ${res.edits} literals wrapped, ${res.skipped.length} left (compare / key / string method / console / error)`);
+ for (const l of res.manual) console.log(` manual line ${l.line}: module-level ${l.kind} — call t() where it is shown: ${l.msgid.slice(0, 70)}`);
+ if (flags.write && res.src !== src) writeFileSync(abs, res.src);
+ }
+}
+
+async function cmdSeed(flags) {
+ if (!flags.from) throw new Error('seed needs --from ');
+ const lang = flags.lang || 'en';
+ const from = JSON.parse(readFileSync(path.resolve(ROOT, flags.from), 'utf8'));
+ const files = listFiles(flags._.length ? flags._ : DEFAULT_ROOTS);
+ const want = new Map(await usedMsgids(files));
+ if (flags.all) {
+ for (const f of files) {
+ const { literals } = await scanSource(readFileSync(f, 'utf8'), rel(f));
+ for (const l of literals) if ((!l.reason || l.reason === 'tagged') && !want.has(l.msgid)) want.set(l.msgid, `${rel(f)}:${l.line}`);
+ }
+ }
+ const cat = readCatalog(lang);
+ let added = 0;
+ for (const [m] of want) {
+ if (typeof cat[m] === 'string' && cat[m]) continue;
+ const tr = from[m];
+ if (typeof tr === 'string' && tr && !HAN.test(tr)) { cat[m] = tr; added++; }
+ }
+ console.log(`${want.size} msgids considered, ${added} added to public/i18n/${lang}.json${flags.write ? '' : ' (dry run: --write saves)'}`);
+ if (flags.write) writeCatalog(lang, cat);
+}
+
+async function main() {
+ const [cmd, ...rest] = process.argv.slice(2);
+ const flags = parseFlags(rest);
+ const cmds = { extract: cmdExtract, check: cmdCheck, codemod: cmdCodemod, seed: cmdSeed };
+ if (!cmds[cmd]) {
+ console.log('usage: node tools/i18n.mjs extract|check|codemod|seed … (see the header of tools/i18n.mjs)');
+ process.exitCode = cmd ? 2 : 0;
+ return;
+ }
+ await cmds[cmd](flags);
+}
+
+if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+ main().catch((e) => { console.error(`i18n: ${e.message}`); process.exitCode = 2; });
+}
+
+export { CJK, MSGID_TABLES };