Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial Farming Fortune Display #277

Merged
merged 3 commits into from
Oct 1, 2024
Merged

Initial Farming Fortune Display #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3df58d4
Start working on fortune display
ptlthg Sep 30, 2024
3b4e61f
Rework tool and pet selectors
ptlthg Oct 1, 2024
990a8f8
Fix lint issues
ptlthg Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"d3-time-format": "^4.1.0",
"date-fns": "^3.6.0",
"embla-carousel-svelte": "8.0.0-rc19",
"farming-weight": "^0.5.0",
"farming-weight": "^0.6.0",
"formsnap": "^0.4.4",
"layercake": "^8.3.4",
"layerchart": "^0.44.0",
Expand Down
8 changes: 4 additions & 4 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions src/components/external-link-button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import ExternalLink from 'lucide-svelte/icons/external-link';
import { Button } from '$ui/button';

export let href: string;
</script>

<Button variant="link" {href} class="decoration-blue-500">
<div class="flex flex-row items-center gap-1 text-blue-500">
<span>
<slot />
</span>
<ExternalLink size={16} />
</div>
</Button>
43 changes: 43 additions & 0 deletions src/components/items/item-lore.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<script lang="ts">
import { FormatMinecraftText } from '$lib/format';
import type { EliteItemDto } from 'farming-weight';
import Lore from './lore.svelte';

export let item: EliteItemDto;
export let title = true;
</script>

