randrix
v1.0.2
Published
A programable, random matrix panel.
Downloads
45
Maintainers
Readme
randrix
A programable, random matrix panel.
Usage
npm install --save randrix
ES Module
import Randrix from 'randrix';
const randrix = new Randrix({
message: 'RandomMatrix',
});
randrix.start();
UMD Module
<script type="text/javascript" src="node_modules/randix/dist/randrix.min.js"></script>
<script type="text/javascript">
var randrix = new window.Randrix.default({
message: 'randrix.js',
possible: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.'
});
randrix.start();
</script>
CSS
[data-randrix] {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(6, 4vw);
grid-template-rows: repeat(5, 8vw);
align-content: space-around;
justify-content: space-between;
}
[data-randrix-char] {
font-size: 2.4vw;
line-height: 6vw;
opacity: .6;
text-align: center;
}
[data-randrix-char-active="true"] {
font-weight: bold;
opacity: 1;
}
[data-randrix-style="monospace"] {
font-family: monospace;
}
[data-randrix-style="sans-serif"] {
font-family: sans-serif;
}
[data-randrix-style="serif"] {
font-family: serif;
}
[data-randrix-style="cursive"] {
font-family: cursive;
}
Example
Custom
import Randrix from 'randrix';
const randrix = new Randrix( {
message: 'RandomMatrix',
selector: '[data-randrix]',
width: 6,
height: 8,
interval: 100,
possible: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
style: ['serif', 'sans-serif', 'monospace'],
callback: () => { document.body.style.backgroundColor = '#abcdef'; },
});
randrix.start();
Multiple
Promise
Async, await example. Resolve the promise with the Randrix callback option.
import Randrix from 'randrix';
async function f() {
const promise = new Promise((resolve, reject) => {
const randrix = new Randrix({
message: 'RandomMatrix',
selector: '[data-randrix]',
callback: () => resolve(true),
});
randrix.start();
});
const result = await promise;
if (result) second();
}
function second() {
document.querySelector('[data-randrix]').innerHTML = '';
const randrix = new Randrix({
message: 'randrix.js',
selector: '[data-randrix]',
possible: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.',
});
randrix.start();
}
f();
Generator
Generator, yield example. Go to next() with the Randrix callback option.
import Randrix from 'randrix';
function* panels(configs) {
for (let i = 0; i < configs.length; i++) {
yield panel(configs[i], i);
}
}
function panel(config, i) {
const wait = (i === 0) ? i : 3000;
setTimeout( () => {
document.querySelector('[data-randrix]').innerHTML = '';
const matrix = new Randrix(config);
matrix.start();
}, wait);
}
const configs = [{
message: 'Random',
width: 4,
height: 5,
callback: () => matrix.next(),
},
{
message: 'Matrix',
width: 4,
height: 5,
callback: () => matrix.next(),
},
{
message: 'Panel',
width: 4,
height: 5,
callback: () => matrix.next(),
},
{
message: 'randrix.js',
width: 4,
height: 5,
possible: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.',
},
];
const matrix = panels(configs);
matrix.next();