akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 07:37:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Layout styling

Browse Source
This commit is contained in:
Misode
2020-06-03 03:40:52 +02:00
parent 3520fe8bba
commit 12b4725ed4
4 changed files with 145 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -12,8 +12,10 @@
"author": "Misode",
"license": "MIT",
"dependencies": {
"@types/split.js": "^1.4.0",
"copy-webpack-plugin": "^6.0.1",
"minecraft-schemas": "^0.1.2",
"split.js": "^1.5.11",
"ts-loader": "^7.0.4",
"typescript": "^3.9.3",
"webpack": "^4.43.0",

25
public/index.html
View File

@@ -4,14 +4,29 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/global.css">
<link rel="stylesheet" href="./styles/nodes.css">
</head>
<body>
<div id="header"></div>
<hr>
<div id="view"></div>
<hr>
<div id="source" style="font-family: monospace;"></div>
<div class="container">
<div class="header">
<select id="model-selector" class="dropdown">
<option value="loot-table">Loot Table</option>
<option value="predicate">Predicate</option>
<option value="advancement">Advancement</option>
<option value="sandbox">Sandbox</option>
</select>
</div>
<div class="content">
<div class="tree" id="tree-view"></div>
<div class="source" id="source-view">
<div class="source-controls">
<button class="btn">Copy</button>
</div>
<textarea spellcheck="false" autocorrect="off" autocapitalize="off"></textarea>
</div>
</div>
</div>
<script src="./build/bundle.js"></script>
</body>
</html>

92
public/styles/global.css Normal file
View File

@@ -0,0 +1,92 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #ffffff;
}
.header {
display: flex;
padding: 10px;
height: 56px;
/* background: #2e2e2e; */
border-bottom: 2px #ccc solid;
color: #343a40
}
.content {
display: flex;
height: calc(100vh - 56px);
overflow-y: hidden;
}
.tree {
padding: 1rem;
overflow-y: auto;
}
.source textarea {
width: 100%;
height: calc(100vh - 56px - 30px - 13px);
padding: 0.4rem;
border: none;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
-webkit-tab-size: 4;
outline: none;
}
.source textarea::selection {
background-color: rgba(103, 134, 221, 0.6);
}
.source-controls {
padding: 0.4rem;
display: flex;
flex-direction: row-reverse;
}
.gutter.gutter-horizontal {
border-left: 2px solid #ccc;
float: left;
cursor: ew-resize;
}
.btn {
display: inline;
border: none;
color: #ffffff;
background: #5c615f;
padding: 7px 20px;
cursor: pointer;
outline: none;
transition: background-color 0.2s;
}
.btn:hover {
background: #787c7b;
}
.dropdown {
display: inline;
border: none;
color: #ffffff;
background: #5c615f;
padding: 7px 7px;
cursor: pointer;
outline: none;
font-size: 1rem;
transition: background-color 0.2s;
}
.dropdown:hover {
background: #787c7b;
}

56
src/app/app.ts
View File

@@ -1,5 +1,6 @@
import {
DataModel,
IView,
TreeView,
SourceView,
ConditionSchema,
@@ -7,41 +8,46 @@ import {
AdvancementSchema,
LOCALES
} from 'minecraft-schemas'
import Split from 'split.js'
import { SandboxSchema } from './Sandbox'
const predicateModel = new DataModel(ConditionSchema)
const lootTableModel = new DataModel(LootTableSchema)
const advancementModel = new DataModel(AdvancementSchema)
const sandboxModel = new DataModel(SandboxSchema)
const models: {
[key: string]: DataModel
} = {
'loot-table': new DataModel(LootTableSchema),
'predicate': new DataModel(ConditionSchema),
'advancement': new DataModel(AdvancementSchema),
'sandbox': new DataModel(SandboxSchema)
}
let model = lootTableModel
let model = models["loot-table"]
let sourceView = new SourceView(model, document.getElementById('source')!, {indentation: 2})
let treeView = new TreeView(model, document.getElementById('view')!)
let treeViewEl = document.getElementById('tree-view')!
let sourceviewEl = document.getElementById('source-view')!
Split([treeViewEl, sourceviewEl], {
sizes: [66, 34]
})
const modelSelector = document.createElement('select')
modelSelector.value = 'predicate'
modelSelector.innerHTML = `
<option value="advancement">Advancement</option>
<option value="loot-table">Loot Table</option>
<option value="predicate">Predicate</option>
<option value="sandbox">Sandbox</option>`
const views: {
[key: string]: IView
} = {
'tree': new TreeView(model, treeViewEl),
'source': new SourceView(model, sourceviewEl.getElementsByTagName('textarea')[0], {indentation: 2})
}
const modelSelector = (document.getElementById('model-selector') as HTMLInputElement)
modelSelector.addEventListener('change', evt => {
if (modelSelector.value === 'sandbox') {
model = sandboxModel
} else if (modelSelector.value === 'loot-table') {
model = lootTableModel
} else if (modelSelector.value === 'advancement') {
model = advancementModel
} else {
model = predicateModel
model = models[modelSelector.value]
for (const v in views) {
views[v].setModel(model)
}
sourceView.setModel(model)
treeView.setModel(model)
model.invalidate()
})
document.getElementById('header')?.append(modelSelector)
setTimeout(() => {
window.scroll(0, 0)
}, 1000)
fetch('build/locales-schema/en.json')
.then(r => r.json())