diff --git a/css/cards.css b/css/cards.css index ccc7bc4..f8f2087 100644 --- a/css/cards.css +++ b/css/cards.css @@ -180,7 +180,7 @@ p { font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 16px; margin-top: 5px; - height: 84px; + height: 90px; } .full-description { @@ -292,16 +292,19 @@ p { cursor: pointer; } -.statusicon{ - height: 20px; - width: 20px; +.ItemIcons{ + width: 11px; + height: 11px; + min-width: 11px; + height: 11px; background-repeat: no-repeat; background-size: cover; padding: 5px; + margin: 0 3px; } .IconContainer { - margin-top: auto; + margin-top: calc(auto + 3px); display: flex; justify-content: flex-end; align-items: center; diff --git a/css/item.css b/css/item.css index f8a8e1a..1a92820 100644 --- a/css/item.css +++ b/css/item.css @@ -25,7 +25,7 @@ .itemdescriptioncont{ font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; color: #ecf9fb; - margin-top: 10px; + margin-top: 3px; } .itemdescription, .itemtitle, .itemtranslator, .iteminfo{ @@ -56,6 +56,7 @@ .ItemImageContainer{ margin-right: 15px; + width: 100px; } @@ -97,19 +98,8 @@ } -.ItemIcon { - width: 46px; - height: 46px; -} -.ItemIcon { - width: 100%; - display: flex; - flex-wrap: wrap; - align-items: center; -} - .error404{ display: flex; background-color: #26292f; @@ -218,3 +208,11 @@ margin-right: 2px; margin-left: 2px; } + +.IconContainer{ + margin-top: 5px; + width: 100%; + display: flex; + flex-wrap: wrap!important; + justify-content:flex-start!important; +} \ No newline at end of file diff --git a/icon/completed.svg b/icon/completed.svg new file mode 100644 index 0000000..2d33b3f --- /dev/null +++ b/icon/completed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icon/minecraft.svg b/icon/minecraft.svg new file mode 100644 index 0000000..1bd87ca --- /dev/null +++ b/icon/minecraft.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icon/other.svg b/icon/other.svg new file mode 100644 index 0000000..77dd9d4 --- /dev/null +++ b/icon/other.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icon/semiverified.svg b/icon/semiverified.svg new file mode 100644 index 0000000..dfb2412 --- /dev/null +++ b/icon/semiverified.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/icon/verified.svg b/icon/verified.svg new file mode 100644 index 0000000..b6bb1bf --- /dev/null +++ b/icon/verified.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/icons.json b/icons.json index 89a10d7..44be751 100644 --- a/icons.json +++ b/icons.json @@ -1,18 +1,28 @@ { "completed": { "icon_id": 1, - "icon": "https://svgshare.com/i/13yx.svg", + "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0BAC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' width='24' height='24'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' fill='none'%3E%3C/path%3E%3C/svg%3E", "title": "У роботі" }, "semiverified": { "icon_id": 2, - "icon": "https://svgshare.com/i/13yF.svg", + "icon": "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:none;stroke:%23B0BAC5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} %3C/style%3E %3Cpath class='st0' d='M6.7,4.9h10.6c1,0,1.8,0.8,1.8,1.8v10.6c0,1-0.8,1.8-1.8,1.8H6.7c-1,0-1.8-0.8-1.8-1.8V6.7C4.9,5.7,5.7,4.9,6.7,4.9z'/%3E %3Crect x='9.3' y='9.3' class='st0' width='5.3' height='5.3'/%3E %3Cline class='st0' x1='9.3' y1='2.2' x2='9.3' y2='4.9'/%3E %3Cline class='st0' x1='14.7' y1='2.2' x2='14.7' y2='4.9'/%3E %3Cline class='st0' x1='9.3' y1='19.1' x2='9.3' y2='21.8'/%3E %3Cline class='st0' x1='14.7' y1='19.1' x2='14.7' y2='21.8'/%3E %3Cline class='st0' x1='19.1' y1='9.3' x2='21.8' y2='9.3'/%3E %3Cline class='st0' x1='19.1' y1='13.8' x2='21.8' y2='13.8'/%3E %3Cline class='st0' x1='2.2' y1='9.3' x2='4.9' y2='9.3'/%3E %3Cline class='st0' x1='2.2' y1='13.8' x2='4.9' y2='13.8'/%3E %3C/svg%3E", "title": "Розробник або додасть, або існує ще один переклад" }, "verified": { "icon_id": 3, - "icon": "https://svgshare.com/i/13yn.svg", + "icon": "data:image/svg+xml,%3Csvg version='1.1' id='Шар_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:none;stroke:%23B0BAC5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} %3C/style%3E %3Ccircle class='st0' cx='12' cy='12' r='9.6'/%3E %3Cline class='st0' x1='2.4' y1='12' x2='21.6' y2='12'/%3E %3Cpath class='st0' d='M12,2.4c2.4,2.6,3.8,6.1,3.9,9.6c-0.1,3.6-1.4,7-3.9,9.6C9.6,19,8.2,15.6,8.1,12C8.2,8.4,9.6,5,12,2.4z'/%3E %3C/svg%3E", "title": "Розробник моду додав наш переклад" + }, + "minecraft": { + "icon_id": 4, + "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve' width='24' height='24'%3E%3Cpath fill='none' stroke='%23B0BAC5' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' d='M2.7 6.6v10.8l9.3 5.3 9.3-5.3V6.6L12 1.3zm0 0L12 12m9.3-5.4L12 12m0 10.7V12'/%3E%3C/svg%3E", + "title": "Це майнкрафт мод" + }, + "other": { + "icon_id": 5, + "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' width='24' height='24'%3E%3Crect width='20' height='14' x='2' y='3' rx='2' ry='2' stroke='%23B0BAC5' fill='none' stroke-width='2px'%3E%3C/rect%3E%3Cpath d='M8 21h8m-4-4v4' stroke='%23B0BAC5' fill='none' stroke-width='2px'%3E%3C/path%3E%3C/svg%3E", + "title": "Це програма або гра" } } \ No newline at end of file diff --git a/index.html b/index.html index 02cc02f..38c86ac 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,6 @@
Про нас
ЧАПИ
Додати переклад
-
diff --git a/js/item.js b/js/item.js index fe3b2b0..21c3521 100644 --- a/js/item.js +++ b/js/item.js @@ -82,51 +82,6 @@ $(document).ready(() => { return trimmedLink; } - - - - - function getModIcon(mod) { - if (mod.completed === false) { - return 'completed'; - } else if (mod.semiverified === true) { - return 'semiverified'; - } else if (mod.verified === true) { - return 'verified'; - } - // Return an empty string if none of the conditions match - return ''; - } - - // Function to apply styles based on modIcon - function applyIconStyles(modIcon) { - const itemIconElement = $('#itemicon'); - - // Remove existing icon styles - itemIconElement.removeClass('statusicon completedIcon semiverifiedIcon verifiedIcon'); - - // Add styles based on modIcon - if (modIcon) { - // Use addIcon function to add the icon dynamically - addIcon(itemIconElement[0], modIcon); - } - } - - - // Function to add icons based on status - function addIcon(element, type) { - const iconContainer = document.createElement('div'); - - // Use Promise to get icon data - getIconData(type).then(iconData => { - if (iconData.icon) { - iconContainer.style.backgroundImage = `url('${iconData.icon}')`; - iconContainer.classList.add(`statusicon`, `${type}Icon`); - element.appendChild(iconContainer); - } - }); - } - function truncateText(text, maxLength) { if (text.length > maxLength) { @@ -267,9 +222,6 @@ async function updateItemPage() { // Determine if the item is from mods.json const isMod = modsData.some(mod => mod.id === selectedItem.id); - // Determine the icon based on mod properties - const modIcon = getModIcon(selectedItem); - // Determine the game version text const gameVersionText = selectedItem.gameversion ? `

Версія гри: ${selectedItem.gameversion}

` : ''; @@ -299,7 +251,9 @@ async function updateItemPage() {
-
+
+ +

${selectedItem.title}

@@ -331,8 +285,8 @@ async function updateItemPage() { // Update the total translation count updateTotalTranslation(modsData, otherData); + populateIconContainer(selectedItem, modsData, otherData); - applyIconStyles(modIcon); } else { document.title = "Йой, халепа"; @@ -411,3 +365,100 @@ function updateTotalTranslation(mods, other) { if (modsData && otherData) { updateTotalTranslation(modsData, otherData); } + +// Function to get status classes based on certain conditions +function getStatusClasses(selectedItem, modsData, otherData) { + try { + // Initialize an array to store status classes + const statusClasses = []; + + // Add status classes based on item properties or conditions + if (selectedItem.verified === true) { + statusClasses.push('verified'); + } else if (selectedItem.semiverified === true) { + statusClasses.push('semiverified'); + } + if (selectedItem.completed === false) { + statusClasses.push('completed'); + } + // Add more conditions as needed + + // Check if the mod exists in modsData + const modExistsInModsData = modsData.some(modData => modData.id === selectedItem.id); + // Check if the mod exists in otherData + const modExistsInOtherData = otherData.some(otherMod => otherMod.id === selectedItem.id); + + if (modExistsInModsData) { + statusClasses.push('minecraft'); + } else if (modExistsInOtherData) { + statusClasses.push('other'); + } + + + // Return the array of status classes + return statusClasses; + } catch (error) { + console.error("Error getting status classes:", error); + return []; // Return an empty array in case of error + } +} + + +// Function to fetch icon data from icons.json +async function getIconData() { + try { + const iconsResponse = await fetch('icons.json'); + return await iconsResponse.json(); + } catch (error) { + console.error("Error fetching icon data:", error); + return null; + } +} + +function addIcons(iconsData, statusClasses) { + try { + // Check if iconsData is an object + if (typeof iconsData === 'object' && iconsData !== null) { + // Generate HTML for each icon + const iconHTML = statusClasses.map(statusClass => { + const icon = iconsData[statusClass]; + // Check if the icon object exists + if (icon) { + // Use an element to display the SVG icon + return `
`; + } else { + console.error(`Error: Icon for status class '${statusClass}' not found`); + return ''; // Return an empty string for missing icons + } + }).join(''); + + // Append the generated HTML to IconContainer + $('#IconContainer').html(iconHTML); + } else { + console.error("Error: iconsData is not an object"); + } + } catch (error) { + console.error("Error adding icons:", error); + } +} + +// Function to populate IconContainer with SVG icons from icons.json +async function populateIconContainer(selectedItem, modsData, otherData) { + try { + // Fetch icons data + const iconsData = await getIconData(); + + // Determine status classes for the item + const statusClasses = getStatusClasses(selectedItem, modsData, otherData); + + // Add icons to the IconContainer + addIcons(iconsData, statusClasses); + } catch (error) { + console.error("Error populating icon container:", error); + } +} + + + + + diff --git a/js/showcards.js b/js/showcards.js index 1488719..34ffd7d 100644 --- a/js/showcards.js +++ b/js/showcards.js @@ -8,17 +8,19 @@ let modsData; let otherData; let filteredData; -// Function to create a card for each mod function createModCard(mod) { const card = document.createElement('div'); card.classList.add('card'); - // Determine the status class based on priority - let statusClass = getStatusClass(mod); + // Call getStatusClasses with modsData and otherData + let statusClasses = getStatusClasses(mod, modsData, otherData); - // Only add the status class if it's not empty - if (statusClass) { - card.classList.add(statusClass); // Add the status class to the card + + // Only add the status classes if they are not empty + if (statusClasses.length > 0) { + statusClasses.forEach(statusClass => { + card.classList.add(statusClass); // Add each status class to the card + }); } card.id = `${mod.id}`; @@ -28,7 +30,8 @@ function createModCard(mod) {

${mod.title}

-

від ${truncateText(mod.author, 35)}

+

від ${truncateText(mod.author, 35)} +

`; @@ -41,17 +44,17 @@ function createModCard(mod) { shortDescription.innerText = mod.description.length > 100 ? mod.description.substring(0, 100) + '...' : mod.description; descriptionContainer.appendChild(shortDescription); -// Add icons based on status -if (statusClass) { - const iconContainer = document.createElement('div'); - iconContainer.classList.add('IconContainer'); + // Add icons based on status classes + if (statusClasses.length > 0) { + const iconContainer = document.createElement('div'); + iconContainer.classList.add('IconContainer'); - // Use Promise to get icon data - addIcon(iconContainer, statusClass); + // Use Promise to get icon data + addIcons(iconContainer, statusClasses); - // Append the IconContainer to descriptionContainer - descriptionContainer.appendChild(iconContainer); -} + // Append the IconContainer to descriptionContainer + descriptionContainer.appendChild(iconContainer); + } // Add a click event listener to redirect to the item page when clicking on cardimage or textContainer const clickableElements = card.querySelectorAll('.cardimage, .modtitle'); @@ -76,50 +79,72 @@ if (statusClass) { -// Function to get the status class based on mod properties -function getStatusClass(mod) { + +// Function to get the status classes based on mod properties and type +function getStatusClasses(mod, modsData, otherData) { + const statusClasses = []; + if (mod.completed === false) { - return 'completed'; + statusClasses.push('completed'); } else if (mod.semiverified === true) { - return 'semiverified'; + statusClasses.push('semiverified'); } else if (mod.verified === true) { - return 'verified'; + statusClasses.push('verified'); } - // Return an empty string if none of the conditions match - return ''; + + // Check if the mod exists in modsData + const modExistsInModsData = modsData.some(modData => modData.id === mod.id); + // Check if the mod exists in otherData + const modExistsInOtherData = otherData.some(otherMod => otherMod.id === mod.id); + + if (modExistsInModsData) { + statusClasses.push('minecraft'); + } else if (modExistsInOtherData) { + statusClasses.push('other'); + } + + // Return an array of status classes + return statusClasses; } // Function to get icon data from Icons.json -function getIconData(statusClass) { +function getIconData(statusClasses) { // Replace this with the actual path to your Icons.json file const iconsJsonPath = 'icons.json'; // Return a Promise for fetching and processing the icon data return fetch(iconsJsonPath) .then(response => response.json()) - .then(iconData => iconData[statusClass] || {}) + .then(iconData => { + const icons = []; + statusClasses.forEach(statusClass => { + const icon = iconData[statusClass]; + if (icon && icon.icon) { + icons.push(icon); + } + }); + return icons; + }) .catch(error => { console.error('Error fetching icon data:', error); - return {}; + return []; }); } -// Function to add icons based on status -function addIcon(element, type) { - const iconContainer = document.createElement('div'); - +// Function to add icons based on files and status +function addIcons(element, statusClasses) { // Use Promise to get icon data - getIconData(type).then(iconData => { - if (iconData.icon) { + getIconData(statusClasses).then(icons => { + icons.forEach(iconData => { + const iconContainer = document.createElement('div'); iconContainer.title = iconData.title || ''; - iconContainer.style.backgroundImage = `url('${iconData.icon}')`; - iconContainer.classList.add(`statusicon`, `${type}Icon`); + iconContainer.style.backgroundImage = `url("${iconData.icon}")`; + iconContainer.classList.add('ItemIcons', `${iconData.class}Icon`); element.appendChild(iconContainer); - } + }); }); } - function truncateText(text, maxLength) { if (text.length > maxLength) { return text.substring(0, maxLength) + '...'; diff --git a/mods.json b/mods.json index 61c837e..3559159 100644 --- a/mods.json +++ b/mods.json @@ -81,7 +81,7 @@ }, { "title": "delightful", - "description": "Налаштовуваний аддон Farmer's Delight з функціями сумісності та захоплюючими новими продуктами.", + "description": "Налаштовуване доповнення до Farmer's Delight з новими видами їжі, спорядження та продуктів.", "image": "https://cdn.modrinth.com/data/JtSnhtNJ/707d7697b315dd6dfc84648c893bf3e057bb3e34.png", "verified": true, "author": "СУМ", @@ -90,11 +90,20 @@ "https://www.curseforge.com/minecraft/mc-mods/delightful", "https://modrinth.com/mod/delightful" ], - "id": "000005" + "id": "000005", + "gameversion": "1.19+", + "categories": [ + "Спорядження", + "Їжа", + "Зберігання", + "Корисні функції", + "Генерація створення" + ], + "engine": "Forge, NeoForge" }, { "title": "End's Delight", - "description": "End's Delight - це аддон-мод для Farmer's Delight, заснований на додаванні кулінарного контенту з предметів Енду!", + "description": "End's Delight - це аддон-мод для Farmer's Delight, заснований на додаванні нового кулінарного контенту з предметів Енду!", "image": "https://cdn.modrinth.com/data/yHN0njMr/8b215554e49c51cb5bb5ded435263d2078e0829e.png", "verified": true, "author": "СУМ", @@ -103,11 +112,17 @@ "https://www.curseforge.com/minecraft/mc-mods/ends-delight", "https://modrinth.com/mod/ends-delight" ], - "id": "000006" + "id": "000006", + "gameversion": "1.16.5+", + "categories": [ + "Їжа", + "Генерація створення" + ], + "engine": "Fabric, Forge" }, { "title": "Framed Compacting Drawers", - "description": "Це аддон-мод до Storage Drawers, який додає безмежно велику кількість нових ящиків до гри.", + "description": "Це доповнення до Storage Drawers, який додає нові шухляди, контролери та інші блоки з основного моду.\r\nВсі шухляди можна оздобити з кожної сторони будь-яким блоком в грі(підтримуються навіть блоки з інших модів).", "image": "https://media.forgecdn.net/avatars/264/387/637226486288344415.png", "verified": false, "author": "СУМ", @@ -115,7 +130,14 @@ "link": [ "https://www.curseforge.com/minecraft/mc-mods/framed-compacting-drawers" ], - "id": "000007" + "id": "000007", + "gameversion": "1.12.2+", + "categories": [ + "Декорації", + "Зберігання", + "Корисні функції" + ], + "engine": "Forge" }, { "title": "Frozen Delight",