diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..783c6e3
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..0a583af
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..007fa97
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/spirits/default.png b/public/spirits/default.png
new file mode 100644
index 0000000..f307a67
Binary files /dev/null and b/public/spirits/default.png differ
diff --git a/public/spirits/gin tonic.png b/public/spirits/gin tonic.png
new file mode 100644
index 0000000..f307a67
Binary files /dev/null and b/public/spirits/gin tonic.png differ
diff --git a/src/main.js b/src/main.js
index 5d461d7..fdb287b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,14 +3,12 @@ import data from "./data.json";
let spiritsData = [];
let recipesData = [];
-// Cargar datos desde JSON
async function loadData() {
- console.log("data");
- console.log(data);
try {
spiritsData = data.spirits;
recipesData = data.recipes;
renderSpirits();
+ enableButtonsLogic();
} catch (error) {
console.error("Error cargando datos:", error);
document.getElementById("spiritsGrid").innerHTML =
@@ -32,6 +30,24 @@ function renderSpirits() {
`,
)
.join("");
+}
+
+function toggleSpirit(index, forcedCheckValue) {
+ const card = document.getElementById(`spirit-${index}`);
+ const checkbox = document.getElementById(`check-${index}`);
+ checkbox.checked =
+ forcedCheckValue !== undefined ? forcedCheckValue : !checkbox.checked;
+ card.classList.toggle("selected");
+
+ // Update buttons status only on natural toggle
+ if (forcedCheckValue === undefined) {
+ updateMixButtonStatus();
+ updateMassSelectButtonsStatus();
+ }
+}
+
+function enableButtonsLogic() {
+ const grid = document.getElementById("spiritsGrid");
// Add toggle logic to cards
spiritsData.map((spirit, index) => {
grid.querySelector(`#spirit-${index}`).addEventListener("click", (e) => {
@@ -44,28 +60,45 @@ function renderSpirits() {
section[0].querySelector(".mix-button").addEventListener("click", (e) => {
findRecipes();
});
+ section[0].querySelector(".mix-button").disabled = true;
}
-}
-
-function toggleSpirit(index) {
- const card = document.getElementById(`spirit-${index}`);
- const checkbox = document.getElementById(`check-${index}`);
- checkbox.checked = !checkbox.checked;
- card.classList.toggle("selected");
-
- // Check enable/disable mix button on card toggle
- updateMixButtonStatus();
-}
-
-function updateMixButtonStatus() {
- const section = document.getElementsByClassName("section");
- const selected = getSelectedSpirits();
+ // Add logic to select all / none buttons
if (section && section.length > 0) {
- section[0].querySelector(".mix-button").disabled = selected.length === 0;
+ section[0]
+ .querySelector("#select-all-button")
+ .addEventListener("click", (e) => {
+ selectAll();
+ });
+ section[0]
+ .querySelector("#select-none-button")
+ .addEventListener("click", (e) => {
+ selectNone();
+ });
+ updateMassSelectButtonsStatus();
}
}
-function getSelectedSpirits() {
+function updateMixButtonStatus(forcedDisabledValue) {
+ const section = document.getElementsByClassName("section");
+ const selected = getSelectedSpiritsTypes();
+ if (section && section.length > 0) {
+ section[0].querySelector(".mix-button").disabled =
+ forcedDisabledValue ?? selected.length === 0;
+ }
+}
+
+function updateMassSelectButtonsStatus() {
+ const section = document.getElementsByClassName("selection-options");
+ const selected = getSelectedSpiritsNames();
+ if (section && section.length > 0) {
+ section[0].querySelector("#select-all-button").disabled =
+ selected.length === spiritsData.length;
+ section[0].querySelector("#select-none-button").disabled =
+ selected.length === 0;
+ }
+}
+
+function getSelectedSpiritsTypes() {
const selectedSpirits = [];
spiritsData.forEach((spirit, index) => {
const checkbox = document.getElementById(`check-${index}`);
@@ -76,8 +109,49 @@ function getSelectedSpirits() {
return selectedSpirits;
}
+function getSelectedSpiritsNames() {
+ const selectedSpirits = [];
+ spiritsData.forEach((spirit, index) => {
+ const checkbox = document.getElementById(`check-${index}`);
+ if (checkbox.checked) {
+ selectedSpirits.push(spirit.name);
+ }
+ });
+ return selectedSpirits;
+}
+
+function selectAll() {
+ const selectAllButton = document.getElementById("select-all-button");
+ if (selectAllButton) {
+ const selectedNames = getSelectedSpiritsNames();
+ spiritsData.forEach((spirit, index) => {
+ if (!selectedNames.includes(spirit.name)) {
+ toggleSpirit(index, true);
+ }
+ });
+ }
+ updateMixButtonStatus(false);
+ updateMassSelectButtonsStatus();
+ return;
+}
+
+function selectNone() {
+ const selectNoneButton = document.getElementById("select-none-button");
+ if (selectNoneButton) {
+ const selectedNames = getSelectedSpiritsNames();
+ spiritsData.forEach((spirit, index) => {
+ if (selectedNames.includes(spirit.name)) {
+ toggleSpirit(index, false);
+ }
+ });
+ }
+ updateMixButtonStatus(true);
+ updateMassSelectButtonsStatus();
+ return;
+}
+
function findRecipes() {
- const selectedSpirits = getSelectedSpirits();
+ const selectedSpirits = getSelectedSpiritsTypes();
if (selectedSpirits.length === 0) {
document.getElementById("recipesContainer").innerHTML =
'
Por favor, selecciona al menos un licor para encontrar recetas.
';
@@ -101,15 +175,6 @@ function findRecipes() {
});
}
-// TODO: select all/none spirits
-// function selectAll() {
-// return;
-// }
-
-// function selectNone() {
-// return;
-// }
-
function renderRecipes(recipes) {
const container = document.getElementById("recipesContainer");
@@ -130,6 +195,7 @@ function renderRecipes(recipes) {
return `
+
${recipe.name}
Licores:
@@ -172,6 +238,14 @@ function renderRecipes(recipes) {
`
: ""
}
+
+
+
}.png)
+
`;
})
diff --git a/src/styles.css b/src/styles.css
index 47c1a40..98a52bd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -169,10 +169,10 @@ h2 {
left: -50%;
width: 200%;
height: 200%;
- background: radial-gradient(
- circle,
+ background: linear-gradient(
+ to left,
rgba(255, 255, 255, 0.8) 0%,
- transparent 70%
+ transparent 50% transparent 75%
);
opacity: 0;
transition: opacity 0.3s;
@@ -257,6 +257,9 @@ h2 {
}
.recipe-card {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
border-left: 5px solid var(--deep-red);
border-radius: 10px;
@@ -266,6 +269,10 @@ h2 {
animation: recipeAppear 0.5s ease-out backwards;
}
+.recipe-content {
+ width: 70%;
+}
+
.recipe-card:nth-child(1) {
animation-delay: 0.1s;
}
@@ -281,6 +288,9 @@ h2 {
.recipe-card:nth-child(5) {
animation-delay: 0.5s;
}
+.recipe-card:nth-child(6) {
+ animation-delay: 0.5s;
+}
@keyframes recipeAppear {
from {
@@ -361,6 +371,19 @@ h2 {
font-style: italic;
}
+.recipe-img {
+ width: 30%;
+ min-width: 30%;
+ max-width: 30%;
+}
+
+.recipe-img img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ display: block;
+}
+
.loading {
text-align: center;
padding: 2rem;