103 lines
3.3 KiB
TypeScript
103 lines
3.3 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 MoveToPacket from '@lastres/output-packet/move-to'
|
|
|
|
interface UpperPanelProps {
|
|
connectedLocations: Location[] | null
|
|
teamPJs: PJ[] | null
|
|
currentLocation: Location | null
|
|
logLines: LogLine[] | null
|
|
websocket: WebSocket | null
|
|
}
|
|
|
|
interface Style {
|
|
color?: string
|
|
background?: string
|
|
}
|
|
|
|
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
|
|
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 generateLog (): React.ReactNode {
|
|
if (logLines === null || logLines.length < 1) {
|
|
return (
|
|
<>No log</>
|
|
)
|
|
}
|
|
return logLines.sort(function (a: LogLine, b: LogLine): number {
|
|
const aDate = Date.parse(a.date)
|
|
const bDate = Date.parse(b.date)
|
|
return aDate - bDate
|
|
}).map((item, i) => {
|
|
return <span key={i}>
|
|
<b>{item.date}</b> {
|
|
item.content.map((item, i) => {
|
|
const style: Style = {}
|
|
if (item.color !== undefined) {
|
|
style.color = item.color
|
|
}
|
|
if (item.background !== undefined) {
|
|
style.background = item.background
|
|
}
|
|
return <span key={i} style={style}>{item.text}</span>
|
|
})
|
|
} <br/>
|
|
</span>
|
|
})
|
|
}
|
|
return (
|
|
<div className="presentation">
|
|
<div className="presentation-item">
|
|
{
|
|
teamPJs.map((item, i) => {
|
|
return <PJListItem key={i} pj={item}/>
|
|
})
|
|
}
|
|
</div>
|
|
<div className="presentation-item">
|
|
<code><pre>
|
|
{
|
|
generateLog()
|
|
}
|
|
</pre></code>
|
|
</div>
|
|
<div className="presentation-item">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|