72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import * as React from 'react'
|
|
import type { Location } from '@lastres/location'
|
|
import type { PJ } from '@lastres/pj'
|
|
import type { LogLine } from '@lastres/log-line'
|
|
import PJListItem from '@lastres/components/pj-list-item'
|
|
import PresentationItem from '@lastres/components/presentation-item'
|
|
import Presentation from '@lastres/components/presentation'
|
|
import LogPanel from '@lastres/components/log-panel'
|
|
import MoveToPacket from '@lastres/output-packet/move-to'
|
|
|
|
interface UpperPanelProps {
|
|
connectedLocations: Location[] | null
|
|
teamPJs: PJ[] | null
|
|
currentLocation: Location | null
|
|
logLines: LogLine[] | null
|
|
websocket: WebSocket | null
|
|
logPresentationRef: React.RefObject<HTMLDivElement>
|
|
}
|
|
|
|
export default function UpperPanel (props: UpperPanelProps): JSX.Element {
|
|
const connectedLocations = props.connectedLocations
|
|
const teamPJs = props.teamPJs
|
|
const currentLocation = props.currentLocation
|
|
const logLines = props.logLines
|
|
const websocket = props.websocket
|
|
const logPresentationRef = props.logPresentationRef
|
|
if (!(teamPJs !== null && currentLocation !== null && connectedLocations !== null)) {
|
|
return (
|
|
<>
|
|
<p>Esperando datos...</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function onClickLocation (item: Location): void {
|
|
const moveToPacket = new MoveToPacket(item)
|
|
if (websocket !== null) {
|
|
moveToPacket.send(websocket)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Presentation>
|
|
<PresentationItem>
|
|
{
|
|
teamPJs.map((item, i) => {
|
|
return <PJListItem key={i} pj={item}/>
|
|
})
|
|
}
|
|
</PresentationItem>
|
|
<PresentationItem presentationItemRef={logPresentationRef}>
|
|
<LogPanel logLines={logLines}/>
|
|
</PresentationItem>
|
|
<PresentationItem>
|
|
<p>Estás en {currentLocation.area.name}/{currentLocation.location.name}.</p>
|
|
<p>Puedes ir a:</p>
|
|
<ul>
|
|
{
|
|
connectedLocations.map((item, i) => {
|
|
return <li key={i}>
|
|
<a href="#" onClick={() => {
|
|
onClickLocation(item)
|
|
}}>{item.area.name}/{item.location.name}</a>
|
|
</li>
|
|
})
|
|
}
|
|
</ul>
|
|
</PresentationItem>
|
|
</Presentation>
|
|
)
|
|
}
|