Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix login with other app, pong greater speed at start, fix in game status ?, rename home.js to loginbutton.tsx

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-26 01:31:46 +02:00
parent 1e9946859c
commit 4151350162
12 changed files with 75 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.env
View File

@ -7,17 +7,18 @@
# POSTGRES_PASSWORD=pass
# POSTGRES_DB=postgreDB
# POSTGRES_ROOT_PASSWORD=pass
# POSTGRES_HOST=localhost
# POSTGRES_HOST=bess-f2r5s13
# POSTGRES_HOST_AUTH_METHOD=trust
#URL
NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf"
# BASE_URL=http://localhost
# SOCKET_URL=localhost:8080
BASE_URL=localhost:8080
REACT_APP_BASE_URL=localhost:8080
REDIRECT_URI=http://localhost:8080/api/auth/login
# BASE_URL=http://bess-f2r5s13
# SOCKET_URL=bess-f2r5s13:8080
BASE_URL=bess-f2r5s13:8080
REACT_APP_BASE_URL=bess-f2r5s13:8080
REDIRECT_URI=http://bess-f2r5s13:8080/api/auth/login
INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fbess-f2r5s13%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
#postgres var
# POSTGRES_HOST=127.0.0.1
# DB_TYPE=postgres
@ -42,6 +43,6 @@ REACT_HOST=0.0.0.0
#auth var
JWT_SECRET=secrethere
# REDIRECT_URI=http://localhost:80/api/auth/login
API_SECRET=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
CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
# REDIRECT_URI=http://bess-f2r5s13:80/api/auth/login
API_SECRET=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
CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789

2
containers/api/src/app.controller.ts
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/17 01:00:00 by apommier #+# #+# */
/* Updated: 2023/06/25 00:10:18 by apommier ### ########.fr */
/* Updated: 2023/06/26 00:47:07 by apommier ### ########.fr */
/* */
/* ************************************************************************** */

2
containers/api/src/auth/login42.ts
View File

@ -16,8 +16,8 @@ export class loginClass {
let token = null;
let userId = null;
let userName = null;
// let = null;
console.log("process.env.REDIRECT_URI=", process.env.REDIRECT_URI)
const params = new URLSearchParams(url.split('?')[1]);
const code = params.get('code');

9
containers/react/.env
View File

@ -1,7 +1,8 @@
REACT_APP_BASE_URL=localhost:8080
REACT_APP_SOCKET_URL=localhost
REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41
REACT_APP_BASE_URL=bess-f2r5s13:8080
REACT_APP_SOCKET_URL=bess-f2r5s13
REACT_APP_API_SECRET=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
REACT_APP_CLIENT_UID=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789
REACT_APP_INTRA_URL="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-2bd3c5d4f41e776f2e3d5d699d2a8421f6d0c0468ec882516d9ca89b0c211789&redirect_uri=http%3A%2F%2Fbess-f2r5s13%3A8080%2Fapi%2Fauth%2Flogin&response_type=code"
# REACT_APP_BASE_URL=92.143.191.152
# REACT_APP_BASE_URL=192.168.1.19

26
containers/react/src/components/AnimatedRoute.tsx
View File

@ -1,26 +0,0 @@
import React from "react";
import {Routes, Route} from 'react-router-dom';
import Home from "../pages/Home.jsx";
import PlayButton from "./Game/PlayButton.tsx";
import Field from "../pages/Field";
import Login42 from "../pages/Login42.js";
import Messages from "../pages/Messages.jsx";
import { useLocation } from "react-router-dom";
import {AnimatePresence} from "framer-motion";
function AnimatedRoute () {
const location = useLocation();
return (
<AnimatePresence>
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Home/>}/>
<Route path="/game" element={<PlayButton />}/>
<Route path="/pong/play" element={<Field />}/>
<Route path="/login42" element={<Login42 />}/>
<Route path="/messages" element={<Messages />}/>
</Routes>
</AnimatePresence>
)
}
export default AnimatedRoute

