Talent builder 2.0

package.json

@@ -24,6 +24,7 @@
 		"babel-plugin-react-compiler": "0.0.0-experimental-fe484b5-20240912",
 		"classnames": "^2.5.1",
 		"drizzle-orm": "^0.33.0",
+		"html-to-image": "^1.11.11",
 		"lodash-es": "^4.17.21",
 		"lucide-react": "^0.441.0",
 		"nanoid": "^5.0.7",

public/icons/list.json

@@ -59,6 +59,10 @@
     -1,
     "inv_jewelry_ring_emerald"
   ],
+  [
+    -1,
+    "inv_jewelry_ring_gilneas"
+  ],
   [
     -1,
     "inv_jewelry_ring_gold"
@@ -159,6 +163,10 @@
     -1,
     "inv_nethraka"
   ],
+  [
+    -1,
+    "inv_pvppandarenserpentmount"
+  ],
   [
     -1,
     "inv_redgem"
@@ -179,14 +187,46 @@
     -1,
     "inv_weapon_bonebow2"
   ],
+  [
+    -1,
+    "inv_bishophat"
+  ],
   [
     -1,
     "inv_censer"
   ],
+  [
+    -1,
+    "inv_demonaxe"
+  ],
+  [
+    -1,
+    "inv_demonhornhelmet"
+  ],
+  [
+    -1,
+    "inv_demonhornshoulders"
+  ],
   [
     -1,
     "inv_mallet"
   ],
+  [
+    -1,
+    "ability_mage_firestarter"
+  ],
+  [
+    2340,
+    "ability_warlock_power_overwhelming"
+  ],
+  [
+    2349,
+    "ability_warrior_reprisal"
+  ],
+  [
+    2341,
+    "ability_warrior_stalwartprotector"
+  ],
   [
     -1,
     "class_druid"
@@ -223,6 +263,14 @@
     -1,
     "class_warrior"
   ],
+  [
+    2333,
+    "inv_corgi2"
+  ],
+  [
+    2342,
+    "inv_misc_gem_felstone"
+  ],
   [
     -1,
     "inv_ore_gold_01"
@@ -708,7 +756,7 @@
     "spell_fire_bluefire"
   ],
   [
-    -1,
+    2337,
     "trade_archaeology_highbornesoulmirror"
   ],
   [
@@ -2252,7 +2300,7 @@
     "spell_holy_surgeoflight"
   ],
   [
-    -1,
+    2335,
     "spell_mage_focusingcrystal"
   ],
   [
@@ -2496,7 +2544,7 @@
     "garrison_upgrade"
   ],
   [
-    -1,
+    2336,
     "garrison_weaponupgrade"
   ],
   [
@@ -2800,7 +2848,7 @@
     "inv_pet_mechanicalchicken"
   ],
   [
-    -1,
+    2344,
     "inv_pet_monkey"
   ],
   [
@@ -7176,7 +7224,7 @@
     "inv_enchant_essencemagicsmall"
   ],
   [
-    -1,
+    2334,
     "inv_enchant_essencemysticallarge"
   ],
   [
@@ -8840,7 +8888,7 @@
     "inv_misc_book_07"
   ],
   [
-    -1,
+    2331,
     "inv_misc_book_08"
   ],
   [
@@ -9532,7 +9580,7 @@
     "inv_misc_gear_07"
   ],
   [
-    -1,
+    2345,
     "inv_misc_gear_08"
   ],
   [
@@ -9828,7 +9876,7 @@
     "inv_misc_herb_01"
   ],
   [
-    -1,
+    2328,
     "inv_misc_herb_02"
   ],
   [
@@ -10040,7 +10088,7 @@
     "inv_misc_leatherscrap_08"
   ],
   [
-    -1,
+    2332,
     "inv_misc_map_01"
   ],
   [
@@ -10376,11 +10424,11 @@
     "inv_misc_quiver_02"
   ],
   [
-    -1,
+    2330,
     "inv_misc_quiver_03"
   ],
   [
-    -1,
+    2343,
     "inv_misc_quiver_04"
   ],
   [
@@ -11900,7 +11948,7 @@
     "inv_sword_30"
   ],
   [
-    -1,
+    2325,
     "inv_sword_31"
   ],
   [

src/app/admin/PageContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Download, Upload, RotateCcw, User, Images } from 'lucide-react';
+import { Download, Upload, User, Images } from 'lucide-react';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 
@@ -10,14 +10,15 @@ import TextButton from '~/components/styled/TextButton';
 import useAsyncAction from '~/hooks/useAsyncAction';
 import {
 	createTurtleWoWAccount,
-	exportClientTrees,
 	exportTable,
 	exportMissingIcons,
-	importClientTrees,
-	importTable,
-	regenerateIds
+	importTable
 } from '~/server/api/routers/general';
 import { downloadBlob } from '~/utils';
