maxwroc · maxwroc · Dec 9, 2021 · Dec 9, 2021 · Dec 9, 2021 · Dec 9, 2021
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 /.vscode/
 /node_modules/
-/dist/
+/dist/
+/src/dts/
diff --git a/README.md b/README.md
@@ -1,34 +1,56 @@
-# typescript-project-boilerplate
-Startup setup for new typescript project
+# vanilla-pattern-lock
+Android like pattern unlock.
 
-## What is here?
+## Features
 
-* Card code written in TypeScript
-* Bundling all the files to single output
-* Map file generated, poiting to repo url (with version etc), this way debugging is possible without having source code locally
-* Two bundle types: debug and crunched one
+* Converts pattern to number
+* Vanilla JS - no external libs required
+* Support for touch devices
+* Small size (less than 10KB)
+* TS typings
 
-## How to use it?
-1. Clone this repo to your box
+![pattern-lock2-ffmpg](https://user-images.githubusercontent.com/8268674/145471565-15d1bc26-fb09-4471-9cf7-a699f378762e.gif)
 
-    `git clone https://github.com/maxwroc/typescript-project-boilerplate.git your-project-name`
+## Demo
 
-2. Create empty repo on your git server and copy it's url
+https://maxwroc.github.io/vanilla-pattern-lock/
 
-3. Change the remote url
+## Usage
 
-    `git remote set-url origin [your target repo url]`
+```javascript
+const lock = new PatternLock({ 
+    vibrate: true // whether to vibrate on dot/node selection (mobile devices)
+});
 
-4. Push the code and you are ready to go
+lock
+  .render(document.getElementById("lockContainer"))
+  .on("complete", pattern => { // triggers when user stops swiping
+      if (pattern == 12345) {
+          lock.success(); // green markers
+      }
+      else {
+          lock.failure(); // red markers
+          setTimeout(() => {
+              lock.clear();
+          }, 2000);
+      }
+  })
+```
 
-    `git push origin master`
+## Installation / download
 
-5. Build
+* Install via NMP
 
-    Run `npm install` once before first build.
+  ```
+  npm install vanilla-pattern-lock
+  ```
 
-   * `npm run build` produces debug version of the code (just bundled but no crunched)
-   * `npm run release` produces crunched bundle
+* Github releases: [vanilla-pattern-lock/releases](https://github.com/maxwroc/vanilla-pattern-lock/releases)
 
-    The output files are located in `dist` directory.
+## Like it? Star it!
 
+If you like it please consider leaving star on github.
+
+## Credits
+
+This code is based on [Tympanix/pattern-lock-js](https://github.com/Tympanix/pattern-lock-js). The original library depends on JQuery and it is written in plain JS. I have rewritten the original code in TypeScript and I've added few additional features.
diff --git a/build/postbuild.js b/build/postbuild.js
diff --git a/docs/index.html b/docs/index.html
@@ -1,9 +1,114 @@
 <html>
     <head>
         <title>App Stats</title>
-        <script src="typescript-project-boilerplate.js"></script>
+        <link rel="stylesheet" href="vanilla-pattern-lock.css" />
+        <script src="vanilla-pattern-lock.js"></script>
+        <script type="text/javascript">
+            window.addEventListener("load", () => {
+
+                const pass = 15987;
+                const passResult = document.getElementById("pass-result");
+                passResult.textContent = pass;
+
+                const lock = new PatternLock({});
+                lock.render(document.getElementById("container"))
+                    .on("complete", pattern => {
+                        if(pattern == pass) {
+                            passResult.classList.add("success");
+                            lock.success();
+                        }
+                        else {
+                            passResult.classList.add("failure");
+                            lock.failure();
+                        }
+
+                        passResult.textContent = pattern;
+                    })
+                    .on("clear", () => {
+                        passResult.classList.remove("success", "failure");
+                        passResult.textContent = pass;
+                    });
+            });
+        </script>
+        <style type="text/css">
+
+            * {
+                --primary-color: #f0f0f0;
+                --secondary-color: #d6d6d6;
+                --primary-bgcolor: #333;
+                --secondary-bgcolor: #222;
+                --highlight-color: #fff;
+                --content-max-width: 500px;
+            }
+
+            a {
+                color: var(--highlight-color);
+            }
+            a:visited {
+                color: var(--secondary-color);
+            }
+
+            body {
+                background-color: var(--primary-bgcolor);
+                color: var(--primary-color);
+                font-family: monospace;
+                font-size: 16px; 
+                padding: 10px;
+            }
+
+            h2 {
+                color: var(--primary-color);
+                font-size: 120%;
+                border-top: 1px solid var(--secondary-bgcolor);
+                padding-top: 15px;
+                margin-top: 20px;
+            }
+
+            #wrapper {
+                max-width: var(--content-max-width);
+            }
+
+            #container,
+            #pass-info {
+                border: 1px solid var(--secondary-bgcolor);
+                border-radius: 20px;
+            }
+
+            #pass-info {
+                margin-top: 20px;
+                padding: 20px;
+            }
+            #pass-result.success {
+                color: green;
+            }
+            #pass-result.failure {
+                color: red;
+            }
+        </style>
     </head>
-    <body style="background-color: #333; color: gray; font-size: 16px; padding: 10px;">
-
+    <body>
+        <div id="wrapper">
+            <div id="container"></div>
+            <div id="pass-info">
+                <span>Pass: </span><span id="pass-result">15987</span>
+            </div>
+            <h2>Pattern Lock</h2>
+            <p>
+                A light weight plugin to simulate Android's like pattern (un)lock mechanism.
+            </p>
+            <p>Written in vanilla javascript so it doesn't require any additional libraries.</p>
+
+            <h2>How it works?</h2>
+            <p>It converts selected nodes into numbers. You can imagine phone numeric keyboard which is behind the nodes. So selecting the top left node, the middle one and the bottom right will result in 159.</p>
+            <div>
+                <img src="https://user-images.githubusercontent.com/8268674/145449911-bba4d83f-593b-4d4d-a7e7-8ffb402fe626.png" />
+            </div>
+
+            <h2>Code</h2>
+            <ul>
+                <li>Source: <a href="https://github.com/maxwroc/vanilla-pattern-lock">maxwroc/vanilla-pattern-lock</a></li>
+                <li>Size: &lt; 10KB</li>
+            </ul>
+        </div>
     </body>    
 </html>
diff --git a/docs/typescript-project-boilerplate.js b/docs/typescript-project-boilerplate.js
diff --git a/docs/typescript-project-boilerplate.js.map b/docs/typescript-project-boilerplate.js.map
diff --git a/docs/vanilla-pattern-lock.css b/docs/vanilla-pattern-lock.css
@@ -0,0 +1,44 @@
+
+svg.pattern-lock g.lock-lines line {
+    stroke-width: 1.5;
+    stroke: black;
+    opacity: 0.5;
+}
+
+svg.pattern-lock g.lock-dots circle {
+    stroke: transparent;
+    fill: black;
+    stroke-width: 13.5;
+}
+
+svg.pattern-lock g.lock-actives circle {
+    fill: black;
+    opacity: .2;
+    animation: lock-activate-dot .15s 0s ease 1;
+    transform-origin: center;
+}
+
+svg.pattern-lock g.lock-lines line {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+}
+
+svg.pattern-lock.success g.lock-actives circle {
+    fill: green;
+}
+
+svg.pattern-lock.error g.lock-actives circle {
+    fill: red;
+}
+
+@keyframes lock-activate-dot {
+    0% {
+        transform: scale(0);
+    }
+    75% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1.0);
+    }
+}