86 lines
2.7 KiB
TypeScript
86 lines
2.7 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'
|
|
|
|
interface UpperPanelProps {
|
|
connectedLocations: Location[] | null
|
|
teamPJs: PJ[] | null
|
|
currentLocation: Location | null
|
|
logLines: LogLine[] | 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
|
|
if (!(teamPJs !== null && currentLocation !== null && connectedLocations !== null)) {
|
|
return (
|
|
<>
|
|
<p>Esperando datos...</p>
|
|
</>
|
|
)
|
|
}
|
|
function generateLog (): React.ReactNode {
|
|
if (logLines === null || logLines.length < 1) {
|
|
return (
|
|
<>No log</>
|
|
)
|
|
}
|
|
return logLines.map((item, i) => {
|
|
return <>
|
|
<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/>
|
|
</>
|
|
})
|
|
}
|
|
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="#">{item.area.name}/{item.location.name}</a>
|
|
</li>
|
|
})
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|