@litecanvas/utils 0.3.1 → 0.4.0

package/README.md

@@ -6,6 +6,7 @@ Small collection of tools for developing games with [Litecanvas](https://github.
 
 - **Camera**: Move-, zoom- and rotatable camera with shake. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/camera)
 - **Vector**: Modular 2D vector. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/vector)
+- **Grid** class. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/grid)
 - **Collision** utilities. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/collision)
 - And [some math utilities](https://github.com/litecanvas/utils/tree/main/src/math)
 

package/dist/all.js

@@ -10,6 +10,7 @@
   __export(src_exports, {
     Camera: () => Camera,
     DOWN: () => DOWN,
+    Grid: () => Grid,
     LEFT: () => LEFT,
     ONE: () => ONE,
     RIGHT: () => RIGHT,
@@ -126,6 +127,26 @@
       engine = engine || globalThis;
       this._engine = engine;
       this.size(engine.WIDTH || 0, engine.HEIGHT || 0);
+      this.x = this.width / 2;
+      this.y = this.height / 2;
+    }
+    size(width, height) {
+      this.width = width;
+      this.height = height;
+    }
+    start(clip = false) {
+      const centerX = this.width / 2, centerY = this.height / 2;
+      this._engine.push();
+      this._engine.translate(centerX, centerY);
+      this._engine.scale(this.scale);
+      this._engine.rotate(this.rotation);
+      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
+      if (clip) {
+        this._engine.cliprect(this.x, this.y, this.width, this.height);
+      }
+    }
+    end() {
+      this._engine.pop();
     }
     /**
      * @param {number} x
@@ -176,23 +197,205 @@
     shaking() {
       return this._shake.removeListener !== null;
     }
-    size(width, height) {
+  };
+
+  // src/grid/index.js
+  var Grid = class _Grid {
+    /** @type {number} The grid width */
+    _w;
+    /** @type {number} The grid height */
+    _h;
+    /** @type {any[]} The grid cells */
+    _c;
+    /**
+     * @static
+     * @param {number} width
+     * @param {number} height
+     * @param {any[]} values
+     */
+    static fromArray(width, height, values) {
+      const grid = new _Grid(width, height);
+      for (let i = 0; i < values.length; i++) {
+        grid._c[i] = values[i];
+      }
+      return grid;
+    }
+    /**
+     * @param {number} width The grid width
+     * @param {number} height The grid height
+     */
+    constructor(width, height) {
       this.width = width;
       this.height = height;
+      this.clear();
     }
-    start(clip = false) {
-      this._engine.push();
-      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
-      this._engine.scale(this.scale);
-      this._engine.rotate(this.rotation);
-      if (clip) {
-        this._engine.cliprect(this.x, this.y, this.width, this.height);
+    /**
+     * Delete all cell values.
+     */
+    clear() {
+      this._c = Array(this._w * this._h);
+    }
+    /**
+     * @param {number} value
+     */
+    set width(value) {
+      this._w = Math.max(1, ~~value);
+    }
+    get width() {
+      return this._w;
+    }
+    /**
+     * @param {number} value
+     */
+    set height(value) {
+      this._h = Math.max(1, ~~value);
+    }
+    get height() {
+      return this._h;
+    }
+    /**
+     * The the value of a grid's cell.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {any} value
+     */
+    set(x, y, value) {
+      this._c[this.pointToIndex(x, y)] = value;
+    }
+    /**
+     * Returns the value of a grid's cell.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {any}
+     */
+    get(x, y) {
+      return this._c[this.pointToIndex(x, y)];
+    }
+    /**
+     * Returns true if the which cell has any value not equal to `null` or `undefined`.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {boolean}
+     */
+    has(x, y) {
+      return this.get(x, y) != null;
+    }
+    /**
+     * Returns the total of cells.
+     *
+     * @returns {number}
+     */
+    get length() {
+      return this._w * this._h;
+    }
+    /**
+     * Convert a grid point (X, Y) to a index.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {number} The index
+     */
+    pointToIndex(x, y) {
+      return this.clampX(~~x) + this.clampY(~~y) * this._w;
+    }
+    /**
+     * Convert index to a grid point X.
+     *
+     * @param {number} index
+     * @returns {number}
+     */
+    indexToPointX(index) {
+      return index % this._w;
+    }
+    /**
+     * Convert index to a grid point Y.
+     *
+     * @param {number} index
+     * @returns {number}
+     */
+    indexToPointY(index) {
+      return Math.floor(index / this._w);
+    }
+    /**
+     * Loops over all grid cells.
+     *
+     * @callback GridForEachCallback
+     * @param {number} x
+     * @param {number} y
+     * @param {any} value
+     * @param {Grid} grid
+     * @returns {boolean?} returns `false` to stop/break the loop
+     *
+     * @param {GridForEachCallback} handler
+     * @param {boolean} [reverse=false]
+     */
+    forEach(handler, reverse = false) {
+      let i = reverse ? this.length - 1 : 0, limit = reverse ? -1 : this.length, step = reverse ? -1 : 1;
+      while (i !== limit) {
+        const x = this.indexToPointX(i), y = this.indexToPointY(i), cellValue = this._c[i];
+        if (false === handler(x, y, cellValue, this)) break;
+        i += step;
       }
     }
-    end() {
-      this._engine.pop();
+    /**
+     * @param {*} value
+     */
+    fill(value) {
+      this.forEach((x, y) => {
+        this.set(x, y, value);
+      });
+    }
+    /**
+     * @returns {Grid} the cloned grid
+     */
+    clone() {
+      return _Grid.fromArray(this._w, this._h, this._c);
+    }
+    /**
+     * @param {number} y
+     * @returns {number}
+     */
+    clampX(x) {
+      return _clamp(x, 0, this._w - 1);
+    }
+    /**
+     * @param {number} y
+     * @returns {number}
+     */
+    clampY(y) {
+      return _clamp(y, 0, this._h - 1);
+    }
+    /**
+     * Returns the cell values in a single array.
+     *
+     * @returns {any[]}
+     */
+    toArray() {
+      return this._c.slice(0);
+    }
+    /**
+     * @param {string} separator
+     * @param {boolean} format
+     * @returns {string}
+     */
+    toString(separator = " ", format = true) {
+      if (!format) return this._c.join(separator);
+      const rows = [];
+      this.forEach((x, y, value) => {
+        rows[y] = rows[y] || "";
+        rows[y] += value + separator;
+      });
+      return rows.join("\n");
     }
   };
+  function _clamp(value, min, max) {
+    if (value < min) return min;
+    if (value > max) return max;
+    return value;
+  }
 
   // src/vector/index.js
   var Vector = class {
@@ -220,7 +423,7 @@
     if (isvector(x)) {
       return veceq(v, x.x, x.y);
     }
-    return v.x === x && v.y === (y || x);
+    return v.x === x && v.y === y;
   };
   var veccopy = (v) => vec(v.x, v.y);
   var vecset = (v, x, y = x) => {

package/dist/all.min.js

@@ -1 +1,2 @@
-(()=>{var N=Object.defineProperty;var P=(e,t)=>{for(var s in t)N(e,s,{get:t[s],enumerable:!0})};var T={};P(T,{Camera:()=>a,DOWN:()=>K,LEFT:()=>Q,ONE:()=>B,RIGHT:()=>J,UP:()=>C,Vector:()=>l,ZERO:()=>j,diff:()=>q,fract:()=>v,intersection:()=>y,isvector:()=>h,resolve:()=>z,vec:()=>r,vecadd:()=>I,vecconfig:()=>k,veccopy:()=>R,veccross:()=>X,vecdir:()=>S,vecdist:()=>A,vecdist2:()=>F,vecdiv:()=>d,vecdot:()=>U,veceq:()=>E,veclerp:()=>Y,veclimit:()=>b,vecmag:()=>D,vecmag2:()=>G,vecmult:()=>M,vecnorm:()=>$,vecrand:()=>Z,vecrot:()=>W,vecset:()=>H,vecsub:()=>O,wave:()=>w});var q=(e,t)=>Math.abs(t-e)||0;var v=e=>e%1||0;var w=(e,t,s,o=Math.sin)=>e+(o(s)+1)/2*(t-e);var y=(e,t,s,o,i,n,x,p)=>{let u=Math.max(e,i),L=Math.min(e+s,i+x)-u,f=Math.max(t,n),m=Math.min(t+o,n+p)-f;return[u,f,L,m]};var z=(e,t,s,o,i,n,x,p)=>{let[u,L,f,m]=y(e,t,s,o,i,n,x,p),c="",g=e,_=t;return f<m?e<i?(c="right",g=i-s):(c="left",g=i+x):t<n?(c="bottom",_=n-o):(c="top",_=n+p),{direction:c,x:g,y:_}};var a=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null){t=t||globalThis,this._engine=t,this.size(t.WIDTH||0,t.HEIGHT||0)}lookAt(t,s){this.x=t,this.y=s}move(t,s){this.x+=t,this.y+=s}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}shake(t=.3,s=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",o=>{this._shake.x=this._engine.randi(-s,s),this._shake.y=this._engine.randi(-s,s),t-=o,t<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}size(t,s){this.width=t,this.height=s}start(t=!1){this._engine.push(),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),this._engine.scale(this.scale),this._engine.rotate(this.rotation),t&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}};var l=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},r=(e=0,t=e)=>new l(e,t),E=(e,t,s=t)=>h(t)?E(e,t.x,t.y):e.x===t&&e.y===(s||t),R=e=>r(e.x,e.y),H=(e,t,s=t)=>{h(t)?H(e,t.x,t.y):(e.x=t,e.y=s)},I=(e,t,s=t)=>{h(t)?I(e,t.x,t.y):(e.x+=t,e.y+=s)},O=(e,t,s=t)=>{h(t)?O(e,t.x,t.y):(e.x-=t,e.y-=s)},M=(e,t,s=t)=>{h(t)?M(e,t.x,t.y):(e.x*=t,e.y*=s)},d=(e,t,s=t)=>{h(t)?d(e,t.x,t.y):(e.x/=t,e.y/=s)},W=(e,t)=>{let s=Math.cos(t),o=Math.sin(t);e.x=s*e.x-o*e.y,e.y=o*e.x+s*e.y},D=e=>Math.sqrt(e.x*e.x+e.y*e.y),G=e=>e.x*e.x+e.y*e.y,$=e=>{let t=D(e);t>0&&d(e,t)},b=(e,t)=>{let s=G(e);s>t*t&&(d(e,Math.sqrt(s)),M(e,t))},A=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return Math.sqrt(s*s+o*o)},F=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return s*s+o*o},S=e=>Math.atan2(e.y,e.x),U=(e,t)=>e.x*t.x+e.y*t.y,X=(e,t)=>e.x*t.y-e.y*t.x,Y=(e,t,s)=>{e.x+=(t.x-e.x)*s||0,e.y+=(t.y-e.y)*s||0},Z=(e=1,t=e)=>{let s=k.random()*2*Math.PI,o=k.random()*(t-e)+e;return r(Math.cos(s)*o,Math.sin(s)*o)},h=e=>e instanceof l,k={random:()=>globalThis.rand?rand():Math.random()},j=r(0,0),B=r(1,1),C=r(0,-1),J=r(1,0),K=r(0,1),Q=r(-1,0);globalThis.utils=T;})();
+(()=>{var j=Object.defineProperty;var D=(e,t)=>{for(var s in t)j(e,s,{get:t[s],enumerable:!0})};var T={};D(T,{Camera:()=>f,DOWN:()=>Q,Grid:()=>p,LEFT:()=>tt,ONE:()=>C,RIGHT:()=>K,UP:()=>J,Vector:()=>u,ZERO:()=>B,diff:()=>I,fract:()=>L,intersection:()=>_,isvector:()=>c,resolve:()=>X,vec:()=>h,vecadd:()=>z,vecconfig:()=>k,veccopy:()=>G,veccross:()=>V,vecdir:()=>F,vecdist:()=>W,vecdist2:()=>$,vecdiv:()=>y,vecdot:()=>U,veceq:()=>q,veclerp:()=>Z,veclimit:()=>S,vecmag:()=>O,vecmag2:()=>b,vecmult:()=>M,vecnorm:()=>R,vecrand:()=>v,vecrot:()=>N,vecset:()=>A,vecsub:()=>H,wave:()=>P});var I=(e,t)=>Math.abs(t-e)||0;var L=e=>e%1||0;var P=(e,t,s,i=Math.sin)=>e+(i(s)+1)/2*(t-e);var _=(e,t,s,i,r,o,n,a)=>{let l=Math.max(e,r),E=Math.min(e+s,r+n)-l,d=Math.max(t,o),g=Math.min(t+i,o+a)-d;return[l,d,E,g]};var X=(e,t,s,i,r,o,n,a)=>{let[l,E,d,g]=_(e,t,s,i,r,o,n,a),x="",m=e,w=t;return d<g?e<r?(x="right",m=r-s):(x="left",m=r+n):t<o?(x="bottom",w=o-i):(x="top",w=o+a),{direction:x,x:m,y:w}};var f=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null){t=t||globalThis,this._engine=t,this.size(t.WIDTH||0,t.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}size(t,s){this.width=t,this.height=s}start(t=!1){let s=this.width/2,i=this.height/2;this._engine.push(),this._engine.translate(s,i),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),t&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}lookAt(t,s){this.x=t,this.y=s}move(t,s){this.x+=t,this.y+=s}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}shake(t=.3,s=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",i=>{this._shake.x=this._engine.randi(-s,s),this._shake.y=this._engine.randi(-s,s),t-=i,t<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}};var p=class e{_w;_h;_c;static fromArray(t,s,i){let r=new e(t,s);for(let o=0;o<i.length;o++)r._c[o]=i[o];return r}constructor(t,s){this.width=t,this.height=s,this.clear()}clear(){this._c=Array(this._w*this._h)}set width(t){this._w=Math.max(1,~~t)}get width(){return this._w}set height(t){this._h=Math.max(1,~~t)}get height(){return this._h}set(t,s,i){this._c[this.pointToIndex(t,s)]=i}get(t,s){return this._c[this.pointToIndex(t,s)]}has(t,s){return this.get(t,s)!=null}get length(){return this._w*this._h}pointToIndex(t,s){return this.clampX(~~t)+this.clampY(~~s)*this._w}indexToPointX(t){return t%this._w}indexToPointY(t){return Math.floor(t/this._w)}forEach(t,s=!1){let i=s?this.length-1:0,r=s?-1:this.length,o=s?-1:1;for(;i!==r;){let n=this.indexToPointX(i),a=this.indexToPointY(i),l=this._c[i];if(t(n,a,l,this)===!1)break;i+=o}}fill(t){this.forEach((s,i)=>{this.set(s,i,t)})}clone(){return e.fromArray(this._w,this._h,this._c)}clampX(t){return Y(t,0,this._w-1)}clampY(t){return Y(t,0,this._h-1)}toArray(){return this._c.slice(0)}toString(t=" ",s=!0){if(!s)return this._c.join(t);let i=[];return this.forEach((r,o,n)=>{i[o]=i[o]||"",i[o]+=n+t}),i.join(`
+`)}};function Y(e,t,s){return e<t?t:e>s?s:e}var u=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},h=(e=0,t=e)=>new u(e,t),q=(e,t,s=t)=>c(t)?q(e,t.x,t.y):e.x===t&&e.y===s,G=e=>h(e.x,e.y),A=(e,t,s=t)=>{c(t)?A(e,t.x,t.y):(e.x=t,e.y=s)},z=(e,t,s=t)=>{c(t)?z(e,t.x,t.y):(e.x+=t,e.y+=s)},H=(e,t,s=t)=>{c(t)?H(e,t.x,t.y):(e.x-=t,e.y-=s)},M=(e,t,s=t)=>{c(t)?M(e,t.x,t.y):(e.x*=t,e.y*=s)},y=(e,t,s=t)=>{c(t)?y(e,t.x,t.y):(e.x/=t,e.y/=s)},N=(e,t)=>{let s=Math.cos(t),i=Math.sin(t);e.x=s*e.x-i*e.y,e.y=i*e.x+s*e.y},O=e=>Math.sqrt(e.x*e.x+e.y*e.y),b=e=>e.x*e.x+e.y*e.y,R=e=>{let t=O(e);t>0&&y(e,t)},S=(e,t)=>{let s=b(e);s>t*t&&(y(e,Math.sqrt(s)),M(e,t))},W=(e,t)=>{let s=e.x-t.x,i=e.y-t.y;return Math.sqrt(s*s+i*i)},$=(e,t)=>{let s=e.x-t.x,i=e.y-t.y;return s*s+i*i},F=e=>Math.atan2(e.y,e.x),U=(e,t)=>e.x*t.x+e.y*t.y,V=(e,t)=>e.x*t.y-e.y*t.x,Z=(e,t,s)=>{e.x+=(t.x-e.x)*s||0,e.y+=(t.y-e.y)*s||0},v=(e=1,t=e)=>{let s=k.random()*2*Math.PI,i=k.random()*(t-e)+e;return h(Math.cos(s)*i,Math.sin(s)*i)},c=e=>e instanceof u,k={random:()=>globalThis.rand?rand():Math.random()},B=h(0,0),C=h(1,1),J=h(0,-1),K=h(1,0),Q=h(0,1),tt=h(-1,0);globalThis.utils=T;})();

package/dist/camera.js

@@ -27,6 +27,26 @@
       engine = engine || globalThis;
       this._engine = engine;
       this.size(engine.WIDTH || 0, engine.HEIGHT || 0);
+      this.x = this.width / 2;
+      this.y = this.height / 2;
+    }
+    size(width, height) {
+      this.width = width;
+      this.height = height;
+    }
+    start(clip = false) {
+      const centerX = this.width / 2, centerY = this.height / 2;
+      this._engine.push();
+      this._engine.translate(centerX, centerY);
+      this._engine.scale(this.scale);
+      this._engine.rotate(this.rotation);
+      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
+      if (clip) {
+        this._engine.cliprect(this.x, this.y, this.width, this.height);
+      }
+    }
+    end() {
+      this._engine.pop();
     }
     /**
      * @param {number} x
@@ -77,22 +97,6 @@
     shaking() {
       return this._shake.removeListener !== null;
     }
-    size(width, height) {
-      this.width = width;
-      this.height = height;
-    }
-    start(clip = false) {
-      this._engine.push();
-      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
-      this._engine.scale(this.scale);
-      this._engine.rotate(this.rotation);
-      if (clip) {
-        this._engine.cliprect(this.x, this.y, this.width, this.height);
-      }
-    }
-    end() {
-      this._engine.pop();
-    }
   };
 
   // src/camera/_web.js

package/dist/camera.min.js

@@ -1 +1 @@
-(()=>{var i=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(s=null){s=s||globalThis,this._engine=s,this.size(s.WIDTH||0,s.HEIGHT||0)}lookAt(s,t){this.x=s,this.y=t}move(s,t){this.x+=s,this.y+=t}zoom(s){this.scale*=s}zoomTo(s){this.scale=s}rotate(s){this.rotation+=s}rotateTo(s){this.rotation=s}shake(s=.3,t=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",h=>{this._shake.x=this._engine.randi(-t,t),this._shake.y=this._engine.randi(-t,t),s-=h,s<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}size(s,t){this.width=s,this.height=t}start(s=!1){this._engine.push(),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),this._engine.scale(this.scale),this._engine.rotate(this.rotation),s&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}};globalThis.utils=Object.assign(globalThis.utils||{},{Camera:i});})();
+(()=>{var i=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null){t=t||globalThis,this._engine=t,this.size(t.WIDTH||0,t.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}size(t,s){this.width=t,this.height=s}start(t=!1){let s=this.width/2,h=this.height/2;this._engine.push(),this._engine.translate(s,h),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),t&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}lookAt(t,s){this.x=t,this.y=s}move(t,s){this.x+=t,this.y+=s}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}shake(t=.3,s=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",h=>{this._shake.x=this._engine.randi(-s,s),this._shake.y=this._engine.randi(-s,s),t-=h,t<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}};globalThis.utils=Object.assign(globalThis.utils||{},{Camera:i});})();

package/dist/grid.js

@@ -0,0 +1,202 @@
+(() => {
+  // src/grid/index.js
+  var Grid = class _Grid {
+    /** @type {number} The grid width */
+    _w;
+    /** @type {number} The grid height */
+    _h;
+    /** @type {any[]} The grid cells */
+    _c;
+    /**
+     * @static
+     * @param {number} width
+     * @param {number} height
+     * @param {any[]} values
+     */
+    static fromArray(width, height, values) {
+      const grid = new _Grid(width, height);
+      for (let i = 0; i < values.length; i++) {
+        grid._c[i] = values[i];
+      }
+      return grid;
+    }
+    /**
+     * @param {number} width The grid width
+     * @param {number} height The grid height
+     */
+    constructor(width, height) {
+      this.width = width;
+      this.height = height;
+      this.clear();
+    }
+    /**
+     * Delete all cell values.
+     */
+    clear() {
+      this._c = Array(this._w * this._h);
+    }
+    /**
+     * @param {number} value
+     */
+    set width(value) {
+      this._w = Math.max(1, ~~value);
+    }
+    get width() {
+      return this._w;
+    }
+    /**
+     * @param {number} value
+     */
+    set height(value) {
+      this._h = Math.max(1, ~~value);
+    }
+    get height() {
+      return this._h;
+    }
+    /**
+     * The the value of a grid's cell.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {any} value
+     */
+    set(x, y, value) {
+      this._c[this.pointToIndex(x, y)] = value;
+    }
+    /**
+     * Returns the value of a grid's cell.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {any}
+     */
+    get(x, y) {
+      return this._c[this.pointToIndex(x, y)];
+    }
+    /**
+     * Returns true if the which cell has any value not equal to `null` or `undefined`.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {boolean}
+     */
+    has(x, y) {
+      return this.get(x, y) != null;
+    }
+    /**
+     * Returns the total of cells.
+     *
+     * @returns {number}
+     */
+    get length() {
+      return this._w * this._h;
+    }
+    /**
+     * Convert a grid point (X, Y) to a index.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {number} The index
+     */
+    pointToIndex(x, y) {
+      return this.clampX(~~x) + this.clampY(~~y) * this._w;
+    }
+    /**
+     * Convert index to a grid point X.
+     *
+     * @param {number} index
+     * @returns {number}
+     */
+    indexToPointX(index) {
+      return index % this._w;
+    }
+    /**
+     * Convert index to a grid point Y.
+     *
+     * @param {number} index
+     * @returns {number}
+     */
+    indexToPointY(index) {
+      return Math.floor(index / this._w);
+    }
+    /**
+     * Loops over all grid cells.
+     *
+     * @callback GridForEachCallback
+     * @param {number} x
+     * @param {number} y
+     * @param {any} value
+     * @param {Grid} grid
+     * @returns {boolean?} returns `false` to stop/break the loop
+     *
+     * @param {GridForEachCallback} handler
+     * @param {boolean} [reverse=false]
+     */
+    forEach(handler, reverse = false) {
+      let i = reverse ? this.length - 1 : 0, limit = reverse ? -1 : this.length, step = reverse ? -1 : 1;
+      while (i !== limit) {
+        const x = this.indexToPointX(i), y = this.indexToPointY(i), cellValue = this._c[i];
+        if (false === handler(x, y, cellValue, this)) break;
+        i += step;
+      }
+    }
+    /**
+     * @param {*} value
+     */
+    fill(value) {
+      this.forEach((x, y) => {
+        this.set(x, y, value);
+      });
+    }
+    /**
+     * @returns {Grid} the cloned grid
+     */
+    clone() {
+      return _Grid.fromArray(this._w, this._h, this._c);
+    }
+    /**
+     * @param {number} y
+     * @returns {number}
+     */
+    clampX(x) {
+      return _clamp(x, 0, this._w - 1);
+    }
+    /**
+     * @param {number} y
+     * @returns {number}
+     */
+    clampY(y) {
+      return _clamp(y, 0, this._h - 1);
+    }
+    /**
+     * Returns the cell values in a single array.
+     *
+     * @returns {any[]}
+     */
+    toArray() {
+      return this._c.slice(0);
+    }
+    /**
+     * @param {string} separator
+     * @param {boolean} format
+     * @returns {string}
+     */
+    toString(separator = " ", format = true) {
+      if (!format) return this._c.join(separator);
+      const rows = [];
+      this.forEach((x, y, value) => {
+        rows[y] = rows[y] || "";
+        rows[y] += value + separator;
+      });
+      return rows.join("\n");
+    }
+  };
+  function _clamp(value, min, max) {
+    if (value < min) return min;
+    if (value > max) return max;
+    return value;
+  }
+
+  // src/grid/_web.js
+  globalThis.utils = Object.assign(globalThis.utils || {}, { Grid });
+})();

package/dist/grid.min.js

@@ -0,0 +1,2 @@
+(()=>{var e=class s{_w;_h;_c;static fromArray(t,i,h){let n=new s(t,i);for(let r=0;r<h.length;r++)n._c[r]=h[r];return n}constructor(t,i){this.width=t,this.height=i,this.clear()}clear(){this._c=Array(this._w*this._h)}set width(t){this._w=Math.max(1,~~t)}get width(){return this._w}set height(t){this._h=Math.max(1,~~t)}get height(){return this._h}set(t,i,h){this._c[this.pointToIndex(t,i)]=h}get(t,i){return this._c[this.pointToIndex(t,i)]}has(t,i){return this.get(t,i)!=null}get length(){return this._w*this._h}pointToIndex(t,i){return this.clampX(~~t)+this.clampY(~~i)*this._w}indexToPointX(t){return t%this._w}indexToPointY(t){return Math.floor(t/this._w)}forEach(t,i=!1){let h=i?this.length-1:0,n=i?-1:this.length,r=i?-1:1;for(;h!==n;){let o=this.indexToPointX(h),c=this.indexToPointY(h),_=this._c[h];if(t(o,c,_,this)===!1)break;h+=r}}fill(t){this.forEach((i,h)=>{this.set(i,h,t)})}clone(){return s.fromArray(this._w,this._h,this._c)}clampX(t){return l(t,0,this._w-1)}clampY(t){return l(t,0,this._h-1)}toArray(){return this._c.slice(0)}toString(t=" ",i=!0){if(!i)return this._c.join(t);let h=[];return this.forEach((n,r,o)=>{h[r]=h[r]||"",h[r]+=o+t}),h.join(`
+`)}};function l(s,t,i){return s<t?t:s>i?i:s}globalThis.utils=Object.assign(globalThis.utils||{},{Grid:e});})();

package/dist/vector.js

@@ -63,7 +63,7 @@
     if (isvector(x)) {
       return veceq(v, x.x, x.y);
     }
-    return v.x === x && v.y === (y || x);
+    return v.x === x && v.y === y;
   };
   var veccopy = (v) => vec(v.x, v.y);
   var vecset = (v, x, y = x) => {

package/dist/vector.min.js

@@ -1 +1 @@
-(()=>{var M=Object.defineProperty;var g=(t,o)=>{for(var s in o)M(t,s,{get:o[s],enumerable:!0})};var i={};g(i,{DOWN:()=>G,LEFT:()=>H,ONE:()=>w,RIGHT:()=>F,UP:()=>D,Vector:()=>n,ZERO:()=>j,isvector:()=>r,vec:()=>c,vecadd:()=>l,vecconfig:()=>x,veccopy:()=>m,veccross:()=>R,vecdir:()=>N,vecdist:()=>E,vecdist2:()=>I,vecdiv:()=>y,vecdot:()=>P,veceq:()=>a,veclerp:()=>U,veclimit:()=>O,vecmag:()=>u,vecmag2:()=>f,vecmult:()=>p,vecnorm:()=>T,vecrand:()=>$,vecrot:()=>q,vecset:()=>d,vecsub:()=>h});var n=class{x;y;constructor(o=0,s=o){this.x=o,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},c=(t=0,o=t)=>new n(t,o),a=(t,o,s=o)=>r(o)?a(t,o.x,o.y):t.x===o&&t.y===(s||o),m=t=>c(t.x,t.y),d=(t,o,s=o)=>{r(o)?d(t,o.x,o.y):(t.x=o,t.y=s)},l=(t,o,s=o)=>{r(o)?l(t,o.x,o.y):(t.x+=o,t.y+=s)},h=(t,o,s=o)=>{r(o)?h(t,o.x,o.y):(t.x-=o,t.y-=s)},p=(t,o,s=o)=>{r(o)?p(t,o.x,o.y):(t.x*=o,t.y*=s)},y=(t,o,s=o)=>{r(o)?y(t,o.x,o.y):(t.x/=o,t.y/=s)},q=(t,o)=>{let s=Math.cos(o),e=Math.sin(o);t.x=s*t.x-e*t.y,t.y=e*t.x+s*t.y},u=t=>Math.sqrt(t.x*t.x+t.y*t.y),f=t=>t.x*t.x+t.y*t.y,T=t=>{let o=u(t);o>0&&y(t,o)},O=(t,o)=>{let s=f(t);s>o*o&&(y(t,Math.sqrt(s)),p(t,o))},E=(t,o)=>{let s=t.x-o.x,e=t.y-o.y;return Math.sqrt(s*s+e*e)},I=(t,o)=>{let s=t.x-o.x,e=t.y-o.y;return s*s+e*e},N=t=>Math.atan2(t.y,t.x),P=(t,o)=>t.x*o.x+t.y*o.y,R=(t,o)=>t.x*o.y-t.y*o.x,U=(t,o,s)=>{t.x+=(o.x-t.x)*s||0,t.y+=(o.y-t.y)*s||0},$=(t=1,o=t)=>{let s=x.random()*2*Math.PI,e=x.random()*(o-t)+t;return c(Math.cos(s)*e,Math.sin(s)*e)},r=t=>t instanceof n,x={random:()=>globalThis.rand?rand():Math.random()},j=c(0,0),w=c(1,1),D=c(0,-1),F=c(1,0),G=c(0,1),H=c(-1,0);globalThis.utils=Object.assign(globalThis.utils||{},i);})();
+(()=>{var M=Object.defineProperty;var g=(t,o)=>{for(var s in o)M(t,s,{get:o[s],enumerable:!0})};var i={};g(i,{DOWN:()=>G,LEFT:()=>H,ONE:()=>w,RIGHT:()=>F,UP:()=>D,Vector:()=>n,ZERO:()=>j,isvector:()=>r,vec:()=>c,vecadd:()=>l,vecconfig:()=>y,veccopy:()=>m,veccross:()=>R,vecdir:()=>N,vecdist:()=>E,vecdist2:()=>I,vecdiv:()=>x,vecdot:()=>P,veceq:()=>a,veclerp:()=>U,veclimit:()=>O,vecmag:()=>u,vecmag2:()=>f,vecmult:()=>p,vecnorm:()=>T,vecrand:()=>$,vecrot:()=>q,vecset:()=>d,vecsub:()=>h});var n=class{x;y;constructor(o=0,s=o){this.x=o,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},c=(t=0,o=t)=>new n(t,o),a=(t,o,s=o)=>r(o)?a(t,o.x,o.y):t.x===o&&t.y===s,m=t=>c(t.x,t.y),d=(t,o,s=o)=>{r(o)?d(t,o.x,o.y):(t.x=o,t.y=s)},l=(t,o,s=o)=>{r(o)?l(t,o.x,o.y):(t.x+=o,t.y+=s)},h=(t,o,s=o)=>{r(o)?h(t,o.x,o.y):(t.x-=o,t.y-=s)},p=(t,o,s=o)=>{r(o)?p(t,o.x,o.y):(t.x*=o,t.y*=s)},x=(t,o,s=o)=>{r(o)?x(t,o.x,o.y):(t.x/=o,t.y/=s)},q=(t,o)=>{let s=Math.cos(o),e=Math.sin(o);t.x=s*t.x-e*t.y,t.y=e*t.x+s*t.y},u=t=>Math.sqrt(t.x*t.x+t.y*t.y),f=t=>t.x*t.x+t.y*t.y,T=t=>{let o=u(t);o>0&&x(t,o)},O=(t,o)=>{let s=f(t);s>o*o&&(x(t,Math.sqrt(s)),p(t,o))},E=(t,o)=>{let s=t.x-o.x,e=t.y-o.y;return Math.sqrt(s*s+e*e)},I=(t,o)=>{let s=t.x-o.x,e=t.y-o.y;return s*s+e*e},N=t=>Math.atan2(t.y,t.x),P=(t,o)=>t.x*o.x+t.y*o.y,R=(t,o)=>t.x*o.y-t.y*o.x,U=(t,o,s)=>{t.x+=(o.x-t.x)*s||0,t.y+=(o.y-t.y)*s||0},$=(t=1,o=t)=>{let s=y.random()*2*Math.PI,e=y.random()*(o-t)+t;return c(Math.cos(s)*e,Math.sin(s)*e)},r=t=>t instanceof n,y={random:()=>globalThis.rand?rand():Math.random()},j=c(0,0),w=c(1,1),D=c(0,-1),F=c(1,0),G=c(0,1),H=c(-1,0);globalThis.utils=Object.assign(globalThis.utils||{},i);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litecanvas/utils",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Utilities to help build litecanvas games",
   "author": "Luiz Bills <luizbills@pm.me>",
   "license": "MIT",

package/src/camera/index.js

@@ -29,6 +29,32 @@ export default class Camera {
     engine = engine || globalThis
     this._engine = engine
     this.size(engine.WIDTH || 0, engine.HEIGHT || 0)
+    this.x = this.width / 2
+    this.y = this.height / 2
+  }
+
+  size(width, height) {
+    this.width = width
+    this.height = height
+  }
+
+  start(clip = false) {
+    const centerX = this.width / 2,
+      centerY = this.height / 2
+
+    this._engine.push()
+    this._engine.translate(centerX, centerY)
+    this._engine.scale(this.scale)
+    this._engine.rotate(this.rotation)
+    this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y)
+
+    if (clip) {
+      this._engine.cliprect(this.x, this.y, this.width, this.height)
+    }
+  }
+
+  end() {
+    this._engine.pop()
   }
 
   /**
@@ -89,23 +115,4 @@ export default class Camera {
   shaking() {
     return this._shake.removeListener !== null
   }
-
-  size(width, height) {
-    this.width = width
-    this.height = height
-  }
-
-  start(clip = false) {
-    this._engine.push()
-    this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y)
-    this._engine.scale(this.scale)
-    this._engine.rotate(this.rotation)
-    if (clip) {
-      this._engine.cliprect(this.x, this.y, this.width, this.height)
-    }
-  }
-
-  end() {
-    this._engine.pop()
-  }
 }

package/src/collision/README.md

@@ -40,6 +40,8 @@ function draw() {
 
 Syntax: `resolve(x1, y1, w1, h1, x2, y2, w2, h2): { direction: string, x: number, y: number }`
 
+> Note: possible values for `direction` is `"top"`, `"botton"`, `"left"`, `"right"` or `""` (empty string, if no collision).
+
 ```js
 import litecanvas from "litecanvas"
 import { resolve } from "@litecanvas/utils"

package/src/grid/README.md

@@ -0,0 +1,45 @@
+# Grid
+
+**CDN**: https://unpkg.com/@litecanvas/utils/dist/grid.js
+
+## Usage
+
+Lets build an arena with [ASCII graphics](https://en.wikipedia.org/wiki/ASCII_art) like in classic roguelikes.
+
+```js
+// make a grid 13x13
+let grid = new utils.Grid(13, 13)
+
+// fill the entire grid with "."
+grid.fill(".")
+
+// put a '@' in the middle
+grid.set(grid.width / 2, grid.height / 2, "@")
+
+// put '#' around the grid
+grid.forEach((x, y, cellValue) => {
+  if (x === 0 || y === 0 || x === grid.width - 1 || y === grid.height - 1) {
+    grid.set(x, y, "#")
+  }
+})
+
+document.body.innerHTML = "<pre>" + grid.toString() + "</pre>"
+```
+
+The result:
+
+```
+# # # # # # # # # # # # #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# . . . . . @ . . . . . #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# . . . . . . . . . . . #
+# # # # # # # # # # # # #
+```

package/src/grid/_web.js

@@ -0,0 +1,3 @@
+import Grid from "./index.js"
+
+globalThis.utils = Object.assign(globalThis.utils || {}, { Grid })

package/src/grid/index.js

@@ -1,91 +1,239 @@
-class Grid {
+export default class Grid {
+  /** @type {number} The grid width */
+  _w
+
+  /** @type {number} The grid height */
+  _h
+
+  /** @type {any[]} The grid cells */
+  _c
+
+  /**
+   * @static
+   * @param {number} width
+   * @param {number} height
+   * @param {any[]} values
+   */
+  static fromArray(width, height, values) {
+    const grid = new Grid(width, height)
+    for (let i = 0; i < values.length; i++) {
+      grid._c[i] = values[i]
+    }
+    return grid
+  }
+
+  /**
+   * @param {number} width The grid width
+   * @param {number} height The grid height
+   */
   constructor(width, height) {
-    this._width = Math.abs(width)
-    this._height = Math.abs(height)
+    this.width = width
+    this.height = height
     this.clear()
   }
 
-  set(x, y, value) {
-    this.__cells[this.__getIndex(x, y)] = value
-    return this
+  /**
+   * Delete all cell values.
+   */
+  clear() {
+    this._c = Array(this._w * this._h)
   }
 
-  get(x, y) {
-    return this.__cells[this.__getIndex(x, y)] || null
+  /**
+   * @param {number} value
+   */
+  set width(value) {
+    this._w = Math.max(1, ~~value)
   }
 
-  has(x, y) {
-    return this.get(x, y) != null
+  get width() {
+    return this._w
   }
 
-  get width() {
-    return this._width
+  /**
+   * @param {number} value
+   */
+  set height(value) {
+    this._h = Math.max(1, ~~value)
   }
 
   get height() {
-    return this._height
+    return this._h
+  }
+
+  /**
+   * The the value of a grid's cell.
+   *
+   * @param {number} x
+   * @param {number} y
+   * @param {any} value
+   */
+  set(x, y, value) {
+    this._c[this.pointToIndex(x, y)] = value
+  }
+
+  /**
+   * Returns the value of a grid's cell.
+   *
+   * @param {number} x
+   * @param {number} y
+   * @returns {any}
+   */
+  get(x, y) {
+    return this._c[this.pointToIndex(x, y)]
   }
 
+  /**
+   * Returns true if the which cell has any value not equal to `null` or `undefined`.
+   *
+   * @param {number} x
+   * @param {number} y
+   * @returns {boolean}
+   */
+  has(x, y) {
+    return this.get(x, y) != null
+  }
+
+  /**
+   * Returns the total of cells.
+   *
+   * @returns {number}
+   */
   get length() {
-    return this._width * this._height
-  }
-
-  forEach(callback, reverse = false) {
-    const cells = this.__cells,
-      w = this._width,
-      h = this._height,
-      limitX = !reverse ? w : -1,
-      limitY = !reverse ? h : -1
-    let x = !reverse ? 0 : w - 1,
-      y = !reverse ? 0 : h - 1
-
-    while (y != limitY) {
-      let proceed
-      x = !reverse ? 0 : w - 1
-      while (x != limitX) {
-        proceed = callback(cells[this.__getIndex(x, y)], x, y, this)
-        if (false === proceed) break
-        x += reverse ? -1 : 1
-      }
-      if (false === proceed) break
-      y += reverse ? -1 : 1
+    return this._w * this._h
+  }
+
+  /**
+   * Convert a grid point (X, Y) to a index.
+   *
+   * @param {number} x
+   * @param {number} y
+   * @returns {number} The index
+   */
+  pointToIndex(x, y) {
+    return this.clampX(~~x) + this.clampY(~~y) * this._w
+  }
+
+  /**
+   * Convert index to a grid point X.
+   *
+   * @param {number} index
+   * @returns {number}
+   */
+  indexToPointX(index) {
+    return index % this._w
+  }
+
+  /**
+   * Convert index to a grid point Y.
+   *
+   * @param {number} index
+   * @returns {number}
+   */
+  indexToPointY(index) {
+    return Math.floor(index / this._w)
+  }
+
+  /**
+   * Loops over all grid cells.
+   *
+   * @callback GridForEachCallback
+   * @param {number} x
+   * @param {number} y
+   * @param {any} value
+   * @param {Grid} grid
+   * @returns {boolean?} returns `false` to stop/break the loop
+   *
+   * @param {GridForEachCallback} handler
+   * @param {boolean} [reverse=false]
+   */
+  forEach(handler, reverse = false) {
+    let i = reverse ? this.length - 1 : 0,
+      limit = reverse ? -1 : this.length,
+      step = reverse ? -1 : 1
+
+    while (i !== limit) {
+      const x = this.indexToPointX(i),
+        y = this.indexToPointY(i),
+        cellValue = this._c[i]
+
+      if (false === handler(x, y, cellValue, this)) break
+
+      i += step
     }
-    return this
   }
 
-  clone() {
-    return Grid.fromArray(this._width, this._height, this.__cells)
+  /**
+   * @param {*} value
+   */
+  fill(value) {
+    this.forEach((x, y) => {
+      this.set(x, y, value)
+    })
   }
 
-  clear() {
-    this.__cells = Array(this._width * this._height)
-    return this
+  /**
+   * @returns {Grid} the cloned grid
+   */
+  clone() {
+    return Grid.fromArray(this._w, this._h, this._c)
   }
 
-  clipX(x) {
-    return this.__clip(x, 0, this._width - 1)
+  /**
+   * @param {number} y
+   * @returns {number}
+   */
+  clampX(x) {
+    return _clamp(x, 0, this._w - 1)
   }
 
-  clipY(y) {
-    return this.__clip(y, 0, this._height - 1)
+  /**
+   * @param {number} y
+   * @returns {number}
+   */
+  clampY(y) {
+    return _clamp(y, 0, this._h - 1)
   }
 
+  /**
+   * Returns the cell values in a single array.
+   *
+   * @returns {any[]}
+   */
   toArray() {
-    return this.__cells.slice(0)
+    return this._c.slice(0)
   }
 
-  toString() {
-    return this.__cells.join(",")
-  }
+  /**
+   * @param {string} separator
+   * @param {boolean} format
+   * @returns {string}
+   */
+  toString(separator = " ", format = true) {
+    if (!format) return this._c.join(separator)
 
-  // internals
-  __getIndex(x, y) {
-    x = this.clipX(x)
-    y = this.clipY(y)
-    return x + y * this._width
-  }
+    const rows = []
+    this.forEach((x, y, value) => {
+      rows[y] = rows[y] || ""
+      rows[y] += value + separator
+    })
 
-  __clip(n, min, max) {
-    return Math.min(Math.max(n, min), max)
+    return rows.join("\n")
   }
 }
+
+/**
+ * Constrains a number between `min` and `max`.
+ *
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @returns {number}
+ */
+function _clamp(value, min, max) {
+  if (value < min) return min
+  if (value > max) return max
+  return value
+}
+
+function _fill(x, y) {}

package/src/index.js

@@ -4,4 +4,5 @@ export { default as wave } from "./math/wave.js"
 export { default as resolve } from "./collision/resolve.js"
 export { default as intersection } from "./collision/intersection.js"
 export { default as Camera } from "./camera/index.js"
+export { default as Grid } from "./grid/index.js"
 export * from "./vector/index.js"

package/src/vector/index.js

@@ -42,7 +42,7 @@ export const veceq = (v, x, y = x) => {
   if (isvector(x)) {
     return veceq(v, x.x, x.y)
   }
-  return v.x === x && v.y === (y || x)
+  return v.x === x && v.y === y
 }
 
 /**