31:T6a7,generatePattern2 = (size = 6) => { // Allocate a buffer for 32 random bytes from which we will derive the pin // Our pin will never be longer than 9 digits, but we may not be able to use // every byte so we generate extra. const bytes = new Uint8Array(32); // We will collect digits for the pin code here. const pin = []; // We will keep track of the digits we have already used here // to avoid duplicates in the pin as it would lead to unclear // lock patterns const visited = new Set(); // Loop until we have collected enough digits for the pin. while (pin.length < size) { // We fill the buffer with random bytes crypto.getRandomValues(bytes); // and iterate over them attempting to derive digits for the pin // if digit is already in the pin or if it leads to an overlapping // pattern we skip it and consider next byte. for (const byte of bytes) { // Map the random values to the numbers 0 to 8 const digit = byte % 9; // If this is the first digit we include it in the pin const conflict = pin.length === 0 ? false : // If we have already used this digit we skip it // otherwise same dot will be used twice in the pattern visited.has(digit) ? true : // If the digit is leading to a pattern with a line crossing // dot that is not part of the pin we skip it CONFLICT[pin[pin.length - 1]][digit] != null; if (!conflict) { visited.add(digit); pin.push(digit); } // If we already have enough digits we can stop here if (pin.length === size) { break; } } } return pin; }32:T61e,patternlock = { const src = "https://cdn.skypack.dev/patternlock/dist/patternlock.css"; // const n = html``; const n = html``; const api = { attach: () => document.querySelector("head").prepend(n), detach: () => n.parentNode && n.parentNode.removeChild(n) }; api.attach(); invalidation.then(api.detach); return api; }33:T4d7,viewPattern = (code = []) => { const view = html`

`; const ui = html`

${view}

`; const controller = new PLock({}); controller.render(view); const canvas = controller.lineCanvas; const dots = canvas.availableDots; let line = null; for (const digit of code) { if (line) { canvas.stopTrack(line, dots[digit - 1]); } line = canvas.beginTrack(dots[digit - 1]); } return Object.assign(ui, { controller }); }34:Tcbb,class LockPattern extends HTMLElement { constructor() { super(); this.svgNS = "http://www.w3.org/2000/svg"; this.size = 3; this.dotRadius = 15; this.activeDots = new Set(); this.pattern = []; this.attachShadow({ mode: "open" }); this.shadowRoot.innerHTML = ` `; this.svg = this.shadowRoot.querySelector("svg"); this.initializeDots(); this.svg.addEventListener("mousedown", this.handleMouseDown.bind(this)); this.svg.addEventListener("mousemove", this.handleMouseMove.bind(this)); this.svg.addEventListener("mouseup", this.handleMouseUp.bind(this)); } initializeDots() { this.dots = []; const gap = (100 - this.dotRadius * 2) / (this.size - 1); for (let i = 0; i < this.size; i++) { for (let j = 0; j < this.size; j++) { const dot = document.createElementNS(this.svgNS, "circle"); dot.setAttribute("cx", this.dotRadius + j * gap); dot.setAttribute("cy", this.dotRadius + i * gap); dot.setAttribute("r", this.dotRadius); dot.setAttribute("data-index", i * this.size + j); this.svg.appendChild(dot); this.dots.push(dot); } } } handleMouseDown(e) { this.isDrawing = true; const dot = e.target.closest("circle"); if (dot) { this.addDotToPattern(dot); } } handleMouseMove(e) { if (!this.isDrawing) return; const dot = e.target.closest("circle"); if (dot && !this.activeDots.has(dot)) { this.addDotToPattern(dot); } } handleMouseUp() { this.isDrawing = false; this.displayPinCode(); this.resetPattern(); } addDotToPattern(dot) { if (!this.activeDots.has(dot)) { this.activeDots.add(dot); dot.classList.add("active"); this.pattern.push(parseInt(dot.getAttribute("data-index"))); if (this.pattern.length > 1) { this.drawLine( this.dots[this.pattern[this.pattern.length - 2]], this.dots[this.pattern[this.pattern.length - 1]] ); } } } drawLine(dot1, dot2) { const line = document.createElementNS(this.svgNS, "line"); line.setAttribute("x1", dot1.getAttribute("cx")); line.setAttribute("y1", dot1.getAttribute("cy")); line.setAttribute("x2", dot2.getAttribute("cx")); line.setAttribute("y2", dot2.getAttribute("cy")); this.svg.appendChild(line); } displayPinCode() { const pinCode = this.pattern.map((value) => value + 1).join(""); document.getElementById("pinCode").textContent = "PIN code: " + pinCode; } resetPattern() { setTimeout(() => { this.activeDots.forEach((dot) => dot.classList.remove("active")); this.activeDots.clear(); this.pattern = []; const lines = this.svg.querySelectorAll("line"); lines.forEach((line) => this.svg.removeChild(line)); }, 1000); } }35:[] 2f:{"title":"Pattern Lock Generator","cells":[{"id":0,"value":"# Pattern Lock Generator","pinned":true,"hidden":false,"mode":"md"},{"id":77,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"generatePattern()","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"show = (pattern) => {\n const view = html`

`;\n const controller = new PatternLock(\"#shadow-pattern\", {\n enableSetPattern: true\n });\n\n controller.holder = view;\n controller._render();\n controller.setPattern(pattern.join(\"\"));\n\n return view;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"viewPattern(pin)","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"pin = generatePattern2().map((x) => x + 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"generatePattern = () => {\n let n = getRandomInt(1, 9);\n const code = [n];\n while (code.length <= 8) {\n const next = moves(n).filter((n) => !code.includes(n));\n if (next.length === 0) {\n break;\n } else {\n n = next[getRandomInt(0, next.length - 1)];\n code.push(n);\n }\n }\n return code;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"CONFLICT = ({\n 0: { 2: 1, 6: 3, 8: 4 },\n 1: { 7: 4 },\n 2: { 0: 1, 6: 4, 8: 5 },\n 3: { 5: 4 },\n 4: {},\n 5: { 3: 4 },\n 6: { 0: 3, 2: 4, 8: 7 },\n 7: { 1: 4 },\n 8: { 0: 4, 2: 5, 6: 7 }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"isValidMove = (start, end) => {\n const invalidMoves = {\n 0: { 2: 1, 6: 3, 8: 4 },\n 1: { 7: 4 },\n 2: { 0: 1, 6: 4, 8: 5 },\n 3: { 5: 4 },\n 4: {},\n 5: { 3: 4 },\n 6: { 0: 3, 2: 4, 8: 7 },\n 7: { 1: 4 },\n 8: { 0: 4, 2: 5, 6: 7 }\n };\n\n const requiredDot = invalidMoves[start][end];\n if (requiredDot === undefined) {\n return true;\n } else {\n return false;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"generatePattern2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"moves = (n) => {\n let [x, y] = coords(n);\n return [\n [x - 1, y - 1],\n [x, y - 1],\n [x + 1, y - 1],\n [x - 1, y],\n [x + 1, y],\n [x - 1, y + 1],\n [x, y + 1],\n [x + 1, y + 1]\n ]\n .filter(([x, y]) => x >= 0 && x <= 2 && y >= 0 && y <= 2)\n .map(([x, y]) => matrix[y][x]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"coords = (n) => {\n for (const [y, row] of matrix.entries()) {\n for (const [x, col] of row.entries()) {\n if (col === n) {\n return [x, y];\n }\n }\n }\n return [0, 0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"draw = (code) => {\n let n = 1;\n const result = [[], [], []];\n for (const r in [0, 1, 2]) {\n for (const c in [0, 1, 2]) {\n result[r][c] = code.includes(n) ? n : \"·\";\n n += 1;\n }\n }\n\n pattern.setPattern(code.join(\"\"));\n\n return md`${code.join(\"\")}

${result\n    .map((r) => r.join(\" \"))\n    .join(\"\\n\")}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"getRandomInt = (min, max) => {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"PatternLock = {\n return (await import(\"https://cdn.skypack.dev/patternlock\")).default;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"pattern = new PatternLock(\"#pattern-code\", {\n enableSetPattern: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"PLock = {\n const lib = await import(\"https://cdn.skypack.dev/vanilla-pattern-lock\");\n return lib.default;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"customElements.define(\"lock-pattern\", LockPattern)","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"code = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"code.resetPattern()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}