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

navbar

Browse Source
This commit is contained in:
Yanis Rigaudeau 2022-10-20 00:28:21 +02:00
parent cabdff7177
commit ae0eb2c65a
Signed by: yanis
GPG Key ID: 4DD2841DF1C94D83
11 changed files with 126 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
www/public/images/id-hand-drawn-symbol.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
www/public/images/mosaic-of-four-hand-drawn-squares-tiles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
www/public/images/next-user-hand-drawn-interface-symbol.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

23
www/public/index.html
View File

@ -1,20 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<head> <title>Coucou</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Coucou</title> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/build/bundle.css" />
<link rel='icon' type='image/png' href='/favicon.png'> <script defer src="/build/bundle.js"></script>
<link rel='stylesheet' href='/global.css'> </head>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
<body></body>
</html> </html>

2
www/src/App.svelte
View File

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

38
www/src/components/navBar.svelte Normal file
View File

@ -0,0 +1,38 @@
<script lang="ts">
import { Link } from 'svelte-navigator';
</script>
<nav class="border row">
<Link to="/" class="col-fill col">
<div class="nav-button" id="home" />
</Link>
<Link to="/login" class="col-fill col">
<div class="nav-button" id="login" />
</Link>
</nav>
<style>
nav {
position: absolute;
bottom: 0;
margin: 3px;
left: 0;
right: 0;
width: auto;
}
div.nav-button {
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
div.nav-button#home {
background-image: url('/images/mosaic-of-four-hand-drawn-squares-tiles.png');
}
div.nav-button#login {
background-image: url('/images/next-user-hand-drawn-interface-symbol.png');
}
</style>

3
www/src/functions/user.ts
View File

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

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

@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import type { LoginUserBody } from '@core'; import type { LoginUserBody } from '@core';
import NavBar from '../components/navBar.svelte';
import { Form, Input, Button } from 'spaper'; import { Form, Input, Button } from 'spaper';
import { login } from '../functions/user'; import { login } from '../functions/user';
import { currentUser } from '../store/user';
const user: LoginUserBody = { const user: LoginUserBody = {
username: '', username: '',
@ -9,37 +11,36 @@
}; };
</script> </script>
<main> <div class="row" id="container">
<div class="row" id="container"> <Form>
<Form> <Input
<Input placeholder="username"
placeholder="username" class="row col-8"
class="row col-8" bind:value={user.username}
bind:value={user.username} />
/> <Input
<Input placeholder="password"
placeholder="password" type="password"
type="password" class="row col-8"
class="row col-8" bind:value={user.password}
bind:value={user.password} />
/>
<Button <Button
type="secondary" type="secondary"
class="row sm-2 col-4" class="row sm-2 col-4"
block block
on:click={() => login(user)}>Sign in</Button on:click={() => login(user)}>Sign in</Button
> >
</Form> </Form>
</div> {$currentUser?.uuid}
</main> {$currentUser?.username}
{$currentUser?.role}
</div>
<NavBar />
<style> <style>
main {
height: 100%;
}
#container { #container {
height: inherit; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

89
www/src/pages/test3D.svelte
View File

@ -1,11 +1,16 @@
<script lang="ts"> <script lang="ts">
//import { onMount } from "lifecycle"; import NavBar from '../components/navBar.svelte';
import { beforeUpdate, afterUpdate } from 'svelte'; import { beforeUpdate, afterUpdate, onMount, onDestroy } from 'svelte';
import * as Three from 'three'; import * as Three from 'three';
let container: HTMLElement;
let canvas: HTMLCanvasElement;
let width: number;
let height: number;
//#region variables //#region variables
let innerWidth: number = 0; //let innerWidth: number = 0;
let innerHeight: number = 0; //let innerHeight: number = 0;
let maxInnerWidth: number = 0; let maxInnerWidth: number = 0;
let maxInnerHeight: number = 0; let maxInnerHeight: number = 0;
@ -26,16 +31,16 @@
} }
function updateMaxInnerDimensions() { function updateMaxInnerDimensions() {
if (maxInnerWidth < innerWidth) { if (maxInnerWidth < width) {
maxInnerWidth = innerWidth; maxInnerWidth = width;
} }
if (maxInnerHeight < innerHeight) { if (maxInnerHeight < height) {
maxInnerHeight = innerHeight; maxInnerHeight = height;
} }
} }
function checkOrientation(oldPortrait: boolean) { function checkOrientation(oldPortrait: boolean) {
if (innerWidth > innerHeight) { if (innerWidth > height) {
portrait = false; portrait = false;
} else { } else {
portrait = true; portrait = true;
@ -50,34 +55,18 @@
let scene: Three.Scene = new Three.Scene(); let scene: Three.Scene = new Three.Scene();
let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera( let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera(
75, 75,
innerWidth / innerHeight, 1,
0.1, 0.1,
1000, 1000,
); );
let renderer: Three.WebGLRenderer = new Three.WebGLRenderer(); let renderer: Three.WebGLRenderer = new Three.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let box: Three.BoxGeometry = new Three.BoxGeometry(1, 1, 1); let box: Three.BoxGeometry = new Three.BoxGeometry(1, 1, 1);
let mat: Three.MeshBasicMaterial = new Three.MeshBasicMaterial({ let mat: Three.MeshBasicMaterial = new Three.MeshBasicMaterial({
color: 0x00ff00, color: 0x00ff00,
}); });
let cube = new Three.Mesh(box, mat); let cube = new Three.Mesh(box, mat);
scene.add(cube);
camera.position.z = 5;
camera.setViewOffset(
window.innerWidth,
window.innerHeight,
0,
0,
window.innerWidth,
window.innerHeight,
);
renderer.setSize(window.innerWidth, window.innerHeight);
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
@ -86,44 +75,48 @@
renderer.render(scene, camera); renderer.render(scene, camera);
} }
animate();
onMount(() => {
canvas = container.appendChild(renderer.domElement);
scene.add(cube);
camera.position.z = 5;
animate();
});
beforeUpdate(() => { beforeUpdate(() => {
checkOrientation(portrait); checkOrientation(portrait);
updateMaxInnerDimensions(); updateMaxInnerDimensions();
updateVerticalFOV(); updateVerticalFOV();
camera.aspect = innerWidth / innerHeight; camera.aspect = width / height;
camera.fov = fov; camera.fov = fov;
camera.setViewOffset( camera.setViewOffset(width, height, 0, 0, width, height);
window.innerWidth, renderer.setSize(width, height);
window.innerHeight,
0,
0,
window.innerWidth,
window.innerHeight,
);
renderer.setSize(window.innerWidth, window.innerHeight);
//renderer.setClearColor(0x000000, (innerHeight/(maxInnerHeight))/2 + 0.5); //renderer.setClearColor(0x000000, (innerHeight/(maxInnerHeight))/2 + 0.5);
}); });
afterUpdate(() => {}); afterUpdate(() => {});
onDestroy(() => {
container.removeChild(canvas);
});
</script> </script>
<svelte:window bind:innerWidth bind:innerHeight /> <div
id="container"
bind:this={container}
bind:clientWidth={width}
bind:clientHeight={height}
/>
<NavBar />
<!--<svelte:window bind:innerWidth bind:innerHeight /> -->
<style> <style>
html, #container {
body {
overflow: hidden;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%; height: 100%;
} }
body {
}
</style> </style>

4
www/src/store/user.ts Normal file
View File

@ -0,0 +1,4 @@
import { writable } from 'svelte/store';
import type { UserInfo } from '@core';
export const currentUser = writable<UserInfo | null>(null);