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

Added color themes based on mana colors

Browse Source
This commit is contained in:
Caleb Fultz 2024-08-20 23:32:47 -04:00
parent 175e62ef60
commit 6b3a8e837f
3 changed files with 156 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app.js
View File

@ -1,9 +1,33 @@
import { randomWords } from './randomWords.js';
// 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);
@ -26,6 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 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
@ -35,12 +60,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// 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();

9
index.html
View File

@ -8,12 +8,21 @@
<link rel="manifest" href="manifest.json">
<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" />
</head>
<body>
<div class="container">
<div class="menu">
<div class="hamburger-menu" onclick="toggleMenu()">☰</div>
<div id="menu-content" class="menu-content">
<label>Select Theme:</label>
<div id="theme-selector">
<span class="mana-icon" onclick="setTheme('theme-white')">&#xe600;</span> <!-- White -->
<span class="mana-icon" onclick="setTheme('theme-blue')">&#xe601;</span> <!-- Blue -->
<span class="mana-icon" onclick="setTheme('theme-black')">&#xe602;</span> <!-- Black -->
<span class="mana-icon" onclick="setTheme('theme-red')">&#xe603;</span> <!-- Red -->
<span class="mana-icon" onclick="setTheme('theme-green')">&#xe604;</span> <!-- Green -->
</div>
<label for="sound-threshold">Sound Threshold (USD):</label>
<input type="number" id="sound-threshold" min="0.01" step="0.01" value="1.00">
</div>

121
styles.css
View File

@ -6,6 +6,89 @@
--button-hover: #005fa3;
}
.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;
@ -16,6 +99,44 @@
}
}
.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);