From b274bd4ad55bb66e62dcff1fc043dd1a99594836 Mon Sep 17 00:00:00 2001 From: Quentin Roussel Date: Sat, 23 Mar 2024 18:24:18 +0100 Subject: [PATCH] added a form element and a map --- README.md | 1 - traque-front/app/page.js | 7 ++-- traque-front/app/track/page.js | 15 ++++++++ traque-front/components/team/loginForm.jsx | 12 ++++++ traque-front/components/team/map.jsx | 23 +++++++++++ traque-front/components/team/utill/button.jsx | 5 +++ .../components/team/utill/textInput.jsx | 7 ++++ traque-front/package-lock.json | 38 ++++++++++++++++++- traque-front/package.json | 10 +++-- traque-front/tailwind.config.js | 9 ----- 10 files changed, 108 insertions(+), 19 deletions(-) delete mode 100644 README.md create mode 100644 traque-front/app/track/page.js create mode 100644 traque-front/components/team/loginForm.jsx create mode 100644 traque-front/components/team/map.jsx create mode 100644 traque-front/components/team/utill/button.jsx create mode 100644 traque-front/components/team/utill/textInput.jsx diff --git a/README.md b/README.md deleted file mode 100644 index 6e4a927..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# traque \ No newline at end of file diff --git a/traque-front/app/page.js b/traque-front/app/page.js index 8b385cd..aa20eab 100644 --- a/traque-front/app/page.js +++ b/traque-front/app/page.js @@ -1,10 +1,9 @@ +import LoginForm from "@/components/team/loginForm"; + export default function Home() { return (
-

La Traque

-

- La Traque est un jeu de rôle en ligne massivement multijoueur (MMORPG) qui se déroule dans un univers médiéval fantastique. -

+
); } diff --git a/traque-front/app/track/page.js b/traque-front/app/track/page.js new file mode 100644 index 0000000..28eb096 --- /dev/null +++ b/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 ( +
+ +
+ ) +} diff --git a/traque-front/components/team/loginForm.jsx b/traque-front/components/team/loginForm.jsx new file mode 100644 index 0000000..878ce2b --- /dev/null +++ b/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 ( +
+

Connexion équipe

+ + + + ) +} \ No newline at end of file diff --git a/traque-front/components/team/map.jsx b/traque-front/components/team/map.jsx new file mode 100644 index 0000000..69577c4 --- /dev/null +++ b/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 ( + + + + + A pretty CSS3 popup.
Easily customizable. + + + + ) +} diff --git a/traque-front/components/team/utill/button.jsx b/traque-front/components/team/utill/button.jsx new file mode 100644 index 0000000..3678a84 --- /dev/null +++ b/traque-front/components/team/utill/button.jsx @@ -0,0 +1,5 @@ +export default function Button({ children, ...props }) { + return () +} \ No newline at end of file diff --git a/traque-front/components/team/utill/textInput.jsx b/traque-front/components/team/utill/textInput.jsx new file mode 100644 index 0000000..403163c --- /dev/null +++ b/traque-front/components/team/utill/textInput.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function TextInput({...props}) { + return ( + + ) +} diff --git a/traque-front/package-lock.json b/traque-front/package-lock.json index f1420d6..20d7c23 100644 --- a/traque-front/package-lock.json +++ b/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", diff --git a/traque-front/package.json b/traque-front/package.json index bd7e9b7..1e2f2d2 100644 --- a/traque-front/package.json +++ b/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" } } diff --git a/traque-front/tailwind.config.js b/traque-front/tailwind.config.js index df9adb2..bfb8aee 100644 --- a/traque-front/tailwind.config.js +++ b/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"],