import { env } from 'next-runtime-env';
import { useEffect, useState } from "react";
import useAdmin from "@/hook/useAdmin";
import { getStatus } from '@/util/functions';
function DotLine({ label, value }) {
return (
{label}
{" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "}
{value}
);
}
function IconValue({ color, icon, value }) {
return (
{value}
);
}
export default function TeamSidePanel({ selectedTeamId, onClose }) {
const { getTeam, startDate, gameState } = useAdmin();
const [imgSrc, setImgSrc] = useState("");
const team = getTeam(selectedTeamId);
const NO_VALUE = "XX";
const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
const SERVER_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "http://" : "https://") + NEXT_PUBLIC_SOCKET_HOST + "/back";
useEffect(() => {
setImgSrc(`${SERVER_URL}/photo/my?team=${selectedTeamId}&t=${Date.now()}`);
}, [selectedTeamId]);
if (!team) return null;
function formatTime(startDate) {
// startDate in milliseconds
const date = team.captured ? team.finishDate : Date.now();
if (date == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
const seconds = Math.floor((date - startDate) / 1000);
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${s.toString().padStart(2, "0")}`;
}
function formatDistance(distance) {
// distance in meters
if (distance == null || distance < 0) return NO_VALUE + "km";
return `${Math.floor(distance / 100) / 10}km`;
}
function formatSpeed(distance, startDate) {
// distance in meters | startDate in milliseconds
const date = team.captured ? team.finishDate : Date.now();
if (distance == null || distance < 0 || date == null || startDate == null || date <= startDate) return NO_VALUE + "km/h";
const speed = distance / (date - startDate);
return `${Math.floor(speed * 36000) / 10}km/h`;
}
function formatDate(date) {
// date in milliseconds
const dateNow = Date.now();
if (date == null || dateNow <= date || dateNow - date >= 1_000_000) return NO_VALUE + "s";
return `${Math.floor((dateNow - date) / 1000)}s`;
}
return (
{getStatus(team, gameState).label}
{team.name ?? NO_VALUE}
0 ? "green" : "red"} icon="user" value={team.sockets.length ?? NO_VALUE} />
= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
);
}