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>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Coucou</title>
<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'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
<script defer src="/build/bundle.js"></script>
</head>
<body></body>
</html>

2
www/src/App.svelte
View File

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

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

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