From 29e8623eb30ae73104b1c928596e01e20d856204 Mon Sep 17 00:00:00 2001 From: Karthik99999 Date: Wed, 21 Feb 2024 02:45:38 -0700 Subject: [PATCH] More password image improvements --- src/routes/(rtdx)/PasswordImage.svelte | 51 ++++++------------------- static/rtdx-password/rescue.png | Bin 646933 -> 343790 bytes static/rtdx-password/revival.png | Bin 631451 -> 341231 bytes 3 files changed, 11 insertions(+), 40 deletions(-) diff --git a/src/routes/(rtdx)/PasswordImage.svelte b/src/routes/(rtdx)/PasswordImage.svelte index c9ea3e6..7338b13 100644 --- a/src/routes/(rtdx)/PasswordImage.svelte +++ b/src/routes/(rtdx)/PasswordImage.svelte @@ -22,7 +22,7 @@ const ctx = canvas.getContext('2d')!; const background = await loadImage(type); - ctx.drawImage(background, 0, 0, 912, 233); + ctx.drawImage(background, 0, 0, 967, 254); const drawCharacter = async (char: string, x: number, y: number) => { const symbols: { [k: string]: string } = { @@ -33,54 +33,25 @@ s: 'star', }; const symbol = await loadImage(symbols[char.charAt(1)]); - ctx.drawImage(symbol, x, y, 40, 40); + ctx.drawImage(symbol, x, y, 53, 53); - const xc = x + 10; - const yc = y + 10; const character = await loadImage(char.charAt(0)); - ctx.drawImage(character, xc, yc, 20, 20); + ctx.drawImage(character, x + 13, y + 14, 25, 25); }; - const characters = password.match(/.{1,2}/g)!; - // First row - drawCharacter(characters[0], 68, 70); - drawCharacter(characters[1], 118, 70); - drawCharacter(characters[2], 169, 70); - drawCharacter(characters[3], 220, 70); - drawCharacter(characters[4], 270, 70); - drawCharacter(characters[5], 329, 78); - drawCharacter(characters[6], 380, 78); - drawCharacter(characters[7], 430, 78); - drawCharacter(characters[8], 480, 78); - drawCharacter(characters[9], 532, 78); - drawCharacter(characters[10], 590, 70); - drawCharacter(characters[11], 641, 70); - drawCharacter(characters[12], 691, 70); - drawCharacter(characters[13], 742, 70); - drawCharacter(characters[14], 793, 70); - - // Second row - drawCharacter(characters[15], 68, 135); - drawCharacter(characters[16], 118, 135); - drawCharacter(characters[17], 169, 135); - drawCharacter(characters[18], 220, 135); - drawCharacter(characters[19], 270, 135); - drawCharacter(characters[20], 329, 143); - drawCharacter(characters[21], 380, 143); - drawCharacter(characters[22], 430, 143); - drawCharacter(characters[23], 480, 143); - drawCharacter(characters[24], 532, 143); - drawCharacter(characters[25], 590, 135); - drawCharacter(characters[26], 641, 135); - drawCharacter(characters[27], 691, 135); - drawCharacter(characters[28], 742, 135); - drawCharacter(characters[29], 793, 135); + const characters = password.toLowerCase().match(/.{1,2}/g)!; + for (let i = 0; i < 30; i++) { + const pos = i % 15; + const x = 71 + (pos * 54) + (Math.floor(pos / 5) * 8.5); + const y = 71 + (i >= 15 ? 69 : 0) + (pos >= 5 && pos <= 9 ? 8.5 : 0); + drawCharacter(characters[i], x, y); + } }; $: if (password && mounted) drawPassword(); - +