2020-02-16 00:52:00 +00:00
|
|
|
|
|
|
|
import { Callbag } from "callbag";
|
2020-02-16 02:10:19 +00:00
|
|
|
import animationFrames from "callbag-animation-frames";
|
|
|
|
import map from "callbag-map";
|
2020-04-03 22:35:23 +00:00
|
|
|
import pipe from "callbag-pipe";
|
2020-02-16 00:52:00 +00:00
|
|
|
|
|
|
|
import { INPUT_FREQUENCY, LockstepProcessor, LockstepState } from "../Ecs/Lockstep";
|
|
|
|
|
|
|
|
export const enum MessageTypes {
|
2020-04-05 02:17:50 +00:00
|
|
|
/**
|
|
|
|
* Reserved, likely for transient messages that wouldn't make sense appearing in a replay
|
|
|
|
*/
|
2020-02-21 04:55:16 +00:00
|
|
|
META = 0,
|
2020-04-05 02:17:50 +00:00
|
|
|
/**
|
|
|
|
* From server: initialize client state / load new level, plus informing client of their "controller number"
|
|
|
|
* From client: (op only) force a new game state, likely loading a level
|
|
|
|
*/
|
2020-02-21 04:55:16 +00:00
|
|
|
SET_STATE = 1,
|
2020-04-05 02:17:50 +00:00
|
|
|
/**
|
|
|
|
* From server: array of canonical inputs for a frame
|
|
|
|
* From client: input for their controller for the next frame (TBD: strategy for handling late inputs)
|
|
|
|
*/
|
2020-02-21 04:55:16 +00:00
|
|
|
INPUT = 2,
|
2020-04-05 02:17:50 +00:00
|
|
|
/**
|
|
|
|
* From server: issue request for the current game state, with a cookie to identify the response
|
|
|
|
* From client: serialized game state, with the cookie of the request
|
|
|
|
*/
|
2020-02-21 04:55:16 +00:00
|
|
|
GET_STATE = 3,
|
2020-04-05 02:17:50 +00:00
|
|
|
/**
|
|
|
|
* For liveness checks / latency estimate. Echos a cookie.
|
|
|
|
* May be refactored into one of the above messages.
|
|
|
|
*/
|
2020-02-21 04:55:16 +00:00
|
|
|
PING = 4
|
2020-02-16 00:52:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export type Packet<TypeId, Payload> = { t: TypeId } & Payload;
|
|
|
|
|
|
|
|
export type ClientMessage<Input, State> =
|
2020-02-21 04:55:16 +00:00
|
|
|
| Packet<MessageTypes.SET_STATE, { s: Partial<State> }>
|
2020-04-05 02:17:50 +00:00
|
|
|
| Packet<MessageTypes.INPUT, { i: Input }>
|
|
|
|
| Packet<MessageTypes.GET_STATE, { c: number, s: State }>
|
|
|
|
| Packet<MessageTypes.PING, { z: number }>
|
|
|
|
;
|
2020-02-16 00:52:00 +00:00
|
|
|
|
|
|
|
export type ServerMessage<Input, State> =
|
2020-02-21 04:55:16 +00:00
|
|
|
| Packet<MessageTypes.SET_STATE, { s: Partial<State> }>
|
2020-04-05 02:17:50 +00:00
|
|
|
| Packet<MessageTypes.INPUT, { i: Input }>
|
|
|
|
| Packet<MessageTypes.GET_STATE, { c: number }>
|
|
|
|
| Packet<MessageTypes.PING, { z: number }>
|
|
|
|
;
|
2020-02-16 00:52:00 +00:00
|
|
|
|
2020-02-16 05:42:58 +00:00
|
|
|
export type Server<Input, State> = Callbag<ClientMessage<Input, State>, ServerMessage<Input, State>>;
|
2020-02-16 00:52:00 +00:00
|
|
|
|
|
|
|
export abstract class LockstepClient<Input, State> {
|
|
|
|
|
|
|
|
private state: LockstepState<Input, State>;
|
|
|
|
|
|
|
|
public constructor(
|
|
|
|
public readonly engine: LockstepProcessor<Input, State>,
|
|
|
|
) {
|
|
|
|
const initialState = this.initState({});
|
|
|
|
this.state = new LockstepState(initialState, engine);
|
|
|
|
}
|
|
|
|
|
|
|
|
public abstract initState(init: Partial<State>): State;
|
|
|
|
|
|
|
|
public abstract gatherInput(): Input;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Connect to a [perhaps emulated] server and return a disconnect callback
|
|
|
|
*/
|
|
|
|
public connect(server: Server<Input, State>): () => void {
|
|
|
|
let serverTalkback: Server<Input, State> | null = null;
|
|
|
|
|
|
|
|
const sampleInput = () => {
|
|
|
|
if (serverTalkback) {
|
|
|
|
const input = this.gatherInput();
|
|
|
|
this.state.addLocalInput(input);
|
2020-02-16 02:10:19 +00:00
|
|
|
serverTalkback(1, { t: MessageTypes.INPUT, i: input });
|
2020-02-16 00:52:00 +00:00
|
|
|
setTimeout(sampleInput, INPUT_FREQUENCY);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// connect to server
|
|
|
|
server(0, (mode: number, data: Server<Input, State> | ServerMessage<Input, State>) => {
|
|
|
|
if (mode == 0) {
|
|
|
|
serverTalkback = data as Server<Input, State>;
|
|
|
|
|
|
|
|
// kickoff input sender
|
|
|
|
setTimeout(sampleInput, INPUT_FREQUENCY);
|
|
|
|
} else if (mode == 1) {
|
|
|
|
// server message
|
|
|
|
const message = data as ServerMessage<Input, State>;
|
2020-02-16 02:10:19 +00:00
|
|
|
switch (message.t) {
|
2020-02-21 04:55:16 +00:00
|
|
|
case MessageTypes.SET_STATE:
|
2020-02-16 00:52:00 +00:00
|
|
|
const resetState = this.initState(message.s);
|
|
|
|
this.state = new LockstepState(resetState, this.engine);
|
|
|
|
break;
|
|
|
|
case MessageTypes.INPUT:
|
|
|
|
this.state.addCanonInput(message.i);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
} else if (mode == 2) {
|
|
|
|
// disconnected
|
|
|
|
console.log("Disconnected from server", data);
|
|
|
|
serverTalkback = null;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// disposal
|
|
|
|
return () => {
|
|
|
|
serverTalkback?.(2);
|
|
|
|
serverTalkback = null;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-04-03 22:35:23 +00:00
|
|
|
public renderFrames = pipe(
|
|
|
|
animationFrames,
|
|
|
|
map(_ms => this.state.getStateToRender())
|
|
|
|
);
|
2020-02-16 02:10:19 +00:00
|
|
|
}
|