public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

added front end for uploading photo on waiting screen

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-20 00:35:09 +02:00
parent 1b967eda28
commit b5dd6343d2
3 changed files with 44 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
traque-front/components/team/waitingScreen.jsx
View File

@@ -1,20 +1,49 @@
import { useTeamConnexion } from "@/context/teamConnexionContext";
import useGame from "@/hook/useGame"
import { GreenButton } from "../util/button";
import { useRef } from "react";
export function WaitingScreen() {
const { name } = useGame();
const { name, teamId } = useGame();
const imageRef = useRef(null);
const { logout } = useTeamConnexion();
const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
function sendImage() {
let data = new FormData();
data.append('file', document.querySelector('input[type="file"]').files[0]);
fetch(SERVER_URL + "/upload?team=" + teamId.toString() , {
method: 'POST',
body: data
}).then((response) => {
console.log(response);
refreshImage();
});
}
function refreshImage() {
imageRef.current.src = "";
imageRef.current.src = SERVER_URL + "/photo/my?team=" + teamId.toString() + "&t=" + new Date().getTime();
}
return (
<div className='h-full flex flex-col items-center justify-center'>
<div className='text-4xl text-center'>
<div className='text-4xl mt-10 text-center'>
Equipe : {name}
</div>
<div className='text-2xl text-center'>
Jeu en préparation, veuillez patienter...
Jeu en préparation, veuillez patienter...
</div>
<div className="bottom-0 absolute text-sm text-center">
Vous avez perdu Le Jeu
<div className='text-2xl text-center my-10'>
<p>Uploadez une photo où tous les membres de l'équipe sont visibles</p>
<input type="file" name="file" accept="image/*" className=" my-5 block w-full text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"/>
<div className="h-20">
<GreenButton onClick={sendImage}>Envoyer</GreenButton>
</div>
</div>
{teamId && <img ref={imageRef} src={SERVER_URL + "/photo/my?team=" + teamId.toString()} className='w-screen h-1/2 object-contain' />}
<img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
</div>
)