public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

added front end for showing zone to player

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-17 22:02:47 +02:00
parent 704a73ab73
commit 014d47f7db
2 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
traque-front/components/team/map.jsx
View File

@@ -5,32 +5,49 @@ import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility
import "leaflet-defaulticon-compatibility";
import "leaflet/dist/leaflet.css";
import useGame from '@/hook/useGame';
import { useTeamContext } from '@/context/teamContext';
const DEFAULT_ZOOM = 17;
// Pan to the center of the map when the position of the user is updated for the first time
function MapPan(props) {
const map = useMap();
const [initialized, setInitialized] = useState(false);
const map = useMap();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if(!initialized && props.center) {
map.flyTo(props.center, DEFAULT_ZOOM, {animate: false});
setInitialized(true)
}
},[props.center]);
useEffect(() => {
if (!initialized && props.center) {
map.flyTo(props.center, DEFAULT_ZOOM, { animate: false });
setInitialized(true)
}
}, [props.center]);
return null;
return null;
}
export function LiveMap({ ...props}) {
const {currentPosition, enemyPosition} = useGame();
function LiveZone() {
const { zone } = useTeamContext();
console.log('Zone', zone);
return zone && <Circle center={zone.center} radius={zone.radius} color='blue' fill={false} />
}
function ZoneExtremities() {
const { zoneExtremities } = useTeamContext();
console.log('Zone extremities', zoneExtremities);
return zoneExtremities && zoneExtremities.begin && zoneExtremities.end && <>
<Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />
<Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />
</>
}
export function LiveMap({ ...props }) {
const { currentPosition, enemyPosition } = useGame();
useEffect(() => {
console.log('Current position', currentPosition);
}, [currentPosition]);
return (
<MapContainer {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
<MapContainer {...props} className='min-h-full z-0' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -46,7 +63,7 @@ export function LiveMap({ ...props}) {
Votre position
</Popup>
</Marker>}
{enemyPosition && <Marker position={enemyPosition} icon={new L.Icon({
{enemyPosition && <Marker position={enemyPosition} icon={new L.Icon({
iconUrl: '/icons/target.png',
iconSize: [41, 41],
iconAnchor: [12, 41],
@@ -57,13 +74,15 @@ export function LiveMap({ ...props}) {
Position de l'ennemi
</Popup>
</Marker>}
<MapPan center={currentPosition}/>
<MapPan center={currentPosition} />
<LiveZone />
<ZoneExtremities />
</MapContainer>
)
}
export function PlacementMap({ ...props}) {
const {currentPosition, startingArea} = useGame();
export function PlacementMap({ ...props }) {
const { currentPosition, startingArea } = useGame();
return (
<MapContainer {...props} className='min-h-full w-full z-0' scrollWheelZoom={true}>
<TileLayer
@@ -81,7 +100,7 @@ export function PlacementMap({ ...props}) {
Votre position
</Popup>
</Marker>}
<MapPan center={currentPosition}/>
<MapPan center={currentPosition} />
{startingArea && <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />}
</MapContainer>
)

9
traque-front/context/teamContext.jsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useLocation } from "@/hook/useLocation";
import { useSocketListener } from "@/hook/useSocketListener";
import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
import { createContext, use, useContext, useEffect, useMemo, useRef, useState } from "react";
import { useSocket } from "./socketContext";
import { useTeamConnexion } from "./teamConnexionContext";
import { GameState } from "@/util/gameState";
@@ -11,6 +11,8 @@ const teamContext = createContext()
function TeamProvider({children}) {
const [teamInfos, setTeamInfos] = useState({});
const [gameState, setGameState] = useState(GameState.SETUP);
const [zone, setZone] = useState(null);
const [zoneExtremities, setZoneExtremities] = useState(null);
const measuredLocation = useLocation(10000);
const {teamSocket} = useSocket();
const {loggedIn} = useTeamConnexion();
@@ -23,6 +25,9 @@ function TeamProvider({children}) {
});
useSocketListener(teamSocket, "game_state", setGameState);
useSocketListener(teamSocket, "zone", setZone);
useSocketListener(teamSocket, "new_zone", setZoneExtremities);
//Send the current position to the server when the user is logged in
useEffect(() => {
@@ -32,7 +37,7 @@ function TeamProvider({children}) {
}
}, [loggedIn, measuredLocation]);
const value = useMemo(() => ({teamInfos, gameState}), [teamInfos, gameState]);
const value = useMemo(() => ({teamInfos, gameState, zone, zoneExtremities}), [teamInfos, gameState, zone, zoneExtremities]);
return (
<teamContext.Provider value={value}>
{children}