Use html plugin + handle URLs

This commit is contained in:
Misode
2020-06-03 21:39:15 +02:00
parent 575bfb4bc7
commit 65eac13082
9 changed files with 75 additions and 25 deletions

View File

@@ -22,4 +22,4 @@ jobs:
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: master
FOLDER: public
FOLDER: dist

2
.gitignore vendored
View File

@@ -1,3 +1,3 @@
node_modules
/public/build
/dist
package-lock.json

View File

@@ -14,6 +14,7 @@
"dependencies": {
"@types/split.js": "^1.4.0",
"copy-webpack-plugin": "^6.0.1",
"html-webpack-plugin": "^4.3.0",
"minecraft-schemas": "^0.1.3",
"split.js": "^1.5.11",
"ts-loader": "^7.0.4",

View File

@@ -21,7 +21,9 @@ const models: {
'sandbox': new DataModel(SandboxSchema)
}
let model = models["loot-table"]
const modelSelector = (document.getElementById('model-selector') as HTMLInputElement)
const defaultModel = location.pathname.replace(/^\//, '')
let model = models[defaultModel]
const treeViewEl = document.getElementById('tree-view')!
const sourceviewEl = document.getElementById('source-view')!
@@ -37,15 +39,29 @@ const views: {
'source': new SourceView(model, sourceviewEl.getElementsByTagName('textarea')[0], {indentation: 2})
}
const modelSelector = (document.getElementById('model-selector') as HTMLInputElement)
modelSelector.addEventListener('change', evt => {
model = models[modelSelector.value]
const updateModel = (newModel: string) => {
model = models[newModel]
for (const v in views) {
views[v].setModel(model)
}
modelSelector.innerHTML = Object.keys(models)
.map(m => `<option value=${m}${m === newModel ? ' selected' : ''}>${m}</option>`)
.join('')
model.invalidate()
}
updateModel(defaultModel)
modelSelector.addEventListener('change', evt => {
const newModel = modelSelector.value
updateModel(newModel)
history.pushState({model: newModel}, newModel, `../${newModel}`)
})
window.onpopstate = (evt: PopStateEvent) => {
const newModel = location.pathname.replace(/^\//, '')
updateModel(newModel)
}
const sourceControlsToggle = document.getElementById('source-controls-toggle')!
const sourceControlsMenu = document.getElementById('source-controls-menu')!
sourceControlsToggle.addEventListener('click', evt => {
@@ -82,11 +98,7 @@ sourceControlsDownload.addEventListener('click', evt => {
downloadAnchor.click()
})
setTimeout(() => {
window.scroll(0, 0)
}, 1000)
fetch('build/locales-schema/en.json')
fetch('locales/schema/en.json')
.then(r => r.json())
.then(l => {
LOCALES.register('en', l)

View File

@@ -3,19 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Generators</title>
<link rel="stylesheet" href="./styles/global.css">
<link rel="stylesheet" href="./styles/nodes.css">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="../styles/global.css">
<link rel="stylesheet" href="../styles/nodes.css">
</head>
<body>
<div class="container">
<div class="header">
<select id="model-selector" class="btn">
<option value="loot-table">Loot Table</option>
<option value="predicate">Predicate</option>
<option value="advancement">Advancement</option>
<option value="sandbox">Sandbox</option>
</select>
<select id="model-selector" class="btn"></select>
</div>
<div class="content">
<div class="tree" id="tree-view"></div>
@@ -42,6 +37,5 @@
</div>
</div>
</div>
<script src="./build/bundle.js"></script>
</body>
</html>

13
src/home.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="../styles/global.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>

View File

@@ -1,11 +1,12 @@
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = (env, argv) => ({
entry: './src/app/app.ts',
output: {
path: __dirname + '/public',
path: __dirname + '/dist',
publicPath: argv.mode === 'production' ? '/dev/' : '/',
filename: 'build/bundle.js'
filename: 'js/bundle.js'
},
resolve: {
extensions: ['.ts', '.js']
@@ -20,13 +21,42 @@ module.exports = (env, argv) => ({
patterns: [
{
from: 'src/locales',
to: 'build/locales'
to: 'locales/app'
},
{
from: 'node_modules/minecraft-schemas/src/locales',
to: 'build/locales-schema'
to: 'locales/schema'
},
{
from: 'src/styles',
to: 'styles'
}
]
}),
new HtmlWebpackPlugin({
title: 'Minecraft Generators',
filename: 'index.html',
template: 'src/home.html'
}),
new HtmlWebpackPlugin({
title: 'Loot Table Generator Minecraft',
filename: 'loot-table/index.html',
template: 'src/generator.html'
}),
new HtmlWebpackPlugin({
title: 'Predicate Generator Minecraft',
filename: 'predicate/index.html',
template: 'src/generator.html'
}),
new HtmlWebpackPlugin({
title: 'Advancement Generator Minecraft',
filename: 'advancement/index.html',
template: 'src/generator.html'
}),
new HtmlWebpackPlugin({
title: 'Sandbox Generator Minecraft',
filename: 'sandbox/index.html',
template: 'src/generator.html'
})
]
})