tuxman/client/js/main.js

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";

const join = document.getElementById("join")
const lobby = document.getElementById("lobby")
lobby.style.display = "none"

join.onsubmit = async function(event) {
    event.preventDefault()
    
    const room_code = this.elements.room_code.value.trim()
    const player_name = this.elements.name.value.trim()

    if (room_code == '') {
        alert('Please enter a room code')
        return
    }

    if (player_name == '') {
        alert('Please enter a player name')
        return
    }
    
    join.style.display = "none"

    startGame(room_code, player_name)
}

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
            }

            let players = Object.values(start_data.data.players).filter(p => { return p.name !== undefined })
            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
	    }
    );
}