More password image improvements

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();
 </script>
 
-<canvas bind:this={canvas} id="password" width="912" height="233" />
+<canvas bind:this={canvas} id="password" width="967" height="254" />
 
 <style>
 	canvas {