cfultz/mtgcsv
1
0
Fork 0
mirror of https://github.com/cfultz/mtgcsv.git synced 2024-11-22 01:10:02 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Corrected autocomplete

Browse Source
This commit is contained in:
Caleb Fultz 2024-08-21 08:46:39 -04:00
parent 1d04b0f64c
commit a786d0e050
2 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app.js
View File

@ -61,11 +61,41 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
async function fetchCardSuggestions(query) { async function fetchCardSuggestions(query) {
try {
const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`); const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json(); const data = await response.json();
return data.data; return data.data;
} catch (error) {
console.error('Fetch error:', error);
return [];
}
} }
document.getElementById('card-name').addEventListener('input', async function() {
const query = this.value.trim();
if (query.length < 2) { // Only search for queries longer than 1 character
document.getElementById('suggestions').innerHTML = '';
return;
}
const suggestions = await fetchCardSuggestions(query);
const suggestionsDiv = document.getElementById('suggestions');
suggestionsDiv.innerHTML = ''; // Clear previous suggestions
suggestions.forEach(suggestion => {
const div = document.createElement('div');
div.textContent = suggestion;
div.onclick = () => {
document.getElementById('card-name').value = suggestion;
suggestionsDiv.innerHTML = ''; // Clear suggestions after selection
};
suggestionsDiv.appendChild(div);
});
});
async function fetchCardDetails(cardName, setCode) { async function fetchCardDetails(cardName, setCode) {
// Use the Scryfall 'named' endpoint to fetch the exact card by name and set code // Use the Scryfall 'named' endpoint to fetch the exact card by name and set code
const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`); const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`);

50
index.html
View File

@ -30,45 +30,34 @@
</div> </div>
<h1>MTG Card CSV Generator</h1> <h1>MTG Card CSV Generator</h1>
<form id="card-form" class="mdc-card"> <form id="card-form">
<div class="mdc-text-field mdc-text-field--outlined"> <div>
<input type="text" id="card-name" class="mdc-text-field__input" autocomplete="off" required> <label for="card-name">Card Name:</label>
<label class="mdc-floating-label" for="card-name">Card Name</label> <input type="text" id="card-name" autocomplete="off" required>
<div class="mdc-line-ripple"></div> <div id="suggestions"></div>
</div> </div>
<div>
<div class="mdc-text-field mdc-text-field--outlined"> <label for="set-code">Set Code:</label>
<input type="text" id="set-code" class="mdc-text-field__input" required> <input type="text" id="set-code" required>
<label class="mdc-floating-label" for="set-code">Set Code</label>
<div class="mdc-line-ripple"></div>
</div> </div>
<div>
<div class="mdc-text-field mdc-text-field--outlined"> <label for="card-id">Card ID:</label>
<input type="text" id="card-id" class="mdc-text-field__input" required> <input type="text" id="card-id" required>
<label class="mdc-floating-label" for="card-id">Card ID</label>
<div class="mdc-line-ripple"></div>
</div> </div>
<div>
<div class="mdc-text-field mdc-text-field--outlined"> <label for="quantity">Quantity:</label>
<input type="number" id="quantity" class="mdc-text-field__input" min="1" value="1" required> <input type="number" id="quantity" min="1" value="1" required>
<label class="mdc-floating-label" for="quantity">Quantity</label>
<div class="mdc-line-ripple"></div>
</div> </div>
<div>
<div class="mdc-select"> <label for="foil">Is it Foil?</label>
<select id="foil" class="mdc-select__native-control"> <select id="foil">
<option value="No">No</option> <option value="No">No</option>
<option value="Yes">Yes</option> <option value="Yes">Yes</option>
</select> </select>
<label class="mdc-floating-label">Is it Foil?</label>
<div class="mdc-line-ripple"></div>
</div> </div>
<button type="button" id="add-card-button">Add Card</button>
<button type="button" class="mdc-button mdc-button--raised" id="add-card-button">Add Card</button>
</form> </form>
<button id="download-csv-button">Download CSV</button>
<button class="mdc-button mdc-button--outlined" id="download-csv-button">Download CSV</button>
<textarea id="csv-output" readonly></textarea> <textarea id="csv-output" readonly></textarea>
<div id="card-popup" class="card-popup"></div> <div id="card-popup" class="card-popup"></div>
</div> </div>
@ -86,6 +75,5 @@
navigator.serviceWorker.register('sw.js') navigator.serviceWorker.register('sw.js')
} }
</script> </script>
</body> </body>
</html> </html>