GXC Game

Downloading...

Acceptable rollback frames marker:

[no stats available]

' const wallpaperConfigDocument = document.getElementById("wallpaper-config-iframe").contentDocument; wallpaperConfigDocument.open(); wallpaperConfigDocument.write(configHTML); wallpaperConfigDocument.close(); const storedConfig = JSON.parse(localStorage.getItem(wallpaperConfigKey)); if (storedConfig) { wallpaperConfig = storedConfig; } const configElement = wallpaperConfigDocument.getElementById("wallpaper-config"); const resetButton = wallpaperConfigDocument.getElementById("wallpaper-reset-parameters"); resetButton.addEventListener("click", (e) => { wallpaper_reset_config(); wallpaperConfig = {}; add_config_elems(configElement, definitions); notify_config_change(); }, false); add_config_elems(configElement, definitions); notify_config_change(); } function add_config_elems(configElement, definitions) { while (configElement.hasChildNodes()) { configElement.removeChild(configElement.lastChild); } definitions.value .map(d => create_elems(d, wallpaperConfig, "")) .filter(e => e !== null && e !== undefined) .map(e => configElement.appendChild(e)); } function create_elems(definition, config, prefixId) { if (definition.type === undefined || definition.name === undefined) { console.log("missing definition name or type for: ", definition); return null; } if (definition.type === "section") { return create_section_elem(definition, config, prefixId); } if (definition.value === undefined ) { console.log("missing definition value for: ", definition); return null; } if (definition.type === "range") { return create_range_elem(definition, config, prefixId); } if (definition.type === "boolean") { return create_checkbox_elem(definition, config, prefixId); } if (definition.type === "color" || definition.type === "colour") { return create_color_elem(definition, config, prefixId); } if (definition.type === "string") { return create_text_elem(definition, config, prefixId); } if (definition.type === "string_multiline") { return create_multiline_text_elem(definition, config, prefixId); } if (definition.type === "select") { return create_select_elem(definition, config, prefixId); } if (definition.type === "file" || definition.type === "folder") { return create_not_supported_elem(definition, config); } console.log("missing config value for: ", definition); return null; } function create_section_elem(definition, config, prefixId) { const divElem = document.createElement("div"); const headerElem = document.createElement("h2"); headerElem.innerHTML = definition.label; divElem.appendChild(headerElem); const sectionId = prefixId + definition.name + "-" if (!config[definition.name]) { config[definition.name] = {}; } definition.children .map(c => create_elems(c, config[definition.name], sectionId)) .filter(e => e !== null && e !== undefined) .map(e => divElem.appendChild(e)); return divElem; } function get_initial_value(definition, config) { let value = definition.value; const configValue = config[definition.name]; if (configValue && (typeof(configValue) === typeof(value))) { value = configValue; } return value; } function wrap_with_label(inputElem, definition, prefixId) { const controlElem = document.createElement("div"); controlElem.classList.add(definition.name + "-control"); controlElem.classList.add("config-row"); const labelElem = document.createElement("label"); labelElem.htmlFor = prefixId + definition.name; labelElem.innerHTML = "" + (definition.label || definition.name) + ""; if (definition.description) { labelElem.innerHTML += "

" + definition.description + "

