= (props) => {
{props.imageExtra}
@@ -174,7 +176,7 @@ const ItemWithEffects: React.FC = (props) => {
- {!hideDetails && item.description && (
+ {!hideDetails && "description" in item && item.description && (
{parseHtml(item.description)}
)}
@@ -231,6 +233,31 @@ const ItemWithEffects: React.FC = (props) => {
Rank: {item.rank}
)}
+ {"frames" in item && item.frames && (
+
+ Frames: {item.frames}
+
+ )}
+ {"speed" in item && item.speed && (
+
+ Speed: {item.speed}
+
+ )}
+ {"type" in item && item.type && (
+
+ Type: {item.type.toLowerCase()}
+
+ )}
+ {"onInitialBattleField" in item && item.onInitialBattleField && (
+
+ On battlefield: {item.onInitialBattleField ? "yes" : "no"}
+
+ )}
+ {"licenseDetails" in item && item.licenseDetails && (
+
+ License: {item.licenseDetails}
+
+ )}
{"village" in item &&
item.village &&
typeof item.village === "object" &&
diff --git a/app/src/libs/asset.ts b/app/src/libs/asset.ts
new file mode 100644
index 00000000..aebabc83
--- /dev/null
+++ b/app/src/libs/asset.ts
@@ -0,0 +1,61 @@
+import { calculateContentDiff } from "@/utils/diff";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { gameAssetValidator } from "@/validators/asset";
+import { api } from "@/utils/api";
+import { showMutationToast, showFormErrorsToast } from "@/libs/toast";
+import { GameAssetTypes } from "@/drizzle/constants";
+import type { GameAsset } from "@/drizzle/schema";
+import type { FormEntry } from "@/layout/EditContent";
+import type { ZodGameAssetType } from "@/validators/asset";
+
+/**
+ * Hook used when creating frontend forms for editing assets
+ * @param data
+ */
+export const useAssetEditForm = (asset: GameAsset, refetch: () => void) => {
+ // Form handling
+ const form = useForm({
+ mode: "all",
+ criteriaMode: "all",
+ values: asset,
+ defaultValues: asset,
+ resolver: zodResolver(gameAssetValidator),
+ });
+
+ // Mutation for updating asset
+ const { mutate: updateAsset } = api.gameAsset.update.useMutation({
+ onSuccess: (data) => {
+ showMutationToast(data);
+ refetch();
+ },
+ });
+
+ // Form submission
+ const handleAssetSubmit = form.handleSubmit(
+ (data: ZodGameAssetType) => {
+ const newAsset = { ...asset, ...data };
+ const diff = calculateContentDiff(asset, newAsset);
+ if (diff.length > 0) {
+ updateAsset({ id: asset.id, data: newAsset });
+ }
+ },
+ (errors) => showFormErrorsToast(errors),
+ );
+
+ // Watch for changes to avatar
+ const imageUrl = form.watch("image");
+
+ // Object for form values
+ const formData: FormEntry[] = [
+ { id: "name", label: "Asset Name", type: "text" },
+ { id: "image", type: "avatar", href: imageUrl },
+ { id: "frames", type: "number", label: "Number of Frames" },
+ { id: "speed", type: "number", label: "Speed of Animation" },
+ { id: "licenseDetails", type: "text", label: "License Details" },
+ { id: "type", type: "str_array", values: GameAssetTypes },
+ { id: "onInitialBattleField", type: "boolean" },
+ ];
+
+ return { asset, form, formData, handleAssetSubmit };
+};
diff --git a/app/src/libs/combat/drawing.ts b/app/src/libs/combat/drawing.ts
index 9ba72222..f679dccf 100644
--- a/app/src/libs/combat/drawing.ts
+++ b/app/src/libs/combat/drawing.ts
@@ -150,7 +150,7 @@ export const drawCombatBackground = (
* Draw/update the users on the map. Should be called on every render
*/
export const drawCombatEffects = (info: {
- groupGround: Group;
+ groupEffects: Group;
battle: ReturnedBattle;
grid: Grid;
animationId: number;
@@ -158,7 +158,7 @@ export const drawCombatEffects = (info: {
gameAssets: GameAsset[];
}) => {
// Destructure
- const { battle, groupGround, spriteMixer, animationId, gameAssets } = info;
+ const { battle, groupEffects, spriteMixer, animationId, gameAssets } = info;
const { groundEffects, usersEffects, usersState } = battle;
// Record of drawn IDs
@@ -171,7 +171,7 @@ export const drawCombatEffects = (info: {
y: effect.latitude,
});
drawCombatEffect({
- groupGround,
+ groupEffects,
effect,
animationId,
hex,
@@ -189,7 +189,7 @@ export const drawCombatEffects = (info: {
y: user.latitude,
});
drawCombatEffect({
- groupGround,
+ groupEffects,
effect,
animationId,
hex,
@@ -201,7 +201,7 @@ export const drawCombatEffects = (info: {
});
// Hide all which are not used anymore
- groupGround.children.forEach((object) => {
+ groupEffects.children.forEach((object) => {
if (!drawnIds.has(object.name)) {
object.visible = false;
}
@@ -209,7 +209,7 @@ export const drawCombatEffects = (info: {
};
export const drawCombatEffect = (info: {
- groupGround: Group;
+ groupEffects: Group;
effect: GroundEffect | UserEffect;
animationId: number;
hex?: TerrainHex;
@@ -218,12 +218,12 @@ export const drawCombatEffect = (info: {
gameAssets: GameAsset[];
}) => {
// Destructure
- const { effect, groupGround, animationId, hex, drawnIds } = info;
+ const { effect, groupEffects, animationId, hex, drawnIds } = info;
const { spriteMixer, gameAssets } = info;
if (hex) {
if (effect.staticAssetPath || effect.appearAnimation || effect.disappearAnimation) {
const { height: h, width: w } = hex;
- let asset = groupGround.getObjectByName(effect.id) as Group;
+ let asset = groupEffects.getObjectByName(effect.id) as Group;
if (!asset) {
// Group for the asset
asset = new Group();
@@ -232,7 +232,6 @@ export const drawCombatEffect = (info: {
// Sprite to show
if (effect.staticAssetPath) {
const obj = gameAssets.find((a) => a.id === effect.staticAssetPath);
- console.log("obj", obj);
if (obj) {
const texture = loadTexture(obj.image);
const material = new SpriteMaterial({ map: texture });
@@ -271,7 +270,7 @@ export const drawCombatEffect = (info: {
hp_background.visible = false;
}
// Add to group
- groupGround.add(asset);
+ groupEffects.add(asset);
}
// Set visibility
diff --git a/app/src/server/api/root.ts b/app/src/server/api/root.ts
index fbbd8413..a9336c19 100644
--- a/app/src/server/api/root.ts
+++ b/app/src/server/api/root.ts
@@ -12,6 +12,7 @@ import { conceptartRouter } from "./routers/conceptart";
import { clanRouter } from "./routers/clan";
import { dataRouter } from "./routers/data";
import { forumRouter } from "./routers/forum";
+import { gameAssetRouter } from "./routers/asset";
import { homeRouter } from "./routers/home";
import { hospitalRouter } from "./routers/hospital";
import { itemRouter } from "./routers/item";
@@ -54,6 +55,7 @@ export const appRouter = createTRPCRouter({
clan: clanRouter,
data: dataRouter,
forum: forumRouter,
+ gameAsset: gameAssetRouter,
home: homeRouter,
hospital: hospitalRouter,
item: itemRouter,
diff --git a/app/src/server/api/routers/asset.ts b/app/src/server/api/routers/asset.ts
new file mode 100644
index 00000000..c9478c43
--- /dev/null
+++ b/app/src/server/api/routers/asset.ts
@@ -0,0 +1,132 @@
+import { z } from "zod";
+import { nanoid } from "nanoid";
+import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
+import { serverError, baseServerResponse } from "@/api/trpc";
+import { eq } from "drizzle-orm";
+import { gameAsset } from "@/drizzle/schema";
+import { actionLog } from "@/drizzle/schema";
+import { gameAssetValidator } from "@/validators/asset";
+import { fetchUser } from "@/routers/profile";
+import { canChangeContent } from "@/utils/permissions";
+import { callDiscordContent } from "@/libs/discord";
+import { calculateContentDiff } from "@/utils/diff";
+import { IMG_AVATAR_DEFAULT } from "@/drizzle/constants";
+import { setEmptyStringsToNulls } from "@/utils/typeutils";
+import type { DrizzleClient } from "@/server/db";
+
+export const gameAssetRouter = createTRPCRouter({
+ getAllNames: publicProcedure.query(async ({ ctx }) => {
+ return await ctx.drizzle.query.gameAsset.findMany({
+ columns: { id: true, name: true, image: true },
+ });
+ }),
+ getAll: publicProcedure
+ .input(
+ z
+ .object({
+ cursor: z.number().nullish(),
+ limit: z.number().min(1).max(500),
+ })
+ .optional(),
+ )
+ .query(async ({ ctx, input }) => {
+ const currentCursor = input?.cursor ? input.cursor : 0;
+ const limit = input?.limit ? input.limit : 100;
+ const skip = currentCursor * limit;
+ const results = await ctx.drizzle.query.gameAsset.findMany({
+ offset: skip,
+ limit: limit,
+ });
+ const nextCursor = results.length < limit ? null : currentCursor + 1;
+ return {
+ data: results,
+ nextCursor: nextCursor,
+ };
+ }),
+ get: publicProcedure
+ .input(z.object({ id: z.string() }))
+ .query(async ({ ctx, input }) => {
+ const result = await fetchgameAsset(ctx.drizzle, input.id);
+ if (!result) {
+ throw serverError("NOT_FOUND", "gameAsset not found");
+ }
+ return result;
+ }),
+ update: protectedProcedure
+ .input(z.object({ id: z.string(), data: gameAssetValidator }))
+ .output(baseServerResponse)
+ .mutation(async ({ ctx, input }) => {
+ setEmptyStringsToNulls(input.data);
+ const user = await fetchUser(ctx.drizzle, ctx.userId);
+ const entry = await fetchgameAsset(ctx.drizzle, input.id);
+ if (entry && canChangeContent(user.role)) {
+ // Calculate diff
+ const diff = calculateContentDiff(entry, {
+ id: entry.id,
+ createdAt: entry.createdAt,
+ ...input.data,
+ });
+ // Update database
+ await Promise.all([
+ ctx.drizzle
+ .update(gameAsset)
+ .set(input.data)
+ .where(eq(gameAsset.id, entry.id)),
+ ctx.drizzle.insert(actionLog).values({
+ id: nanoid(),
+ userId: ctx.userId,
+ tableName: "gameAsset",
+ changes: diff,
+ relatedId: entry.id,
+ relatedMsg: `Update: ${entry.name}`,
+ relatedImage: entry.image,
+ }),
+ ]);
+ if (process.env.NODE_ENV !== "development") {
+ await callDiscordContent(user.username, entry.name, diff, entry.image);
+ }
+ return { success: true, message: `Data updated: ${diff.join(". ")}` };
+ } else {
+ return { success: false, message: `Not allowed to edit gameAsset` };
+ }
+ }),
+ create: protectedProcedure.output(baseServerResponse).mutation(async ({ ctx }) => {
+ const user = await fetchUser(ctx.drizzle, ctx.userId);
+ if (canChangeContent(user.role)) {
+ const id = nanoid();
+ await ctx.drizzle.insert(gameAsset).values({
+ id: id,
+ name: "Placeholder",
+ type: "STATIC",
+ image: IMG_AVATAR_DEFAULT,
+ createdByUserId: ctx.userId,
+ });
+ return { success: true, message: id };
+ } else {
+ return { success: false, message: `Not allowed to create gameAsset` };
+ }
+ }),
+ delete: protectedProcedure
+ .input(z.object({ id: z.string() }))
+ .output(baseServerResponse)
+ .mutation(async ({ ctx, input }) => {
+ const user = await fetchUser(ctx.drizzle, ctx.userId);
+ const entry = await fetchgameAsset(ctx.drizzle, input.id);
+ if (entry && canChangeContent(user.role)) {
+ await ctx.drizzle.delete(gameAsset).where(eq(gameAsset.id, input.id));
+ return { success: true, message: `gameAsset deleted` };
+ } else {
+ return { success: false, message: `Not allowed to delete gameAsset` };
+ }
+ }),
+});
+
+/**
+ * COMMON QUERIES WHICH ARE REUSED
+ */
+
+export const fetchgameAsset = async (client: DrizzleClient, id: string) => {
+ return await client.query.gameAsset.findFirst({
+ where: eq(gameAsset.id, id),
+ });
+};
diff --git a/app/src/validators/asset.ts b/app/src/validators/asset.ts
new file mode 100644
index 00000000..ba830966
--- /dev/null
+++ b/app/src/validators/asset.ts
@@ -0,0 +1,14 @@
+import { z } from "zod";
+import { GameAssetTypes } from "@/drizzle/constants";
+
+export const gameAssetValidator = z.object({
+ name: z.string().min(1).max(191),
+ image: z.string().url(),
+ frames: z.coerce.number().int().min(1).max(100),
+ speed: z.coerce.number().int().min(1).max(100),
+ type: z.enum(GameAssetTypes),
+ licenseDetails: z.string().min(1).max(512),
+ onInitialBattleField: z.boolean(),
+});
+
+export type ZodGameAssetType = z.infer;