Phase 1: The Data Layer (Val Town) Goal: Create a single, reliable Val Town API endpoint that provides all the necessary instance data, properly formatted and cached.
Task 1.1: Research the XIVAPI /instancecontent endpoint.
Familiarize yourself with its structure. You will need to request specific columns to get the data required by the PRD.
Identify the fields for:
Name: The instance's name.
ContentType.Name: This will give you the "Type" (e.g., "Dungeon").
ContentFinderCondition.Name: This often contains the common name for the duty.
Unlock Quest: This can be tricky. Look for a field like QuestUnlock which might be an object containing the quest name. You may need to experiment to find the most reliable field.
Note on Pagination: XIVAPI results are paginated (e.g., 100 results per page). Your script must loop through all pages to collect every instance.
Task 1.2: Create the Val Town "Val" (Function).
Create a new val in your Val Town workspace (e.g., ffxivInstanceList).
Write JavaScript code inside this val to perform the following logic:
Initialize an empty array, e.g., allInstances = [].
Make an initial fetch call to https://xivapi.com/instancecontent?columns=ID,Name,ContentType.Name,....
Write a while or for loop that continues as long as the API response indicates there is a next page (Pagination.PageNext != null). In each loop, fetch the next page and add the results to your allInstances array.
Once all instances are collected, process the array: Group the instances by their expansion. You may need another API call to /expansion or hardcode the expansion order and level caps to achieve this grouping.
Return the final, grouped JSON object.
Task 1.3: Add Caching to the Val.
Instance data changes very infrequently (only with major patches). To avoid hitting XIVAPI rate limits and to make your app load instantly, add caching.
A simple approach in Val Town is to store the result and a timestamp.
Modify your val: before fetching, check if a cached result exists and if it's recent (e.g., less than 24 hours old). If it is, return the cached data immediately. If not, perform the fetch, then update the cache with the new data and timestamp.
At the end of this phase, you will have a URL that returns a clean JSON object of all game instances, grouped by expansion.
Phase 2: The Frontend Structure (HTML & CSS) Goal: Create the static skeleton of your web application.
Task 2.1: Create index.html.
Set up a basic HTML5 document.
In the , add a (e.g., "FFXIV Completion Tracker"), and link to your style.css and script.js files.
In the <body>, create the main layout:
A
containing anfor the title and an .
A
element. This empty div is where your JavaScript will render the list.Task 2.2: Create style.css.
Write some basic CSS to make the app usable from the start.
Style the body for a nice background color and font.
Center the main content and give it a max-width.
Style the header and search bar.
Create CSS classes for the elements you will generate with JavaScript:
.expansion-group { ... } (for the container of an expansion's instances)
.expansion-header { ... } (for the "Heavensward" title)
.instance-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; ... } (to align the name and checkboxes nicely)
.checkbox-label { ... }
At the end of this phase, you will have a static webpage with a title, a search bar, and an empty area, all styled and ready for data.