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