From a7f885293e72d768c581f1f1dbb5e3c7980cfba4 Mon Sep 17 00:00:00 2001 From: Misode Date: Mon, 13 Jul 2020 18:25:39 +0200 Subject: [PATCH] Add config file and support categories --- src/app/app.ts | 88 ++++++++++---------------------- src/config.json | 116 ++++++++++++++++++++++++++++++++++++++++++ src/index.html | 3 +- src/styles/global.css | 13 +++-- tsconfig.json | 3 +- webpack.config.js | 44 ++++++++-------- 6 files changed, 177 insertions(+), 90 deletions(-) create mode 100644 src/config.json diff --git a/src/app/app.ts b/src/app/app.ts index 8067a6e5..7d461302 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -13,6 +13,7 @@ import { import '@mcschema/java-1.16' import { RegistryFetcher } from './RegistryFetcher' import { ErrorsView } from './ErrorsView' +import config from '../config.json' const LOCAL_STORAGE_THEME = 'theme' const LOCAL_STORAGE_LANGUAGE = 'language' @@ -28,56 +29,16 @@ const addChecked = (el: HTMLElement) => { }, 2000) } -const languages: { [key: string]: string } = { - 'en': 'English', - 'pt': 'Português', - 'ru': 'Русский', - 'zh-cn': '简体中文' +const buildModel = (model: any) => { + if (model.schema) { + models[model.id] = new DataModel(SCHEMAS.get(model.schema)) + } else if (model.children) { + model.children.forEach(buildModel) + } } -const models: { [key: string]: DataModel } = { - 'loot-table': new DataModel(SCHEMAS.get('loot_table')), - 'predicate': new DataModel(SCHEMAS.get('predicate')), - 'advancement': new DataModel(SCHEMAS.get('advancement')), - 'dimension': new DataModel(SCHEMAS.get('dimension')), - 'dimension-type': new DataModel(SCHEMAS.get('dimension_type')), - 'worldgen/biome': new DataModel(SCHEMAS.get('biome')), - 'worldgen/carver': new DataModel(SCHEMAS.get('configured_carver')), - 'worldgen/feature': new DataModel(SCHEMAS.get('configured_feature')), - 'worldgen/structure-feature': new DataModel(SCHEMAS.get('configured_structure_feature')), - 'worldgen/surface-builder': new DataModel(SCHEMAS.get('configured_surface_builder')), - 'worldgen/processor-list': new DataModel(SCHEMAS.get('processor_list')), - 'worldgen/template-pool': new DataModel(SCHEMAS.get('template_pool')) -} - -const registries = [ - 'attribute', - 'block', - 'enchantment', - 'entity_type', - 'fluid', - 'item', - 'loot_condition_type', - 'loot_function_type', - 'loot_pool_entry_type', - 'mob_effect', - 'stat_type', - 'worldgen/block_state_provider_type', - 'worldgen/block_placer_type', - 'worldgen/biome_source', - 'worldgen/carver', - 'worldgen/chunk_generator', - 'worldgen/decorator', - 'worldgen/feature', - 'worldgen/feature_size_type', - 'worldgen/foliage_placer_type', - 'worldgen/structure_feature', - 'worldgen/structure_pool_element', - 'worldgen/structure_processor', - 'worldgen/surface_builder', - 'worldgen/tree_decorator_type', - 'worldgen/trunk_placer_type' -] +let models: { [key: string]: DataModel } = {} +config.models.forEach(buildModel) const treeViewObserver = (el: HTMLElement) => { el.querySelectorAll('.node-header[data-error]').forEach(e => { @@ -99,6 +60,7 @@ LOCALES.language = localStorage.getItem(LOCAL_STORAGE_LANGUAGE)?.toLowerCase() ? const homeLink = document.getElementById('home-link')! const homeGenerators = document.getElementById('home-generators')! +const categoryGenerators = document.getElementById('category-generators')! const selectedModel = document.getElementById('selected-model')! const modelSelector = document.getElementById('model-selector')! const modelSelectorMenu = document.getElementById('model-selector-menu')! @@ -141,7 +103,7 @@ const views: {[key: string]: AbstractView} = { Promise.all([ fetchLocale(LOCALES.language), ...(LOCALES.language === 'en' ? [] : [fetchLocale('en')]), - RegistryFetcher(COLLECTIONS, registries) + RegistryFetcher(COLLECTIONS, config.registries) ]).then(responses => { let selected = '' @@ -180,11 +142,11 @@ Promise.all([ }) languageSelectorMenu.innerHTML = '' - Object.keys(languages).forEach(key => { + config.languages.forEach(lang => { languageSelectorMenu.insertAdjacentHTML('beforeend', - `
${languages[key]}
`) + `
${lang.name}
`) languageSelectorMenu.lastChild?.addEventListener('click', evt => { - updateLanguage(key, true) + updateLanguage(lang.code, true) languageSelectorMenu.style.visibility = 'hidden' }) }) @@ -336,17 +298,23 @@ Promise.all([ (document.querySelector('.content') as HTMLElement).style.overflowY = 'initial' modelSelector.style.display = 'none' panels.forEach(v => v.style.display = 'none') - homeGenerators.innerHTML = '' - Object.keys(models).forEach(m => { - homeGenerators.insertAdjacentHTML('beforeend', - `
- ${locale(m)} + + const addGen = (output: HTMLElement) => (m: any) => { + output.insertAdjacentHTML('beforeend', + `
+ ${locale(m.name)}
`) - homeGenerators.lastChild?.addEventListener('click', evt => { - reload(publicPath + m) + output.lastChild?.addEventListener('click', evt => { + reload(publicPath + m.id) }) - }) + } + + homeGenerators.innerHTML = '' + categoryGenerators.innerHTML = '' + config.models.forEach(addGen(homeGenerators)) + config.models.find(m => m.id === selected)?.children?.forEach(addGen(categoryGenerators)) + } else { homeViewEl.style.display = 'none'; (document.querySelector('.gutter') as HTMLElement).style.display = '' diff --git a/src/config.json b/src/config.json new file mode 100644 index 00000000..a2a61ac9 --- /dev/null +++ b/src/config.json @@ -0,0 +1,116 @@ +{ + "languages": [ + { + "code": "en", + "name": "English" + }, + { + "code": "pt", + "name": "Português" + }, + { + "code": "ru", + "name": "Русский" + }, + { + "code": "zh-cn", + "name": "简体中文" + } + ], + "models": [ + { + "id": "loot-table", + "name": "Loot Table", + "schema": "loot_table" + }, + { + "id": "predicate", + "name": "Predicate", + "schema": "predicate" + }, + { + "id": "advancement", + "name": "Advancement", + "schema": "advancement" + }, + { + "id": "dimension", + "name": "Dimension", + "schema": "dimension" + }, + { + "id": "dimension-type", + "name": "Dimension Type", + "schema": "dimension_type" + }, + { + "id": "worldgen", + "name": "Worldgen", + "children": [ + { + "id": "worldgen/biome", + "name": "Biome", + "schema": "biome" + }, + { + "id": "worldgen/carver", + "name": "Carver", + "schema": "configured_carver" + }, + { + "id": "worldgen/feature", + "name": "Feature", + "schema": "configured_feature" + }, + { + "id": "worldgen/structure-feature", + "name": "Structure Feature", + "schema": "configured_structure_feature" + }, + { + "id": "worldgen/surface-builder", + "name": "Surface Builder", + "schema": "configured_surface_builder" + }, + { + "id": "worldgen/processor-list", + "name": "Processor List", + "schema": "processor_list" + }, + { + "id": "worldgen/template-pool", + "name": "Template Pool", + "schema": "template_pool" + } + ] + } + ], + "registries": [ + "attribute", + "block", + "enchantment", + "entity_type", + "fluid", + "item", + "loot_condition_type", + "loot_function_type", + "loot_pool_entry_type", + "mob_effect", + "stat_type", + "worldgen/block_state_provider_type", + "worldgen/block_placer_type", + "worldgen/biome_source", + "worldgen/carver", + "worldgen/chunk_generator", + "worldgen/decorator", + "worldgen/feature", + "worldgen/feature_size_type", + "worldgen/foliage_placer_type", + "worldgen/structure_feature", + "worldgen/structure_pool_element", + "worldgen/structure_processor", + "worldgen/surface_builder", + "worldgen/tree_decorator_type", + "worldgen/trunk_placer_type" + ] +} diff --git a/src/index.html b/src/index.html index d1307f41..0afc7cfe 100644 --- a/src/index.html +++ b/src/index.html @@ -96,7 +96,8 @@
-
+
+
diff --git a/src/styles/global.css b/src/styles/global.css index 5f27a1b8..adfb75c3 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -299,16 +299,17 @@ body { } .home { + display: flex; padding: 20px; } -.home-generators { +.generators-list { display: flex; flex-direction: column; margin: 0 20px; } -.home-generator-card { +.generators-card { margin: 5px 0; padding: 8px 15px; cursor: pointer; @@ -321,13 +322,17 @@ body { align-items: center; justify-content: space-between; transition: background-color 0.2s; + transition: margin 0.2s; } -.home-generator-card:hover { +.generators-card:hover, +.generators-card.selected { background-color: var(--nav-faded-hover); + margin-left: 8px; + margin-right: -8px; } -.home-generator-card svg { +.generators-card svg { margin-left: 10px; } diff --git a/tsconfig.json b/tsconfig.json index c270df69..041bf5d7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,8 @@ "moduleResolution": "node", "esModuleInterop": true, "downlevelIteration": true, - "forceConsistentCasingInFileNames": true + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true }, "include": [ "src" diff --git a/webpack.config.js b/webpack.config.js index 9313e644..2a8ebb2d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin"); +const config = require('./src/config.json') module.exports = (env, argv) => ({ entry: './src/app/app.ts', @@ -28,12 +29,10 @@ module.exports = (env, argv) => ({ }), new MergeJsonWebpackPlugin({ output: { - groupBy: [ 'de', 'en', 'fr', 'it', 'ja', 'pt', 'ru', 'zh-cn' ].map(code => ( - { - pattern: `{./src/locales/${code}.json,./node_modules/@mcschema/core/locales/${code}.json}`, - fileName: `./locales/${code}.json` - } - )) + groupBy: config.languages.map(lang => ({ + pattern: `{./src/locales/${lang.code}.json,./node_modules/@mcschema/core/locales/${lang.code}.json}`, + fileName: `./locales/${lang.code}.json` + })) } }), new HtmlWebpackPlugin({ @@ -41,23 +40,20 @@ module.exports = (env, argv) => ({ filename: 'index.html', template: 'src/index.html' }), - ...[ - [ 'loot-table', 'Loot Table' ], - [ 'predicate', 'Predicate' ], - [ 'advancement', 'Advancement' ], - [ 'dimension', 'Dimension' ], - [ 'dimension-type', 'Dimension Type' ], - [ 'worldgen/biome', 'Biome' ], - [ 'worldgen/carver', 'Carver' ], - [ 'worldgen/feature', 'Feature' ], - [ 'worldgen/structure-feature', 'Structure Feature' ], - [ 'worldgen/surface-builder', 'Surface Builder' ], - [ 'worldgen/processor-list', 'Processor List' ], - [ 'worldgen/template-pool', 'Template Pool' ], - ].map(page => new HtmlWebpackPlugin({ - title: `${page[1]} Generators Minecraft`, - filename: `${page[0]}/index.html`, - template: 'src/index.html' - })) + ...config.models.flatMap(buildModel) ] }) + +function buildModel(model) { + const page = new HtmlWebpackPlugin({ + title: `${model.name} Generators Minecraft`, + filename: `${model.id}/index.html`, + template: 'src/index.html' + }) + if (model.schema) { + return page + } else if (model.children) { + return [page, ...model.children.flatMap(buildModel)] + } + return [] +}