fixed workshop requests & added users discord links

PPLBandage · Aug 10, 2024 · 243d5b5 · 243d5b5
1 parent d91aa6b
commit 243d5b5
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 9 deletions.
diff --git a/src/app/modules/components/asyncImage.module.ts b/src/app/modules/components/asyncImage.module.ts
@@ -7,4 +7,13 @@ const AsyncImage = (src: string): Promise<HTMLImageElement> =>
         img.onerror = () => reject(new Error("Failed to load image"));
     });
 
+export const base64Encode = (img: HTMLImageElement) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.height = img.naturalHeight;
+    canvas.width = img.naturalWidth;
+    ctx.drawImage(this, 0, 0);
+    return canvas.toDataURL();
+}
+
 export default AsyncImage;
diff --git a/src/app/modules/components/header.module.tsx b/src/app/modules/components/header.module.tsx
@@ -30,6 +30,7 @@ const Header = (): JSX.Element => {
     const { data } = useQuery({
         queryKey: ["userProfile"],
         retry: 5,
+        refetchOnWindowFocus: false,
         queryFn: async () => {
             try {
                 const res = await authApi.get("/user/me");

diff --git a/src/app/modules/components/me.module.tsx b/src/app/modules/components/me.module.tsx
@@ -25,7 +25,7 @@ const Default = ({ data, islogged, color }: { data: Query, islogged: boolean, co
                 <p title={formatDate(new Date(data?.joined_at))}>Аккаунт создан {timeStamp((new Date(data?.joined_at).getTime()) / 1000)}</p>
             </div>
 
-            <p className={style_sidebar.uid}>Discord id: {data?.discordID}</p>
+            <p className={style_sidebar.uid}>Discord id: <Link href={`https://discord.com/users/${data?.discordID}`} className={style_sidebar.discord_id} target="_blank">{data?.discordID}</Link></p>
         </div>
     );
 }
@@ -44,7 +44,7 @@ const ImprovedTheme = ({ data, islogged }: { data: Query, islogged: boolean }) =
                     <p title={formatDate(new Date(data?.joined_at))}>Аккаунт создан {timeStamp((new Date(data?.joined_at).getTime()) / 1000)}</p>
                 </div>
 
-                <p className={style_sidebar.uid}>Discord id: {data?.discordID}</p>
+                <p className={style_sidebar.uid}>Discord id: <Link href={`https://discord.com/users/${data?.discordID}`} className={style_sidebar.discord_id} target="_blank">{data?.discordID}</Link></p>
             </div>
         </div>
     );

diff --git a/src/app/styles/me/sidebar.module.css b/src/app/styles/me/sidebar.module.css
@@ -214,6 +214,14 @@
     justify-content: center;
 }
 
+.discord_id {
+    text-decoration: none;
+}
+
+.discord_id:hover {
+    text-decoration: underline;
+}
+
 
 @media(max-width: 650px) {
     .main {

diff --git a/src/app/workshop/[id]/bandage_engine.module.tsx b/src/app/workshop/[id]/bandage_engine.module.tsx
@@ -381,4 +381,68 @@ const hex2rgb = (hex: string) => {
     return [r, g, b];
 }
 
+export const to64 = (skin: HTMLImageElement): HTMLCanvasElement => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error("Unable to get canvas context");
+    }
+
+    canvas.width = 64;
+    canvas.height = 64;
+
+    const leg = document.createElement('canvas');
+    const legCtx = leg.getContext('2d');
+    if (!legCtx) {
+        throw new Error("Unable to get canvas context for leg");
+    }
+    leg.width = 16;
+    leg.height = 16;
+    legCtx.drawImage(skin, 0, 16, 16, 16, 0, 0, 16, 16);
+
+    const arm = document.createElement('canvas');
+    const armCtx = arm.getContext('2d');
+    if (!armCtx) {
+        throw new Error("Unable to get canvas context for arm");
+    }
+    arm.width = 24;
+    arm.height = 16;
+    armCtx.drawImage(skin, 40, 16, 24, 16, 0, 0, 24, 16);
+
+    ctx.drawImage(leg, 16, 48);
+    ctx.drawImage(arm, 32, 48);
+    ctx.drawImage(skin, 0, 0);
+
+    // Mirroring functions for easier handling of symmetrical parts
+    const mirrorImage = (srcCanvas: HTMLCanvasElement, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number) => {
+        const tempCanvas = document.createElement('canvas');
+        const tempCtx = tempCanvas.getContext('2d');
+        if (!tempCtx) {
+            throw new Error("Unable to get temporary canvas context");
+        }
+        tempCanvas.width = sw;
+        tempCanvas.height = sh;
+        tempCtx.scale(-1, 1);
+        tempCtx.drawImage(srcCanvas, sx, sy, sw, sh, -sw, 0, sw, sh);
+        ctx.drawImage(tempCanvas, 0, 0, sw, sh, dx, dy, sw, sh);
+    }
+
+    mirrorImage(leg, 0, 4, 4, 12, 24, 52);
+    mirrorImage(leg, 8, 4, 4, 12, 16, 52);
+    mirrorImage(leg, 4, 4, 4, 12, 20, 52);
+    mirrorImage(leg, 12, 4, 4, 12, 28, 52);
+    mirrorImage(leg, 4, 0, 4, 4, 20, 48);
+    mirrorImage(leg, 8, 0, 4, 4, 24, 48);
+
+    mirrorImage(arm, 0, 4, 4, 12, 40, 52);
+    mirrorImage(arm, 8, 4, 4, 12, 32, 52);
+    mirrorImage(arm, 4, 4, 4, 12, 36, 52);
+    mirrorImage(arm, 12, 4, 4, 12, 44, 52);
+    mirrorImage(arm, 4, 0, 4, 4, 36, 48);
+    mirrorImage(arm, 8, 0, 4, 4, 40, 48);
+
+    return canvas;
+}
+
+
 export default Client;
diff --git a/src/app/workshop/page.tsx b/src/app/workshop/page.tsx
@@ -6,7 +6,7 @@ import { SkinViewer } from 'skinview3d';
 import Header from "@/app/modules/components/header.module";
 import Style from "@/app/styles/workshop/page.module.css";
 
-import axios from "axios";
+import axios, { AxiosRequestConfig } from "axios";
 import { Paginator } from "@/app/modules/components/paginator.module";
 import { Search } from "@/app/modules/components/search.module";
 import { BandageResponse, Category } from "@/app/interfaces";
@@ -25,7 +25,7 @@ export default function Home() {
     const [take, setTake] = useState<number>(12);
     const [search, setSearch] = useState<string>("");
 
-    const [lastRequest, setLastRequest] = useState<string>("");
+    const [lastConfig, setLastConfig] = useState<AxiosRequestConfig<any>>(null);
     const [categories, setCategories] = useState<Category[]>([]);
 
     const [filters, setFilters] = useState<Category[]>([]);
@@ -42,21 +42,28 @@ export default function Home() {
 
     useEffect(() => {
         const filters_str = filters.filter((filter) => filter.enabled).map((filter) => filter.id).toString();
-        const request = `/api/workshop?page=${constrain(page, 0, Math.ceil(totalCount / take))}&take=${take}&search=${search}` +
-            `&filters=${filters_str}&sort=${sort}`;
+        const config: AxiosRequestConfig<any> = {
+            params: {
+                page: constrain(page, 0, Math.ceil(totalCount / take)),
+                take: take,
+                search: search ? search : undefined,
+                filters: filters_str ? filters_str : undefined,
+                sort: sort ? sort : undefined
+            }
+        }
 
-        if (request == lastRequest) {
+        if (config == lastConfig) {
             return;
         }
 
-        axios.get(request, { withCredentials: true }).then((response) => {
+        axios.get('/api/workshop', { withCredentials: true, ...config }).then((response) => {
             if (response.status == 200) {
                 const data = response.data as BandageResponse;
                 setData(data);
                 setTotalCount(data.totalCount);
             }
         });
-        setLastRequest(request);
+        setLastConfig(config);
     }, [page, search, take, filters, sort])
 
     useEffect(() => {