forked from La_Bureautique/zeg1jeux
394 lines
8.6 KiB
JavaScript
394 lines
8.6 KiB
JavaScript
|
|
async function getCrafts() {
|
|
|
|
const res = await fetch("./data/crafts.json");
|
|
const data = await res.json();
|
|
|
|
return data;
|
|
};
|
|
|
|
async function getCollections() {
|
|
|
|
const res = await fetch("./data/collections.json");
|
|
const data = await res.json();
|
|
|
|
return data;
|
|
};
|
|
|
|
function updateSelectedCollection (selected = 0) {
|
|
|
|
var previouslySelectedCollection = document.querySelector('#collections nav ul li.selected');
|
|
|
|
if (previouslySelectedCollection != null) {
|
|
|
|
previouslySelectedCollection.classList.remove('selected');
|
|
}
|
|
|
|
|
|
var collections = document.querySelectorAll('#collections nav ul li');
|
|
|
|
console.log(collections);
|
|
|
|
var newlySelectedCollection = collections[selected];
|
|
|
|
console.log(newlySelectedCollection);
|
|
|
|
newlySelectedCollection.classList.add('selected');
|
|
|
|
}
|
|
|
|
async function printCollections (crafts, collections) {
|
|
|
|
var collectionsElt = document.getElementById('collections');
|
|
var collectionsNavElt = collectionsElt.querySelector('nav ul');
|
|
|
|
collectionsNavElt.innerHTML = '';
|
|
|
|
var cssClass = '';
|
|
|
|
collections.forEach(function (collection, index) {
|
|
|
|
if (collection.items != undefined) {
|
|
|
|
cssClass = '';
|
|
|
|
collectionsNavElt.innerHTML +=
|
|
'<li' + cssClass + '>' +
|
|
'<a href="#" ' +
|
|
'title="' + collection.name + '" ' +
|
|
'>' +
|
|
|
|
'<img src="data/img/' + collection.img + '" ' +
|
|
'alt="' + collection.name + '" ' +
|
|
'/>' +
|
|
'</a>' +
|
|
'</li>';
|
|
}
|
|
});
|
|
|
|
displayCollection(crafts, collections);
|
|
|
|
collectionsElt.querySelectorAll('li').forEach(function (elt, index) {
|
|
|
|
elt.addEventListener('click', function () {
|
|
|
|
console.log(index);
|
|
|
|
displayCollection(crafts, collections, index);
|
|
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
async function displayCollection (crafts, collections, collectionId = 0) {
|
|
|
|
updateSelectedCollection(collectionId);
|
|
|
|
itemsListElt = document.querySelector('#collections .items-list');
|
|
|
|
itemsListElt.innerHTML = '';
|
|
|
|
collections[collectionId].items.forEach(function (itemId){
|
|
|
|
itemsListElt.innerHTML +=
|
|
'<li>' +
|
|
'<a href="#" ' +
|
|
'onclick="displayRecipe('+ itemId + ', 0)" ' +
|
|
'title="' + crafts[itemId].name + '" ' +
|
|
'>' +
|
|
|
|
'<img src="data/img/' + crafts[itemId].img + '" ' +
|
|
'alt="' + crafts[itemId].name + '" ' +
|
|
'/>' +
|
|
'</a>' +
|
|
'</li>';
|
|
});
|
|
}
|
|
|
|
|
|
async function printItemsList () {
|
|
|
|
crafts = await getCrafts();
|
|
|
|
itemsListElt = document.getElementById('items-list');
|
|
|
|
crafts.forEach(function (item, index) {
|
|
|
|
if (item.recipes != undefined) {
|
|
|
|
itemsListElt.innerHTML +=
|
|
'<li>' +
|
|
'<a href="#" ' +
|
|
'onclick="displayRecipe('+ index + ', 0)" ' +
|
|
'title="' + item.name + '" ' +
|
|
'>' +
|
|
|
|
'<img src="data/img/' + item.img + '" ' +
|
|
'alt="' + item.name + '" ' +
|
|
'/>' +
|
|
'</a>' +
|
|
'</li>';
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function padIngredient (nbIngredients, str) {
|
|
|
|
if (nbIngredients <= 1 ||
|
|
nbIngredients == 4 ||
|
|
nbIngredients == 9 ||
|
|
nbIngredients == 16) {
|
|
|
|
return '';
|
|
|
|
} else if (nbIngredients < 4) {
|
|
|
|
return str.repeat(4 - nbIngredients);
|
|
|
|
} else if (nbIngredients < 9) {
|
|
|
|
return str.repeat(9 - nbIngredients);
|
|
|
|
} else if (nbIngredients < 16) {
|
|
|
|
return str.repeat(16 - nbIngredients);
|
|
|
|
} else if (nbIngredients < 25) {
|
|
|
|
return str.repeat(25 - nbIngredients);
|
|
}
|
|
}
|
|
|
|
async function displayRecipe (itemId, recipeId = 0, elementId = 'recipe-main', bc_item = null, bc_recipe = null) {
|
|
|
|
crafts = await getCrafts();
|
|
|
|
recipeElt = document.getElementById(elementId);
|
|
ingredientsElt = recipeElt.querySelector('.ingredients');
|
|
actionElt = recipeElt.querySelector('.action');
|
|
resultElt = recipeElt.querySelector('.result');
|
|
itemNameElt = recipeElt.querySelector('.item-name');
|
|
otherRecipesElt = recipeElt.querySelector('.other-recipes ul');
|
|
detailsElt = recipeElt.querySelector('.recipe-details');
|
|
detailsContentElt = detailsElt.querySelector('div');
|
|
|
|
actionElt.innerHTML = '<a href="#"> </a>';
|
|
resultElt.innerHTML = " ";
|
|
otherRecipesElt.innerHTML = "";
|
|
detailsContentElt.innerHTML = "";
|
|
|
|
recipeElt.style.visibility = 'visible';
|
|
detailsElt.style.visibility = 'hidden';
|
|
|
|
itemNameElt.innerHTML = '' + crafts[itemId].name + '';
|
|
|
|
resultElt_content =
|
|
'<img src="data/img/' + crafts[itemId].img + '" ' +
|
|
'alt="' + crafts[itemId].name + '" ' +
|
|
'title="' + crafts[itemId].name + '" ' +
|
|
'/>';
|
|
|
|
if (elementId == 'recipe-aux' && bc_item != null) {
|
|
|
|
resultElt_content =
|
|
'<a href="#" ' +
|
|
'onclick="displayRecipe(' + bc_item + ', ' + bc_recipe +', \'recipe-aux\')" ' +
|
|
'>' +
|
|
resultElt_content +
|
|
'</a>';
|
|
}
|
|
|
|
resultElt.innerHTML = resultElt_content;
|
|
|
|
blackHoleStr = '<li class="ingredient"><img src="data/img/black-hole.png" /></li>';
|
|
|
|
|
|
|
|
if (crafts[itemId].recipes == undefined) {
|
|
|
|
ingredientsElt.innerHTML = blackHoleStr;
|
|
|
|
|
|
} else {
|
|
|
|
recipes = crafts[itemId].recipes;
|
|
|
|
ingredients = recipes[recipeId].ingredients;
|
|
|
|
if (ingredients == undefined) {
|
|
|
|
ingredientsElt.innerHTML = blackHoleStr;
|
|
|
|
} else {
|
|
|
|
ingredientsElt.innerHTML = '';
|
|
|
|
nbIngredients = ingredients.length;
|
|
|
|
ingredientsElt.className = 'ingredients ';
|
|
|
|
if (nbIngredients > 16) {
|
|
|
|
ingredientsElt.className += "grid-25";
|
|
|
|
} else if (nbIngredients > 9) {
|
|
|
|
ingredientsElt.className += "grid-16";
|
|
|
|
} else if (nbIngredients > 4) {
|
|
|
|
ingredientsElt.className += "grid-9";
|
|
|
|
} else if (nbIngredients > 1) {
|
|
|
|
ingredientsElt.className += "grid-4";
|
|
|
|
} else {
|
|
|
|
ingredientsElt.className += "";
|
|
|
|
}
|
|
|
|
var i = 1;
|
|
|
|
console.log(ingredients);
|
|
|
|
ingredients.forEach (function (ingredient) {
|
|
|
|
unit = (ingredient.unit != undefined) ? (' ' + ingredient.unit) : '';
|
|
|
|
qty = (ingredient.qty == undefined) ? '' : '<span class="qty">' + ingredient.qty + '</span>';
|
|
|
|
title =
|
|
(ingredient.qty == undefined) ?
|
|
crafts[ingredient.ref].name : (
|
|
(ingredient.unit == undefined) ?
|
|
ingredient.qty + ' ' + crafts[ingredient.ref].name :
|
|
ingredient.qty + ' ' + ingredient.unit + ' de ' + crafts[ingredient.ref].name
|
|
);
|
|
|
|
|
|
// displayOn = (elementId == 'recipe-main') ? 'recipe-aux' : 'recipe-main';
|
|
displayOn = 'recipe-aux';
|
|
|
|
if (elementId == 'recipe-aux') {
|
|
|
|
bc_item = itemId;
|
|
bc_recipe = recipeId;
|
|
|
|
} else {
|
|
|
|
bc_item = null;
|
|
bc_recipe = null;
|
|
}
|
|
|
|
ingredientsElt.innerHTML +=
|
|
'<li class="ingredient">' +
|
|
qty +
|
|
'<a href="#" ' +
|
|
'onclick="displayRecipe('+ ingredient.ref + ', 0, \'' + displayOn + '\', '+ bc_item +', '+ bc_recipe + ')"' +
|
|
'title="' + title + '"' +
|
|
'>' +
|
|
'<img src="data/img/' + crafts[ingredient.ref].img + '" ' +
|
|
'alt="' + crafts[ingredient.ref].name + '" ' +
|
|
'/>' +
|
|
'</a>' +
|
|
'</li>';
|
|
|
|
i++;
|
|
});
|
|
|
|
|
|
ingredientsElt.innerHTML += padIngredient(nbIngredients, '<li class="ingredient"></li>');
|
|
}
|
|
|
|
|
|
|
|
action = (recipes[recipeId].action == undefined) ? '' : recipes[recipeId].action;
|
|
|
|
if (recipes[recipeId].details != undefined) {
|
|
|
|
actionElt.className += ' has-details';
|
|
}
|
|
|
|
actionElt.innerHTML =
|
|
'<a href="#" ' +
|
|
'onclick="showDetails(\'' + elementId + '\', \'' + recipeId + '\')" ' +
|
|
'>'+
|
|
action +
|
|
'</a>';
|
|
|
|
|
|
if ((details = crafts[itemId].recipes[recipeId].details) != undefined) {
|
|
|
|
detailsContentElt.innerHTML = details;
|
|
}
|
|
|
|
nbRecipes = recipes.length;
|
|
|
|
if (nbRecipes == 1) {
|
|
|
|
if (recipes[0].name != undefined) {
|
|
|
|
otherRecipesElt.innerHTML +=
|
|
'<li>' +
|
|
'<strong>' +
|
|
recipes[0].name +
|
|
'</strong>' +
|
|
'</li>';
|
|
|
|
}
|
|
|
|
} else if (nbRecipes > 1) {
|
|
|
|
for (i = 0; i < nbRecipes; i++) {
|
|
|
|
otherRecipeName = (recipes[i].name != undefined) ?
|
|
recipes[i].name :
|
|
"recette n°" + (i + 1);
|
|
|
|
if (i == recipeId) {
|
|
|
|
otherRecipesElt.innerHTML +=
|
|
'<li>' +
|
|
'<strong>' +
|
|
otherRecipeName +
|
|
'</strong>' +
|
|
'</li>';
|
|
|
|
} else {
|
|
|
|
otherRecipesElt.innerHTML +=
|
|
'<li>' +
|
|
'<a href="#" ' +
|
|
'onclick="displayRecipe(' + itemId + ', ' + i + ', \''+ elementId + '\')">' +
|
|
otherRecipeName +
|
|
'</a>'
|
|
'</li>';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
showDetails = function (elementId) {
|
|
|
|
detailsElt = document.querySelector('#' + elementId + ' .recipe-details');
|
|
detailsElt.style.visibility = "visible";
|
|
}
|
|
|
|
// printItemsList();
|
|
|
|
window.addEventListener('load', async function () {
|
|
|
|
const crafts = await getCrafts();
|
|
|
|
const collections = await getCollections();
|
|
|
|
printCollections(crafts, collections);
|
|
});
|