feat: revision 0.0.16 (#8)

* bump 0.0.16
* fix: pixelated canvas
* feat: use put instead print in example
* feat: somes improves
* feat: toggle antialiasing

Author: RodrigoDornelles

package.json

@@ -6,8 +6,8 @@
   "funding": "https://github.com/sponsors/RodrigoDornelles",
   "bugs": "https://github.com/gamelly/gly-ide/issues",
   "devDependencies": {
-    "@gamely/core-native-html5": "^0.0.15",
-    "@gamely/gly-engine-lite": "^0.0.15",
+    "@gamely/core-native-html5": "^0.0.16",
+    "@gamely/gly-engine-lite": "^0.0.16",
     "copy-webpack-plugin": "11.0.0",
     "css-loader": "6.7.3",
     "html-webpack-plugin": "5.5.0",

src/assets/index.css

@@ -266,7 +266,6 @@ select option {
     }
 
     #gameCanvas {
-        height: 100%;
         width: 100%;
     }
 }

src/default.lua

@@ -1,4 +1,3 @@
 std.draw.clear(std.color.blue)
 std.draw.color(std.color.white)
-std.text.font_size(std.app.width/8)
-std.text.print(8 , 8, 'Hello world!')
+std.text.put(1, 1, 'Hello world!', 10)

src/index.html

@@ -30,10 +30,10 @@ <h1>tool-img-gen</h1>
             <div id="buttons">
                 <form>
                     <select id="resolution" name="resolution">
-                        <option value="48x48">32x32</option>
+                        <option value="32x32">32x32</option>
                         <option value="48x48">48x48</option>
                         <option value="80x80">80x80</option>
-                        <option value="128x128">128x48</option>
+                        <option value="128x48">128x48</option>
                         <option value="128x128">128x128</option>
                         <option value="256x256">256x256</option>
                         <option value="512x512" selected>512x512</option>
@@ -71,6 +71,7 @@ <h1>tool-img-gen</h1>
                             </g>
                         </svg></label>
                     <input type="number" id="height" name="height" value="512" required>
+                    <input type="checkbox" id="antialiasing" name="antialiasing" checked>
                     <button id="download">download</button>
                 </form>
             </div>

src/index.js

@@ -12,6 +12,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const elInpHeight = document.querySelector('#height')
     const elSelFormat = document.querySelector('#resolution')
     const elBtnDownload = document.querySelector('#download')
+    const elChkAntiAliasing = document.querySelector('#antialiasing')
     const elSelResolution = document.querySelector('#resolution')
     const elMonacoEditor = document.querySelector('#editor')
     const elCanvas = document.querySelector('#gameCanvas')
@@ -64,10 +65,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     const apply = () => {
         const code = monacoEditor.getValue()
         gly.load(`return {init=function()end,loop=function()end,draw=function(std)\n${code}\nend}`)
-        gly.resize(elInpWidth.value, elInpHeight.value)
         window.requestAnimationFrame(gly.update)
     }
 
+    const resizeAndApply = () => {
+        gly.resize(elInpWidth.value, elInpHeight.value)
+        apply()
+    }
+
+    const toggleAntiAliasing = () => {
+        elCanvas.style.imageRendering = elChkAntiAliasing.checked ? '': 'pixelated'
+    }
+
     monacoEditor.onDidChangeModelContent(() => {
         clearTimeout(monacoTimeout);
         monacoTimeout = setTimeout(() => {
@@ -79,7 +88,9 @@ document.addEventListener('DOMContentLoaded', async () => {
         const [width, height] = elSelResolution.value.split('x').map(Number);
         elInpWidth.value = width;
         elInpHeight.value = height;
-        apply();
+        elChkAntiAliasing.checked = width > 128;
+        toggleAntiAliasing();
+        resizeAndApply();
     })
 
     elBtnDownload.addEventListener('click', (ev) => {
@@ -94,8 +105,10 @@ document.addEventListener('DOMContentLoaded', async () => {
         URL.revokeObjectURL(url)
     })
 
-    elInpWidth.addEventListener('change', apply);
-    elInpHeight.addEventListener('change', apply);
+    elChkAntiAliasing.addEventListener('change', toggleAntiAliasing);
+    elInpWidth.addEventListener('change', resizeAndApply);
+    elInpHeight.addEventListener('change', resizeAndApply);
 
-    apply();
+    toggleAntiAliasing()
+    resizeAndApply();
 })