123 lines
3.9 KiB
TypeScript
123 lines
3.9 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>
|
|
movingTo: Location | null
|
|
remainingFrames: number | null
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
function availableLocationsToMove (): JSX.Element {
|
|
if (connectedLocations === null || connectedLocations.length === 0) {
|
|
return (
|
|
<>
|
|
</>
|
|
)
|
|
}
|
|
return (
|
|
<>
|
|
<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>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function showLocationMenuHeaderText (): JSX.Element {
|
|
if (currentLocation === null) {
|
|
return <></>
|
|
}
|
|
if (props.movingTo === null) {
|
|
return <p>Estás en <span style={{ color: 'red' }}>{currentLocation.area.name}</span>
|
|
/
|
|
<span style={{ color: 'green' }}>{currentLocation.location.name}</span>.
|
|
</p>
|
|
}
|
|
return <p>Estás yendo a <span style={{ color: 'red' }}>{props.movingTo.area.name}</span>
|
|
/
|
|
<span style={{ color: 'green' }}>{props.movingTo.location.name}</span>.
|
|
</p>
|
|
}
|
|
|
|
function showRemainingFrames (): JSX.Element {
|
|
if (props.movingTo === null) {
|
|
return <></>
|
|
}
|
|
if (props.remainingFrames === null) {
|
|
return <></>
|
|
}
|
|
return (
|
|
<p>Te quedan <b>{props.remainingFrames}</b> frames para terminar la acción.</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Presentation>
|
|
<PresentationItem>
|
|
{
|
|
teamPJs.map((item, i) => {
|
|
return <PJListItem key={i} pj={item}/>
|
|
})
|
|
}
|
|
</PresentationItem>
|
|
<PresentationItem presentationItemRef={logPresentationRef}>
|
|
<LogPanel logLines={logLines}/>
|
|
</PresentationItem>
|
|
<PresentationItem>
|
|
{
|
|
showLocationMenuHeaderText()
|
|
}
|
|
{
|
|
showRemainingFrames()
|
|
}
|
|
{
|
|
availableLocationsToMove()
|
|
}
|
|
</PresentationItem>
|
|
</Presentation>
|
|
)
|
|
}
|