diff --git a/traque-front/Dockerfile b/traque-front/Dockerfile index 3e0d025..aecbc42 100644 --- a/traque-front/Dockerfile +++ b/traque-front/Dockerfile @@ -1,56 +1,17 @@ -FROM node:22-alpine AS base +FROM node:22-alpine -# Install dependencies only when needed -FROM base AS deps -# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. -RUN apk add --no-cache libc6-compat WORKDIR /app +RUN apk add --no-cache libc6-compat + COPY package.json package-lock.json* ./ -RUN npm ci +RUN npm install - -# Rebuild the source code only when needed -FROM base AS builder -WORKDIR /app -COPY --from=deps /app/node_modules ./node_modules COPY . . -# Next.js collects completely anonymous telemetry data about general usage. -# Learn more here: https://nextjs.org/telemetry -# Uncomment the following line in case you want to disable telemetry during the build. +ENV NODE_ENV development ENV NEXT_TELEMETRY_DISABLED 1 -RUN npm run build - -# Production image, copy all the files and run next -FROM base AS runner -WORKDIR /app - -ENV NODE_ENV production -# Uncomment the following line in case you want to disable telemetry during runtime. -ENV NEXT_TELEMETRY_DISABLED 1 - -RUN addgroup --system --gid 1001 nodejs -RUN adduser --system --uid 1001 nextjs - -COPY --from=builder /app/public ./public - -# Set the correct permission for prerender cache -RUN mkdir .next -RUN chown nextjs:nodejs .next - -# Automatically leverage output traces to reduce image size -# https://nextjs.org/docs/advanced-features/output-file-tracing -COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ -COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static - -USER nextjs - EXPOSE 3000 -ENV PORT 3000 - -# server.js is created by next build from the standalone output -# https://nextjs.org/docs/pages/api-reference/next-config-js/output -CMD HOSTNAME="0.0.0.0" node server.js +CMD ["npm", "run", "dev"] \ No newline at end of file diff --git a/traque-front/app/admin/page.js b/traque-front/app/admin/page.js index 6b74993..37f99e6 100644 --- a/traque-front/app/admin/page.js +++ b/traque-front/app/admin/page.js @@ -7,6 +7,7 @@ import React, { useState } from 'react' import TeamEdit from '@/components/admin/teamEdit'; import TeamAddForm from '@/components/admin/teamAdd'; import Link from "next/link"; +import TeamInformation from "@/components/admin/teamInformation"; const LiveMap = dynamic(() => import('@/components/admin/mapPicker').then((mod) => mod.LiveMap), { ssr: false @@ -29,7 +30,7 @@ export default function AdminPage() {
@@ -61,16 +62,15 @@ export default function AdminPage() {

Équipes

-
-
- +
+
-
+
+ {children} + , + panelRef.current + ); +} + const positionIcon = new L.Icon({ iconUrl: '/icons/location.png', iconSize: [30, 30], @@ -138,11 +184,15 @@ export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode, ) } -export function LiveMap() { +export function LiveMap({ selectedTeamId, setSelectedTeamId }) { const location = useLocation(Infinity); const [timeLeftNextZone, setTimeLeftNextZone] = useState(null); const { zone, zoneExtremities, teams, nextZoneDate, isShrinking , getTeam, gameState } = useAdmin(); + function handleMarkerClick(teamId) { + setSelectedTeamId(teamId); + } + const mapWrapperRef = useRef(null); const handleFullscreen = useCallback(() => { @@ -204,6 +254,14 @@ export function LiveMap() { )} + {selectedTeamId && ( + setSelectedTeamId(null)}> + setSelectedTeamId(null)} + /> + + )}
) diff --git a/traque-front/components/admin/teamInformation.jsx b/traque-front/components/admin/teamInformation.jsx new file mode 100644 index 0000000..6857fee --- /dev/null +++ b/traque-front/components/admin/teamInformation.jsx @@ -0,0 +1,75 @@ +import useAdmin from "@/hook/useAdmin"; + +function DotLine({ label, value }) { + return ( +
+ {label} + + {value} +
+ ); +} + +// ...existing imports... + +export default function TeamInformation({ selectedTeamId, onClose }) { + const { getTeam, getTeamName, teams } = useAdmin(); + const team = getTeam(selectedTeamId); + + if (!team) return null; + + function formatTime(seconds) { + if (!seconds || seconds < 0) return "—"; + const m = Math.floor(seconds / 60); + const s = Math.floor(seconds % 60); + return `${m}:${s.toString().padStart(2, "0")}`; + } + + // Determine image source + const imageSrc = team.photoUrl && team.photoUrl.trim() !== "" + ? team.photoUrl + : "/images/missing_image.jpg"; + + return ( +
+ +
+ {team.captured ? "Capturée" : "En jeu"} +
+
+ {team.name} +
+
+ +
+ + +
+ + +
+ + + + + + + +
+ ); +} \ No newline at end of file diff --git a/traque-front/components/admin/teamList.jsx b/traque-front/components/admin/teamList.jsx index 47843e2..6cb878f 100644 --- a/traque-front/components/admin/teamList.jsx +++ b/traque-front/components/admin/teamList.jsx @@ -2,6 +2,7 @@ import useAdmin from '@/hook/useAdmin'; import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'; import React from 'react' +import { useFormStatus } from 'react-dom'; const reorder = (list, startIndex, endIndex) => { const result = Array.from(list); @@ -11,7 +12,16 @@ const reorder = (list, startIndex, endIndex) => { return result; }; -function TeamListItem({ team, index, onSelected, itemSelected }) {; +const TEAM_STATUS = { + playing: { label: "En jeu", color: "text-custom-green" }, + captured: { label: "Capturée", color: "text-custom-red" }, + outofzone: { label: "Hors zone", color: "text-custom-orange" }, + ready: { label: "Prête", color: "text-custom-blue" }, + notready: { label: "En préparation", color: "text-custom-grey" }, +}; + +function TeamListItem({ team, index, onSelected, itemSelected }) { + const status = TEAM_STATUS.captured; //Il faudrait ici implementer la logique, ce qui est normalement pas trop difficile return ( onSelected(team.id)}> {provided => ( @@ -24,8 +34,8 @@ function TeamListItem({ team, index, onSelected, itemSelected }) {;

{team.name}

-

- {team.state === team.captured ? "En jeu" : "Capturé"} +

+ {status.label}

diff --git a/traque-front/hook/useAdmin.jsx b/traque-front/hook/useAdmin.jsx index 2a692d9..8083b0e 100644 --- a/traque-front/hook/useAdmin.jsx +++ b/traque-front/hook/useAdmin.jsx @@ -11,6 +11,7 @@ export default function useAdmin() { } function getTeam(teamId) { + console.log(teams[0]); return teams.find(team => team.id === teamId); } diff --git a/traque-front/public/icons/backarrow.png b/traque-front/public/icons/backarrow.png new file mode 100644 index 0000000..806ff29 Binary files /dev/null and b/traque-front/public/icons/backarrow.png differ diff --git a/traque-front/tailwind.config.js b/traque-front/tailwind.config.js index a7babb3..ddc9e8a 100644 --- a/traque-front/tailwind.config.js +++ b/traque-front/tailwind.config.js @@ -1,5 +1,16 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + theme: { + extend: { + colors: { + 'custom-green': '#19e119', + 'custom-red': '#e11919', + 'custom-orange': '#fa6400', + 'custom-blue': '#1e90ff', + 'custom-grey': '#808080', + } + } + }, mode: 'jit', content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}",