From bdc72d5fbc9c9571a3692fe49e7145fdeb26c595 Mon Sep 17 00:00:00 2001
From: Andcool-Systems <drolll2007@gmail.com>
Date: Tue, 31 Dec 2024 23:08:38 +0300
Subject: [PATCH] added viewport config

---
 src/app/layout.tsx                      | 8 ++++++++
 src/app/modules/components/SkinView.tsx | 9 +++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6233e12..e58f5c1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import meta from '@/app/meta.json';
 import { merge } from 'lodash';
 import Footer from "./modules/components/Footer";
 import Header from "./modules/components/Header";
+import type { Viewport } from 'next'
 
 export const generateMetadata = async (): Promise<Metadata | undefined> => {
     const headersList = headers();
@@ -18,6 +19,13 @@ export const generateMetadata = async (): Promise<Metadata | undefined> => {
     return merge({}, base, extend) as Metadata;
 }
 
+export const viewport: Viewport = {
+    width: 'device-width',
+    initialScale: 0.9,
+    maximumScale: 0.9,
+    userScalable: false
+}
+
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
         <CookiesProvider>
diff --git a/src/app/modules/components/SkinView.tsx b/src/app/modules/components/SkinView.tsx
index b94252d..4c05324 100644
--- a/src/app/modules/components/SkinView.tsx
+++ b/src/app/modules/components/SkinView.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { CSSProperties, useEffect, useRef } from 'react';
 import { PlayerAnimation, PlayerObject, SkinViewer, WalkingAnimation } from 'skinview3d';
 
 
@@ -6,6 +6,7 @@ interface SkinView3DOptions {
     SKIN: string,
     CAPE: string,
     className: string,
+    style?: CSSProperties,
     slim: boolean,
     id: string,
     width?: number,
@@ -28,7 +29,7 @@ export class TPose extends PlayerAnimation {
 }
 
 
-const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, background }: SkinView3DOptions): JSX.Element => {
+const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, background, style }: SkinView3DOptions): JSX.Element => {
     const canvasRef = useRef<HTMLCanvasElement>();
     const skinViewRef = useRef<SkinViewer>();
 
@@ -69,7 +70,7 @@ const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, back
         skinViewRef.current.camera.position.z = 15;
 
         skinViewRef.current.scene.position.y = -2.5;
-        skinViewRef.current.loadBackground(background || "/static/background.png");
+        background && skinViewRef.current.loadBackground(background);
 
         skinViewRef.current.loadSkin(SKIN ? SKIN : "/static/workshop_base.png", { model: slim ? "slim" : "default" });
         CAPE && skinViewRef.current.loadSkin(CAPE);
@@ -97,7 +98,7 @@ const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, back
     }, [pose]);
 
     return (
-        <div id={id} className={className}>
+        <div id={id} className={className} style={style}>
             <canvas ref={canvasRef} />
         </div>
     )