added a form element and a map

README.md

@@ -1 +0,0 @@
-# traque

traque-front/app/page.js

@@ -1,10 +1,9 @@
+import LoginForm from "@/components/team/loginForm";
+
 export default function Home() {
   return (
     <div>
-      <h1>La Traque</h1>
+      <LoginForm />
-      <p>
-        La Traque est un jeu de rôle en ligne massivement multijoueur (MMORPG) qui se déroule dans un univers médiéval fantastique.
-      </p>
     </div>
   );
 }

traque-front/app/track/page.js

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic';
+import React from 'react'
+
+//Load the map without SSR
+const LiveMap = dynamic(() => import('@/components/team/map'), {
+  ssr: false
+});
+
+export default function Track() {
+  return (
+    <main>
+        <LiveMap className="h-full"/>
+    </main>
+  )
+}

traque-front/components/team/loginForm.jsx

@@ -0,0 +1,12 @@
+import Button from "./utill/button";
+import TextInput from "./utill/textInput";
+
+export default function LoginForm() {
+    return (
+        <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4">
+            <h1 className="text-2xl font-bold text-center text-gray-700">Connexion équipe</h1>
+            <TextInput placeholder="Code d'équipe" name="team-id" />
+            <Button type="submit">Se connecter</Button>
+        </form>
+    )
+}

traque-front/components/team/map.jsx

@@ -0,0 +1,23 @@
+'use client';
+import React from 'react'
+import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
+import "leaflet-defaulticon-compatibility";
+import "leaflet/dist/leaflet.css";
+
+export default function LiveMap({...props}) {
+    const position = [51.505, -0.09]
+    return (
+        <MapContainer {...props} center={position} zoom={13} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <Marker position={position}>
+                <Popup>
+                    A pretty CSS3 popup. <br /> Easily customizable.
+                </Popup>
+            </Marker>
+        </MapContainer>
+    )
+}

traque-front/components/team/utill/button.jsx

@@ -0,0 +1,5 @@
+export default function Button({ children, ...props }) {
+    return (<button {...props} className="bg-blue-600 hover:bg-blue-500 ease-out duration-200 text-white w-full p-4 shadow-sm rounded">
+        {children}
+    </button>)
+}

traque-front/components/team/utill/textInput.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function TextInput({...props}) {
+  return (
+    <input {...props} type="text" className="block w-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600" />
+  )
+}

traque-front/package-lock.json

@@ -8,9 +8,11 @@
       "name": "traque-front",
       "version": "0.1.0",
       "dependencies": {
+        "leaflet-defaulticon-compatibility": "^0.1.2",
         "next": "14.1.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-leaflet": "^4.2.1"
       },
       "devDependencies": {
         "autoprefixer": "^10.0.1",
@@ -428,6 +430,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.8.0.tgz",
@@ -3003,6 +3015,17 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "peer": true
+    },
+    "node_modules/leaflet-defaulticon-compatibility": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.2.tgz",
+      "integrity": "sha512-IrKagWxkTwzxUkFIumy/Zmo3ksjuAu3zEadtOuJcKzuXaD76Gwvg2Z1mLyx7y52ykOzM8rAH5ChBs4DnfdGa6Q=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3791,6 +3814,19 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

traque-front/package.json

@@ -10,15 +10,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "leaflet-defaulticon-compatibility": "^0.1.2",
+    "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.4"
+    "react-leaflet": "^4.2.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
     "eslint": "^8",
-    "eslint-config-next": "14.1.4"
+    "eslint-config-next": "14.1.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
   }
 }

traque-front/tailwind.config.js

@@ -5,15 +5,6 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {
-      colors: {
-      "orange" : "#F27127",
-      "white" : "#FFFFFF",
-      "gray" : "#333333",
-      "dark-blue" : "#13274A",
-      "light-blue" : "#2957A3",
-      }
-  },
   fontFamily: {
     sans: ["Inter", "sans-serif"],
     serif: ["Merriweather", "serif"],