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 issue with the autofilling of ID's

Browse Source
This commit is contained in:
Caleb Fultz 2024-08-21 08:40:48 -04:00
parent 4347e24199
commit 1d04b0f64c
4 changed files with 77 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app.js
View File

@ -90,18 +90,46 @@ async function fetchCardDetails(cardName, setCode) {
async function addCard() {
const cardName = document.getElementById('card-name').value;
const setCode = document.getElementById('set-code').value;
const setCodeInput = document.getElementById('set-code');
const cardIdInput = document.getElementById('card-id');
// Fetch card details using the card name and set code
let setCode = setCodeInput.value;
let cardId = cardIdInput.value;
// Always fetch card details
const cardDetails = await fetchCardDetails(cardName, setCode);
if (cardDetails) {
updateCardDetails(cardDetails);
// If set code or card ID is not filled, auto-fill them
if (!setCode) {
setCode = cardDetails.set;
setCodeInput.value = setCode;
}
if (!cardId) {
cardId = cardDetails.card_id;
cardIdInput.value = cardId;
}
// Update card details with either user input or fetched data
updateCardDetails({
name: cardName,
set: setCode,
card_id: cardId,
mana_cost: cardDetails.mana_cost,
power: cardDetails.power,
toughness: cardDetails.toughness,
type: cardDetails.type,
rarity: cardDetails.rarity,
price: cardDetails.price,
imageUrl: cardDetails.imageUrl
});
} else {
alert("Card not found with the given name and set code.");
alert("Card not found with the given name.");
}
}
function updateCardDetails(printing) {
document.getElementById('set-code').value = printing.set;
document.getElementById('card-id').value = printing.card_id;

50
index.html
View File

@ -30,34 +30,45 @@
</div>
<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>
<form id="card-form" class="mdc-card">
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="card-name" class="mdc-text-field__input" autocomplete="off" required>
<label class="mdc-floating-label" for="card-name">Card Name</label>
<div class="mdc-line-ripple"></div>
</div>
<div>
<label for="set-code">Set Code:</label>
<input type="text" id="set-code" required>
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="set-code" class="mdc-text-field__input" required>
<label class="mdc-floating-label" for="set-code">Set Code</label>
<div class="mdc-line-ripple"></div>
</div>
<div>
<label for="card-id">Card ID:</label>
<input type="text" id="card-id" required>
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="card-id" class="mdc-text-field__input" required>
<label class="mdc-floating-label" for="card-id">Card ID</label>
<div class="mdc-line-ripple"></div>
</div>
<div>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1" value="1" required>
<div class="mdc-text-field mdc-text-field--outlined">
<input type="number" id="quantity" class="mdc-text-field__input" min="1" value="1" required>
<label class="mdc-floating-label" for="quantity">Quantity</label>
<div class="mdc-line-ripple"></div>
</div>
<div>
<label for="foil">Is it Foil?</label>
<select id="foil">
<div class="mdc-select">
<select id="foil" class="mdc-select__native-control">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<label class="mdc-floating-label">Is it Foil?</label>
<div class="mdc-line-ripple"></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>
<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>
<div id="card-popup" class="card-popup"></div>
</div>
@ -75,5 +86,6 @@
navigator.serviceWorker.register('sw.js')
}
</script>
</body>
</html>

6
offline.html
View File

@ -8,6 +8,8 @@
<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
<link rel="icon" href="icon.png" type="image/png">
<link href="//cdn.jsdelivr.net/npm/mana-font@latest/css/mana.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
<div class="container">
@ -25,5 +27,9 @@
This app is not affiliated with Wizards of the Coast or Hasbro. All rights and trademarks are owned by their respective owners.
</p>
</footer>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script>
mdc.autoInit(); // Initialize all MDC components
</script>
</body>
</html>

9
styles.css
View File

@ -6,6 +6,14 @@
--button-hover: #005fa3;
}
.material-theme {
--background-color: #ffffff;
--text-color: #000000;
--card-background: #f8f8f8;
--button-background: #6200ee;
--button-hover: #3700b3;
}
.theme-white {
--background-color: #f9f8f6;
--text-color: #1e1e1e;
@ -86,6 +94,7 @@
--button-background: #2e7d32;
--button-hover: #388e3c;
}
}