public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 02:10:18 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

design of the map component functional

Browse Source
This commit is contained in:
Quentin Roussel
2024-03-24 15:10:51 +01:00
parent b274bd4ad5
commit 2478ee32ec
8 changed files with 79 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
traque-front/app/layout.js
View File

@@ -10,7 +10,7 @@ export const metadata = {
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body className={inter.className + " h-screen"}>{children}</body>
</html>
);
}

43
traque-front/app/track/page.js
View File

@@ -1,15 +1,44 @@
"use client";
import Button from '@/components/util/button';
import dynamic from 'next/dynamic';
import React from 'react'
import React, { useEffect, useState } from 'react'
//Load the map without SSR
const LiveMap = dynamic(() => import('@/components/team/map'), {
ssr: false
ssr: false
});
export default function Track() {
return (
<main>
<LiveMap className="h-full"/>
</main>
)
const [currentPosition, setCurrentPosition] = useState([0,0]);
const [enemyPosition, setEnemyPosition] = useState([0,0]);
useEffect(() => {
const t = setTimeout(() => {
setEnemyPosition([currentPosition[0] + Math.random() / 100, currentPosition[1] + Math.random() / 100]);
}, 1000);
return () => clearInterval(t);
}, [currentPosition]);
useEffect(() => {
navigator.geolocation.watchPosition((position) => {
setCurrentPosition([position.coords.latitude, position.coords.longitude]);
});
}, []);
return (
<div className='h-full flex flex-col justify-between'>
<LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} className="h-4/5" />
<Button>Update position</Button>
<div className='shadow-lg m-5 p-2 flex flex-col text-center mx-auto w-4/5 rounded'>
<p className='text-xl text-black'>30min</p>
<p className='text-gray-700'> before penalty</p>
<div className='w-1/2 flex flex-row justify-center mx-auto'>
<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 className='min-h-5 m-2 min-w-5 bg-green-400'></div>
</div>
</div>
</div>
)
}