@jamesrock/rockjs 1.7.0 → 1.9.0

package/index.js

@@ -178,3 +178,137 @@ export class Rounder {
 		return Math.round(value / this.tolerance) * this.tolerance;
 	};
 };
+
+export class DisplayObject {
+  appendTo(to) {
+
+		to.appendChild(this.node);
+		return this;
+
+	};
+	addEventListener(event, handler, passive = true) {
+		
+		this.node.addEventListener(event, handler, {passive});
+		return this;
+		
+	};
+	dispatchEvent(event) {
+		
+		this.node.dispatchEvent(new Event(event));
+		return this;
+
+	};
+};
+
+export class GameBase extends DisplayObject {
+  constructor(name) {
+
+    super();
+    
+    this.node = createNode('div', name);
+		this.gameOverNode = createNode('div', 'game-over');
+		this.canvas = createNode('canvas', 'game-canvas');
+		this.ctx = this.canvas.getContext('2d');
+		this.storage = new Storage(`me.jamesrock.${name}`);
+    
+  };
+  showGameOverScreen() {
+
+		const best = this.storage.get('best') || 0;
+		this.storage.set('best', this.score > best ? this.score : best);
+		
+		this.gameOverNode.innerHTML = `\
+			<div class="game-over-body">\
+				<h1>Game over!</h1>\
+				<div>\
+					<p class="score">${formatNumber(this.score)}</p>\
+					<p class="best">Best: ${formatNumber(this.storage.get('best'))}</p>\
+				</div>\
+				<p class="continue">Tap to continue</p>\
+			</div>`;
+		this.gameOver = true;
+		this.gameOverNode.dataset.active = true;
+
+		return this;
+
+	};
+};
+
+export class BrickMaker extends DisplayObject {
+	constructor(color, size = 4, type = 'digits') {
+
+		super();
+
+		this.color = color;
+		this.size = size;
+    this.type = type;
+
+		const node = this.node = createNode('div', 'brick-maker');
+		const bob = 30;
+		const gap = 1;
+		const bits = [];
+    const hexMap = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
+
+		const calculate = () => {
+      let total = null;
+      switch(this.type) {
+        case 'digits':
+          total = makeArray(size*size, () => 0);
+          bits.forEach((bit, i) => {
+            if(bit.dataset.active==='Y') {
+              total[i] = Number(bit.dataset.value);
+            };
+          });
+          this.value = JSON.stringify(total);
+        break;
+        case 'binary':
+          total = makeArray(size, () => 0);
+          makeArray(size).forEach((y) => {
+            bits.filter((bit) => bit.dataset.y == y).forEach((bit) => {
+              if(bit.dataset.active==='Y') {
+                total[y] += Number(bit.dataset.value);
+              };
+            });
+            total[y] = hexMap[total[y]];
+          });
+          this.value = `0x${total.join('')}`;
+        break;
+      };
+      this.dispatchEvent('result');
+		};
+
+		node.style.setProperty('--color', this.color);
+
+		node.style.width = node.style.height = `${bob*size + (gap*(size-1))}px`;
+		node.style.gap = `${gap}px`;
+
+		makeArray(size).forEach((y) => {
+			makeArray(size).forEach((x) => {
+
+				const bit = createNode('div', 'brick-maker-bit');
+				let active = false;
+				bit.style.width = bit.style.height = `${bob}px`;
+				bit.dataset.x = x;
+				bit.dataset.y = y;
+				bit.dataset.value = this.typeValues[this.type][x];
+				bit.dataset.active = 'N';
+				node.appendChild(bit);
+
+				bits.push(bit);
+
+				bit.addEventListener('click', () => {
+					active = !active;
+					bit.dataset.active = active ? 'Y' : 'N';
+					calculate();
+				});
+
+			});
+		});
+
+	};
+  typeValues = {
+    'digits': makeArray(16, () => 1),
+    'binary': [8, 4, 2, 1]
+  };
+  value = null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jamesrock/rockjs",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "utility bliss",
   "license": "ISC",
   "author": "James Rock",