yanis/rate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

user login WIP

Browse Source
This commit is contained in:
Yanis Rigaudeau 2022-10-18 00:28:19 +02:00
parent 8fc5a164a4
commit 90969cfe4c
Signed by: yanis
GPG Key ID: 4DD2841DF1C94D83
9 changed files with 180 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
www/package-lock.json generated
View File

@ -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",

3
www/package.json
View File

@ -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",

6
www/public/global.css
View File

@ -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;

13
www/rollup.config.js
View File

@ -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

4
www/src/App.svelte
View File

@ -1,8 +1,8 @@
<script>
import 'papercss/dist/paper.min.css';
import { Router, Route, Link } from 'svelte-navigator';
import Test3D from './components/test3D.svelte';
import Test3D from './pages/test3D.svelte';
import Login from './pages/Login.svelte';
</script>

37
www/src/functions/request.ts Normal file
View File

@ -0,0 +1,37 @@
enum Methods {
'GET' = 'GET',
'POST' = 'POST',
'PUT' = 'PUT',
}
export async function get<T>(route: string): Promise<T | null> {
return request<T>('GET', route);
}
export async function post<T>(route: string, data: unknown): Promise<T | null> {
return request<T>('POST', route, data);
}
export async function put<T>(route: string, data: unknown): Promise<T | null> {
return request<T>('PUT', route, data);
}
async function request<T>(
method: keyof typeof Methods,
route: string,
data?: unknown,
): Promise<T | null> {
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;
}

7
www/src/functions/user.ts Normal file
View File

@ -0,0 +1,7 @@
import type { LoginUserBody, UserInfo } from '@core';
import { post } from './request';
export async function login(raw: LoginUserBody) {
const user = await post<UserInfo>('/user/login', raw);
console.debug(user);
}

32
www/src/pages/Login.svelte
View File

@ -1,14 +1,35 @@
<script lang="ts">
import type { LoginUserBody } from '@core';
import { Form, Input, Button } from 'spaper';
import { login } from '../functions/user';
const user: LoginUserBody = {
username: '',
password: '',
};
</script>
<main>
<div class="row" id="container">
<Form class="">
<Input placeholder="email" class="row" />
<Input placeholder="password" type="password" class="row" />
<Form>
<Input
placeholder="username"
class="row col-8"
bind:value={user.username}
/>
<Input
placeholder="password"
type="password"
class="row col-8"
bind:value={user.password}
/>
<Button type="secondary" class="row" id="button">Sign in</Button>
<Button
type="secondary"
class="row sm-2 col-4"
block
on:click={() => login(user)}>Sign in</Button
>
</Form>
</div>
</main>
@ -17,9 +38,6 @@
main {
height: 100%;
}
#button {
display: flex;
}
#container {
height: inherit;
display: flex;

38
www/src/components/test3D.svelte → www/src/pages/test3D.svelte
View File

@ -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(() => {});
</script>
<svelte:window bind:innerWidth bind:innerHeight />
@ -130,6 +125,5 @@
}
body {
}
</style>