feat: weapon and other shenanigan (#505)

* feat: weapon and other shenanigan

* fix: rm console.log

* fix: NaN

package.json

@@ -22,6 +22,7 @@
 		"cmdk-sv": "^0.0.18",
 		"d3-scale": "^4.0.2",
 		"d3-shape": "^3.2.0",
+		"dvalin-data": "^1.0.3",
 		"formsnap": "^1.0.1",
 		"i18next": "^23.15.2",
 		"layerchart": "^0.52.1",

src/lib/components/achievement/AchievementCategoryCard.svelte

@@ -50,12 +50,12 @@
 			<Progress value={achieved} max={total} class="left" />
 		</div>
 	{:else}
-		<div class="flex flex-col p-2 text-center">
+		<div class="flex flex-col p-3 text-center pb-0">
 			<div class={`flex justify-center`}>
 				<img alt={name} class="xl:w-36 xl:h-36" src={img} />
 			</div>
 		</div>
-		<div class={'text-center justify-center content-end mx-3 my-3'}>
+		<div class={'text-center justify-center content-end mx-3 my-3 mt-0'}>
 			<Progress value={achieved} max={total} class="my-3" />
 			<Text type="h4">
 				{name}

src/lib/components/achievement/AchievementList.svelte

@@ -138,7 +138,7 @@
 						<Text type="p">{achievement.desc}</Text>
 						<div class="flex flex-row gap-2">
 							{#if achievement.hidden === 'Yes'}
-								<Badge variant="secondary">Hidden {achievement.hidden}</Badge>
+								<Badge variant="secondary">Hidden</Badge>
 							{/if}
 							{#if achievement.type}
 								<Badge variant="secondary">{achievement.type}</Badge>

src/lib/components/tables/character-tab-table/StatTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Table from '$lib/components/ui/table';
-	import type { Ascension } from '$lib/types/data/Character';
+	import type { Ascension } from 'dvalin-data';
 
 	export let ascensions: Ascension[];
 </script>

src/lib/components/tables/weapon-tab-table/StatTable.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import * as Table from '$lib/components/ui/table';
+	import type { Weapon, WeaponAscension } from 'dvalin-data';
+
+	export let ascensions: WeaponAscension[];
+	export let stats: Weapon['stats'];
+</script>
+
+<Table.Root class="h-full overflow-auto">
+	<Table.Header>
+		<Table.Row class="p-2 border-b border-secondary/50">
+			<Table.Head class="p-2 px-4 font-bold">Asc</Table.Head>
+			<Table.Head class="p-2 px-4 font-bold">Level</Table.Head>
+			{#each Object.values(stats) as value}
+				{#if typeof value === 'string'}
+					<Table.Head class="p-2 px-4 font-bold">
+						{value.replace('Base ', '')}
+					</Table.Head>
+				{/if}
+			{/each}
+		</Table.Row>
+	</Table.Header>
+	<Table.Body class="h-full">
+		{#each ascensions as ascension, j}
+			<Table.Row class="p-2 border-y border-secondary/50">
+				<Table.Cell class="p-2 px-4">
+					<div class="flex flex-col">
+						<p>
+							{ascension.ascension}
+						</p>
+					</div>
+				</Table.Cell>
+				<Table.Cell class="p-2 px-4">
+					<div class="flex flex-col">
+						<p>
+							{ascension.level}
+						</p>
+					</div>
+				</Table.Cell>
+				<Table.Cell class="p-2 px-4">
+					<div class="flex flex-col">
+						<p>
+							{stats.levels[j * 2].primary}
+						</p>
+						<p>
+							{stats.levels[j * 2 + 1].primary}
+						</p>
+					</div>
+				</Table.Cell>
+				<Table.Cell class="p-2 px-4">
+					<div class="flex flex-col">
+						<p>
+							{stats.levels[j * 2].secondary}
+						</p>
+						<p>
+							{stats.levels[j * 2 + 1].secondary}
+						</p>
+					</div>
+				</Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>

src/lib/components/tables/weapon-tab-table/index.ts

@@ -0,0 +1,28 @@
+import Root from './table.svelte';
+import Body from '../../ui/table/table-body.svelte';
+import Caption from '../../ui/table/table-caption.svelte';
+import Cell from '../../ui/table/table-cell.svelte';
+import Footer from '../../ui/table/table-footer.svelte';
+import Head from '../../ui/table/table-head.svelte';
+import Header from '../../ui/table/table-header.svelte';
+import Row from '../../ui/table/table-row.svelte';
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow
+};

src/lib/components/tables/weapon-tab-table/table.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLTableAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLTableAttributes;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class="w-full overflow-auto h-full">
+	<table class={cn('w-full caption-bottom text-sm', className)} {...$$restProps}>
+		<slot />
+	</table>
+</div>

src/lib/components/ui/card/CharCard.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <a
-	class="flex flex-col w-24 xl:w-36 rounded-md overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out"
+	class="flex flex-col w-full rounded-md overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out"
 	href={link}
 >
 	<div

src/lib/components/ui/card/UserWeaponCard.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import Text from '$lib/components/typography/Text.svelte';
+	import S3Service from '$lib/services/s3';
+
+	export let name: string;
+	export let img: string;
+	export let type: string;
+	export let level: number;
+	export let ascencion: number;
+	export let refinement: number;
+	export let rarity: number;
+	export let location: string;
+</script>
+
+<div
+	class="relative flex flex-col w-full rounded-md hover:scale-105 transition-transform duration-300 ease-in-out"
+>
+	{#if location !== ''}
+		<div class="absolute z-[4] -right-2 -top-2">
+			<img
+				class="bg-neutral/70 size-10 rounded-full border-solid border-white/70 border"
+				alt={location}
+				src={S3Service.getCharacter(location).icon}
+			/>
+		</div>
+	{/if}
+
+	<div
+		class="absolute z-[4] top-1 left-1 size-6 bg-neutral/60 rounded-sm text-center
+            flex flex-row justify-center items-center
+            {refinement === 5 ? `text-primary bg-fivestar/60` : `text-text`} "
+	>
+		<p class="max-h-full text-xl leading-5 font-semibold">
+			{refinement}
+		</p>
+	</div>
+
+	<div
+		class={`rounded-t-md flex justify-center ${rarity === 5 ? 'bg-fivestar' : rarity === 4 ? 'bg-fourstar' : 'bg-threestar'}`}
+	>
+		<img alt={name} class="size-24 xl:size-36" src={img} />
+	</div>
+
+	<div class="w-full h-6 bg-tertiaryHover flex justify-center text-center items-center py-0">
+		<Text type="large">
+			Lv. {level}
+		</Text>
+	</div>
+
+	<div class="flex flex-1 justify-center p-2 text-center bg-tertiary items-center rounded-b-md">
+		<Text type="h4">
+			{name}
+		</Text>
+		<div class="hidden">{type} {level} {ascencion} {refinement}</div>
+	</div>
+</div>

src/lib/components/ui/card/WeapCard.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Text from '$lib/components/typography/Text.svelte';
+	import type { WeaponTypes } from '$lib/types/weapon';
+
+	export let link: string;
+	export let name: string;
+	export let img: string;
+	export let type: WeaponTypes;
+	export let count: number;
+	export let rarity: number;
+	export let obtained: boolean;
+</script>
+
+<a
+	class="flex flex-col w-full rounded-md overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out"
+	href={link}
+>
+	<div
+		class={`flex justify-center ${rarity === 5 ? 'bg-fivestar' : rarity === 4 ? 'bg-fourstar' : 'bg-threestar'} ${obtained ? '' : 'opacity-50'} relative`}
+	>
+		<img alt={name} class="w-24 h-24 xl:w-36 xl:h-36" src={img} />
+		<span class="absolute bg-black/70 rounded px-4 text-sm right-2 bottom-2">{count}</span>
+	</div>
+	<div class="flex flex-1 justify-center p-2 text-center bg-tertiary items-center">
+		<Text type="h4">
+			{name}
+		</Text>
+
+		<div class="hidden">{type}</div>
+	</div>
+</a>

src/lib/components/ui/character-tabs/character-tabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/character-tabs';
-	import { type Character } from '$lib/types/data/Character';
+	import type { Character } from 'dvalin-data';
 	import Card from '$lib/components/ui/card/card.svelte';
 	import Text from '$lib/components/typography/Text.svelte';
 	import StatTable from '$lib/components/tables/character-tab-table/StatTable.svelte';

src/lib/components/ui/character-tabs/weapon-tabs.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/character-tabs';
+	import Card from '$lib/components/ui/card/card.svelte';
+	import Text from '$lib/components/typography/Text.svelte';
+	import StatTable from '$lib/components/tables/weapon-tab-table/StatTable.svelte';
+	import i18n from '$lib/services/i18n';
+	import type { Weapon } from 'dvalin-data';
+
+	export let weaponData: Weapon;
+	const ascensions = weaponData.ascensions;
+	const stats = weaponData.stats;
+</script>
+
+<Tabs value="stats" class="lg:flex lg:flex-col lg:flex-grow">
+	<TabsList class="grid w-full grid-cols-2">
+		<TabsTrigger value="stats">{$i18n.t('weapons.detailed.tab.stats.title')}</TabsTrigger>
+		<TabsTrigger value="refinement">
+			{$i18n.t('weapons.detailed.tab.refinement.title')}
+		</TabsTrigger>
+		<!-- TODO : Add Materials Tab -->
+		<!-- <TabsTrigger value="materials">
+			{$i18n.t('weapons.detailed.tab.materials.title')}
+		</TabsTrigger> -->
+	</TabsList>
+	<TabsContent value="stats" class="border border-secondary/50 lg:flex-shrink lg:overflow-auto">
+		<StatTable {ascensions} {stats} />
+	</TabsContent>
+	<!--Ascension Table-->
+	<TabsContent value="refinement" class="lg:flex-shrink lg:overflow-auto">
+		{#each weaponData.refinements as refinement}
+			<Card class="flex flex-col gap-2 flex-1">
+				<Text type="h4">{weaponData.passive}. {refinement.refinement}</Text>
+				<Text type="p" class="text-sm">{refinement.desc}</Text>
+			</Card>
+		{/each}
+	</TabsContent>
+</Tabs>

src/lib/components/ui/progress/progress.svelte

@@ -7,7 +7,8 @@
 	export let max: $$Props['max'] = 100;
 	export let value: $$Props['value'] = undefined;
 	export { className as class };
-	const percent = Math.round(((value ?? 0) / (max ?? 1)) * 100);
+	const percent = Math.round(((Number(value) ?? 0) / (Number(max) ?? 1)) * 100);
+	console.log(percent);
 </script>
 
 <ProgressPrimitive.Root
@@ -19,6 +20,7 @@
 		style={`transform: translateX(-${100 - percent}%)`}
 	/>
 	<p class="h-full absolute left-1/2 top-0 -translate-x-1/2 text-xs">
-		{value}/{max} ({percent}%)
+		{value}/{max}
+		{`(${percent}%)`}
 	</p>
 </ProgressPrimitive.Root>

src/lib/locales/EN.json

@@ -175,10 +175,16 @@
 		"action.reset_filters": "Reset Filters",
 		"filter.element": "Element",
 		"filter.weapon": "Weapon",
-		"filter.rarity": "Rarity",
-		"filter.owned": "Owned",
+		"sort.rarity": "Rarity",
 		"sort.name": "Name",
+		"sort.count": "Count",
+		"sort.owned": "Owned",
 		"sort.date": "Date",
+		"weapons.overview.title": "Weapons",
+		"weapons.detailed.tab.refinement.title": "Refinement",
+		"weapons.detailed.tab.stats.title": "Stats",
+		"weapons.detailed.tab.materials.title": "Materials",
+		"weapons.title.inventory": "In your inventory",
 		"sort.constellation": "Constellation",
 		"achievement.title": "Achievements",
 		"achievement.filter.all": "No filter",
@@ -187,6 +193,7 @@
 		"achievement.filter.hidden": "Hidden",
 		"achievement.more_info": "More info",
 		"achievement.unachieved": "Show unachieved first",
+		"rarity": "Rarity",
 		"language.DE": "Deutsch",
 		"language.EN": "English",
 		"language.ES": "Español",

src/lib/services/backend/data.ts

@@ -7,7 +7,7 @@ import { backendFetch } from '$lib/services/backend/index';
 import type { CharacterIndex } from '$lib/types/index/character';
 import type { WeaponIndex } from '$lib/types/index/weapon';
 import type { Character } from '$lib/types/data/Character';
-import type { Weapon } from '$lib/types/data/Weapon';
+import type { Weapon } from 'dvalin-data';
 import type { mergedAchievements } from '$lib/types/achievement';
 
 type FetchCharacterDataIndexResponse = CharacterIndex;

src/lib/types/index/weapon.ts

@@ -4,5 +4,6 @@ export type WeaponIndex = {
 	[key in WeaponKey]: {
 		name: string;
 		rarity: number;
+		type: string;
 	};
 };

src/routes/+page.svelte

@@ -17,7 +17,7 @@
 	import { Input } from '$lib/components/ui/input';
 
 	import { mdiPencil, mdiImport, mdiAccount, mdiSwordCross, mdiTrashCanOutline } from '@mdi/js';
-	import CharCard from '$lib/components/ui/card/CharCard.svelte';
+	import CharCard from '$lib/components/ui/card/WeapCard.svelte';
 	import type { Elements } from '$lib/types/elements';
 	import type { WeaponTypes } from '$lib/types/weapon';
 	import { onMount } from 'svelte';