Initial Work on Mod Info Cards

This commit is contained in:
Sangelo 2023-06-11 15:08:14 +02:00
parent f6a32b5dad
commit f3234ef392
8 changed files with 312 additions and 173 deletions

View file

@ -0,0 +1,61 @@
<script>
export let mods = [];
</script>
<div class="container">
<div class="row">
{#each mods as mod, index (mod.name)}
<details>
<summary>{mod.name}</summary>
<article class="main-card">
<div>
<h4>{mod.name} | by {mod.author}</h4>
<p>
{#if mod.description}
{@html mod.description}
{/if}
</p>
<p>
Platforms:
{#each mod.platforms as platform}
{#if platform.url}
<a role="button" class="card-item" href={platform.url}>
<img
src={`/assets/icons/platforms/${platform.id}-white.svg`}
alt={platform.name}
class="logo"
/> {platform.name}
</a>
{:else if platform.name}
<span role="button" class="card-item">
<img
src={`/assets/icons/platforms/${platform.id}-white.svg`}
alt={platform.name}
class="logo"
/> {platform.name}
</span>
{/if}
{/each}
</p>
<p>
{mod.loaders} | {mod.version}
</p>
</div>
</article>
</details>
{/each}
</div>
</div>
<style>
.card-item {
margin-right: 0.5em;
justify-content: center;
align-content: center;
position: inherit;
}
.logo {
height: 1em;
justify-self: center;
}
</style>

View file

@ -46,6 +46,9 @@
.buttons { .buttons {
margin-left: 25%; margin-left: 25%;
margin-right: 25%; margin-right: 25%;
margin-bottom: 2em; margin-bottom: 1em;
}
.buttons [role="button"] {
margin-bottom: 1em;
} }
</style> </style>

View file

@ -1,185 +1,202 @@
<script>
import { onMount } from "svelte";
import ModInfo from "$lib/modules/ModInfo.svelte";
let mods = [];
async function loadMods() {
const response = await fetch("/assets/modlist/list.json");
mods = await response.json();
}
onMount(() => {
loadMods();
});
</script>
<h1>Modlist</h1> <h1>Modlist</h1>
<div>
<ModInfo {mods} />
</div>
<div class="container"> <div class="container">
<div class="column">
<ul>
<ul>
<li></li>
<li>Ad Astra!</li>
<li>Ada Paxels</li>
<li>Adorn</li>
<li>Advancement Plaques</li>
<li>AdventureZ</li>
<li>Alloy Forgery</li>
<li>Amethyst Tools</li>
<li>Angling Mod</li>
<li>Another Furniture</li>
<li>AntiGhost</li>
<li>Applied Energistics 2</li>
<li>Architectury</li>
<li>Auditory</li>
<li>Balm</li>
<li>Biome Makeover</li>
<li>Blocks</li>
<li>Boat Item View Fabric</li>
<li>Botarium</li>
<li>Chisel Refabricated</li>
<li>Chunky</li>
<li>Cloth Config v8</li>
<li>Continuity</li>
<li>Controlling For Fabric</li>
<li>Crafting Tweaks</li>
<li>Create Crafts and Additions</li>
<li>Croptopia</li>
<li>Detail Armor Bar</li>
<li>Eating Animaton</li>
<li>EldritchMobs</li>
<li>Enchanted Vertical Slabs</li>
<li>Enchanting Infuser</li>
<li>EntityCulling-Fabric</li>
<li>Extractinator</li>
<li>ExtrasSounds</li>
<li>Fabric language Kotlin</li>
<li>Fabric Waystones</li>
<li>Factory Blocks Mod</li>
<li>Falling Leaves</li>
<li>Fastback</li>
<li>FerriteCore</li>
<li>Frame</li>
<li>Global Packs</li>
<li>Hold That Chunk</li>
<li>Icarus</li>
<li>Iceberg</li>
<li>Indium</li>
<li>Interactic</li>
<li>Jade Addons</li>
<li>Konkrete</li>
<li>Ksyxis</li>
<li>Labels</li>
<li>Language Reload</li>
</ul>
</ul>
</div>
<div class="column">
<ul>
<li>Legendary Tooltips</li>
<li>Limits' Grapple</li>
<li>Ma Enchants</li>
<li>Macaw's Bridges</li>
<li>Macaw's Bridges BYG</li>
<li>Macaw's Doors</li>
<li>Macaw's Fences and Walls</li>
<li>Macaw's Furniture</li>
<li>Macaw's Paintings</li>
<li>Macaw's Paths and Pavings</li>
<li>Macaw's Roofs BYG</li>
<li>Macaw's Trapdoors</li>
<li>Macaw's Trapdoors</li>
<li>Macaw's Windows</li>
<li>Main Menu Credits</li>
<li>Mimic</li>
<li>Missing Wilds</li>
<li>MixinTrace</li>
<li>Mod Menu</li>
<li>Moonlight</li>
<li>More Chat History</li>
<li>MoreCreativeTabs</li>
<li>Mythic Metals</li>
<li>Mythic Upgrades</li>
<li>Naturalist</li>
<li>Nature's Compass</li>
<li>NiceLoad</li>
<li>No chat Reports</li>
<li>No Mob Farm</li>
<li>NotEnoughAnimations</li>
<li>Numismatic Overhaul</li>
<li>OPAC Create Mod Support</li>
<li>Open parties and claims</li>
<li>Pehkui</li>
<li>Polymorph</li>
<li>Powah!</li>
<li>Prism</li>
<li>Puzzle</li>
<li>Quartz Elevator</li>
<li>Quilt Loading Screen</li>
<li>Quiltgoslightyfasterlol</li>
<li>Recipe Book Is Pain</li>
<li>Reesse's Sodium Options</li>
<li>Resourcefulconfig</li>
<li>Roughly Enough Items</li>
<li>Satin</li>
<li>ServerCore</li>
<li>Sky Villages</li>
<li>Smooth boot</li>
<li>Sodium</li>
<li>Sodium Extra</li>
<li>Sound physics Remastered</li>
<li>Starlight</li>
<li>TerraBlender</li>
<li>Travaler's Backpack</li>
<li>Twigs</li>
<li>Villager Hats</li>
<li>Xareo's Minimap</li>
<li>Xareo's World Map</li>
<li>Your'e in Grave Danger</li>
<li>Your Reputation</li>
<li>YUNG's Better Desert Temples</li>
<li>YUNG's Better Dungeons</li>
<li>YUNG's Better Mineshaft</li>
<li>YUNG's Better Ocean Monuments</li>
<li>YUNG's Better Strongholds</li>
</ul>
</div>
</div>
<details>
<!-- svelte-ignore a11y-no-redundant-roles -->
<summary role="button" class="secondary">Optional Mods</summary>
<div class="container">
<div class="column"> <div class="column">
<ul> <ul>
<ul> <li>3D Skin Layers</li>
<li>Accurate Maps</li> <li>Animatica</li>
<li>Ad Astra!</li> <li>AppleSkin</li>
<li>Ada Paxels</li> <li>Better F3</li>
<li>Adorn</li> <li>CapeTweaks</li>
<li>Advancement Plaques</li> <li>Chat Heads</li>
<li>AdventureZ</li> <li>Chunks fade in</li>
<li>Alloy Forgery</li> <li>CIT Resewn</li>
<li>Amethyst Tools</li> <li>ClickTrough</li>
<li>Angling Mod</li> <li>DashLoader</li>
<li>Another Furniture</li> <li>Draggable Resource Packs</li>
<li>AntiGhost</li> <li>Dynamic FPS</li>
<li>Applied Energistics 2</li>
<li>Architectury</li>
<li>Auditory</li>
<li>Balm</li>
<li>Biome Makeover</li>
<li>Blocks</li>
<li>Boat Item View Fabric</li>
<li>Botarium</li>
<li>Chisel Refabricated</li>
<li>Chunky</li>
<li>Cloth Config v8</li>
<li>Continuity</li>
<li>Controlling For Fabric</li>
<li>Crafting Tweaks</li>
<li>Create Crafts and Additions</li>
<li>Croptopia</li>
<li>Detail Armor Bar</li>
<li>Eating Animaton</li>
<li>EldritchMobs</li>
<li>Enchanted Vertical Slabs</li>
<li>Enchanting Infuser</li>
<li>EntityCulling-Fabric</li>
<li>Extractinator</li>
<li>ExtrasSounds</li>
<li>Fabric language Kotlin</li>
<li>Fabric Waystones</li>
<li>Factory Blocks Mod</li>
<li>Falling Leaves</li>
<li>Fastback</li>
<li>FerriteCore</li>
<li>Frame</li>
<li>Global Packs</li>
<li>Hold That Chunk</li>
<li>Icarus</li>
<li>Iceberg</li>
<li>Indium</li>
<li>Interactic</li>
<li>Jade Addons</li>
<li>Konkrete</li>
<li>Ksyxis</li>
<li>Labels</li>
<li>Language Reload</li>
</ul>
</ul> </ul>
</div> </div>
<div class="column"> <div class="column">
<ul> <ul>
<li>Legendary Tooltips</li> <li>Effective 💦</li>
<li>Limits' Grapple</li> <li>EmuNO</li>
<li>Ma Enchants</li> <li>Iris shaders</li>
<li>Macaw's Bridges</li> <li>Jade 🔍</li>
<li>Macaw's Bridges BYG</li> <li>Kappa</li>
<li>Macaw's Doors</li> <li>LambdaBetterGrass</li>
<li>Macaw's Fences and Walls</li> <li>LambDynamicLights</li>
<li>Macaw's Furniture</li> <li>Mouse Wheelie</li>
<li>Macaw's Paintings</li> <li>Ok Zoomer</li>
<li>Macaw's Paths and Pavings</li> <li>Presence Footsteps</li>
<li>Macaw's Roofs BYG</li> <li>Reeses Sodium Options</li>
<li>Macaw's Trapdoors</li> <li>Too many Binds</li>
<li>Macaw's Trapdoors</li>
<li>Macaw's Windows</li>
<li>Main Menu Credits</li>
<li>Mimic</li>
<li>Missing Wilds</li>
<li>MixinTrace</li>
<li>Mod Menu</li>
<li>Moonlight</li>
<li>More Chat History</li>
<li>MoreCreativeTabs</li>
<li>Mythic Metals</li>
<li>Mythic Upgrades</li>
<li>Naturalist</li>
<li>Nature's Compass</li>
<li>NiceLoad</li>
<li>No chat Reports</li>
<li>No Mob Farm</li>
<li>NotEnoughAnimations</li>
<li>Numismatic Overhaul</li>
<li>OPAC Create Mod Support</li>
<li>Open parties and claims</li>
<li>Pehkui</li>
<li>Polymorph</li>
<li>Powah!</li>
<li>Prism</li>
<li>Puzzle</li>
<li>Quartz Elevator</li>
<li>Quilt Loading Screen</li>
<li>Quiltgoslightyfasterlol</li>
<li>Recipe Book Is Pain</li>
<li>Reesse's Sodium Options</li>
<li>Resourcefulconfig</li>
<li>Roughly Enough Items</li>
<li>Satin</li>
<li>ServerCore</li>
<li>Sky Villages</li>
<li>Smooth boot</li>
<li>Sodium</li>
<li>Sodium Extra</li>
<li>Sound physics Remastered</li>
<li>Starlight</li>
<li>TerraBlender</li>
<li>Travaler's Backpack</li>
<li>Twigs</li>
<li>Villager Hats</li>
<li>Xareo's Minimap</li>
<li>Xareo's World Map</li>
<li>Your'e in Grave Danger</li>
<li>Your Reputation</li>
<li>YUNG's Better Desert Temples</li>
<li>YUNG's Better Dungeons</li>
<li>YUNG's Better Mineshaft</li>
<li>YUNG's Better Ocean Monuments</li>
<li>YUNG's Better Strongholds</li>
</ul> </ul>
</div> </div>
</div> </div>
<details> </details>
<summary role="button" class="secondary">Optional Mods</summary>
<div class="container">
<div class="column">
<ul>
<li>3D Skin Layers</li>
<li>Animatica</li>
<li>AppleSkin</li>
<li>Better F3</li>
<li>CapeTweaks</li>
<li>Chat Heads</li>
<li>Chunks fade in</li>
<li>CIT Resewn</li>
<li>ClickTrough</li>
<li>DashLoader</li>
<li>Draggable Resource Packs</li>
<li>Dynamic FPS</li>
</ul>
</div>
<div class="column">
<ul>
<li>Effective 💦</li>
<li>EmuNO</li>
<li>Iris shaders</li>
<li>Jade 🔍</li>
<li>Kappa</li>
<li>LambdaBetterGrass</li>
<li>LambDynamicLights</li>
<li>Mouse Wheelie</li>
<li>Ok Zoomer</li>
<li>Presence Footsteps</li>
<li>Reeses Sodium Options</li>
<li>Too many Binds</li>
</ul>
</div>
</div>
</details>
<style> <style>
.container {
overflow: auto;
}
.container { .column {
overflow: auto; width: 50%;
} float: left;
}
.column { </style>
width: 50%;
float: left;
}
</style>

View file

@ -0,0 +1,10 @@
<svg width="100" height="54" viewBox="0 0 100 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_2)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.9082L27.9532 6.9838L26.269 0H100.014L99.9975 8.1433C87.5 10.6348 78.6726 16.775 74.825 36.34H72.046L70.4645 40.699H72.7724L76.763 53.5077H37.961L41.8794 40.6991H44.2044L42.5577 36.3401H39.7935L34.6419 22.5866C13.5203 21.3437 2.6748 16.9042 0 6.9082ZM58.6772 39.062C55.5952 33.4404 53.5714 37.865 47.2318 32.1124C44.7591 29.8688 43.773 23.2925 49.3288 21.2823C46.8033 26.8572 53.3585 29.1381 54.9186 25.9508C55.6276 24.5022 56.5225 21.8304 53.9388 19.999C52.5468 19.0123 52.0107 16.0865 53.2024 14.4602C53.5861 15.6695 54.7962 16.9615 57.1184 16.0013C52.1992 7.8609 60.0524 5.0556 63.8288 5.4196C59.8602 5.8606 57.8038 9.3966 59.6092 13.2465C60.7592 15.6985 62.5098 16.9054 63.0189 18.9122C61.3237 19.0385 60.8337 19.8187 60.8694 21.2742C60.8962 22.3637 63.419 23.9388 63.8188 20.8286C64.9938 23.2531 63.5781 24.6782 62.8059 25.827C61.0235 28.4785 62.7023 31.2377 64.9156 29.1337C65.8703 28.2263 66.5311 26.5525 65.3204 23.8157C67.5494 25.5917 69.8261 30.3604 66.2283 34.4927C64.4723 36.5097 59.2768 35.8837 58.6772 39.062Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1_2">
<rect width="100" height="53.5" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,10 @@
<svg width="100" height="54" viewBox="0 0 100 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_7)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.9082L27.9532 6.9838L26.269 0H100.014L99.9975 8.1433C87.5 10.6348 78.6726 16.775 74.825 36.34H72.046L70.4645 40.699H72.7724L76.763 53.5077H37.961L41.8794 40.6991H44.2044L42.5577 36.3401H39.7935L34.6419 22.5866C13.5203 21.3437 2.6748 16.9042 0 6.9082ZM58.6772 39.062C55.5952 33.4404 53.5714 37.865 47.2318 32.1124C44.7591 29.8688 43.773 23.2925 49.3288 21.2823C46.8033 26.8572 53.3585 29.1381 54.9186 25.9508C55.6276 24.5022 56.5225 21.8304 53.9388 19.999C52.5468 19.0123 52.0107 16.0865 53.2024 14.4602C53.5861 15.6695 54.7962 16.9615 57.1184 16.0013C52.1992 7.8609 60.0524 5.0556 63.8288 5.4196C59.8602 5.8606 57.8038 9.3966 59.6092 13.2465C60.7592 15.6985 62.5098 16.9054 63.0189 18.9122C61.3237 19.0385 60.8337 19.8187 60.8694 21.2742C60.8962 22.3637 63.419 23.9388 63.8188 20.8286C64.9938 23.2531 63.5781 24.6782 62.8059 25.827C61.0235 28.4785 62.7023 31.2377 64.9156 29.1337C65.8703 28.2263 66.5311 26.5525 65.3204 23.8157C67.5494 25.5917 69.8261 30.3604 66.2283 34.4927C64.4723 36.5097 59.2768 35.8837 58.6772 39.062Z" fill="#F16436"/>
</g>
<defs>
<clipPath id="clip0_1_7">
<rect width="100" height="53.5" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,11 @@
<svg width="512" height="514" viewBox="0 0 512 514" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_4)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="white"/>
<path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1_4">
<rect width="512" height="514" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,11 @@
<svg width="512" height="514" viewBox="0 0 512 514" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_9)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="#1BD96A"/>
<path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="#1BD96A"/>
</g>
<defs>
<clipPath id="clip0_1_9">
<rect width="512" height="514" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,16 @@
[
{
"name": "Accurate Maps",
"description": "Accurate Maps works by sending extra info to the client about the block being represented in the map.<br>With that extra info, the client can then calculate the color of the block in a more accurate way. If the map being rendered does not have additional info, the renderer will fall back to the vanilla colors, so mods that use the vanilla map system to render custom stuff will not be affected.",
"loaders": ["Fabric"],
"version": "1.19.2",
"author": "D4rkness_King",
"platforms": [
{
"name": "Modrinth",
"id": "modrinth",
"url": "https://modrinth.com/mod/accurate-maps"
}
]
}
]