+
+ )
+}
diff --git a/js-src/components/pj-list-selection.tsx b/js-src/components/pj-list-selection.tsx
index 0cf68da..4503676 100644
--- a/js-src/components/pj-list-selection.tsx
+++ b/js-src/components/pj-list-selection.tsx
@@ -1,5 +1,5 @@
import * as React from 'react'
-import { PJ } from '@lastres/pj'
+import type { PJ } from '@lastres/pj'
import PJHealthLikeBar from '@lastres/components/pj-health-like-bar'
interface PJListSelectionProps {
@@ -7,7 +7,7 @@ interface PJListSelectionProps {
setSelectedPJ: (set: PJ | null) => void
}
-export default function PJListSelection(props: PJListSelectionProps) {
+export default function PJListSelection (props: PJListSelectionProps): JSX.Element {
const pjs = props.pjs
if (pjs === null) {
return (
@@ -18,24 +18,21 @@ export default function PJListSelection(props: PJListSelectionProps) {
return (
<>
{
- pjs.map( (item, i) =>
- {
- props.setSelectedPJ(item)
- }}
- href="#"
- key={i}>
+ pjs.map((item, i) =>
+ {
+ props.setSelectedPJ(item)
+ }} href="#" key={i}>
{item.full_name}
{item.short_name}
{item.nick}
- )
+ )
}
)
diff --git a/js-src/components/upper-panel.tsx b/js-src/components/upper-panel.tsx
index 46ccdfc..44be36f 100644
--- a/js-src/components/upper-panel.tsx
+++ b/js-src/components/upper-panel.tsx
@@ -1,7 +1,85 @@
import * as React from 'react'
-export default function UpperPanel (): JSX.Element {
+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 (
+ <>
+
+ {
+ avatar()
+ }
+
+
+
+ {pj.nick}
+ + +Esperando datos...
+ + ) + } + function generateLog (): React.ReactNode { + if (logLines === null || logLines.length < 1) { + return ( + <>No log + ) + } + return logLines.map((item, i) => { + return <> + {item.date} { + 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 {item.text} + }) + }+ + }) + } return ( - <> - +
+
)
}
diff --git a/js-src/input-packet.ts b/js-src/input-packet.ts
new file mode 100644
index 0000000..b73a38a
--- /dev/null
+++ b/js-src/input-packet.ts
@@ -0,0 +1,20 @@
+interface InputPacketJSONDecoded {
+ command: string
+ data: any
+}
+
+type onReceiveCallback = (data: any) => void
+export default abstract class InputPacket {
+ onreceive: onReceiveCallback | null = null
+
+ onReceive (callback: onReceiveCallback): void {
+ this.onreceive = callback
+ }
+ abstract identifier (): string
+
+ recv (packet: InputPacketJSONDecoded): void {
+ if (this.onreceive !== null) {
+ this.onreceive(packet.data)
+ }
+ }
+}
diff --git a/js-src/input-packet/info.ts b/js-src/input-packet/info.ts
new file mode 100644
index 0000000..2efefb2
--- /dev/null
+++ b/js-src/input-packet/info.ts
@@ -0,0 +1,6 @@
+import InputPacket from '@lastres/input-packet'
+export default class InputPacketInfo extends InputPacket {
+ identifier (): string {
+ return 'info'
+ }
+}
diff --git a/js-src/input-packet/pong.ts b/js-src/input-packet/pong.ts
new file mode 100644
index 0000000..77804b9
--- /dev/null
+++ b/js-src/input-packet/pong.ts
@@ -0,0 +1,6 @@
+import InputPacket from '@lastres/input-packet';
+export default class InputPacketPong extends InputPacket {
+ identifier() {
+ return 'pong'
+ }
+}
diff --git a/js-src/input-packets.ts b/js-src/input-packets.ts
new file mode 100644
index 0000000..ced2015
--- /dev/null
+++ b/js-src/input-packets.ts
@@ -0,0 +1,64 @@
+import type { PJ } from '@lastres/pj'
+import type { Location } from '@lastres/location'
+import type InputPacket from '@lastres/input-packet'
+import type { LogLine } from '@lastres/log-line'
+import InputPacketInfo from '@lastres/input-packet/info'
+import InputPacketPong from '@lastres/input-packet/pong'
+type SetTeamPJs = (set: PJ[] | null) => void
+type SetCurrentLocation = (set: Location | null) => void
+type SetConnectedLocations = (set: Location[] | null) => void
+type DispatchHash = Record
+ {
+ teamPJs.map((item, i) => {
+ return
+ })
+ }
+
+
+
+
+ {
+ generateLog()
+ }
+
+
+ Estás en {currentLocation.area.name}/{currentLocation.location.name}.
+Puedes ir a:
+-
+ {
+ connectedLocations.map((item, i) => {
+ return
- + {item.area.name}/{item.location.name} + + }) + } +