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

Merge branch 'master' into hugo

Browse Source
This commit is contained in:
simplonco
2023-01-16 09:19:30 +01:00
parent a643e6bb78 ebad66ed2a
commit 2a4e076f3f
11 changed files with 212 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/svelte/api_front/.env
View File

@@ -1,2 +1,2 @@
WEBSITE_HOST=localhost
WEBSITE_HOST=transcendance
WEBSITE_PORT=8080

38
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplayOneUser.svelte Normal file
View File

@@ -0,0 +1,38 @@
<script lang="ts">
/* ProfileDisplayOneUser is the same as DisplayAUser except sources the username from params from router rather than
from a regular var. But yea it's functionally identical, seemed easier to just have a duplicate rather than figuring
out how to get a more complicated things to do 2 jobs.*/
import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
export let params;
let user;
onMount( async() => {
// console.log('Display One User username: '+ params.username)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${params.username}`)
.then( (x) => x.json() );
console.log('in display ONE user')
console.log({...user})
})
</script>
<div class="background-pages">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
{:else}
<h2>Sorry</h2>
<div>Failed to load user {params.username}</div>
{/if}
<!-- This is where i might toss in an Invite to Game button ? -->
</div>

86
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte → srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
View File

@@ -1,21 +1,17 @@
<script lang="ts">
import { onMount } from "svelte";
import { binding_callbacks, empty } from "svelte/internal"; // WTF is this?
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
import Tabs from "../../pieces/Tabs.svelte";
let errors = {friendRequest: '',};
let set = {friendUsername: ''}
let user;
let allUsers;
let myFriendships;
let requestsMade, requestsRecieved;
let blockedUsers;
let usernameBeingViewed;
let friendshipStatusFull; // id, date, senderUsername, reveiverUsername, status
let friendshipStatusFull; // date, reveiverUsername, status
/**** Layout variables ****/
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users']
@@ -23,7 +19,6 @@
onMount( async() => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
@@ -45,6 +40,16 @@
.then( x => x.json() );
console.log('got all users ')
console.log({...allUsers})
if (usernameBeingViewed !== undefined) {
let found = allUsers.find(e => e.username === usernameBeingViewed);
// console.log("SEARCHING ALL USERS: ")
// console.log({...found})
if (found === undefined) {
// console.log('none found')
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
}
}
};
// it's more like fetch friendships
@@ -52,6 +57,7 @@
const fetchMyFriendships = async() => {
myFriendships = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( x => x.json() );
console.log('got my friends ')
console.log({...myFriendships})
};
@@ -59,6 +65,7 @@
const fetchRequestsMade = async() => {
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 ')
console.log({...requestsMade})
};
@@ -66,6 +73,7 @@
const fetchRequestsReceived = async() => {
requestsRecieved = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/received`)
.then( x => x.json() );
console.log('got requests received ')
console.log({...requestsRecieved})
};
@@ -73,6 +81,7 @@
const fetchBlockedUsers = async() => {
blockedUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/blocked`)
.then( x => x.json() );
console.log('got blocked users, is it empty?')
console.log({...blockedUsers})
console.log(Object.keys(blockedUsers))
@@ -83,8 +92,10 @@
const fetchFriendshipFull = async(aUsername) => {
console.log('fetch friendship from a username')
console.log(aUsername)
friendshipStatusFull = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends?username=${aUsername}`)
.then( x => x.json());
console.log({...friendshipStatusFull})
};
@@ -92,6 +103,7 @@
const sendFriendRequest = async(aUsername) => {
console.log('sending a friend request')
console.log(aUsername)
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
@@ -102,17 +114,14 @@
})
.then( x => x.json())
// .catch( x => console.log({...x}))
// "status": "A"
console.log({...resp})
fetchFriendshipFull(aUsername);
await fetchFriendshipFull(aUsername);
await fetchAll();
};
const viewAUser = async(aUsername) => {
console.log('Profile Friend updating userBeingViewed')
usernameBeingViewed = aUsername;
// friendshipStatusFull = undefined;
// id, date, senderUsername, reveiverUsername, status
usernameBeingViewed = aUsername;
await fetchFriendshipFull(aUsername);
console.log('Friendship Status Full')
@@ -125,39 +134,34 @@
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/accept`, {
method: "PATCH"})
.then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('accepted friend request, now response')
console.log({...resp})
await fetchFriendshipFull(usernameBeingViewed);
// will this make it reload? C'est un peu bourain... do i even need it?
await fetchAll();
activeTabItem = activeTabItem;
};
const declineFriendRequest = async(relationshipId) => {
console.log('decline friend request')
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/decline`, {
method: "PATCH"})
.then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('declined friend request, now response')
console.log({...resp})
await fetchFriendshipFull(usernameBeingViewed);
await fetchAll();
activeTabItem = activeTabItem;
};
const unfriend = async(relationshipId) => {
console.log('Unfriend')
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}`, {
method: "DELETE"})
.then( x => x.json());
// friendshipStatusFull = undefined;
// OR
await fetchFriendshipFull(usernameBeingViewed);
if (Object.keys(friendshipStatusFull).length === 0)
friendshipStatusFull = undefined;
// will this make it reload? C'est un peu bourain... do i even need it?
await fetchAll();
activeTabItem = activeTabItem;
};
@@ -174,34 +178,37 @@
})
})
.then( x => x.json())
await fetchBlockedUsers();
await fetchAllUsers();
// await fetchBlockedUsers();
// await fetchAllUsers();
await fetchAll();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
activeTabItem = activeTabItem;
};
const blockAFriend = async(relationshipId) => {
console.log('blocking a friend, the relationshipID')
console.log(relationshipId)
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/block`, {method: "PATCH"})
.then( x => x.json() );
console.log('blocked a user response')
console.log({...resp})
await fetchBlockedUsers();
await fetchAllUsers();
// await fetchBlockedUsers();
// await fetchAllUsers();
await fetchAll();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
// reloads active tab so you get blocked users for example
activeTabItem = activeTabItem;
};
const unblockAUser = async(relationshipId) => {
// it's basically the same as unfriending someone cuz unfriending them means the relationship is deleted
await unfriend(relationshipId);
activeTabItem = activeTabItem;
};
const switchTab = async(e) => {
@@ -214,31 +221,26 @@
await fetchRequestsReceived();
} else if (activeTabItem === 'Blocked Users') {
await fetchBlockedUsers();
console.log('blocked users: ')
console.log({...blockedUsers})
console.log('fetching blocked users')
}
if (usernameBeingViewed !== undefined)
fetchFriendshipFull(usernameBeingViewed);
};
</script>
<div class="background-pages">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="background-pages">
<div class="top-grid">
<!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
let activeTabItem: string = 'All Users'; -->
<!-- maybe add numbers at the botton? like for how many of each there are? -->
<div class="sidebar-list">
<Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
{#if activeTabItem === 'All Users' && allUsers !== undefined}
<h3>{activeTabItem}</h3>
<!-- problem, i can't use user.id since Cherif doesn't want to expost that to the front...
is there something else i could use? -->
<!-- add a thing so it doesn't display the current user just all the other users -->
{#if Object.keys(allUsers).length === 0}
<div class="tip">You are alone on this platform...</div>
{/if}
@@ -258,7 +260,6 @@
{#if Object.keys(myFriendships).length === 0}
<div class="tip">You don't have any Friends... Yet!</div>
{/if}
<!-- {#each myFriends as aUser (aUser.id)} -->
{#each myFriendships as aFriendship}
{#if aFriendship.senderUsername !== user.username}
<div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
@@ -272,7 +273,6 @@
{#if Object.keys(requestsRecieved).length === 0}
<div class="tip">You don't have any Friend Requests</div>
{/if}
<!-- {#each requestsRecieved as aUser (aUser.id)} -->
{#each requestsRecieved as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
@@ -284,7 +284,6 @@
{#if Object.keys(blockedUsers).length === 0}
<div class="tip">You have not Blocked any Users</div>
{/if}
<!-- {#each blockedUsers as aUser (aUser.id)} -->
{#each blockedUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.receiverUsername)}>{aUser.receiverUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
@@ -296,7 +295,6 @@
<div class="main-display">
{#if usernameBeingViewed !== undefined}
<!-- <DisplayAUser aUsername={usernameBeingViewed}/> -->
<DisplayAUser aUsername={usernameBeingViewed}/>
<div class="buttons-area">
@@ -305,7 +303,6 @@
{#if friendshipStatusFull.senderUsername === user.username}
<div class="tile">Friend Request Sent</div>
{:else}
<!-- <Button type="secondary" on:click={() => acceptFriendRequest(usernameBeingViewed)}>Unfriend</Button> -->
<Button type="secondary" on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button>
<Button on:click={() => declineFriendRequest(friendshipStatusFull.id)}>Decline Friend Request</Button>
{/if}
@@ -331,7 +328,6 @@
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
<Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>Block User</Button>
{/if}
<!-- <Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button> -->
</div>
{:else}
<div class="placeholder">
@@ -343,6 +339,8 @@
</div>
</div>
</div>
<style>
/* ok so i want a 12 column grid with a sidebar */

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

@@ -1,51 +1,32 @@
<script lang="ts">
import { onMount, afterUpdate } from 'svelte';
import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
// export let aUsername;
export let aUsername;
let user;
onMount( async() => {
console.log('Display aUser username: '+ aUsername)
//`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
// console.log('Display aUser username: '+ aUsername)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
})
// sadly created an infinite loop
// afterUpdate( async() => {
// console.log('Display Update 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() );
// })
export const updateUser = async() => {
// console.log('Display Update aUser username: '+ aUsername)
// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
// user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
};
// $: aUsername, updateUser();
$: aUsername, updateUser();
</script>
<div class="background-pages">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
{:else}
<h2>Sorry</h2>
<div>Failed to load user {aUsername}</div>
{/if}
<style>
</style>
</div>

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