30
containers/react/src/components/App.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import React, { useEffect } from "react";
import {Routes, Route, Navigate} from 'react-router-dom';
import HomeLogin from "../pages/Home.js";
import HomeLogin from "../pages/LoginButton.tsx";
import Home from "../pages/Home.tsx";
@ -20,8 +20,34 @@ import Game from "../pages/Game.tsx";
import Social from "./Social/Social.tsx";
import Logout from "./Profile/Logout.tsx";
function AnimatedRoute () {
// const location = useLocation();
useEffect(() => {
const handleBeforeUnload = (event: { preventDefault: () => void; returnValue: string; }) => {
event.preventDefault(); // Cancel the default event behavior if needed
event.returnValue = ''; // Chrome requires a return value to display a custom message
if (!localStorage.getItem('token'))
return ;
try {
} catch(err) {
console.log(err);
}
// Perform your desired actions before the user leaves the page
// For example, you can show a confirmation dialog or save user data
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
}, []);
const location = useLocation();
if (!localStorage.getItem('token'))
{

12
containers/react/src/components/Game/PlayButton.tsx
View File

@ -19,10 +19,10 @@ function PlayButton() {
path += 'superpower=true&';
}
const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
if (obstacleCheckbox && obstacleCheckbox.checked) {
path += 'obstacle=true&';
}
// const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
// if (obstacleCheckbox && obstacleCheckbox.checked) {
// path += 'obstacle=true&';
// }
const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
if (speedCheckbox && speedCheckbox.checked) {
@ -40,8 +40,8 @@ function PlayButton() {
<button onClick={handleButtonClick} className="playButton">Play</button>
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
<div className='checkbox'>
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p>
<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power</p>
{/* <p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p> */}
<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
</div>
</div>

4
containers/react/src/components/Messages/Message.tsx
View File

@ -6,7 +6,7 @@
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/01 18:24:46 by apommier #+# #+# */
/* Updated: 2023/06/24 16:00:48 by apommier ### ########.fr */
/* Updated: 2023/06/25 23:24:46 by apommier ### ########.fr */
/* */
/* ************************************************************************** */
@ -69,7 +69,7 @@ function MessageMe({message, own}: MessageMeProps){
}
};
fetchProfilePicture();
}, [])
}, []);
const handleButtonClick = () => {
if (!sender)

4
containers/react/src/components/Profile/EditName.tsx
View File

@ -27,7 +27,7 @@ const dropIn = {
// )
// }
const ModalEdit = (handleClose) => {
const ModalEdit = () => {
// let new_name = "";
const [nickname, setNickname] = useState("");
const [errTaken, setErrTaken] = useState(false);
@ -35,7 +35,7 @@ const ModalEdit = (handleClose) => {
const [errTooShort, setErrTooShort] = useState(false);
const closeTooShort = () => setErrTooShort(false);
const handler = e => {
const handler = (e: { target: { value: React.SetStateAction<string>; }; }) => {
setNickname(e.target.value);
console.log("testeeeee")
const postNickname = async () => {

5
containers/react/src/pages/Home.js → containers/react/src/pages/LoginButton.tsx
View File

@ -3,6 +3,7 @@ import '../styles/field.css';
import { useLocation } from 'react-router-dom';
import api from '../script/axiosApi.tsx';
import React from 'react';
function HomeLogin()
{
@ -25,9 +26,11 @@ function HomeLogin()
console.log(`already token= ${localStorage.getItem('token')}`)
return ;
}
console.log("yrah im here bitch");
console.log("lien = ", process.env.REACT_APP_INTRA_URL);
// else
// let path = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2F" + process.env.REACT_APP_BASE_URL + "%3A80%2Fapi%2Fauth%2Flogin&response_type=code";
let path = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2F" + process.env.REACT_APP_BASE_URL + "%2Fapi%2Fauth%2Flogin&response_type=code"
let path = process.env.REACT_APP_INTRA_URL || "";
window.location.replace(path);
};

15
containers/react/src/pages/canvas.tsx
View File

@ -197,12 +197,12 @@ socket.on('pong:gameId', async (data) => {
if (data.id === myId)
{
console.log("myId= true")
vX = 0.0001;
vX = 0.0005;
}
else
{
console.log("myId= false")
vX = -0.0001;
vX = -0.0005;
}
} catch (error) {
console.log(error);
@ -268,7 +268,7 @@ socket.on('pong:point', (data) => {
// console.log("up point");
myScore = data.point;
// }
vX = -0.0001;
vX = -0.0005;
vY = 0;
ballX = canvas.width / 2;
ballY = canvas.height / 2;
@ -282,7 +282,7 @@ socket.on('pong:hisPoint', (data) => {
// console.log("up point");
hisScore = data.point;
// }
vX = -0.0001;
vX = -0.0005;
vY = 0;
ballX = canvas.width / 2;
ballY = canvas.height / 2;
@ -355,7 +355,7 @@ socket.on('pong:hisPoint', (data) => {
point: hisScore,
}
socket.emit('pong:point', info);
vX = 0.0001;
vX = 0.0005;
}
function send_my_point()
@ -370,7 +370,7 @@ socket.on('pong:hisPoint', (data) => {
}
socket.emit('pong:myPoint', info);
myScore++;
vX = 0.0001;
vX = 0.0005;
vY = 0;
ballX = canvas.width / 2;
ballY = canvas.height / 2;
@ -494,6 +494,7 @@ socket.on('pong:hisPoint', (data) => {
// option: option,
// };
// await api.post("status", {status: 1});
await api.post('/status', {status: 1});
await api.post("deleteInvite", {username: gameParam.username})
}
catch (err){
@ -648,7 +649,7 @@ async function draw(timestamp: number)
}
ballX = canvas.width / 2;
ballY = canvas.height / 2;
vX = 0.0001;
vX = 0.0005;
vY = 0;
hisScore += 1;
send_point();

4
containers/react/src/script/tokenSuccess.tsx
View File

@ -16,7 +16,7 @@ function SuccessToken() {
useEffect(() => {
if (!data) {
console.log("No data");
return;
return ;
}
const cleanData = data.slice(1, -1); // Declare cleanData here
@ -94,7 +94,7 @@ function SuccessToken() {
return <h1>Loading...</h1>;
}
if (!data)
return ;
return (<></>);
const cleanData = data.slice(1, -1); // Declare cleanData here as well
if (!user.otp_verified) {