diff --git a/2024-04-08-Note-11-05.xopp b/2024-04-08-Note-11-05.xopp new file mode 100644 index 0000000..3583cae Binary files /dev/null and b/2024-04-08-Note-11-05.xopp differ diff --git a/traque-front/components/admin/mapPicker.jsx b/traque-front/components/admin/mapPicker.jsx index 22cd72e..65b5e96 100644 --- a/traque-front/components/admin/mapPicker.jsx +++ b/traque-front/components/admin/mapPicker.jsx @@ -1,6 +1,6 @@ "use client"; import { useLocation } from "@/hook/useLocation"; -import { use, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import "leaflet/dist/leaflet.css"; import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet"; import { useMapCircleDraw } from "@/hook/mapDrawing"; @@ -18,7 +18,7 @@ function MapPan(props) { return null; } -function MapEventListener({onClick, onMouseMove}) { +function MapEventListener({ onClick, onMouseMove }) { const map = useMap(); useEffect(() => { map.on('click', onClick); @@ -36,16 +36,16 @@ function MapEventListener({onClick, onMouseMove}) { } const DEFAULT_ZOOM = 17; -export function CircularAreaPicker({area, setArea, ...props}) { +export function CircularAreaPicker({ area, setArea, ...props }) { const location = useLocation(Infinity); - const {handleClick, handleMouseMove, center, radius} = useMapCircleDraw(area, setArea); + const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea); return ( - {center && radius && } + {center && radius && } ) @@ -54,10 +54,10 @@ export const EditMode = { MIN: 0, MAX: 1 } -export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea,editMode, ...props}) { +export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, 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); + const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone); + const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone); function handleClick(e) { if (editMode == EditMode.MAX) { maxClick(e); @@ -78,9 +78,10 @@ export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea,editMode, . attribution='© OpenStreetMap contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> - {minCenter && minRadius && } - {maxCenter && maxRadius && } + {minCenter && minRadius && } + {maxCenter && maxRadius && } - ) + + ) } \ No newline at end of file diff --git a/traque-front/components/admin/zoneSelector.jsx b/traque-front/components/admin/zoneSelector.jsx index b62323d..c572c75 100644 --- a/traque-front/components/admin/zoneSelector.jsx +++ b/traque-front/components/admin/zoneSelector.jsx @@ -1,17 +1,51 @@ -import { useState } from "react"; -import BlueButton, { RedButton } from "../util/button"; +import { useEffect, useState } from "react"; +import BlueButton, { GreenButton, RedButton } from "../util/button"; import { EditMode, ZonePicker } from "./mapPicker"; +import TextInput from "../util/textInput"; +import useAdmin from "@/hook/useAdmin"; export function ZoneSelector() { const [editMode, setEditMode] = useState(EditMode.MIN); const [minZone, setMinZone] = useState(null); const [maxZone, setMaxZone] = useState(null); + const [reductionCount, setReductionCount] = useState(""); + const [reductionDuration, setReductionDuration] = useState(""); + const [reductionInterval, setReductionInterval] = useState(""); + const {zoneSettings, changeZoneSettings} = useAdmin(); + + useEffect(() => { + if (zoneSettings) { + setMinZone(zoneSettings.min); + setMaxZone(zoneSettings.max); + setReductionCount(zoneSettings.reductionCount.toString()); + setReductionDuration(zoneSettings.reductionDuration.toString()); + setReductionInterval(zoneSettings.reductionInterval.toString()); + } + }, [zoneSettings]); + + function handleSettingsSubmit() { + changeZoneSettings({min:minZone, max:maxZone, reductionCount: Number(reductionCount), reductionDuration: Number(reductionDuration), reductionInterval: Number(reductionInterval)}); + } + return
-

Teams ready status

+

Edit zones

{editMode == EditMode.MIN && setEditMode(EditMode.MAX)}>Edit end zone} {editMode == EditMode.MAX && setEditMode(EditMode.MIN)}>Edit start zone}
+
+

Number of reductions

+ setReductionCount(e.target.value)}> +
+
+

Duration of each reduction

+ setReductionDuration(e.target.value)}> +
+
+

Interval between reductions

+ setReductionInterval(e.target.value)}> +
+ Save
} \ No newline at end of file diff --git a/traque-front/context/adminContext.jsx b/traque-front/context/adminContext.jsx index 0b35eef..3f1e9d4 100644 --- a/traque-front/context/adminContext.jsx +++ b/traque-front/context/adminContext.jsx @@ -7,11 +7,11 @@ import { GameState } from "@/util/gameState"; const adminContext = createContext(); -function AdminProvider({children}) { +function AdminProvider({ children }) { const [teams, setTeams] = useState([]); - const [zone, setZone] = useState(null) + const [zoneSettings, setZoneSettings] = useState(null) const { adminSocket } = useSocket(); - const {loggedIn} = useAdminConnexion(); + const { loggedIn } = useAdminConnexion(); const [gameState, setGameState] = useState(GameState.SETUP); useSocketListener(adminSocket, "game_state", setGameState); @@ -22,9 +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); + useSocketListener(adminSocket, "zone_settings", setZoneSettings); - const value = useMemo(() => ({teams, zone, setZone, setTeams, gameState}), [zone,teams, gameState]); + const value = useMemo(() => ({ teams, zoneSettings, setZoneSettings, setTeams, gameState }), [zoneSettings, teams, gameState]); return ( {children} diff --git a/traque-front/hook/mapDrawing.jsx b/traque-front/hook/mapDrawing.jsx index f354905..804a99a 100644 --- a/traque-front/hook/mapDrawing.jsx +++ b/traque-front/hook/mapDrawing.jsx @@ -1,5 +1,4 @@ import { useEffect, useState } from "react"; -import { useLocation } from "./useLocation"; export function useMapCircleDraw(area, setArea) { const [drawing, setDrawing] = useState(false); diff --git a/traque-front/hook/useAdmin.jsx b/traque-front/hook/useAdmin.jsx index ae11064..6c25284 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, zone } = useAdminContext(); + const {teams, gameState, zoneSettings } = useAdminContext(); const {adminSocket} = useSocket(); function pollTeams() { @@ -38,10 +38,10 @@ export default function useAdmin(){ adminSocket.emit("change_state", state); } - function setZone(zone) { - adminSocket.emit("set_zone", zone); + function changeZoneSettings(zone) { + adminSocket.emit("set_zone_settings", zone); } - return {teams, zone, gameState,setZone, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam }; + return {teams, zoneSettings, gameState,changeZoneSettings, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam }; } \ No newline at end of file