+
+
+
+ );
+}
+
+export default Login;
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..3d3a053
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2023. Gardel and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import { SnackbarProvider } from 'notistack';
+import {CssBaseline} from '@mui/material';
+import App from './app';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+
+
+
+ ,
+);
diff --git a/frontend/src/skinrender/skin-render.tsx b/frontend/src/skinrender/skin-render.tsx
new file mode 100644
index 0000000..2402ce1
--- /dev/null
+++ b/frontend/src/skinrender/skin-render.tsx
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2023. Gardel and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+import {Box} from '@mui/material';
+import * as THREE from 'three';
+import {Canvas, RootState, useFrame, useLoader} from '@react-three/fiber';
+import React from 'react';
+import createPlayerModel from './utils';
+import {OrbitControls} from '@react-three/drei';
+import {EffectComposer, Vignette, SMAA, SSAO, SSR} from '@react-three/postprocessing';
+import {BlendFunction} from 'postprocessing';
+
+function PlayerModel(props: { skinUrl: string, capeUrl?: string, slim?: boolean }) {
+ const {skinUrl, capeUrl, slim} = props;
+ console.log(props);
+ const skinTexture: THREE.Texture = useLoader(THREE.TextureLoader, skinUrl);
+ skinTexture.magFilter = THREE.NearestFilter;
+ skinTexture.minFilter = THREE.NearestFilter;
+ skinTexture.anisotropy = 0;
+ skinTexture.needsUpdate = true;
+ let version = 0;
+ if (skinTexture.image.height > 32) {
+ version = 1;
+ }
+ let capeTexture: THREE.Texture | undefined = undefined;
+ if (capeUrl) {
+ capeTexture = useLoader(THREE.TextureLoader, capeUrl);
+ if (capeTexture) {
+ capeTexture.magFilter = THREE.NearestFilter;
+ capeTexture.minFilter = THREE.NearestFilter;
+ capeTexture.anisotropy = 0;
+ capeTexture.needsUpdate = true;
+ }
+ }
+ let playerModel = createPlayerModel(skinTexture, capeTexture, version, slim);
+ useFrame((state, delta) => {
+ playerModel.rotation.y += delta * 0.7;
+ });
+ return (
+
+ );
+}
+
+function SkinRender(props: { skinUrl: string, capeUrl?: string, slim?: boolean }) {
+ const onCanvasCreate = (state: RootState) => {
+ state.gl.shadowMap.enabled = true;
+ state.gl.shadowMap.type = THREE.PCFSoftShadowMap;
+ };
+ return (
+
+
+