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

Merge branch 'main' of github.com:quentinrsl/traque into main

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-19 22:42:37 +00:00
parent ff6a78b9af 465bd4fe09
commit 37b3a6a538
4 changed files with 55 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
traque-front/components/admin/mapPicker.jsx
View File

@@ -2,7 +2,7 @@
import { useLocation } from "@/hook/useLocation";
import { useEffect, useState } from "react";
import "leaflet/dist/leaflet.css";
import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
import { Circle, MapContainer, Marker, TileLayer, useMap } from "react-leaflet";
import { useMapCircleDraw } from "@/hook/mapDrawing";
function MapPan(props) {
@@ -36,7 +36,7 @@ function MapEventListener({ onClick, onMouseMove }) {
}
const DEFAULT_ZOOM = 17;
export function CircularAreaPicker({ area, setArea, ...props }) {
export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
const location = useLocation(Infinity);
const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
return (
@@ -46,6 +46,13 @@ export function CircularAreaPicker({ area, setArea, ...props }) {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
{markerPosition && <Marker position={markerPosition} icon={new L.Icon({
iconUrl: '/icons/location.png',
iconSize: [41, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})}></Marker>}
<MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer>)

4
traque-front/components/admin/teamEdit.jsx
View File

@@ -68,7 +68,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
<div className='flex flex-row'>
<p>Penalties :</p>
<button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(-1)}>-</button>
<p> {team.penalties}</p>
<p>{team.penalties}</p>
<button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(1)}>+</button>
</div>
</div>
@@ -76,7 +76,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
</div>
<div className='m-5 h-full flex flex-col'>
<h2 className='text-2xl text-center'>Starting area</h2>
<CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} />
<CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} markerPosition={team?.currentLocation}/>
</div>
</div>
)

10
traque-front/components/admin/zoneSelector.jsx
View File

@@ -27,6 +27,16 @@ export function ZoneSelector() {
changeZoneSettings({min:minZone, max:maxZone, reductionCount: Number(reductionCount), reductionDuration: Number(reductionDuration), reductionInterval: Number(reductionInterval)});
}
//When the user set one zone, switch to the other
useEffect(() => {
if(editMode == EditMode.MIN) {
setEditMode(EditMode.MAX);
}else {
setEditMode(EditMode.MIN);
}
}, [minZone, maxZone]);
return <div className='w-2/5 h-full gap-1 bg-gray-200 p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
<h2 className="text-2xl">Edit zones</h2>
{editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}

39
traque-front/components/team/waitingScreen.jsx
View File

@@ -1,20 +1,49 @@
import { useTeamConnexion } from "@/context/teamConnexionContext";
import useGame from "@/hook/useGame"
import { GreenButton } from "../util/button";
import { useRef } from "react";
export function WaitingScreen() {
const { name } = useGame();
const { name, teamId } = useGame();
const imageRef = useRef(null);
const { logout } = useTeamConnexion();
const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
function sendImage() {
let data = new FormData();
data.append('file', document.querySelector('input[type="file"]').files[0]);
fetch(SERVER_URL + "/upload?team=" + teamId.toString() , {
method: 'POST',
body: data
}).then((response) => {
console.log(response);
refreshImage();
});
}
function refreshImage() {
imageRef.current.src = "";
imageRef.current.src = SERVER_URL + "/photo/my?team=" + teamId.toString() + "&t=" + new Date().getTime();
}
return (
<div className='h-full flex flex-col items-center justify-center'>
<div className='text-4xl text-center'>
<div className='text-4xl mt-10 text-center'>
Equipe : {name}
</div>
<div className='text-2xl text-center'>
Jeu en préparation, veuillez patienter...
Jeu en préparation, veuillez patienter...
</div>
<div className="bottom-0 absolute text-sm text-center">
Vous avez perdu Le Jeu
<div className='text-2xl text-center my-10'>
<p>Uploadez une photo où tous les membres de l'équipe sont visibles</p>
<input type="file" name="file" accept="image/*" className=" my-5 block w-full text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"/>
<div className="h-20">
<GreenButton onClick={sendImage}>Envoyer</GreenButton>
</div>
</div>
{teamId && <img ref={imageRef} src={SERVER_URL + "/photo/my?team=" + teamId.toString()} className='w-screen h-1/2 object-contain' />}
<img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
</div>
)