@@ -9,11 +9,12 @@
let avatar;
// avatar needs to be updated!!!
console.log('Generate User Display, BEFORE on mount ' + avatar)
// add errors
console.log('user:')
console.log({...user})
// console.log(user)
let errors = {avatar: ''};
onMount( async() => {
// console.log('Generate User Display, on mount ' + user.username)
avatar = await fetchAvatar(user.username);
})
@@ -90,10 +91,10 @@
</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>
<p class="highlight">Total: {user.stats.totalGame}</p>
</section>
</main>
{/if}
@@ -142,6 +143,7 @@
font-size: 1.5em;
font-weight: bold;
padding-bottom: 5px;
/* color: white; */
}
div.rank {
@@ -156,6 +158,30 @@
color: red;
}
.highlight {
font-weight: bold;
}
p.highlight{
grid-column: 1 / span 3;
}
@media screen and (max-width: 500px) {
section.main-stats{
grid-template-columns: 1fr;
}
section.main-stats h4{
grid-column: 1;
}
section.main-stats p{
grid-column: 1;
}
}
/* Glittery Star Stuff */

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

@@ -28,7 +28,7 @@
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
<button class:selected="{current === '/profile/users'}" on:click={() => (push('/profile/users'))}>Users</button>
</div>
<button class="logout" on:click={handleClickLogout}>Log Out</button>
</div>

