diff --git a/traque-front/app/admin/page.js b/traque-front/app/admin/page.js
index dbb81a6..c36c8bc 100644
--- a/traque-front/app/admin/page.js
+++ b/traque-front/app/admin/page.js
@@ -4,7 +4,11 @@ import BlueButton, { GreenButton, RedButton } from "@/components/util/button";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import useAdmin from "@/hook/useAdmin";
import { GameState } from "@/util/gameState";
+import dynamic from "next/dynamic";
+const ZoneSelector = dynamic(() => import('@/components/admin/zoneSelector').then((mod) => mod.ZoneSelector), {
+ ssr: false
+});
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
const { gameState, changeState } = useAdmin();
@@ -19,6 +23,7 @@ export default function AdminPage() {
changeState(GameState.PLAYING)}>Start game
{gameState == GameState.PLACEMENT &&
}
+ {gameState == GameState.SETUP && }
)
}
\ No newline at end of file
diff --git a/traque-front/components/admin/mapPicker.jsx b/traque-front/components/admin/mapPicker.jsx
index a265f1d..22cd72e 100644
--- a/traque-front/components/admin/mapPicker.jsx
+++ b/traque-front/components/admin/mapPicker.jsx
@@ -50,18 +50,36 @@ export function CircularAreaPicker({area, setArea, ...props}) {
)
}
-
-export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
+export const EditMode = {
+ MIN: 0,
+ MAX: 1
+}
+export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea,editMode, ...props}) {
const location = useLocation(Infinity);
const {handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius} = useMapCircleDraw(minArea, setMinArea);
const {handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius} = useMapCircleDraw(maxArea, setMaxArea);
+ function handleClick(e) {
+ if (editMode == EditMode.MAX) {
+ maxClick(e);
+ } else {
+ minClick(e);
+ }
+ }
+ function handleMouseMove(e) {
+ if (editMode == EditMode.MAX) {
+ maxHover(e);
+ } else {
+ minHover(e);
+ }
+ }
return (
- {center && radius && }
+ {minCenter && minRadius && }
+ {maxCenter && maxRadius && }
)
diff --git a/traque-front/components/admin/zoneSelector.jsx b/traque-front/components/admin/zoneSelector.jsx
new file mode 100644
index 0000000..b62323d
--- /dev/null
+++ b/traque-front/components/admin/zoneSelector.jsx
@@ -0,0 +1,17 @@
+import { useState } from "react";
+import BlueButton, { RedButton } from "../util/button";
+import { EditMode, ZonePicker } from "./mapPicker";
+
+export function ZoneSelector() {
+ const [editMode, setEditMode] = useState(EditMode.MIN);
+ const [minZone, setMinZone] = useState(null);
+ const [maxZone, setMaxZone] = useState(null);
+ return
+
Teams ready status
+ {editMode == EditMode.MIN &&
setEditMode(EditMode.MAX)}>Edit end zone}
+ {editMode == EditMode.MAX &&
setEditMode(EditMode.MIN)}>Edit start zone}
+
+
+
+
+}
\ No newline at end of file
diff --git a/traque-front/context/adminContext.jsx b/traque-front/context/adminContext.jsx
index 0f3cdd4..0b35eef 100644
--- a/traque-front/context/adminContext.jsx
+++ b/traque-front/context/adminContext.jsx
@@ -9,6 +9,7 @@ const adminContext = createContext();
function AdminProvider({children}) {
const [teams, setTeams] = useState([]);
+ const [zone, setZone] = useState(null)
const { adminSocket } = useSocket();
const {loggedIn} = useAdminConnexion();
const [gameState, setGameState] = useState(GameState.SETUP);
@@ -21,8 +22,9 @@ function AdminProvider({children}) {
//Bind listeners to update the team list and the game status on socket message
useSocketListener(adminSocket, "teams", setTeams);
+ useSocketListener(adminSocket, "zone", setZone);
- const value = useMemo(() => ({teams, setTeams, gameState}), [teams, gameState]);
+ const value = useMemo(() => ({teams, zone, setZone, setTeams, gameState}), [zone,teams, gameState]);
return (
{children}
diff --git a/traque-front/hook/useAdmin.jsx b/traque-front/hook/useAdmin.jsx
index 56c566e..ae11064 100644
--- a/traque-front/hook/useAdmin.jsx
+++ b/traque-front/hook/useAdmin.jsx
@@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext";
import { useSocket } from "@/context/socketContext";
export default function useAdmin(){
- const {teams, gameState } = useAdminContext();
+ const {teams, gameState, zone } = useAdminContext();
const {adminSocket} = useSocket();
function pollTeams() {
@@ -38,6 +38,10 @@ export default function useAdmin(){
adminSocket.emit("change_state", state);
}
- return {teams, gameState, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
+ function setZone(zone) {
+ adminSocket.emit("set_zone", zone);
+ }
+
+ return {teams, zone, gameState,setZone, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
}
\ No newline at end of file