mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 23:27:09 +00:00
320 lines
12 KiB
TypeScript
320 lines
12 KiB
TypeScript
import Split from 'split.js'
|
|
import {
|
|
DataModel,
|
|
TreeView,
|
|
SourceView,
|
|
ConditionSchema,
|
|
LootTableSchema,
|
|
AdvancementSchema,
|
|
DimensionSchema,
|
|
DimensionTypeSchema,
|
|
LOCALES,
|
|
locale,
|
|
COLLECTIONS
|
|
} from 'minecraft-schemas'
|
|
import { RegistryFetcher } from './RegistryFetcher'
|
|
import { SandboxSchema } from './Sandbox'
|
|
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) => {
|
|
el.classList.add('check')
|
|
setTimeout(() => {
|
|
el.classList.remove('check')
|
|
}, 2000)
|
|
}
|
|
|
|
const languages: { [key: string]: string } = {
|
|
'en': 'English',
|
|
'pt': 'Português',
|
|
'ru': 'Русский',
|
|
'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',
|
|
'biome_source',
|
|
'block',
|
|
'enchantment',
|
|
'entity_type',
|
|
'fluid',
|
|
'item',
|
|
'loot_condition_type',
|
|
'loot_function_type',
|
|
'loot_pool_entry_type',
|
|
'mob_effect',
|
|
'stat_type',
|
|
'structure_feature'
|
|
]
|
|
|
|
const treeViewObserver = (el: HTMLElement) => {
|
|
el.querySelectorAll('.node-header[data-error]').forEach(e => {
|
|
e.insertAdjacentHTML('beforeend', `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>`)
|
|
})
|
|
el.querySelectorAll('.collapse.closed, button.add').forEach(e => {
|
|
e.insertAdjacentHTML('afterbegin', `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>`)
|
|
})
|
|
el.querySelectorAll('.collapse.open, button.remove').forEach(e => {
|
|
e.insertAdjacentHTML('afterbegin', `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>`)
|
|
})
|
|
}
|
|
Promise.all([
|
|
fetch(publicPath + 'locales/schema/en.json').then(r => r.json()),
|
|
fetch(publicPath + 'locales/app/en.json').then(r => r.json()),
|
|
RegistryFetcher(COLLECTIONS, registries)
|
|
]).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')!
|
|
const languageSelector = document.getElementById('language-selector')!
|
|
const languageSelectorMenu = document.getElementById('language-selector-menu')!
|
|
const themeSelector = document.getElementById('theme-selector')!
|
|
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')!
|
|
const sourceControlsToggle = document.getElementById('source-controls-toggle')!
|
|
const sourceControlsMenu = document.getElementById('source-controls-menu')!
|
|
const sourceControlsCopy = document.getElementById('source-controls-copy')!
|
|
const sourceControlsDownload = document.getElementById('source-controls-download')!
|
|
const sourceToggle = document.getElementById('source-toggle')!
|
|
const treeControlsToggle = document.getElementById('tree-controls-toggle')!
|
|
const treeControlsMenu = document.getElementById('tree-controls-menu')!
|
|
const treeControlsVersionToggle = document.getElementById('tree-controls-version-toggle')!
|
|
const treeControlsVersionMenu = document.getElementById('tree-controls-version-menu')!
|
|
const treeControlsReset = document.getElementById('tree-controls-reset')!
|
|
const treeControlsUndo = document.getElementById('tree-controls-undo')!
|
|
const treeControlsRedo = document.getElementById('tree-controls-redo')!
|
|
|
|
let selected = ''
|
|
|
|
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)
|
|
|
|
models[selected].invalidate()
|
|
}
|
|
|
|
modelSelectorMenu.innerHTML = ''
|
|
Object.keys(models).forEach(m => {
|
|
modelSelectorMenu.insertAdjacentHTML('beforeend',
|
|
`<div class="btn${m === selected ? ' selected' : ''}">${locale(m)}</div>`)
|
|
modelSelectorMenu.lastChild?.addEventListener('click', evt => {
|
|
reload(publicPath + m)
|
|
})
|
|
})
|
|
}
|
|
|
|
const updateLanguage = (key: string) => {
|
|
LOCALES.language = key
|
|
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
el.textContent = locale(el.attributes.getNamedItem('data-i18n')!.value)
|
|
})
|
|
|
|
languageSelectorMenu.innerHTML = ''
|
|
Object.keys(languages).forEach(key => {
|
|
languageSelectorMenu.insertAdjacentHTML('beforeend',
|
|
`<div class="btn${key === LOCALES.language ? ' selected' : ''}">${languages[key]}</div>`)
|
|
languageSelectorMenu.lastChild?.addEventListener('click', evt => {
|
|
updateLanguage(key)
|
|
languageSelectorMenu.style.visibility = 'hidden'
|
|
})
|
|
})
|
|
|
|
updateModel()
|
|
}
|
|
|
|
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 => {
|
|
modelSelectorMenu.style.visibility = 'hidden'
|
|
}, { capture: true, once: true })
|
|
})
|
|
|
|
window.onpopstate = (evt: PopStateEvent) => {
|
|
reload(location.pathname)
|
|
}
|
|
|
|
sourceToggle.addEventListener('click', evt => {
|
|
if (sourceViewEl.classList.contains('active')) {
|
|
sourceViewEl.classList.remove('active')
|
|
sourceToggle.classList.remove('toggled')
|
|
} else {
|
|
sourceViewEl.classList.add('active')
|
|
sourceToggle.classList.add('toggled')
|
|
}
|
|
})
|
|
|
|
languageSelector.addEventListener('click', evt => {
|
|
languageSelectorMenu.style.visibility = 'visible'
|
|
document.body.addEventListener('click', evt => {
|
|
languageSelectorMenu.style.visibility = 'hidden'
|
|
}, { capture: true, once: true })
|
|
})
|
|
|
|
const updateTheme = (theme: string | null) => {
|
|
if (theme === null) return
|
|
if (theme === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark')
|
|
themeSelector.classList.add('toggled')
|
|
localStorage.setItem(LOCAL_STORAGE_THEME, 'dark')
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'light')
|
|
themeSelector.classList.remove('toggled')
|
|
localStorage.setItem(LOCAL_STORAGE_THEME, 'light')
|
|
}
|
|
}
|
|
updateTheme(localStorage.getItem(LOCAL_STORAGE_THEME))
|
|
|
|
themeSelector.addEventListener('click', evt => {
|
|
if (document.documentElement.getAttribute('data-theme') === 'dark') {
|
|
updateTheme('light')
|
|
} else {
|
|
updateTheme('dark')
|
|
}
|
|
})
|
|
|
|
sourceControlsToggle.addEventListener('click', evt => {
|
|
sourceControlsMenu.style.visibility = 'visible'
|
|
document.body.addEventListener('click', evt => {
|
|
sourceControlsMenu.style.visibility = 'hidden'
|
|
}, { capture: true, once: true })
|
|
})
|
|
|
|
sourceControlsCopy.addEventListener('click', evt => {
|
|
sourceViewOutput.select()
|
|
document.execCommand('copy');
|
|
addChecked(sourceControlsCopy)
|
|
})
|
|
|
|
sourceControlsDownload.addEventListener('click', evt => {
|
|
const fileContents = encodeURIComponent(JSON.stringify(models[selected].data, null, 2) + "\n")
|
|
const dataString = "data:text/json;charset=utf-8," + fileContents
|
|
const downloadAnchor = document.getElementById('source-controls-download-anchor')!
|
|
downloadAnchor.setAttribute("href", dataString)
|
|
downloadAnchor.setAttribute("download", "data.json")
|
|
downloadAnchor.click()
|
|
})
|
|
|
|
treeControlsToggle.addEventListener('click', evt => {
|
|
treeControlsMenu.style.visibility = 'visible'
|
|
document.body.addEventListener('click', evt => {
|
|
treeControlsMenu.style.visibility = 'hidden'
|
|
}, { capture: true, once: true })
|
|
})
|
|
|
|
treeControlsVersionToggle.addEventListener('click', evt => {
|
|
treeControlsVersionMenu.style.visibility = 'visible'
|
|
document.body.addEventListener('click', evt => {
|
|
treeControlsVersionMenu.style.visibility = 'hidden'
|
|
}, { capture: true, once: true })
|
|
})
|
|
|
|
treeControlsReset.addEventListener('click', evt => {
|
|
models[selected].reset(models[selected].schema.default(), true)
|
|
addChecked(treeControlsReset)
|
|
})
|
|
|
|
treeControlsUndo.addEventListener('click', evt => {
|
|
models[selected].undo()
|
|
})
|
|
|
|
treeControlsRedo.addEventListener('click', evt => {
|
|
models[selected].redo()
|
|
})
|
|
|
|
document.addEventListener('keyup', evt => {
|
|
if (evt.ctrlKey && evt.key === 'z') {
|
|
models[selected].undo()
|
|
} else if (evt.ctrlKey && evt.key === 'y') {
|
|
models[selected].redo()
|
|
}
|
|
})
|
|
|
|
errorsToggle.addEventListener('click', evt => {
|
|
if (errorsViewEl.classList.contains('hidden')) {
|
|
errorsViewEl.classList.remove('hidden')
|
|
errorsToggle.classList.remove('toggled')
|
|
} else {
|
|
errorsViewEl.classList.add('hidden')
|
|
errorsToggle.classList.add('toggled')
|
|
}
|
|
})
|
|
|
|
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',
|
|
`<div class="home-generator-card">
|
|
${locale(m)}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"></path></svg>
|
|
</div>`)
|
|
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'
|
|
})
|