feat: revision 0.0.17 (#10)

* feat: bump 0.0.17

* feat: new file name for download

* feat: line stroke config

* feat: save code in url hash

* docs: create dotgitattributes

* docs: rename package.json

.gitattributes

@@ -0,0 +1,3 @@
+*.html linguist-generated
+*.css linguist-generated
+*.lua linguist-generated

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",

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);