42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

everything still works, trying to add 2fa and figure out Custom Stores

Browse Source
This commit is contained in:
Me
2022-11-25 00:30:55 +00:00
parent b4240f48f7
commit 214d2cee49
8 changed files with 257 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
View File

@@ -38,6 +38,30 @@
})
// Glittery Stars and such for Rank
let index = 0, interval = 1000;
const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
const animate = star => {
star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
star.style.animation = "none";
star.offsetHeight;
star.style.animation = "";
}
// for(const star of document.getElementsByClassName("glitter-star")) {
// setTimeout(() => {
// animate(star);
// setInterval(() => animate(star), 1000);
// }, index++ * (interval / 3))
// }
@@ -54,7 +78,26 @@
<div>{user.image_url}</div>
<img class="icon" src="{user.image_url}" alt="default user icon">
<div>{user.username}</div>
<div class="rank">Rank: <span class="glitter">{rank}</span></div>
<div class="rank">Rank:
<span class="glitter">
<span class="glitter-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="glitter-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="glitter-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="glitter-text">{rank}</span>
</span>
</div>
<section class="main-stats">
<h4>Match Statistics</h4>
<p>Total: {user.stats.totalGame}</p>
@@ -67,20 +110,6 @@
<style>
/* very clearly redo all this */
div.main-grid{
display: grid;
grid-template-columns: repeat(12, 1fr);
/* max-height: calc(100vh - 30vh); */
height: 85vh;
}
section.sidebar{
grid-column: 1 / span 2;
background: white;
}
/* The main part */
main{
max-width: 960px;
@@ -114,15 +143,6 @@
grid-column: 1 / span 3;
}
@keyframes background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
}
div.rank {
/* color: black; */
font-size: 1.5em;
@@ -133,11 +153,68 @@
--purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183);
--pink: rgb(244, 143, 177);
/* make shit gold? */
}
@keyframes background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
}
@keyframes scale {
from, to {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
div > .glitter {
display: inline-block;
position: relative;
}
div > .glitter > .glitter-star {
--size: clamp(20px, 1.5vw, 30px);
animation: scale 700ms ease forwards;
display: block;
height: var(--size);
left: var(--star-left);
position: absolute;
top: var(--star-top);
width: var(--size);
}
div > .glitter > .glitter-star > svg {
animation: rotate 1000ms linear infinite;
display: block;
opacity: 0.7;
}
div > .glitter > .glitter-star > svg > path {
fill: var(--violet);
}
div > .glitter > .glitter-text {
animation: background-pan 3s linear infinite;
/* background-image: linear-gradient( */
background: linear-gradient(

1
srcs/requirements/svelte/api_front/src/ProfilePage.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
// import { loginStatus } from "./stores/loginStatusStore.js";
import Header from "./components/Header.svelte";
import Footer from "./components/Footer.svelte";
// import { createEventDispatcher } from "svelte";

17
srcs/requirements/svelte/api_front/src/SplashPage.svelte
View File

@@ -5,6 +5,7 @@
import { loginStatus } from './stores/loginStatusStore.js';
// tmp for testing
// this is fucking retarded, pardon my offensive language.
let aData = {
username: '',
}
@@ -20,7 +21,7 @@
})
console.log(aData);
// if (data) {
// $loginStatus = true;
// $loginStatus.42 = true;
// //push('/user');
// }
});
@@ -40,7 +41,8 @@
await fetch('http://transcendance:8080/api/v2/auth/logout', {
method: 'POST',
});
$loginStatus = false;
// $loginStatus.42 = false;
// you're an idiot, the reason this didn't work is because you didn't use update. duh
};
</script>
@@ -55,11 +57,12 @@
<!-- placeholder links -->
<a href="/">Somewhere</a>
<!-- <a href="/">SomewhereElse</a> -->
{#if $loginStatus == false}
<div on:click={login}>Login {$loginStatus}</div>
{:else}
<div on:click={logout}>Logout {$loginStatus}</div>
{/if}
<!-- {#if $loginStatus == false} -->
<!-- <div on:click={login}>Login {$loginStatus}</div> -->
<div on:click={login}>Login</div>
<!-- {:else} -->
<!-- <div on:click={logout}>Logout {$loginStatus}</div> -->
<!-- {/if} -->
<!-- one of these will be login and it will scroll you down to the login part -->
</nav>
<h2>

36
srcs/requirements/svelte/api_front/src/TwoFactorAuthentication.svelte Normal file
View File

@@ -0,0 +1,36 @@
<script lang="ts">
import { onMount } from 'svelte';
import { loginStatus } from './stores/loginStatusStore';
onMount( async() => {
// ok no idea what goes in here...
})
// testing loginStatus Custom Store
const toggleTFA = () => {
loginStatus.toggleTFA;
console.log($loginStatus.tfa);
}
</script>
<h1>2FA Test</h1>
<p>FortyTwo: {$loginStatus.fortyTwo}</p>
<p>TFA: {$loginStatus.tfa}</p>
<p>isLogged: {loginStatus.isLogged}</p>
<div>
<button on:click={toggleTFA}>toggleTFA</button>
</div>
<style>
</style>

2
srcs/requirements/svelte/api_front/src/components/Header.svelte
View File

@@ -24,7 +24,7 @@
method: 'POST',
});
console.log('clicked logout header')
$loginStatus = false;
// $loginStatus = false;
push('/');
};

