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

changements de l'invocation des environnements dans les fichiers svelte

Browse Source
This commit is contained in:
batche
2023-01-02 20:17:51 +01:00
parent 8586e15cef
commit 74f17a18d6
17 changed files with 71 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -3,13 +3,12 @@
import { push } from "svelte-spa-router";
import { onMount } from 'svelte';
import { get } from "svelte/store";
import { Domain, Port } from "../Constantes";
let user;
onMount(async () => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then((resp) => resp.json())
// i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
@@ -33,14 +32,14 @@
});
const login = async() => {
window.location.href = `http://${Domain}:${Port}/api/v2/auth`;
window.location.href = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth`;
console.log('you are now logged in');
}
// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
// we could .then( () => replace('/') ) need the func so TS compatible...
const logout = async() => {
await fetch(`http://${Domain}:${Port}/api/v2/auth/logout`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
method: 'POST',
});
user = undefined;

6
srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
View File

@@ -1,14 +1,14 @@
<script lang="ts">
import { onMount } from "svelte";
import { push } from "svelte-spa-router";
import { Domain, Port } from "../Constantes";
import { Domain, Port } from "../Constantes.svelte";
let qrCodeImg;
let qrCode = "";
let wrongCode = "";
const fetchQrCodeImg = (async() => {
await fetch(`http://${Domain}:${Port}/api/v2/auth/2fa/generate`,
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/generate`,
{
method: 'POST',
})
@@ -20,7 +20,7 @@
})()
const submitCode = async() => {
const response = await fetch(`http://${Domain}:${Port}/api/v2/auth/2fa/check`,
const response = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/check`,
{
method : 'POST',
headers : {

14
srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
View File

@@ -3,7 +3,7 @@
import { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes";
import { Domain, Port } from "../../Constantes.svelte";
import * as pong from "./client/pong";
import { gameState } from "./client/ws";
@@ -35,9 +35,9 @@
let idOfIntevalCheckTerminationOfTheMatch;
onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( x => x.json() );
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
options.playerOneUsername = user.username;
})
@@ -53,7 +53,7 @@
showWaitPage = true;
const matchOptions = pong.computeMatchOptions(options);
const responseWhenGrantToken = fetch(`http://${Domain}:${Port}/api/v2/game/ticket`, {
const responseWhenGrantToken = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, {
method : "POST",
headers : {'Content-Type': 'application/json'},
body : JSON.stringify({
@@ -142,13 +142,13 @@
const showInvitation = async() => {
showGameOption = false;
showInvitations = true;
invitations = await fetch(`http://${Domain}:${Port}/api/v2/game/invitations`)
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then(x => x.json())
invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false
}
const rejectInvitation = async(invitation) => {
await fetch(`http://${Domain}:${Port}/api/v2/game/decline`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/decline`, {
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
@@ -161,7 +161,7 @@
}
const acceptInvitation = async(invitation : any) => {
const res = await fetch(`http://${Domain}:${Port}/api/v2/game/accept`, {
const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, {
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({

10
srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
View File

@@ -4,7 +4,7 @@
import Header from '../../pieces/Header.svelte';
import MatchListElem from "../../pieces/MatchListElem.svelte";
import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes";
import { Domain, Port } from "../../Constantes.svelte";
import * as pongSpectator from "./client/pongSpectator";
import { gameState } from "./client/ws";
@@ -51,12 +51,12 @@
onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( x => x.json() );
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
// WIP: fetch for match list here
const responseForMatchList = await fetch(`http://${Domain}:${Port}/api/v2/game/match/all`)
const responseForMatchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
const jsonForMatchList = await responseForMatchList.json();
matchList = jsonForMatchList;
console.log("matchList");
@@ -82,7 +82,7 @@
hiddenGame = true;
pongSpectator.destroy();
// WIP: fetch for match list here
matchList = await fetch(`http://${Domain}:${Port}/api/v2/game/match/all`)
matchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
.then( x => x.json() );
console.log("matchList");
if (matchList.length <= 0)

8
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -2,16 +2,16 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import Header from "../../pieces/Header.svelte";
import { Domain, Port } from "../../Constantes";
import { Domain, Port } from "../../Constantes.svelte";
//user's stuff
let currentUser;
let allUsers = [];
let idInterval;
onMount( async() => {
currentUser = await fetch(`http://${Domain}:${Port}/api/v2/user`)
currentUser = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( x => x.json() );
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/game/ranking`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ranking`)
.then( x => x.json() );
idInterval = setInterval(fetchScores, 10000);
})
@@ -21,7 +21,7 @@
})
function fetchScores() {
fetch(`http://${Domain}:${Port}/api/v2/game/ranking`)
fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ranking`)
.then( x => x.json() )
.then( x => allUsers = x );
}

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

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
import { Domain, Port } from "../../Constantes";
import { Domain, Port } from "../../Constantes.svelte";
import Chat from '../../pieces/chat/Chat.svelte';
@@ -10,7 +10,7 @@
onMount( async() => {
// console.log('mounting profile display')
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
})

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

@@ -2,7 +2,7 @@
import { onMount } from "svelte";
import { binding_callbacks } from "svelte/internal";
import { Domain, Port } from "../../Constantes";
import { Domain, Port } from "../../Constantes.svelte";
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
@@ -39,7 +39,7 @@ 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://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
// userBeingViewed = user;
@@ -47,26 +47,26 @@ could be a list of friends and if they're active but i can't see that yet
// console.log(user)
// console.log(user.username)
myFriends = await fetch(`http://${Domain}:${Port}/api/v2/network/myfriends`)
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://${Domain}:${Port}/api/v2/network/pending`)
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://${Domain}:${Port}/api/v2/network/received`)
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://${Domain}:${Port}/api/v2/user/all`)
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)
@@ -75,20 +75,20 @@ could be a list of friends and if they're active but i can't see that yet
const displayAllUsers = async() => {
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
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)
};
const displayAllFriends = async() => {
myFriends = await fetch(`http://${Domain}:${Port}/api/v2/network/myfriends`)
myFriends = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( x => x.json() );
// console.log('got all friends ' + allFriends)
};
const displayRequestsMade = async() => {
requestsMade = await fetch(`http://${Domain}:${Port}/api/v2/network/pending`)
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
.then( x => x.json() );
// console.log('got requests made ' + requestsMade)
};
@@ -107,7 +107,7 @@ could be a list of friends and if they're active but i can't see that yet
}
if (valid) {
sentFriendRequest = await fetch(`http://${Domain}:${Port}/api/v2/network/myfriends`, {
sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
@@ -125,7 +125,7 @@ could be a list of friends and if they're active but i can't see that yet
// sendUsername = userBeingViewed.username;
// prolly like fetch if you're friends or not?
// GET `http://${Domain}:${Port}/api/v2/networks/myfriends?username=aUser` but i need to make that as long as Cherif
// GET `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/networks/myfriends?username=aUser` but i need to make that as long as Cherif
// doesn't have a better option
// like i want this thing to return the Friendship ID ideally
};

12
srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
View File

@@ -3,7 +3,7 @@
import Card from '../../pieces/Card.svelte';
import {onMount} from 'svelte';
import { push } from 'svelte-spa-router';
import { Domain, Port } from "../../Constantes";
import { Domain, Port } from "../../Constantes.svelte";
import Button from '../../pieces/Button.svelte';
let user;
@@ -17,7 +17,7 @@
let success = {username: '', avatar: '' };
onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
// do a .catch?
@@ -34,7 +34,7 @@
// console.log('this is what is in the avatar before fetch')
// console.log(avatar)
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`, {method: "GET"})
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);
@@ -64,7 +64,7 @@
else {
errors.username = '';
}
await fetch(`http://${Domain}:${Port}/api/v2/user`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
@@ -101,7 +101,7 @@
// tmp
console.log(data);
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`,
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`,
{
method : 'POST',
body : data,
@@ -109,7 +109,7 @@
.then(() => uploadAvatarSuccess = true ) // for some reason it needs to be a function, i think a TS thing, not a promis otherwise
.then(() => success.avatar = 'Your changes have been saved')
.catch(() => errors.avatar = 'Sorry failed to upload your new Avatar' );
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`, {method: "GET"})
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);

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

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
import { Domain, Port } from "../Constantes";
import { Domain, Port } from "../Constantes.svelte";
// import {updateGeneratedUser} from './GenerateUserDisplay.svelte';
export let aUsername;
@@ -10,8 +10,8 @@
onMount( async() => {
console.log('Display aUser username: '+ aUsername)
//`http://${Domain}:${Port}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${Domain}:${Port}/api/v2/user?username=${aUsername}`)
//`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=${aUsername}`)
.then( (x) => x.json() );
// console.log('Display a user: ')
@@ -27,15 +27,15 @@
const updateUser = async(updatedUser) => {
console.log('Display Update aUser username: '+ updateUser)
//`http://${Domain}:${Port}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${Domain}:${Port}/api/v2/user?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() );
};
// export const updateUser = async(updatedUser) => {
// console.log('Display Update aUser username: '+ updateUser)
// //`http://${Domain}:${Port}/api/v2/user?username=NomDuUserATrouve`
// user = await fetch(`http://${Domain}:${Port}/api/v2/user?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);

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

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Domain, Port } from "../Constantes";
import { Domain, Port } from "../Constantes.svelte";
export let user;
export let primary;
@@ -12,7 +12,7 @@
onMount( async() => {
// using this for now cuz for some reason there is yet to be a way to fet another person's avatar
if (primary) {
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`, {method: "GET"})
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);

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

@@ -1,14 +1,14 @@
<script lang="ts">
import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router';
import { Domain, Port } from "../Constantes";
import { Domain, Port } from "../Constantes.svelte";
import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active?
let handleClickLogout = async () => {
await fetch(`http://${Domain}:${Port}/api/v2/auth/logout`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
method: 'POST',
})
// .then(resp => resp.json)

4
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -2,14 +2,14 @@
<script lang="ts">
import Layouts from './Chat_layouts.svelte';
import { Domain, PortIo } from "../../Constantes";
import { Domain, PortIo } from "../../Constantes.svelte";
export let color = "transparent";
/* web sockets with socket.io
*/
import { onMount } from 'svelte';
import io from 'socket.io-client';
const socket = io(`http://${Domain}:${PortIo}`, {
const socket = io(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`, {
path: '/chat'
});
onMount(async => {