[V0_FILE]typescriptreact:file="alignment-chart.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { Search, X } from "lucide-react" interface Position { x: number y: number } interface ImageItem { id: string src: string position: Position isDragging: boolean loading?: boolean } export default function AlignmentChart() { const [images, setImages] = useState([]) const [username, setUsername] = useState("") const chartRef = useRef(null) const containerRef = useRef(null) const [activeDragId, setActiveDragId] = useState(null) const [offset, setOffset] = useState({ x: 0, y: 0 }) const [imageSize, setImageSize] = useState(80) // Default size, will be updated based on chart width const [chartSize, setChartSize] = useState({ width: 0, height: 0 }) const [isMobile, setIsMobile] = useState(false) // Detect mobile devices useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => { window.removeEventListener("resize", checkMobile) } }, []) // Prevent scrolling on mobile useEffect(() => { const handleTouchMove = (e: TouchEvent) => { // Only prevent default if we're not in an input field if (e.target instanceof HTMLElement && e.target.tagName !== "INPUT" && !e.target.closest(".scrollable")) { e.preventDefault() } } document.addEventListener("touchmove", handleTouchMove, { passive: false }) // Set body overflow to hidden document.body.style.overflow = "hidden" return () => { document.removeEventListener("touchmove", handleTouchMove) document.body.style.overflow = "" } }, []) // Update chart size to fit the screen useEffect(() => { const updateChartSize = () => { if (containerRef.current && chartRef.current) { // Get viewport dimensions const viewportHeight = window.innerHeight const viewportWidth = window.innerWidth const isMobileView = viewportWidth < 768 // Reserve space for input and padding (adjusted for mobile) const reservedVerticalSpace = isMobileView ? 120 : 140 const topPadding = isMobileView ? 20 : 0 // Add top padding for mobile const availableHeight = viewportHeight - reservedVerticalSpace - topPadding // Calculate available width (with padding) const horizontalPadding = isMobileView ? Math.max(50, viewportWidth * 0.1) // More padding on mobile: at least 50px or 10% of viewport : Math.max(20, viewportWidth * 0.05) // Desktop: at least 20px or 5% of viewport const availableWidth = viewportWidth - horizontalPadding * 2 // Determine chart size (square but constrained by available space) const size = Math.min(availableWidth, availableHeight) setChartSize({ width: size, height: size }) // Update image size based on new chart dimensions const newImageSize = Math.max(40, Math.min(80, size / 7.5)) setImageSize(newImageSize) } } // Set up ResizeObserver to monitor container size changes if (containerRef.current) { const resizeObserver = new ResizeObserver(() => { updateChartSize() }) resizeObserver.observe(containerRef.current) // Initial size calculation updateChartSize() return () => { if (containerRef.current) { resizeObserver.unobserve(containerRef.current) } resizeObserver.disconnect() } } // Fallback for window resize window.addEventListener("resize", updateChartSize) return () => window.removeEventListener("resize", updateChartSize) }, []) // Generate random position within chart bounds const getRandomPosition = () => { if (!chartRef.current) { return { x: 50, y: 50 } // Default fallback } const chartWidth = chartSize.width const chartHeight = chartSize.height // Add padding to ensure images aren't placed too close to the edges const padding = imageSize / 2 // Generate random coordinates within the chart bounds const x = Math.floor(Math.random() * (chartWidth - imageSize - padding * 2)) + padding const y = Math.floor(Math.random() * (chartHeight - imageSize - padding * 2)) + padding return { x, y } } // Function to load an image and return a promise const loadImage = (url: string): Promise => { return new Promise((resolve, reject) => { const img = new Image() img.crossOrigin = "anonymous" const timeout = setTimeout(() => { reject(new Error("Image load timeout")) }, 5000) img.onload = () => { clearTimeout(timeout) resolve(img) } img.onerror = () => { clearTimeout(timeout) reject(new Error("Image load error")) } img.src = url }) } // Generate a profile image when a username is submitted const handleAddImage = async () => { if (!username.trim()) return // Clean the username (remove @ if user already included it) const cleanUsername = username.trim().replace(/^@/, "") // Get random position for the new image const randomPosition = getRandomPosition() // Create a temporary image with loading state const tempImageId = `image-${Date.now()}` const tempImage: ImageItem = { id: tempImageId, src: `/placeholder.svg?height=100&width=100&text=Loading...`, position: randomPosition, isDragging: false, loading: true, } setImages((prev) => [...prev, tempImage]) setUsername("") // Try both URL formats const withAtUrl = `https://unavatar.io/x/@${cleanUsername}` const withoutAtUrl = `https://unavatar.io/x/${cleanUsername}` // Default to without @ URL let finalUrl = withoutAtUrl // Create an invisible div to hold the images for analysis const analysisDiv = document.createElement("div") analysisDiv.style.position = "absolute" analysisDiv.style.visibility = "hidden" analysisDiv.style.pointerEvents = "none" document.body.appendChild(analysisDiv) try { // Try to load both images const withAtImg = document.createElement("img") const withoutAtImg = document.createElement("img") withAtImg.crossOrigin = "anonymous" withoutAtImg.crossOrigin = "anonymous" // Set up load handlers const withAtPromise = new Promise((resolve) => { withAtImg.onload = () => resolve() withAtImg.onerror = () => resolve() // Resolve even on error setTimeout(() => resolve(), 3000) // Timeout fallback }) const withoutAtPromise = new Promise((resolve) => { withoutAtImg.onload = () => resolve() withoutAtImg.onerror = () => resolve() // Resolve even on error setTimeout(() => resolve(), 3000) // Timeout fallback }) // Start loading both images withAtImg.src = withAtUrl withoutAtImg.src = withoutAtUrl // Add images to the analysis div analysisDiv.appendChild(withAtImg) analysisDiv.appendChild(withoutAtImg) // Wait for both images to load or timeout await Promise.all([withAtPromise, withoutAtPromise]) // Create canvases for analysis const withAtCanvas = document.createElement("canvas") const withoutAtCanvas = document.createElement("canvas") // Function to safely analyze an image by counting unique colors const analyzeColorfulness = (img: HTMLImageElement, canvas: HTMLCanvasElement): number => { try { if (!img.complete || img.naturalWidth === 0) { return 0 // Image didn't load properly } const ctx = canvas.getContext("2d") if (!ctx) return 0 // Set canvas size canvas.width = img.naturalWidth canvas.height = img.naturalHeight // Draw image on canvas ctx.drawImage(img, 0, 0) // Sample pixels to count unique colors const sampleSize = 20 // Increase sample size for better coverage const uniqueColors = new Set() for (let y = 0; y < sampleSize; y++) { for (let x = 0; x < sampleSize; x++) { const sampleX = Math.floor((x / sampleSize) * canvas.width) const sampleY = Math.floor((y / sampleSize) * canvas.height) try { const data = ctx.getImageData(sampleX, sampleY, 1, 1).data const r = data[0] const g = data[1] const b = data[2] // Create a string representation of the color const colorKey = `${r},${g},${b}` uniqueColors.add(colorKey) } catch (error) { // Ignore errors for individual pixels } } } // Return the number of unique colors found return uniqueColors.size } catch (error) { // If any error occurs, return 0 return 0 } } // Analyze both images const withAtColorfulness = analyzeColorfulness(withAtImg, withAtCanvas) const withoutAtColorfulness = analyzeColorfulness(withoutAtImg, withoutAtCanvas) console.log("Unique colors count:", { withAt: withAtColorfulness, withoutAt: withoutAtColorfulness, }) // Choose the image with more unique colors if (withAtColorfulness > withoutAtColorfulness) { finalUrl = withAtUrl console.log("Using with @ URL (more unique colors)") } else { finalUrl = withoutAtUrl console.log("Using without @ URL (more unique colors or equal)") } } catch (error) { console.error("Error analyzing images:", error) // On error, use the default URL } finally { // Clean up if (analysisDiv && analysisDiv.parentNode) { document.body.removeChild(analysisDiv) } // Update the image with the final URL setImages((prev) => prev.map((img) => (img.id === tempImageId ? { ...img, src: finalUrl, loading: false } : img))) } } // Handle mouse down on an image const handleMouseDown = (e: React.MouseEvent, id: string) => { e.preventDefault() // Find the image const image = images.find((img) => img.id === id) if (!image || image.loading) return // Calculate the offset from the mouse position to the image position const rect = (e.target as HTMLElement).getBoundingClientRect() setOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) // Set the image as dragging setActiveDragId(id) // Update the image state setImages(images.map((img) => (img.id === id ? { ...img, isDragging: true } : img))) } // Handle touch start on an image (for mobile) const handleTouchStart = (e: React.TouchEvent, id: string) => { // Find the image const image = images.find((img) => img.id === id) if (!image || image.loading) return // Get the first touch const touch = e.touches[0] // Calculate the offset from the touch position to the image position const rect = (e.target as HTMLElement).getBoundingClientRect() setOffset({ x: touch.clientX - rect.left, y: touch.clientY - rect.top, }) // Set the image as dragging setActiveDragId(id) // Update the image state setImages(images.map((img) => (img.id === id ? { ...img, isDragging: true } : img))) } // Handle mouse move const handleMouseMove = (e: MouseEvent) => { if (!activeDragId || !chartRef.current) return // Get the chart bounds const chartRect = chartRef.current.getBoundingClientRect() // Calculate the new position relative to the chart const x = e.clientX - chartRect.left - offset.x const y = e.clientY - chartRect.top - offset.y // Update the image position setImages( images.map((img) => img.id === activeDragId ? { ...img, position: { x: Math.max(0, Math.min(x, chartRect.width - imageSize)), y: Math.max(0, Math.min(y, chartRect.height - imageSize)), }, } : img, ), ) } // Handle touch move (for mobile) const handleTouchMove = (e: TouchEvent) => { if (!activeDragId || !chartRef.current) return // Prevent default to stop scrolling while dragging e.preventDefault() // Get the first touch const touch = e.touches[0] // Get the chart bounds const chartRect = chartRef.current.getBoundingClientRect() // Calculate the new position relative to the chart const x = touch.clientX - chartRect.left - offset.x const y = touch.clientY - chartRect.top - offset.y // Update the image position setImages( images.map((img) => img.id === activeDragId ? { ...img, position: { x: Math.max(0, Math.min(x, chartRect.width - imageSize)), y: Math.max(0, Math.min(y, chartRect.height - imageSize)), }, } : img, ), ) } // Handle mouse up const handleMouseUp = () => { if (!activeDragId) return // Set the image as not dragging setImages(images.map((img) => (img.id === activeDragId ? { ...img, isDragging: false } : img))) // Reset the active drag setActiveDragId(null) } // Handle touch end (for mobile) const handleTouchEnd = () => { if (!activeDragId) return // Set the image as not dragging setImages(images.map((img) => (img.id === activeDragId ? { ...img, isDragging: false } : img))) // Reset the active drag setActiveDragId(null) } // Remove an image const handleRemoveImage = (id: string) => { setImages(images.filter((img) => img.id !== id)) } // Add event listeners for mouse/touch move and mouse/touch up useEffect(() => { if (activeDragId) { // Mouse events window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) // Touch events for mobile window.addEventListener("touchmove", handleTouchMove, { passive: false }) window.addEventListener("touchend", handleTouchEnd) window.addEventListener("touchcancel", handleTouchEnd) } return () => { // Remove mouse events window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) // Remove touch events window.removeEventListener("touchmove", handleTouchMove) window.removeEventListener("touchend", handleTouchEnd) window.removeEventListener("touchcancel", handleTouchEnd) } }, [activeDragId, images, offset, imageSize]) return (

{/* Axis Labels */}

Good

Evil

Lawful

Chaotic

{/* Axes */}

{/* Draggable Images */} {images.map((img) => (

handleMouseDown(e, img.id)} onTouchStart={(e) => handleTouchStart(e, img.id)} >

{!img.loading && ( )}

))}

) }

About

Tags

Share

More from rauchg

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rauchg

More Templates Like This