From dbdc077a083da53d40866d03012f719f4ecf138a Mon Sep 17 00:00:00 2001
From: RodrigoDornelles <rodrigo@dornelles.me>
Date: Wed, 25 Dec 2024 20:27:34 -0300
Subject: [PATCH] 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 |  3 +++
 package.json   | 12 ++++++------
 src/index.html |  1 +
 src/index.js   | 31 +++++++++++++++++++++++++++++--
 4 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 .gitattributes

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 @@ <h1>tool-img-gen</h1>
                             </g>
                         </svg></label>
                     <input type="number" id="height" name="height" value="512" required>
+                    <input type="number" id="stroke" name="stroke" value="2.0" step="0.5" required>
                     <input type="checkbox" id="antialiasing" name="antialiasing" checked>
                     <button id="download">download</button>
                 </form>
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);