@jamesrock/rockjs 1.10.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +75 -45
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -81,6 +81,12 @@ export const createOption = (label = '{label}', value = 0) => {
|
|
|
81
81
|
return node;
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
+
export const createHeading = (level = 1, label = '{label}') => {
|
|
85
|
+
const node = createNode(`h${level}`);
|
|
86
|
+
node.innerText = label;
|
|
87
|
+
return node;
|
|
88
|
+
};
|
|
89
|
+
|
|
84
90
|
export const makeBitArray = (size) => {
|
|
85
91
|
let bob = 2**size;
|
|
86
92
|
return makeArray(size, () => {
|
|
@@ -259,80 +265,104 @@ export class GameBase extends DisplayObject {
|
|
|
259
265
|
};
|
|
260
266
|
|
|
261
267
|
export class BrickMaker extends DisplayObject {
|
|
262
|
-
constructor(
|
|
268
|
+
constructor({
|
|
269
|
+
size = 4,
|
|
270
|
+
type = 'digits',
|
|
271
|
+
color = 'red',
|
|
272
|
+
scale = 30,
|
|
273
|
+
gap = 1
|
|
274
|
+
} = {}) {
|
|
263
275
|
|
|
264
276
|
super();
|
|
265
277
|
|
|
266
278
|
this.color = color;
|
|
267
279
|
this.size = size;
|
|
280
|
+
this.scale = scale;
|
|
268
281
|
this.type = type;
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
const gap = 1;
|
|
273
|
-
const bits = [];
|
|
274
|
-
const hexMap = size*size > 16 ? makeHexMap() : makeHexMap(false);
|
|
275
|
-
const typeValues = {
|
|
282
|
+
this.gap = gap;
|
|
283
|
+
this.hexMap = size*size > 16 ? makeHexMap() : makeHexMap(false);
|
|
284
|
+
this.typeValues = {
|
|
276
285
|
'digits': makeArray(size*size, () => 1),
|
|
277
286
|
'binary': makeBitArray(size)
|
|
278
287
|
};
|
|
279
288
|
|
|
280
|
-
const
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
case 'digits':
|
|
284
|
-
total = makeArray(size*size, () => 0);
|
|
285
|
-
bits.forEach((bit, i) => {
|
|
286
|
-
if(bit.dataset.active==='Y') {
|
|
287
|
-
total[i] = Number(bit.dataset.value);
|
|
288
|
-
};
|
|
289
|
-
});
|
|
290
|
-
this.value = JSON.stringify(total);
|
|
291
|
-
break;
|
|
292
|
-
case 'binary':
|
|
293
|
-
total = makeArray(size, () => 0);
|
|
294
|
-
makeArray(size).forEach((y) => {
|
|
295
|
-
bits.filter((bit) => bit.dataset.y == y).forEach((bit) => {
|
|
296
|
-
if(bit.dataset.active==='Y') {
|
|
297
|
-
total[y] += Number(bit.dataset.value);
|
|
298
|
-
};
|
|
299
|
-
});
|
|
300
|
-
total[y] = hexMap[total[y]];
|
|
301
|
-
});
|
|
302
|
-
this.value = `0x${total.join('')}`;
|
|
303
|
-
break;
|
|
304
|
-
};
|
|
305
|
-
this.dispatchEvent('result');
|
|
306
|
-
};
|
|
307
|
-
|
|
289
|
+
const node = this.node = createNode('div', 'brick-maker');
|
|
290
|
+
const bits = this.bits = [];
|
|
291
|
+
|
|
308
292
|
node.style.setProperty('--color', this.color);
|
|
309
|
-
|
|
310
|
-
node.style.width = node.style.height = `${bob*size + (gap*(size-1))}px`;
|
|
293
|
+
node.style.width = node.style.height = `${scale*size + (gap*(size-1))}px`;
|
|
311
294
|
node.style.gap = `${gap}px`;
|
|
312
295
|
|
|
313
296
|
makeArray(size).forEach((y) => {
|
|
314
297
|
makeArray(size).forEach((x) => {
|
|
315
298
|
|
|
316
299
|
const bit = createNode('div', 'brick-maker-bit');
|
|
317
|
-
|
|
318
|
-
bit.style.width = bit.style.height = `${bob}px`;
|
|
300
|
+
bit.style.width = bit.style.height = `${scale}px`;
|
|
319
301
|
bit.dataset.x = x;
|
|
320
302
|
bit.dataset.y = y;
|
|
321
|
-
bit.dataset.value = typeValues[this.type][x];
|
|
303
|
+
bit.dataset.value = this.typeValues[this.type][x];
|
|
322
304
|
bit.dataset.active = 'N';
|
|
323
305
|
node.appendChild(bit);
|
|
324
306
|
|
|
325
307
|
bits.push(bit);
|
|
326
308
|
|
|
327
309
|
bit.addEventListener('click', () => {
|
|
328
|
-
active =
|
|
329
|
-
|
|
330
|
-
calculate();
|
|
310
|
+
bit.dataset.active = bit.dataset.active === 'Y' ? 'N' : 'Y';
|
|
311
|
+
this.calculate();
|
|
331
312
|
});
|
|
332
313
|
|
|
333
314
|
});
|
|
334
315
|
});
|
|
335
316
|
|
|
336
317
|
};
|
|
318
|
+
calculate() {
|
|
319
|
+
|
|
320
|
+
let total = null;
|
|
321
|
+
switch(this.type) {
|
|
322
|
+
case 'digits':
|
|
323
|
+
total = makeArray(this.size*this.size, () => 0);
|
|
324
|
+
this.bits.forEach((bit, i) => {
|
|
325
|
+
if(bit.dataset.active==='Y') {
|
|
326
|
+
total[i] = Number(bit.dataset.value);
|
|
327
|
+
};
|
|
328
|
+
});
|
|
329
|
+
this.value = JSON.stringify(total);
|
|
330
|
+
break;
|
|
331
|
+
case 'binary':
|
|
332
|
+
total = makeArray(this.size, () => 0);
|
|
333
|
+
makeArray(this.size).forEach((y) => {
|
|
334
|
+
this.bits.filter((bit) => bit.dataset.y == y).forEach((bit) => {
|
|
335
|
+
if(bit.dataset.active==='Y') {
|
|
336
|
+
total[y] += Number(bit.dataset.value);
|
|
337
|
+
};
|
|
338
|
+
});
|
|
339
|
+
total[y] = this.hexMap[total[y]];
|
|
340
|
+
});
|
|
341
|
+
this.value = `0x${total.join('')}`;
|
|
342
|
+
break;
|
|
343
|
+
};
|
|
344
|
+
this.dispatchEvent('result');
|
|
345
|
+
|
|
346
|
+
};
|
|
347
|
+
invert() {
|
|
348
|
+
|
|
349
|
+
this.bits.forEach((bit) => {
|
|
350
|
+
bit.dataset.active = bit.dataset.active === 'Y' ? 'N' : 'Y';
|
|
351
|
+
});
|
|
352
|
+
this.calculate();
|
|
353
|
+
|
|
354
|
+
return this;
|
|
355
|
+
|
|
356
|
+
};
|
|
357
|
+
randomise() {
|
|
358
|
+
|
|
359
|
+
this.bits.forEach((bit) => {
|
|
360
|
+
bit.dataset.active = getRandom(['Y', 'N']);
|
|
361
|
+
});
|
|
362
|
+
this.calculate();
|
|
363
|
+
|
|
364
|
+
return this;
|
|
365
|
+
|
|
366
|
+
};
|
|
337
367
|
value = null;
|
|
338
|
-
};
|
|
368
|
+
};
|