+import {
+	exportCollection,
+	importCollection
+} from '~/server/api/routers/collection';
 
 import AdminModule from './AdminModule';
 
@@ -26,6 +27,8 @@ const PageContent = () => {
 
 	const [table, setTable] = useState('');
 	const [dbImport, setDbImport] = useState('');
+
+	const [collection, setCollection] = useState('');
 	const [clientImport, setClientImport] = useState('');
 
 	return (
@@ -40,13 +43,6 @@ const PageContent = () => {
 					>
 						Create TurtleWoW account
 					</TextButton>
-					<TextButton
-						icon={RotateCcw}
-						onClick={asyncAction(() => regenerateIds(undefined))}
-						disabled={disableInteractions}
-					>
-						Regenerate IDs
-					</TextButton>
 					<TextButton
 						icon={Images}
 						onClick={asyncAction(async () => {
@@ -99,7 +95,12 @@ const PageContent = () => {
 					</div>
 				</AdminModule>
 
-				<AdminModule title="Import trees from client">
+				<AdminModule title="Import/export collection">
+					<Input
+						placeholder="Collection name"
+						value={collection}
+						onChange={e => setCollection(e.currentTarget.value)}
+					/>
 					<Textarea
 						value={clientImport}
 						onChange={e => setClientImport(e.currentTarget.value)}
@@ -110,7 +111,9 @@ const PageContent = () => {
 					<div className="flex gap-2 self-end">
 						<TextButton
 							icon={Upload}
-							onClick={asyncAction(() => importClientTrees(clientImport))}
+							onClick={asyncAction(() =>
+								importCollection({ collection, json: clientImport })
+							)}
 							disabled={disableInteractions}
 							className="self-end"
 						>
@@ -119,7 +122,7 @@ const PageContent = () => {
 						<TextButton
 							icon={Download}
 							onClick={asyncAction(async () => {
-								const response = await exportClientTrees(undefined);
+								const response = await exportCollection(collection);
 								window.navigator.clipboard.writeText(response);
 								toast.success('Copied to clipboard');
 							})}

src/app/c/[collection]/[class]/[index]/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from '~/components/styled/Spinner';
+
+const Loading = () => (
+	<div className="my-6 flex grow items-center justify-center">
+		<Spinner />
+	</div>
+);
+
+export default Loading;

src/app/c/[collection]/[class]/[index]/page.tsx

@@ -0,0 +1,56 @@
+import { notFound } from 'next/navigation';
+import { z } from 'zod';
+
+import TalentBuilder from '~/components/builder/TalentBuilder';
+import { getOgInfo } from '~/server/api/routers/openGraph';
+import { classMask, getIconPath } from '~/utils';
+import { env } from '~/env';
+import { getCollectionTree } from '~/server/api/routers/collection';
+
+const ParamsSchema = z.object({
+	collection: z.string(),
+	class: z.preprocess(
+		v =>
+			Object.entries(classMask).find(
+				m => m[1].name.toLocaleLowerCase() === v
+			)?.[0] ?? 0,
+		z.coerce.number()
+	),
+	index: z.coerce.number()
+});
+
+type PageProps = {
+	params: z.infer<typeof ParamsSchema>;
+};
+
+export const generateMetadata = async ({ params }: PageProps) => {
+	const parsed = ParamsSchema.safeParse(params);
+	if (!parsed.success) return notFound();
+
+	const talentTree = await getCollectionTree(parsed.data);
+	if (!talentTree) return notFound();
+
+	const info = await getOgInfo(talentTree.id);
+	if (!info) return null;
+	return {
+		title: `${info.name} | Talent Builder`,
+		description: `Talent tree created by ${info.user.name}`,
+		icons: [{ rel: 'icon', url: env.DEPLOY_URL + getIconPath(info.icon) }]
+	};
+};
+
+const TalentTreePage = async ({ params }: PageProps) => {
+	const parsed = ParamsSchema.safeParse(params);
+	if (!parsed.success) {
+		console.dir(parsed.error, { depth: null });
+		return notFound();
+	}
+
+	console.log(parsed.data);
+	const talentTree = await getCollectionTree(parsed.data);
+	if (!talentTree) return notFound();
+
+	return <TalentBuilder defaultValues={talentTree} />;
+};
+
+export default TalentTreePage;

src/app/c/[collection]/[class]/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from '~/components/styled/Spinner';
+
+const Loading = () => (
+	<div className="my-6 flex grow items-center justify-center">
+		<Spinner />
+	</div>
+);
+
+export default Loading;