@phenax/pattern-lock-js
v0.1.2
Published
A pattern lock library for the web.
Downloads
160
Readme
PatternLockJS
A pattern lock library for the web. Demo
Installation
Install the library with
yarn add @phenax/pattern-lock-js
Import the library with
import PatternLock from '@phenax/pattern-lock-js';
Get started
const lock = PatternLock({
$canvas: document.querySelector('#patternLock'),
width: 300,
height: 430,
grid: [ 3, 3 ],
});
Customize the theme
lock.setTheme('dark');
lock.setTheme('light');
// Or pass a custom theme
lock.setTheme({
default: {
colors: {
accent: '#1abc9c', // Accent color for node
primary: '#ffffff', // Primary node and line color
bg: '#2c3e50', // Canvas background color
},
dimens: {
node_radius: 20, // Radius of the outer ring of a node
line_width: 6, // Thickness of the line joining nodes
node_core: 8, // Radius of the inner circle of a node
node_ring: 1, // Outer ring thickness
}
},
success: {
colors: {
accent: '#51e980', // Green accent on successful match
}
},
failure: {
colors: {
accent: '#e74c3c', // Red accent on an unsuccessful match
}
},
customState: { // Your custom state
dimens: {
node_radius: 25, // Increases the node radius
}
},
});
Manually change the state
lock.setThemeState('success'); // Switch state to successful
lock.setThemeState('customState'); // Switch to your custom state
You can even change the grid size dynamically
lock.setGrid(4, 4); // 4x4 grid instead of the default 3x3
Callback for when the pattern is complete
lock.onComplete(({ hash }) => (myRealHash === hash) ? success() : failure());
Or you can use the matchHash helper to check if the hash matches your set of correct passwords
// If the pattern drawn is a Right L or a Diagonal L,
// then turn the pattern green
// else turn it red
lock.matchHash([ 'LTU2MTIyNjM0Ng==', 'MTk1OTMwNzY2NQ==' ])
.onSuccess(() => lock.setThemeState('success'))
.onFailure(() => lock.setThemeState('failure'));