Ajout zones en pavage + fix dockefiles

traque-front/components/team/actionDrawer.jsx

@@ -1,10 +1,9 @@
 import useGame from "@/hook/useGame";
 import { useEffect, useState } from "react"
-import BlueButton, { GreenButton, RedButton } from "../util/button";
-import TextInput from "../util/textInput";
-import { useTeamConnexion } from "@/context/teamConnexionContext";
-import { EnemyTeamModal } from "./enemyTeamModal";
-import Image from "next/image";
+import { BlueButton, GreenButton } from "../util/button";
+import { TextInput } from "../util/textInput";
+import useTeamConnexion from "@/context/teamConnexionContext";
+import EnemyTeamModal from "./enemyTeamModal";
 
 export default function ActionDrawer() {
     const [visible, setVisible] = useState(false);
@@ -73,4 +72,4 @@ export default function ActionDrawer() {
         <EnemyTeamModal visible={enemyModalVisible} onClose={() => setEnemyModalVisible(false)} />
         </div>
     )
-}
+}

traque-front/components/team/enemyTeamModal.jsx

@@ -1,11 +1,9 @@
 import useGame from "@/hook/useGame";
 import { RedButton } from "../util/button";
 import { useEffect, useRef } from "react";
-import Image from "next/image";
-
 import { env } from 'next-runtime-env';
 
-export function EnemyTeamModal({ visible, onClose }) {
+export default function EnemyTeamModal({ visible, onClose }) {
     const { teamId, enemyName } = useGame();
     const imageRef = useRef(null);
 
@@ -38,4 +36,4 @@ export function EnemyTeamModal({ visible, onClose }) {
             </div>
         </>
     )
-}
+}

traque-front/components/team/loginForm.jsx

@@ -1,7 +1,6 @@
-"use client";
 import { useState } from "react";
-import BlueButton from "../util/button";
-import TextInput from "../util/textInput";
+import { BlueButton } from "../util/button";
+import { TextInput } from "../util/textInput";
 
 export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
     const [value, setValue] = useState("");
@@ -17,4 +16,4 @@ export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
             <BlueButton type="submit">{buttonText}</BlueButton>
         </form>
     )
-}
+}

traque-front/components/team/map.jsx

@@ -1,15 +1,13 @@
-'use client';
 import React, { useEffect, useState } from 'react'
 import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
 import useGame from '@/hook/useGame';
-import { useTeamContext } from '@/context/teamContext';
+import useTeamContext from '@/context/teamContext';
 
 const DEFAULT_ZOOM = 14;
 
-
 // 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();

traque-front/components/team/notification.jsx

@@ -1,26 +1,29 @@
 import { useSocketListener } from "@/hook/useSocketListener";
 import { useEffect, useState } from "react";
 
-export function Notification({ socket }) {
+export default function Notification({ socket }) {
     const [visible, setVisible] = useState(false);
     const [timeoutId, setTimeoutId] = useState(null);
-
     const [notification, setNotification] = useState(null);
+
     useSocketListener(socket, "error", (notification) => {
         console.log("error", notification);
         setNotification({ type: "error", text: notification });
         setVisible(true);
     });
+
     useSocketListener(socket, "success", (notification) => {
         console.log("success", notification);
         setNotification({ type: "success", text: notification });
         setVisible(true);
     });
+
     useSocketListener(socket, "warning", (notification) => {
         console.log("warning", notification);
         setNotification({ type: "warning", text: notification });
         setVisible(true);
     });
+
     // Hide the notification after 5 seconds
     useEffect(() => {
         console.log({ visible });
@@ -34,12 +37,14 @@ export function Notification({ socket }) {
         }
     }, [visible]);
 
-    let bgColorMap = {
+    const bgColorMap = {
         error: "bg-red-500 text-white",
         success: "bg-green-500",
         warning: "bg-yellow-500"
     }
+
     const classNames = 'fixed relative w-11/12 p-5 z-30 mx-auto inset-x-0 flex justify-center rounded-xl transition-all shadow-xl ' + (visible ? "top-5 " : "-translate-y-full ");
+    
     return (
         Object.keys(bgColorMap).map((key) =>
             notification?.type == key &&
@@ -47,5 +52,5 @@ export function Notification({ socket }) {
                 <p className="absolute top-2 right-2 p-2 rounded-l text-3xl bg-white">x</p>
                 <p className='text-center text-xl'>{notification?.text}</p>
             </div>
-        ));
-}
+    ));
+}

traque-front/components/team/placementOverlay.jsx

@@ -1,6 +1,5 @@
-import { useTeamConnexion } from "@/context/teamConnexionContext";
+import useTeamConnexion from "@/context/teamConnexionContext";
 import useGame from "@/hook/useGame"
-import Image from "next/image";
 
 export default function PlacementOverlay() {
     const { name, ready } = useGame();

traque-front/components/team/waitingScreen.jsx

@@ -1,12 +1,10 @@
 import useGame from "@/hook/useGame"
 import { GreenButton, LogoutButton } from "../util/button";
 import { useRef } from "react";
-import Image from "next/image";
-import { useTeamContext } from "@/context/teamContext";
-
+import useTeamContext from "@/context/teamContext";
 import { env } from 'next-runtime-env';
 
-export function WaitingScreen() {
+export default function WaitingScreen() {
     const { name, teamId  } = useGame();
     const { gameSettings } = useTeamContext();
     const imageRef = useRef(null);