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

Merge branch 'master' of bitbucket.org:LuckyLaszlo/ft_transcendence

Browse Source
This commit is contained in:
simplonco
2023-01-03 11:41:49 +01:00
parent 13ace6bc6a 387e2f60b6
commit 7d358167db
18 changed files with 0 additions and 2351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
srcs/requirements/svelte/api_front/old_unused/App_old.svelte
View File

@@ -1,81 +0,0 @@
<script lang="ts">
// routing
// may not need {link} here
import Router, { link } from "svelte-spa-router";
import { routes } from "../routes.js";
import LoginPage from "./LoginPage.svelte";
import UserPage from "../UserPage.svelte";
import NotFound from "../pages/NotFound.svelte";
// Ideally fuck all this shit in the long run
let pages = ['login', 'user', 'account'];
// make this a $: currentPage ?
let currentPage = 'booba';
// prolly change this? yea idk...
// let userIndex;
// tmp for testing
let userId = 0;
// horrible naming... can be HOME or ACCOUNT
let currentType = 'account';
// this page should handle the SPA history management...
// set to false later for actual security
let loggedIn = true;
// not sure if this is how i want to do this...
// might do differently cuz URL route manangement...
const handleLogin = () => {
currentPage = 'user';
loggedIn = true;
};
// I don't know if i should but i'm tempted to put this here...
// import axios from 'axios';
// import { onMount } from 'svelte';
// import { push } from 'svelte-spa-router';
// let user = {logedIn: false};
// onMount(async () => {
// // console.log('PROFIL SVELTE');
// const {data} = await axios.get('http://transcendance:8080/api/v2/user');
// if (data)
// user.logedIn = true;
// });
// $: submit = async() => {
// window.location.href = 'http://transcendance:8080/api/v2/auth';
// }
// $: logout = async() => {
// await fetch('http://transcendance:8080/api/v2/auth/logout',);
// user.logedIn = false;
// }
</script>
<!-- eventually we will do this with routes, but for now use a prop -->
<!-- {#if currentPage === 'login'}
<LoginPage {pages} {currentPage} {userId} on:loggedIn={handleLogin}/>
{:else if currentPage === 'user'}
<UserPage {pages} {currentPage} {userId} {currentType}/>
{:else}
<NotFound />
{/if} -->
<Router {routes}/>
<style>
/* doesn't work... */
/* body{
background: bisque;
} */
</style>

167
srcs/requirements/svelte/api_front/old_unused/Canvas_1st_attempt.svelte
View File

@@ -1,167 +0,0 @@
<!-- <script lang="ts"> -->
<script>
import { onMount } from 'svelte';
let canvas;
// $: scaleRatio = window.innerWidth / 10;
$: scaleRatio = 30;
onMount(() => {
// we're invoking JS methods of the canvas element
const ctx = canvas.getContext('2d');
ctx.width = window.innerWidth;
ctx.height = window.innerHeight;
// ctx.beginPath();
// ctx.moveTo(50,50);
// ctx.lineTo(70,70);
// ctx.stroke();
// attempting to import an image
const img = new Image();
// we may have to call an onMount or something to make sure the image has loaded...
// doing it in JS for now, ideally in Svelte later..
// img.addEventListener('load', () => {
// // execute drawImage statements here
// }, false);
img.src = 'img/potato_logo.png'; // seems like this does need to be above onload()
img.onload = () => {
// ctx.drawImage(img, 0, 0, img.width * (ctx.width / 15), img.height * (ctx.height / 15));
// ctx.drawImage(img, 0, 0, ctx.width / 15, ctx.height / 15);
// i think i don't want this cuz it'll get in the way?
// ctx.drawImage(img, 0, 0, img.width / scaleRatio, img.height / scaleRatio);
// it would seem you need to redraw the images when you change the Window size, it's not automatically responsive
};
let startX = 200;
let startY = 200;
let dx = 3;
let dy = -1;
// Time for some math
// lets say i want 6 rows
// ok so we're gonna draw all the potatos at the same time and each of them gets animated, like i have it now
// 6 in a row so # of rows aka x = width * 6/height
function Potato(x, y) {
this.x = x;
this.y = y;
// ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);
this.draw = function() {
ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);
}
this.animate = function() {
this.x += dx;
this.y += dy;
this.draw();
}
}
// let spacing = canvas.width * ((6 + 1) / canvas.height);
let spacing = 70;
let Potatos = [];
//check the math...
// for (let i = 0; i < 6 * spacing; i++) {
for (let i = 0; i < 2; i++) {
// for (let j = 0; j < 6; j++) {
for (let j = 0; i < 2; j++) {
Potatos.push(new Potato(spacing + (i * spacing), spacing + (j * spacing)));
}
}
// now i'm trying to move 1 potato
let frame = requestAnimationFrame(loop);
// function loop(t) {
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// frame = requestAnimationFrame(loop);
// ctx.drawImage(img, startX, startY, img.width / scaleRatio, img.height / scaleRatio);
// startX += dx;
// startY += dy;
// }
// new Potato(70, 70).animate();
function loop(t) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
frame = requestAnimationFrame(loop);
for (let i = 0; i < Potatos.length; i++) {
Potatos[i].animate();
}
// Potatos[0].animate();
}
loop();
// Lets try again with a single loop
// THis shit makes the cool Gradient
// let frame = requestAnimationFrame(loop);
// function loop(t) {
// frame = requestAnimationFrame(loop);
// // const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// for (let p = 0; p < imageData.data.length; p += 4) {
// const i = p / 4;
// const x = i % canvas.width;
// const y = i / canvas.width >>> 0;
// const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
// const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
// const b = 128;
// imageData.data[p + 0] = r;
// imageData.data[p + 1] = g;
// imageData.data[p + 2] = b;
// imageData.data[p + 3] = 255;
// }
// ctx.putImageData(imageData, 0, 0);
// }
return () => {
cancelAnimationFrame(frame);
// prolly something else...
};
});
</script>
<canvas
bind:this={canvas}
width={window.innerWidth}
height={window.innerHeight}
></canvas>
<!-- widht and height were 32, trying stuff -->
<!-- I don't have the /svelte-logo-mask.svg, i guess i'll go get something -->
<style>
canvas {
width: 100%;
height: 100%;
background-color: #666;
/* testing something */
/* -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); */
/* Holy shit that worked! i got a mask */
/* it also works without a mask! i have a canvas! */
/* -webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
/* -webkit-mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
/* mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
/* mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
}
</style>

45
srcs/requirements/svelte/api_front/old_unused/Canvas_weird_circles.svelte
View File

@@ -1,45 +0,0 @@
<script lang="ts">
import { onMount, setContext } from "svelte";
let canvas;
// what do i want?
// lets start with an image of my potato
// then get it to move
// then have many displayed in an offset grid
const drawFunctions = [];
setContext('canvas', {
register(drawFn) {
drawFunctions.push(drawFn);
},
unregister(drawFn) {
drawFunctions.splice(drawFunctions.indexOf(drawFn), 1);
}
})
onMount(() => {
// not sure what this does...
const ctx = canvas.getContext('2d');
// no idea what this does...
function update() {
ctx.clearRect()
drawFunctions.forEach(drawFn => {
drawFn(ctx);
});
frameId = requestAnimationFrame(update);
}
let frameId = requestAnimationFrame(update);
return () => {
cancelAnimationFrame(update);
};
});
</script>
<canvas bind:this={canvas} />

112
srcs/requirements/svelte/api_front/old_unused/DisplayAUser_backup_copy.svelte
View File

@@ -1,112 +0,0 @@
<script lang="ts">
import { onMount } from 'svelte';
import { location } from 'svelte-spa-router';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
// using location won't work cuz i do a fetch but i don't change the page fragment, so means nothing to location...
// this is how you access /:first for example
// export let params = {}
// <p>Your name is: <b>{params.first}</b> <b>{#if params.last}{params.last}{/if}</b></p>
// If i export these vars, maybe as an nice tidy object, i could pass whatever i like to them
// The current user, some other user, whatever, and thus reuse this Componente for the user and their friends or whatever
// will have to coordinate with Back, will know more once the Game stats are in the back
// wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
// not sure if that's what i want...
// maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
// why bother storing that shit in the back...
// maybe i need a Rank.svelte component
// ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!
export let aUsername;
let user;
let rank = '';
let avatar;
// i think i don't need to do this once i sort out the {wrap} conditions: in theory i could pass values to the Route
// once the async authentication check is done
onMount( async() => {
console.log('Display aUser username: '+ aUsername)
// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
console.log('Display a user: ' + user.username)
// console.log('profile display did my fetch')
// should i be updating the userStore or is that unnecessary?
if (user.loseGame > user.winGame) {
rank = 'Bitch Ass Loser!'
} else if (user.loseGame === user.winGame) {
rank = 'Fine i guess...'
} else {
rank = 'Yea you da Boss!'
}
await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);
avatar = url;
});
// tmp
// console.log('mounted Profile Display')
// console.log(user);
})
// Glittery Stars and such for Rank
let index = 0, interval = 1000;
const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
// it's unhappy that "star" isn't typeset, no idea what to do about it...
const animate = (star) => {
// the if seems to have fixed the type issue
if (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 = "";
}
}
// This is the part i invented, it was kinda a fucking nightmare...
let stars = [];
for (let i = 0; i < 3; i++) {
setTimeout(() => {
animate(stars[i]);
setInterval(() => animate(stars[i]), 1000);
}, index++ * (interval / 3))
}
</script>
{#if user !== undefined}
<GenerateUserDisplay {user}/>
{:else}
<h2>Sorry</h2>
<div>Failed to load user {aUsername}</div>
{/if}
<style>
</style>

24
srcs/requirements/svelte/api_front/old_unused/FlyingPotato.svelte
View File

@@ -1,24 +0,0 @@
<script lang="ts">
// might rename...
// no idea what i'm doing...
import { getContext, onMount } from 'svelte';
// here you have to export the vars you need to draw this shit...
const { register, unregister } = getContext('canvas');
onMount(() => {
register(draw);
return () => {
unregister(draw);
}
});
function draw(ctx) {
ctx.beginPath();
ctx.fillStyle = fill;
}
</script>

124
srcs/requirements/svelte/api_front/old_unused/Header.svelte
View File

@@ -1,124 +0,0 @@
<script lang="ts">
// Fucking having a header that can change size, i don't really want the larger one
import { createEventDispatcher } from 'svelte';
let dispatch = createEventDispatcher();
let types: string[] = ['home', 'regular', 'none'];
// let currentType: string = 'regular';
export let currentType = 'regular';
// apparently Regular is the only one i use...
let handleClickHome = () => {
dispatch('clickedHome');
};
let handleClickLogout = () => {
dispatch('clickedLogout');
};
</script>
<!-- Make it so you can have a Big Home page header and a regular header or no header -->
<!-- So far my CSS is super Gross, i guess i'll get Hugo to help me with it -->
<header class={currentType}>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClickHome}>
<!-- {#if currentType === 'home'} -->
<h1 class={currentType}>Potato Pong</h1>
<!-- {/if} -->
<nav class={currentType}>
<!-- <a href=""></a> -->
<!-- i might change these to links rather than buttons, i kinda hate the buttons -->
<button>My Stats</button>
<button>Stream</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>
<style>
/* See "possible_fonts.css" for more font options... */
@font-face {
font-family: 'Bondi';
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
header{
/* background: #f7f7f7; */
background: #618174;
/* padding: 20px; */
margin: 0;
/* does nothing so far... */
/* display: flex; */
}
header.home{
/* position: sticky; */
}
header.regular{
/* for some reason this doesn't do shit! */
position: sticky;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* Headers */
h1{
font-family: 'Bondi';
}
h1.home {
margin: 0;
text-align: center;
/* max-width: 100px; */
}
h1.regular{
margin: 0;
text-align: left;
/* max-width: 40px; */
/* this helped with the weird extra space under the image... */
display: flex;
justify-self: center;
align-self: center;
}
/* Images */
img.home{
/* text-align: center; */
/* get the image squarely in the middle... */
cursor: pointer;
max-width: 100px;
}
img.regular{
cursor: pointer;
max-width: 40px;
padding: 7px 20px;
justify-self: left;
}
nav{
display: flex;
justify-content: right;
}
nav button{
margin: 7px 20px;
/* padding: 5px; */
border-radius: 4px;
}
/* .none{
} */
</style>

102
srcs/requirements/svelte/api_front/old_unused/Header_Multi_old.svelte
View File

@@ -1,102 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
let dispatch = createEventDispatcher();
let types: string[] = ['home', 'regular', 'none'];
// let currentType: string = 'regular';
export let currentType = 'home';
let handleClick = () => {
dispatch('clickedHome');
};
</script>
<!-- Make it so you can have a Big Home page header and a regular header or no header -->
<!-- So far my CSS is super Gross, i guess i'll get Hugo to help me with it -->
<header class={currentType}>
<h1 class={currentType}>
<img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClick}>
</h1>
<!-- {#if currentType === 'home'} -->
<h1 class={currentType}>Potato Pong</h1>
<!-- {/if} -->
</header>
<style>
/* See "possible_fonts.css" for more font options... */
@font-face {
font-family: 'Bondi';
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
header{
/* background: #f7f7f7; */
background: #618174;
/* padding: 20px; */
margin: 0;
font-family: 'Bondi';
/* does nothing so far... */
/* display: flex; */
}
header.home{
/* position: sticky; */
}
header.regular{
position: sticky;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
header.regular > h1:first-child{
justify-self: left;
}
header.regular > h1:nth-child(2){
justify-items: center;
}
/* Headers */
h1.home {
margin: 0;
text-align: center;
/* max-width: 100px; */
}
h1.regular{
margin: 0;
text-align: left;
/* max-width: 40px; */
/* this helped with the weird extra space under the image... */
display: flex;
justify-self: center;
align-self: center;
}
/* Images */
h1 img.home{
/* text-align: center; */
/* get the image squarely in the middle... */
cursor: pointer;
max-width: 100px;
}
h1 img.regular{
cursor: pointer;
max-width: 40px;
padding: 7px 15px;
}
/* .none{
} */
</style>

172
srcs/requirements/svelte/api_front/old_unused/HomePage_old.svelte
View File

@@ -1,172 +0,0 @@
<script lang="ts">
// Now called LoginPage
// import Header from "./Header.svelte";
import Footer from "../components/Footer.svelte";
import Login from "./Login.svelte";
import Tabs from "../shared/Tabs.svelte"
import Card from "../pieces/Card.svelte"
// tmp
let login = { username: '', password: ''};
// let's us track any errors in a submited form
let errors = { username: '', password: ''};
let valid:boolean = false;
const loginHandler = () => {
console.log('hi');
};
const createAccountHandler = () => {
console.log('hi');
};
// Tabs
let items: string[] = ['Login', 'Create Account'];
let activeItem: string = 'Login';
const tabChange = (e) => {
activeItem = e.detail;
};
// TMP for switching page, down the line this will be down by modifying url
</script>
<!-- New New Approach -->
<!-- if i were to do all this with CSS Grids how would i do it? -->
<!-- Things i want -->
<!-- A title button, some nav buttons, a giant dope canvas and words over it -->
<!-- not sure if i want: login and create account -->
<!-- let's start with just the canvas -->
<!-- New aproach -->
<!-- just make the html in order you can move it around all you want into special Compoenents later -->
<!-- Ok i think all of this needs to go in a Home Page Component -->
<!-- and then i make another master component for the main page once you're logged in, no idea what that should look like -->
<!-- what if i kept the special canvas header in here and made another generic header for the rest of the site as a component -->
<header class="banner">
<!-- top left corner, sticky -->
<h1>Potato Pong</h1>
<!-- top right but it takes you down the page -->
<h2>Login</h2>
<!-- all this used to be in Welcome Section -->
<!-- the amazing backround! not sure yet if it should scroll with us or be the size of the View Port... -->
<!-- <canvas></canvas> -->
<!-- i think maybe the canvas needs to be in the header -->
<!-- using an image for now as a placehodler for the canvase -->
<img src="/img/tmp_mario_banner.png" alt="tmp Mario banner">
<div class="welcome">
<h2>Welcome to <br><span>Potato Pong</span></h2>
</div>
<!-- I want some sort of arrow pointing down and blinking to indicate you should scroll -->
</header>
<!-- <section class="banner"> -->
<section class="welcome">
</section>
<!-- no nav on home page -->
<section class="register">
<!-- i could have a toggle tab to login or create a new account -->
<Tabs items={items} {activeItem} on:tabChange={tabChange}/>
{#if activeItem === 'Login'}
<div class="card">
<Card>
<h2>Login</h2>
<form on:submit|preventDefault={loginHandler}>
<div class="form-field">
<input type="text" id="username" placeholder="username" bind:value={login.username}>
<div class="error">{ errors.username }</div>
</div>
<div class="form-field">
<input type="password" id="password" placeholder="password" bind:value={login.password}>
<div class="error">{ errors.password }</div>
</div>
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
<button>Login</button>
</form>
</Card>
</div>
{:else if activeItem = 'Create Account'}
<!-- Create Account -->
<div class="card">
<Card>
<h3>Create Account</h3>
<form on:submit|preventDefault={createAccountHandler}>
<div class="form-field">
<input type="text" id="username" placeholder="username" bind:value={login.username}>
<div class="error">{ errors.username }</div>
</div>
<div class="form-field">
<input type="password" id="password" placeholder="password" bind:value={login.password}>
<div class="error">{ errors.password }</div>
</div>
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
<button>Login</button>
</form>
</Card>
</div>
{/if}
</section>
<!-- below this i could say, this is where i might have put an explanation of what you can do on this page but fuck you i didn't -->
<!-- or maybe in the end i will, something like: Fun, Game, Colors, enjoy Friendship, or don't, it's your choice! -->
<Footer />
<style>
/* hearder stuff */
/* Clearly i have yet to master floating stuff... */
/* i need to put box-sizing in here somewhere for the login... */
/* starting again with CSS Grid */
/* .banner{
position: relative;
}
.banner img{
max-width: 100%;
}
.banner h1{
position: absolute;
left: 0;
top: 10px;
}
.banner h2{
position: absolute;
left: 90%;
top: 10px;
}
.banner .welcome{
background-color: #feb614;
color:white;
padding: 30px;
position: absolute;
left: 50%;
top: 50%;
}
.banner .welcome h2{
font-size: 58px;
}
.banner .welcome h2 span{
font-size: 1.3em;
}
.register{
} */
</style>

90
srcs/requirements/svelte/api_front/old_unused/Login.svelte
View File

@@ -1,90 +0,0 @@
<script lang="ts">
import { now } from "svelte/internal";
import Card from "../pieces/Card.svelte";
import { createEventDispatcher } from 'svelte';
// import UserStore from './stores/UserStore';
// prolly Typescript-ify
//let fields{question:string, answerA:string, answerB: string} = { question: '', answerA: '', answerB: ''};
let login = { username: '', password: ''};
// let's us track any errors in a submited form
let errors = { username: '', password: ''};
let valid:boolean = false;
const dispatch = createEventDispatcher();
const loginHandler = () => {
valid = true;
if (login.username !== $UserStore.username) {
valid = false;
errors.username = "wrong example username."
} else {
// reseting the value of errors
errors.username = "";
}
if (login.password !== $UserStore.password) {
valid = false;
errors.password = "wrong example password."
} else {
// reseting the value of errors
errors.password = "";
}
if (valid) {
$UserStore.loggedIn = true;
$UserStore.status = 'online';
dispatch('login');
}
};
</script>
<div class="login">
<Card>
<form on:submit|preventDefault={loginHandler}>
<div class="form-field">
<input type="text" id="username" placeholder="username" bind:value={login.username}>
<div class="error">{ errors.username }</div>
</div>
<div class="form-field">
<input type="password" id="password" placeholder="password" bind:value={login.password}>
<div class="error">{ errors.password }</div>
</div>
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
<button>Login</button>
</form>
</Card>
</div>
<style>
form{
width: 200px;
margin: 0 auto;
text-align: center;
}
.form-field{
margin: 18px auto;
}
input{
width: 100%;
border-radius: 6px;
}
.login{
/* display: grid;
grid-template-columns: 1fr; */
max-width: 350px;
}
.error{
font-weight: bold;
font-size: 12px;
color: #d91b42;
}
</style>

414
srcs/requirements/svelte/api_front/old_unused/LoginPage.svelte
View File

@@ -1,414 +0,0 @@
<script lang="ts">
// import Header from "./Header.svelte";
import Footer from "../components/Footer.svelte";
import Tabs from "../shared/Tabs.svelte";
import Card from "../pieces/Card.svelte";
import Canvas from "../pieces/Canvas.svelte";
import ScrollTo from "../shared/ScrollTo.svelte";
import UserStore from "./UserStore.js";
import { createEventDispatcher } from "svelte";
import {push} from "svelte-spa-router";
let dispatch = createEventDispatcher();
// Tabs
let items: string[] = ['Login', 'Create Account'];
let activeItem: string = 'Login';
const tabChange = (e) => {
activeItem = e.detail;
};
import axios from 'axios';
import { onMount } from 'svelte';
let user = {logedIn: false};
onMount(async () => {
// console.log('PROFIL SVELTE');
const {data} = await axios.get('http://transcendance:8080/api/v2/user');
if (data)
user.logedIn = true;
});
const submit = async() => {
document.body.scrollIntoView();
push
window.location.href = 'http://transcendance:8080/api/v2/auth';
}
const logout = async() => {
await fetch('http://transcendance:8080/api/v2/auth/logout',);
user.logedIn = false;
};
// for toLogin
let bottomHalf;
// console.log(bottomHalf);
// const element = document.body;
// in theory this could be a Store, but for now this will do
// also in future we'll do this with urls
export let pages;
export let currentPage;
// this shit has overstayed it's welcome, fuck having userId all over the place
export let userId;
// maybe we put this in the login Component?
// tmp
let login = { username: '', password: ''};
// let's us track any errors in a submited form
let errors = { username: '', password: ''};
let valid:boolean = false;
const loginHandler = () => {
console.log('hi from loginHandler');
//
// Basic Checks
//
valid = false;
// checkin Username
if (login.username.length < 1)
{
valid = false;
errors.username = 'please enter a username';
} else {
valid = true;
errors.username = '';
}
// Checking Password
if (login.password.length < 1)
{
valid = false;
errors.password = 'please enter your password';
} else {
valid = true;
errors.password = '';
}
//
// Advanded Checks
//
// Comparing to UserStore
let users;
const unsubscribe = UserStore.subscribe(objs => {
users = objs;
console.log('subscribed');
});
// could i do $users.length ? doesn't look like it...
// let len = $users.length;
// userId = 0;
// userId = users.filter(user => user.username === login.username);
// this shit returns an array, it would be nice if it weren't an array
// let user = users.filter(user => user.username === login.username);
let user = users.find(user => user.username === login.username);
console.log(user);
// console.log(user.password);
// all this shit is a bit wordy... maybe a better way to handle this stuff?
// if (userIndex > users.length) {
if (!user) {
valid = false;
errors.username = 'user not found';
// something better?
} else {
valid = true;
errors.username = '';
}
// if (users[userIndex].password !== login.password) {
if (user && user.password !== login.password) {
valid = false;
errors.password = 'Wrong Password';
// Maybe clear the fields?
} else {
valid = true;
errors.password = '';
}
//
// Validation
//
unsubscribe();
if (valid) {
// yea don't modify this here...
currentPage = 'user';
// something like: indicate that userIndex is the one we want...
console.log('valid Credentials');
// making sure we start at the top of the page, way less jarring
// leave for now just in case...
document.body.scrollIntoView();
// may not actually want a dispatch?
// pass data userIndex?
// dispatch('loggedIn');
// from svelte-spa-router
push("/user");
}
};
//
const createAccountHandler = () => {
console.log('hi from accunt handler');
};
</script>
<header class="grid-container">
<!-- <div on:mouseenter={enter} on:mouseleave={leave} class:active > -->
<h1>Potato Pong</h1>
<!-- </div> -->
<nav>
<!-- placeholder links -->
<a href="/">Somewhere</a>
<!-- <a href="/">SomewhereElse</a> -->
{#if !user.logedIn}
<ScrollTo element={bottomHalf}/>
{:else}
<div class="logout" on:click={logout}>Log Out</div>
{/if}
<!-- one of these will be login and it will scroll you down to the login part -->
</nav>
<h2>
<div>Welcome to</div>
<div>Potato Pong</div>
</h2>
<!-- here i want a flashing arrow pointing down to the login part -->
</header>
<!-- <Canvas class=".canvas2"/> -->
<Canvas/>
<section class="register" bind:this={bottomHalf}>
<!-- My beautiful tabs are useless now, whatever, kill your darlings... -->
<!-- i could have a toggle tab to login or create a new account -->
<!-- This shit is kinda unnecessary cuz there is no Create Account option... -->
<Tabs items={items} {activeItem} on:tabChange={tabChange}/>
{#if activeItem === 'Login'}
<div class="card">
<Card>
<h2>Login</h2>
<form on:submit|preventDefault={loginHandler}>
<div class="form-field">
<input type="text" id="username" placeholder="username" bind:value={login.username}>
<div class="error">{ errors.username }</div>
</div>
<div class="form-field">
<input type="password" id="password" placeholder="password" bind:value={login.password}>
<div class="error">{ errors.password }</div>
</div>
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
<button>Login</button>
</form>
</Card>
</div>
{:else if activeItem = 'Create Account'}
<!-- Create Account -->
<div class="card">
<Card>
<h2>Create Account</h2>
<form on:submit|preventDefault={createAccountHandler}>
<div class="form-field">
<input type="text" id="username" placeholder="username" bind:value={login.username}>
<div class="error">{ errors.username }</div>
</div>
<div class="form-field">
<input type="password" id="password" placeholder="password" bind:value={login.password}>
<div class="error">{ errors.password }</div>
</div>
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
<button>Login</button>
</form>
</Card>
</div>
{/if}
</section>
<!-- below this i could say, this is where i might have put an explanation of what you can do on this page but fuck you i didn't -->
<!-- or maybe in the end i will, something like: Fun, Game, Colors, enjoy Friendship, or don't, it's your choice! -->
<Footer />
<!-- </div> -->
<style>
/* currently useless */
/* No styles get applied to the canvas from here, maybe i should move them to the Canvas Component... */
/* tho tbh, why bother, i'm gonna change it anyway... */
.canvas{
/* grid-column: 1 / 13;
grid-row: 1 / 3; */
/* don't rely on Z-Index!!!! */
z-index: -1;
position: relative;
width: 100%;
height: 100%;
white-space: nowrap;
/* Tmp? */
/* background-color: #666; */
/* somehow this got rid of they annoying white space under the canvas */
padding-bottom: 0;
margin-bottom: 0px;
overflow: hidden;
}
.canvas2{
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
white-space: nowrap;
/* Tmp? */
/* background-color: #666; */
/* somehow this got rid of they annoying white space under the canvas */
padding-bottom: 0;
margin-bottom: 0px;
overflow: hidden;
}
/* .canvas .grid-container{ */
.grid-container{
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
white-space: nowrap;
/* padding-bottom: 0; */
margin-bottom: 0px;
overflow: hidden;
padding: 20px 40px;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
align-items: center;
}
header h1, header nav a{
/* tmp ? well i kinda like it */
color: bisque;
}
header h1{
grid-column: 1 / 7;
grid-row: 1;
/* grid-column: span 6; */
/* tmp? */
padding: 20px;
border: 1px solid bisque;
}
header nav{
/* make it a flexbox? */
grid-column: 7 / 13;
grid-row: 1;
justify-self: end;
/* tmp? */
padding: 20px;
border: 1px solid bisque;
}
header nav a{
margin-left: 10px;
text-decoration: none;
}
/* testing */
header nav a:hover{
font-weight: bold;
background-color: blue;
}
header h2:hover{
background: blue;
}
header h2{
grid-row: 3;
grid-column: 5 / span 4;
justify-self: center;
/* tmp */
border: 1px solid black;
z-index: 3;
}
header h2 div{
font-size: 2em;
}
/* the login / register part */
/* What do i want?
I want it to be the same size as a full screen so you don't see the canvas at all anymore */
/* doesn't work... */
/* body{
background: bisque;
} */
.bottom-half{
/* doesn't quite work... */
background: bisque;
/* also doesn't work... */
/* height: 1vw; */
/* testing */
/* position: absolute; */
}
section.register{
min-height: 400px;
}
.error{
font-size: 0.8em;
font-weight: bold;
color: red;
}
</style>

305
srcs/requirements/svelte/api_front/old_unused/ProfileDisplay_backup_copy.svelte
View File

@@ -1,305 +0,0 @@
<script lang="ts">
import { onMount } from 'svelte';
import { location } from 'svelte-spa-router';
// this is how you access /:first for example
// export let params = {}
// <p>Your name is: <b>{params.first}</b> <b>{#if params.last}{params.last}{/if}</b></p>
// If i export these vars, maybe as an nice tidy object, i could pass whatever i like to them
// The current user, some other user, whatever, and thus reuse this Componente for the user and their friends or whatever
// will have to coordinate with Back, will know more once the Game stats are in the back
// wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
// not sure if that's what i want...
// maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
// why bother storing that shit in the back...
// maybe i need a Rank.svelte component
// ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!
let user;
let rank = '';
let avatar;
// i think i don't need to do this once i sort out the {wrap} conditions: in theory i could pass values to the Route
// once the async authentication check is done
onMount( async() => {
// console.log('mounting profile display')
user = await fetch('http://transcendance:8080/api/v2/user')
.then( (x) => x.json() );
// console.log('profile display did my fetch')
// should i be updating the userStore or is that unnecessary?
if (user.loseGame > user.winGame) {
rank = 'Bitch Ass Loser!'
} else if (user.loseGame === user.winGame) {
rank = 'Fine i guess...'
} else {
rank = 'Yea you da Boss!'
}
await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);
avatar = url;
});
// tmp
// console.log('mounted Profile Display')
// console.log(user);
})
// Glittery Stars and such for Rank
let index = 0, interval = 1000;
const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
// it's unhappy that "star" isn't typeset, no idea what to do about it...
const animate = (star) => {
// the if seems to have fixed the type issue
if (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 = "";
}
}
// This is the part i invented, it was kinda a fucking nightmare...
let stars = [];
for (let i = 0; i < 3; i++) {
setTimeout(() => {
animate(stars[i]);
setInterval(() => animate(stars[i]), 1000);
}, index++ * (interval / 3))
}
</script>
<!-- is this if excessive? -->
<div class="outer">
{#if user !== undefined}
<main>
<!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
<!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
<img class="avatar" src="{avatar}" alt="default user icon">
<div class="username">{user.username}</div>
<div class="rank">Rank:
<span class="glitter">
<span bind:this={stars[0]} 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 bind:this={stars[1]} 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 bind:this={stars[2]} 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>
<p>Victories: {user.stats.winGame}</p>
<p>Losses: {user.stats.loseGame}</p>
<p>Draws: {user.stats.drawGame}</p>
</section>
</main>
{/if}
</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<style>
div.outer{
max-width: 960px;
margin: 40px auto;
}
/* The main part */
main{
max-width: 960px;
margin: 40px auto;
text-align: center;
}
/* Normal CSS stuff */
.avatar{
max-width: 150px;
/* padding: 5px; */
}
/* The variable rich section */
section.main-stats{
max-width: 600px;
margin: 40px auto;
text-align: center;
/* i think i want to use a grid? */
display: grid;
grid-template-columns: repeat(3, 1fr);
/* not sure about this, maybe top should be larger? */
grid-template-rows: repeat(3, 1fr);
}
/* the stuff in the grid*/
section.main-stats h4{
grid-column: 1 / span 3;
}
div.username{
font-size: 1.5em;
font-weight: bold;
padding-bottom: 5px;
}
div.rank {
/* color: black; */
font-size: 1.2em;
font-weight: bold;
}
/* Glittery Star Stuff */
:root {
--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(
to right,
var(--purple),
var(--violet),
var(--pink),
var(--purple)
);
background-size: 200%;
/* Keep these for Safari and chrome */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* These are for Firefox */
background-clip: text;
color: transparent;
white-space: nowrap;
}
</style>

137
srcs/requirements/svelte/api_front/old_unused/TwoFactorAuthentication_old.svelte
View File

@@ -1,137 +0,0 @@
<script lang="ts">
import { onMount } from 'svelte';
import { loginStatus } from '../stores/loginStatusStore';
// Cherif's code
let qrCodeImg;
let qrCode = "";
let wrongCode = "";
let maxTry = 3;
// const fetchQrCodeImg = (async() => {
// await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
// {
// method: 'POST',
// })
// .then(response => {return response.blob()})
// .then(blob => {
// const url = URL.createObjectURL(blob);
// qrCodeImg = url;
// });
// })()
// $: submit = async() => {
// const response = await fetch("http://transcendance:8080/api/v2/auth/2fa/turn-on",
// {
// method : 'POST',
// headers : {
// "Content-Type": "application/json",
// },
// body : JSON.stringify({
// "twoFaCode" : qrCode,
// }),
// });
// if (response.status === 401)
// {
// qrCode = "";
// wrongCode = `Wrong code, please try again. You have ${maxTry} before end session`;
// maxTry--;
// }
// if (maxTry === 0)
// {
// await fetch("http://transcendance:8080/auth/logout",
// {
// method : 'POST',
// })
// .then(response => response.json())
// .then(push("/login"));
// }
// if (response.status === 200)
// {
// push("/");
// }
// }
// My code
let auth;
// we're expecting secret and otpauth
onMount( async() => {
// auth = await fetch('http://transcendance:8080/api/v2/auth/2fa/generate', {
// method: 'POST'
// })
// .then((resp) => resp.json());
// console.log(auth.secret);
await fetch("http://transcendance:8080/api/v2/auth/2fa/generate", {
method: 'POST',
})
.then(response => {return response.blob()})
.then(blob => {
const url = URL.createObjectURL(blob);
qrCodeImg = url;
});
});
// testing loginStatus Custom Store
const toggleTFA = () => {
loginStatus.toggleTFA();
console.log($loginStatus.tfa);
}
// testing
let auth2
const TFA = async() => {
// ok no idea what goes in here...
auth2 = await fetch('http://transcendance:8080/api/v2/auth/2fa/generate', {
method: 'POST'
})
// .then((resp) => resp.json());
// console.log(auth2.secret);
console.log(auth2);
};
// if ($loginStatus.tfa && $loginStatus.fortyTwo)
</script>
<h1>2FA Test</h1>
<div>
<button on:click={TFA}>TFA</button>
</div>
<div>
{#if auth2}
<p>{auth2.json()}</p>
{/if}
</div>
<img src={qrCodeImg} alt="A QRCodeImg you must scan with google authenticator" id="qrcodeImg" />
<!-- <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>

149
srcs/requirements/svelte/api_front/old_unused/UserPage.svelte
View File

@@ -1,149 +0,0 @@
<script lang="ts">
// The User Page can have several Flavors ?
// like a HomePage vibe, and an AccountPage vibe or whatever, but we'll still be serving this page just with diff props
import UserStore from "./UserStore";
import Header from "../components/Header.svelte";
import Footer from "../components/Footer.svelte";
import { createEventDispatcher } from "svelte";
import { loginStatus } from '../stores/loginStatusStore';
import { push } from "svelte-spa-router";
let dispatch = createEventDispatcher();
// i fucking hate these vars, the will have to go
export let pages;
export let currentPage;
export let userId;
// This shit is so redundant...
let types = ['home', 'account']
export let currentType = 'account';
// this is also stupid...
let sidebar = true;
// would i prefer to forward this?
let clickedHome = () => {
console.log('clicked home');
// do something...
currentType = 'home';
};
let clickedLogout = async() => {
console.log('clicked logout');
await fetch('http://transcendance:8080/api/v2/auth/logout',);
// $loginStatus = false;
// maybe use replace() ?
push('/');
};
// All the variables that will eventually be replaced by the real values
let username = 'Username';
let games = { total: 7, won: 4, lost: 3};
let rank = 'gold or whatever the fuck who cares...';
</script>
<!-- remove ={clickedHome} if you want to forward the event to App.svelte-->
<!-- god this is some gross code... -->
<Header on:clickedHome={clickedHome} currentType="{currentType === 'home' ? 'home' : 'regular'}" on:clickedLogout={clickedLogout}/>
<!-- The Wave -->
<!-- <div class="spacer layer1"></div> -->
<!-- this is the thing that will let me offset -->
<div class='{sidebar ? "main-grid" : "none"}'>
{#if sidebar}
<section class="sidebar">
<p>i am a sidebar</p>
</section>
{/if}
<main class:offset={sidebar}>
<!-- what the fuck do we even want in here? messges, about the user, STATISTICS!!! -->
<!-- <div>some stuff goes here</div> -->
<img class="icon" src="img/default_user_icon.png" alt="default user icon">
<div>{username}</div>
<div>Rank: {rank}</div>
<section class="main-stats">
<h4>Match Statistics</h4>
<p>Total: {games.total}</p>
<p>Victories: {games.won}</p>
<p>Losses: {games.lost}</p>
</section>
</main>
</div>
<Footer />
<style>
/* from Haikei */
/* for any Haikei image */
.spacer{
aspect-ratio: 900/300;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* the specific image we use, you need both classes */
.layer1{
background-image: url('/img/wave-haikei.svg');
}
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;
margin: 40px auto;
text-align: center;
}
main.offset{
grid-column: 3 / span 10;
}
/* Normal CSS stuff */
.icon{
max-width: 150px;
}
/* The variable rich section */
section.main-stats{
max-width: 600px;
margin: 40px auto;
text-align: center;
/* i think i want to use a grid? */
display: grid;
grid-template-columns: repeat(3, 1fr);
/* not sure about this, maybe top should be larger? */
grid-template-rows: repeat(3, 1fr);
}
/* the stuff in the grid*/
section.main-stats h4{
grid-column: 1 / span 3;
}
</style>

45
srcs/requirements/svelte/api_front/old_unused/UserStore.js
View File

@@ -1,45 +0,0 @@
import { writable } from "svelte/store";
// ok yea this doesn't make a lot of sense, what am i trying to do?
// have an array of objects that are all the users?
// or an object that is the one user?
// For now as a placeholder i'll have one user in one obj
// should it not be a const? yea seems like it
// export const users = writable(
const UserStore = writable(
[{
// this is an example user
id: 1,
username: 'chaboi',
email: 'nope@fu.com',
// surely there's a better way to do this!
password: '1234',
// maybe an object listing friends' usernames?
friends: 0,
loggedIn: false,
// i imagine the user uploading their Avatare and it being put somehwere in the DB which could be referenced like a URL
// so if this field is empty then use the default avatar
avatar: '',
// online, offline, gaming
status: 'offline',
},
{
id: 2,
username: 'itsame',
email: 'mario@nintendo.com',
// surely there's a better way to do this!
password: '1234',
// maybe an object listing friends' usernames?
friends: 0,
loggedIn: false,
// i imagine the user uploading their Avatare and it being put somehwere in the DB which could be referenced like a URL
// so if this field is empty then use the default avatar
avatar: '',
// online, offline, gaming
status: 'offline',
}]
);
export default UserStore;
// export default users;

24
srcs/requirements/svelte/api_front/old_unused/loginStatusStore.js
View File

@@ -1,24 +0,0 @@
import { writable } from "svelte/store";
// an alternative way of doing things where i have a svelte store connected to localStorage
// do in need to adapt this to work with 2fa?
let _user = localStorage.getItem('42User');
// turns out a simple store is actually the easiest :)
// export const userStore = writable(_user ? JSON.parse(_user) : null); // we start with no user, but go get one if one exists
// export const userStore = writable(null);
// ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes
userStore.subscribe((value) => {
if (value)
localStorage.setItem('42User', JSON.stringify(value));
else
localStorage.removeItem('42User'); // for logout
});
export const userLogout = () => userStore.set(null);
// export const tmpStore = userStore

129
srcs/requirements/svelte/api_front/old_unused/loginStatusStore_old.js
View File

@@ -1,129 +0,0 @@
import { writable } from "svelte/store";
// This is a "Custom Store" see that chapter in the Svelte Tutorial, should be fine
// NVM this is definitely overkill
// function createLogin() {
// const { subscribe, update } = writable(false);
// return {
// subscribe,
// login: () => update(s => s = true),
// logout: () => update(s => s = false),
// }
// }
// export const loginStatus = createLogin();
// 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 { subscribe, update } = writable({
fortyTwo: false,
tfa: false,
});
function toggle42() {
update( (old) => ({...old, fortyTwo: !old.fortyTwo}) );
};
function toggleTFA() {
// update( () => {
// self.tfa = !self.tfa;
// return self;
// })
// console.log("testing");
update( (old) => ({...old, tfa: !old.tfa}) );
};
function isLogged() {
// return (l) => {l.fortyTwo && l.tfa};
// return self.fortyTwo && self.tfa;
// return fortyTwo && tfa;
};
return { subscribe, update, toggle42, toggleTFA, isLogged };
}
export const loginStatus = createLoginStatus();
// OK let's try a totally new approach
// const _loginStatus = writable({
// fortyTwo: false,
// tfa: false,
// })
// export const loginStatus = {
// subscribe: _loginStatus.subscribe,
// set: _loginStatus.set,
// update: _loginStatus.update,
// toggle42: () =>
// }

54
srcs/requirements/svelte/api_front/old_unused/possible_fonts.css
View File

@@ -1,54 +0,0 @@
@font-face {
font-family: 'Monocode-Regular-Demo';
src:url('/fonts/Monocode-Regular-Demo.ttf.woff') format('woff'),
url('Monocode-Regular-Demo.ttf.svg#Monocode-Regular-Demo') format('svg'),
url('Monocode-Regular-Demo.ttf.eot'),
url('Monocode-Regular-Demo.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Air-Conditioner';
src:url('/fonts/Air-Conditioner.ttf.woff') format('woff'),
url('Air-Conditioner.ttf.svg#Air-Conditioner') format('svg'),
url('Air-Conditioner.ttf.eot'),
url('Air-Conditioner.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: '1968-Odyssey-3D';
src:url('/fonts/1968-Odyssey-3D.ttf.woff') format('woff'),
url('1968-Odyssey-3D.ttf.svg#1968-Odyssey-3D') format('svg'),
url('1968-Odyssey-3D.ttf.eot'),
url('1968-Odyssey-3D.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: '1968-Odyssey-Gradient';
src:url('/fonts/1968-Odyssey-Gradient.ttf.woff') format('woff'),
url('1968-Odyssey-Gradient.ttf.svg#1968-Odyssey-Gradient') format('svg'),
url('1968-Odyssey-Gradient.ttf.eot'),
url('1968-Odyssey-Gradient.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AddFatMan';
src:url('/fonts/AddFatMan.ttf.woff') format('woff'),
url('/fonts/AddFatMan.ttf.svg#AddFatMan') format('svg'),
url('/fonts/AddFatMan.ttf.eot'),
url('/fonts/AddFatMan.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Bondi';
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}

177
srcs/requirements/svelte/api_front/old_unused/primaryRoutes.svelte
View File

@@ -1,177 +0,0 @@
<script lang="ts">
import NotFound from "../src/pages/NotFound.svelte";
import ProfilePage from "../src/pages/profile/ProfilePage.svelte";
import SplashPage from "../src/pages/SplashPage.svelte";
import TwoFactorAuthentication from '../src/pages/TwoFactorAuthentication.svelte';
import UnauthorizedAccessPage from '../src/pages/UnauthorizedAccessPage.svelte';
import { wrap } from 'svelte-spa-router/wrap'
import { get } from 'svelte/store';
import TestPage from '../src/pages/TmpTestPage.svelte';
import { userStore, userLogout } from "../src/stores/loginStatusStore";
// "/article/:title": Article, // this is how you would do parameters!
// "/": LoginPage,
// TMP not using this cuz need to work out how to authentical both 42 and 2FA from the backend
// export const primaryRoutes = {
// '/': SplashPage,
// // '/2fa': TwoFactorAuthentication,
// '/2fa': wrap({
// component: TwoFactorAuthentication,
// conditions: [
// (detail) => {
// // let loggedIn;
// // loginStatus.subscribe(value => {
// // loggedIn = value;
// // });
// const { fortyTwo, tfa } = get(loginStatus);
// console.log('condition in /2fa');
// // return (loginStatus.fortyTwo && loginStatus.tfa);
// // console.log($loginStatus.fortyTwo)
// console.log(fortyTwo);
// console.log(tfa);
// return true;
// }
// ]
// }),
// '/profile': wrap({
// component: ProfilePage,
// conditions: [
// (detail) => {
// const { fortyTwo, tfa } = get(loginStatus);
// // console.log(fortyTwo);
// // console.log(tfa);
// // return true;
// return (fortyTwo && tfa);
// }
// ]
// }),
// '/profile/*': wrap({
// component: ProfilePage,
// conditions: [
// (detail) => {
// const { fortyTwo, tfa } = get(loginStatus);
// // console.log(fortyTwo);
// // console.log(tfa);
// // return true;
// return (fortyTwo && tfa);
// }
// ]
// }),
// '/profile': wrap({
// // Use a dynamically-loaded component for this
// asyncComponent: () => import('./ProfilePage.svelte'),
// // Adding one pre-condition that's an async function
// conditions: [
// async (detail) => {
// // Make a network request, which are async operations
// const response = await fetch('http://transcendance:8080/api/v2/user')
// const data = await response.json()
// // Return true to continue loading the component, or false otherwise
// if (data.isAdmin) {
// return true
// }
// else {
// return false
// }
// }
// ]
// }),
// '/unauthorized-access': UnauthorizedAccessPage,
// '*': NotFound
// };
export const primaryRoutes = {
"/": SplashPage,
'/test': wrap({
component: TestPage,
conditions: [
(detail) => {
// const user = get(userStore); // seems like get(store) is not an option
// // const user = userStore;
// // console.log(fortyTwo);
// // console.log(tfa);
// console.log('in /test what is in user')
// console.log(user)
// you moron $userStore is a Svelte Abreviation, this is .JS, duh
// let user = $userStore;
let user;
const unsub = userStore.subscribe(value => {
user = value;
});
console.log('in /test what is in userStore directly')
console.log(user)
// return true;
// obvi this doesn't work cuz skips to true after no user...
// you gotta make the condition the true and the everything else false
// if (user && user.statusCode && user.statusCode === 403)
// if (user !== null) {
if (user && user.username) {
unsub();
return true;
} else {
unsub();
return false;
}
}
]
}),
// '/test': wrap({
// component: TestPage,
// conditions: [
// async(detail) => {
// // THIS SHIT TOTALLY WORKS
// const user = await fetch('http://transcendance:8080/api/v2/user')
// .then((resp) => resp.json())
// console.log('in /test what is in user')
// console.log(user)
// if (user && user.username)
// return true;
// else
// return false;
// }
// ]
// }),
'/2fa': TwoFactorAuthentication,
"/profile": ProfilePage,
"/profile/*": ProfilePage,
'/unauthorized-access': UnauthorizedAccessPage,
"*": NotFound
};
// export const primaryRoutes = {
// "/": SplashPage,
// "/profile": ProfilePage,
// "/game": GamePage,
// "/chat": ChatPage,
// "*": NotFound
// };
// i might need to add /profile/* and such to make the nested routers work
// ok maybe these need to be in their own files?
// export const gameRoutes = {
// "/": GamePage,
// "*": NotFound
// };
// export const chatRoutes = {
// "/": ChatPage,
// "*": NotFound
// };
</script>