2
srcs/requirements/svelte/api_front/src/old_unused/UserPage.svelte
View File

@@ -35,7 +35,7 @@
let clickedLogout = async() => {
console.log('clicked logout');
await fetch('http://transcendance:8080/api/v2/auth/logout',);
$loginStatus = false;
// $loginStatus = false;
// maybe use replace() ?
push('/');
};

2
srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
View File

@@ -2,6 +2,7 @@ import NotFound from "../NotFound.svelte";
import ProfilePage from "../ProfilePage.svelte";
import SplashPage from "../SplashPage.svelte";
import TmpTest from '../TmpTest.svelte';
import TwoFactorAuthentication from '../TwoFactorAuthentication.svelte';
// "/article/:title": Article, // this is how you would do parameters!
@@ -9,6 +10,7 @@ import TmpTest from '../TmpTest.svelte';
export const primaryRoutes = {
'/': SplashPage,
'/2fa': TwoFactorAuthentication,
'/profile': ProfilePage,
'/profile/*': ProfilePage,
'*': NotFound

106
srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
View File

@@ -13,4 +13,108 @@ import { writable } from "svelte/store";
// }
// export const loginStatus = createLogin();
export const loginStatus = writable(false);
// export const loginStatus = writable({
// 42: false,
// tfa: false,
// });
// function createLoginStatus() {
// //ok it really hated all this
// // const store = writable({
// // fortyTwo: false,
// // tfa: false,
// // });
// // return {
// // ...store,
// // subscribe,
// // // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
// // toggle42: () => store.update( fortyTwo => !fortyTwo ),
// // // toggleTFA: () => update( l => l.tfa = !l.tfa ),
// // toggleTFA: () => store.update( tfa => !tfa ),
// // isLogged: () => store.fortyTwo && store.tfa,
// // // isLogged: this.fortyTwo && this.tfa,
// // // it really doesn't like "this."
// // // isLogged: () => (this.tfa && this.fortyTwo),
// // // this. ? or (l) => l.tfa ... ?
// // }
// // doesn't seem to work...
// const { subscribe, update } = writable({
// fortyTwo: false,
// tfa: false,
// });
// return {
// subscribe,
// // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
// toggle42: () => update( fortyTwo => !fortyTwo ),
// // toggleTFA: () => update( l => l.tfa = !l.tfa ),
// toggleTFA: () => update( tfa => !tfa ),
// // isLogged: () => fortyTwo && tfa,
// // isLogged: this.fortyTwo && this.tfa,
// // it really doesn't like "this."
// // isLogged: () => (this.tfa && this.fortyTwo),
// // this. ? or (l) => l.tfa ... ?
// isLogged() {
// return fortyTwo && tfa;
// },
// }
// // possible other way of doing this
// // const store = writable({
// // fortyTwo: false,
// // tfa: false,
// // });
// // return {
// // ...store,
// // subscribe,
// // // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
// // toggle42: () => store.update( l.fortyTwo => !l.fortyTwo ),
// // toggleTFA: () => store.update( l => l.tfa = !l.tfa ),
// // isLogged: store.fortyTwo && store.tfa,
// // // isLogged: () => (this.tfa && this.fortyTwo),
// // // this. ? or (l) => l.tfa ... ?
// // }
// }
function createLoginStatus() {
// const store = writable({
// fortyTwo: false,
// tfa: false,
// });
const { subscribe, update } = writable({
fortyTwo: false,
tfa: false,
});
function toggle42() {
update( (l) => {
l.fortyTwo = !l.fortyTwo;
return l;
})
};
function toggleTFA() {
update( (l) => {
l.tfa = !l.tfa;
return l;
})
};
function isLogged() {
// return (l) => {l.fortyTwo && l.tfa};
return fortyTwo && tfa;
};
return { subscribe, update, toggle42, toggleTFA, isLogged };
}
export const loginStatus = createLoginStatus();