+
+ )
+}
+
+export default Rank
\ No newline at end of file
diff --git a/containers/react/src/components/Game/Ranking.jsx b/containers/react/src/components/Game/Ranking.jsx
index 25a5bd06..8cce52d5 100644
--- a/containers/react/src/components/Game/Ranking.jsx
+++ b/containers/react/src/components/Game/Ranking.jsx
@@ -1,25 +1,59 @@
-import React from "react"
-import {Rank} from '../../DataBase/DataRank.js'
+// import React from "react"
+import React, { useState, useEffect, useRef } from "react";
+import Rank from './Rank.jsx'
import defaultpic from '../../assets/profile.jpg'
+import api from '../../script/axiosApi';
function Ranking(){
+
+ const [isLoading, setIsLoading] = useState(true);
+ const [ranking, setRanking] = useState([]);
+
+ useEffect(()=> {
+
+ const getRanking = async ()=>{
+ try{
+ // const tmpFriends = await api.get("/friends")
+ const Ranking = await api.get("/ranking")
+ setRanking(Ranking.data);
+ console.log(`ranking= ${Ranking.data}`)
+ // setFriends(tmpFriends.data);
+ // return tmpUser;
+ // console.log(`user= ${tmpUser.data.username}`);
+ setIsLoading(false)
+
+ }
+ catch(err){
+ console.log(err);
+ }
+ };
+ getRanking();
+
+ }, [])
+
+ console.log(`ranking after= ${ranking}`)
+
return (
+ {user.rank}: {user.nickname}
+ {profilePicture ? (
+
+
+ {index + 1}
+{user.rank}: {user.nickname}
+ {profilePicture ? (
+ 
+ ) : (
+ 
+ )}
+ {/* 
*/}
+
+ {user.opponent}
+
-
)
}
diff --git a/containers/react/src/components/Header.jsx b/containers/react/src/components/Header.jsx
index ebe6453e..15c06b7d 100644
--- a/containers/react/src/components/Header.jsx
+++ b/containers/react/src/components/Header.jsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
import {AiOutlineMenuUnfold} from 'react-icons/ai';
// import * as AiIcons from 'react-icons/ai';
import {Link} from 'react-router-dom';
@@ -10,7 +10,7 @@ import Modal from './Sidebar/Modal';
// import AnimatePresence from
import '../styles/Header.css';
-
+import api from '../script/axiosApi';
function Header() {
// const [sidebar, setSidebar] = useState(false);
@@ -18,55 +18,30 @@ function Header() {
const [modalOpen, setModalOpen] = useState(false);
const close = () => setModalOpen(false);
const open = () => setModalOpen(true);
+
+ const [profilePicture, setProfilePicture] = useState('');
+
+ useEffect(() => {
+ const fetchProfilePicture = async () => {
+ try {
+ const user = await api.get("/profile");
+ const pic = await api.post("/getPicture", {username: user.data.username})
+ setProfilePicture(pic.data);
+ // console.log(`profile pic222= ${pic.data}`)
+ } catch (error) {
+ console.error('Error fetching profile picture:', error);
+ }
+ };
+
+ fetchProfilePicture();
+ }, []);
+
+ // console.log(`profile pic= ${profilePicture}`)
+
+ // photo.toString('base64')
return (
Ranking
+ {isLoading ? ( + <> + ) : ( + //Ranking
- {Rank.map((item, index) => {
- return (
-
+ // return (
+ //
+ )}
-
-
-
- )
- })}
+ {ranking.map((user, index) => (
+
- {item.rank}: {item.name}
-
- {/* {item.rank}: {item.name}
- {item.openent}
*/} -
+ //
+ // )
+ ))}
+ // {user.rank}: {user.nickname}
+ //
+ // {index + 1}
+ //{user.rank}: {user.nickname}
+ // {user.opponent}
+ //
- {/* (modalOpen ? close() : open())}>
@@ -75,7 +50,17 @@ function Header() {
- {/*
*/}
{conversations.map(c=> (
-
-
-
- onClick={() => (modalOpen ? close() : open())}>
-
-
-
-
-
*/}
-
- {/* */}
-
-
-
-
-
*/}
- {/*
-
-
-
-
-
*/}
- {/*
-
+
+
+ {profilePicture ? (
+ // 
+
+ // 
+ ) : (
+
+ )}
+
+
*/}
+
@@ -260,7 +260,6 @@ function Chats(){
- {/* setCurrentChat(c)}>
@@ -276,25 +275,29 @@ function Chats(){
{
currentChat ? (
<>
-
);
diff --git a/containers/react/src/components/Messages/Message.jsx b/containers/react/src/components/Messages/Message.jsx
index 846c60f0..cd10f4e1 100644
--- a/containers/react/src/components/Messages/Message.jsx
+++ b/containers/react/src/components/Messages/Message.jsx
@@ -6,15 +6,16 @@
/* By: apommier
- {messages.map(m=>(
-
+ //
- setNewMessage(e.target.value)}
- value={newMessages}
- />
-
+
+ ) : (
+ Open a conversation)}
+
-
) : (Open a conversation)}
-
+ {messages.map(m=>(
+
+ ))}
+ {/* */}
+
-
+ setNewMessage(e.target.value)}
+ value={newMessages}
+ />
+
+
-
+ {/*
+ */}
+ {profilePicture ? (
+
+ ) : (
+
+ )}
- {message.sender}
+ {/* {message.senderNickname}
*/}
+ {message.sender}
+ handleButtonClick(currentUser)}>{currentUser.nickname}
+
+
-
+ {/* */}
+ {profilePicture ? (
+
+ ) : (
+
+ )}
{isLoading ? (
{friends.map(c=> (
- Loading...
@@ -97,15 +106,27 @@ function Social (){ handleButtonClick(c)}>
-
-
-
-
+
- {c.nickname}
- Desc?
-
-
+ // handleButtonClick(c)}>{c.nickname}
+ //
+ //
-
+ {/*
+ */}
+ {profilePicture ? (
+
+ ) : (
+
+ )}
{isLoading ? (
(modalOpen ? close() : open())}>
{modalOpen === true ?
+
+
+ ) : (
+ <>
+ )}
+
+
+
null}>
diff --git a/containers/react/src/pages/canvas.js b/containers/react/src/pages/canvas.js
index e04cf5af..ec45cf8c 100644
--- a/containers/react/src/pages/canvas.js
+++ b/containers/react/src/pages/canvas.js
@@ -120,6 +120,7 @@ export function drawCanvas() {
let response = await api.get('/profile');
const myName = response.data.username;
response = await api.get('/rank');
+ await api.post('/status', {status: 2});
opRank = response.data
console.log(`rank= ${opRank}`);
console.log(`myname= ${myName}`);
@@ -316,11 +317,13 @@ function draw(timestamp)
if (myScore === maxScore)
{
api.post('/win', data);
+ api.post('/status', {status: 1});
console.log("send win");
}
else
{
api.post('/loss', data);
+ api.post('/status', {status: 1});
console.log("send loose");
}
window.location.replace("http://localhost/pong");
Loading...
@@ -65,11 +128,28 @@ function Profile () {{user.nickname}
)} + + + + {mine ? ( +
+
+
+
+