Add custom crosshair upload with VTF/VMT generation

[Copilot]

Implements client-side image-to-VTF conversion and material generation for custom TF2 crosshairs.

Changes

VTF Generator (src/utils/vtf.ts)

• Full VTF 7.2 format writer with BGRA8888 support
• Automatic power-of-2 resizing (up to 64x64)
• Mipmap generation with 2x2 box filtering
• imageToVTF(file: File) for direct image conversion

Upload Component (src/components/items/CustomCrosshairUpload.tsx)

• File upload with type/size validation (5MB limit)
• Generates VMT with UnlitGeneric shader parameters
• IndexedDB persistence under custom-crosshairs key
• Exports getCustomCrosshairForDownload() for download integration

Integration

• ItemsInner.tsx: Loads custom crosshairs on mount, adds to global dynamicCrosshairPacks
• app.ts: Detects custom_* prefix, fetches VTF/VMT from IndexedDB during config download

Usage

// Upload flow
const { vtf, width, height } = await imageToVTF(file, 64);
const vmt = generateVMT("vgui/replay/thumbnails/custom_name");
await set("custom-crosshairs", [...existing, { name, vtfData, vmtData }]);

// Download integration
if (crosshairFile.startsWith("custom_")) {
  const { vtf, vmt } = await getCustomCrosshairForDownload(crosshairFile);
  // Include in ZIP
}

Custom crosshairs persist in browser storage and appear in the crosshair selector under "Misc" group.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• api.comfig.app
  • Triggering command: node /home/REDACTED/work/comfig-app/comfig-app/node_modules/.bin/../astro/astro.js build (dns block)
• o1.ingest.sentry.io
  • Triggering command: node /home/REDACTED/work/comfig-app/comfig-app/node_modules/.bin/../astro/astro.js check (dns block)
  • Triggering command: node /home/REDACTED/work/comfig-app/comfig-app/node_modules/.bin/../astro/astro.js build (dns block)
• telemetry.astro.build
  • Triggering command: node /home/REDACTED/work/comfig-app/comfig-app/node_modules/.bin/../astro/astro.js build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Add a system of uploading custom crosshairs to use, generating a custom VMT and VTF

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[cloudflare-workers-and-pages]

Deploying mastercomfig-site with    Cloudflare Pages

Latest commit:	8b670d2
Status:	✅  Deploy successful!
Preview URL:	https://c403f218.mastercomfig-site.pages.dev
Branch Preview URL:	https://copilot-add-custom-crosshair.mastercomfig-site.pages.dev

View logs