user login WIP

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

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

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;

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

www/src/App.svelte

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

www/src/functions/request.ts

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

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<UserInfo>('/user/login', raw);
+  console.debug(user);
+}

www/src/pages/Login.svelte

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

www/src/pages/test3D.svelte

@@ -10,18 +10,16 @@
   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
 
-
   //#region functions
   function updateVerticalFOV() {
     fov = (180 / Math.PI) * Math.tan(innerHeight / (focalLength * 2));
   }
 
-
   function resetMaxDimensions() {
     maxInnerWidth = 0;
     maxInnerHeight = 0;
@@ -49,7 +47,6 @@
   }
   //#endregion
 
-
   let scene: Three.Scene = new Three.Scene();
   let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera(
     75,
@@ -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>