diff --git a/app.js b/app.js index 566f571..ca1f93c 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,7 @@ import { randomWords } from './randomWords.js'; let cardList = []; +let soundThreshold = 1.00; // Default sound threshold document.addEventListener('DOMContentLoaded', () => { document.getElementById('add-card-button').addEventListener('click', addCard); @@ -21,8 +22,25 @@ document.addEventListener('DOMContentLoaded', () => { 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) { const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`); const data = await response.json(); @@ -37,7 +55,9 @@ async function fetchCardDetails(cardName, setCode) { 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' + 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(); document.getElementById('csv-output').value = csvContent; - // Show the card image in the dissolving popup - showCardPopup(cardName, setCode); + // Show the card image, name, and price in the dissolving popup + showCardPopup(cardName, cardDetails.imageUrl, cardDetails.price); } function generateCSVContent() { @@ -93,25 +113,36 @@ function generateCSVContent() { return csvContent; } -async function showCardPopup(cardName, setCode) { +async function showCardPopup(cardName, imageUrl, price) { 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; + cardPopup.innerHTML = ` +
+ ${cardName} +
+ ${cardName} +
+ Price: $${price} +
+ `; + cardPopup.style.display = 'block'; + cardPopup.style.opacity = 1; - if (imageUrl) { - cardPopup.innerHTML = `${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); + 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() { @@ -120,7 +151,7 @@ function getRandomWordsFromFile() { const randomIndex = Math.floor(Math.random() * randomWords.length); randomWordsSelected.push(randomWords[randomIndex]); } - return randomWordsSelected.join('_'); + return randomWordsSelected.join('-'); } async function downloadCSV() { diff --git a/cash-money.mp3 b/cash-money.mp3 new file mode 100644 index 0000000..04abc8e Binary files /dev/null and b/cash-money.mp3 differ diff --git a/index.html b/index.html index 210c5c6..0955f05 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,14 @@
+ +

MTG Card CSV Generator

diff --git a/service-worker.js b/service-worker.js index 13d9075..b159467 100644 --- a/service-worker.js +++ b/service-worker.js @@ -7,7 +7,9 @@ self.addEventListener('install', (event) => { '/styles.css', '/app.js', '/manifest.json', - '/icon.png' + '/icon.png', + '/cash-money.mp3', + '/randomWords.js' ]); }) ); diff --git a/styles.css b/styles.css index 513c32b..cafcf32 100644 --- a/styles.css +++ b/styles.css @@ -113,3 +113,48 @@ button:hover { 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 */ +} + +