diff --git a/src/app/ErrorsView.ts b/src/app/ErrorsView.ts index 528cb161..5297dc38 100644 --- a/src/app/ErrorsView.ts +++ b/src/app/ErrorsView.ts @@ -1,19 +1,14 @@ -import { IView, locale, DataModel, ModelListener } from "minecraft-schemas"; +import { locale, DataModel, ModelListener } from "minecraft-schemas"; import { Errors } from "minecraft-schemas/lib/model/Errors"; -export class ErrorsView implements ModelListener, IView { +export class ErrorsView implements ModelListener { model: DataModel target: HTMLElement constructor(model: DataModel, target: HTMLElement) { this.model = model this.target = target - } - - setModel(newModel: DataModel) { - this.model.removeListener(this) - this.model = newModel - this.model.addListener(this) + model.addListener(this) } errors(errors: Errors): void { diff --git a/src/app/app.ts b/src/app/app.ts index 7a5dc030..6d974c28 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,7 +1,6 @@ import Split from 'split.js' import { DataModel, - IView, TreeView, SourceView, ConditionSchema, @@ -11,7 +10,8 @@ import { DimensionTypeSchema, LOCALES, locale, - COLLECTIONS + COLLECTIONS, + ModelListener } from 'minecraft-schemas' import { RegistryFetcher } from './RegistryFetcher' import { SandboxSchema } from './Sandbox' @@ -19,6 +19,8 @@ import { ErrorsView } from './ErrorsView' const LOCAL_STORAGE_THEME = 'theme' +const publicPath = process.env.NODE_ENV === 'production' ? '/dev/' : '/'; + const modelFromPath = (p: string) => p.split('/').filter(e => e.length !== 0).pop() ?? '' const addChecked = (el: HTMLElement) => { @@ -35,6 +37,15 @@ const languages: { [key: string]: string } = { 'zh-CN': '简体中文' } +const models: { [key: string]: DataModel } = { + 'loot-table': new DataModel(LootTableSchema), + 'predicate': new DataModel(ConditionSchema), + 'advancement': new DataModel(AdvancementSchema), + 'dimension': new DataModel(DimensionSchema), + 'dimension-type': new DataModel(DimensionTypeSchema), + 'sandbox': new DataModel(SandboxSchema) +} + const registries = [ 'attribute', 'biome', @@ -60,12 +71,9 @@ const treeViewObserver = (el: HTMLElement) => { e.insertAdjacentHTML('afterbegin', ``) }) el.querySelectorAll('.collapse.open, button.remove').forEach(e => { - e.insertAdjacentHTML('afterbegin', ` - `) + e.insertAdjacentHTML('afterbegin', ``) }) } - -const publicPath = process.env.NODE_ENV === 'production' ? '/dev/' : '/'; Promise.all([ fetch(publicPath + 'locales/schema/en.json').then(r => r.json()), fetch(publicPath + 'locales/app/en.json').then(r => r.json()), @@ -73,6 +81,8 @@ Promise.all([ ]).then(responses => { LOCALES.register('en', {...responses[0], ...responses[1]}) + const homeLink = document.getElementById('home-link')! + const homeGenerators = document.getElementById('home-generators')! const selectedModel = document.getElementById('selected-model')! const modelSelector = document.getElementById('model-selector')! const modelSelectorMenu = document.getElementById('model-selector-menu')! @@ -82,6 +92,7 @@ Promise.all([ const treeViewEl = document.getElementById('tree-view')! const sourceViewEl = document.getElementById('source-view')! const errorsViewEl = document.getElementById('errors-view')! + const homeViewEl = document.getElementById('home-view')! const errorsToggle = document.getElementById('errors-toggle')! const sourceViewOutput = (document.getElementById('source-view-output') as HTMLTextAreaElement) const treeViewOutput = document.getElementById('tree-view-output')! @@ -98,48 +109,33 @@ Promise.all([ const treeControlsUndo = document.getElementById('tree-controls-undo')! const treeControlsRedo = document.getElementById('tree-controls-redo')! - let selected = modelFromPath(location.pathname) - if (selected.length === 0) { - selected = 'loot-table' - } + let selected = '' - const models: { [key: string]: DataModel } = { - 'loot-table': new DataModel(LootTableSchema), - 'predicate': new DataModel(ConditionSchema), - 'advancement': new DataModel(AdvancementSchema), - 'dimension': new DataModel(DimensionSchema), - 'dimension-type': new DataModel(DimensionTypeSchema), - 'sandbox': new DataModel(SandboxSchema) - } + const updateModel = () => { + if (models[selected] === undefined) { + selectedModel.textContent = locale(`title.home`) + } else { + selectedModel.textContent = locale(`title.${selected}`) + new TreeView(models[selected], treeViewOutput, { + showErrors: true, + observer: treeViewObserver + }), + new SourceView(models[selected], sourceViewOutput, { + indentation: 2 + }), + new ErrorsView(models[selected], errorsViewEl) - const views: IView[] = [ - new TreeView(models[selected], treeViewOutput, { - showErrors: true, - observer: treeViewObserver - }), - new SourceView(models[selected], sourceViewOutput, { - indentation: 2 - }), - new ErrorsView(models[selected], errorsViewEl) - ] + models[selected].invalidate() + } - const updateModel = (newModel: string) => { - selected = newModel - views.forEach(v => v.setModel(models[selected])) - selectedModel.textContent = locale(`title.${selected}`) - modelSelectorMenu.innerHTML = '' Object.keys(models).forEach(m => { modelSelectorMenu.insertAdjacentHTML('beforeend', `
${locale(m)}
`) modelSelectorMenu.lastChild?.addEventListener('click', evt => { - updateModel(m) - history.pushState({model: m}, m, publicPath + m) - modelSelectorMenu.style.visibility = 'hidden' + reload(publicPath + m) }) }) - - models[selected].invalidate() } const updateLanguage = (key: string) => { @@ -159,14 +155,17 @@ Promise.all([ }) }) - updateModel(selected) + updateModel() } - updateLanguage('en') Split([treeViewEl, sourceViewEl], { sizes: [66, 34] }) + homeLink.addEventListener('click', evt => { + reload(publicPath) + }) + modelSelector.addEventListener('click', evt => { modelSelectorMenu.style.visibility = 'visible' document.body.addEventListener('click', evt => { @@ -175,7 +174,7 @@ Promise.all([ }) window.onpopstate = (evt: PopStateEvent) => { - updateModel(modelFromPath(location.pathname)) + reload(location.pathname) } sourceToggle.addEventListener('click', evt => { @@ -284,5 +283,38 @@ Promise.all([ } }) + const reload = (target: string) => { + selected = modelFromPath(target) ?? '' + if (target) { + history.pushState(target, 'Change Page', target) + } + + const panels = [treeViewEl, sourceViewEl, errorsViewEl] + if (models[selected] === undefined) { + homeViewEl.style.display = ''; + (document.querySelector('.gutter') as HTMLElement).style.display = 'none' + modelSelector.style.display = 'none' + panels.forEach(v => v.style.display = 'none') + homeGenerators.innerHTML = '' + Object.keys(models).forEach(m => { + homeGenerators.insertAdjacentHTML('beforeend', + `
+ ${locale(m)} + +
`) + homeGenerators.lastChild?.addEventListener('click', evt => { + reload(publicPath + m) + }) + }) + } else { + homeViewEl.style.display = 'none'; + (document.querySelector('.gutter') as HTMLElement).style.display = '' + modelSelector.style.display = '' + panels.forEach(v => v.style.display = '') + } + updateModel() + updateLanguage('en') + } + reload(location.pathname) document.body.style.visibility = 'initial' }) diff --git a/src/index.html b/src/index.html index 4c354b73..1299212f 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,9 @@
+

@@ -31,9 +34,7 @@
@@ -94,8 +95,11 @@
+
+
+
-