"; } controlElem.appendChild(labelElem); inputElem.id = prefixId + definition.name; controlElem.appendChild(inputElem); return controlElem; } function create_range_elem(definition, config, prefixId) { const value = get_initial_value(definition, config); const valueElem = document.createElement("span"); valueElem.style = "margin: 0.5em"; valueElem.innerHTML = "(" + value + ")"; const stepElem = document.createElement("input"); stepElem.id = prefixId + definition.name; stepElem.type = "range"; stepElem.min = definition.min || 0; stepElem.max = definition.max || 100; stepElem.step = definition.step || 1; stepElem.value = value; config[definition.name] = value; function range_value_updated(e) { const valueUpdate = Number(e.target.value); config[definition.name] = valueUpdate; valueElem.innerHTML = "(" + valueUpdate + ")"; notify_config_change(); } stepElem.addEventListener("change", range_value_updated, false); stepElem.addEventListener("input", range_value_updated, false); const valueWrapper = document.createElement("span"); valueWrapper.appendChild(valueElem); valueWrapper.appendChild(stepElem); return wrap_with_label(valueWrapper, definition, prefixId); } function create_checkbox_elem(definition, config, prefixId) { const value = get_initial_value(definition, config); const checkboxElem = document.createElement("input"); checkboxElem.type = "checkbox"; checkboxElem.checked = value; config[definition.name] = value; checkboxElem.addEventListener("change", (e) => { const valueUpdate = Boolean(e.target.checked); config[definition.name] = valueUpdate; notify_config_change(); }); return wrap_with_label(checkboxElem, definition, prefixId); } function create_color_elem(definition, config, prefixId) { const value = get_initial_value(definition, config); const bgrColor = value; const r = (bgrColor & 0x0000ff); const g = (bgrColor & 0x00ff00) >> 8; const b = (bgrColor & 0xff0000) >> 16; const rgbColor = (r << 16) + (g << 8) + b; const color = "#" + rgbColor.toString(16).padStart(6, '0'); const colorElem = document.createElement("input"); colorElem.type = "color"; colorElem.value = color; config[definition.name] = value; function color_value_updated(e) { const color = e.target.value; const rgbColor = parseInt(color.slice(1), 16); const r = (rgbColor & 0xff0000) >> 16; const g = (rgbColor & 0x00ff00) >> 8; const b = (rgbColor & 0x0000ff); const bgrColor = (b << 16) + (g << 8) + r; config[definition.name] = bgrColor; notify_config_change(); } colorElem.addEventListener("change", color_value_updated, false); colorElem.addEventListener("input", color_value_updated, false); return wrap_with_label(colorElem, definition, prefixId); } function create_text_elem(definition, config, prefixId) { const value = get_initial_value(definition, config); const textElem = document.createElement("input"); textElem.type = "text"; textElem.value = value; console.log("text", value) if (definition.max_length && definition.max_length > 0) { textElem.maxLength = definition.max_length; } config[definition.name] = value; textElem.addEventListener("input", (e) => { config[definition.name] = e.target.value; notify_config_change(); }); return wrap_with_label(textElem, definition, prefixId); } function create_multiline_text_elem(definition, config, prefixId) { const value = get_initial_value(definition, config); const textareaElem = document.createElement("textarea"); textareaElem.rows = 5; textareaElem.cols = 50; textareaElem.value = value; if (definition.max_length && definition.max_length > 0) { textareaElem.maxLength = definition.max_length; } config[definition.name] = value; textareaElem.addEventListener("input", (e) => { config[definition.name] = e.target.value; notify_config_change(); }); return wrap_with_label(textareaElem, definition, prefixId); } function create_select_elem(definition, config, prefixId) { const value = get_initial_value(definition, config); const selectElem = document.createElement("select"); selectElem.value = value; const options = definition.options || []; options.forEach(o => { const option = document.createElement("option"); option.value = o; option.text = o; option.selected = o == value ? "selected" : ""; selectElem.appendChild(option); }) config[definition.name] = value; selectElem.addEventListener("change", (e) => { e.selected = "selected"; config[definition.name] = e.target.value; notify_config_change(); }); return wrap_with_label(selectElem, definition, prefixId); } function create_not_supported_elem(definition, config, prefixId) { const labelElem = document.createElement("label"); labelElem.innerHTML = "Not supported in browser"; config[definition.name] = definition.value; return wrap_with_label(labelElem, definition, prefixId); } function notify_config_change() { console.log(wallpaperConfig) localStorage.setItem(wallpaperConfigKey, JSON.stringify(wallpaperConfig)); wallpaper_update_config(JSON.stringify(wallpaperConfig)); }