Multiple modifications. Added randomized words for the output csv, corrected dark mode toggle

This commit is contained in:
Caleb Fultz 2024-08-20 22:00:35 -04:00
parent 49b3c1b047
commit 2bd8ca0daa
3 changed files with 57 additions and 38 deletions

66
app.js
View File

@ -1,24 +1,26 @@
import { randomWords } from './randomWords.js';
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');
}
});
document.getElementById('add-card-button').addEventListener('click', addCard);
document.getElementById('download-csv-button').addEventListener('click', downloadCSV);
// Load the saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark-mode');
toggle.checked = true;
}
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 fetchCardSuggestions(query) {
@ -27,22 +29,6 @@ async function fetchCardSuggestions(query) {
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();
@ -128,8 +114,18 @@ async function showCardPopup(cardName, setCode) {
}
}
function downloadCSV() {
function getRandomWordsFromFile() {
let randomWordsSelected = [];
for (let i = 0; i < 3; i++) { // Get three random words
const randomIndex = Math.floor(Math.random() * randomWords.length);
randomWordsSelected.push(randomWords[randomIndex]);
}
return randomWordsSelected.join('_');
}
async function downloadCSV() {
const csvContent = generateCSVContent();
const randomFileName = getRandomWordsFromFile();
// Create a blob with the CSV content
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
@ -138,7 +134,7 @@ function downloadCSV() {
// Create a temporary link element
const link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", "mtg_cards.csv");
link.setAttribute("download", `${randomFileName}.csv`);
document.body.appendChild(link);
// Trigger the download

View File

@ -37,12 +37,12 @@
<option value="Yes">Yes</option>
</select>
</div>
<button type="button" onclick="addCard()">Add Card</button>
<button type="button" id="add-card-button">Add Card</button>
</form>
<button onclick="downloadCSV()">Download CSV</button>
<button id="download-csv-button">Download CSV</button>
<textarea id="csv-output" readonly></textarea>
<div id="card-popup" class="card-popup"></div>
</div>
<script src="app.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>

23
randomWords.js Normal file
View File

@ -0,0 +1,23 @@
// randomWords.js
export const randomWords = [
"nonstop", "detailed", "aspiring", "shock", "play", "bashful", "long", "quarter",
"six", "charge", "dock", "crabby", "dime", "wry", "story", "wiry", "rampant",
"return", "dare", "open", "shame", "many", "brush", "babies", "stem", "squeeze",
"judge", "heavenly", "defeated", "optimal", "invention", "object", "change",
"sink", "verdant", "jaded", "adjoining", "muddled", "switch", "helpless",
"motionless", "skirt", "shrug", "trip", "haircut", "oven", "lip", "habitual",
"yielding", "bag", "wheel", "attach", "ticket", "visit", "reflect", "suppose",
"present", "wound", "voyage", "real", "aunt", "religion", "redundant", "necessary",
"fail", "flower", "unpack", "join", "gamy", "tired", "welcome", "rightful", "jeans",
"obscene", "spring", "basket", "battle", "utter", "descriptive", "caring", "fry",
"resonant", "supply", "geese", "pets", "impulse", "scintillating", "tame", "release",
"tail", "depend", "lively", "nondescript", "punishment", "meek", "crooked",
"representative", "twist", "manage", "bored", "grotesque", "demonic", "camp",
"temporary", "coil", "passenger", "appliance", "clam", "smoggy", "tasteless", "guess",
"verse", "drab", "peep", "business", "paper", "female", "admire", "way", "moor",
"breezy", "opposite", "comparison", "tank", "suit", "ludicrous", "minister", "stiff",
"whine", "request", "camera", "internal", "improve", "unnatural", "decisive", "exist",
"grip", "electric", "bathe", "scandalous", "steer", "humdrum", "action", "rot",
"roll", "quartz", "amused", "sidewalk", "roll", "curve"
];