changed buttons for a drawer in the track page

traque-back/game.js

@@ -15,11 +15,15 @@ export default class Game {
     getNewTeamId() {
         let id = null;
         while(id === null || this.teams.find(t => t.id === id)) {
-            id = Math.floor(Math.random() * 1000000);
+            id = Math.floor(Math.random() * 1_000_000);
         }
         return id;
     }
 
+    createCaptureCode() {
+        return Math.floor(Math.random() * 10000)
+    }
+
     addTeam(teamName) {
         let id = this.getNewTeamId();
         this.teams.push({
@@ -27,9 +31,10 @@ export default class Game {
             name: teamName,
             chasing: null,
             chased: null,
-            currentLocation: [0, 0],
-            lastSentLocation: [0, 0],
-            enemyLocation: [0, 0],
+            currentLocation: null,
+            lastSentLocation: null,
+            enemyLocation: null,
+            captureCode: this.createCaptureCode(),
             sockets: []
         });
         this.updateTeamChasing();

traque-front/app/team/track/page.js

@@ -1,4 +1,5 @@
 "use client";
+import ActionDrawer from '@/components/team/actionDrawer';
 import Button from '@/components/util/button';
 import useGame from '@/hook/useGame';
 import dynamic from 'next/dynamic';
@@ -11,7 +12,7 @@ const LiveMap = dynamic(() => import('@/components/team/map'), {
 });
 
 export default function Track() {
-    const { currentPosition, enemyPosition, loggedIn, sendCurrentPosition } = useGame();
+    const { currentPosition, enemyPosition, loggedIn } = useGame();
     useEffect(() => {
         if (!loggedIn) {
             redirect("/team");
@@ -20,22 +21,9 @@ export default function Track() {
 
 
     return (
-        <div className='h-full flex flex-col justify-between justify-items-stretch'>
-            <div className='h-5/6'>
-                <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition}/>
-            </div>
-            <div className="h-1/6">
-                <Button onClick={sendCurrentPosition}>Update position</Button>
-            </div>
-            <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 className='h-full'>
+            <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition}/>
+            <ActionDrawer />
         </div>
     )
 }

traque-front/components/admin/teamEdit.jsx

@@ -51,10 +51,11 @@ export default function TeamEdit({selectedTeamId, setSelectedTeamId}) {
         <div className='w-1/2 flex flex-col space-y-2 mx-2'>
             <h2 className='text-2xl text-center'>Team details</h2>
             <div>
-                <p>Secret : {team.id}</p>
+                <p>Secret : {String(team.id).padStart(6,'0')}</p>
                 <p>Name : {team.name}</p>
                 <p>Chasing : {getTeamName(team.chasing)}</p>
                 <p>Chased by : {getTeamName(team.chased)}</p>
+                <p>Capture code : {String(team.captureCode).padStart(4,'0')}</p>
             </div>
         </div>
     </div>

traque-front/components/team/actionDrawer.jsx

@@ -0,0 +1,41 @@
+import useGame from "@/hook/useGame";
+import { useState } from "react"
+import Button from "../util/button";
+import TextInput from "../util/textInput";
+
+export default function ActionDrawer() {
+    const [visible, setVisible] = useState(false);
+    const { sendCurrentPosition } = useGame();
+
+    return (
+        <div className={"absolute w-screen  bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-5/6" : "h-20")}>
+            <img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
+            {visible && <div className="flex flex-col w-full h-full">
+                <div className="h-20 my-2">
+                    <Button onClick={sendCurrentPosition} className="h-10">Update position</Button>
+                </div>
+                <div className="my-2">
+                    <div className="h-20">
+                        <TextInput placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
+                    </div>
+                    <div className="h-20">
+                        <Button onClick={sendCurrentPosition}>Capture target</Button>
+                    </div>
+                </div>
+                <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 className="h-20 mb-0 mt-auto">
+                        <Button onClick={sendCurrentPosition}>Log out</Button>
+                </div>
+            </div>
+            }
+        </div>
+    )
+}

traque-front/components/team/map.jsx

@@ -26,7 +26,7 @@ function MapPan(props) {
 export default function LiveMap({enemyPosition, currentPosition, ...props}) {
 
     return (
-        <MapContainer  {...props} className='min-h-full' center={[0,0]} zoom={0} scrollWheelZoom={true}>
+        <MapContainer  {...props} className='min-h-full z-0' center={[0,0]} zoom={0} 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"

traque-front/components/util/button.jsx

@@ -1,5 +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 h-full p-4 shadow-sm rounded">
+    return (<button {...props} className={props.className + " bg-blue-600 hover:bg-blue-500 ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded"}>
         {children}
     </button>)
 }

traque-front/components/util/textInput.jsx

@@ -2,6 +2,6 @@ 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" />
+    <input {...props} type="text" className="block w-full h-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/context/teamConnexionContext.jsx

@@ -1,16 +1,22 @@
 "use client";
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { useSocket } from "./socketContext";
 import { useSocketListener } from "@/hook/useSocketListener";
+import { useLocalStorage } from "@/hook/useLocalStorage";
 
 const teamConnexionContext = createContext();
 const TeamConnexionProvider = ({ children }) => {
     const [loggedIn, setLoggedIn] = useState(false);
-    const [teamId, setTeamId] = useState(null);
+    const [teamId, setTeamId] = useLocalStorage("team_id", null);
     const { teamSocket } = useSocket();
-    
+
+    useEffect(() => {
+        if (teamId && !loggedIn) {
+            teamSocket.emit("login", teamId);
+        }
+    }, [teamId]);
+
     function login(id) {
-        teamSocket.emit("login", id);
         setTeamId(id);
     }