FFXIV Completion Tracker

\n \n

Frontend is ready! JavaScript functionality coming in Phase 3...

\n \n \n\n`;\n\n return new Response(html, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",[],[100],{"_105":229,"_96":230,"_157":231,"_159":-5,"_160":142,"_161":232,"_163":22,"_107":233,"_101":32,"_165":178,"_167":234,"_168":22,"_169":-5,"_170":235,"_99":236},"d460dbe8-652c-11f0-9a97-0224a6c84d84","index.html","d460dcd8-652c-11f0-9a97-0224a6c84d84",16,["D",1752990366450],"\n\n\n \n \n FFXIV Completion Tracker\n \n\n\n

FFXIV Completion Tracker

\n \n

\n \n \n\n",[],[230],{"_105":238,"_96":239,"_157":240,"_159":-5,"_160":142,"_161":241,"_163":22,"_107":242,"_101":243,"_165":224,"_167":244,"_168":22,"_169":-5,"_170":245,"_99":246},"a868b6fa-652c-11f0-8f4b-0224a6c84d84","main.tsx","feec8e54-64da-11f0-b203-0224a6c84d84",14,["D",1752990292677],6,"// Cache storage for instance data\nlet cachedData = null;\nlet cacheTimestamp = null;\n\nexport default async function ffxivInstanceList(request: Request): Promise {\n // Set CORS headers for browser access\n const corsHeaders = {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Methods': 'GET, OPTIONS',\n 'Access-Control-Allow-Headers': 'Content-Type',\n 'Content-Type': 'application/json'\n };\n\n // Handle preflight OPTIONS request\n if (request.method === 'OPTIONS') {\n return new Response(null, { status: 200, headers: corsHeaders });\n }\n\n try {\n // Check if we have cached data that's less than 24 hours old\n const now = Date.now();\n const twentyFourHours = 24 * 60 * 60 * 1000; // 24 hours in milliseconds\n \n if (cachedData && cacheTimestamp && (now - cacheTimestamp) < twentyFourHours) {\n // Return cached data\n return new Response(JSON.stringify({\n ...cachedData,\n fromCache: true,\n cacheAge: Math.round((now - cacheTimestamp) / 1000 / 60) // age in minutes\n }), {\n status: 200,\n headers: corsHeaders\n });\n }\n // Initialize array to collect all instances\n const allInstances = [];\n \n // Base URL with required columns\n const baseUrl = 'https://xivapi.com/instancecontent?columns=ID,Name,ContentType.Name,ContentFinderCondition.Name,ContentFinderCondition.ClassJobLevelRequired,UnlockQuest.Name';\n \n let currentPage = 1;\n let hasNextPage = true;\n \n // Loop through all pages to collect instances\n while (hasNextPage) {\n const url = `${baseUrl}&page=${currentPage}`;\n const response = await fetch(url);\n \n if (!response.ok) {\n throw new Error(`XIVAPI request failed: ${response.status}`);\n }\n \n const data = await response.json();\n \n // Add results to our collection\n allInstances.push(...data.Results);\n \n // Check if there's a next page\n hasNextPage = data.Pagination.PageNext !== null;\n currentPage++;\n }\n\n // Define expansion mapping based on instance level requirements\n const getExpansionByLevel = (level) => {\n if (level <= 50) return 'A Realm Reborn';\n if (level <= 60) return 'Heavensward';\n if (level <= 70) return 'Stormblood';\n if (level <= 80) return 'Shadowbringers';\n if (level <= 90) return 'Endwalker';\n if (level <= 100) return 'Dawntrail';\n return 'Unknown';\n };\n\n // Group instances by expansion\n const groupedInstances = {};\n \n allInstances.forEach(instance => {\n // Get level requirement from ContentFinderCondition if available\n const level = instance.ContentFinderCondition?.ClassJobLevelRequired || 50; // Default to 50 if unknown\n const expansion = getExpansionByLevel(level);\n \n if (!groupedInstances[expansion]) {\n groupedInstances[expansion] = {};\n }\n \n const contentType = instance.ContentType?.Name || 'Unknown';\n \n if (!groupedInstances[expansion][contentType]) {\n groupedInstances[expansion][contentType] = [];\n }\n \n groupedInstances[expansion][contentType].push({\n id: instance.ID,\n name: instance.Name,\n level: level,\n contentType: contentType,\n dutyName: instance.ContentFinderCondition?.Name || instance.Name,\n unlockQuest: instance.UnlockQuest?.Name || null\n });\n });\n\n // Create response data\n const responseData = {\n totalInstances: allInstances.length,\n lastUpdated: new Date().toISOString(),\n groupedData: groupedInstances,\n fromCache: false\n };\n\n // Update cache with fresh data\n cachedData = responseData;\n cacheTimestamp = Date.now();\n\n // Return grouped data with CORS headers\n return new Response(JSON.stringify(responseData), {\n status: 200,\n headers: corsHeaders\n });\n\n } catch (error) {\n return new Response(JSON.stringify({\n error: 'Failed to fetch instance data',\n message: error.message\n }), {\n status: 500,\n headers: corsHeaders\n });\n }\n}",[],[239],{"_105":248,"_96":249,"_157":250,"_159":-5,"_160":142,"_161":251,"_163":22,"_107":252,"_101":32,"_165":253,"_167":254,"_168":22,"_169":-5,"_170":255,"_99":256},"9e0b57ac-652d-11f0-a33d-0224a6c84d84","script.js","9e0b584c-652d-11f0-a33d-0224a6c84d84",21,["D",1752990704790],"script","// FFXIV Completion Tracker JavaScript\n\n// API endpoint - replace with your actual Val Town URL\nconst API_URL = 'https://yourname-ffxivInstanceList.web.val.run';\n\n// State management\nlet instanceData = null;\n\n// Fetch data from Val Town API\nasync function fetchInstanceData() {\n try {\n const response = await fetch(API_URL);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data = await response.json();\n return data;\n } catch (error) {\n console.error('Error fetching instance data:', error);\n return null;\n }\n}\n\n// Render the instance data to the page\nfunction render(data) {\n const container = document.getElementById('instance-container');\n \n // Clear existing content\n container.innerHTML = '';\n \n if (!data || !data.groupedData) {\n container.innerHTML = '

No data available. Please check the API connection.

';\n return;\n }\n \n // Loop through each expansion\n Object.entries(data.groupedData).forEach(([expansionName, contentTypes]) => {\n // Create expansion group\n const expansionGroup = document.createElement('div');\n expansionGroup.className = 'expansion-group';\n \n // Create expansion header\n const expansionHeader = document.createElement('h2');\n expansionHeader.className = 'expansion-header';\n expansionHeader.textContent = expansionName;\n expansionGroup.appendChild(expansionHeader);\n \n // Loop through content types within expansion\n Object.entries(contentTypes).forEach(([contentType, instances]) => {\n // Create content type header\n const contentTypeHeader = document.createElement('h3');\n contentTypeHeader.className = 'content-type-header';\n contentTypeHeader.textContent = contentType;\n expansionGroup.appendChild(contentTypeHeader);\n \n // Loop through instances\n instances.forEach(instance => {\n const instanceRow = document.createElement('div');\n instanceRow.className = 'instance-row';\n \n // Instance name and details\n const nameDiv = document.createElement('div');\n nameDiv.innerHTML = `\n

