onChange(!on)}
style={{cursor:'pointer'}}
/>
);
}
function FormRow({ label, jsonKey, children }) {
return (
{label}
{jsonKey && {jsonKey} }
{children}
);
}
// ---------- DIFF MODAL ----------
function diffLines(oldStr, newStr) {
const a = oldStr.split('\n');
const b = newStr.split('\n');
const result = [];
let ai = 0, bi = 0;
while (ai < a.length || bi < b.length) {
if (ai < a.length && bi < b.length && a[ai] === b[bi]) {
result.push({ type: 'same', line: a[ai] });
ai++; bi++;
} else if (bi < b.length && (ai >= a.length || !a.includes(b[bi], ai))) {
result.push({ type: 'add', line: b[bi] });
bi++;
} else {
result.push({ type: 'del', line: a[ai] });
ai++;
}
}
return result;
}
function DiffModal({ oldJson, newJson, onConfirm, onCancel }) {
const { t } = useLang();
const lines = useMemo(() => {
const a = JSON.stringify(JSON.parse(oldJson), null, 2);
const b = JSON.stringify(JSON.parse(newJson), null, 2);
return diffLines(a, b).filter((l, i, arr) => {
if (l.type !== 'same') return true;
// показуємо контекст ±2 рядки біля змін
return arr.slice(Math.max(0,i-2), i+3).some(x => x.type !== 'same');
});
}, [oldJson, newJson]);
const added = lines.filter(l => l.type === 'add').length;
const removed = lines.filter(l => l.type === 'del').length;
return (
{t('editor.diff_title')}
+{added}
{' · '}
−{removed}
{t('cancel')}
{t('editor.diff_confirm')}
{lines.map((l, i) => (
{l.type === 'add' ? '+' : l.type === 'del' ? '−' : ' '} {l.line}
))}
);
}
function FormView({ cfg, onCfgChange, scenarios }) {
const { t } = useLang();
if (!cfg) return null;
const g = cfg.game || {};
const gp = g.gameProperties || {};
const op = cfg.operating || {};
// Хелпер: рядок → число або рядок
const num = (val) => { const n = Number(val); return isNaN(n) ? val : n; };
const ch = (path, cast) => (e) => onCfgChange(path, cast ? cast(e.target.value) : e.target.value);
const tog = (path, curVal) => () => onCfgChange(path, !curVal);
return (
{g.mods?.length > 0 && (
A5 {t('form.mods')}
{t('form.mod_name')}
{t('form.mod_workshop')}
{t('form.mod_version')}
{g.mods.map(m => (
{m.name}
{m.modId}
{m.version || auto }
))}
)}
);
}
// ---------- MAIN EDITOR ----------
function ConfigEditor({ servers: rawServers, initialServerId, goto }) {
const { t } = useLang();
const servers = useMemo(() => (rawServers || []).map(normalizeEditorServer), [rawServers]);
const [activeId, setActiveId] = useState(initialServerId || null);
const [tab, setTab] = useState('json');
const [search, setSearch] = useState('');
const [sidebarOpen, setSidebarOpen] = useState(() => localStorage.getItem('editor_sidebar') !== 'closed');
const [cfg, setCfg] = useState(null);
const [jsonText, setJsonText] = useState('');
const [jsonValid, setJsonValid] = useState(true);
const [dirty, setDirty] = useState(false);
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
const [savedMsg, setSavedMsg] = useState('');
const [loadErr, setLoadErr] = useState('');
const [showDiff, setShowDiff] = useState(false);
const [origJson, setOrigJson] = useState(''); // збережена версія для diff
const [scenarios, setScenarios] = useState([]);
// Monaco editor
const monacoEditorRef = useRef(null); // monaco editor instance
const editorContainerRef = useRef(null); // DOM div
const suppressChange = useRef(false); // prevent onChange loop when we setValue programmatically
// Re-layout Monaco when sidebar collapses/expands
useEffect(() => {
const t = setTimeout(() => {
if (monacoEditorRef.current) monacoEditorRef.current.layout();
}, 280);
return () => clearTimeout(t);
}, [sidebarOpen]);
// Load scenarios list once
useEffect(() => {
CIE_API.getScenarios()
.then(data => setScenarios(data || []))
.catch(() => {});
}, []);
// Initialize Monaco editor once the container div is mounted
useEffect(() => {
let disposed = false;
// Use window.require explicitly — Monaco's AMD loader, not CommonJS
window.require(['vs/editor/editor.main'], () => {
if (disposed || !editorContainerRef.current || monacoEditorRef.current) return;
const m = window.monaco;
// Custom dark theme that matches panel colors
m.editor.defineTheme('cie-dark', {
base: 'vs-dark',
inherit: true,
rules: [
{ token: 'string.key.json', foreground: '7ec8a0' },
{ token: 'string.value.json', foreground: 'ce9178' },
{ token: 'number', foreground: 'b5cea8' },
{ token: 'keyword.json', foreground: '569cd6' },
{ token: 'delimiter', foreground: '808080' },
],
colors: {
'editor.background': '#0e1117',
'editor.foreground': '#c9d1d9',
'editorLineNumber.foreground':'#444c56',
'editorLineNumber.activeForeground': '#768390',
'editor.lineHighlightBackground': '#161b22',
'editor.selectionBackground': '#264f78',
'editorCursor.foreground': '#7ec8a0',
'editorGutter.background': '#0e1117',
'scrollbarSlider.background': '#30363d',
},
});
const editor = m.editor.create(editorContainerRef.current, {
value: '',
language: 'json',
theme: 'cie-dark',
fontFamily: "'IBM Plex Mono', 'Cascadia Code', monospace",
fontSize: 12.5,
lineHeight: 20,
minimap: { enabled: false },
scrollBeyondLastLine: false,
automaticLayout: false, // manual layout — we call layout() ourselves
tabSize: 2,
wordWrap: 'off',
lineNumbers: 'on',
glyphMargin: true,
folding: true,
bracketPairColorization: { enabled: true },
formatOnPaste: true,
renderWhitespace: 'none',
padding: { top: 12, bottom: 12 },
});
editor.onDidChangeModelContent(() => {
if (suppressChange.current) return;
const val = editor.getValue();
setJsonText(val);
setDirty(true);
setSavedMsg('');
try { JSON.parse(val); setJsonValid(true); }
catch { setJsonValid(false); }
});
monacoEditorRef.current = editor;
// Initial layout after mount
requestAnimationFrame(() => editor.layout());
// Keep layout in sync with container size changes
if (window.ResizeObserver) {
const ro = new ResizeObserver(() => {
if (!disposed) editor.layout();
});
ro.observe(editorContainerRef.current);
// Store for cleanup
editorContainerRef.current._ro = ro;
}
});
return () => {
disposed = true;
// Disconnect ResizeObserver
if (editorContainerRef.current?._ro) {
editorContainerRef.current._ro.disconnect();
}
if (monacoEditorRef.current) {
monacoEditorRef.current.dispose();
monacoEditorRef.current = null;
}
};
}, []);
// Re-layout Monaco whenever it becomes visible (tab switch or loading finishes)
useEffect(() => {
if (tab !== 'json' || loading || loadErr) return;
const raf = requestAnimationFrame(() => {
monacoEditorRef.current?.layout();
});
return () => cancelAnimationFrame(raf);
}, [tab, loading, loadErr]);
// Pick first server if none pre-selected
useEffect(() => {
if (!activeId && servers.length > 0) {
setActiveId(servers[0].id);
}
}, [servers]);
// Fetch config when active server changes
useEffect(() => {
if (!activeId) return;
setLoading(true);
setLoadErr('');
setCfg(null);
setDirty(false);
setSavedMsg('');
CIE_API.getConfig(activeId)
.then(data => {
setCfg(data);
const text = JSON.stringify(data, null, 2);
setJsonText(text);
setOrigJson(text);
setJsonValid(true);
// Push new content into Monaco without triggering our onChange
if (monacoEditorRef.current) {
suppressChange.current = true;
monacoEditorRef.current.setValue(text);
suppressChange.current = false;
// Scroll to top
monacoEditorRef.current.setScrollPosition({ scrollTop: 0 });
}
})
.catch(err => setLoadErr(err.message))
.finally(() => setLoading(false));
}, [activeId]);
const handleJsonChange = (e) => {
const val = e.target.value;
setJsonText(val);
setDirty(true);
setSavedMsg('');
try { JSON.parse(val); setJsonValid(true); }
catch { setJsonValid(false); }
};
// Змінює одне поле у cfg через dot-path ("game.name", "rcon.port", …)
const handleFormChange = (path, value) => {
setCfg(prev => {
const next = JSON.parse(JSON.stringify(prev));
const keys = path.split('.');
let obj = next;
for (let i = 0; i < keys.length - 1; i++) {
if (obj[keys[i]] == null) obj[keys[i]] = {};
obj = obj[keys[i]];
}
obj[keys[keys.length - 1]] = value;
setJsonText(JSON.stringify(next, null, 2));
setJsonValid(true);
setDirty(true);
setSavedMsg('');
return next;
});
};
const handleSave = () => {
if (!jsonValid) return;
setShowDiff(true);
};
const doSave = () => {
setShowDiff(false);
let parsed;
try { parsed = JSON.parse(jsonText); }
catch { return; }
setSaving(true);
CIE_API.putConfig(activeId, parsed)
.then(() => {
setDirty(false);
setCfg(parsed);
setOrigJson(jsonText);
setSavedMsg(t('editor.committed'));
setTimeout(() => setSavedMsg(''), 4000);
})
.catch(err => {
setSavedMsg('✗ ' + err.message);
setTimeout(() => setSavedMsg(''), 6000);
})
.finally(() => setSaving(false));
};
const handleServerSwitch = (id) => {
if (dirty && !window.confirm(t('editor.unsaved_confirm'))) return;
setActiveId(id);
};
const activeServer = servers.find(s => s.id === activeId);
const visible = servers.filter(s =>
!search || `${s.id} ${s.name}`.toLowerCase().includes(search.toLowerCase())
);
const lines = jsonText.split('\n').length;
const bytes = new Blob([jsonText]).size;
return (
{showDiff && origJson && (
setShowDiff(false)}
/>
)}
{t('editor.title')}
{activeId || '—'}
·
{t('editor.gitea_ok')}
{loading && {t('loading')} }
{loadErr && ✗ {loadErr} }
{!loading && dirty && !saving && (
{jsonValid ? t('editor.unsaved_warn') : t('editor.invalid_json')}
)}
{savedMsg && {savedMsg} }
goto('dashboard')}>{t('editor.back')}
{saving ? t('saving') : t('editor.save_btn')}
{/* Server list */}
{t('servers')}
{servers.length}
{visible.map(s => (
handleServerSwitch(s.id)}
>
{s.id}
{s.region} · {s.cfgVersion}
))}
{/* Editor pane */}
{ const next = !sidebarOpen; setSidebarOpen(next); localStorage.setItem('editor_sidebar', next ? 'open' : 'closed'); }}
style={{background:'none', border:'none', color:'var(--text-dim)', cursor:'pointer', padding:'0 10px', fontSize:13, flexShrink:0}}
title="Toggle server list"
>{sidebarOpen ? '‹' : '›'}
setTab('form')}>{t('editor.tab_form')}
{
// Sync Monaco with any form edits before switching to JSON view
if (monacoEditorRef.current) {
const cur = monacoEditorRef.current.getValue();
if (cur !== jsonText) {
suppressChange.current = true;
monacoEditorRef.current.setValue(jsonText);
suppressChange.current = false;
}
requestAnimationFrame(() => monacoEditorRef.current?.layout());
}
setTab('json');
}}>{t('editor.tab_json')}
{saving ? t('saving') : loading ? t('loading') : dirty ? t('editor.state_unsaved') : t('editor.state_synced')}
·
{activeId}
{/*
Monaco must ALWAYS be in the DOM with real dimensions —
display:none kills its layout engine (black screen).
We use a position:relative wrapper and absolutely overlay
loading / error / form states on top of it instead.
*/}
{/* Monaco — always rendered, always has full size */}
{/* Overlay: loading */}
{loading && (
{t('editor.loading_cfg')}
)}
{/* Overlay: load error */}
{!loading && loadErr && (
{t('editor.load_fail')} {loadErr}
)}
{/* Overlay: Form tab */}
{!loading && !loadErr && tab === 'form' && (
)}
{t('editor.lines')} {lines}
·
{t('editor.bytes')} {bytes.toLocaleString()}
·
{jsonValid
? ✓ VALID
: ✗ JSON ERROR
}
UTF-8 · JSON · 2 sp
{tab === 'json' && (
monacoEditorRef.current?.getAction('editor.action.formatDocument').run()}
title="Format JSON (Shift+Alt+F)"
>
FORMAT
)}
);
}
window.ConfigEditor = ConfigEditor;