aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/minecraft/Inventory.svelte22
-rw-r--r--src/lib/minecraft/Item.svelte21
-rw-r--r--src/lib/minecraft/inventory.ts54
-rw-r--r--src/lib/sections/Armor.svelte4
-rw-r--r--src/lib/sections/Inventories.svelte55
-rw-r--r--src/routes/about.svelte50
-rw-r--r--src/routes/index.svelte52
-rw-r--r--src/routes/player/[player]/[profile].svelte22
8 files changed, 98 insertions, 182 deletions
diff --git a/src/lib/minecraft/Inventory.svelte b/src/lib/minecraft/Inventory.svelte
index 3d3b9c0..d29b1e0 100644
--- a/src/lib/minecraft/Inventory.svelte
+++ b/src/lib/minecraft/Inventory.svelte
@@ -4,6 +4,7 @@
export let items
export let name = ''
export let pack = ''
+ export let groupLimit = 9
if (name === 'inventory')
// in the inventory, the first 9 items are the hotbar and should be at the end
@@ -13,14 +14,14 @@
let itemGroups = []
$: {
itemGroups = []
- for (let i = 0; i < items.length; i += 9) {
- itemGroups.push(items.slice(i, i + 9))
+ for (let i = 0; i < items.length; i += groupLimit) {
+ itemGroups.push(items.slice(i, i + groupLimit))
}
}
</script>
<div class:inventory-container-{name}={name !== ''}>
- {#each itemGroups as itemGroup, groupIndex}
+ {#each itemGroups as itemGroup}
<div>
{#each itemGroup as item}
<Item {item} {pack} isslot />
@@ -28,18 +29,3 @@
</div>
{/each}
</div>
-
-<!-- {%- macro inventory(items, name='', pack='') -%}
- <div{% if name %} class="inventory-container-{{ name }}"{% endif %}>
- {%- if name == 'inventory' -%}
- {%- set items = items|slice(9)|append(items|slice(0, 9)) -%}
- {%- endif -%}
-
- {%- for itemData in items -%}
- {%- if loop.index0 > 0 and loop.index0 % 9 == 0 %}</div>{%- endif -%}
- {%- if loop.index0 % 9 == 0 %}<div>{%- endif -%}
- {{- item(itemData, slot=true, pack=pack) -}}
- {%- endfor -%}
- </div>
- </div>
-{%- endmacro -%} -->
diff --git a/src/lib/minecraft/Item.svelte b/src/lib/minecraft/Item.svelte
index 8ddc4a8..c944f1b 100644
--- a/src/lib/minecraft/Item.svelte
+++ b/src/lib/minecraft/Item.svelte
@@ -1,22 +1,26 @@
<script lang="ts">
import MinecraftTooltip from './MinecraftTooltip.svelte'
import { formattingCodeToHtml, removeFormattingCode } from '$lib/utils'
- import { itemToUrlCached } from './inventory'
+ import { itemToUrl } from './inventory'
export let item: any | null
export let isslot = true
export let pack = ''
- $: itemLoreHtml = item.display.lore.map(l => formattingCodeToHtml(l)).join('<br>')
- $: itemNameHtml = formattingCodeToHtml(item.display.name)
+ let itemLoreHtml: string | null
+ let itemNameHtml: string | null
+ let imageUrl: string | null
- $: imageUrl = itemToUrlCached(item, pack)
+ $: itemLoreHtml = item ? item.display.lore.map(l => formattingCodeToHtml(l)).join('<br>') : null
+ $: itemNameHtml = item ? formattingCodeToHtml(item.display.name) : null
+
+ $: imageUrl = item ? itemToUrl(item, pack) : null
</script>
<MinecraftTooltip>
<span slot="name">{@html itemNameHtml}</span>
<span slot="lore">{@html itemLoreHtml}</span>
- <span class="item item-slot" class:item-slot={isslot}>
+ <span class="item" class:item-slot={isslot}>
<!-- we have an if here because the item might be air -->
{#if item}
{#if imageUrl}
@@ -60,6 +64,13 @@
image-rendering: pixelated;
}
+ img.item-custom-head {
+ width: 0.75em;
+ height: 0.75em;
+ margin-top: 0.1875em;
+ margin-left: 0.1875em;
+ }
+
.item-slot {
margin: 0.05em;
}
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index fa75887..cb926b4 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -1,7 +1,7 @@
-import vanillaDamages from 'skyblock-assets/data/vanilla_damages.json'
import * as skyblockAssets from 'skyblock-assets'
+import vanilla from 'skyblock-assets/matchers/vanilla.json'
+import packshq from 'skyblock-assets/matchers/vanilla.json'
-const itemToUrlCache: Record<string, string> = {}
interface Item {
id?: string
@@ -36,10 +36,7 @@ const INVENTORIES = {
export type Inventories = { [name in keyof typeof INVENTORIES]: Item[] }
-export async function itemToUrl(item: Item, packName?: string): Promise<string> {
- const stringifiedItem = (packName ?? 'packshq') + JSON.stringify(item)
- if (stringifiedItem in itemToUrlCache)
- return itemToUrlCache[stringifiedItem]
+export function itemToUrl(item: Item, packName?: string): string {
const itemNbt: skyblockAssets.NBT = {
display: {
Name: item.display?.name
@@ -52,21 +49,22 @@ export async function itemToUrl(item: Item, packName?: string): Promise<string>
if (item.head_texture)
textureUrl = `https://mc-heads.net/head/${item.head_texture}`
else
- textureUrl = await skyblockAssets.getTextureUrl({
+ textureUrl = skyblockAssets.getTextureUrl({
id: item.vanillaId,
nbt: itemNbt,
- pack: packName ?? 'packshq'
+ packs: [packshq, vanilla]
})
if (!textureUrl)
console.log('no texture', item)
- itemToUrlCache[stringifiedItem] = textureUrl
return textureUrl
}
+
export async function skyblockItemToUrl(skyblockItemName: string) {
const item = skyblockItemNameToItem(skyblockItemName)
const itemTextureUrl = await itemToUrl(item, 'packshq')
return itemTextureUrl
}
+
export function skyblockItemNameToItem(skyblockItemName: string): Item {
let item: Item
if (Object.keys(skyblockItems).includes(skyblockItemName)) {
@@ -78,6 +76,7 @@ export function skyblockItemNameToItem(skyblockItemName: string): Item {
}
return item
}
+
const skyblockItems: { [itemName: string]: Item } = {
ink_sac: { vanillaId: 'minecraft:dye' },
cocoa_beans: { vanillaId: 'minecraft:dye:3' },
@@ -102,41 +101,4 @@ const skyblockItems: { [itemName: string]: Item } = {
head_texture: '39b6e047d3b2bca85e8cc49e5480f9774d8a0eafe6dfa9559530590283715142'
},
hard_stone: { vanillaId: 'minecraft:stone' },
-}
-
-export function itemToUrlCached(item: Item, packName?: string): string {
- if (!item) return null
- if (typeof item === 'string') {
- let itemId: string = vanillaDamages[item] ?? item
- let damage: number = null
- // remove the minecraft: namespace since we already know it's all vanilla
- if (itemId.startsWith('minecraft:')) itemId = itemId.slice('minecraft:'.length)
- // split the damage into its own variable
- if (itemId.includes(':')) {
- damage = parseInt(itemId.split(':')[1])
- itemId = itemId.split(':')[0]
- }
- item = {
- count: 1,
- display: {
- glint: false,
- lore: null,
- name: null
- },
- id: null,
- // vanillaId: damage === null ? `minecraft:${itemId}` : `minecraft:${itemId}:${damage}`
- vanillaId: `minecraft:${itemId}`
- }
- }
- const stringifiedItem = (packName ?? 'packshq') + JSON.stringify(item)
- return itemToUrlCache[stringifiedItem]
-}
-/** Get all the items in an inventories object to cache them */
-export async function cacheInventories(inventories: Inventories, packName?: string) {
- const promises: Promise<any>[] = []
- for (const inventoryItems of Object.values(inventories ?? {}))
- for (const inventoryItem of inventoryItems)
- if (inventoryItem)
- promises.push(itemToUrl(inventoryItem, packName))
- await Promise.all(promises)
} \ No newline at end of file
diff --git a/src/lib/sections/Armor.svelte b/src/lib/sections/Armor.svelte
index c4e7950..ab0e73b 100644
--- a/src/lib/sections/Armor.svelte
+++ b/src/lib/sections/Armor.svelte
@@ -4,4 +4,6 @@
export let pack
</script>
-<Inventory items={data.member.inventories.armor} name="armor" {pack} />
+<span>
+ <Inventory items={data.member.inventories.armor} name="armor" groupLimit={1} {pack} />
+</span>
diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte
new file mode 100644
index 0000000..49a00c2
--- /dev/null
+++ b/src/lib/sections/Inventories.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+ import Inventory from '$lib/minecraft/Inventory.svelte'
+ import { fade } from 'svelte/transition'
+ import { cleanId } from '$lib/utils'
+
+ export let data
+ export let pack
+
+ let displayingInventories: string[] = []
+ for (const inventoryName in data.member.inventories)
+ if (inventoryName !== 'armor') displayingInventories.push(inventoryName)
+
+ let selectedInventoryName: string = displayingInventories[0]
+</script>
+
+<div id="inventory-tabs">
+ {#each displayingInventories as inventoryName}
+ <button
+ class="inventory-tab"
+ class:inventory-tab-active={inventoryName === selectedInventoryName}
+ on:click={() => (selectedInventoryName = inventoryName)}
+ >
+ {cleanId(inventoryName)}
+ </button>
+ {/each}
+</div>
+{#each displayingInventories as inventoryName}
+ {#if inventoryName === selectedInventoryName}
+ <div id={inventoryName} class="inventory-content">
+ <Inventory items={data.member.inventories[inventoryName]} {pack} />
+ </div>
+ {/if}
+{/each}
+
+<style>
+ #inventory-tabs {
+ margin-bottom: 1em;
+ overflow: hidden;
+ border-radius: 1em;
+ max-width: max-content;
+ width: min(40em, 100%);
+ }
+ .inventory-tab {
+ background-color: var(--theme-lighter-background);
+ color: var(--theme-main-text);
+ border: none;
+ padding: 1em;
+ cursor: pointer;
+ transition-duration: 200ms;
+ }
+ .inventory-tab:hover,
+ .inventory-tab-active {
+ background-color: var(--theme-lightest-background);
+ }
+</style>
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
deleted file mode 100644
index 569d3e1..0000000
--- a/src/routes/about.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script context="module">
- import { browser, dev } from '$app/env';
-
- // we don't need any JS on this page, though we'll load
- // it in dev so that we get hot module replacement...
- export const hydrate = dev;
-
- // ...but if the client-side router is already loaded
- // (i.e. we came here from elsewhere in the app), use it
- export const router = browser;
-
- // since there's no dynamic data here, we can prerender
- // it so that it gets served as a static asset in prod
- export const prerender = true;
-</script>
-
-<svelte:head>
- <title>About</title>
-</svelte:head>
-
-<div class="content">
- <h1>About this app</h1>
-
- <p>
- This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
- following into your command line and following the prompts:
- </p>
-
- <!-- TODO lose the @next! -->
- <pre>npm init svelte@next</pre>
-
- <p>
- The page you're looking at is purely static HTML, with no client-side interactivity needed.
- Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
- the devtools network panel and reloading.
- </p>
-
- <p>
- The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
- it with JavaScript disabled!
- </p>
-</div>
-
-<style>
- .content {
- width: 100%;
- max-width: var(--column-width);
- margin: var(--column-margin-top) auto 0 auto;
- }
-</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 68311dd..524df13 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,9 +1,5 @@
<script context="module" lang="ts">
- export const prerender = true;
-</script>
-
-<script lang="ts">
- import Counter from '$lib/Counter.svelte';
+ export const prerender = true
</script>
<svelte:head>
@@ -11,49 +7,5 @@
</svelte:head>
<section>
- <h1>
- <div class="welcome">
- <picture>
- <source srcset="svelte-welcome.webp" type="image/webp" />
- <img src="svelte-welcome.png" alt="Welcome" />
- </picture>
- </div>
-
- to your new<br />SvelteKit app
- </h1>
-
- <h2>
- try editing <strong>src/routes/index.svelte</strong>
- </h2>
-
- <Counter />
+ <h1>SkyBlock Stats</h1>
</section>
-
-<style>
- section {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex: 1;
- }
-
- h1 {
- width: 100%;
- }
-
- .welcome {
- position: relative;
- width: 100%;
- height: 0;
- padding: 0 0 calc(100% * 495 / 2048) 0;
- }
-
- .welcome img {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- display: block;
- }
-</style>
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index bd9402d..e28dae7 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -1,5 +1,4 @@
<script lang="ts" context="module">
- import { cacheInventories } from '$lib/minecraft/inventory'
import type { Load } from '@sveltejs/kit'
import { API_URL } from '$lib/api'
@@ -12,8 +11,6 @@
const pack = params.pack ?? data?.customization?.pack
- await cacheInventories(data.member.inventories, pack)
-
return {
props: {
data,
@@ -24,16 +21,16 @@
</script>
<script lang="ts">
+ import Inventories from '$lib/sections/Inventories.svelte'
import Username from '$lib/minecraft/Username.svelte'
import Infobox from '$lib/sections/Infobox.svelte'
+ import Skills from '$lib/sections/Skills.svelte'
import { generateInfobox } from '$lib/profile'
+ import Armor from '$lib/sections/Armor.svelte'
import Header from '$lib/Header.svelte'
import Emoji from '$lib/Emoji.svelte'
- import { cleanId } from '$lib/utils'
import Head from '$lib/Head.svelte'
import Toc from '$lib/Toc.svelte'
- import Skills from '$lib/sections/Skills.svelte'
- import Armor from '$lib/sections/Armor.svelte'
export let data
export let pack: string
@@ -98,13 +95,14 @@
<Armor {data} {pack} />
</section>
{/if}
- <!-- {%- if data.member.inventories.armor -%}
- <section id="armor"{% if data.member.inventories.inventory %} class="armor-float"{% endif %}>
- <h2>Armor</h2>
- {%- include 'sections/armor.njk' -%}
+ {#if data.member.inventories.inventory}
+ <section id="inventories">
+ <h2>Inventories</h2>
+ <Inventories {data} {pack} />
</section>
- {%- endif -%}
- {%- if data.member.inventories.inventory -%}
+ {/if}
+
+ <!-- {%- if data.member.inventories.inventory -%}
<section id="inventories">
<h2>Inventories</h2>
{%- include 'sections/inventories.njk' -%}
generated by cgit (git 2.46.0) at 2025-06-18 06:10:08 +0000