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