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

Updated to add sound for 541637$ cards

Browse Source
This commit is contained in:
Caleb Fultz 2024-08-20 22:27:26 -04:00
parent 2bd8ca0daa
commit 3c621c7aad
5 changed files with 107 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app.js
View File

@ -1,6 +1,7 @@
import { randomWords } from './randomWords.js'; import { randomWords } from './randomWords.js';
let cardList = []; let cardList = [];
let soundThreshold = 1.00; // Default sound threshold
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.getElementById('add-card-button').addEventListener('click', addCard); document.getElementById('add-card-button').addEventListener('click', addCard);
@ -21,8 +22,25 @@ document.addEventListener('DOMContentLoaded', () => {
suggestionsDiv.appendChild(div); suggestionsDiv.appendChild(div);
}); });
}); });
// Update sound threshold based on user input
document.getElementById('sound-threshold').addEventListener('input', (event) => {
soundThreshold = parseFloat(event.target.value);
}); });
// Check and apply dark mode
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
document.body.classList.add('dark-mode');
}
});
// Make toggleMenu globally accessible
window.toggleMenu = function toggleMenu() {
const menuContent = document.getElementById('menu-content');
menuContent.classList.toggle('show');
};
async function fetchCardSuggestions(query) { async function fetchCardSuggestions(query) {
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)}`);
const data = await response.json(); const data = await response.json();
@ -37,7 +55,9 @@ async function fetchCardDetails(cardName, setCode) {
power: data.power || 'N/A', power: data.power || 'N/A',
toughness: data.toughness || 'N/A', toughness: data.toughness || 'N/A',
type: data.type_line.split('—')[0].trim(), // Remove anything after em dash type: data.type_line.split('—')[0].trim(), // Remove anything after em dash
rarity: data.rarity || 'N/A' rarity: data.rarity || 'N/A',
price: data.prices.usd || '0.00', // Fetching the price in USD
imageUrl: data.image_uris ? data.image_uris.small : null
}; };
} }
@ -69,8 +89,8 @@ async function addCard() {
let csvContent = generateCSVContent(); let csvContent = generateCSVContent();
document.getElementById('csv-output').value = csvContent; document.getElementById('csv-output').value = csvContent;
// Show the card image in the dissolving popup // Show the card image, name, and price in the dissolving popup
showCardPopup(cardName, setCode); showCardPopup(cardName, cardDetails.imageUrl, cardDetails.price);
} }
function generateCSVContent() { function generateCSVContent() {
@ -93,17 +113,24 @@ function generateCSVContent() {
return csvContent; return csvContent;
} }
async function showCardPopup(cardName, setCode) { async function showCardPopup(cardName, imageUrl, price) {
const cardPopup = document.getElementById('card-popup'); const cardPopup = document.getElementById('card-popup');
const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`); cardPopup.innerHTML = `
const data = await response.json(); <div style="font-family: 'Sorts Mill Goudy', serif; text-align: center;">
const imageUrl = data.image_uris ? data.image_uris.small : null; <strong>${cardName}</strong>
</div>
if (imageUrl) { <img src="${imageUrl}" alt="${cardName}">
cardPopup.innerHTML = `<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.display = 'block';
cardPopup.style.opacity = 1; cardPopup.style.opacity = 1;
if (parseFloat(price) >= soundThreshold) {
playSound();
}
// Dissolve the popup after a few seconds // Dissolve the popup after a few seconds
setTimeout(() => { setTimeout(() => {
cardPopup.style.opacity = 0; cardPopup.style.opacity = 0;
@ -112,6 +139,10 @@ async function showCardPopup(cardName, setCode) {
}, 500); }, 500);
}, 3000); }, 3000);
} }
function playSound() {
const audio = new Audio('cash-money.mp3');
audio.play();
} }
function getRandomWordsFromFile() { function getRandomWordsFromFile() {
@ -120,7 +151,7 @@ function getRandomWordsFromFile() {
const randomIndex = Math.floor(Math.random() * randomWords.length); const randomIndex = Math.floor(Math.random() * randomWords.length);
randomWordsSelected.push(randomWords[randomIndex]); randomWordsSelected.push(randomWords[randomIndex]);
} }
return randomWordsSelected.join('_'); return randomWordsSelected.join('-');
} }
async function downloadCSV() { async function downloadCSV() {

BIN
cash-money.mp3 Normal file
View File

Binary file not shown.

8
index.html
View File

@ -11,6 +11,14 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="menu">
<div class="hamburger-menu" onclick="toggleMenu()">☰</div>
<div id="menu-content" class="menu-content">
<label for="sound-threshold">Sound Threshold (USD):</label>
<input type="number" id="sound-threshold" min="0.01" step="0.01" value="1.00">
</div>
</div>
<h1>MTG Card CSV Generator</h1> <h1>MTG Card CSV Generator</h1>
<form id="card-form"> <form id="card-form">
<div> <div>

4
service-worker.js
View File

@ -7,7 +7,9 @@ self.addEventListener('install', (event) => {
'/styles.css', '/styles.css',
'/app.js', '/app.js',
'/manifest.json', '/manifest.json',
'/icon.png' '/icon.png',
'/cash-money.mp3',
'/randomWords.js'
]); ]);
}) })
); );

45
styles.css
View File

@ -113,3 +113,48 @@ button:hover {
max-width: 60%; max-width: 60%;
} }
} }
.menu {
position: relative;
display: inline-block;
}
.hamburger-menu {
cursor: pointer;
font-size: 30px;
color: var(--text-color, black); /* Ensure the color follows the theme */
}
.menu-content {
display: none;
position: absolute;
top: 40px;
left: 0; /* Change to left for opposite direction */
background-color: var(--background-color, white); /* Background color follows the theme */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
padding: 10px;
z-index: 1;
min-width: 150px;
}
.menu-content label,
.menu-content input {
color: var(--text-color, black); /* Text color follows the theme */
font-family: 'Sorts Mill Goudy', serif;
}
.menu-content.show {
display: block;
}
/* Dark mode styles */
body.dark-mode .menu-content {
background-color: #333; /* Dark background for dark mode */
}
body.dark-mode .hamburger-menu,
body.dark-mode .menu-content label,
body.dark-mode .menu-content input {
color: white; /* White text for dark mode */
}