characters added to forum post

app/frontend/src/Components/Character/Character.tsx

@@ -1,22 +1,25 @@
+import clsx from "clsx";
 import styles from "./Character.module.scss";
 
 function Character({
   onClick,
   name,
   imgUrl,
+  className,
 }: {
-  onClick: () => void;
+  onClick?: () => void;
   name: string;
   imgUrl: string;
+  className?: string;
 }) {
   return (
     <div>
       <div
-        className={styles.characterContainer}
+        className={clsx(styles.characterContainer, className)}
         style={{
           backgroundImage: `url(${imgUrl})`,
         }}
-        onClick={() => onClick()}
+        onClick={() => onClick?.()}
       >
         <div className={styles.fadeContainer}>
           <div

app/frontend/src/Components/Character/CharacterDetails.tsx

@@ -10,7 +10,13 @@ import Vibrant from "node-vibrant";
 import styles from "./CharacterDetails.module.scss";
 import Character from "./Character";
 
-function CharacterDetails({ character }: { character: any }) {
+function CharacterDetails({
+  character,
+  className,
+}: {
+  character: any;
+  className?: string;
+}) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [palette, setPalette] = useState({} as any);
 
@@ -94,7 +100,7 @@ function CharacterDetails({ character }: { character: any }) {
   if (character?.customFields !== undefined) {
     borderedItems = [
       ...defaultItems,
-      ...Object.keys(character?.customFields).map((key: any) => {
+      ...Object.keys(character?.customFields || {}).map((key: any) => {
         return {
           key: key,
           label: key,
@@ -112,6 +118,7 @@ function CharacterDetails({ character }: { character: any }) {
         imgUrl={imageUrl}
         name={character?.name}
         onClick={showModal}
+        className={className}
       ></Character>
       <ConfigProvider
         theme={{

app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss

@@ -29,6 +29,12 @@
       width: auto;
       aspect-ratio: 1;
     }
+
+    .character {
+      height: 100%;
+      aspect-ratio: 1;
+      width: auto;
+    }
   }
 
   .titleContainer {
@@ -38,9 +44,13 @@
     gap: 0.5rem;
     grid-area: t;
 
+    overflow: hidden;
+
     .title {
       font-weight: bold;
       font-size: 1.2em;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 

app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx

@@ -20,6 +20,8 @@ import { twj } from "tw-to-css";
 import { NotificationUtil } from "../../../Library/utils/notification";
 import { handleAxiosError } from "../../../Library/utils/handleError";
 import SquareAchievement from "../../Achievement/SquareAchievement/SquareAchievement";
+import Character from "../../Character/Character";
+import CharacterDetails from "../../Character/CharacterDetails";
 
 function ForumPost({
   post,
@@ -89,7 +91,7 @@ function ForumPost({
         />
       </div>
 
-      {(post.postImage || post.achievement) && (
+      {(post.postImage || post.achievement || post.character) && (
         <div className={styles.imgConatiner}>
           {post.postImage && (
             <img
@@ -98,6 +100,13 @@ function ForumPost({
             />
           )}
           {post.achievement && <SquareAchievement props={post.achievement} />}
+
+          {post.character && (
+            <CharacterDetails
+              character={post.character}
+              className={styles.character}
+            />
+          )}
         </div>
       )}
 

app/frontend/src/Pages/ForumPost/ForumPost.module.scss

@@ -25,7 +25,7 @@
 
   .postContainer {
     display: grid;
-    grid-template-rows: 80px min-content min-content 250px min-content;
+    grid-template-rows: 80px min-content min-content min-content 250px min-content;
     border-radius: 0.5em;
     padding: 1em;
     background-color: $celadon;
@@ -35,6 +35,7 @@
       "t"
       "i"
       "a"
+      "c"
       "b"
       "m";
     .edit {
@@ -46,6 +47,30 @@
       display: flex;
       align-items: center;
       grid-area: a;
+      background-color: $vanilla-light-50;
+      border-radius: 0.5em;
+      padding: 0.5em;
+      span {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin: 0em 2em;
+        opacity: 50%;
+      }
+    }
+
+    .character {
+      display: flex;
+      align-items: center;
+      grid-area: c;
+      background-color: $vanilla-light-50;
+      border-radius: 0.5em;
+      padding: 0.5em;
+      span {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin: 0em 2em;
+        opacity: 50%;
+      }
     }
     .title {
       grid-area: t;

app/frontend/src/Pages/ForumPost/ForumPost.tsx

@@ -31,6 +31,7 @@ import Achievement from "../../Components/Achievement/Achievement/Achievement.ts
 import { grantAchievement } from "../../Services/achievement.ts";
 import { formatDate } from "../../Library/utils/formatDate.ts";
 import { handleError } from "../../Library/utils/handleError.ts";
+import CharacterDetails from "../../Components/Character/CharacterDetails.tsx";
 
 function ForumPost() {
   const { isLoggedIn, user } = useAuth();
@@ -136,12 +137,20 @@ function ForumPost() {
           )}
           {post.achievement && (
             <div className={styles.achievement}>
+              <span>Achievement:</span>
               <Achievement props={post.achievement} />
               {user?.role === "ADMIN" && (
                 <Button onClick={() => grant()}>Grant Achievement</Button>
               )}
             </div>
           )}
+          {post.character && (
+            <div className={styles.character}>
+              <span>Character:</span>
+
+              <CharacterDetails character={post?.character} />
+            </div>
+          )}
           <span className={styles.body}>
             {post.postContent}
             <span className={styles.postDetails}>

app/frontend/src/Pages/ForumPostForm/ForumPostForm.module.scss

@@ -14,8 +14,8 @@
       cursor: pointer;
       border-radius: 0.5em;
       &.active {
-        border: 2px solid $orange;
-        margin: -2px;
+        outline: 2px solid $orange;
+        outline-offset: 4px;
       }
     }
   }

app/frontend/src/Pages/ForumPostForm/ForumPostForm.tsx

@@ -11,6 +11,8 @@ import UploadArea from "../../Components/UploadArea/UploadArea";
 import { getGameAchievements } from "../../Services/achievement";
 import SquareAchievement from "../../Components/Achievement/SquareAchievement/SquareAchievement";
 import clsx from "clsx";
+import { getCharacterByGame } from "../../Services/character";
+import Character from "../../Components/Character/Character";
 
 function ForumPostForm() {
   const [form] = useForm();
@@ -20,6 +22,8 @@ function ForumPostForm() {
   const queryClient = useQueryClient();
   const [imageUrl, setImageUrl] = useState<string | undefined>();
   const [achievement, setAchievement] = useState<any>(null);
+  const [character, setCharacter] = useState<any>(null);
+
   const gameId = searchParams.get("gameId");
 
   const { data: achievements } = useQuery(
@@ -28,6 +32,14 @@ function ForumPostForm() {
     { enabled: !!gameId }
   );
 
+  const { data: characters, isLoading: isLoadingCharacters } = useQuery(
+    ["characters", gameId],
+    () => getCharacterByGame(gameId!),
+    {
+      enabled: !!gameId,
+    }
+  );
+
   const { data: editedPost, isLoading: editLoading } = useQuery(
     ["post", editId],
     () => getPost(editId!),
@@ -71,6 +83,7 @@ function ForumPostForm() {
           tags,
           postImage: imageUrl,
           achievement: achievement || undefined,
+          character: character || undefined,
         });
       } else {
         return editPost({ id: editId!, title, postContent });
@@ -110,16 +123,44 @@ function ForumPostForm() {
                 <div className={styles.achievements}>
                   {achievements?.map((a: any) => (
                     <div
-
                       className={clsx(achievement === a.id && styles.active)}
+                      key={a?.id}
+                    >
+                      <SquareAchievement
+                        props={a}
+                        onClick={() => {
+                          if (achievement === a.id) {
+                            setAchievement(null);
+                          } else {
+                            setAchievement(a.id);
+                          }
+                        }}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </Form.Item>
+            )}
+
+            {gameId && (
+              <Form.Item label="Characters">
+                <div className={styles.achievements}>
+                  {characters?.map((a: any) => (
+                    <div
+                      className={clsx(character === a.id && styles.active)}
+                      key={a?.id}
                     >
-                      <SquareAchievement props={a} onClick={() => {
-                        if (achievement === a.id) {
-                          setAchievement(null);
-                        } else {
-                          setAchievement(a.id);
-                        }
-                      }} />
+                      <Character
+                        imgUrl={`${import.meta.env.VITE_APP_IMG_URL}${a?.icon}`}
+                        name={a?.name}
+                        onClick={() => {
+                          if (character === a.id) {
+                            setCharacter(null);
+                          } else {
+                            setCharacter(a.id);
+                          }
+                        }}
+                      />
                     </div>
                   ))}
                 </div>

app/frontend/src/Services/forum.ts

@@ -37,13 +37,15 @@ export const createPost = async ({
   forum,
   tags = [],
   achievement,
+  character,
 }: {
   title: string;
   postContent: string;
   postImage?: string;
   forum: string;
   tags?: string[];
   achievement?: string;
+  character: string;
 }) => {
   const response = await axios.post(
     import.meta.env.VITE_APP_API_URL + "/post/create",
@@ -54,6 +56,7 @@ export const createPost = async ({
       forum,
       tags,
       achievement,
+      character,
     }
   );
   return response.data;