add palc() and remove "pixelart" and "animate" options

Author: luizbills

package.json

@@ -55,8 +55,8 @@
         "test:watch": "ava --watch",
         "dev": "esbuild src/web.js --bundle --watch --outfile=samples/dist.js --servedir=samples",
         "build": "npm run genversion && node script/build.js && size-limit",
-        "format": "prettier -w src/* samples/* types/* script/* types/*",
-        "check-types": "npx ts types/*",
+        "format": "prettier -w src/* samples/* types/* script/* tests/*",
+        "check-types": "npx tsc ./types/*",
         "genversion": "genversion --es6 src/version.js"
     },
     "files": [

samples/colors/colors.js

@@ -8,7 +8,6 @@ litecanvas({
     width: tile * cols,
     height: tile * rows,
     autoscale: false,
-    animate: false,
     canvas: 'canvas',
 })
 
@@ -25,10 +24,11 @@ function draw() {
 
             if (showLabel) {
                 const label = c
-                // text(i * tile + tile / 2, 2 + j * tile + tile / 2, label, fg)
+                text(i * tile + tile / 2, 2 + j * tile + tile / 2, label, fg)
             }
         }
     }
+    pause() // draw only once
 }
 
 function tapped() {

samples/custom-canvas/custom-canvas.js

@@ -1,6 +1,5 @@
 litecanvas({
     canvas: '#game-canvas',
-    animate: false,
 })
 
 function draw() {

samples/custom-palette/custom-palette.js

@@ -1,6 +1,5 @@
 litecanvas({
     width: 5,
-    animate: false,
 })
 
 function init() {
@@ -40,4 +39,5 @@ function draw() {
         .b7d.
         ..c..`
     )
+    pause() // draw only once
 }

samples/logo/logo.js

@@ -5,7 +5,6 @@ const url = new URL(location),
 litecanvas({
     width: size,
     autoscale: false,
-    animate: false,
 })
 
 let scale = floor(size / minsize)
@@ -43,6 +42,13 @@ logo = paint(
     }
 )
 
-// just draw once
-// function draw() is not necessary with `animate=false`
+// just draw once outside of the `draw()` function
 image(0, 0, logo)
+
+// we don't need the game loop here, so lets pause it.
+// but we can immediately pause it, because the game loop has not started yet
+// so we pause the game loop in the first "update" event
+listen('before:update', pause)
+
+// another alternative would be to leave the game with only 1 FPS
+// framerate(1)

samples/palette-dither-test/palette-dither-test.js

@@ -5,14 +5,14 @@ const size = 12
 const cols = 12
 
 litecanvas({
-    animate: false,
     width: size * cols,
     height: size * (cols - 1),
     autoscale: zoomed,
     canvas: 'canvas',
 })
 
 function init() {
+    framerate(1)
     combinations = []
     for (let y = 0; y < cols; y++) {
         for (let x = 0; x < cols; x++) {

samples/pixelart/pixelart.js

@@ -34,21 +34,22 @@ const palKulepu = [
     '#306645',
 ]
 
-let usingAltPal = false
+let swapColors = false
 
 function tapped() {
-    if (usingAltPal) {
-        pal()
-    } else {
-        pal(palKulepu)
-    }
-    usingAltPal = !usingAltPal
+    swapColors = !swapColors
 }
 
 function draw() {
-    cls(3)
+    cls(1)
     push()
     scale(2)
+    if (swapColors) {
+        palc(0, 3) // swap the black with white
+    }
     spr(0, 0, 8, 8, smile)
+    if (swapColors) {
+        palc(3, 0) // undo the swap
+    }
     pop()
 }

samples/text/text.js

@@ -1,7 +1,6 @@
 litecanvas({
     width: innerWidth,
     height: innerWidth * 0.75,
-    animate: false,
 })
 
 function init() {

src/index.js

@@ -23,6 +23,8 @@ export default function litecanvas(settings = {}) {
             elem.addEventListener(evt, callback, false)
             _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false))
         },
+        /** @type {(str: string) => string} */
+        lowerCase = (str) => str.toLowerCase(),
         /** @type {(ev: Event) => void} */
         preventDefault = (ev) => ev.preventDefault(),
         /** @type {(c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void} */
@@ -34,13 +36,11 @@ export default function litecanvas(settings = {}) {
             width: null,
             height: null,
             autoscale: true,
-            pixelart: true,
             canvas: null,
             global: true,
             loop: null,
             tapEvents: true,
             keyboardEvents: true,
-            animate: true,
         }
 
     // setup the settings default values
@@ -75,7 +75,9 @@ export default function litecanvas(settings = {}) {
         /** @type {number} */
         _rngSeed = Date.now(),
         /** @type {string[]} */
-        _colors = defaultPalette,
+        _currentPalette,
+        /** @type {string[]} */
+        _colors,
         /** @type {number[]} */
         _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
         /** @type {string} */
@@ -1040,7 +1042,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] listen() 2nd param must be a function'
             )
 
-            eventName = eventName.toLowerCase()
+            eventName = lowerCase(eventName)
 
             _eventListeners[eventName] = _eventListeners[eventName] || new Set()
             _eventListeners[eventName].add(callback)
@@ -1064,7 +1066,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] emit() 1st param must be a string'
             )
             if (_initialized) {
-                eventName = eventName.toLowerCase()
+                eventName = lowerCase(eventName)
 
                 triggerEvent('before:' + eventName, arg1, arg2, arg3, arg4)
                 triggerEvent(eventName, arg1, arg2, arg3, arg4)
@@ -1073,7 +1075,7 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Set or reset the color palette
+         * Set or reset the color palette.
          *
          * @param {string[]} [colors]
          */
@@ -1083,6 +1085,31 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] pal() 1st param must be a array of strings'
             )
             _colors = colors
+            _currentPalette = [...colors]
+        },
+
+        /**
+         * Swap two colors of the current palette.
+         *
+         * If called without arguments, reset the current palette.
+         *
+         * @param {number?} a
+         * @param {number?} b
+         */
+        palc(a, b) {
+            DEV: assert(
+                null == a || (isNumber(a) && a >= 0),
+                '[litecanvas] palc() 1st param must be a positive number'
+            )
+            DEV: assert(
+                isNumber(a) ? isNumber(b) && b >= 0 : null == b,
+                '[litecanvas] palc() 2nd param must be a positive number'
+            )
+            if (a == null) {
+                _colors = [..._currentPalette]
+            } else {
+                ;[_colors[a], _colors[b]] = [_colors[b], _colors[a]]
+            }
         },
 
         /**
@@ -1460,15 +1487,15 @@ export default function litecanvas(settings = {}) {
              * @returns {boolean}
              */
             const keyCheck = (keySet, key = '') => {
-                key = key.toLowerCase()
+                key = lowerCase(key)
                 return !key ? keySet.size > 0 : keySet.has('space' === key ? ' ' : key)
             }
 
             /** @type {string} */
             let _lastKey = ''
 
             on(root, 'keydown', (/** @type {KeyboardEvent} */ event) => {
-                const key = event.key.toLowerCase()
+                const key = lowerCase(event.key)
                 if (!_keysDown.has(key)) {
                     _keysDown.add(key)
                     _keysPress.add(key)
@@ -1477,7 +1504,7 @@ export default function litecanvas(settings = {}) {
             })
 
             on(root, 'keyup', (/** @type {KeyboardEvent} */ event) => {
-                _keysDown.delete(event.key.toLowerCase())
+                _keysDown.delete(lowerCase(event.key))
             })
 
             on(root, 'blur', () => _keysDown.clear())
@@ -1529,9 +1556,8 @@ export default function litecanvas(settings = {}) {
     }
 
     function drawFrame() {
-        if (!settings.animate) {
-            return instance.emit('draw', _ctx)
-        }
+        // request the next frame
+        _rafid = raf(drawFrame)
 
         let now = Date.now()
         let updated = 0
@@ -1561,9 +1587,6 @@ export default function litecanvas(settings = {}) {
                 )
             }
         }
-
-        // request the next frame
-        _rafid = raf(drawFrame)
     }
 
     function setupCanvas() {
@@ -1638,22 +1661,15 @@ export default function litecanvas(settings = {}) {
         }
 
         // set canvas image rendering properties
-        if (settings.pixelart) {
-            _ctx.imageSmoothingEnabled = false
-            _canvas.style.imageRendering = 'pixelated'
-        }
+        _ctx.imageSmoothingEnabled = false
+        _canvas.style.imageRendering = 'pixelated'
 
         // set the default text align and baseline
         instance.textalign('start', 'top')
 
         // trigger "resized" event
         // note: not triggered before the "init" event
         instance.emit('resized', _scale)
-
-        // force redraw when the canvas is not animated
-        if (!settings.animate) {
-            raf(drawFrame)
-        }
     }
 
     /**
@@ -1700,6 +1716,9 @@ export default function litecanvas(settings = {}) {
 
     setupCanvas()
 
+    // init the color palette
+    instance.pal()
+
     if ('loading' === document.readyState) {
         on(root, 'DOMContentLoaded', () => raf(init))
     } else {

tests/math.js

@@ -11,7 +11,6 @@ test.before(() => {
     sinon.stub(console) // silent console
 
     local = litecanvas({
-        animate: false,
         global: false,
     })
 })