feat: improve fingerprinting

packages/frontend/src/components/global/userIdWatermark.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { $i } from "@/i.js";
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, ref } from "vue";
 
 const generateRandomClass = () => {
-	const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+	const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-	let result = '';
+	let result = "";
 	for (let i = 0; i < 8; i++) {
 		result += chars.charAt(Math.floor(Math.random() * chars.length));
 	}
@@ -12,39 +12,113 @@ const generateRandomClass = () => {
 };
 
 const gridClass = ref(generateRandomClass());
-const itemClass = ref(generateRandomClass());
+const itemClasses = ref<string[]>([]);
 const recreationKey = ref(0);
 let regenerationInterval: ReturnType<typeof setInterval> | null = null;
 let styleElement: HTMLStyleElement | null = null;
 let allCreatedClasses: string[] = [];
 
+const encodeTextToPath = (text: string) => {
+	const charPaths: { [key: string]: string } = {
+		a: "M2,8 L4,2 L6,2 L8,8 M3,6 L7,6",
+		b: "M2,2 L2,8 L6,8 C7,8 8,7 8,6 C8,5 7,4 6,4 L6,4 C7,4 8,3 8,2 C8,1 7,2 6,2 Z",
+		c: "M8,3 C7,2 6,2 5,2 C3,2 2,3 2,5 C2,7 3,8 5,8 C6,8 7,8 8,7",
+		d: "M2,2 L2,8 L5,8 C7,8 8,7 8,5 C8,3 7,2 5,2 Z",
+		e: "M2,2 L2,8 L8,8 M2,2 L8,2 M2,5 L6,5",
+		f: "M2,2 L2,8 M2,2 L8,2 M2,5 L6,5",
+		g: "M8,3 C7,2 6,2 5,2 C3,2 2,3 2,5 C2,7 3,8 5,8 L8,8 L8,5 L5,5",
+		h: "M2,2 L2,8 M8,2 L8,8 M2,5 L8,5",
+		i: "M3,2 L7,2 M5,2 L5,8 M3,8 L7,8",
+		j: "M8,2 L8,7 C8,8 7,8 6,8 C5,8 4,8 4,7",
+		k: "M2,2 L2,8 M8,2 L2,5 M4,5 L8,8",
+		l: "M2,2 L2,8 L8,8",
+		m: "M2,8 L2,2 L5,5 L8,2 L8,8",
+		n: "M2,8 L2,2 L8,8 L8,2",
+		o: "M2,3 C2,2 3,2 5,2 C7,2 8,2 8,3 L8,7 C8,8 7,8 5,8 C3,8 2,8 2,7 Z",
+		p: "M2,2 L2,8 M2,2 L6,2 C7,2 8,3 8,4 C8,5 7,6 6,6 L2,6",
+		q: "M2,3 C2,2 3,2 5,2 C7,2 8,2 8,3 L8,7 C8,8 7,8 5,8 C3,8 2,8 2,7 Z M6,6 L8,8",
+		r: "M2,2 L2,8 M2,2 L6,2 C7,2 8,3 8,4 C8,5 7,6 6,6 L2,6 M6,6 L8,8",
+		s: "M8,3 C7,2 5,2 5,2 C3,2 2,3 2,4 C2,5 3,5 5,5 C7,5 8,6 8,7 C8,8 7,8 5,8 C3,8 2,7 2,7",
+		t: "M2,2 L8,2 M5,2 L5,8",
+		u: "M2,2 L2,7 C2,8 3,8 5,8 C7,8 8,8 8,7 L8,2",
+		v: "M2,2 L5,8 L8,2",
+		w: "M2,2 L3,8 L5,5 L7,8 L8,2",
+		x: "M2,2 L8,8 M8,2 L2,8",
+		y: "M2,2 L5,5 L8,2 M5,5 L5,8",
+		z: "M2,2 L8,2 L2,8 L8,8",
+		" ": "",
+		"0": "M2,3 C2,2 3,2 5,2 C7,2 8,2 8,3 L8,7 C8,8 7,8 5,8 C3,8 2,8 2,7 Z M2,2 L8,8",
+		"1": "M4,2 L5,2 L5,8 M3,8 L7,8",
+		"2": "M2,3 C2,2 3,2 5,2 C7,2 8,2 8,3 C8,4 7,5 5,5 L2,8 L8,8",
+		"3": "M2,2 L8,2 C8,2 8,3 8,4 C8,5 7,5 5,5 C7,5 8,5 8,6 C8,7 8,8 8,8 L2,8",
+		"4": "M2,2 L2,5 L8,5 M6,2 L6,8",
+		"5": "M8,2 L2,2 L2,5 L6,5 C7,5 8,6 8,7 C8,8 7,8 5,8 C3,8 2,7 2,7",
+		"6": "M8,2 C7,2 5,2 5,2 C3,2 2,3 2,5 L2,7 C2,8 3,8 5,8 C7,8 8,7 8,6 C8,5 7,5 5,5 L2,5",
+		"7": "M2,2 L8,2 L5,8",
+		"8": "M5,2 C3,2 2,3 2,4 C2,5 3,5 5,5 C7,5 8,5 8,4 C8,3 7,2 5,2 Z M5,5 C3,5 2,6 2,7 C2,8 3,8 5,8 C7,8 8,7 8,6 C8,5 7,5 5,5 Z",
+		"9": "M8,5 C8,3 7,2 5,2 C3,2 2,3 2,4 C2,5 3,5 5,5 L8,5 L8,7 C8,8 7,8 5,8 C3,8 2,7 2,7",
+	};
+
+	let path = "";
+	const chars = text.toLowerCase().split("");
+	let xOffset = 0;
+
+	chars.forEach((char, index) => {
+		if (charPaths[char]) {
+			const translatedPath = charPaths[char]
+				.replace(/([ML])\s*(\d+),(\d+)/g, (match, command, x, y) => {
+					return `${command}${parseInt(x) + xOffset},${y}`;
+				})
+				.replace(
+					/([C])\s*(\d+),(\d+)\s+(\d+),(\d+)\s+(\d+),(\d+)/g,
+					(match, command, x1, y1, x2, y2, x3, y3) => {
+						return `${command}${parseInt(x1) + xOffset},${y1} ${parseInt(x2) + xOffset},${y2} ${parseInt(x3) + xOffset},${y3}`;
+					},
+				);
+			path += translatedPath + " ";
+		}
+		xOffset += 10;
+	});
+
+	return path.trim();
+};
+
+const generateItemClasses = (count: number) => {
+	const classes: string[] = [];
+	for (let i = 0; i < count; i++) {
+		classes.push(generateRandomClass());
+	}
+	return classes;
+};
+
 const regenerateWatermark = () => {
 	cleanupOldElements();
 
 	gridClass.value = generateRandomClass();
-	itemClass.value = generateRandomClass();
+	itemClasses.value = generateItemClasses(600);
 	recreationKey.value++;
 
-	allCreatedClasses.push(gridClass.value, itemClass.value);
+	allCreatedClasses.push(gridClass.value, ...itemClasses.value);
 
 	createStyleElement();
 };
 
 const cleanupOldElements = () => {
-	const allStyles = document.head.querySelectorAll('style');
+	const allStyles = document.head.querySelectorAll("style");
-	allStyles.forEach(style => {
+	allStyles.forEach((style) => {
-		const content = style.textContent || '';
+		const content = style.textContent || "";
-		const hasOldClasses = allCreatedClasses.some(className =>
+		const hasOldClasses = allCreatedClasses.some(
+			(className) =>
 				content.includes(className) &&
 				className !== gridClass.value &&
-			className !== itemClass.value
+				!itemClasses.value.includes(className),
 		);
 		if (hasOldClasses) {
 			style.remove();
 		}
 	});
 
-	allCreatedClasses = [gridClass.value, itemClass.value];
+	allCreatedClasses = [gridClass.value, ...itemClasses.value];
 };
 
 const createStyleElement = () => {
@@ -52,7 +126,32 @@ const createStyleElement = () => {
 		styleElement.parentNode.removeChild(styleElement);
 	}
 
-	styleElement = document.createElement('style');
+	styleElement = document.createElement("style");
+
+	const itemStyles = itemClasses.value
+		.map(
+			(className) => `
+        .${className} {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+        }
+
+        .${className} svg {
+            opacity: 0.02 !important;
+            width: auto !important;
+            height: 12px !important;
+        }
+
+        .${className} svg path {
+            stroke: var(--MI_THEME-fg) !important;
+            fill: none !important;
+            stroke-width: 1 !important;
+        }
+    `,
+		)
+		.join("");
+
 	const styles = `
         .${gridClass.value} {
             position: fixed !important;
@@ -69,46 +168,36 @@ const createStyleElement = () => {
             z-index: 999999999 !important;
             overflow: hidden !important;
         }
-
+        ${itemStyles}
-		.${itemClass.value} {
-			display: flex !important;
-			align-items: center !important;
-			justify-content: center !important;
-			color: color-mix(
-				in srgb,
-				var(--MI_THEME-fg) 1.2%,
-				transparent
-			) !important;
-			font-size: 12px !important;
-			font-family: monospace !important;
-			word-break: break-all !important;
-			text-align: center !important;
-			user-select: none !important;
-		}
     `;
 
 	styleElement.textContent = styles;
 	document.head.appendChild(styleElement);
 };
 
+const watermarkText = computed(() => $i?.id || "not signed in");
+const pathData = computed(() => encodeTextToPath(watermarkText.value));
+const textWidth = computed(() => watermarkText.value.length * 10 + 10);
+
 onMounted(() => {
+	itemClasses.value = generateItemClasses(600);
+	allCreatedClasses.push(gridClass.value, ...itemClasses.value);
 	createStyleElement();
 
 	regenerationInterval = setInterval(() => {
+		itemClasses.value = generateItemClasses(600);
+		allCreatedClasses.push(gridClass.value, ...itemClasses.value);
 		regenerateWatermark();
 	}, 5000);
 });
 </script>
 
 <template>
-	<div v-if="$i" :key="`signed-${recreationKey}`" :class="gridClass">
+	<div :key="`watermark-${recreationKey}`" :class="gridClass">
-		<div v-for="n in 600" :key="n" :class="itemClass">
+		<div v-for="n in 600" :key="n" :class="itemClasses[n]">
-			{{ $i.id }}
+			<svg :viewBox="`0 0 ${textWidth} 10`" xmlns="http://www.w3.org/2000/svg">
-		</div>
+				<path :d="pathData" />
-	</div>
+			</svg>
-	<div v-else :key="`unsigned-${recreationKey}`" :class="gridClass">
-		<div v-for="n in 600" :key="n" :class="itemClass">
-			not signed in
 		</div>
 	</div>
 </template>