43
srcs/requirements/svelte/api_front/src/routes/profileRoutes.js
View File

@@ -2,8 +2,10 @@
import NotFound from "../pages/NotFound.svelte";
import ProfileDisplay from '../pages/profile/ProfileDisplay.svelte';
import ProfileSettings from '../pages/profile/ProfileSettings.svelte';
import ProfileFriends from '../pages/profile/ProfileFriends.svelte';
import { wrap } from 'svelte-spa-router/wrap'
import ProfileUsers from '../pages/profile/ProfileUsers.svelte';
import ProfileDisplayOneUser from "../pages/profile/ProfileDisplayOneUser.svelte";
import DisplayAUser from '../pieces/DisplayAUser.svelte';
// establishing the prefix here very clearly so we can have a coherent repeatable structure
export const prefix = '/profile';
@@ -11,39 +13,8 @@ export const prefix = '/profile';
export const profileRoutes = {
'/': ProfileDisplay,
'/settings': ProfileSettings,
'/friends': ProfileFriends,
'/users': ProfileUsers,
'/users/:username': ProfileDisplayOneUser,
// '/users/:username': DisplayAUser,
'*': NotFound
};
// I think the conditions of access like are you authenticated work best when they are on the parent routes not the nested routes cuz i don't want my header showing up
// export const profileRoutes = {
// '/': wrap({
// component: ProfileDisplay,
// conditions: [
// (detail) => {
// const { fortyTwo, tfa } = get(loginStatus);
// console.log(fortyTwo);
// console.log(tfa);
// console.log('in Profile Display');
// // return true;
// return (fortyTwo && tfa);
// }
// ]
// }),
// '/settings': wrap({
// component: ProfileSettings,
// conditions: [
// (detail) => {
// const { fortyTwo, tfa } = get(loginStatus);
// // console.log(fortyTwo);
// // console.log(tfa);
// // return true;
// return (fortyTwo && tfa);
// }
// ]
// }),
// '*': NotFound
// };
// what if i did /#/profile/:id for like not the user? and then based on that did a fetch?