${instance.dutyName || instance.name}

Level ${instance.level} • ${instance.contentType}

\n `;\n \n // Unlocked checkbox\n const unlockedLabel = document.createElement('label');\n unlockedLabel.className = 'checkbox-label';\n unlockedLabel.innerHTML = `\n \n Unlocked\n `;\n \n // Completed checkbox\n const completedLabel = document.createElement('label');\n completedLabel.className = 'checkbox-label';\n completedLabel.innerHTML = `\n \n Completed\n `;\n \n // Quest info (if available)\n const questDiv = document.createElement('div');\n questDiv.textContent = instance.unlockQuest || '-';\n questDiv.style.fontSize = '0.9rem';\n questDiv.style.color = '#6c757d';\n \n // Add all elements to row\n instanceRow.appendChild(nameDiv);\n instanceRow.appendChild(unlockedLabel);\n instanceRow.appendChild(completedLabel);\n instanceRow.appendChild(questDiv);\n \n expansionGroup.appendChild(instanceRow);\n });\n });\n \n container.appendChild(expansionGroup);\n });\n \n // Load saved state after rendering\n loadState();\n}\n\n// Save state to localStorage\nfunction saveState() {\n const stateObject = {};\n \n // Find all checkboxes and build state object\n const checkboxes = document.querySelectorAll('input[type=\"checkbox\"][data-instance-id]');\n \n checkboxes.forEach(checkbox => {\n const instanceId = checkbox.dataset.instanceId;\n const type = checkbox.dataset.type; // 'unlocked' or 'completed'\n \n if (!stateObject[instanceId]) {\n stateObject[instanceId] = {};\n }\n \n stateObject[instanceId][type] = checkbox.checked;\n });\n \n // Save to localStorage\n localStorage.setItem('ffxivCompletionState', JSON.stringify(stateObject));\n console.log('State saved:', stateObject);\n}\n\n// Load state from localStorage\nfunction loadState() {\n try {\n const savedState = localStorage.getItem('ffxivCompletionState');\n if (!savedState) return;\n \n const stateObject = JSON.parse(savedState);\n \n // Apply saved state to checkboxes\n Object.entries(stateObject).forEach(([instanceId, state]) => {\n const unlockedCheckbox = document.querySelector(`input[data-instance-id=\"${instanceId}\"][data-type=\"unlocked\"]`);\n const completedCheckbox = document.querySelector(`input[data-instance-id=\"${instanceId}\"][data-type=\"completed\"]`);\n \n if (unlockedCheckbox && state.unlocked !== undefined) {\n unlockedCheckbox.checked = state.unlocked;\n }\n \n if (completedCheckbox && state.completed !== undefined) {\n completedCheckbox.checked = state.completed;\n }\n });\n \n console.log('State loaded:', stateObject);\n } catch (error) {\n console.error('Error loading state:', error);\n }\n}\n\n// Implement search/filter functionality\nfunction setupSearch() {\n const searchBar = document.getElementById('search-bar');\n \n searchBar.addEventListener('input', (event) => {\n const searchTerm = event.target.value.toLowerCase();\n const instanceRows = document.querySelectorAll('.instance-row');\n \n instanceRows.forEach(row => {\n const text = row.textContent.toLowerCase();\n \n if (text.includes(searchTerm)) {\n row.style.display = '';\n } else {\n row.style.display = 'none';\n }\n });\n \n // Hide expansion groups that have no visible instances\n const expansionGroups = document.querySelectorAll('.expansion-group');\n expansionGroups.forEach(group => {\n const visibleRows = group.querySelectorAll('.instance-row:not([style*=\"display: none\"])');\n if (visibleRows.length === 0) {\n group.style.display = 'none';\n } else {\n group.style.display = '';\n }\n });\n });\n}\n\n// Setup event listeners for checkbox changes\nfunction setupEventListeners() {\n const container = document.getElementById('instance-container');\n \n // Use event delegation for checkbox changes\n container.addEventListener('change', (event) => {\n if (event.target.type === 'checkbox' && event.target.dataset.instanceId) {\n saveState();\n }\n });\n}\n\n// Initialize the application\nasync function init() {\n console.log('Initializing FFXIV Completion Tracker...');\n \n // Show loading message\n const container = document.getElementById('instance-container');\n container.innerHTML = '

Loading instance data...

';\n \n // Fetch and render data\n instanceData = await fetchInstanceData();\n \n if (instanceData) {\n render(instanceData);\n setupEventListeners();\n setupSearch();\n console.log('Application initialized successfully!');\n } else {\n container.innerHTML = `\n

Failed to load data

Please check your API URL: ${API_URL}

\n \n

\n `;\n }\n}\n\n// Start the application when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', init);",[],[249],{"_105":258,"_96":259,"_157":260,"_159":-5,"_160":142,"_161":261,"_163":22,"_107":262,"_101":32,"_165":178,"_167":263,"_168":22,"_169":-5,"_170":264,"_99":265},"e17d25ac-652c-11f0-9fec-0224a6c84d84","style.css","e17d2656-652c-11f0-9fec-0224a6c84d84",17,["D",1752990388446],"/* Base styling */\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f5f5f5;\n color: #333;\n line-height: 1.6;\n}\n\n/* Main container */\n.container {\n max-width: 1200px;\n margin: 0 auto;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n/* Header styling */\nheader {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nheader h1 {\n margin: 0 0 1rem 0;\n font-size: 2.5rem;\n font-weight: 300;\n}\n\n/* Search bar */\n#search-bar {\n width: 100%;\n max-width: 400px;\n padding: 12px 20px;\n font-size: 16px;\n border: none;\n border-radius: 25px;\n outline: none;\n background-color: rgba(255, 255, 255, 0.9);\n transition: background-color 0.3s ease;\n}\n\n#search-bar:focus {\n background-color: white;\n}\n\n/* Main content */\nmain {\n padding: 2rem;\n}\n\n/* Expansion group styling */\n.expansion-group {\n margin-bottom: 2rem;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.expansion-header {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: white;\n padding: 1rem 1.5rem;\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0;\n}\n\n/* Content type headers */\n.content-type-header {\n background-color: #f8f9fa;\n border-bottom: 1px solid #e0e0e0;\n padding: 0.75rem 1.5rem;\n font-weight: 600;\n color: #495057;\n margin: 0;\n}\n\n/* Instance row styling */\n.instance-row {\n display: grid;\n grid-template-columns: 3fr 1fr 1fr 1fr;\n gap: 1rem;\n padding: 0.75rem 1.5rem;\n border-bottom: 1px solid #f0f0f0;\n align-items: center;\n transition: background-color 0.2s ease;\n}\n\n.instance-row:hover {\n background-color: #f8f9fa;\n}\n\n.instance-row:last-child {\n border-bottom: none;\n}\n\n/* Instance name and details */\n.instance-name {\n font-weight: 500;\n color: #2c3e50;\n}\n\n.instance-level {\n font-size: 0.9rem;\n color: #6c757d;\n margin-top: 0.25rem;\n}\n\n/* Checkbox styling */\n.checkbox-label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n cursor: pointer;\n user-select: none;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n margin: 0;\n transform: scale(1.2);\n}\n\n/* Status indicators */\n.status-unlocked {\n color: #28a745;\n}\n\n.status-completed {\n color: #007bff;\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n body {\n padding: 10px;\n }\n \n header h1 {\n font-size: 2rem;\n }\n \n .instance-row {\n grid-template-columns: 2fr 1fr 1fr;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n font-size: 0.9rem;\n }\n \n main {\n padding: 1rem;\n }\n}\n\n@media (max-width: 480px) {\n .instance-row {\n grid-template-columns: 1fr;\n gap: 0.25rem;\n text-align: left;\n }\n \n .checkbox-label {\n justify-content: flex-start;\n }\n}",[],[259],"files",[154,172,183,192,201,211,220,228,237,247,257],"counts",{"_270":32,"_271":272,"_273":32,"_274":275,"_278":279},"pulls","branches",1,"forks","envVars",{"_276":32,"_277":32},"count","emptyCount","connections",{"_276":32,"_280":32},"unfilledCount","contents",[],{"_105":221,"_96":100,"_157":222,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":284,"_101":162,"_165":224,"_167":225,"_168":22,"_169":-5,"_99":285},["D",1752990746000],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":294,"_152":299,"_266":333,"_178":334,"_281":336,"_337":-5,"_338":-5,"_339":-5,"_340":-5,"_341":342,"_274":-5},{"_105":106,"_96":97,"_107":295,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":296,"_136":297,"_139":298,"_151":22},["D",1752955219087],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[300,306,309,312,315,318,321,324,327,330],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":301,"_99":305},[302],{"_105":173,"_96":174,"_157":175,"_159":158,"_160":142,"_161":176,"_163":119,"_107":177,"_101":32,"_165":178,"_167":179,"_168":22,"_169":-5,"_170":303,"_99":304},[],[156,174],[156],{"_105":184,"_96":185,"_157":186,"_159":-5,"_160":142,"_161":187,"_163":119,"_107":188,"_101":32,"_165":178,"_167":189,"_168":22,"_169":-5,"_170":307,"_99":308},[],[185],{"_105":193,"_96":194,"_157":195,"_159":-5,"_160":142,"_161":196,"_163":119,"_107":197,"_101":32,"_165":178,"_167":198,"_168":22,"_169":-5,"_170":310,"_99":311},[],[194],{"_105":202,"_96":203,"_157":204,"_159":-5,"_160":142,"_161":205,"_163":22,"_107":206,"_101":207,"_165":178,"_167":208,"_168":22,"_169":-5,"_170":313,"_99":314},[],[203],{"_105":212,"_96":213,"_157":214,"_159":-5,"_160":142,"_161":215,"_163":119,"_107":216,"_101":32,"_165":178,"_167":217,"_168":22,"_169":-5,"_170":316,"_99":317},[],[213],{"_105":221,"_96":100,"_157":222,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":223,"_101":162,"_165":224,"_167":225,"_168":22,"_169":-5,"_170":319,"_99":320},[],[100],{"_105":229,"_96":230,"_157":231,"_159":-5,"_160":142,"_161":232,"_163":22,"_107":233,"_101":32,"_165":178,"_167":234,"_168":22,"_169":-5,"_170":322,"_99":323},[],[230],{"_105":238,"_96":239,"_157":240,"_159":-5,"_160":142,"_161":241,"_163":22,"_107":242,"_101":243,"_165":224,"_167":244,"_168":22,"_169":-5,"_170":325,"_99":326},[],[239],{"_105":248,"_96":249,"_157":250,"_159":-5,"_160":142,"_161":251,"_163":22,"_107":252,"_101":32,"_165":253,"_167":254,"_168":22,"_169":-5,"_170":328,"_99":329},[],[249],{"_105":258,"_96":259,"_157":260,"_159":-5,"_160":142,"_161":261,"_163":22,"_107":262,"_101":32,"_165":178,"_167":263,"_168":22,"_169":-5,"_170":331,"_99":332},[],[259],[300,302,306,309,312,315,318,321,324,327,330],{"_105":221,"_96":100,"_157":222,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":284,"_101":162,"_165":224,"_167":225,"_168":22,"_169":-5,"_99":335},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

jjwon

ffxiv