From cd2bba2aed135f9c56887ac5bc7f4653a98d5c39 Mon Sep 17 00:00:00 2001 From: Quentin Roussel Date: Sat, 8 Jun 2024 10:10:48 +0200 Subject: [PATCH] added live map --- traque-front/app/admin/layout.js | 1 + traque-front/app/admin/map/page.js | 9 ++ traque-front/app/admin/page.js | 4 +- traque-front/components/admin/maps.jsx | 126 +++++++++++++++++++------ traque-front/components/util/map.jsx | 1 + traque-front/context/adminContext.jsx | 6 +- traque-front/public/icons/clock.png | Bin 0 -> 9597 bytes 7 files changed, 113 insertions(+), 34 deletions(-) create mode 100644 traque-front/app/admin/map/page.js create mode 100644 traque-front/public/icons/clock.png diff --git a/traque-front/app/admin/layout.js b/traque-front/app/admin/layout.js index 9ff7fa6..c75d592 100644 --- a/traque-front/app/admin/layout.js +++ b/traque-front/app/admin/layout.js @@ -11,6 +11,7 @@ export default function AdminLayout({ children}) {
diff --git a/traque-front/app/admin/map/page.js b/traque-front/app/admin/map/page.js new file mode 100644 index 0000000..8dfecf8 --- /dev/null +++ b/traque-front/app/admin/map/page.js @@ -0,0 +1,9 @@ +"use client"; +import dynamic from 'next/dynamic'; + +const LiveMap = dynamic(() => import('@/components/admin/maps').then((mod) => mod.LiveMap), { + ssr: false +}); +export default function LiveMapPage() { + return +} \ No newline at end of file diff --git a/traque-front/app/admin/page.js b/traque-front/app/admin/page.js index 1159612..6e0ff72 100644 --- a/traque-front/app/admin/page.js +++ b/traque-front/app/admin/page.js @@ -11,7 +11,7 @@ import dynamic from "next/dynamic"; const ZoneSelector = dynamic(() => import('@/components/admin/zoneSelector').then((mod) => mod.ZoneSelector), { ssr: false }); -const LiveMap = dynamic(() => import('@/components/admin/maps').then((mod) => mod.ZoneEditor), { +const ZoneEditor = dynamic(() => import('@/components/admin/maps').then((mod) => mod.ZoneEditor), { ssr: false }); export default function AdminPage() { @@ -36,7 +36,7 @@ export default function AdminPage() { {(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && } {(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && } {gameState == GameState.PLAYING &&
- +
}
) diff --git a/traque-front/components/admin/maps.jsx b/traque-front/components/admin/maps.jsx index 7135b19..1c0aff6 100644 --- a/traque-front/components/admin/maps.jsx +++ b/traque-front/components/admin/maps.jsx @@ -107,7 +107,7 @@ export function ZoneEditor() { const { zone, teams, getTeamName, removeZone } = useAdmin(); const [zonesToDelete, setZonesToDelete] = useState([]); const [tilesColor, setTilesColor] = useState([]); - const [timeBeforeDeletion, setTimeBeforeDeletion] = useState(0); + const [timeBeforeDeletion, setTimeBeforeDeletion] = useState(null); function handleClickTile(tile) { if (!zone.some(t => t.x === tile.x && t.y === tile.y)) return; @@ -127,6 +127,7 @@ export function ZoneEditor() { ...zone .filter(t => !zonesToDelete.some(t2 => t.x == t2.x && t.y == t2.y)) .map(t => { + console.log(t) if (t.removeDate == null) { return { x: t.x, y: t.y, color: 'rgba(0, 0, 255, 0.5)' } } else { @@ -137,44 +138,107 @@ export function ZoneEditor() { }, [zone, zonesToDelete]); const handleSubmit = (e) => { + if (timeBeforeDeletion == null) { + return; + } e.preventDefault(); removeZone(zonesToDelete, timeBeforeDeletion); setZonesToDelete([]); - setTimeBeforeDeletion(0); + setTimeBeforeDeletion(null); } return (
- - - - {teams.map((team) => team.currentLocation && !team.captured && - - {team.name} -

Chasing : {getTeamName(team.chasing)}

-

Chased by : {getTeamName(team.chased)}

- - )} - - - - - - - - - setTimeBeforeDeletion(Number(e.target.value))}> - Delete selected zones +
+ + + + {teams.map((team) => team.currentLocation && !team.captured && + + {team.name} +

Chasing : {getTeamName(team.chasing)}

+

Chased by : {getTeamName(team.chased)}

+ + )} + + + + + + + + +
+
+ + setTimeBeforeDeletion(Number(e.target.value))}> + Delete selected zones +
) +} + +export function LiveMap({ ...props }) { + const location = useLocation(Infinity); + const { zone, teams, getTeamName } = useAdmin(); + const tilesColor = useTilesColor(zone); + + return ( + + + + + + + { }} tileSize={16} /> + + + + + {teams.map((team) => team.currentLocation && !team.captured && + + {team.name} +

Chasing : {getTeamName(team.chasing)}

+

Chased by : {getTeamName(team.chased)}

+ + )} + + + + + {teams.map((team) => team.currentLocation && !team.captured && + + Last position of {team.name} + + )} + + + + + ) } \ No newline at end of file diff --git a/traque-front/components/util/map.jsx b/traque-front/components/util/map.jsx index 39ca395..bf19533 100644 --- a/traque-front/components/util/map.jsx +++ b/traque-front/components/util/map.jsx @@ -2,6 +2,7 @@ export class TileNumber { constructor(x, y) { this.x = x; this.y = y; + this.removeDate = null; } equals(other) { return this.x === other.x && this.y === other.y; diff --git a/traque-front/context/adminContext.jsx b/traque-front/context/adminContext.jsx index d7f6511..25f1e51 100644 --- a/traque-front/context/adminContext.jsx +++ b/traque-front/context/adminContext.jsx @@ -28,7 +28,11 @@ function AdminProvider({ children }) { useSocketListener(adminSocket, "teams", setTeams); useSocketListener(adminSocket, "game_settings", setGameSettings); useSocketListener(adminSocket, "penalty_settings", setPenaltySettings); - useSocketListener(adminSocket, "zone", (zone) => setZone(zone.map(t => new TileNumber(t.x, t.y)))); + useSocketListener(adminSocket, "zone", (zone) => setZone(zone.map(t => { + let tile = new TileNumber(t.x, t.y); + tile.removeDate = t.removeDate; + return tile; + }))); useSocketListener(adminSocket, "new_zone", setZoneExtremities); const value = useMemo(() => ({ zone, zoneExtremities, teams, penaltySettings, gameSettings, gameState }), [teams, gameState, zone, zoneExtremities, penaltySettings, gameSettings]); diff --git a/traque-front/public/icons/clock.png b/traque-front/public/icons/clock.png new file mode 100644 index 0000000000000000000000000000000000000000..6097257267bbdbabf14f4a52759498ebcd7c99e9 GIT binary patch literal 9597 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