mirror of
https://github.com/cfultz/mtgcsv.git
synced 2024-12-03 13:40:04 +01:00
cleanup
This commit is contained in:
Caleb Fultz
parent
6d93ad6203
commit
7902212982
273
app.js
273
app.js
@ -1,273 +0,0 @@
|
||||
// Define setTheme globally to handle theme changes
|
||||
window.setTheme = function setTheme(theme) {
|
||||
document.body.className = ''; // Clear existing themes
|
||||
document.body.classList.add(theme);
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('selectedTheme', theme);
|
||||
};
|
||||
|
||||
let cardList = [];
|
||||
let soundThreshold = 1.00; // Default sound threshold
|
||||
|
||||
// Make toggleMenu globally accessible
|
||||
window.toggleMenu = function toggleMenu() {
|
||||
const menuContent = document.getElementById('menu-content');
|
||||
menuContent.classList.toggle('show');
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const savedTheme = localStorage.getItem('selectedTheme');
|
||||
if (savedTheme) {
|
||||
setTheme(savedTheme);
|
||||
}
|
||||
|
||||
const savedThreshold = localStorage.getItem('soundThreshold');
|
||||
if (savedThreshold) {
|
||||
soundThreshold = parseFloat(savedThreshold);
|
||||
document.getElementById('sound-threshold').value = savedThreshold;
|
||||
}
|
||||
|
||||
document.getElementById('add-card-button').addEventListener('click', addCard);
|
||||
document.getElementById('download-csv-button').addEventListener('click', downloadCSV);
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
// Update sound threshold based on user input
|
||||
document.getElementById('sound-threshold').addEventListener('input', (event) => {
|
||||
soundThreshold = parseFloat(event.target.value);
|
||||
localStorage.setItem('soundThreshold', soundThreshold); // Save the threshold to localStorage
|
||||
});
|
||||
|
||||
// Check and apply dark mode
|
||||
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
if (isDarkMode) {
|
||||
document.body.classList.add('dark-mode');
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCardSuggestions(query) {
|
||||
try {
|
||||
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();
|
||||
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) {
|
||||
// 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 data = await response.json();
|
||||
|
||||
console.log('Fetched Data from Scryfall:', data); // Debugging: Log the fetched data
|
||||
|
||||
// Return the relevant card details
|
||||
return {
|
||||
set: data.set.toUpperCase(),
|
||||
card_id: data.collector_number,
|
||||
mana_cost: data.mana_cost || 'N/A',
|
||||
power: data.power || 'N/A',
|
||||
toughness: data.toughness || 'N/A',
|
||||
type: data.type_line.split('—')[0].trim(),
|
||||
rarity: data.rarity || 'N/A',
|
||||
price: data.prices.usd || '0.00',
|
||||
imageUrl: data.image_uris ? data.image_uris.small : null,
|
||||
name: data.name
|
||||
};
|
||||
}
|
||||
|
||||
async function addCard() {
|
||||
const cardName = document.getElementById('card-name').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) {
|
||||
// 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.");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateCardDetails(printing) {
|
||||
document.getElementById('set-code').value = printing.set;
|
||||
document.getElementById('card-id').value = printing.card_id;
|
||||
|
||||
const quantity = document.getElementById('quantity').value;
|
||||
const foil = document.getElementById('foil').value;
|
||||
|
||||
const cardData = {
|
||||
name: document.getElementById('card-name').value,
|
||||
set: printing.set,
|
||||
card_id: printing.card_id,
|
||||
quantity: quantity,
|
||||
foil: foil,
|
||||
mana_type: printing.mana_cost,
|
||||
power: printing.power,
|
||||
toughness: printing.toughness,
|
||||
type: printing.type,
|
||||
rarity: printing.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, name, and price in the dissolving popup
|
||||
showCardPopup(cardData.name, printing.imageUrl, printing.price);
|
||||
}
|
||||
|
||||
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, imageUrl, price) {
|
||||
const cardPopup = document.getElementById('card-popup');
|
||||
cardPopup.innerHTML = `
|
||||
<div style="font-family: 'Sorts Mill Goudy', serif; text-align: center;">
|
||||
<strong>${cardName}</strong>
|
||||
</div>
|
||||
<img src="${imageUrl}" alt="${cardName}">
|
||||
<div style="font-family: 'Sorts Mill Goudy', serif; text-align: center; margin-top: 10px;">
|
||||
Price: $${price}
|
||||
</div>
|
||||
`;
|
||||
cardPopup.style.display = 'block';
|
||||
cardPopup.style.opacity = 1;
|
||||
|
||||
if (parseFloat(price) >= soundThreshold) {
|
||||
playSound();
|
||||
}
|
||||
|
||||
// Dissolve the popup after a few seconds
|
||||
setTimeout(() => {
|
||||
cardPopup.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
cardPopup.style.display = 'none';
|
||||
}, 500);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function playSound() {
|
||||
const audio = new Audio('cash-money.mp3');
|
||||
audio.play();
|
||||
}
|
||||
|
||||
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;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
// Create a temporary link element
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", url);
|
||||
link.setAttribute("download", `${randomFileName}.csv`);
|
||||
document.body.appendChild(link);
|
||||
|
||||
// Trigger the download
|
||||
link.click();
|
||||
|
||||
// Clean up and remove the link
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
BIN
cash-money.mp3
BIN
cash-money.mp3
Binary file not shown.
306
styles.css
306
styles.css
@ -1,306 +0,0 @@
|
||||
:root {
|
||||
--background-color: #f0f0f0;
|
||||
--text-color: #333;
|
||||
--card-background: #ffffff;
|
||||
--button-background: #007acc;
|
||||
--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;
|
||||
--card-background: #ffffff;
|
||||
--button-background: #e5e5e5;
|
||||
--button-hover: #cccccc;
|
||||
}
|
||||
|
||||
.theme-blue {
|
||||
--background-color: #d7e7f9;
|
||||
--text-color: #002d72;
|
||||
--card-background: #e0f2ff;
|
||||
--button-background: #007acc;
|
||||
--button-hover: #005fa3;
|
||||
}
|
||||
|
||||
.theme-black {
|
||||
--background-color: #333333;
|
||||
--text-color: #ffffff;
|
||||
--card-background: #444444;
|
||||
--button-background: #1f1f1f;
|
||||
--button-hover: #000000;
|
||||
}
|
||||
|
||||
.theme-red {
|
||||
--background-color: #fbe4e4;
|
||||
--text-color: #8b0000;
|
||||
--card-background: #ffe5e5;
|
||||
--button-background: #d32f2f;
|
||||
--button-hover: #b71c1c;
|
||||
}
|
||||
|
||||
.theme-green {
|
||||
--background-color: #e7f4e7;
|
||||
--text-color: #004d00;
|
||||
--card-background: #e0ffe0;
|
||||
--button-background: #388e3c;
|
||||
--button-hover: #2e7d32;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.theme-white {
|
||||
--background-color: #1e1e1e;
|
||||
--text-color: #ffffff;
|
||||
--card-background: #333333;
|
||||
--button-background: #555555;
|
||||
--button-hover: #777777;
|
||||
}
|
||||
|
||||
.theme-blue {
|
||||
--background-color: #001f3f;
|
||||
--text-color: #ffffff;
|
||||
--card-background: #002d72;
|
||||
--button-background: #005fa3;
|
||||
--button-hover: #007acc;
|
||||
}
|
||||
|
||||
.theme-black {
|
||||
--background-color: #000000;
|
||||
--text-color: #e5e5e5;
|
||||
--card-background: #1c1c1c;
|
||||
--button-background: #333333;
|
||||
--button-hover: #555555;
|
||||
}
|
||||
|
||||
.theme-red {
|
||||
--background-color: #330000;
|
||||
--text-color: #ffaaaa;
|
||||
--card-background: #8b0000;
|
||||
--button-background: #b71c1c;
|
||||
--button-hover: #d32f2f;
|
||||
}
|
||||
|
||||
.theme-green {
|
||||
--background-color: #002200;
|
||||
--text-color: #ccffcc;
|
||||
--card-background: #004d00;
|
||||
--button-background: #2e7d32;
|
||||
--button-hover: #388e3c;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #1e1e1e;
|
||||
--text-color: #ffffff;
|
||||
--card-background: #2e2e2e;
|
||||
--button-background: #1f6fb2;
|
||||
--button-hover: #145b8c;
|
||||
}
|
||||
}
|
||||
|
||||
.mana-icon {
|
||||
font-family: 'mana', sans-serif;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mana-icon:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Ensure the menu follows the theme */
|
||||
body.theme-white .menu-content {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body.theme-blue .menu-content {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body.theme-black .menu-content {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body.theme-red .menu-content {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body.theme-green .menu-content {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Sorts Mill Goudy', 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;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
min-width: 150px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.menu-content label,
|
||||
.menu-content input {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.menu-content.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
body.dark-mode .menu-content {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
body.dark-mode .hamburger-menu,
|
||||
body.dark-mode .menu-content label,
|
||||
body.dark-mode .menu-content input {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: 0.5rem; /* Smaller font size */
|
||||
color: #666; /* A lighter color for the text */
|
||||
margin-top: 0px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #007acc; /* Link color matching the theme */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline; /* Underline on hover for emphasis */
|
||||
}
|
||||
54
sw.js
54
sw.js
@ -1,54 +0,0 @@
|
||||
// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
|
||||
|
||||
const CACHE = "pwabuilder-offline-page";
|
||||
|
||||
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
|
||||
|
||||
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
|
||||
const offlineFallbackPage = "ToDo-replace-this-name.html";
|
||||
|
||||
self.addEventListener("message", (event) => {
|
||||
if (event.data && event.data.type === "SKIP_WAITING") {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
|
||||
self.addEventListener('install', async (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE)
|
||||
.then((cache) => cache.add(offlineFallbackPage))
|
||||
);
|
||||
});
|
||||
|
||||
if (workbox.navigationPreload.isSupported()) {
|
||||
workbox.navigationPreload.enable();
|
||||
}
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
new RegExp('/*'),
|
||||
new workbox.strategies.StaleWhileRevalidate({
|
||||
cacheName: CACHE
|
||||
})
|
||||
);
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
if (event.request.mode === 'navigate') {
|
||||
event.respondWith((async () => {
|
||||
try {
|
||||
const preloadResp = await event.preloadResponse;
|
||||
|
||||
if (preloadResp) {
|
||||
return preloadResp;
|
||||
}
|
||||
|
||||
const networkResp = await fetch(event.request);
|
||||
return networkResp;
|
||||
} catch (error) {
|
||||
|
||||
const cache = await caches.open(CACHE);
|
||||
const cachedResp = await cache.match(offlineFallbackPage);
|
||||
return cachedResp;
|
||||
}
|
||||
})());
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user