fix player not show to other and make game on all of the screen and also make player have gravity and jump

client.js
import kaplay from "kaplay";
import "kaplay/global";

const k = kaplay({
    width: 800, // Increased width to accommodate larger map
    height: 600, // Increased height to accommodate larger map
    scale: 2,
});

const tileSize = 36; // Increased tile size for larger map
const serverHost = 'localhost';
const serverPort = 25566;

let mapLayout = [];
let players = {};
let localPlayer = { 
    position: { x: 0, y: 0 }, 
    color: { r: 255, g: 255, b: 255 }, 
    name: "Player" + Math.floor(Math.random() * 1000) // Dynamic name
};
let socket;

let tileSprites = [];
let playerSprites = {};

// Utility to deserialize data from server
function deserialize(data) {
    try {
        return JSON.parse(data);
    } catch (error) {
        console.error("Deserialization error:", error);
        return null;
    }
}

// Load sprites
loadSprite("tile", "/sprites/grass.png");
loadSprite("player", "/sprites/player.png");

scene("game", () => {
    function drawMap() {
        tileSprites.forEach(tile => tile.destroy()); // Clear previous tiles
        tileSprites = [];  // Reset tile sprites array

        mapLayout.forEach((row, y) => {
            row.forEach((tile, x) => {
                if (tile === 1) {
                    const tileSprite = add([
                        sprite("tile"),
                        pos(x * tileSize, y * tileSize),
                        area(),
                        layer("tiles")
                    ]);
                    tileSprites.push(tileSprite);  // Store the tile sprite
                }
            });
        });
    }

    function drawPlayers() {
        // Update existing player sprites or add new ones
        Object.values(players).forEach(player => {
            if (playerSprites[player.id]) {
                // Update position and color
                playerSprites[player.id].pos = vec2(player.position.x, player.position.y);
                playerSprites[player.id].color = rgb(player.color.r, player.color.g, player.color.b);
            } else {
                // Add new player sprite
                playerSprites[player.id] = add([
                    sprite("player"),
                    pos(player.position.x, player.position.y),
                    color(player.color.r, player.color.g, player.color.b),
                    scale(2), // Increased scale for larger player
                    area(),
                    layer("players")
                ]);
            }
        });

        // Remove sprites of disconnected players
        for (let id in playerSprites) {
            if (!players[id]) {
                destroy(playerSprites[id]);
                delete playerSprites[id];
            }
        }
    }

    // Connect to the server
    connectToServer();

    // Player movement
    onKeyDown("left", () => {
        localPlayer.position.x -= tileSize;
        sendPlayerUpdate();
    });
    onKeyDown("right", () => {
        localPlayer.position.x += tileSize;
        sendPlayerUpdate();
    });
    onKeyDown("up", () => {
        localPlayer.position.y -= tileSize;
        sendPlayerUpdate();
    });
    onKeyDown("down", () => {
        localPlayer.position.y += tileSize;
        sendPlayerUpdate();
    });

    // Send local player position to server
    function sendPlayerUpdate() {
        if (socket.readyState === WebSocket.OPEN) {
            socket.send(JSON.stringify({
                position: localPlayer.position,
            }));
        }
    }

    // Update player positions and redraw the map on each frame
    onUpdate(() => {
        drawPlayers();
    });

    // Connect to the server function
    function connectToServer() {
        socket = new WebSocket(`ws://${serverHost}:${serverPort}`);

        socket.addEventListener("open", () => {
            console.log("Connected to server");
            socket.send(JSON.stringify({ name: localPlayer.name }));  // Send player name
        });

        socket.addEventListener("message", (event) => {
            const data = deserialize(event.data);  // Directly use event.data
            if (!data) return;

            if (data.map_layout) {
                mapLayout = data.map_layout;
                drawMap();  // Call drawMap() after updating the map layout
            }
            if (data.players) {
                players = data.players || players;
                drawPlayers();  // Call drawPlayers() after updating player data
            }
        });

        socket.addEventListener("close", () => {
            console.log("Disconnected from server");
        });
    }
});

// Start the game
go("game");


server.js
const WebSocket = require('ws');
const { randomInt } = require('crypto'); // For generating random integers
const { promisify } = require('util');
const setTimeoutPromise = promisify(setTimeout);

const PORT = 25566;
const players = {};
const tileSize = 36; // Updated to match client
const mapLayouts = [
    // Define map layouts here, example:
    [
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
    ],
    [
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
    ]
];

let currentMapLayout = mapLayouts[0];
const connections = [];

// Function to serialize data for sending to clients
function serialize(data) {
    return JSON.stringify(data);
}

// Function to get a random spawn position
function getRandomSpawnPosition() {
    const x = randomInt(0, currentMapLayout[0].length);
    const y = randomInt(0, currentMapLayout.length);
    return { x: x * tileSize, y: y * tileSize };
}

// Function to generate a random color
function generateColor() {
    return {
        r: randomInt(0, 256),
        g: randomInt(0, 256),
        b: randomInt(0, 256)
    };
}

// Function to change map layout periodically
async function changeMapLayoutPeriodically() {
    let mapIndex = 1; // Start from the second map since currentMapLayout is mapLayouts[0]
    while (true) {
        await setTimeoutPromise(60000); // Change map layout every 60 seconds
        currentMapLayout = mapLayouts[mapIndex];
        mapIndex = (mapIndex + 1) % mapLayouts.length;

        console.log("Map layout changed.");

        // Send the new map layout to all connected clients
        broadcast({ players, map_layout: currentMapLayout });
    }
}

// Broadcast utility
function broadcast(data) {
    const message = serialize(data);
    connections.forEach(ws => {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(message);
        }
    });
}

// Create WebSocket server
const wss = new WebSocket.Server({ port: PORT });

wss.on('connection', (ws) => {
    console.log('Client connected');
    connections.push(ws);

    // Assign a unique ID to each WebSocket connection
    ws.id = generateUniqueID();

    // Handle incoming messages from this client
    ws.on('message', (data) => {
        try {
            const message = JSON.parse(data);

            if (message.name) {
                // Initial connection message with player name
                const playerName = message.name;

                // Generate a unique spawn position
                const spawnPosition = getRandomSpawnPosition();

                // Initialize new player with a unique color and position
                players[ws.id] = { // Use the unique identifier as key
                    id: ws.id,
                    name: playerName,
                    position: spawnPosition,
                    color: generateColor()
                };

                // Send initial positions and map layout to the new client
                ws.send(serialize({ players, map_layout: currentMapLayout }));

                // Broadcast to others about the new player
                broadcast({ players, map_layout: currentMapLayout });

            } else if (message.position) {
                // Position update message
                if (players[ws.id]) {
                    players[ws.id].position = message.position;

                    // Broadcast updated positions to all clients
                    broadcast({ players, map_layout: currentMapLayout });
                }
            }

        } catch (e) {
            console.error(`Error processing data: ${e.message}`);
        }
    });

    ws.on('close', () => {
        console.log('Client disconnected');
        // Remove player from players object
        if (players[ws.id]) {
            delete players[ws.id];
        }
        connections.splice(connections.indexOf(ws), 1);

        // Inform remaining clients about the disconnected player
        broadcast({ players });
    });
});

// Function to generate a unique ID (simple incrementing counter or UUID)
let currentID = 1;
function generateUniqueID() {
    return currentID++;
}

// Start server and change map layout periodically
console.log(`WebSocket server running on ws://localhost:${PORT}`);
changeMapLayoutPeriodically();