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

Clean de quelques trucs dans le front

Browse Source
This commit is contained in:
batche
2023-01-04 18:56:32 +01:00
parent 6dd18c6b06
commit eab2749c0e
13 changed files with 139 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
srcs/requirements/svelte/api_front/src/App.svelte
View File

@@ -12,21 +12,8 @@
replace('/unauthorized-access');
};
// this might be the part where we get rid of localstorage when the app is quit?
// onDestroy()
</script>
<!-- <h1>Testing</h1> -->
<Router routes={primaryRoutes} on:conditionsFailed={conditionsFailed}/>
<style>
/* doesn't work... */
/* body{
background: bisque;
} */
</style>

22
srcs/requirements/svelte/api_front/src/pages/TmpTestPage.svelte
View File

@@ -1,22 +0,0 @@
<script lang="ts">
import { replace } from "svelte-spa-router";
export let user;
</script>
<div class="wrapper">
<h1>You made it to Test</h1>
<button on:click={ () => (replace('/'))}>Go Home</button>
<div>{user}</div>
</div>
<style>
div.wrapper{
display: flexbox;
align-items: center;
}
</style>

34
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
View File

@@ -31,40 +31,6 @@
{/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{

36
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
View File

@@ -6,25 +6,6 @@
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
// Ok so i need to test all the paths Cherif has made but a major one doesn't work yet...
// in the mean time, i need to make some other stuff look nice
// what do i want?
/*
Ideas
- a list of all users and if they're active
could be a list of friends and if they're active but i can't see that yet
- I click on a thing and it lets me see all the users and i get a button that lets me add them
- would that be like a serachable list of all users?
- am i skipping optimization? i mean for now yes, but like
*/
let errors = {friendRequest: '',};
let set = {friendUsername: '', friendId: Number}
@@ -37,38 +18,25 @@ could be a list of friends and if they're active but i can't see that yet
onMount( async() => {
// yea no idea what
// i mean do i fetch user? i will for now
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
// userBeingViewed = user;
// console.log('user is ')
// console.log(user)
// console.log(user.username)
myFriends = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( (x) => x.json() );
// console.log('my friends')
// console.log(myFriends)
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
.then( x => x.json() );
// console.log('Requests pending ');
// console.log(requestsMade);
requestsRecieved = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/received`)
.then( x => x.json() );
// console.log('Requests received ');
// console.log(requestsRecieved);
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
// console.log('got all users ' + allUsers)
})

44
srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte
View File

@@ -4,55 +4,11 @@
import Router from "svelte-spa-router";
import { profileRoutes, prefix } from "../../routes/profileRoutes.js";
// let dispatch = createEventDispatcher();
// what if i did the fetch in ProfilePage rather than in each ProfileDisplay and ProfileSettings
// i mean it would update each time no matter what right? cuz onMount? and then i keep the results in
// a Store and it's all good right?
</script>
<!-- remove ={clickedHome} if you want to forward the event to App.svelte-->
<Header />
<!-- The Wave -->
<!-- <div class="spacer layer1"></div> -->
<div>
<Router routes={profileRoutes} {prefix} />
</div>
<!-- <Footer /> -->
<style>
/* this doesn't work, fucks up all my sub routes */
/* div {
max-width: 960px;
margin: 40px auto;
} */
/* 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');
} */
</style>

20
srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte
View File

@@ -3,8 +3,6 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
// import {updateGeneratedUser} from './GenerateUserDisplay.svelte';
export let aUsername;
let user;
@@ -14,16 +12,9 @@
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
// console.log('Display a user: ')
// console.log({...user})
})
// $: {
// updateUser(aUsername);
// }
const updateUser = async(updatedUser) => {
console.log('Display Update aUser username: '+ updateUser)
@@ -32,23 +23,12 @@
.then( (x) => x.json() );
};
// export const updateUser = async(updatedUser) => {
// console.log('Display Update aUser username: '+ updateUser)
// //`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
// user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${updateUser}`)
// .then( (x) => x.json() );
// updateGeneratedUser(updateUser);
// };
</script>
<!-- OHHHH i could use #await instead of if and have an nice loading page! -->
{#if user !== undefined}
<GenerateUserDisplay bind:user={user} primary={true}/>
<!-- <GenerateUserDisplay user={user} primary={true}/> -->
{:else}
<h2>Sorry</h2>
<div>Failed to load user {aUsername}</div>

4
srcs/requirements/svelte/api_front/src/pieces/Footer.svelte
View File

@@ -1,5 +1,5 @@
<footer>
<div class="copyright">I am official I have a Copyright in 2022</div>
<div class="copyright">I am official I have a Copyright in 2023</div>
</footer>
<style>
@@ -15,4 +15,4 @@
padding: 20px;
border-top: 1px solid #ddd;
}
</style>
</style>

11
srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
View File

@@ -19,16 +19,8 @@
avatar = url;
});
}
// tmp
// console.log('mounted Profile Display')
// console.log(user);
})
// export function updateGeneratedUser(updatedUser) {
// user = updatedUser;
// };
if (user.loseGame > user.winGame) {
rank = 'Bitch Ass Loser!'
@@ -46,9 +38,7 @@
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)}%`);
@@ -59,7 +49,6 @@
}
}
// This is the part i invented, it was kinda a fucking nightmare...
let stars = [];
for (let i = 0; i < 3; i++) {

10
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -11,9 +11,7 @@
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
method: 'POST',
})
// .then(resp => resp.json)
// .then((resp) => console.log(resp))
.then( () => push('/') ) // i think for TS reasons it has to be a func not direclty push('/') or whatever
.then( () => push('/') )
console.log('clicked logout header')
};
@@ -33,13 +31,7 @@
{:else if $location === '/profile'}
<button on:click={() => (push('/profile/settings'))}>Settings</button>
{/if}
<!-- <button on:click={() => (push('/stream'))}>Stream</button> -->
<!-- <button on:click={() => (push('/chat'))}>Chat</button> -->
<!-- tmp -->
<button on:click={() => (push('/profile/friends'))}>Friends</button>
<button on:click={() => (push('/test'))}>test</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>

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

@@ -4,7 +4,6 @@ import SplashPage from "../pages/SplashPage.svelte";
import TwoFactorAuthentication from '../pages/TwoFactorAuthentication.svelte';
import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
import { wrap } from 'svelte-spa-router/wrap'
import TestPage from '../pages/TmpTestPage.svelte';
import Game from '../pages/game/Game.svelte';
import Ranking from '../pages/game/Ranking.svelte';
import GameSpectator from '../pages/game/GameSpectator.svelte';