diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..0f2e2ff
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+*.html linguist-generated
+*.css linguist-generated
+*.lua linguist-generated
diff --git a/package.json b/package.json
index 53681d2..257aeba 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
{
- "name": "@gamely/gly-ide",
+ "name": "@gamely/tool-img-gen",
"license": "MIT",
- "homepage": "https://ide.gamely.com.br",
- "repository": "https://github.com/gamelly/gly-ide",
+ "homepage": "https://gamelly.github.io/tool-img-gen",
+ "repository": "https://github.com/gamelly/tool-img-gen",
"funding": "https://github.com/sponsors/RodrigoDornelles",
- "bugs": "https://github.com/gamelly/gly-ide/issues",
+ "bugs": "https://github.com/gamelly/tool-img-gen/issues",
"devDependencies": {
- "@gamely/core-native-html5": "^0.0.16",
- "@gamely/gly-engine-lite": "^0.0.16",
+ "@gamely/core-native-html5": "^0.0.17",
+ "@gamely/gly-engine-lite": "^0.0.17",
"copy-webpack-plugin": "11.0.0",
"css-loader": "6.7.3",
"html-webpack-plugin": "5.5.0",
diff --git a/src/index.html b/src/index.html
index 33ff0a0..fc491c5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -71,6 +71,7 @@
tool-img-gen
+
diff --git a/src/index.js b/src/index.js
index d27f537..b3c27fa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,7 @@ let monacoTimeout;
document.addEventListener('DOMContentLoaded', async () => {
const elInpWidth = document.querySelector('#width')
const elInpHeight = document.querySelector('#height')
+ const elInpStroke = document.querySelector('#stroke')
const elSelFormat = document.querySelector('#resolution')
const elBtnDownload = document.querySelector('#download')
const elChkAntiAliasing = document.querySelector('#antialiasing')
@@ -26,7 +27,24 @@ document.addEventListener('DOMContentLoaded', async () => {
});
monacoEditor.setValue(defaultScript)
-
+ if (location.hash) {
+ const params = new URLSearchParams(window.location.hash.slice(1))
+ const code = atob(params.get('code').replace(/_/g, '='))
+ const res = params.get('res').split('x')
+ if (code && code.length > 0) {
+ monacoEditor.setValue(code)
+ }
+ if (res && res.length == 2) {
+ [elInpWidth.value, elInpHeight.value] = res
+ }
+ if (params.has('line')) {
+ elInpStroke.value = parseFloat(params.get('line'))
+ }
+ if (params.has('aa')) {
+ elChkAntiAliasing.checked = parseInt(params.get('aa')) == 1
+ }
+ }
+
const factory = new LuaFactory(wasmFile)
const lua = await factory.createEngine()
await lua.doString(gly_engine)
@@ -63,13 +81,20 @@ document.addEventListener('DOMContentLoaded', async () => {
gly.init(elCanvas)
const apply = () => {
+ const params = new URLSearchParams()
const code = monacoEditor.getValue()
gly.load(`return {init=function()end,loop=function()end,draw=function(std)\n${code}\nend}`)
window.requestAnimationFrame(gly.update)
+ params.set('res', `${elInpWidth.value}x${elInpHeight.value}`)
+ params.set('code', btoa(code).replace(/=/g, '_'))
+ params.set('line', elInpStroke.value)
+ params.set('aa', elChkAntiAliasing.checked? 1: 0)
+ location.hash = params.toString()
}
const resizeAndApply = () => {
gly.resize(elInpWidth.value, elInpHeight.value)
+ gly.stroke(parseFloat(elInpStroke.value))
apply()
}
@@ -98,14 +123,16 @@ document.addEventListener('DOMContentLoaded', async () => {
const ext = elSelFormat.value
const url = elCanvas.toDataURL(`image/${ext}`)
const downloadLink = document.createElement('a')
+ const uptime = (new Date()).toISOString().slice(2, 16).replace(/[-T:]/g, '').replace(/^(\d{6})(\d{4})$/, '$1-$2')
downloadLink.href = url
downloadLink.target = '_blank'
- downloadLink.download = `icon.${ext}`
+ downloadLink.download = `img-${uptime}-${elInpWidth.value}x${elInpHeight.value}.${ext}`
downloadLink.click()
URL.revokeObjectURL(url)
})
elChkAntiAliasing.addEventListener('change', toggleAntiAliasing);
+ elInpStroke.addEventListener('change', resizeAndApply);
elInpWidth.addEventListener('change', resizeAndApply);
elInpHeight.addEventListener('change', resizeAndApply);