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

cahnged design drawer

Browse Source 
improved map drawing tool
This commit is contained in:
Quentin Roussel
2024-03-29 16:01:03 +01:00
parent ed2e324a45
commit 198acdc699
5 changed files with 90 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ import { useLocation } from "@/hook/useLocation";
import { use, useEffect, useState } from "react"; import { use, useEffect, useState } from "react";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet"; import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
import { useMapCircleDraw } from "@/hook/mapDrawing";
function MapPan(props) { function MapPan(props) {
const map = useMap(); const map = useMap();
@@ -34,36 +35,26 @@ function MapEventListener({onClick, onMouseMove}) {
return null; return null;
} }
const DEFAULT_ZOOM = 17;
export function CircularAreaPicker({area, setArea, ...props}) { export function CircularAreaPicker({area, setArea, ...props}) {
const DEFAULT_ZOOM = 17;
const location = useLocation(Infinity); const location = useLocation(Infinity);
const [drawing, setDrawing] = useState(false); const {handleClick, handleMouseMove, center, radius} = useMapCircleDraw(area, setArea);
const [center, setCenter] = useState(area?.center || null); return (
const [radius, setRadius] = useState(area?.radius || null); <MapContainer {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
<TileLayer
useEffect(() => { attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
console.log(area) url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
setDrawing(false); />
setCenter(area?.center || null); {center && radius && <Circle center={center} radius={radius} fillColor="blue"/>}
setRadius(area?.radius || null); <MapPan center={location} zoom={DEFAULT_ZOOM} />
}, [area]) <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer>)
function handleClick(e) { }
if(!drawing) {
setCenter(e.latlng); export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
setRadius(null); const location = useLocation(Infinity);
setDrawing(true); const {handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius} = useMapCircleDraw(minArea, setMinArea);
} else { const {handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius} = useMapCircleDraw(maxArea, setMaxArea);
setDrawing(false);
setArea({center, radius});
}
}
function handleMouseMove(e) {
if(drawing) {
setRadius(e.latlng.distanceTo(center));
}
}
return ( return (
<MapContainer {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}> <MapContainer {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
<TileLayer <TileLayer

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

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import TextInput from '../util/textInput' import TextInput from '../util/textInput'
import BlueButton from '../util/button'; import BlueButton, { RedButton } from '../util/button';
import useAdmin from '@/hook/useAdmin'; import useAdmin from '@/hook/useAdmin';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
@@ -45,7 +45,8 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
<BlueButton type="submit">Rename</BlueButton> <BlueButton type="submit">Rename</BlueButton>
</div> </div>
</form> </form>
<BlueButton onClick={handleRemove}>Remove</BlueButton> <BlueButton onClick={() => updateTeam(team.id, {captured: !team.captured})}>{team.captured ? "Revive" : "Capture"}</BlueButton>
<RedButton onClick={handleRemove}>Remove</RedButton>
</div> </div>
<div className='w-1/2 flex flex-col space-y-2 mx-2'> <div className='w-1/2 flex flex-col space-y-2 mx-2'>
<h2 className='text-2xl text-center'>Team details</h2> <h2 className='text-2xl text-center'>Team details</h2>
@@ -55,6 +56,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
<p>Chasing : {getTeamName(team.chasing)}</p> <p>Chasing : {getTeamName(team.chasing)}</p>
<p>Chased by : {getTeamName(team.chased)}</p> <p>Chased by : {getTeamName(team.chased)}</p>
<p>Capture code : {String(team.captureCode).padStart(4, '0')}</p> <p>Capture code : {String(team.captureCode).padStart(4, '0')}</p>
<p>Captured : {team.captured ? "Yes" : "No"}</p>
</div> </div>
</div> </div>
</div> </div>

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

@@ -12,7 +12,16 @@ const reorder = (list, startIndex, endIndex) => {
}; };
function TeamListItem({ team, index, onSelected, itemSelected }) { function TeamListItem({ team, index, onSelected, itemSelected }) {
const classNames = 'w-full p-3 my-3 shadow ' + (itemSelected ? "bg-blue-400" : "bg-gray-100"); let bgColor;
if(itemSelected) {
bgColor = "bg-blue-400";
}else if(team.captured) {
bgColor = "bg-red-400";
}
else {
bgColor = "bg-gray-100";
}
const classNames = 'w-full p-3 my-3 shadow ' + (bgColor);
return ( return (
<Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}> <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
{provided => ( {provided => (

38
traque-front/components/team/actionDrawer.jsx
View File

@@ -2,18 +2,27 @@ import useGame from "@/hook/useGame";
import { useState } from "react" import { useState } from "react"
import BlueButton, { GreenButton, RedButton } from "../util/button"; import BlueButton, { GreenButton, RedButton } from "../util/button";
import TextInput from "../util/textInput"; import TextInput from "../util/textInput";
import { useTeamConnexion } from "@/context/teamConnexionContext";
export default function ActionDrawer() { export default function ActionDrawer() {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const { sendCurrentPosition, name } = useGame(); const { sendCurrentPosition, name, captureCode } = useGame();
const {logout} = useTeamConnexion();
return ( return (
<div className={"fixed w-screen bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}> <div className={"fixed w-screen bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
<img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} /> <img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
{visible && <div className="flex flex-col w-full h-full"> {visible && <div className="flex justify-between flex-col w-full h-full">
<div className='shadow-lg mt-0 p-1 flex flex-col text-center mb-1 mt-auto mx-auto w-4/5 rounded'> <div className="flex flex-row justify-around">
<img src="/icons/logout.png" onClick={logout} className='p-3 mx-2 w-14 h-14 bg-red-500 rounded-lg cursor-pointer bg-red z-20' />
</div>
<div className='shadow-2xl bg-white p-1 flex flex-col text-center mb-1 mx-auto w-4/5 rounded'>
<div> <div>
<span className='text-xl text-black'>{name}</span> <span className='text-2xl text-black'>{name}</span>
</div>
<div className='text-gray-700'>
<span> Capture code </span>
<span className='text-lg text-black'>{captureCode}</span>
</div> </div>
<div className='text-gray-700'> <div className='text-gray-700'>
<span className='text-lg text-black'>30min</span> <span className='text-lg text-black'>30min</span>
@@ -25,27 +34,22 @@ export default function ActionDrawer() {
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div> <div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
</div> </div>
</div> </div>
<div className="h-20 my-1"> <div className="h-20">
<BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton> <BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton>
</div> </div>
<div className="h-20 my-1"> <div className="p-5 shadow-lg bg-white">
<BlueButton onClick={sendCurrentPosition} className="h-10">Message log</BlueButton> <div className="text-center text-2xl">Target</div>
</div> <div className="h-20 my-1">
<div className="h-20 my-1"> <GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
<GreenButton onClick={sendCurrentPosition}>See target info</GreenButton> </div>
</div>
<div className="mt-1 mb-auto">
<div className="h-20 flex flex-row"> <div className="h-20 flex flex-row">
<TextInput inputMode="numeric" placeholder="Enemy code" onClick={(i) => { console.log(i) }} /> <TextInput inputMode="numeric" placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
<GreenButton onClick={sendCurrentPosition}>Capture target</GreenButton> <GreenButton onClick={sendCurrentPosition}>Capture target</GreenButton>
</div> </div>
</div> </div>
<div className="h-20 my-2"> <div className="h-20">
<RedButton onClick={sendCurrentPosition}>Signal emergency</RedButton> <RedButton onClick={sendCurrentPosition}>Signal emergency</RedButton>
</div> </div>
<div className="h-20 mb-0">
<RedButton color={"red"} onClick={sendCurrentPosition}>Log out</RedButton>
</div>
</div> </div>
} }
</div> </div>

37
traque-front/hook/mapDrawing.jsx Normal file
View File

@@ -0,0 +1,37 @@
import { useEffect, useState } from "react";
import { useLocation } from "./useLocation";
export function useMapCircleDraw(area, setArea) {
const [drawing, setDrawing] = useState(false);
const [center, setCenter] = useState(area?.center || null);
const [radius, setRadius] = useState(area?.radius || null);
useEffect(() => {
setDrawing(false);
setCenter(area?.center || null);
setRadius(area?.radius || null);
}, [area])
function handleClick(e) {
if(!drawing) {
setCenter(e.latlng);
setRadius(null);
setDrawing(true);
} else {
setDrawing(false);
setArea({center, radius});
}
}
function handleMouseMove(e) {
if(drawing) {
setRadius(e.latlng.distanceTo(center));
}
}
return {
handleClick,
handleMouseMove,
center,
radius,
}
}