Remove out of zone penality + upgrades

This commit is contained in:
Sebastien Riviere
2025-09-03 23:10:50 +02:00
parent 062a69aae3
commit 51b99a699f
22 changed files with 429 additions and 620 deletions

View File

@@ -14,22 +14,27 @@ import LinearGradient from 'react-native-linear-gradient';
import { useSocket } from '../context/socketContext';
import { useTeamContext } from '../context/teamContext';
import { useTeamConnexion } from '../context/teamConnexionContext';
import { useDeadline, useTimeDifference } from '../hook/useTimeDifference';
import { useTimeDifference } from '../hook/useTimeDifference';
import { GameState } from '../util/gameState';
import useGame from '../hook/useGame';
const backgroundColor = '#f5f5f5';
const initialRegion = {latitude: 48.864, longitude: 2.342, latitudeDelta: 0, longitudeDelta: 50} // France centrée sur Paris
const zoneTypes = {
circle: "circle",
polygon: "polygon"
}
export default function Display() {
const arrowUp = require('../assets/images/arrow.png');
const [collapsibleState, setCollapsibleState] = useState(true);
const [bottomContainerHeight, setBottomContainerHeight] = useState(0);
const router = useRouter();
const {SERVER_URL} = useSocket();
const {gameSettings, zoneExtremities, nextZoneDate, isShrinking, location, startLocationTracking, stopLocationTracking, gameState, zone} = useTeamContext();
const {gameSettings, zoneType, zoneExtremities, nextZoneDate, isShrinking, location, startLocationTracking, stopLocationTracking, gameState} = useTeamContext();
const {loggedIn, logout, loading} = useTeamConnexion();
const {sendCurrentPosition, capture, enemyLocation, enemyName, startingArea, captureCode, name, ready, captured, lastSentLocation, locationSendDeadline, penalties, teamId, outOfZone, outOfZoneDeadline, distance, startDate, finishDate, nCaptures, nSentLocation} = useGame();
const {sendCurrentPosition, capture, enemyLocation, enemyName, startingArea, captureCode, name, ready, captured, lastSentLocation, locationSendDeadline, teamId, outOfZone, outOfZoneDeadline, distance, startDate, finishDate, nCaptures, nSentLocation} = useGame();
const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
const [timeLeftSendLocation] = useTimeDifference(locationSendDeadline, 1000);
const [timeLeftNextZone] = useTimeDifference(nextZoneDate, 1000);
@@ -234,12 +239,32 @@ export default function Display() {
);
}
const Zones = () => {
switch (zoneType) {
case zoneTypes.circle:
return (
<View>
{ zoneExtremities.begin && <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} strokeColor="red" fillColor="rgba(255,0,0,0.1)" strokeWidth={2} />}
{ zoneExtremities.end && <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} strokeColor="green" fillColor="rgba(0,255,0,0.1)" strokeWidth={2} />}
</View>
);
case zoneTypes.polygon:
return (
<View>
{ zoneExtremities.begin && <Polygon coordinates={zoneExtremities.begin.points} strokeColor="red" fillColor="rgba(255,0,0,0.1)" strokeWidth={2} /> }
{ zoneExtremities.end && <Polygon coordinates={zoneExtremities.end.points} strokeColor="green" fillColor="rgba(0,255,0,0.1)" strokeWidth={2} /> }
</View>
);
default:
return null;
}
}
const Map = () => {
return (
<MapView ref={mapRef} style={{flex: 1}} initialRegion={initialRegion} mapType="standard" onTouchMove={() => setCenterMap(false)}>
{ gameState == GameState.PLACEMENT && startingArea && circle("0, 0, 255", startingArea)}
{ gameState == GameState.PLAYING && zoneExtremities && <Polygon coordinates={zoneExtremities.begin.points} strokeColor="red" fillColor="rgba(255,0,0,0.1)" strokeWidth={2} /> }
{ gameState == GameState.PLAYING && zoneExtremities && <Polygon coordinates={zoneExtremities.end.points} strokeColor="green" fillColor="rgba(0,255,0,0.1)" strokeWidth={2} /> }
{ gameState == GameState.PLAYING && zoneExtremities && <Zones/>}
{ location &&
<Marker coordinate={{ latitude: location[0], longitude: location[1] }} anchor={{ x: 0.33, y: 0.33 }}>
<Image source={require("../assets/images/marker/blue.png")} style={{width: 24, height: 24}} resizeMode="contain"/>
@@ -345,9 +370,6 @@ export default function Display() {
<View style={styles.topContainer}>
<View style={styles.topheadContainer}>
{ Logout() }
{ penalties > 0 && gameState == GameState.PLAYING &&
<Text style={{marginTop: 15, fontSize: 15}}>Pénalités : {penalties}</Text>
}
{ false && Settings() }
</View>
<View style={styles.teamNameContainer}>

View File

@@ -3,6 +3,7 @@ import { useSocket } from "./socketContext";
import { useSocketAuth } from "../hook/useSocketAuth";
const teamConnexionContext = createContext();
const TeamConnexionProvider = ({ children }) => {
const { teamSocket } = useSocket();
const { login, password: teamId, loggedIn, loading, logout } = useSocketAuth(teamSocket, "team_password");

View File

@@ -4,13 +4,21 @@ import { createContext, useContext, useMemo, useRef, useState } from "react";
import { useSocket } from "./socketContext";
import { GameState } from "../util/gameState";
import useSendDeviceInfo from "../hook/useSendDeviceInfo";
import { useTeamConnexion } from "./teamConnexionContext";
const teamContext = createContext();
const zoneTypes = {
circle: "circle",
polygon: "polygon"
}
const teamContext = createContext()
function TeamProvider({children}) {
const { logout } = useTeamConnexion();
const [teamInfos, setTeamInfos] = useState({});
const [gameState, setGameState] = useState(GameState.SETUP);
const [gameSettings, setGameSettings] = useState(null);
const [zoneType, setZoneType] = useState(null);
const [zoneExtremities, setZoneExtremities] = useState(null);
const [nextZoneDate, setNextZoneDate] = useState(null);
const [location, getLocationAuthorization, startLocationTracking, stopLocationTracking] = useLocation(5000, 10);
@@ -21,21 +29,38 @@ function TeamProvider({children}) {
teamInfosRef.current = teamInfos;
function setCurrentZone(data) {
const newBegin = {points : data.begin.points.map( p => ({latitude: p.lat,longitude: p.lng}) ), duration: data.begin.duration};
const newEnd = {points : data.end.points.map( p => ({latitude: p.lat,longitude: p.lng}) ), duration: data.end.duration};
setZoneExtremities({begin: newBegin, end: newEnd});
function setZone(data) {
setZoneType(data.type);
switch (data.type) {
case zoneTypes.circle:
setZoneExtremities({
begin: {...data.begin, ...{center : {latitude: data.begin.center.lat, longitude: data.begin.center.lng} }},
end: {...data.end, ...{center : {latitude: data.end.center.lat, longitude: data.end.center.lng} }}
});
break;
case zoneTypes.polygon:
setZoneExtremities({
begin: {...data.begin, ...{points : data.begin.points.map( p => ({latitude: p.lat,longitude: p.lng}) )}},
end: {...data.end, ...{points : data.end.points.map( p => ({latitude: p.lat,longitude: p.lng}) )}}
});
break;
default:
setZoneExtremities({begin: data.begin, end: data.end});
break;
}
setNextZoneDate(data.endDate);
}
useSocketListener(teamSocket, "update_team", (newTeamInfos) => {setTeamInfos({...teamInfosRef.current, ...newTeamInfos})});
useSocketListener(teamSocket, "game_state", setGameState);
useSocketListener(teamSocket, "current_zone", setCurrentZone);
useSocketListener(teamSocket, "zone", setZone);
useSocketListener(teamSocket, "game_settings", setGameSettings);
useSocketListener(teamSocket, "logout", logout);
const value = useMemo(() => (
{teamInfos, gameState, zoneExtremities, nextZoneDate, gameSettings, location, getLocationAuthorization, startLocationTracking, stopLocationTracking}
), [teamInfos, gameState, zoneExtremities, nextZoneDate, gameSettings, location]);
{teamInfos, gameState, zoneType, zoneExtremities, nextZoneDate, gameSettings, location, getLocationAuthorization, startLocationTracking, stopLocationTracking}
), [teamInfos, gameState, zoneType, zoneExtremities, nextZoneDate, gameSettings, location]);
return (
<teamContext.Provider value={value}>
{children}
@@ -47,4 +72,4 @@ function useTeamContext() {
return useContext(teamContext);
}
export { TeamProvider, useTeamContext };
export { TeamProvider, useTeamContext };

View File

@@ -15,12 +15,12 @@ export default function useSendDeviceInfo() {
const brand = DeviceInfo.getBrand();
const model = DeviceInfo.getModel();
const name = await DeviceInfo.getDeviceName();
teamSocket.emit('deviceInfo', {model: brand + " " + model, name: name});
teamSocket.emit('device_info', {model: brand + " " + model, name: name});
};
const sendBattery = async () => {
const level = await DeviceInfo.getBatteryLevel();
teamSocket.emit('batteryUpdate', Math.round(level * 100));
teamSocket.emit('battery_update', Math.round(level * 100));
};
sendInfo();