From 90969cfe4c8f83cd01f8f2b97521cc8c94de7fb8 Mon Sep 17 00:00:00 2001 From: Yanis Rigaudeau Date: Tue, 18 Oct 2022 00:28:19 +0200 Subject: [PATCH] user login WIP --- www/package-lock.json | 78 +++++++++++++++++++++ www/package.json | 3 +- www/public/global.css | 6 +- www/rollup.config.js | 13 +++- www/src/App.svelte | 4 +- www/src/functions/request.ts | 37 ++++++++++ www/src/functions/user.ts | 7 ++ www/src/pages/Login.svelte | 32 +++++++-- www/src/{components => pages}/test3D.svelte | 38 +++++----- 9 files changed, 180 insertions(+), 38 deletions(-) create mode 100644 www/src/functions/request.ts create mode 100644 www/src/functions/user.ts rename www/src/{components => pages}/test3D.svelte (80%) diff --git a/www/package-lock.json b/www/package-lock.json index 679ede6..1cf72c4 100644 --- a/www/package-lock.json +++ b/www/package-lock.json @@ -18,6 +18,7 @@ "devDependencies": { "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.0", + "@rollup/plugin-replace": "^5.0.0", "@rollup/plugin-typescript": "^8.0.0", "@tsconfig/svelte": "^2.0.0", "@types/three": "^0.144.0", @@ -209,6 +210,52 @@ "rollup": "^1.20.0||^2.0.0" } }, + "node_modules/@rollup/plugin-replace": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.0.tgz", + "integrity": "sha512-TiPmjMuBjQM+KLWK16O5TAM/eW4yXBYyQ17FbfeNzBC1t2kzX2aXoa8AlS9XTSmg6/2TNvkER1lMEEeN4Lhavw==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^4.2.1", + "magic-string": "^0.26.4" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-replace/node_modules/@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "dependencies": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + } + }, + "node_modules/@rollup/plugin-replace/node_modules/magic-string": { + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@rollup/plugin-typescript": { "version": "8.5.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.5.0.tgz", @@ -1828,6 +1875,37 @@ "resolve": "^1.19.0" } }, + "@rollup/plugin-replace": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.0.tgz", + "integrity": "sha512-TiPmjMuBjQM+KLWK16O5TAM/eW4yXBYyQ17FbfeNzBC1t2kzX2aXoa8AlS9XTSmg6/2TNvkER1lMEEeN4Lhavw==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^4.2.1", + "magic-string": "^0.26.4" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "requires": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + } + }, + "magic-string": { + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.8" + } + } + } + }, "@rollup/plugin-typescript": { "version": "8.5.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.5.0.tgz", diff --git a/www/package.json b/www/package.json index 70e7546..7a4a58e 100644 --- a/www/package.json +++ b/www/package.json @@ -7,13 +7,14 @@ "scripts": { "build": "rollup -c", "dev": "rollup -c -w ", - "start": "sirv public --no-clear --host", + "start": "sirv public --no-clear --host --single", "check": "svelte-check --tsconfig ./tsconfig.json", "prettier": "prettier -w ./src" }, "devDependencies": { "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.0", + "@rollup/plugin-replace": "^5.0.0", "@rollup/plugin-typescript": "^8.0.0", "@tsconfig/svelte": "^2.0.0", "@types/three": "^0.144.0", diff --git a/www/public/global.css b/www/public/global.css index e8174de..e9365e7 100644 --- a/www/public/global.css +++ b/www/public/global.css @@ -10,7 +10,7 @@ body { margin: 0; /* padding: 0; */ box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */ } a { @@ -34,8 +34,8 @@ input, button, select, textarea { - font-family: inherit; - font-size: inherit; + /* font-family: inherit; */ + /* font-size: inherit; */ -webkit-padding: 0.4em 0; padding: 0.4em; margin: 0 0 0.5em 0; diff --git a/www/rollup.config.js b/www/rollup.config.js index 59186f2..123769b 100644 --- a/www/rollup.config.js +++ b/www/rollup.config.js @@ -6,6 +6,7 @@ import { terser } from 'rollup-plugin-terser'; import sveltePreprocess from 'svelte-preprocess'; import typescript from '@rollup/plugin-typescript'; import css from 'rollup-plugin-css-only'; +import replace from '@rollup/plugin-replace'; const production = !process.env.ROLLUP_WATCH; @@ -50,6 +51,12 @@ export default { dev: !production, }, }), + typescript({ + sourceMap: !production, + inlineSources: !production, + importsNotUsedAsValues: 'remove', + }), + // we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), @@ -65,9 +72,9 @@ export default { dedupe: ['svelte'], }), commonjs(), - typescript({ - sourceMap: !production, - inlineSources: !production, + replace({ + 'process.env.APIURL': production ? '"/api"' : '"http://localhost:8000"', + 'process.env.CORS': production ? 'false' : 'true', }), // In dev mode, call `npm run start` once diff --git a/www/src/App.svelte b/www/src/App.svelte index 90bc7e8..89c82d8 100644 --- a/www/src/App.svelte +++ b/www/src/App.svelte @@ -1,8 +1,8 @@ diff --git a/www/src/functions/request.ts b/www/src/functions/request.ts new file mode 100644 index 0000000..b8f0b57 --- /dev/null +++ b/www/src/functions/request.ts @@ -0,0 +1,37 @@ +enum Methods { + 'GET' = 'GET', + 'POST' = 'POST', + 'PUT' = 'PUT', +} + +export async function get(route: string): Promise { + return request('GET', route); +} + +export async function post(route: string, data: unknown): Promise { + return request('POST', route, data); +} + +export async function put(route: string, data: unknown): Promise { + return request('PUT', route, data); +} + +async function request( + method: keyof typeof Methods, + route: string, + data?: unknown, +): Promise { + const response = await fetch(`${process.env.APIURL}${route}`, { + headers: { + 'content-type': 'application/json', + }, + mode: process.env.CORS ? 'cors' : 'same-origin', + method: method, + body: data ? JSON.stringify(data) : null, + }); + + if (response.ok) { + return response.json() as T; + } + return null; +} diff --git a/www/src/functions/user.ts b/www/src/functions/user.ts new file mode 100644 index 0000000..c403c1e --- /dev/null +++ b/www/src/functions/user.ts @@ -0,0 +1,7 @@ +import type { LoginUserBody, UserInfo } from '@core'; +import { post } from './request'; + +export async function login(raw: LoginUserBody) { + const user = await post('/user/login', raw); + console.debug(user); +} diff --git a/www/src/pages/Login.svelte b/www/src/pages/Login.svelte index 3f7b62b..2653c9b 100644 --- a/www/src/pages/Login.svelte +++ b/www/src/pages/Login.svelte @@ -1,14 +1,35 @@
-
- - + + + - +
@@ -17,9 +38,6 @@ main { height: 100%; } - #button { - display: flex; - } #container { height: inherit; display: flex; diff --git a/www/src/components/test3D.svelte b/www/src/pages/test3D.svelte similarity index 80% rename from www/src/components/test3D.svelte rename to www/src/pages/test3D.svelte index f8952e9..d86b84c 100644 --- a/www/src/components/test3D.svelte +++ b/www/src/pages/test3D.svelte @@ -3,52 +3,49 @@ import { beforeUpdate, afterUpdate } from 'svelte'; import * as Three from 'three'; -//#region variables + //#region variables let innerWidth: number = 0; let innerHeight: number = 0; let maxInnerWidth: number = 0; let maxInnerHeight: number = 0; let portrait: boolean = true; - let focalLength: number = (540/Math.atan(70*Math.PI / 180)); + let focalLength: number = 540 / Math.atan((70 * Math.PI) / 180); let fov = 75; //let baseHorizontalFOV: number = 2.0*Math.atan(baseAspectRation*Math.tan(baseVerticalFOV*0.5)); -//#endregion + //#endregion - -//#region functions - function updateVerticalFOV(){ - fov = (180/Math.PI)*Math.tan(innerHeight/(focalLength*2)); + //#region functions + function updateVerticalFOV() { + fov = (180 / Math.PI) * Math.tan(innerHeight / (focalLength * 2)); } - - function resetMaxDimensions(){ + function resetMaxDimensions() { maxInnerWidth = 0; maxInnerHeight = 0; } - function updateMaxInnerDimensions(){ - if(maxInnerWidth < innerWidth){ + function updateMaxInnerDimensions() { + if (maxInnerWidth < innerWidth) { maxInnerWidth = innerWidth; } - if(maxInnerHeight < innerHeight){ + if (maxInnerHeight < innerHeight) { maxInnerHeight = innerHeight; } } - function checkOrientation(oldPortrait: boolean){ - if (innerWidth > innerHeight){ + function checkOrientation(oldPortrait: boolean) { + if (innerWidth > innerHeight) { portrait = false; } else { portrait = true; } - if (oldPortrait != portrait){ + if (oldPortrait != portrait) { resetMaxDimensions(); } } -//#endregion - + //#endregion let scene: Three.Scene = new Three.Scene(); let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera( @@ -97,7 +94,7 @@ updateVerticalFOV(); camera.aspect = innerWidth / innerHeight; - camera.fov = fov + camera.fov = fov; camera.setViewOffset( window.innerWidth, window.innerHeight, @@ -111,9 +108,7 @@ //renderer.setClearColor(0x000000, (innerHeight/(maxInnerHeight))/2 + 0.5); }); - afterUpdate(() => { - - }); + afterUpdate(() => {}); @@ -130,6 +125,5 @@ } body { - }