tuxman/client/js/main.js

114 lines
3.1 KiB
JavaScript
Raw Normal View History

2023-06-14 01:18:01 +00:00
import { Game } from "./game.js";
import { startInputListener } from "./input.js";
import { multiplayer } from "./multiplayer.js";
import { advance, initState } from "./logic.js";
import { startGraphicsUpdater } from "./gfx/graphics.js";
2023-06-13 03:47:43 +00:00
2023-06-14 01:18:01 +00:00
const join = document.getElementById("join")
const lobby = document.getElementById("lobby")
lobby.style.display = "none"
2023-06-13 03:47:43 +00:00
2023-06-14 01:18:01 +00:00
join.onsubmit = async function(event) {
event.preventDefault()
const room_code = this.elements.room_code.value.trim()
const player_name = this.elements.name.value.trim()
2023-06-13 03:47:43 +00:00
2023-06-14 01:18:01 +00:00
if (room_code == '') {
alert('Please enter a room code')
return
}
2023-06-13 03:47:43 +00:00
2023-06-14 01:18:01 +00:00
if (player_name == '') {
alert('Please enter a player name')
return
}
join.style.display = "none"
2023-06-13 03:47:43 +00:00
2023-06-14 01:18:01 +00:00
startGame(room_code, player_name)
2023-06-13 03:47:43 +00:00
}
2023-06-14 01:18:01 +00:00
function startGame(code, name) {
const game = window.game = new Game(3000, advance);
const fps = 60;
let delay = 3;
// set up the game up
// const ui = document.getElementById("ui");
// ui.style.display = "block";
multiplayer(
game,
code,
(startFrame, latency, player, update, ping, desyncCheck) => {
// document.getElementById("desynccheck").onclick = function(e) {
// e.preventDefault();
// this.textContent = "check for desyncs: checking...";
// desyncCheck(game.currentFrame - 5)
// .then(res => {
// this.textContent = "check for desyncs: " + (res ? "desync" : "no desync");
// });
// }
console.log("started game at frame", startFrame);
window.desyncCheck = () => desyncCheck(game.currentFrame - 5);
lobby.style.display = ""
let startTs = performance.now() - latency;
let lastFrame = startFrame;
update({
name,
}, startFrame + 1);
const getInput = startInputListener();
const updateGraphics = startGraphicsUpdater();
const start_data = game.getHistory(startFrame)
if (start_data.data.started) {
alert('Room has already started')
return false
}
2023-06-14 02:22:42 +00:00
let players = Object.values(start_data.data.players).filter(p => { return p !== null && p.name !== undefined })
2023-06-14 01:18:01 +00:00
if (players.length >= 4) {
alert('Room is full')
return false
}
// main game loop
let lastTs = performance.now();
function f(ts) {
const frame = Math.floor((ts - startTs) / 1000 * fps) + startFrame;
if(frame !== lastFrame) { // update input once per frame, regardless of the display refresh rate
lastFrame = frame;
// gather input
const input = getInput();
// apply input
update(input, frame + delay);
}
// set up graphics
game.currentFrame = frame;
const data = game.getHistory(frame);
updateGraphics(data ? data.data : initState);
lastTs = ts;
requestAnimationFrame(f);
}
requestAnimationFrame(f);
if(startFrame === -1) {
update({
name,
}, 0);
}
return true
}
);
}