82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import * as React from 'react'
|
|
|
|
import type { PJ } from '@lastres/pj'
|
|
import type { Location } from '@lastres/location'
|
|
import type { LogLine } from '@lastres/log-line'
|
|
|
|
import UpperPanel from '@lastres/components/upper-panel'
|
|
import BottomPanel from '@lastres/components/bottom-panel'
|
|
import PJSelectionMenu from '@lastres/components/pj-selection-menu'
|
|
import OutputPacketInit from '@lastres/output-packet/init'
|
|
import OutputPacketPing from '@lastres/output-packet/ping'
|
|
import InputPackets from '@lastres/input-packets'
|
|
|
|
export interface GameProps {
|
|
setSelectedPJ: (set: PJ | null) => void
|
|
selectedPJ: PJ | null
|
|
userWantsToCreatePJ: boolean
|
|
setUserWantsToCreatePJ: (set: boolean) => void
|
|
error: string | null
|
|
setError: (set: string | null) => void
|
|
}
|
|
|
|
export default function Game (props: GameProps): JSX.Element {
|
|
const selectedPJ = props.selectedPJ
|
|
if (selectedPJ === null) {
|
|
return (
|
|
<>
|
|
<PJSelectionMenu
|
|
setSelectedPJ={props.setSelectedPJ}
|
|
userWantsToCreatePJ={props.userWantsToCreatePJ}
|
|
setUserWantsToCreatePJ={props.setUserWantsToCreatePJ}
|
|
error={props.error}
|
|
setError={props.setError}/>
|
|
</>
|
|
)
|
|
}
|
|
const [websocket, setWebsocket] = React.useState<WebSocket | null>(null)
|
|
const [teamPJs, setTeamPJs] = React.useState<PJ[] | null>(null)
|
|
const [currentLocation, setCurrentLocation] = React.useState<Location | null>(null)
|
|
const [connectedLocations, setConnectedLocations] = React.useState<Location[] | null>(null)
|
|
const [logLines, setLogLines] = React.useState<LogLine[] | null>(null)
|
|
if (websocket === null) {
|
|
window.setTimeout(() => {
|
|
const locationProtocol = window.location.protocol
|
|
if (locationProtocol == null) {
|
|
return
|
|
}
|
|
const protocol = locationProtocol.match(/https:/) != null ? 'wss' : 'ws'
|
|
const webSocket = new WebSocket(`${protocol}://${window.location.host}/ws`)
|
|
webSocket.onopen = () => {
|
|
new OutputPacketInit(selectedPJ.uuid).send(webSocket)
|
|
let interval: number = 0
|
|
interval = window.setInterval(() => {
|
|
if (webSocket.readyState === WebSocket.OPEN) {
|
|
new OutputPacketPing().send(webSocket)
|
|
return
|
|
}
|
|
window.clearInterval(interval)
|
|
}, 10000)
|
|
}
|
|
const inputPackets = new InputPackets(setTeamPJs, setCurrentLocation, setConnectedLocations, setLogLines)
|
|
webSocket.onmessage = (event) => {
|
|
const packet = JSON.parse(event.data)
|
|
inputPackets.handle(packet)
|
|
}
|
|
webSocket.onerror = (event) => {
|
|
console.log(event)
|
|
}
|
|
setWebsocket(webSocket)
|
|
}, 1)
|
|
}
|
|
return (
|
|
<>
|
|
<UpperPanel teamPJs={teamPJs}
|
|
currentLocation={currentLocation}
|
|
connectedLocations={connectedLocations}
|
|
logLines={logLines}/>
|
|
<BottomPanel/>
|
|
</>
|
|
)
|
|
}
|