<div class="flex flex-col gap-2">
{#if title}
<h3 class="font-mono text-lg">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html FormatMinecraftText(item.name ?? '')}
</h3>
{/if}
<Lore lore={item.lore?.slice() ?? []} />
<div class="text-gray-400">
<slot />
<p>
<span class="font-semibold select-none">UUID:</span>
<span class="select-all">{item.uuid ?? 'N/A'}</span>
</p>
<p>
<span class="font-semibold select-none">Skyblock ID:</span>
<span class="select-all">{item.skyblockId}</span>
</p>
{#if item.attributes?.player}
<p>
<span class="font-semibold select-none">Player:</span>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<span>{@html FormatMinecraftText(item.attributes?.player ?? '')}</span>
</p>
{/if}
{#if item.attributes?.bid}
<p>
<span class="font-semibold select-none">Bid:</span>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<span class="select-all">#{item.attributes.bid}</span>
</p>
{/if}
</div>
</div>
2 changes: 1 addition & 1 deletion src/components/items/lore.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
: lore.map((l) => FormatMinecraftText(l));
</script>

<div class="p-2 font-mono rounded-sm font-bold line-t">
<div class="font-mono rounded-sm font-bold">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html '<p>' + formatted.join('</p><p>') + '</p>'}
</div>
17 changes: 2 additions & 15 deletions src/components/items/lorebtn.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { buttonVariants } from '$ui/button';
import * as Dialog from '$ui/dialog';
import FileText from 'lucide-svelte/icons/file-text';
import Lore from './lore.svelte';
import ItemLore from './item-lore.svelte';

export let item: EliteItemDto;
</script>
Expand All @@ -20,19 +20,6 @@
{@html FormatMinecraftText(item.name ?? '')}
</h3>
</Dialog.Header>
<div>
<Lore lore={item.lore?.slice() ?? []} />
<div class="text-gray-400">
<slot />
<p>
<span class="font-semibold select-none">UUID:</span>
<span class="select-all">{item.uuid ?? 'N/A'}</span>
</p>
<p>
<span class="font-semibold select-none">Skyblock ID:</span>
<span class="select-all">{item.skyblockId}</span>
</p>
</div>
</div>
<ItemLore {item} title={false} />
</Dialog.Content>
</Dialog.Root>
32 changes: 19 additions & 13 deletions src/components/items/tools/farmingtool.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,36 @@
import { UNUSED_MATHEMATICAL_HOE } from '$content/random';

export let tool: FT;

$: crop = tool.crop
? PROPER_CROP_TO_IMG[getCropDisplayName(tool.crop)]
: Object.values(PROPER_CROP_TO_IMG)[Math.floor(Math.random() * Object.keys(PROPER_CROP_TO_IMG).length)];
</script>

<div class="flex basis-[5rem] w-full max-h-30 flex-row gap-2 justify-between bg-primary-foreground rounded-md p-1">
<div class="flex flex-row gap-2 items-center">
<img
class="w-14 md:w-20 md:h-20 aspect-square pixelated p-1"
src={`/packs/hypixelplus/tools/farming/${tool.item.skyblockId?.toLowerCase()}.png`}
src="/packs/hypixelplus/tools/farming/{tool.item.skyblockId?.toLowerCase()}.png"
alt="Tool"
/>
<div class="flex flex-col items-start">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<div class="font-semibold text-md md:text-lg">{@html FormatMinecraftText(tool.item.name ?? '')}</div>
<div class="flex flex-row gap-1 items-center">
<img src={PROPER_CROP_TO_IMG[getCropDisplayName(tool.crop)]} alt="Crop" class="pixelated w-5 h-5" />
{#if tool.isUsed() || tool.farmed < 0}
<div class="text-md md:text-lg">{tool.farmed.toLocaleString()}</div>
{:else if tool.tool.type === FarmingToolType.MathematicalHoe}
<div class="text-sm md:text-md text-muted-foreground">
{UNUSED_MATHEMATICAL_HOE[Math.floor(Math.random() * UNUSED_MATHEMATICAL_HOE.length)]}
</div>
{:else}
<div class="text-sm md:text-md text-muted-foreground">Missing Cultivating!</div>
{/if}
</div>
{#if tool.supportsCultivating()}
<div class="flex flex-row gap-1 items-center">
<img src={crop} alt="Crop" class="pixelated w-5 h-5" />
{#if tool.isUsed() || tool.farmed < 0}
<div class="text-md md:text-lg">{tool.farmed.toLocaleString()}</div>
{:else if tool.tool.type === FarmingToolType.MathematicalHoe}
<div class="text-sm md:text-md text-muted-foreground">
{UNUSED_MATHEMATICAL_HOE[Math.floor(Math.random() * UNUSED_MATHEMATICAL_HOE.length)]}
</div>
{:else}
<div class="text-sm md:text-md text-muted-foreground">Missing Cultivating!</div>
{/if}
</div>
{/if}
</div>
</div>
<div class="flex flex-row items-center justify-end gap-2">
Expand Down
46 changes: 46 additions & 0 deletions src/components/rates/category-progress.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script lang="ts">
import type { FortuneSourceProgress } from 'farming-weight';
import FortuneProgress from './fortune-progress.svelte';
import * as Dialog from '$ui/dialog';
import ItemProgress from './item-progress.svelte';

export let name: string;
export let progress: FortuneSourceProgress[];

let progressModal = false;
$: shownProgress = undefined as FortuneSourceProgress | undefined;
</script>

<div class="flex flex-col gap-2 flex-1">
<div class="flex flex-col max-w-lg w-full gap-2 flex-1 mx-1">
<h2 class="text-xl pl-1">{name}</h2>
<div class="flex flex-col max-w-lg w-full gap-1.5 flex-1">
{#each progress as p (p.name + p.fortune + (p.item?.uuid ?? ''))}
{#if p.nextInfo || p.maxInfo || p.progress?.length || p.item}
<button
class="hover:bg-primary-content/10 dark:hover:bg-card/50 px-1 rounded-lg cursor-pointer"
on:click={() => {
shownProgress = p;
progressModal = true;
}}
>
<FortuneProgress progress={p} />
</button>
{:else}
<div class="px-1">
<FortuneProgress progress={p} />
</div>
{/if}
{/each}
</div>
</div>
</div>

<Dialog.Root bind:open={progressModal}>
<Dialog.Content class="overflow-y-scroll max-h-[80%]">
<Dialog.Title>{shownProgress?.name}</Dialog.Title>
{#if shownProgress}
<ItemProgress progress={shownProgress} />
{/if}
</Dialog.Content>
</Dialog.Root>
132 changes: 67 additions & 65 deletions src/components/rates/farming-gear.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,72 +44,74 @@

<div class="flex flex-col gap-3">
<div class="flex justify-between items-center w-full pb-2">
<span class="text-lg font-semibold">Total Gear Fortune</span>
<span class="text-lg font-semibold">Farming Gear</span>
<Fortunebreakdown breakdown={set.getFortuneBreakdown()} />
</div>
{#key set.fortune}
{#each slots as slot (slot)}
{@const piece = set.getPiece(slot)}
{@const best = !set.slotOptions[slot].some((p) =>
'potential' in p
? p.potential > (!piece ? 0 : 'potential' in piece ? piece.potential ?? 0 : 0)
: p.fortune > (piece?.fortune ?? 0)
)}
{#if piece}
<div class="flex justify-between items-center w-full">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<span class="text-lg font-semibold">{@html FormatMinecraftText(piece.item.name ?? '')}</span>
<div class="flex flex-row gap-2 items-center">
{#if !best}
<Popover.Mobile>
<div slot="trigger" class="px-1">
<TriangleAlert size={20} class="-mb-1 text-yellow-600 dark:text-yellow-300" />
</div>
<div class="max-w-xs">
<p class="text-md">This isn't the highest fortune item!</p>
</div>
</Popover.Mobile>
{/if}
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" size="sm" class="px-2">
<Menu size={20} />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="max-w-xl">
<DropdownMenu.Label>Swap {slot}</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.RadioGroup
bind:value={selected[slot]}
onValueChange={(value) => {
const piece =
armor.find((a) => a.item.uuid === value) ??
equipment.find((e) => e.item.uuid === value);
if (piece) {
set.setPiece(piece);
player.refresh();
}
}}
>
{#each pieces[slot] as piece}
{#if piece.item.uuid}
<DropdownMenu.RadioItem value={piece.item.uuid}>
<div class="flex flex-row items-center gap-1">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html FormatMinecraftText(piece.item.name ?? '')}
<FortuneBreakdown total={piece.fortune} small={true} />
</div>
</DropdownMenu.RadioItem>
{/if}
{/each}
</DropdownMenu.RadioGroup>
</DropdownMenu.Content>
</DropdownMenu.Root>
<Lorebtn item={piece.item} />
<Fortunebreakdown total={piece.fortune} breakdown={piece.fortuneBreakdown} />
<div class="flex flex-col gap-3 mx-2">
{#key set.fortune}
{#each slots as slot (slot)}
{@const piece = set.getPiece(slot)}
{@const best = !set.slotOptions[slot].some((p) =>
'potential' in p
? p.potential > (!piece ? 0 : 'potential' in piece ? piece.potential ?? 0 : 0)
: p.fortune > (piece?.fortune ?? 0)
)}
{#if piece}
<div class="flex justify-between items-center w-full">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<span class="text-lg font-semibold">{@html FormatMinecraftText(piece.item.name ?? '')}</span>
<div class="flex flex-row gap-2 items-center">
{#if !best}
<Popover.Mobile>
<div slot="trigger" class="px-1">
<TriangleAlert size={20} class="-mb-1 text-yellow-600 dark:text-yellow-300" />
</div>
<div class="max-w-xs">
<p class="text-md">This isn't the highest fortune item!</p>
</div>
</Popover.Mobile>
{/if}
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" size="sm" class="px-2">
<Menu size={20} />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="max-w-xl">
<DropdownMenu.Label>Swap {slot}</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.RadioGroup
bind:value={selected[slot]}
onValueChange={(value) => {
const piece =
armor.find((a) => a.item.uuid === value) ??
equipment.find((e) => e.item.uuid === value);
if (piece) {
set.setPiece(piece);
player.refresh();
}
}}
>
{#each pieces[slot] as piece}
{#if piece.item.uuid}
<DropdownMenu.RadioItem value={piece.item.uuid}>
<div class="flex flex-row items-center gap-1">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html FormatMinecraftText(piece.item.name ?? '')}
<FortuneBreakdown total={piece.fortune} small={true} />
</div>
</DropdownMenu.RadioItem>
{/if}
{/each}
</DropdownMenu.RadioGroup>
</DropdownMenu.Content>
</DropdownMenu.Root>
<Lorebtn item={piece.item} />
<Fortunebreakdown total={piece.fortune} breakdown={piece.fortuneBreakdown} />
</div>
</div>
</div>
{/if}
{/each}
{/key}
{/if}
{/each}
{/key}
</div>
</div>
Loading
Loading