// Entry point: wires the engine, the services (cookies, i18n, themes) and the UI. import { advance, buyGenerator, buyMarketing, buyMaterial, buyUpgrade, click, derive, setPrice, simulateOffline, } from './engine/engine.js'; import { createState, sanitizeState, serializeState } from './engine/state.js'; import { fetchLocales, fetchThemes, loadGameContext } from './services/data.js'; import { createFormatter } from './services/format.js'; import { applyTranslations, fetchThemeName, FALLBACK_LOCALE, loadDictionary, t } from './services/i18n.js'; import { buildExport, parseImport } from './services/saveio.js'; import { cookiesAvailable, deleteGame, loadGameText, loadPrefs, saveGameText, savePrefs, takeLegacySaves, } from './services/storage.js'; import { applyThemeStyles } from './services/themes.js'; import { $, refreshStaticIcons, setThemeAssets } from './ui/dom.js'; import { createSettings } from './ui/settings.js'; import { showToast } from './ui/toast.js'; import { createView } from './ui/view.js'; const TICK_MS = 100; const INCOME_SMOOTHING_SECONDS = 3; const SAVE_ERROR_COOLDOWN_MS = 60_000; let ctx; let themes = []; let locales = []; let themeId; let locale; let state; let fmt; let income = 0; let lastSaveError = 0; const themeNames = new Map(); // ------------------------------------------------------------------ saving function persist() { if (!state) return; state.savedAt = Date.now(); try { saveGameText(serializeState(state)); } catch { if (Date.now() - lastSaveError > SAVE_ERROR_COOLDOWN_MS) { lastSaveError = Date.now(); showToast(t('toast.saveFailed'), { error: true }); } } } function parseSaved(text) { try { return sanitizeState(JSON.parse(text), ctx); } catch { return null; } } /** * The shared game from cookies. Falls back to the per-theme saves of the first * version: the most advanced one becomes the shared game, the others are dropped. */ function loadSavedState() { const text = loadGameText(); if (text) return parseSaved(text); const legacy = takeLegacySaves(themes.map((th) => th.id)).map(parseSaved).filter(Boolean); legacy.sort((a, b) => b.totalProduced - a.totalProduced); return legacy[0] ?? null; } function persistPrefs() { savePrefs({ theme: themeId, lang: locale }); } // ------------------------------------------------------------ theme / language function pickLocale(preferred) { const codes = locales.map((l) => l.code); if (codes.includes(preferred)) return preferred; for (const tag of navigator.languages ?? [navigator.language]) { const match = codes.find((code) => code === tag || code === tag?.split('-')[0]); if (match) return match; } return FALLBACK_LOCALE; } async function themeLabel(id) { const key = `${id}:${locale}`; if (!themeNames.has(key)) themeNames.set(key, await fetchThemeName(id, locale)); return themeNames.get(key); } async function fillSelects() { const themeSelect = $('#theme-select'); const labels = await Promise.all(themes.map((th) => themeLabel(th.id))); themeSelect.replaceChildren( ...themes.map((th, i) => new Option(labels[i], th.id, false, th.id === themeId)), ); $('#locale-select').replaceChildren( ...locales.map((l) => new Option(l.name, l.code, false, l.code === locale)), ); } /** Reload texts, assets and the lists for the current theme + language. */ async function refreshTexts() { await loadDictionary(locale, themeId); fmt = createFormatter(locale); setThemeAssets(themeId, themes.find((th) => th.id === themeId)?.assets); applyTranslations(); document.title = t('theme.title'); view.rebuild(ctx, fmt); await fillSelects(); } /** Change the skin only: the game state is shared by every theme. */ async function setTheme(id) { themeId = id; await applyThemeStyles(id); await refreshTexts(); persistPrefs(); if (state) render(); } // ------------------------------------------------------------------ the loop function formatDuration(seconds) { const minutes = Math.floor(seconds / 60); if (minutes < 1) return t('time.seconds', { value: Math.round(seconds) }); if (minutes < 60) return t('time.minutes', { value: minutes }); return t('time.hoursMinutes', { hours: Math.floor(minutes / 60), minutes: minutes % 60 }); } /** Apply progress made while the game was closed or the device asleep. */ function catchUp(elapsedSeconds) { const report = simulateOffline(state, ctx, elapsedSeconds); if (!report || (report.produced <= 0 && report.revenue <= 0)) return; showToast( t('toast.welcomeBack', { duration: formatDuration(report.seconds), produced: fmt.number(Math.floor(report.produced)), funds: t('theme.fmt.funds', { value: fmt.money(report.revenue) }), }), ); } let lastFrame = Date.now(); function frame() { const now = Date.now(); const dt = (now - lastFrame) / 1000; lastFrame = now; if (!state || dt <= 0) return; if (dt >= ctx.rules.offline.minSeconds) { catchUp(dt); // tab was frozen or the device slept } else { const { revenue } = advance(state, ctx, dt); income += (revenue / dt - income) * Math.min(1, dt / INCOME_SMOOTHING_SECONDS); } render(); } function render() { view.update(state, derive(state, ctx), { income }); } // ------------------------------------------------------------------- actions const act = (fn) => (...args) => { fn(state, ctx, ...args); render(); }; const view = createView({ make: act(click), buyMaterial: act(buyMaterial), buyMarketing: act(buyMarketing), buyGenerator: act(buyGenerator), buyUpgrade: act(buyUpgrade), setPrice: act(setPrice), nudgePrice: (delta) => act(setPrice)(state.price + delta), }); createSettings({ getExport: () => ({ text: buildExport(state), name: `idle-clicker-${new Date().toISOString().slice(0, 10)}`, }), importText(text) { state = parseImport(text, ctx); // throws before anything changes income = 0; persist(); render(); }, reset() { deleteGame(); state = createState(ctx); income = 0; persist(); render(); }, }); // ---------------------------------------------------------------------- boot function showFatal(error) { console.error(error); document.body.replaceChildren(Object.assign(document.createElement('pre'), { textContent: String(error) })); } async function boot() { [ctx, themes, locales] = await Promise.all([loadGameContext(), fetchThemes(), fetchLocales()]); if (themes.length === 0) throw new Error('No theme installed in public/themes/'); const prefs = loadPrefs(); locale = pickLocale(prefs.lang); const initialTheme = themes.find((th) => th.id === prefs.theme) ?? themes[0]; $('#cookie-warning').hidden = cookiesAvailable(); $('#theme-select').addEventListener('change', (e) => setTheme(e.target.value)); $('#locale-select').addEventListener('change', async (e) => { locale = e.target.value; persistPrefs(); await refreshTexts(); render(); }); await setTheme(initialTheme.id); refreshStaticIcons(); state = loadSavedState() ?? createState(ctx); catchUp((Date.now() - state.savedAt) / 1000); persist(); render(); lastFrame = Date.now(); setInterval(frame, TICK_MS); setInterval(persist, ctx.rules.autosaveSeconds * 1000); document.addEventListener('visibilitychange', () => document.hidden && persist()); addEventListener('pagehide', persist); } boot().catch(showFatal);