various misc stuff

Axsoter · Sep 20, 2024 · 85ef5b6 · 85ef5b6
1 parent ddbb590
commit 85ef5b6
Show file tree

Hide file tree

Showing 7 changed files with 289 additions and 136 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,9 +17,12 @@
     "next": "14.2.11",
     "next-auth": "^5.0.0-beta.20",
     "next-intl": "^3.17.6",
+    "prisma": "^5.19.1",
     "react": "^18",
     "react-dom": "^18",
-    "stripe": "^16.8.0"
+    "skinview3d": "^3.0.1",
+    "stripe": "^16.8.0",
+    "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
     "@types/node": "^22",
@@ -29,7 +32,6 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
-    "prisma": "^5.16.1",
     "tailwindcss": "^3.4.6",
     "typescript": "^5"
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,7 +32,7 @@ export default async function RootLayout({
   return (
     <html lang={locale}>
       <body className={"min-w-screen max-w-[100vw] overflow-x-hidden text-white m-0 p-0 bodyBg " + inter.className}>
-        <NextIntlClientProvider messages={messages}>
+        <NextIntlClientProvider messages={messages} locale={locale}>
           <Notification />
           <Navbar />
           {children}

diff --git a/src/components/buttons/Default.tsx b/src/components/buttons/Default.tsx
@@ -2,15 +2,19 @@ import Link from "next/link";
 import { ReactNode } from "react";
 
 interface ButtonProps {
-    href: string,
+    href?: string | undefined,
     children: ReactNode,
     className?: string | undefined
 }
 
 export default function DefaultButton({href, children, className}: ButtonProps) {
-    return (
+    return href ? (
         <Link href={href} className={`inline-flex items-center justify-center gap-x-2 shadow-[-2px_0px_20px] shadow-axsoterBlue py-3 px-7 text-center cursor-pointer bg-axsoterBlue font-MatterTRIAL no-underline transition-all duration-300 hover:scale-110 rounded-full w-full h-full ` + className}>
             {children}
         </Link>
-    )
+    ) : (
+        <div className={`inline-flex items-center justify-center gap-x-2 shadow-[-2px_0px_20px] shadow-axsoterBlue py-3 px-7 text-center cursor-pointer bg-axsoterBlue font-MatterTRIAL no-underline transition-all duration-300 hover:scale-110 rounded-full w-full h-full ` + className}>
+            {children}
+        </div>
+    );
 }
diff --git a/src/components/helpers/MinecraftSkin.tsx b/src/components/helpers/MinecraftSkin.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { SkinViewer, SkinViewerOptions } from "skinview3d";
+
+interface ViewerProps extends React.HTMLAttributes<HTMLCanvasElement> {
+    viewerConfig?: ConfigTypes,
+}
+
+interface ConfigTypes extends SkinViewerOptions {
+    skin: string;
+}
+
+export default function MinecraftViewer({ viewerConfig, ...props }: ViewerProps) {
+    const viewerRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        const processSkin = async (skin: string): Promise<string | null> => {
+            try {
+                const skinUrl = await fetch(`/api/data/misc/minecraftSkin/${skin}`);;
+                return await skinUrl.json();
+            } catch (error) {
+                console.error("Failed to fetch skin URL:", error);
+            }
+            return null;
+        };
+
+        const loadSkinViewer = async () => {
+            const { current } = viewerRef;
+            console.log("test")
+            if (current && viewerConfig) {
+                const skinUrl = await processSkin(viewerConfig.skin);
+
+                if (skinUrl) {
+                    console.log(skinUrl)
+                    const processedConfig = {
+                        ...viewerConfig,
+                        skin: skinUrl
+                    };
+
+                    const skinViewer = new SkinViewer({
+                        canvas: current,
+                        width: 300,
+                        height: 400,
+                        ...processedConfig
+                    });
+                    skinViewer.autoRotate = true;
+                }
+            }
+        };
+
+        loadSkinViewer();
+    }, [viewerConfig]);
+
+    return (
+        <canvas ref={viewerRef} {...props}></canvas>
+    );
+}
diff --git a/src/components/helpers/ScrollReveal.tsx b/src/components/helpers/ScrollReveal.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import { useRef, useEffect, ReactNode } from "react";
+import { useRef, useEffect } from "react";
 import { motion, useInView, useAnimation } from "framer-motion"
 
-interface SRProps {
-  children: ReactNode,
+interface SRProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode,
   revealConfig?: SRConfigProps,
 }
 

diff --git a/src/components/helpers/VanillaTilt.tsx b/src/components/helpers/VanillaTilt.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import VanillaTilt from "vanilla-tilt";
+
+interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+
+export default function Tilt({ children, ...props }: TiltProps) {
+    const tiltRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const { current } = tiltRef;
+        if (current) {
+            VanillaTilt.init(current, {
+                max: 25,
+                speed: 400,
+                scale: 1.1
+            });
+        }
+
+        return () => {
+            // have to tsignore because javascript
+            // @ts-ignore
+            if (current && current.vanillaTilt) {
+                // @ts-ignore
+                current.vanillaTilt.destroy();
+            }
+        };
+    }, []);
+
+    return (
+        <div ref={tiltRef} {...props}>
+            {children}
+        </div>
+    );
+}