mirror of
https://github.com/cfultz/mtgcsv.git
synced 2024-11-25 02:20:03 +01:00
Initial
This commit is contained in:
Caleb Fultz
commit
ba4a7638c0
149
app.js
Normal file
149
app.js
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
let cardList = [];
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const toggle = document.getElementById('dark-mode-toggle');
|
||||||
|
|
||||||
|
toggle.addEventListener('change', () => {
|
||||||
|
if (toggle.checked) {
|
||||||
|
document.documentElement.classList.add('dark-mode');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark-mode');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load the saved theme preference
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
if (savedTheme === 'dark') {
|
||||||
|
document.documentElement.classList.add('dark-mode');
|
||||||
|
toggle.checked = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchCardSuggestions(query) {
|
||||||
|
const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
|
||||||
|
const data = await response.json();
|
||||||
|
return data.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('card-name').addEventListener('input', async function() {
|
||||||
|
const query = this.value;
|
||||||
|
const suggestions = await fetchCardSuggestions(query);
|
||||||
|
const suggestionsDiv = document.getElementById('suggestions');
|
||||||
|
suggestionsDiv.innerHTML = '';
|
||||||
|
suggestions.forEach(suggestion => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = suggestion;
|
||||||
|
div.onclick = () => {
|
||||||
|
document.getElementById('card-name').value = suggestion;
|
||||||
|
suggestionsDiv.innerHTML = '';
|
||||||
|
};
|
||||||
|
suggestionsDiv.appendChild(div);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchCardDetails(cardName, setCode) {
|
||||||
|
const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`);
|
||||||
|
const data = await response.json();
|
||||||
|
return {
|
||||||
|
mana_cost: data.mana_cost || 'N/A',
|
||||||
|
power: data.power || 'N/A',
|
||||||
|
toughness: data.toughness || 'N/A',
|
||||||
|
type: data.type_line.split('—')[0].trim(), // Remove anything after em dash
|
||||||
|
rarity: data.rarity || 'N/A'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addCard() {
|
||||||
|
const cardName = document.getElementById('card-name').value;
|
||||||
|
const setCode = document.getElementById('set-code').value;
|
||||||
|
const cardId = document.getElementById('card-id').value;
|
||||||
|
const quantity = document.getElementById('quantity').value;
|
||||||
|
const foil = document.getElementById('foil').value;
|
||||||
|
|
||||||
|
const cardDetails = await fetchCardDetails(cardName, setCode);
|
||||||
|
|
||||||
|
const cardData = {
|
||||||
|
name: cardName,
|
||||||
|
set: setCode,
|
||||||
|
card_id: cardId,
|
||||||
|
quantity: quantity,
|
||||||
|
foil: foil,
|
||||||
|
mana_type: cardDetails.mana_cost,
|
||||||
|
power: cardDetails.power,
|
||||||
|
toughness: cardDetails.toughness,
|
||||||
|
type: cardDetails.type,
|
||||||
|
rarity: cardDetails.rarity
|
||||||
|
};
|
||||||
|
|
||||||
|
cardList.push(cardData);
|
||||||
|
|
||||||
|
// Update the textarea with the new card information
|
||||||
|
let csvContent = generateCSVContent();
|
||||||
|
document.getElementById('csv-output').value = csvContent;
|
||||||
|
|
||||||
|
// Show the card image in the dissolving popup
|
||||||
|
showCardPopup(cardName, setCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateCSVContent() {
|
||||||
|
let csvContent = "Card Name,Set,Card ID,Quantity,Foil,Mana Type,Power,Toughness,Type,Rarity\n";
|
||||||
|
cardList.forEach(card => {
|
||||||
|
const escapedValues = [
|
||||||
|
card.name,
|
||||||
|
card.set,
|
||||||
|
card.card_id,
|
||||||
|
card.quantity,
|
||||||
|
card.foil,
|
||||||
|
card.mana_type,
|
||||||
|
card.power,
|
||||||
|
card.toughness,
|
||||||
|
card.type,
|
||||||
|
card.rarity
|
||||||
|
].map(value => `"${value.replace(/"/g, '""')}"`); // Escape any existing quotes by doubling them
|
||||||
|
csvContent += escapedValues.join(",") + "\n";
|
||||||
|
});
|
||||||
|
return csvContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function showCardPopup(cardName, setCode) {
|
||||||
|
const cardPopup = document.getElementById('card-popup');
|
||||||
|
const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`);
|
||||||
|
const data = await response.json();
|
||||||
|
const imageUrl = data.image_uris ? data.image_uris.small : null;
|
||||||
|
|
||||||
|
if (imageUrl) {
|
||||||
|
cardPopup.innerHTML = `<img src="${imageUrl}" alt="${cardName}">`;
|
||||||
|
cardPopup.style.display = 'block';
|
||||||
|
cardPopup.style.opacity = 1;
|
||||||
|
|
||||||
|
// Dissolve the popup after a few seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
cardPopup.style.opacity = 0;
|
||||||
|
setTimeout(() => {
|
||||||
|
cardPopup.style.display = 'none';
|
||||||
|
}, 500);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadCSV() {
|
||||||
|
const csvContent = generateCSVContent();
|
||||||
|
|
||||||
|
// Create a blob with the CSV content
|
||||||
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
// Create a temporary link element
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.setAttribute("href", url);
|
||||||
|
link.setAttribute("download", "mtg_cards.csv");
|
||||||
|
document.body.appendChild(link);
|
||||||
|
|
||||||
|
// Trigger the download
|
||||||
|
link.click();
|
||||||
|
|
||||||
|
// Clean up and remove the link
|
||||||
|
document.body.removeChild(link);
|
||||||
|
}
|
||||||
47
index.html
Normal file
47
index.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MTG Card CSV Generator</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="manifest" href="manifest.json">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>MTG Card CSV Generator</h1>
|
||||||
|
<form id="card-form">
|
||||||
|
<div>
|
||||||
|
<label for="card-name">Card Name:</label>
|
||||||
|
<input type="text" id="card-name" autocomplete="off" required>
|
||||||
|
<div id="suggestions"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="set-code">Set Code:</label>
|
||||||
|
<input type="text" id="set-code" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="card-id">Card ID:</label>
|
||||||
|
<input type="text" id="card-id" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="quantity">Quantity:</label>
|
||||||
|
<input type="number" id="quantity" min="1" value="1" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="foil">Is it Foil?</label>
|
||||||
|
<select id="foil">
|
||||||
|
<option value="No">No</option>
|
||||||
|
<option value="Yes">Yes</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button type="button" onclick="addCard()">Add Card</button>
|
||||||
|
</form>
|
||||||
|
<button onclick="downloadCSV()">Download CSV</button>
|
||||||
|
<textarea id="csv-output" readonly></textarea>
|
||||||
|
<div id="card-popup" class="card-popup"></div>
|
||||||
|
</div>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
manifest.json
Normal file
22
manifest.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "MTG Card CSV Generator",
|
||||||
|
"short_name": "MTG CSV",
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#cc5200",
|
||||||
|
"theme_color": "#007acc",
|
||||||
|
"description": "A PWA for generating CSV files with Magic: The Gathering card details",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "icon.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icon.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
22
service-worker.js
Normal file
22
service-worker.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
self.addEventListener('install', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open('mtg-csv-generator-v1').then((cache) => {
|
||||||
|
return cache.addAll([
|
||||||
|
'/',
|
||||||
|
'/index.html',
|
||||||
|
'/styles.css',
|
||||||
|
'/app.js',
|
||||||
|
'/manifest.json',
|
||||||
|
'/icon.png'
|
||||||
|
]);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('fetch', (event) => {
|
||||||
|
event.respondWith(
|
||||||
|
caches.match(event.request).then((response) => {
|
||||||
|
return response || fetch(event.request);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
115
styles.css
Normal file
115
styles.css
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
:root {
|
||||||
|
--background-color: #f0f0f0;
|
||||||
|
--text-color: #333;
|
||||||
|
--card-background: #ffffff;
|
||||||
|
--button-background: #007acc;
|
||||||
|
--button-hover: #005fa3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background-color: #1e1e1e;
|
||||||
|
--text-color: #ffffff;
|
||||||
|
--card-background: #2e2e2e;
|
||||||
|
--button-background: #1f6fb2;
|
||||||
|
--button-hover: #145b8c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: var(--card-background);
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-family: 'Sorts Mill Goudy', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
form div {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: var(--card-background);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: var(--button-background);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
#csv-output {
|
||||||
|
margin-top: 20px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: var(--card-background);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-popup {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
max-width: 20%;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-popup img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.card-popup {
|
||||||
|
max-width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.card-popup {
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user