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

game over basic frontend

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-20 13:23:06 +02:00
parent fa078ccbda
commit 643343b903
3 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
traque-front/app/team/track/page.js
View File

@@ -3,7 +3,8 @@ import ActionDrawer from '@/components/team/actionDrawer';
import { Notification } from '@/components/team/notification';
import PlacementOverlay from '@/components/team/placementOverlay';
import { WaitingScreen } from '@/components/team/waitingScreen';
import { useSocket } from '@/context/socketContext';
import { LogoutButton } from '@/components/util/button';
import { useSocket } from '@/context/socketContext';
import { useTeamConnexion } from '@/context/teamConnexionContext';
import useGame from '@/hook/useGame';
import { GameState } from '@/util/gameState';
@@ -19,12 +20,12 @@ const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) =>
});
export default function Track() {
const { gameState, captured} = useGame();
const { gameState, captured } = useGame();
const { useProtect } = useTeamConnexion();
const { teamSocket: socket} = useSocket();
const { teamSocket: socket } = useSocket();
useProtect();
return <>
<Notification socket={socket}/>
<Notification socket={socket} />
{gameState == GameState.SETUP && <WaitingScreen />}
{gameState == GameState.PLAYING && !captured && <div className='h-full'>
<LiveMap />
@@ -32,7 +33,7 @@ export default function Track() {
</div>
}
{gameState == GameState.PLAYING && captured && <div className='h-full'>
<div className='text-center text-2xl'>Vous avez été capturé</div>
<div className='text-center text-2xl'>Vous avez été capturé</div>
<div className='text-center text-md'>Instructions de retour ici</div>
</div>}
{gameState == GameState.PLACEMENT &&
@@ -41,5 +42,12 @@ export default function Track() {
<PlacementMap />
</div>
}
{gameState == GameState.FINISHED && <div className='h-full'>
<LogoutButton />
<div className='text-center text-2xl'>Partie terminée</div>
{captured && <div className='text-center text-md'>Vous avez perdu</div>}
{!captured && <div className='text-center text-md'>Vous avez gagné</div>}
</div>
}
</>
}

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

@@ -1,12 +1,10 @@
import { useTeamConnexion } from "@/context/teamConnexionContext";
import useGame from "@/hook/useGame"
import { GreenButton } from "../util/button";
import { GreenButton, LogoutButton } from "../util/button";
import { useRef } from "react";
export function WaitingScreen() {
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() {
@@ -29,6 +27,7 @@ export function WaitingScreen() {
return (
<div className='h-full flex flex-col items-center justify-center'>
<LogoutButton />
<div className='text-4xl mt-10 text-center'>
Equipe : {name}
</div>
@@ -43,7 +42,6 @@ export function WaitingScreen() {
</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>
)
}

7
traque-front/components/util/button.jsx
View File

@@ -1,3 +1,5 @@
import { useTeamConnexion } from "@/context/teamConnexionContext";
export default function BlueButton({ children, ...props }) {
return (<button {...props} className="bg-blue-600 hover:bg-blue-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
{children}
@@ -14,4 +16,9 @@ export function GreenButton({ children, ...props }) {
return (<button {...props} className="bg-green-600 hover:bg-green-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
{children}
</button>)
}
export function LogoutButton() {
const { logout } = useTeamConnexion();
return <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' />
}