42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

server reconciliation OK (a little rubberbanding)

Browse Source
This commit is contained in:
LuckyLaszlo
2022-11-23 10:43:12 +01:00
parent 2b9058ad49
commit 7d5895a6cc
10 changed files with 110 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/client/handleInput.ts
View File

@@ -1,13 +1,42 @@
import {pong, gc, clientInfo} from "./global.js"
import * as d from "./draw.js";
import { socket } from "./ws.js";
import {InputEnum} from "../shared_js/enums.js"
import {EventInput} from "../shared_js/class/Event.js"
import * as ev from "../shared_js/class/Event.js"
import * as en from "../shared_js/enums.js"
export let gridDisplay = false;
function handleInput(delta: number)
let actual_time: number = Date.now();
let last_time: number;
let delta_time: number;
class InputHistory {
input: en.InputEnum;
inputId: number;
deltaTime: number;
constructor(input: en.InputEnum, inputId: number, deltaTime: number) {
this.input = input;
this.inputId = inputId;
this.deltaTime = deltaTime;
}
}
const inputHistoryArr: InputHistory[] = [];
let id = 0;
/* idMax should be high enough to prevent duplicate "id" in "inputHistoryArr".
In theory a little more than (1000/handleInputIntervalMS) should be enough. */
const idMax = 999; // 999 arbitrary
function handleInput()
{
console.log("handleInput");
last_time = actual_time;
actual_time = Date.now();
delta_time = (actual_time - last_time) / 1000;
if (id > idMax) {
id = 0;
}
var keys = pong.keys;
if (keys.length == 0)
return;
@@ -22,28 +51,63 @@ function handleInput(delta: number)
gridDisplay = !gridDisplay;
pong.deleteKey("g");
}
playerMove(delta, keys);
playerMove(delta_time, keys);
}
function playerMove(delta: number, keys: string[])
{
if (keys.indexOf("w") != -1 || keys.indexOf("ArrowUp".toLowerCase()) != -1) {
socket.send(JSON.stringify(new EventInput(InputEnum.up)));
if (keys.indexOf("w") !== -1 || keys.indexOf("ArrowUp".toLowerCase()) !== -1) {
if (keys.indexOf("s") === -1 && keys.indexOf("ArrowDown".toLowerCase()) === -1) {
const input = new ev.EventInput(en.InputEnum.up, ++id);
inputHistoryArr.push(new InputHistory(input.input, input.inputId, delta));
socket.send(JSON.stringify(input));
playerMovePrediction(delta, input.input); // client prediction
}
}
if (keys.indexOf("s") != -1 || keys.indexOf("ArrowDown".toLowerCase()) != -1) {
socket.send(JSON.stringify(new EventInput(InputEnum.down)));
else if (keys.indexOf("s") !== -1 || keys.indexOf("ArrowDown".toLowerCase()) !== -1) {
const input = new ev.EventInput(en.InputEnum.down, ++id);
inputHistoryArr.push(new InputHistory(input.input, input.inputId, delta));
socket.send(JSON.stringify(input));
playerMovePrediction(delta, input.input); // client prediction
}
}
// prediction
function playerMovePrediction(delta: number, input: en.InputEnum)
{
// client prediction
const racket = clientInfo.racket;
racket.dir.y = 0;
if (keys.indexOf("w") != -1 || keys.indexOf("ArrowUp".toLowerCase()) != -1) {
if (input === en.InputEnum.up) {
racket.dir.y += -1;
}
if (keys.indexOf("s") != -1 || keys.indexOf("ArrowDown".toLowerCase()) != -1) {
else if (input === en.InputEnum.down) {
racket.dir.y += 1;
}
racket.moveAndCollide(delta, [gc.wallTop, gc.wallBottom]);
}
export {handleInput}
function repeatInput(lastInputId: number)
{
// server reconciliation
let i = inputHistoryArr.findIndex((value: InputHistory) => {
if (value.inputId === lastInputId) {
return true;
}
return false;
});
// console.log("repeatInput, lastInputId = " + lastInputId);
// console.log("repeatInput, before splice up to index " + i);
// console.log(inputHistoryArr);
inputHistoryArr.splice(0, i+1);
// console.log("repeatInput, after splice");
// console.log(inputHistoryArr);
inputHistoryArr.forEach((value: InputHistory) => {
playerMovePrediction(value.deltaTime, value.input);
});
}
export {handleInput, repeatInput}