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

Merge branch 'main' of github.com:quentinrsl/traque into main

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-20 12:58:55 +00:00
parent 64748d26b3 643343b903
commit 7f7f383c85
8 changed files with 62 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
traque-front/app/admin/page.js
View File

@@ -23,7 +23,7 @@ export default function AdminPage() {
<BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
</div>
{gameState == GameState.PLACEMENT && <div className="max-h-5/6"><TeamReady /></div>}
{gameState == GameState.SETUP && <ZoneSelector />}
{(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && <ZoneSelector />}
</div>
)
}

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>
}
</>
}

2
traque-front/components/admin/zoneSelector.jsx
View File

@@ -56,6 +56,6 @@ export function ZoneSelector() {
<p>Interval between reductions</p>
<TextInput value={reductionInterval} onChange={(e) => setReductionInterval(e.target.value)}></TextInput>
</div>
<GreenButton onClick={handleSettingsSubmit}>Save</GreenButton>
<GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
</div>
}

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
import BlueButton, { GreenButton, RedButton } from "../util/button";
import TextInput from "../util/textInput";
import { useTeamConnexion } from "@/context/teamConnexionContext";
import { EnemyTeamModal } from "./enemyTeamModal";
export default function ActionDrawer() {
const [visible, setVisible] = useState(false);
@@ -10,6 +11,8 @@ export default function ActionDrawer() {
const { sendCurrentPosition, name, captureCode, capture, locationSendDeadline, penalties } = useGame();
const {logout} = useTeamConnexion();
const [timeLeftBeforePenalty, setTimeLeftBeforePenalty] = useState(0);
const [enemyModalVisible, setEnemyModalVisible] = useState(false);
useEffect(() => {
const interval = setInterval(() => {
console.log(locationSendDeadline)
@@ -54,7 +57,7 @@ export default function ActionDrawer() {
<div className="p-5 shadow-lg bg-white">
<div className="text-center text-2xl">Target</div>
<div className="h-20 my-1">
<GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
<GreenButton onClick={() => setEnemyModalVisible(true)}>See target info</GreenButton>
</div>
<div className="h-20 flex flex-row">
<TextInput inputMode="numeric" placeholder="Enemy code" value={enemyCaptureCode} onChange={(e) => setEnemyCaptureCode(e.target.value)} />
@@ -66,6 +69,7 @@ export default function ActionDrawer() {
</div>
</div>
}
<EnemyTeamModal visible={enemyModalVisible} onClose={() => setEnemyModalVisible(false)} />
</div>
)
}

32
traque-front/components/team/enemyTeamModal.jsx Normal file
View File

@@ -0,0 +1,32 @@
import useGame from "@/hook/useGame";
import { RedButton } from "../util/button";
import { useEffect, useRef } from "react";
export function EnemyTeamModal({ visible, onClose }) {
const { teamId, enemyName } = useGame();
const imageRef = useRef(null);
useEffect(() => {
if (visible) {
refreshImage();
}
}, [visible]);
function refreshImage() {
imageRef.current.src = SERVER_URL + "/photo/enemy?team=" + teamId.toString() + "&t=" + new Date().getTime();
}
const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
return (visible &&
<>
<div className='fixed w-screen h-screen bg-black bg-opacity-50 z-10 text-center'></div>
<div className='fixed w-11/12 h-5/6 p-5 z-20 mx-auto inset-x-0 my-auto inset-y-0 flex flex-col justify-center rounded-xl transition-all shadow-xl bg-white '>
<h1 className="w-full text-center text-3xl mb-5">{enemyName}</h1>
<img ref={imageRef} src={SERVER_URL + "/photo/enemy?team=" + teamId.toString()} className='w-full h-full object-contain' />
<div className="h-20">
<RedButton onClick={onClose}>Close</RedButton>
</div>
</div>
</>
)
}

7
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() {
@@ -23,13 +21,13 @@ export function WaitingScreen() {
}
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'>
<LogoutButton />
<div className='text-4xl mt-10 text-center'>
Equipe : {name}
</div>
@@ -44,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' />
}

1
traque-front/hook/useGame.jsx
View File

@@ -22,6 +22,7 @@ export default function useGame() {
sendCurrentPosition,
capture,
enemyPosition: teamInfos?.enemyLocation || null,
enemyName: teamInfos?.enemyName || null,
currentPosition: teamInfos?.currentLocation || null,
startingArea: teamInfos?.startingArea || null,
captureCode: teamInfos?.captureCode || null,