Compare commits

...

1 commit

Author SHA1 Message Date
f3234ef392 Initial Work on Mod Info Cards 2023-06-11 15:08:14 +02:00
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 {
margin-left: 25%;
margin-right: 25%;
margin-bottom: 2em;
margin-bottom: 1em;
}
.buttons [role="button"] {
margin-bottom: 1em;
}
</style>

View file

@ -1,9 +1,30 @@
<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>
<div>
<ModInfo {mods} />
</div>
<div class="container">
<div class="column">
<ul>
<ul>
<li>Accurate Maps</li>
<li></li>
<li>Ad Astra!</li>
<li>Ada Paxels</li>
<li>Adorn</li>
@ -56,9 +77,7 @@
<li>Ksyxis</li>
<li>Labels</li>
<li>Language Reload</li>
</ul>
</ul>
</div>
<div class="column">
@ -131,8 +150,9 @@
<li>YUNG's Better Strongholds</li>
</ul>
</div>
</div>
</div>
<details>
<!-- svelte-ignore a11y-no-redundant-roles -->
<summary role="button" class="secondary">Optional Mods</summary>
<div class="container">
<div class="column">
@ -168,18 +188,15 @@
</ul>
</div>
</div>
</details>
</details>
<style>
.container {
<style>
.container {
overflow: auto;
}
}
.column {
.column {
width: 50%;
float: left;
}
</style>
}
</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"
}
]
}
]