feat: things

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { $i } from "@/i.js";
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 const generateRandomClass = () => {
 	const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
@@ -11,59 +11,104 @@ const generateRandomClass = () => {
 	return result;
 };
 
-const gridClass = computed(() => generateRandomClass());
-const itemClass = computed(() => generateRandomClass());
+const gridClass = ref(generateRandomClass());
+const itemClass = ref(generateRandomClass());
+const recreationKey = ref(0);
+let regenerationInterval: ReturnType<typeof setInterval> | null = null;
+let styleElement: HTMLStyleElement | null = null;
+let allCreatedClasses: string[] = [];
 
-onMounted(() => {
-	const style = document.createElement('style');
-	style.textContent = `
+const regenerateWatermark = () => {
+	cleanupOldElements();
+
+	gridClass.value = generateRandomClass();
+	itemClass.value = generateRandomClass();
+	recreationKey.value++;
+
+	allCreatedClasses.push(gridClass.value, itemClass.value);
+
+	createStyleElement();
+};
+
+const cleanupOldElements = () => {
+	const allStyles = document.head.querySelectorAll('style');
+	allStyles.forEach(style => {
+		const content = style.textContent || '';
+		const hasOldClasses = allCreatedClasses.some(className =>
+			content.includes(className) &&
+			className !== gridClass.value &&
+			className !== itemClass.value
+		);
+		if (hasOldClasses) {
+			style.remove();
+		}
+	});
+
+	allCreatedClasses = [gridClass.value, itemClass.value];
+};
+
+const createStyleElement = () => {
+	if (styleElement && styleElement.parentNode) {
+		styleElement.parentNode.removeChild(styleElement);
+	}
+
+	styleElement = document.createElement('style');
+	const styles = `
 		.${gridClass.value} {
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100vw;
-			height: 100vh;
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-			grid-template-rows: repeat(auto-fill, minmax(20px, 1fr));
-			gap: 20px;
-			padding: 20px;
-			pointer-events: none;
-			z-index: 999999999;
-			overflow: hidden;
+			position: fixed !important;
+			top: 0 !important;
+			left: 0 !important;
+			width: 100vw !important;
+			height: 100vh !important;
+			display: grid !important;
+			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
+			grid-template-rows: repeat(auto-fill, minmax(20px, 1fr)) !important;
+			gap: 20px !important;
+			padding: 20px !important;
+			pointer-events: none !important;
+			z-index: 999999999 !important;
+			overflow: hidden !important;
 		}
 
 		.${itemClass.value} {
-			display: flex;
-			align-items: center;
-			justify-content: center;
+			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;
-			font-family: monospace;
-			word-break: break-all;
-			text-align: center;
-			user-select: none;
+			font-size: 12px !important;
+			font-family: monospace !important;
+			word-break: break-all !important;
+			text-align: center !important;
+			user-select: none !important;
 		}
 	`;
-	document.head.appendChild(style);
+
+	styleElement.textContent = styles;
+	document.head.appendChild(styleElement);
+};
+
+onMounted(() => {
+	createStyleElement();
+
+	regenerationInterval = setInterval(() => {
+		regenerateWatermark();
+	}, 5000);
 });
 </script>
 
 <template>
-	<div v-if="$i" :class="gridClass">
+	<div v-if="$i" :key="`signed-${recreationKey}`" :class="gridClass">
 		<div v-for="n in 600" :key="n" :class="itemClass">
 			{{ $i.id }}
 		</div>
 	</div>
-	<div v-else :class="gridClass">
+	<div v-else :key="`unsigned-${recreationKey}`" :class="gridClass">
 		<div v-for="n in 600" :key="n" :class="itemClass">
 			not signed in
 		</div>
 	</div>
 </template>
-
-