[{"_1":2,"_168":-5,"_169":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","e3ca0a77ab07ff2ce3097208ffd6aa0e378d3c47","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_148":149,"_165":166,"_167":-5},"handle","find","name","Cards","path","main.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":113,"_114":115,"_116":-5,"_117":32,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_147":20},"id","c3fcebf4-27a9-11f0-9edc-569c3dd06744","createdAt",["D",1746227053955],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","d8ee5940-0bc4-11f0-9ea8-131e1a253787","pinnedFileId","c3fff8d0-27a9-11f0-9edc-569c3dd06744","pinPreview",true,"screenshotVersion","likeCount","2100f5fd-46c8-4777-bfe8-c96e736faf1a","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ1d1Z2eWF1cUlob3ZCMkVlejJOREtLV1hGcSJ9","org",{"_93":94,"_133":130},"avatar","branch",{"_136":137,"_95":43,"_101":138,"_139":102,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},"version",2,"c3fd2f9c-27a9-11f0-9edc-569c3dd06744","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":150,"_95":98,"_151":113,"_152":-5,"_153":138,"_154":137,"_155":115,"_103":156,"_136":157,"_158":159,"_160":161,"_162":20,"_163":-5,"_97":164},"c40bf202-27a9-11f0-9edc-569c3dd06744","fileId","parentId","branchId","branchVersion","latest",["D",1743673643899],1,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport * as Chakra from \"https://esm.sh/@chakra-ui/react@2.8.0\";\nimport { ChakraProvider, extendTheme, useToast } from \"https://esm.sh/@chakra-ui/react@2.8.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// --- Constants ---\nconst LOCAL_STORAGE_KEY = \"professionalCardGradingResults_v2\";\nconst GRADE_COLORS = {\n A: \"#1e7e45\", // Deep green for A grades (9+)\n B: \"#1e5d8d\", // Deep blue for B grades (7-8.9)\n C: \"#ca9e24\", // Deep gold for C grades (5-6.9)\n D: \"#b35817\", // Deep orange for D grades (3-4.9)\n F: \"#a7231e\", // Deep red for F grades (<3)\n};\n\n// --- Custom Theme ---\nconst theme = extendTheme({\n styles: {\n global: {\n body: {\n bg: \"gray.50\",\n color: \"gray.800\",\n },\n // Keyframes for animations\n \"@keyframes scale-in\": {\n \"0%\": { transform: \"scale(0.5)\", opacity: 0 },\n \"100%\": { transform: \"scale(1)\", opacity: 1 },\n },\n \"@keyframes fade-out\": {\n \"0%\": { opacity: 1 },\n \"100%\": { opacity: 0 },\n },\n },\n },\n colors: {\n brand: {\n 50: \"#e6f1ff\",\n 100: \"#b9d8ff\",\n 500: \"#0066cc\",\n 600: \"#0052a3\",\n 700: \"#003d7a\",\n },\n },\n components: {\n Button: {\n variants: {\n solid: (props) => ({\n bg: props.colorScheme === \"brand\" ? \"brand.500\" : undefined,\n color: props.colorScheme === \"brand\" ? \"white\" : undefined,\n _hover: {\n bg: props.colorScheme === \"brand\" ? \"brand.600\" : undefined,\n },\n }),\n outline: (props) => ({\n borderColor: props.colorScheme === \"brand\" ? \"brand.500\" : undefined,\n color: props.colorScheme === \"brand\" ? \"brand.500\" : undefined,\n }),\n danger: {\n bg: \"red.500\",\n color: \"white\",\n _hover: {\n bg: \"red.600\",\n },\n },\n },\n },\n },\n});\n\n// --- Helper Functions ---\nconst generateTimestamp = () => {\n try {\n // Attempt to use a specific timezone, fall back if Intl fails\n return new Date().toLocaleString(\"en-US\", { timeZone: \"America/Phoenix\" });\n } catch (e) {\n console.warn(\"Intl timezone formatting failed, using local time.\", e);\n return new Date().toLocaleString();\n }\n};\n\nconst getGradeColor = (grade) => {\n if (typeof grade === \"number\") {\n if (grade >= 9) return GRADE_COLORS.A;\n if (grade >= 7) return GRADE_COLORS.B;\n if (grade >= 5) return GRADE_COLORS.C;\n if (grade >= 3) return GRADE_COLORS.D;\n return GRADE_COLORS.F;\n }\n\n // Handle string grades (e.g., \"8.0\", \"A\", \"PSA 8\")\n const gradeStr = String(grade).trim().toUpperCase();\n const numericMatch = gradeStr.match(/(\\d+(\\.\\d+)?)/);\n if (numericMatch) {\n return getGradeColor(parseFloat(numericMatch[1]));\n }\n const letterMatch = gradeStr.match(/([A-F])/);\n if (letterMatch) {\n return GRADE_COLORS[letterMatch[1]] || GRADE_COLORS.C;\n }\n\n return GRADE_COLORS.C; // Default color\n};\n\n// --- Grade Reveal Component ---\nconst GradeRevealOverlay = ({ startSignal, gradeData, onComplete }) => {\n const [phase, setPhase] = useState(\"idle\");\n const [score, setScore] = useState(0);\n const [progress, setProgress] = useState(0);\n const [displayGrade, setDisplayGrade] = useState(\"?\");\n const [gradeColor, setGradeColor] = useState(GRADE_COLORS.C);\n\n // Config\n const analysisDuration = 3000;\n const scoreMax = 10000;\n const revealDuration = 1200;\n const fadeDuration = 800;\n const summaryDuration = 2000;\n\n // Extract grade\n const targetGrade = gradeData?.estimatedGrade?.grade || \"N/A\";\n const gradeValueMatch = String(targetGrade).match(/(\\d+(\\.\\d+)?)|([A-F])/i);\n const gradeForDisplay = gradeValueMatch\n ? gradeValueMatch[1] ? gradeValueMatch[1] : gradeValueMatch[3].toUpperCase()\n : \"?\";\n\n // Handle animation phases\n useEffect(() => {\n if (startSignal > 0 && phase === \"idle\") {\n setScore(0);\n setProgress(0);\n setDisplayGrade(\"?\");\n setGradeColor(GRADE_COLORS.C);\n setPhase(\"analyzing\");\n }\n }, [startSignal, phase]);\n\n useEffect(() => {\n let scoreInterval, analysisTimeout, revealTimeout, fadeTimeout, summaryTimeout;\n\n const clearTimers = () => {\n clearInterval(scoreInterval);\n clearTimeout(analysisTimeout);\n clearTimeout(revealTimeout);\n clearTimeout(fadeTimeout);\n clearTimeout(summaryTimeout);\n };\n\n if (phase === \"analyzing\") {\n // Start progress bar animation immediately\n requestAnimationFrame(() => setProgress(100));\n\n const scoreIncrement = Math.max(1, scoreMax / (analysisDuration / 50)); // ~60 updates\n\n scoreInterval = setInterval(() => {\n setScore(cs => {\n const nextScore = cs + scoreIncrement;\n if (nextScore >= scoreMax) {\n clearInterval(scoreInterval);\n return scoreMax;\n }\n return Math.min(nextScore, scoreMax); // Ensure it doesn't exceed max\n });\n }, 50); // Update score every 50ms\n\n analysisTimeout = setTimeout(() => {\n setScore(scoreMax); // Ensure it reaches max\n clearInterval(scoreInterval);\n setPhase(\"revealing\");\n }, analysisDuration);\n } else if (phase === \"revealing\") {\n setDisplayGrade(gradeForDisplay);\n setGradeColor(getGradeColor(gradeForDisplay));\n\n revealTimeout = setTimeout(() => {\n setPhase(\"fading\");\n }, revealDuration);\n } else if (phase === \"fading\") {\n fadeTimeout = setTimeout(() => {\n setPhase(\"summary\");\n }, fadeDuration);\n } else if (phase === \"summary\") {\n summaryTimeout = setTimeout(() => {\n setPhase(\"finished\");\n onComplete && onComplete();\n }, summaryDuration);\n }\n\n return clearTimers; // Cleanup function\n }, [phase, gradeForDisplay, onComplete, analysisDuration, revealDuration, fadeDuration, summaryDuration]);\n\n if (phase === \"idle\" || phase === \"finished\") return null;\n\n return (\n {}} isCentered size=\"xl\">\n \n \n {phase === \"analyzing\" && (\n \n Analyzing Card Condition\n \n \n Analyzing surface quality...\n \n {Math.round(score / 2)}\n \n \n Evaluating corners & edges...\n \n {Math.round(score / 3)}\n \n \n Measuring centering...\n \n {Math.round(score / 4)}\n \n \n div\": {\n transition: `width ${analysisDuration / 1000}s ease-in-out`,\n },\n }}\n isAnimated={phase === \"analyzing\"}\n hasStripe\n />\n \n Please wait while we evaluate your card...\n \n \n )}\n\n {(phase === \"revealing\" || phase === \"fading\") && (\n \n \n {displayGrade}\n \n \n )}\n\n {phase === \"summary\" && (\n \n Evaluation Complete\n \n Grade: {targetGrade}\n \n \n Your detailed evaluation report is being prepared...\n \n )}\n \n \n );\n};\n\n// --- Main App Component ---\nconst ProfessionalCardGrader = () => {\n const [imageFile, setImageFile] = useState(null);\n const [imageBase64, setImageBase64] = useState(null);\n const [gradingResult, setGradingResult] = useState(null);\n const [pastResults, setPastResults] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [isRevealingGrade, setIsRevealingGrade] = useState(false);\n const [pendingReportData, setPendingReportData] = useState(null);\n const [revealTrigger, setRevealTrigger] = useState(0); // Used to signal GradeRevealOverlay\n const [activeTab, setActiveTab] = useState(0); // Use index for Chakra Tabs\n const [isMobile, setIsMobile] = useState(false);\n const [isComparing, setIsComparing] = useState(false);\n const [compareItems, setCompareItems] = useState([]); // Array of past result objects\n\n const fileInputRef = useRef(null);\n const toast = useToast();\n\n // Check device size\n useEffect(() => {\n const checkSize = () => setIsMobile(window.innerWidth < 768);\n checkSize();\n window.addEventListener(\"resize\", checkSize);\n return () => window.removeEventListener(\"resize\", checkSize);\n }, []);\n\n // Load past results from localStorage\n useEffect(() => {\n try {\n const storedResults = localStorage.getItem(LOCAL_STORAGE_KEY);\n if (storedResults) setPastResults(JSON.parse(storedResults));\n } catch (e) {\n console.error(\"Failed to load past results:\", e);\n setError(\"Could not load your previous grading history.\");\n toast({\n title: \"History Error\",\n description: \"Could not load previous results.\",\n status: \"error\",\n duration: 3000,\n });\n }\n }, [toast]); // Added toast dependency\n\n // Save result to localStorage when gradingResult changes and reveal is not active\n useEffect(() => {\n // Only save if gradingResult is new, has a timestamp, and we are not currently revealing\n if (gradingResult && gradingResult.timestamp && !isRevealingGrade && pendingReportData === null) {\n try {\n // Check if this specific result (by timestamp and name) already exists\n const exists = pastResults.some(pr =>\n pr.timestamp === gradingResult.timestamp && pr.cardName === gradingResult.cardName\n );\n\n if (!exists) {\n const updatedResults = [gradingResult, ...pastResults].slice(0, 100); // Limit history size\n setPastResults(updatedResults);\n localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(updatedResults));\n toast({\n title: \"Report Saved\",\n description: \"This card evaluation has been added to your history.\",\n status: \"success\",\n duration: 3000,\n isClosable: true,\n position: \"top-right\",\n });\n }\n } catch (e) {\n console.error(\"Failed to save result:\", e);\n toast({\n title: \"Save Error\",\n description: \"Could not save this result to history.\",\n status: \"error\",\n duration: 3000,\n });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [gradingResult, isRevealingGrade, pendingReportData, toast]); // Dependencies for saving logic\n\n const handleFileChange = (event) => {\n const file = event.target.files[0];\n processFile(file);\n };\n\n const handleDrop = (e) => {\n e.preventDefault();\n e.stopPropagation();\n e.currentTarget.style.borderColor = \"gray.300\"; // Reset border style\n\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n const file = e.dataTransfer.files[0];\n processFile(file);\n }\n };\n\n const handleDragOver = (e) => {\n e.preventDefault();\n e.stopPropagation();\n e.currentTarget.style.borderColor = \"brand.500\"; // Highlight border on drag over\n };\n\n const handleDragLeave = (e) => {\n e.preventDefault();\n e.stopPropagation();\n e.currentTarget.style.borderColor = \"gray.300\"; // Reset border style\n };\n\n const processFile = (file) => {\n if (file && file.type.startsWith(\"image/\")) {\n setError(null);\n setGradingResult(null); // Clear previous result\n setIsRevealingGrade(false);\n setPendingReportData(null);\n setImageFile(file); // Keep the file object if needed later\n\n const reader = new FileReader();\n reader.onloadend = () => {\n setImageBase64(reader.result);\n // Optionally switch tab back to upload/preview if needed\n setActiveTab(0);\n };\n reader.onerror = (error) => {\n console.error(\"File reading error:\", error);\n setError(\"Unable to read image file. Please try again.\");\n toast({\n title: \"File Error\",\n description: \"Could not read the selected image file.\",\n status: \"error\",\n duration: 4000,\n isClosable: true,\n });\n setImageBase64(null);\n setImageFile(null);\n };\n reader.readAsDataURL(file);\n } else if (file) { // If a file was selected/dropped but wasn't an image\n setError(\"Please select a valid image file (JPG, PNG, WEBP, etc.).\");\n toast({\n title: \"Invalid File Type\",\n description: \"Only image files are accepted.\",\n status: \"warning\",\n duration: 4000,\n isClosable: true,\n });\n setImageBase64(null);\n setImageFile(null);\n }\n };\n\n const handleGradeRequest = useCallback(async () => {\n if (!imageBase64 || isLoading || isRevealingGrade) return;\n\n setIsLoading(true);\n setError(null);\n setGradingResult(null); // Clear previous result before starting\n setIsRevealingGrade(false);\n setPendingReportData(null);\n\n try {\n // Ensure we have the base64 data part\n const base64Data = imageBase64.split(\",\")[1];\n if (!base64Data) {\n throw new Error(\"Could not extract image data for processing.\");\n }\n\n // --- Mock API Response ---\n // In a real app, this section would involve a fetch call.\n // The mock data structure should align with what renderReport expects.\n const mockGradingReport = {\n cardDetails: {\n name: imageFile?.name.split(\".\")[0] || \"Uploaded Card\", // Use filename or default\n set: \"Unknown Set\", // Could be identified by AI later\n year: new Date().getFullYear().toString(), // Default to current year\n },\n condition: {\n centering: {\n score: (Math.random() * 3 + 7).toFixed(1),\n comment: \"Slightly off-center left to right (60/40), but good top to bottom.\",\n }, // Random score 7-10\n corners: {\n score: (Math.random() * 4 + 6).toFixed(1),\n comment: \"Minor wear visible on top-right and bottom-left corners.\",\n }, // Random score 6-10\n edges: {\n score: (Math.random() * 3 + 7).toFixed(1),\n comment: \"Light edge wear present, particularly on right side.\",\n }, // Random score 7-10\n surfaceFront: {\n score: (Math.random() * 2 + 8).toFixed(1),\n comment: \"Clean overall with minimal print dots.\",\n }, // Random score 8-10\n surfaceBack: {\n score: (Math.random() * 3 + 6.5).toFixed(1),\n comment: \"Some light surface wear consistent with handling.\",\n }, // Random score 6.5-9.5\n color: { score: (Math.random() * 1 + 9).toFixed(1), comment: \"Vibrant colors with excellent saturation.\" }, // Random score 9-10\n printQuality: {\n score: (Math.random() * 2 + 8).toFixed(1),\n comment: \"Well-registered printing with clean lines.\",\n }, // Random score 8-10\n },\n estimatedGrade: {\n grade: (Math.random() * 4 + 6).toFixed(1), // Random overall grade 6.0-10.0\n confidence: Math.random() > 0.5 ? \"High\" : \"Medium\",\n equivalent: \"Comparable to PSA/BGS/CGC\", // Generic equivalent\n },\n estimatedPrice: {\n range: `$${Math.floor(Math.random() * 500 + 50)} - $${Math.floor(Math.random() * 1000 + 600)}`, // Random price range\n condition: \"Near Mint (Estimated)\",\n marketTrend: Math.random() > 0.3 ? \"Stable\" : (Math.random() > 0.5 ? \"Slightly Up\" : \"Slightly Down\"),\n },\n rarityInvestment: {\n rarity: \"Varies (Requires Identification)\",\n investmentPotential: Math.random() > 0.4 ? \"Moderate to Strong\" : \"Speculative\",\n marketNotes: \"Market value depends heavily on specific card identification and authenticated grade.\",\n },\n summary:\n \"This card shows characteristics typical of a Near Mint grade, with potential variations based on subtle condition factors not fully captured by automated analysis. Centering appears reasonable, while edges and corners show minor signs of wear. Surface is generally clean.\",\n notes:\n \"Final grade and value require verification by a professional grading service and specific card identification. This report is an estimate based on image analysis.\",\n timestamp: generateTimestamp(),\n imagePreview: imageBase64, // Include the preview image in the report\n cardName: imageFile?.name.split(\".\")[0] || \"Uploaded Card\", // For easier identification in history\n };\n // --- End Mock API Response ---\n\n // Simulate API call delay\n await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 1000)); // 2-3 seconds delay\n\n // Check for simulated API error randomly\n // if (Math.random() < 0.15) { // 15% chance of error\n // throw new Error(\"Simulated API Error: Could not process the image.\");\n // }\n\n /*\n // --- Real API Call Example ---\n const response = await fetch(\"/api/grade-card\", { // Your API endpoint\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ imageBase64: base64Data }),\n });\n\n if (!response.ok) {\n let errorMsg = `API Error: ${response.status} ${response.statusText}`;\n try {\n const errData = await response.json();\n errorMsg = errData.error || errorMsg; // Use specific error from API if available\n } catch {\n // Response wasn't JSON, use the status text\n }\n throw new Error(errorMsg);\n }\n\n const data = await response.json();\n if (data.error) { // Check for application-level errors in response\n throw new Error(data.error);\n }\n // Assuming 'data' is the grading report object\n const reportData = { ...data, timestamp: generateTimestamp(), imagePreview: imageBase64 };\n // --- End Real API Call ---\n */\n\n // If successful (using mock data here):\n setPendingReportData(mockGradingReport); // Use mockGradingReport or reportData from API\n setIsLoading(false);\n setIsRevealingGrade(true);\n setRevealTrigger(prev => prev + 1); // Trigger the animation\n } catch (err) {\n console.error(\"Grading request failed:\", err);\n setError(`Analysis failed: ${err.message || \"An unknown error occurred.\"}`);\n setGradingResult(null); // Ensure no stale result is shown\n setIsLoading(false);\n setIsRevealingGrade(false);\n setPendingReportData(null);\n\n toast({\n title: \"Evaluation Failed\",\n description: err.message || \"Could not complete the card grading.\",\n status: \"error\",\n duration: 5000,\n isClosable: true,\n position: \"top-right\",\n });\n }\n }, [imageBase64, imageFile, isLoading, isRevealingGrade, toast]); // Added imageFile to dependencies\n\n const handleRevealComplete = useCallback(() => {\n setIsRevealingGrade(false);\n if (pendingReportData) {\n setGradingResult(pendingReportData); // Set the final result\n setPendingReportData(null); // Clear pending data\n setActiveTab(0); // Switch back to the main tab to show the report\n window.scrollTo(0, 0); // Scroll to top to see the report header\n }\n }, [pendingReportData]);\n\n const clearHistory = () => {\n if (window.confirm(\"Are you sure you want to delete your entire grading history? This action cannot be undone.\")) {\n try {\n localStorage.removeItem(LOCAL_STORAGE_KEY);\n setPastResults([]);\n // setCompareItems([]); // Also clear compare items if they came from history\n // setIsComparing(false);\n setError(null);\n toast({\n title: \"History Cleared\",\n description: \"Your card grading history has been successfully deleted.\",\n status: \"info\",\n duration: 3000,\n isClosable: true,\n });\n } catch (e) {\n console.error(\"Failed to clear localStorage:\", e);\n setError(\"Could not clear your grading history.\");\n toast({\n title: \"Error Clearing History\",\n description: \"Could not remove grading history data.\",\n status: \"error\",\n duration: 3000,\n });\n }\n }\n };\n\n const viewPastResult = (result) => {\n setImageBase64(result.imagePreview); // Show the image associated with the past result\n setGradingResult(result); // Display the report data\n setError(null);\n setImageFile(null); // Clear any currently selected file\n setIsRevealingGrade(false); // Ensure reveal is off\n setPendingReportData(null); // Ensure pending is clear\n setActiveTab(0); // Switch to the upload/report tab\n setIsComparing(false); // Exit compare mode if active\n setCompareItems([]); // Clear comparison selection\n window.scrollTo(0, 0);\n };\n\n const exportToPDF = () => {\n toast({\n title: \"Export Feature\",\n description: \"PDF export functionality is planned for a future update.\",\n status: \"info\",\n duration: 3000,\n isClosable: true,\n });\n // Placeholder for future implementation (e.g., using jsPDF or a backend service)\n };\n\n const toggleCompare = (result) => {\n setCompareItems(currentItems => {\n const isAlreadySelected = currentItems.some(item => item.timestamp === result.timestamp);\n if (isAlreadySelected) {\n // Remove item\n return currentItems.filter(item => item.timestamp !== result.timestamp);\n } else {\n // Add item if limit not reached\n if (currentItems.length < 3) {\n return [...currentItems, result];\n } else {\n toast({\n title: \"Compare Limit Reached\",\n description: \"You can compare up to 3 cards at once.\",\n status: \"warning\",\n duration: 3000,\n isClosable: true,\n });\n return currentItems; // Return unchanged list\n }\n }\n });\n };\n\n const startCompare = () => {\n if (compareItems.length >= 2) {\n setIsComparing(true);\n setActiveTab(2); // Assuming Compare tab is index 2\n } else {\n toast({\n title: \"Not Enough Cards\",\n description: \"Select at least 2 cards from your history to compare.\",\n status: \"warning\",\n duration: 3000,\n isClosable: true,\n });\n }\n };\n\n const cancelCompare = () => {\n setIsComparing(false);\n // Optionally clear compareItems or keep them selected for next time\n // setCompareItems([]);\n setActiveTab(1); // Go back to History tab\n };\n\n // --- Render Functions ---\n\n // Renders the detailed report for a single card\n const renderReport = (report) => {\n if (!report) return null;\n\n const overallGrade = report.estimatedGrade?.grade || \"N/A\";\n const gradeColor = getGradeColor(overallGrade); // Use helper function for consistency\n\n const renderGradeItem = (title, data) => {\n if (!data?.score) return null; // Don't render if no score data\n\n const itemGradeColor = getGradeColor(data.score);\n\n return (\n \n \n {title}\n \n {data.score}/10\n \n \n {data.comment && {data.comment}}\n \n );\n };\n\n return (\n \n {/* --- Report Header --- */}\n \n {/* Card Details */}\n \n \n {report.cardDetails?.name || \"Card Evaluation\"}\n \n \n {report.cardDetails?.set} {report.cardDetails?.year ? `(${report.cardDetails.year})` : \"\"}\n \n \n Evaluated on: {report.timestamp}\n \n }\n >\n Export Report (PDF)\n \n \n\n {/* Overall Grade Display */}\n \n \n Overall Grade\n \n \n {overallGrade}\n \n {report.estimatedGrade?.equivalent && (\n \n {report.estimatedGrade.equivalent}\n \n )}\n {report.estimatedGrade?.confidence && (\n \n Confidence: {report.estimatedGrade.confidence}\n \n )}\n \n \n\n {/* --- Report Body --- */}\n \n {/* Left Column: Condition Analysis */}\n \n Condition Analysis\n {renderGradeItem(\"Centering\", report.condition?.centering)}\n {renderGradeItem(\"Corners\", report.condition?.corners)}\n {renderGradeItem(\"Edges\", report.condition?.edges)}\n {renderGradeItem(\"Surface (Front)\", report.condition?.surfaceFront)}\n {renderGradeItem(\"Surface (Back)\", report.condition?.surfaceBack)}\n {renderGradeItem(\"Color\", report.condition?.color)}\n {renderGradeItem(\"Print Quality\", report.condition?.printQuality)}\n \n\n {/* Right Column: Market & Investment */}\n \n Market & Investment\n\n {/* Estimated Price Box */}\n \n \n Estimated Value\n \n \n \n {report.estimatedPrice?.range || \"Value Undetermined\"}\n \n {report.estimatedPrice?.condition && (\n \n Based on Condition: {report.estimatedPrice.condition}\n \n )}\n {report.estimatedPrice?.marketTrend && (\n \n Market Trend: {report.estimatedPrice.marketTrend}\n \n )}\n \n\n {/* Rarity & Investment Box */}\n \n \n Rarity & Investment\n \n \n {report.rarityInvestment?.rarity && (\n \n Rarity: {report.rarityInvestment.rarity}\n \n )}\n {report.rarityInvestment?.investmentPotential && (\n \n Investment Potential: {report.rarityInvestment.investmentPotential}\n \n )}\n {report.rarityInvestment?.marketNotes && (\n \n Notes: {report.rarityInvestment.marketNotes}\n \n )}\n \n \n \n\n {/* --- Report Footer: Summary & Notes --- */}\n \n Evaluation Summary\n \n {report.summary || \"No summary provided.\"}\n \n\n {report.notes && (\n <>\n Additional Notes\n \n {report.notes}\n \n \n )}\n \n // End of main report container\n );\n };\n\n // Renders the comparison table view\n const renderComparisonView = () => {\n if (!isComparing || compareItems.length < 2)\n return (\n \n Select 2 or 3 cards from your history to compare.\n \n );\n\n return (\n \n \n Card Comparison\n \n Exit Comparison\n \n \n\n \n {/* Ensure horizontal scroll on small screens */}\n \n \n \n Attribute {/* Minimum width for attribute column */}\n {compareItems.map((item, idx) => (\n \n {/* Minimum width for card columns */}\n \n \n \n {/* Allow two lines for name */}\n {item.cardName || `Card ${idx + 1}`}\n \n \n {item.cardDetails?.set}\n \n \n \n ))}\n \n \n \n {/* Overall Grade */}\n \n Overall Grade\n {compareItems.map((item, idx) => (\n \n \n {item.estimatedGrade?.grade || \"N/A\"}\n \n \n ))}\n \n\n {/* Condition Scores */}\n {[\"centering\", \"corners\", \"edges\", \"surfaceFront\", \"surfaceBack\", \"color\", \"printQuality\"].map(attr => (\n \n \n {/* Use medium weight */}\n {/* Nicer formatting for attribute names */}\n {attr.replace(/([A-Z])/g, \" $1\").replace(/^./, str => str.toUpperCase()).replace(\"Front\", \"(Front)\")\n .replace(\"Back\", \"(Back)\")}\n \n {compareItems.map((item, idx) => (\n \n {item.condition?.[attr]?.score\n ? (\n \n {item.condition[attr].score}/10\n \n )\n : -} {/* Use dash for missing data */}\n \n ))}\n \n ))}\n\n {/* Estimated Value */}\n \n Estimated Value\n {compareItems.map((item, idx) => (\n \n {item.estimatedPrice?.range\n ? {item.estimatedPrice.range}\n : -}\n \n ))}\n \n\n {/* Investment Potential */}\n \n Investment Potential\n {compareItems.map((item, idx) => (\n \n {item.rarityInvestment?.investmentPotential\n ? (\n \n {item.rarityInvestment.investmentPotential.split(\".\")[0]}\n // Show first part only if long\n )\n : -}\n \n ))}\n \n\n {/* Rarity */}\n \n Rarity\n {compareItems.map((item, idx) => (\n \n {item.rarityInvestment?.rarity\n ? {item.rarityInvestment.rarity}\n : -}\n \n ))}\n \n \n \n \n\n {/* Optional: Add a brief summary/comparison notes section */}\n \n Quick Comparison Notes\n \n {compareItems.map((item, idx) => (\n \n {item.cardName || `Card ${idx + 1}`}: Grade{\" \"}\n {item.estimatedGrade?.grade || \"N/A\"}, Value {item.estimatedPrice?.range || \"N/A\"}\n \n ))}\n \n {/* Add more sophisticated comparison logic if needed */}\n \n \n );\n };\n\n // Renders the History tab content\n const renderHistory = () => {\n return (\n \n \n Grading History\n \n }\n >\n Compare ({compareItems.length})\n \n \n Clear History\n \n \n \n\n {error && (\n \n \n {error}\n \n )}\n\n {pastResults.length === 0\n ? (\n \n No grading history found. Grade a card to start!\n \n )\n : (\n \n {pastResults.map((result, index) => (\n item.timestamp === result.timestamp) ? \"blue.50\" : \"white\"} // Highlight if selected for compare\n _hover={{ shadow: \"sm\", borderColor: \"gray.300\" }}\n transition=\"all 0.2s\"\n >\n \n {/* Flex basis 0 allows shrinking */}\n \n \n {/* Flex basis 0 */}\n \n {result.cardName || \"Evaluated Card\"}\n \n \n Grade: {result.estimatedGrade?.grade || \"N/A\"}\n \n {result.timestamp}\n \n \n \n item.timestamp === result.timestamp)}\n onChange={() => toggleCompare(result)}\n colorScheme=\"blue\"\n size=\"lg\" // Make checkbox easier to click\n mr={isMobile ? 0 : 2}\n mb={isMobile ? 2 : 0}\n isDisabled={isComparing} // Disable checkbox when comparison view is active\n >\n {isMobile ? \"\" : \"Compare\"}\n \n viewPastResult(result)}\n >\n View\n \n \n \n ))}\n \n )}\n \n );\n };\n\n // --- Main Application Layout ---\n return (\n \n \n Professional Card Grader AI Beta\n \n\n setActiveTab(index)}\n variant=\"soft-rounded\"\n colorScheme=\"brand\"\n isLazy\n >\n \n Grade Card\n History ({pastResults.length})\n Compare ({compareItems.length})\n \n\n \n {/* Tab 1: Upload & Grade */}\n \n \n {/* Left Column: Upload */}\n \n Upload Card Image\n fileInputRef.current?.click()}\n mb={4}\n >\n \n \n \n Drag & drop image here, or click to select\n PNG, JPG, WEBP accepted\n \n \n\n {imageBase64 && (\n \n Image Preview:\n \n {\n setImageBase64(null);\n setImageFile(null);\n setGradingResult(null);\n fileInputRef.current.value = null;\n }}\n >\n Clear Image\n \n \n )}\n\n }\n >\n Grade This Card\n \n\n {error && !isLoading && (\n \n \n {error}\n \n )}\n \n\n {/* Right Column: Report or Placeholder */}\n \n {gradingResult\n ? (\n renderReport(gradingResult)\n )\n : (\n \n \n \n Upload an image and click \"Grade This Card\".\n Your grading report will appear here.\n \n \n )}\n \n \n \n\n {/* Tab 2: History */}\n \n {renderHistory()}\n \n\n {/* Tab 3: Compare */}\n \n {renderComparisonView()}\n \n \n \n\n {/* Grade Reveal Animation Modal */}\n \n\n {/* Footer or additional info */}\n \n Disclaimer: AI grading provides an estimate. For definitive grades, consult professional grading services. App\n Version 2.1.\n \n // End main container\n );\n};\n\n// --- Icons (Simple Placeholder Icons) ---\n// In a real app, you'd likely use an icon library like react-icons\nconst Icon = (props) => ; // Basic icon wrapper\nconst UploadIcon = (props) => ⬆️; // Placeholder\nconst SparkleIcon = (props) => ✨; // Placeholder\nconst ReportIcon = (props) => 📄; // Placeholder\nconst DownloadIcon = (props) => 💾; // Placeholder\nconst DollarIcon = (props) => 💲; // Placeholder\nconst ChartIcon = (props) => 📈; // Placeholder\nconst CompareIcon = (props) => ⚖️; // Placeholder\n\n// --- App Initialization ---\nconst container = document.getElementById(\"root\");\nif (container) {\n const root = createRoot(container);\n root.render(\n \n \n \n \n ,\n );\n} else {\n console.error(\"Failed to find the root element.\");\n}","deleted","label",[98],"permalink","https://www.val.town/x/find/Cards/code/main.tsx","extension","actionData","errors"]