From d5664346030f786eaf0d968d6a1c8a339fc5f599 Mon Sep 17 00:00:00 2001 From: Quentin Roussel Date: Sat, 20 Apr 2024 10:43:15 +0200 Subject: [PATCH 1/2] show enemy name --- traque-front/app/admin/page.js | 2 +- .../components/admin/zoneSelector.jsx | 2 +- traque-front/components/team/actionDrawer.jsx | 6 +++- .../components/team/enemyTeamModal.jsx | 32 +++++++++++++++++++ .../components/team/waitingScreen.jsx | 1 - traque-front/hook/useGame.jsx | 1 + 6 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 traque-front/components/team/enemyTeamModal.jsx diff --git a/traque-front/app/admin/page.js b/traque-front/app/admin/page.js index c36c8bc..8e22c46 100644 --- a/traque-front/app/admin/page.js +++ b/traque-front/app/admin/page.js @@ -23,7 +23,7 @@ export default function AdminPage() { changeState(GameState.PLAYING)}>Start game {gameState == GameState.PLACEMENT &&
} - {gameState == GameState.SETUP && } + {(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && } ) } \ No newline at end of file diff --git a/traque-front/components/admin/zoneSelector.jsx b/traque-front/components/admin/zoneSelector.jsx index dfe9387..b769a5d 100644 --- a/traque-front/components/admin/zoneSelector.jsx +++ b/traque-front/components/admin/zoneSelector.jsx @@ -56,6 +56,6 @@ export function ZoneSelector() {

Interval between reductions

setReductionInterval(e.target.value)}> - Save + Apply } \ No newline at end of file diff --git a/traque-front/components/team/actionDrawer.jsx b/traque-front/components/team/actionDrawer.jsx index bade8b8..13c00a3 100644 --- a/traque-front/components/team/actionDrawer.jsx +++ b/traque-front/components/team/actionDrawer.jsx @@ -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() {
Target
- See target info + setEnemyModalVisible(true)}>See target info
setEnemyCaptureCode(e.target.value)} /> @@ -66,6 +69,7 @@ export default function ActionDrawer() {
} + setEnemyModalVisible(false)} /> ) } \ No newline at end of file diff --git a/traque-front/components/team/enemyTeamModal.jsx b/traque-front/components/team/enemyTeamModal.jsx new file mode 100644 index 0000000..b4eda3b --- /dev/null +++ b/traque-front/components/team/enemyTeamModal.jsx @@ -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 && + <> +
+
+

{enemyName}

+ + Close +
+ + + ) +} \ No newline at end of file diff --git a/traque-front/components/team/waitingScreen.jsx b/traque-front/components/team/waitingScreen.jsx index 346dcd7..907ad51 100644 --- a/traque-front/components/team/waitingScreen.jsx +++ b/traque-front/components/team/waitingScreen.jsx @@ -23,7 +23,6 @@ export function WaitingScreen() { } function refreshImage() { - imageRef.current.src = ""; imageRef.current.src = SERVER_URL + "/photo/my?team=" + teamId.toString() + "&t=" + new Date().getTime(); } diff --git a/traque-front/hook/useGame.jsx b/traque-front/hook/useGame.jsx index 41c093d..5418ca3 100644 --- a/traque-front/hook/useGame.jsx +++ b/traque-front/hook/useGame.jsx @@ -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, From 643343b9036b348a123b4d5e71da3f5ed628ab5b Mon Sep 17 00:00:00 2001 From: Quentin Roussel Date: Sat, 20 Apr 2024 13:23:06 +0200 Subject: [PATCH 2/2] game over basic frontend --- traque-front/app/team/track/page.js | 18 +++++++++++++----- traque-front/components/team/waitingScreen.jsx | 6 ++---- traque-front/components/util/button.jsx | 7 +++++++ 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/traque-front/app/team/track/page.js b/traque-front/app/team/track/page.js index c5364de..a054ccc 100644 --- a/traque-front/app/team/track/page.js +++ b/traque-front/app/team/track/page.js @@ -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 <> - + {gameState == GameState.SETUP && } {gameState == GameState.PLAYING && !captured &&
@@ -32,7 +33,7 @@ export default function Track() {
} {gameState == GameState.PLAYING && captured &&
-
Vous avez été capturé
+
Vous avez été capturé
Instructions de retour ici
} {gameState == GameState.PLACEMENT && @@ -41,5 +42,12 @@ export default function Track() { } + {gameState == GameState.FINISHED &&
+ +
Partie terminée
+ {captured &&
Vous avez perdu
} + {!captured &&
Vous avez gagné
} +
+ } } diff --git a/traque-front/components/team/waitingScreen.jsx b/traque-front/components/team/waitingScreen.jsx index 907ad51..db58d46 100644 --- a/traque-front/components/team/waitingScreen.jsx +++ b/traque-front/components/team/waitingScreen.jsx @@ -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 (
+
Equipe : {name}
@@ -43,7 +42,6 @@ export function WaitingScreen() {
{teamId && ) } \ No newline at end of file diff --git a/traque-front/components/util/button.jsx b/traque-front/components/util/button.jsx index 6d32417..49290d4 100644 --- a/traque-front/components/util/button.jsx +++ b/traque-front/components/util/button.jsx @@ -1,3 +1,5 @@ +import { useTeamConnexion } from "@/context/teamConnexionContext"; + export default function BlueButton({ children, ...props }) { return () +} + +export function LogoutButton() { + const { logout } = useTeamConnexion(); + return } \ No newline at end of file