<script setup lang="ts">
import { $i } from "@/i.js";
import { computed, onMounted } from 'vue';

const generateRandomClass = () => {
	const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
	let result = '';
	for (let i = 0; i < 8; i++) {
		result += chars.charAt(Math.floor(Math.random() * chars.length));
	}
	return result;
};

const gridClass = computed(() => generateRandomClass());
const itemClass = computed(() => generateRandomClass());

onMounted(() => {
	const style = document.createElement('style');
	style.textContent = `
		.${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;
		}

		.${itemClass.value} {
			display: flex;
			align-items: center;
			justify-content: center;
			color: color-mix(
				in srgb,
				var(--MI_THEME-fg) 0.4%,
				transparent
			) !important;
			font-size: 12px;
			font-family: monospace;
			word-break: break-all;
			text-align: center;
			user-select: none;
		}
	`;
	document.head.appendChild(style);
});
</script>

<template>
	<div v-if="$i" :class="gridClass">
		<div v-for="n in 600" :key="n" :class="itemClass">
			{{ $i.id }}
		</div>
	</div>
	<div v-else :class="gridClass">
		<div v-for="n in 600" :key="n" :class="itemClass">
			not signed in
		</div>
	</div>
</template>


